/* ============================================================================
   MIRA × Discourse Graphs — Shared Components
   Import AFTER tokens.css. These classes give every mockup one product feel.
   ============================================================================ */

/* ---- Node type badge (the little pill that labels a discourse node) ------- */
.ntype {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.ntype::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.ntype.question { color: var(--question-ink); background: var(--question-wash); border-color: var(--question-edge); }
.ntype.claim    { color: var(--claim-ink);    background: var(--claim-wash);    border-color: var(--claim-edge); }
.ntype.evidence { color: var(--evidence-ink); background: var(--evidence-wash); border-color: var(--evidence-edge); }
.ntype.study    { color: var(--study-ink);    background: var(--study-wash);    border-color: var(--study-edge); }
.ntype.protocol { color: var(--protocol-ink); background: var(--protocol-wash); border-color: var(--protocol-edge); }
.ntype.request  { color: var(--request-ink);  background: var(--request-wash);  border-color: var(--request-edge); }
.ntype.source   { color: var(--source-ink);   background: var(--source-wash);   border-color: var(--source-edge); }

/* ---- Node card (a discourse node rendered as a card) --------------------- */
.node {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--faint);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.node:hover { box-shadow: var(--shadow-2); }
.node .node-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 8px 0 4px; }
.node .node-body  { font-size: 13.5px; color: var(--ink-2); }
.node.question { border-left-color: var(--question-ink); }
.node.claim    { border-left-color: var(--claim-ink); }
.node.evidence { border-left-color: var(--evidence-ink); }
.node.study    { border-left-color: var(--study-ink); }
.node.protocol { border-left-color: var(--protocol-ink); }
.node.request  { border-left-color: var(--request-ink); }
.node.source   { border-left-color: var(--source-ink); }

/* a node that is NOT shared — greyed, dashed, "private" */
.node.private {
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, #efece4 8px, #efece4 16px);
  border-style: dashed; border-left-color: var(--private); color: var(--faint);
  box-shadow: none; opacity: .85;
}
.node.private .node-title { color: var(--private); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: all .18s var(--ease); white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-1); }
.btn.primary:hover { background: var(--brand-press); border-color: var(--brand-press); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---- Pointer chip (Pointers, not payloads — the R2 primitive) ------------ */
.pointer {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
  max-width: 100%;
}
.pointer .kind {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; color: #fff; background: var(--ink-2);
}
.pointer .kind.git { background: #24292f; }
.pointer .kind.s3  { background: #d9573f; }
.pointer .kind.local { background: #8a8f98; }
.pointer .kind.video { background: #b3358f; }
.pointer .path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Permission / share-level chips -------------------------------------- */
.lock { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color: var(--muted); }
.share-level {
  display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius: var(--r-pill);
  font-size:12px; font-weight:600; border:1px solid var(--line);
}
.share-level.private { background:#f1efe9; color: var(--private); }
.share-level.lab     { background: var(--study-wash); color: var(--study-ink); border-color: var(--study-edge); }
.share-level.public  { background: var(--claim-wash); color: var(--claim-ink); border-color: var(--claim-edge); }

/* ---- Edge label (the typed relation between two nodes) ------------------- */
.edge {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing:.04em;
  color: var(--muted); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
}
.edge.supports { color: var(--claim-ink); border-color: var(--claim-edge); }
.edge.opposes  { color: var(--evidence-ink); border-color: var(--evidence-edge); }
.edge.grounds, .edge.follows, .edge.uses { color: var(--study-ink); border-color: var(--study-edge); }
.edge.addresses { color: var(--question-ink); border-color: var(--question-edge); }
.edge.request_for, .edge.request_target { color: var(--request-ink); border-color: var(--request-edge); }

/* vertical connector used in traversal lists */
.connector { display:flex; flex-direction:column; align-items:center; color: var(--faint); }
.connector .line { width:2px; flex:1; background: var(--line); min-height: 14px; }

/* ---- Panels / cards ------------------------------------------------------ */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.panel.pad { padding: 20px; }
.divider { height:1px; background: var(--line); border:0; margin: 0; }

/* ---- Avatars / people ---------------------------------------------------- */
.avatar {
  width: 28px; height: 28px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
  font-size: 11.5px; font-weight: 700; color:#fff; flex: none; letter-spacing:.02em;
}
.avatar.sean  { background: linear-gradient(135deg, #3877cf, #4854bf); }
.avatar.kate  { background: linear-gradient(135deg, #2c9a61, #1b9a92); }
.avatar.anton { background: linear-gradient(135deg, #c2861a, #d9573f); }
.avatar.lab   { background: linear-gradient(135deg, #8460c5, #4854bf); }

/* ---- Toast / notification ------------------------------------------------ */
.toast {
  display:flex; gap:12px; align-items:flex-start; padding:13px 15px;
  background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.toast .dot { width:9px; height:9px; border-radius:50%; background: var(--brand); margin-top:5px; flex:none; }

/* ---- Step / progress rail ------------------------------------------------ */
.steps { display:flex; gap:0; }
.steps .step { display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--faint); font-weight:600; }
.steps .step .num { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; }
.steps .step.active { color: var(--ink); }
.steps .step.active .num { background: var(--brand); border-color: var(--brand); color:#fff; }
.steps .step.done .num { background: var(--claim-ink); border-color: var(--claim-ink); color:#fff; }
.steps .sep { width:34px; height:1.5px; background: var(--line); margin:0 10px; align-self:center; }

/* ---- Tags ---------------------------------------------------------------- */
.tag { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); border:1px solid var(--line-2); }

/* ---- Page scaffolding ---------------------------------------------------- */
.frame-caption {
  max-width: 880px; margin: 0 auto 18px; padding: 0 8px;
}
.frame-caption .eyebrow { display:block; margin-bottom:6px; }
.frame-caption h2 { font-size: 20px; margin-bottom: 4px; }
.frame-caption p { font-size: 13.5px; color: var(--muted); margin:0; }

/* a "screen" container that looks like a captured app window */
.screen {
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); overflow: hidden; max-width: 1080px; margin: 0 auto;
}

/* macOS-style window bar */
.winbar { display:flex; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--line); background: var(--surface-2); }
.winbar .lights { display:flex; gap:7px; }
.winbar .lights i { width:11px; height:11px; border-radius:50%; display:block; }
.winbar .lights i:nth-child(1){ background:#ff5f57; }
.winbar .lights i:nth-child(2){ background:#febc2e; }
.winbar .lights i:nth-child(3){ background:#28c840; }
.winbar .addr { font-family: var(--font-mono); font-size:12px; color: var(--muted); background: var(--paper); border:1px solid var(--line); border-radius: var(--r-pill); padding:5px 12px; }

/* keyboard hint */
.kbd { font-family: var(--font-mono); font-size:11px; padding:2px 6px; border-radius:5px; background: var(--surface-2); border:1px solid var(--line); border-bottom-width:2px; color: var(--muted); }

/* ---- Animation: staggered reveal ----------------------------------------- */
@keyframes rise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.reveal { opacity:0; animation: rise .6s var(--ease-out) forwards; }
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.19s}
.reveal.d4{animation-delay:.26s}.reveal.d5{animation-delay:.33s}.reveal.d6{animation-delay:.40s}
.reveal.d7{animation-delay:.47s}.reveal.d8{animation-delay:.54s}
@media (prefers-reduced-motion: reduce){ .reveal{animation:none;opacity:1;transform:none} }

@keyframes drawline { from { stroke-dashoffset: var(--len,200); } to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(72,84,191,.0);} 50%{ box-shadow:0 0 0 6px rgba(72,84,191,.10);} }
.pulse { animation: pulse 2.4s ease-in-out infinite; }

/* ============================================================================
   Low-shared-context extensions (publish to a public repository / database)
   Added for this repo on top of the shared kit. Cast = Quantum Biology Institute
   (Brian, Morgan); destinations = public web DB, Jupyter Book, desci/nanopub.
   ============================================================================ */

/* ---- Cast avatars (QBI) -------------------------------------------------- */
.avatar.brian  { background: linear-gradient(135deg, #3877cf, #1b9a92); }
.avatar.morgan { background: linear-gradient(135deg, #2c9a61, #3877cf); }
.avatar.qbi    { background: linear-gradient(135deg, #4854bf, #8460c5); }
.avatar.world  { background: linear-gradient(135deg, #6b7280, #3a3f47); } /* "anyone in the world" reader */

/* ---- Extra pointer kinds (curated dataset, archived data, DOI) ----------- */
.pointer .kind.data { background: #2c9a61; }   /* curated dataset / CSV for this graph */
.pointer .kind.doi  { background: #2f3a8c; }   /* minted DOI / citable handle           */
.pointer .kind.koi  { background: #4854bf; }   /* KOI RID / desci record                */

/* ---- Public-to-the-world share level ------------------------------------- */
.share-level.world {
  background: var(--brand-tint); color: var(--brand); border-color: #aeb4eb;
}
/* a "gated even though public" pill — public page, restricted resource */
.share-level.gated {
  background: var(--question-wash); color: var(--question-ink); border-color: var(--question-edge);
}

/* ---- Citation token (the "cite this result" chip / frozen version pin) ---- */
.cite {
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:11.5px;
  padding:6px 11px; border-radius: var(--r-sm); background: var(--surface);
  border:1px solid var(--line); color: var(--ink-2);
}
.cite .frozen { color: var(--brand); font-weight:600; }
.cite svg { width:13px; height:13px; stroke: currentColor; fill:none; stroke-width:2; }

/* ---- "Cited by / reused by" reuse signal --------------------------------- */
.reuse { display:inline-flex; align-items:center; gap:7px; font-size:12px; color: var(--muted); font-weight:600; }
.reuse b { color: var(--ink); }
.reuse .dotg { width:7px; height:7px; border-radius:50%; background: var(--claim-ink); }

/* ============================================================================
   Sean → Kate dashboard extensions (push results to a shared web interface)
   The CENTRAL use case: a producer (Sean, Vogel Lab) pushes a selected subgraph
   to a READ-ONLY shared dashboard a known collaborator / consortium (Kate's lab)
   navigates — public or password-protected — with a Request-back current.
   Cast avatars (.sean / .kate / .anton / .lab) are already defined above.
   ============================================================================ */

/* a grad-student reader + the Vogel-lab mark */
.avatar.grad  { background: linear-gradient(135deg, #1b9a92, #2c9a61); }
.avatar.vogel { background: linear-gradient(135deg, #3877cf, #2f3a8c); }

/* ---- Consortium (password-protected) share level ------------------------- */
/* public-to-the-world = .world ; restricted-resource = .gated ; consortium = key-gated */
.share-level.consortium {
  background: var(--request-wash); color: var(--request-ink); border-color: var(--request-edge);
}

/* ---- Candidate (provisional / informal) node — the pre-formalization step - */
.node.candidate {
  border-style: dashed; border-left-color: var(--faint); background: var(--surface-2);
}
.node.candidate .node-title { color: var(--muted); }
.ntype.candidate { color: var(--muted); background: var(--surface-2); border-color: var(--line-2); }
.ntype.candidate::before { border-radius: 50%; background: var(--faint); }

/* ---- Request chip (the request-back current: Kate → Sean) ---------------- */
.request {
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius: var(--r-pill);
  background: var(--request-wash); color: var(--request-ink); border:1px solid var(--request-edge);
}
.request svg { width:14px; height:14px; stroke: currentColor; fill:none; stroke-width:2; }
.request.open { background: var(--surface); border-style: dashed; }

/* ---- Dashboard view switcher (Graph · Kanban · Table) -------------------- */
.viewswitch { display:inline-flex; padding:3px; gap:2px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-pill); }
.viewswitch button {
  font-family: var(--font-body); font-size:12.5px; font-weight:600; color: var(--muted);
  padding:6px 14px; border:0; background:transparent; border-radius: var(--r-pill); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition: all .18s var(--ease);
}
.viewswitch button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.viewswitch button .ic { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ---- Preset-view chips (audience presets) -------------------------------- */
.preset { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius: var(--r-pill); background: var(--surface); border:1px dashed var(--line-2);
  color: var(--ink-2); cursor:pointer; transition: all .18s var(--ease); }
.preset:hover { border-color: var(--ink-2); }
.preset.active { background: var(--brand-tint); color: var(--brand); border-style:solid; border-color:#aeb4eb; }

/* ---- "everything in one place / searchable" search affordance ------------ */
.dash-search { display:flex; align-items:center; gap:9px; font-family: var(--font-body); font-size:13px;
  color: var(--muted); padding:8px 13px; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-pill); }
.dash-search svg { width:15px; height:15px; stroke: currentColor; fill:none; stroke-width:2; }

/* ============================================================================
   v0.2 extensions — the Jun 10 2026 Kate session (UX walkthrough)
   Eight changes the real PI's walkthrough added or changed. Atoms only;
   screen-specific layout stays in each screen's <style>. See
   ux-spec-update-2026-06-10-dashboard.md. Reduced-motion is handled at the end.
   ============================================================================ */

/* ---- 1 · Evidence card with embedded, progressively-disclosed method ------ */
/* "I'd never think about evidence and method separately" — result first, the
   method collapsed inline (native <details>), full study details one click on. */
.ecard {
  position:relative; min-width:0; background: var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--evidence-ink); border-radius: var(--r-md);
  padding:16px; box-shadow: var(--shadow-1);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ecard:hover { box-shadow: var(--shadow-2); }
.ecard__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.ecard__plot { margin-top:4px; border:1px solid var(--line); border-radius: var(--r-sm); overflow:hidden; background: var(--surface); }
.ecard__plot svg { width:100%; height:auto; display:block; }
.ecard__plot .pcap { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border-top:1px solid var(--line); background: var(--paper); }
.ecard__summary { font-family: var(--font-display); font-size:16.5px; line-height:1.3; margin:12px 0 0; color: var(--ink); }
.ecard__summary .accent { color: var(--evidence-ink); font-weight:600; font-style:italic; }
.ecard__caveats { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.ecard__caveats li { position:relative; padding-left:15px; font-size:12.5px; color: var(--muted); line-height:1.45; }
.ecard__caveats li::before { content:''; position:absolute; left:2px; top:7px; width:5px; height:5px; border-radius:50%; background: var(--evidence-edge); }
/* the collapsible embedded method — Study + Protocol, folded into the Evidence */
.ecard__method { margin-top:13px; border:1px solid var(--protocol-edge); border-radius: var(--r-md); background: var(--protocol-wash); overflow:hidden; }
.ecard__method > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:10px 13px;
  font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--protocol-ink); font-weight:700;
}
.ecard__method > summary::-webkit-details-marker { display:none; }
.ecard__method > summary:hover { background: #e6daf5; }
.ecard__method > summary .chev { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; margin-left:auto; transition: transform .2s var(--ease); }
.ecard__method[open] > summary .chev { transform: rotate(90deg); }
.ecard__method .method-body { padding:0 13px 13px; animation: rise .3s var(--ease-out); }
.ecard__studyfoot { margin-top:12px; }

/* ---- 2 · Comment thread (kept separate from the node body) + convert ------ */
.thread { margin-top:13px; background: var(--surface-2); border:1px solid var(--line-2); border-radius: var(--r-md); padding:11px 14px 4px; }
.thread > .thread-h { display:flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--faint); font-weight:700; margin-bottom:4px; }
.thread > .thread-h .ct { color: var(--ink-2); }
.comment { display:flex; gap:10px; padding:10px 0; }
.comment + .comment { border-top:1px dashed var(--line); }
.comment .avatar { width:24px; height:24px; font-size:10px; flex:none; margin-top:1px; }
.comment .c-main { min-width:0; flex:1; }
.comment .c-meta { display:flex; align-items:center; gap:7px; font-size:11px; color: var(--faint); }
.comment .c-meta b { color: var(--ink); font-weight:600; }
.comment .c-meta .grow { flex:1; }
.comment .c-body { font-size:12.5px; color: var(--ink-2); line-height:1.5; margin-top:3px; }
.comment .promoted-chip {
  display:inline-flex; align-items:center; gap:5px; margin-top:7px;
  font-family: var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--request-ink); background: var(--request-wash); border:1px solid var(--request-edge); border-radius: var(--r-pill); padding:2px 8px;
}
.comment .promoted-chip svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; }
/* the composer, disabled on a read-only surface */
.composer { display:flex; align-items:center; gap:9px; margin-top:6px; padding:9px 11px; border-top:1px dashed var(--line); font-size:12px; color: var(--faint); }
.composer svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* convert affordance — comment→request / candidate→evidence (shared) */
.convert-btn {
  display:inline-flex; align-items:center; gap:6px; font-family: var(--font-body); font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius: var(--r-sm); border:1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor:pointer; transition: all .16s var(--ease); white-space:nowrap;
}
.convert-btn:hover { border-color: var(--request-ink); color: var(--request-ink); background: var(--request-wash); }
.convert-btn.to-evidence:hover { border-color: var(--evidence-ink); color: var(--evidence-ink); background: var(--evidence-wash); }
.convert-btn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.convert-menu { position:relative; display:inline-flex; }

/* ---- 4 · Kanban: drag-to-set-status, reorder, and the stale nudge --------- */
.kcard__grip { display:inline-flex; align-items:center; cursor:grab; color: var(--faint); opacity:0; transition: opacity .15s var(--ease); }
.kcard:hover .kcard__grip, .kcard:focus-within .kcard__grip { opacity:.55; }
.kcard__grip:hover { opacity:.95; }
.kcard__grip:active { cursor:grabbing; }
.kcard__grip svg { width:12px; height:13px; fill:currentColor; }
.kcard.dragging { box-shadow: var(--shadow-3); transform: rotate(1.5deg) translateY(-2px); opacity:.96; }
.kcol--drop { outline:1.5px dashed var(--study-ink); outline-offset:-3px; background: var(--study-wash); }
.kcol__ghost { border:1.5px dashed var(--study-edge); border-radius: var(--r-md); padding:14px 12px; text-align:center; font-size:11.5px; color: var(--faint); }
/* v0.3 (Jun 11): the PI "nudge" was rejected by the trainee — `.nudge-btn` is RETIRED.
   `.stale-flag` is re-homed as a CALM, muted idle marker (no alarm colour, no poke),
   used only inside the diff view's folded "not changed in a while" group.
   See ux-spec-update-2026-06-11-trainee-feedback.md §1, §6. */
.stale-flag {
  display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.04em; color: var(--muted);
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-pill); padding:2px 7px;
}
.stale-flag .dot { width:6px; height:6px; border-radius:50%; background: var(--faint); }
/* a "you can reorder these" priority cue (PI lens) */
.prio-rail { display:flex; flex-direction:column; align-items:center; gap:3px; color: var(--faint); }
.prio-rail .pn { font-family: var(--font-mono); font-size:9.5px; font-weight:700; }

/* ---- 5 · Related-work newsfeed (keyword / tag overlap) -------------------- */
.relfeed__head { font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--faint); font-weight:600; margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.relfeed__head svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.relfeed__item { display:flex; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line); }
.relfeed__item:last-child { border-bottom:0; padding-bottom:2px; }
.relfeed__item .avatar { width:24px; height:24px; font-size:10px; flex:none; margin-top:1px; }
.relfeed__item .rf-main { min-width:0; flex:1; }
.relfeed__item .rf-title { font-size:12.5px; color: var(--ink); font-weight:600; line-height:1.35; }
.relfeed__item .rf-by { font-family: var(--font-mono); font-size:10px; color: var(--faint); margin-top:2px; }
.relfeed__why {
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px;
  font-family: var(--font-mono); font-size:9.5px; font-weight:600; color: var(--source-ink);
  background: var(--source-wash); border:1px solid var(--source-edge); border-radius: var(--r-pill); padding:2px 8px;
}
.relfeed__why b { color: var(--source-ink); font-weight:700; }

/* ---- 6 · Accessibility controls — serif toggle + spacing ------------------ */
.a11y-pop {
  position:absolute; z-index:40; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-3); padding:14px; width:236px;
}
.a11y-pop h5 { font-family: var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--faint); font-weight:700; margin:0 0 11px; }
.a11y-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.a11y-opt + .a11y-opt { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.a11y-opt .lbl { font-size:12.5px; font-weight:600; color: var(--ink); }
.a11y-opt .lbl small { display:block; font-weight:400; font-size:10.5px; color: var(--faint); margin-top:1px; }
.a11y-seg { display:inline-flex; padding:2px; gap:2px; background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r-pill); flex:none; }
.a11y-seg button { font-family: var(--font-body); font-size:11px; font-weight:600; color: var(--muted); padding:4px 9px; border:0; background:transparent; border-radius: var(--r-pill); cursor:pointer; transition: all .15s var(--ease); }
.a11y-seg button.active, .a11y-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
/* a small switch (also reused elsewhere) */
.switch { position:relative; width:34px; height:20px; border-radius:999px; background: var(--line); border:1px solid var(--line-2); cursor:pointer; transition: background .18s var(--ease); flex:none; }
.switch::after { content:''; position:absolute; top:1.5px; left:1.5px; width:15px; height:15px; border-radius:50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform .18s var(--ease); }
.switch[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.switch[aria-pressed="true"]::after { transform: translateX(14px); }
/* the body preference modes the controls set (headings & mono are preserved) */
.pref-serif { --font-body: var(--font-display); }
.pref-serif body, body.pref-serif { font-family: var(--font-body); font-optical-sizing:auto; }
.pref-spacious { --gap: 20px; }
body.pref-spacious { line-height: 1.7; }

/* ---- 7 · Share mechanics — right-click menu, groups, verification --------- */
.ctx-menu { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding:6px; min-width:212px; }
.ctx-menu .ctx-h { font-family: var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--faint); font-weight:700; padding:6px 9px 4px; }
.ctx-item { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius: var(--r-sm); color: var(--ink-2); cursor:pointer; font-size:13px; }
.ctx-item:hover { background: var(--surface-2); color: var(--ink); }
.ctx-item > svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }
.ctx-item .chev { margin-left:auto; opacity:.5; }
.ctx-sep { height:1px; background: var(--line); margin:5px 2px; }
.group-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius: var(--r-pill); font-size:12px; font-weight:600; border:1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor:pointer; }
.group-pill .hex { width:9px; height:9px; flex:none; }
.group-pill.consortium { background: var(--request-wash); color: var(--request-ink); border-color: var(--request-edge); }
.group-pill.world { background: var(--claim-wash); color: var(--claim-ink); border-color: var(--claim-edge); }
.group-pill.lab { background: var(--study-wash); color: var(--study-ink); border-color: var(--study-edge); }
/* verification sheet — "you're about to share; this is exactly what's shared" */
.sv-row { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px dashed var(--line); }
.sv-row:last-child { border-bottom:0; }
.sv-row .sv-state { flex:none; width:18px; text-align:center; font-weight:700; font-size:13px; }
.sv-row .sv-state.ok { color: var(--ok); }
.sv-row .sv-state.gate { color: var(--warn); }
.sv-row .sv-state.no { color: var(--private); }
.sv-row .sv-main { flex:1; min-width:0; }
.sv-row .sv-name { font-size:12.5px; font-weight:600; color: var(--ink); }
.sv-row .sv-name.withheld { color: var(--private); }
.sv-row .sv-target { font-family: var(--font-mono); font-size:10.5px; color: var(--muted); margin-top:1px; }

/* ---- reduced-motion: silence the v0.2 motion ----------------------------- */
@media (prefers-reduced-motion: reduce){
  .ecard__method > summary .chev,
  .ecard__method .method-body,
  .kcard.dragging,
  .switch, .switch::after { transition:none; animation:none; }
}

/* ============================================================================
   v0.3 · trainee feedback (Jun 11) — the nudge reversal.
   The student OWNS the deadline; the PI follows or suggests — never pokes.
   Atoms: .agenda-tag · .due-chip · .follow-btn/.follow-pill · the diff view.
   ============================================================================ */

/* card footer holding the agenda tag + follow action */
.kfoot { display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap; }

/* "For next sync · <date>" — the calm meeting signal that replaces the nudge */
.agenda-tag {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  color: var(--request-ink); background: var(--request-wash); border:1px solid var(--request-edge);
  border-radius: var(--r-pill); padding:3px 10px;
}
.agenda-tag svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
.agenda-tag.suggested { background: var(--surface); border-style:dashed; color: var(--muted); } /* a PI *suggestion*, not a poke */

/* owner-set "next step by <date>" — calm; muted "over" on lapse (never alarm-red) */
.due-chip {
  display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.02em; color: var(--question-ink);
  background: var(--question-wash); border:1px solid var(--question-edge); border-radius: var(--r-pill); padding:2px 8px;
}
.due-chip .dot { width:6px; height:6px; border-radius:50%; background: var(--question-ink); }
.due-chip.overdue { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.due-chip.overdue .dot { background: var(--faint); }

/* opt-in follow — the PI follows only if the owner grants it */
.follow-btn {
  display:inline-flex; align-items:center; gap:6px; font-family: var(--font-body); font-size:11px; font-weight:600;
  padding:4px 11px; border-radius: var(--r-pill); border:1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor:pointer; transition: all .16s var(--ease);
}
.follow-btn:hover { border-color: var(--ink-2); color: var(--ink); }
.follow-btn.is-following { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.follow-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
.follow-pill {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color: var(--brand);
  background: var(--brand-tint); border-radius: var(--r-pill); padding:3px 9px 3px 4px;
}
.follow-pill .avatar { width:18px; height:18px; font-size:9px; }

/* ---- "Since last sync" diff view (screen 11) — the meeting-prep home ------ */
.diff-since { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:16px; }
.diff-since .date-pick {
  display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size:12px; color: var(--ink);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-pill); padding:6px 13px; cursor:pointer;
}
.diff-since .date-pick svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.diff-group { border:1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin-bottom:13px; overflow:hidden; }
.diff-group > summary, .diff-group .dg-head {
  display:flex; align-items:center; gap:9px; padding:13px 16px; cursor:pointer; list-style:none;
  font-family: var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--muted);
}
.diff-group > summary::-webkit-details-marker { display:none; }
.diff-group .dg-count { font-size:11px; color: var(--faint); font-weight:600; }
.diff-group.agenda { border-color: var(--request-edge); }
.diff-group.agenda .dg-head { color: var(--request-ink); background: var(--request-wash); }
.diff-group .chev { margin-left:auto; transition: transform .2s var(--ease); }
.diff-group[open] .chev { transform: rotate(90deg); }
.diff-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line); }
.diff-row .dr-main { min-width:0; }
.diff-row .dr-title { font-size:13.5px; font-weight:600; color: var(--ink); }
.diff-row .dr-meta { font-family: var(--font-mono); font-size:10px; color: var(--faint); margin-top:2px; }
.diff-row .grow { flex:1; }
/* change-verb chips */
.chg { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; border-radius: var(--r-pill); padding:2px 9px; white-space:nowrap; }
.chg svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; }
.chg.advanced { color: var(--study-ink); background: var(--study-wash); }
.chg.evidence { color: var(--evidence-ink); background: var(--evidence-wash); }
.chg.comments { color: var(--request-ink); background: var(--request-wash); }
.chg.idle { color: var(--muted); background: var(--surface-2); font-weight:600; font-family: var(--font-mono); letter-spacing:.02em; } /* "no update · Nd" — calm, never alarm */

/* dyslexia-friendly body mode (extends the §6 a11y bar; iOS-HIG-derived spacing) */
.pref-dyslexia { letter-spacing:.018em; word-spacing:.06em; line-height:1.75; }
.pref-dyslexia p, .pref-dyslexia .dr-title, .pref-dyslexia .kt { font-weight:500; }

/* `.state-note` — promoted from 10-local to shared (11 reuses it). Small inline
   explainer with a hairline-stroked icon (must be `fill:none`, or it balloons). */
.state-note {
  margin-top: 8px; font-size: 11px; color: var(--faint); line-height: 1.45;
  display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px;
  background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--line);
}
.state-note svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; margin-top: 1px; }
.state-note b { color: var(--ink-2); font-weight: 600; }