/* ==========================================================================
   SONAR — design system v4
   Ide8 · dark-only product surface · vanilla CSS, no build step.

   Order of business:
     00 tokens · 01 base + a11y · 02 brand lockup · 03 type · 04 buttons
     05 forms · 06 shell · 07 views · 08 cover (v1) · 09 auth
     10 conversation · 11 plan card · 12 asks & matches · 13 moments
     14 advisor profile · 15 directory · 16 notifications · 17 the room feed
     18 stats, meters, charts · 19 tables · 20 overlays · 21 admin blocks
     22 empty / loading · 23 toast · 24 responsive · 25 motion
     --- v4 ---------------------------------------------------------------
     26 v4 tokens · 27 prompt-first home · 28 scoped prompt
     29 twin identity + disclosure · 30 escalation · 31 review queue
     32 Sonar Box · 33 onboarding research · 34 advisor rename aliases
     35 v4 responsive · 36 v4 motion

   Every class name that existed in v2 and v3 still resolves. New names are
   additive. "Advisor" (product) and "member" (schema, and every v3 class
   name) are the same person — see §34 and DESIGN.md §11.

   v4's one non-negotiable: SOLID EDGE = a person, DASHED EDGE = a machine.
   ========================================================================== */

/* ==========================================================================
   00 · TOKENS
   ========================================================================== */

:root{
  /* --- ground & surfaces (warm-biased neutrals, not pure grey) --- */
  --ink:#0A0A0A;
  --bg:#0A0A0A;
  --surface:#141312;
  --surface-2:#1B1A18;
  --surface-3:#232120;
  --surface-4:#2B2927;          /* raised: popovers, menus, drawers */
  --line:rgba(250,250,250,.09);
  --line-strong:rgba(250,250,250,.16);
  --line-loud:rgba(250,250,250,.26);

  /* --- ink on dark --- */
  --paper:#FAFAFA;
  --text-2:#C9C9C7;
  --text-3:#8E8E8B;
  --text-4:#6B6A67;             /* quietest legible label */

  /* --- accent: interactive ink only. Never in the lockup. --- */
  --amber:#F59E0B;
  --amber-hi:#FBBF3F;
  --amber-soft:rgba(245,158,11,.14);
  --amber-wash:rgba(245,158,11,.07);
  --amber-line:rgba(245,158,11,.38);

  /* --- semantic status --- */
  --good:#4ADE80;
  --good-soft:rgba(74,222,128,.12);
  --good-line:rgba(74,222,128,.35);
  --sky:#7DD3FC;
  --sky-soft:rgba(125,211,252,.10);
  --sky-line:rgba(125,211,252,.35);
  --warn:#FCA5A5;
  --warn-soft:rgba(248,113,113,.10);
  --warn-line:rgba(248,113,113,.35);
  --lilac:#B39DE0;                       /* the "joined / co-founded" kind, as ink */
  --lilac-soft:rgba(179,157,224,.12);
  --lilac-line:rgba(179,157,224,.35);

  /* --- data ink · validated categorical set (see DESIGN.md) ---
     node validate_palette.js "#C98001,#2A98AF,#07A855,#8668B6"
       --mode dark --surface "#141312"  → ALL CHECKS PASS
     Fixed slot order. Never cycled, never reassigned by rank. Always
     shipped with a direct label — colour never carries identity alone. */
  --viz-1:#C98001;   /* advise · sessions · units    */
  --viz-2:#2A98AF;   /* door   · introductions       */
  --viz-3:#07A855;   /* win    · outcomes            */
  --viz-4:#8668B6;   /* cofound· joined              */
  --viz-0:#4E4B47;   /* "other" / untyped — non-categorical, no meaning */
  /* Fills use --viz-N. Small COLOURED LABEL TEXT uses the -ink step of the
     same hue, which clears 4.5:1 on every app surface (the fill steps do
     not, by design — they are sized for marks, not type). */
  --viz-1-ink:var(--amber);
  --viz-2-ink:var(--sky);
  --viz-3-ink:var(--good);
  --viz-4-ink:var(--lilac);
  --viz-track:rgba(250,250,250,.07);
  --viz-grid:rgba(250,250,250,.07);
  --viz-axis:rgba(250,250,250,.18);

  /* --- lockup scale (brand-locked ratios; see 02) --- */
  --lk-nav:30px;
  --lk-foot:26px;

  /* --- radii --- */
  --radius-xs:8px;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;
  --radius-pill:999px;

  /* --- space (4px base) --- */
  --sp1:4px;  --sp2:8px;  --sp3:12px; --sp4:16px; --sp5:20px;
  --sp6:24px; --sp7:32px; --sp8:40px; --sp9:56px;

  /* --- type --- */
  --display:"Inter Tight",Inter,system-ui,sans-serif;
  --ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wordmark:"Instrument Sans",system-ui,sans-serif;   /* lockup only */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-3xs:10.5px;  /* uppercase micro-labels */
  --fs-2xs:11.5px;  /* meta, timestamps */
  --fs-xs:12.5px;   /* captions, hints */
  --fs-sm:13.5px;   /* dense body, table cells */
  --fs-md:15px;     /* body */
  --fs-lg:16.5px;   /* card titles, lead */
  --fs-xl:21px;     /* section heads */
  --fs-2xl:27px;    /* view titles */
  --fs-3xl:34px;    /* stat values */
  --fs-4xl:44px;    /* hero figures */

  --lh-tight:1.2;
  --lh-snug:1.35;
  --lh:1.55;
  --lh-loose:1.7;
  --tr-label:.13em;   /* tracking for uppercase micro-labels */

  /* --- elevation --- */
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow-sm:0 6px 18px rgba(0,0,0,.34);
  --shadow-pop:0 18px 48px rgba(0,0,0,.55);

  /* --- motion --- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:260ms;
  --dur-4:420ms;
}

/* ==========================================================================
   01 · BASE + ACCESSIBILITY
   ========================================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:dark}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--ui);
  font-size:var(--fs-md);
  line-height:var(--lh);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit}
img,svg{max-width:100%}
::selection{background:var(--amber);color:var(--ink)}
[hidden]{display:none !important}

a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}

/* one focus ring, everywhere, keyboard only */
:where(a,button,input,textarea,select,summary,[tabindex]):focus{outline:none}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
.btn-primary:focus-visible,.btn-accept:focus-visible,.composer-send:focus-visible,
.home-prompt-send:focus-visible,.prompt-scoped-send:focus-visible{
  outline-color:var(--paper);   /* an amber ring on an amber fill is no ring */
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface-3);color:var(--paper);
  padding:10px 18px;border-radius:0 0 var(--radius-sm) 0;font-size:var(--fs-sm);
}
.skip-link:focus{left:0}

/* quiet scrollbars inside panels */
.table-scroll,.notif-list,.modal-card,.drawer-body,.thread{scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
.table-scroll::-webkit-scrollbar,.notif-list::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,.drawer-body::-webkit-scrollbar,
.thread::-webkit-scrollbar{width:9px;height:9px}
.table-scroll::-webkit-scrollbar-thumb,.notif-list::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb,
.thread::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:99px}

/* ==========================================================================
   02 · THE IDE8 LOCKUP  (brand-locked — do not adjust the ratios)
   --------------------------------------------------------------------------
   One knob: --lk. Every other value is a ratio of it. Monochrome, always:
   the mark and wordmark both take currentColor, so the lockup inverts by
   setting `color` on .brand and never by swapping an asset.
   Clear space on all four sides = 4 x bar thickness = .44 x --lk.
   Never render the bare lockup below --lk:24px — use .ide8-tile instead.
   ========================================================================== */

.brand{
  --lk:var(--lk-nav);
  --lk-clear:calc(var(--lk) * .44);
  display:inline-flex;align-items:center;
  gap:calc(var(--lk) * .377);
  color:var(--paper);
  line-height:1;text-decoration:none;
  flex:none;
  transition:opacity var(--dur-1) var(--ease);
}
.brand:hover{text-decoration:none;opacity:.82}
.brand:active{opacity:.7}
.brand .mark{
  width:calc(var(--lk) * .54);
  height:calc(var(--lk) * .73);
  flex:none;display:block;
}
.brand .wm{
  font-family:var(--wordmark);
  font-weight:600;
  font-size:calc(var(--lk) * 1.014);
  letter-spacing:-.045em;
  color:currentColor;
  line-height:1;display:block;
}
/* contextual scales — the only knob you ever touch */
.brand-nav{--lk:var(--lk-nav)}
.brand-foot{--lk:var(--lk-foot)}
.brand-lg{--lk:56px}
/* helper: reserves the mandated clear space around the lockup */
.brand-clear{padding:var(--lk-clear)}

/* ---------- app-icon tile · favicon / PWA / avatar contexts ONLY ----------
   Monochrome per the brand package: paper tile, ink bars on dark chrome.
   Amber here was the v2 violation and is gone. Prefer .brand in all chrome. */
.ide8-tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;
  background:var(--paper);color:var(--ink);flex:none;
}
.ide8-tile svg{display:block}
.ide8-tile-lg{width:52px;height:52px;border-radius:13px}
.ide8-tile-sm{width:24px;height:24px;border-radius:6px}

/* ==========================================================================
   03 · TYPE PRIMITIVES
   ========================================================================== */

.t-label,.col-label,.mini-label,.field-label,.rail-label,.engage-title,.side-group{
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-3);
}
.t-dim{color:var(--text-3)}
.t-quiet{color:var(--text-4)}
.t-num{font-variant-numeric:tabular-nums}
.divider{height:1px;background:var(--line);border:0;margin:var(--sp5) 0}

/* ==========================================================================
   04 · BUTTONS
   ========================================================================== */

.btn-primary,.btn-accept,.btn-line,.btn-pass,.btn-ghost,.btn-text,.chip,.replay,.seg-btn{
  -webkit-appearance:none;appearance:none;white-space:nowrap;
}

.btn-primary{
  background:var(--amber);color:var(--ink);border:0;border-radius:var(--radius-pill);
  font-weight:600;font-size:var(--fs-md);padding:13px 30px;line-height:1.1;
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.btn-primary:hover{background:var(--amber-hi);transform:translateY(-1px);box-shadow:0 8px 26px rgba(245,158,11,.30)}
.btn-primary:active{transform:translateY(0);box-shadow:none;background:var(--amber)}
.btn-primary.is-block{width:100%;display:block}
.btn-primary.is-sm{font-size:var(--fs-sm);padding:9px 20px}

.btn-accept{
  background:var(--amber);color:var(--ink);border:0;border-radius:var(--radius-pill);
  font-weight:600;font-size:var(--fs-sm);padding:9px 20px;line-height:1.1;
  transition:background var(--dur-1) var(--ease);
}
.btn-accept:hover{background:var(--amber-hi)}
.btn-accept:active{background:var(--amber)}

.btn-line,.btn-pass{
  background:none;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-pill);line-height:1.1;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.btn-line{font-size:var(--fs-xs);padding:8px 17px}
.btn-pass{font-size:var(--fs-sm);padding:9px 18px}
.btn-line:hover,.btn-pass:hover{border-color:var(--line-loud);color:var(--paper);background:rgba(250,250,250,.04)}
.btn-line:active,.btn-pass:active{background:rgba(250,250,250,.08)}
.btn-line.is-sm{font-size:var(--fs-2xs);padding:6px 13px}
.btn-line.is-accent{border-color:var(--amber-line);color:var(--amber)}
.btn-line.is-accent:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)}
.btn-line.is-danger:hover{border-color:var(--warn-line);color:var(--warn);background:var(--warn-soft)}

.btn-ghost{
  margin-top:var(--sp3);background:none;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-pill);font-size:var(--fs-xs);padding:8px 18px;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}

.btn-text{background:none;border:0;color:var(--text-3);font-size:var(--fs-xs);padding:2px 0;transition:color var(--dur-1) var(--ease)}
.btn-text:hover{color:var(--amber)}

.btn-icon{
  background:none;border:1px solid transparent;color:var(--text-3);
  width:34px;height:34px;border-radius:var(--radius-sm);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.btn-icon:hover{background:var(--surface-2);color:var(--paper)}
.btn-icon:active{background:var(--surface-3)}

.btn-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.btn-row-end{justify-content:flex-end}

/* disabled + busy — one rule for every button in the system */
.btn-primary[disabled],.btn-line[disabled],.btn-accept[disabled],.btn-pass[disabled],
.btn-ghost[disabled],.btn-text[disabled],.btn-icon[disabled],.chip[disabled],.replay[disabled]{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;
}
.btn-primary[disabled]:hover,.btn-accept[disabled]:hover{background:var(--amber);transform:none;box-shadow:none}
.btn-line[disabled]:hover,.btn-pass[disabled]:hover{border-color:var(--line-strong);color:var(--text-2);background:none}

.is-loading{position:relative;color:transparent !important;pointer-events:none}
.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--ink);animation:spin .7s linear infinite;
}
.btn-line.is-loading::after,.btn-pass.is-loading::after,.btn-ghost.is-loading::after{color:var(--text-2)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   05 · FORMS
   ========================================================================== */

.field{display:flex;flex-direction:column;margin-bottom:var(--sp4)}
.field:last-of-type{margin-bottom:0}
.field-label,.mini-label{margin-bottom:6px;display:block}
.field-req{color:var(--amber);margin-left:3px}

.input,.textarea,.select{
  width:100%;background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);color:var(--paper);
  font-size:14.5px;line-height:var(--lh);padding:11px 13px;outline:0;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),
             box-shadow var(--dur-1) var(--ease);
}
.input:hover,.textarea:hover,.select:hover{border-color:var(--line-loud)}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--amber-line);background:var(--surface-3);
  box-shadow:0 0 0 3px var(--amber-wash);
}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:none}
.input::placeholder,.textarea::placeholder{color:var(--text-4)}
.input:disabled,.textarea:disabled,.select:disabled{opacity:.5;cursor:not-allowed;background:var(--surface)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--warn-line)}
.input[aria-invalid="true"]:focus,.textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--warn-soft)}
.textarea{min-height:98px;resize:vertical}
.select{
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
}
.input-sm{padding:8px 10px;font-size:var(--fs-sm);border-radius:9px}
.select.input-sm{background-position:right 9px center;background-size:14px;padding-right:28px}
.field-hint{font-size:var(--fs-xs);color:var(--text-3);margin-top:6px;line-height:var(--lh)}
.field-error{font-size:var(--fs-xs);color:var(--warn);margin-top:6px;line-height:var(--lh)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
.field-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp4)}
.form-grid .field-wide{grid-column:1 / -1}
.form-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;
  margin-top:var(--sp5);padding-top:var(--sp4);border-top:1px solid var(--line);
}
.form-foot-note{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);min-width:0;flex:1 1 140px}
.form-foot .btn-row,.form-foot .btn-primary,.form-foot .btn-line{flex:none;margin-left:auto}

.form-msg{
  font-size:var(--fs-xs);line-height:var(--lh);margin:0 0 var(--sp4);padding:10px 13px;
  border-radius:var(--radius-sm);border:1px solid;
  display:flex;gap:9px;align-items:flex-start;
}
.form-msg-error{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.form-msg-good{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.form-msg-info{color:var(--sky);border-color:var(--sky-line);background:var(--sky-soft)}

.check{
  appearance:none;-webkit-appearance:none;flex:none;
  width:19px;height:19px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface-3);
  display:inline-grid;place-content:center;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.check:hover{border-color:var(--line-loud)}
.check:checked{background:var(--amber);border-color:var(--amber)}
.check:checked::after{
  content:"";width:9px;height:5px;margin-top:-2px;
  border:2px solid var(--ink);border-top:0;border-right:0;transform:rotate(-45deg);
}
.check:disabled{opacity:.45;cursor:not-allowed}
.check:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.check-row{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.check-row label{cursor:pointer}

.switch{
  appearance:none;-webkit-appearance:none;flex:none;cursor:pointer;
  width:38px;height:22px;border-radius:99px;position:relative;
  background:var(--surface-3);border:1px solid var(--line-strong);
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--text-3);transition:transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.switch:checked{background:var(--amber-soft);border-color:var(--amber-line)}
.switch:checked::after{transform:translateX(16px);background:var(--amber)}
.switch:disabled{opacity:.45;cursor:not-allowed}

/* search box */
.search{position:relative;flex:1;min-width:180px}
.search .input{padding-left:35px}
.search-ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-3);display:inline-flex;pointer-events:none;
}

/* segmented control */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px;gap:2px}
.seg-btn{
  background:none;border:0;color:var(--text-3);
  font-size:var(--fs-xs);font-weight:500;padding:6px 14px;border-radius:var(--radius-pill);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.seg-btn:hover{color:var(--paper)}
.seg-btn.is-on{background:var(--surface-4);color:var(--paper)}

/* ==========================================================================
   06 · SHELL + SIDEBAR
   ========================================================================== */

.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}

.sidebar{
  border-right:1px solid var(--line);
  padding:var(--sp5) var(--sp4) var(--sp4);
  display:flex;flex-direction:column;gap:var(--sp2);
  position:sticky;top:0;height:100vh;background:var(--bg);
  min-width:0;
}
.side-brand{
  display:flex;align-items:center;
  gap:calc(var(--lk-nav) * .44);                        /* = brand clear space */
  padding:0 calc(var(--lk-nav) * .44) var(--sp5) 6px;
  min-width:0;
}
.side-brand-sep{width:1px;height:19px;background:var(--line-strong);flex:none}
.side-brand-text{min-width:0}
.side-brand-name{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.1;letter-spacing:-.01em}
.side-brand-tag{font-size:var(--fs-2xs);color:var(--text-3);line-height:1.3}

.side-nav{display:flex;flex-direction:column;gap:2px;min-width:0}
.side-group{padding:var(--sp4) 8px 6px}
.side-link{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;color:var(--text-2);
  font-size:14px;font-weight:500;text-align:left;
  padding:9px 10px;border-radius:9px;position:relative;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.side-link:hover{background:var(--surface);color:var(--paper)}
.side-link:active{background:var(--surface-2)}
.side-link.is-active{background:var(--surface-2);color:var(--paper);font-weight:600}
.side-link.is-active .side-ico{color:var(--amber)}
.side-link[disabled]{opacity:.4;cursor:not-allowed}
.side-ico{display:inline-flex;color:var(--text-3);flex:none;transition:color var(--dur-1) var(--ease)}
.side-link:hover .side-ico{color:var(--text-2)}
.side-badge{
  margin-left:auto;min-width:21px;height:20px;padding:0 6px;border-radius:var(--radius-pill);
  background:var(--amber);color:var(--ink);font-size:var(--fs-2xs);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;flex:none;
}
.side-badge.is-quiet{background:var(--surface-4);color:var(--text-2)}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp3);padding-top:var(--sp4)}
.pool-mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp3) var(--sp4)}
.pool-mini-label{font-size:var(--fs-3xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-3);font-weight:600}
.pool-mini-value{font-family:var(--display);font-weight:700;font-size:16px;margin-top:3px;font-variant-numeric:tabular-nums}
.pool-mini-sub{font-size:var(--fs-2xs);color:var(--text-3);margin-top:2px;line-height:1.4}
.side-stamp{font-size:var(--fs-3xs);color:var(--text-4);line-height:1.6;padding:0 4px;letter-spacing:.02em}

/* ==========================================================================
   07 · VIEWS + SECTION HEADS
   ========================================================================== */

.view{display:none;padding:var(--sp7) var(--sp8) var(--sp9);max-width:1220px;width:100%;margin:0 auto;min-width:0}
.view.is-active{display:block}

.view-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp6);
  padding-bottom:var(--sp5);border-bottom:1px solid var(--line);margin-bottom:var(--sp6);
}
.view-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.6vw,var(--fs-2xl));letter-spacing:-.022em;
  margin:0 0 5px;line-height:var(--lh-tight);text-wrap:balance;
}
.view-sub{margin:0;color:var(--text-3);font-size:14px;line-height:var(--lh)}
.view-tools{display:flex;align-items:center;gap:var(--sp2);flex:none}

.sec{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp4);margin:0 0 var(--sp4);flex-wrap:wrap}
.sec-title{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.sec-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px}
.sec-gap{margin-top:var(--sp7)}
.col-label{margin-bottom:4px}
.col-label-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);margin-bottom:10px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp5) 22px}
.panel-head{margin-bottom:var(--sp4);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.panel-head-gap{margin-top:var(--sp7)}
.panel-title{font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.panel-sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:2px;line-height:var(--lh)}

/* persona + account menu */
.persona{display:flex;align-items:center;gap:11px;flex:none}
.persona-text{display:flex;flex-direction:column;line-height:1.3;text-align:left;min-width:0}
.persona-text strong{font-size:var(--fs-sm);font-weight:600}
.persona-text span{font-size:var(--fs-2xs);color:var(--text-3)}
.persona-btn{
  background:none;border:0;padding:5px 7px 5px 5px;border-radius:12px;color:inherit;
  display:flex;align-items:center;gap:11px;
  transition:background var(--dur-1) var(--ease);
}
.persona-btn:hover{background:var(--surface)}
.persona-btn[aria-expanded="true"]{background:var(--surface-2)}
.persona-caret{color:var(--text-3);display:inline-flex;margin-left:1px;flex:none}

.acct{position:relative;flex:none}
.acct-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:75;min-width:236px;
  background:var(--surface-4);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);padding:7px;
  animation:pop var(--dur-2) var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(-5px) scale(.985)}}
.acct-who{padding:8px 10px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-who strong{display:block;font-size:var(--fs-sm);font-weight:600}
.acct-who span{display:block;font-size:var(--fs-2xs);color:var(--text-3);word-break:break-all}
.acct-item{
  display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--text-2);font-size:var(--fs-sm);padding:9px 10px;border-radius:var(--radius-xs);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.acct-item:hover{background:rgba(250,250,250,.07);color:var(--paper)}

/* avatars */
.avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-2);
  overflow:hidden;
}
.avatar-sm{width:30px;height:30px;font-size:11px}
.avatar-lg{width:52px;height:52px;font-size:17px}
.avatar-xl{width:76px;height:76px;font-size:24px;font-family:var(--display);font-weight:700}
.avatar-founder{background:var(--surface-3)}
.avatar-member{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.avatar-admin{background:var(--sky-soft);border-color:var(--sky-line);color:var(--sky)}
.avatar-ide8{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ==========================================================================
   08 · COVER (v1 demo parity — kept so shared names never break)
   ========================================================================== */

.cover{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--sp7);
  transition:opacity .5s ease,visibility .5s;
}
.cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, rgba(245,158,11,.10), transparent 34%),
    repeating-radial-gradient(circle at 50% 46%, transparent 0 119px, rgba(250,250,250,.045) 119px 120px);
}
.cover.is-hidden{opacity:0;visibility:hidden}
.cover-inner{position:relative;max-width:640px}
.cover-brand{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:var(--sp8)}
.cover-brand-name{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em}
.cover-title{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(64px,12vw,112px);line-height:.95;margin:0;
}
.cover-dot{color:var(--amber)}
.cover-sub{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.6vw,24px);color:var(--paper);margin:22px 0 10px}
.cover-line{color:var(--text-3);max-width:480px;margin:0 auto 34px}
.cover-layers{margin-top:44px;font-size:var(--fs-2xs);letter-spacing:.22em;color:var(--text-3)}
.cover-foot{position:absolute;bottom:26px;font-size:var(--fs-3xs);letter-spacing:.22em;color:var(--text-4)}

/* ==========================================================================
   09 · AUTH  (sign in / claim)
   ========================================================================== */

.auth{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 20px 84px;
}
.auth::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, rgba(245,158,11,.10), transparent 34%),
    repeating-radial-gradient(circle at 50% 40%, transparent 0 119px, rgba(250,250,250,.045) 119px 120px);
}
.auth-inner{position:relative;width:100%;max-width:394px;display:flex;flex-direction:column;align-items:center}
.auth-brand{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp6);padding:calc(56px * .44) 0;   /* lockup clear space at --lk:56 */
}
.auth-brand-name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em}
.auth-title{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(52px,11vw,72px);line-height:.95;margin:0;
}
.auth-tag{font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);margin:10px 0 0}
.auth-head{
  font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em;
  line-height:var(--lh-snug);margin:var(--sp5) 0 0;max-width:22ch;text-wrap:balance;
}
.auth-line{color:var(--text-3);font-size:14px;margin:10px 0 var(--sp6);max-width:340px;line-height:var(--lh)}
.auth-card{
  width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 20px;box-shadow:var(--shadow);
}
.auth-card-title{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;margin:0 0 3px}
.auth-card-sub{font-size:var(--fs-xs);color:var(--text-3);margin:0 0 var(--sp5);line-height:var(--lh)}
.auth-note{font-size:var(--fs-xs);color:var(--text-3);text-align:center;margin-top:15px;line-height:var(--lh)}
.auth-links{margin-top:22px;font-size:var(--fs-xs);color:var(--text-3);display:flex;gap:14px;align-items:center}
.auth-links a{color:var(--text-2)}
.auth-links a:hover{color:var(--amber);text-decoration:none}
.auth-foot{position:absolute;bottom:26px;font-size:var(--fs-3xs);letter-spacing:.22em;color:var(--text-4)}

/* ==========================================================================
   10 · THE CONVERSATION
   ========================================================================== */

.chat-wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100vh - 210px)}
.chat,.thread{flex:1;display:flex;flex-direction:column;gap:var(--sp5);padding-bottom:var(--sp6);min-width:0}

.thread-day{
  align-self:center;display:flex;align-items:center;gap:10px;
  font-size:var(--fs-3xs);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-4);font-weight:600;padding:var(--sp2) 0;
}
.thread-day::before,.thread-day::after{content:"";width:34px;height:1px;background:var(--line)}

.msg{display:flex;gap:12px;max-width:92%;opacity:0;transform:translateY(8px);animation:rise var(--dur-4) var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

.msg-user{align-self:flex-end;flex-direction:row-reverse}
.msg-sonar{align-self:flex-start}
.msg-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.msg-user .msg-col{align-items:flex-end}

.msg-meta{
  font-size:var(--fs-2xs);color:var(--text-4);display:flex;align-items:center;gap:7px;
  padding:0 4px;
}
.msg-meta strong{color:var(--text-3);font-weight:600}

.bubble{padding:13px 17px;border-radius:16px;font-size:var(--fs-md);line-height:var(--lh)}
.msg-user .bubble{background:var(--surface-3);border:1px solid var(--line-strong);border-bottom-right-radius:5px}
.msg-sonar .bubble{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg-sonar .bubble strong{color:var(--amber);font-weight:600}
.bubble p{margin:0 0 10px}
.bubble p:last-child{margin-bottom:0}
.bubble ul,.bubble ol{margin:0 0 10px;padding-left:19px;display:flex;flex-direction:column;gap:5px}
.bubble ul:last-child,.bubble ol:last-child{margin-bottom:0}
.msg-body{display:contents}

/* Sonar's ping avatar */
.ping{
  width:34px;height:34px;border-radius:50%;flex:none;position:relative;
  background:var(--amber-soft);border:1px solid var(--amber-line);
  display:inline-flex;align-items:center;justify-content:center;margin-top:2px;
}
.ping svg{color:var(--amber)}
.ping.is-live::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--amber);opacity:0;
  animation:pingout 1.5s ease-out infinite;
}
@keyframes pingout{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* thinking / streaming */
.thinking{
  align-self:flex-start;display:flex;gap:12px;align-items:flex-start;
  opacity:0;animation:rise var(--dur-3) var(--ease) forwards;
}
.thinking-bubble{
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;border-bottom-left-radius:5px;
  padding:13px 17px;display:flex;align-items:center;gap:10px;
}
.thinking-label{font-size:var(--fs-sm);color:var(--text-3)}
.thinking-dots{display:inline-flex;gap:4px;align-items:center}
.thinking-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--amber);display:block;
  animation:blink 1.15s ease-in-out infinite;
}
.thinking-dots i:nth-child(2){animation-delay:.16s}
.thinking-dots i:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-2px)}}

.msg-stream .bubble::after,.stream-caret{
  content:"";display:inline-block;vertical-align:-2px;
  width:2px;height:15px;margin-left:3px;background:var(--amber);
  animation:caret 1s steps(2,start) infinite;
}
@keyframes caret{50%{opacity:0}}

/* status posted back into a thread */
.msg-sys{
  align-self:center;max-width:92%;
  display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:7px 15px 7px 12px;
  font-size:var(--fs-xs);color:var(--text-2);line-height:1.45;text-align:left;
  opacity:0;animation:rise var(--dur-3) var(--ease) forwards;
}
.msg-sys strong{color:var(--paper);font-weight:600}
.msg-sys .sdot{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
.msg-sys-good{border-color:var(--good-line);background:var(--good-soft);color:var(--text-2)}
.msg-sys-good .sdot{background:var(--good)}
.msg-sys-info{border-color:var(--sky-line);background:var(--sky-soft)}
.msg-sys-info .sdot{background:var(--sky)}
.msg-sys-warn{border-color:var(--warn-line);background:var(--warn-soft)}
.msg-sys-warn .sdot{background:var(--warn)}
.msg-sys-when{color:var(--text-4);font-variant-numeric:tabular-nums;white-space:nowrap}

/* citations under an answer */
.cites{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px 0}
.cites-label{
  width:100%;font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-4);margin-bottom:2px;
}
.cite{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
  border-radius:var(--radius-pill);font-size:var(--fs-2xs);padding:4px 11px 4px 5px;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.cite:hover{border-color:var(--amber-line);color:var(--paper);background:var(--surface-3);text-decoration:none}
.cite-num{
  width:17px;height:17px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber-soft);color:var(--amber);
  font-size:var(--fs-3xs);font-weight:700;font-variant-numeric:tabular-nums;
}
.cite-src{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.cite-kind{color:var(--text-4);flex:none}

/* start-a-conversation empty state */
.thread-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--sp3);padding:var(--sp9) var(--sp5);min-height:260px;
}
.thread-empty .ping{width:44px;height:44px;margin:0 0 var(--sp2)}
.thread-empty-title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-xl);letter-spacing:-.018em;
  margin:0;line-height:var(--lh-tight);text-wrap:balance;
}
.thread-empty-line{margin:0;color:var(--text-3);font-size:14px;max-width:44ch;line-height:var(--lh)}
.thread-empty .chips{justify-content:center;margin-top:var(--sp2)}

/* scanning strip (v1 + live matching) */
.scan{
  align-self:flex-start;display:flex;flex-direction:column;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px;
  padding:13px 17px;min-width:300px;max-width:100%;
}
.scan-status{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--text-2)}
.scan-status .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.scan-room{display:flex;gap:7px;flex-wrap:wrap}
.scan-chip{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-3xs);font-weight:600;color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--line-strong);
  transition:opacity .5s,border-color .5s,color .5s,box-shadow .5s;
}
.scan.is-narrowed .scan-chip{opacity:.28}
.scan.is-narrowed .scan-chip.is-fit{opacity:1;color:var(--amber);border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}

.chat-note{align-self:center;font-size:var(--fs-xs);color:var(--text-3);text-align:center;padding:2px 0;opacity:0;animation:rise var(--dur-4) var(--ease) forwards}
.replay{
  align-self:center;background:none;border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-pill);font-size:var(--fs-xs);padding:7px 16px;
  opacity:0;animation:rise var(--dur-4) var(--ease) forwards;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.replay:hover{border-color:var(--amber);color:var(--amber)}

/* composer */
.composer{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 26%);padding-top:22px;z-index:5}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip{
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text-2);
  border-radius:var(--radius-pill);font-size:var(--fs-xs);padding:7px 14px;line-height:1.2;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.chip:hover{border-color:var(--amber);color:var(--amber)}
.chip:active{background:var(--amber-wash)}
.chip.is-on{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.chip-count{font-variant-numeric:tabular-nums;font-size:var(--fs-2xs);color:var(--text-3);margin-left:5px}
.chip.is-on .chip-count{color:var(--amber)}
.filters,.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp5);align-items:center}
.toolbar-end{margin-left:auto}

.composer-bar{
  display:flex;gap:8px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;
  padding:6px 6px 6px 20px;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.composer-bar:focus-within{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-wash)}
.composer-input{
  flex:1;background:none;border:0;outline:0;color:var(--paper);
  font-family:var(--ui);font-size:14.5px;line-height:1.5;
  padding:10px 0;resize:none;max-height:180px;min-width:0;
}
.composer-input::placeholder{color:var(--text-4)}
.composer-send{
  width:38px;height:38px;border-radius:50%;border:0;flex:none;
  background:var(--amber);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.composer-send:hover{background:var(--amber-hi)}
.composer-send:active{transform:scale(.94)}
.composer-send[disabled]{opacity:.4;cursor:not-allowed;background:var(--amber)}
.composer-note{text-align:center;font-size:var(--fs-2xs);color:var(--text-3);padding:10px 0 6px}

/* ==========================================================================
   11 · PLAN CONFIRMATION CARD
   --------------------------------------------------------------------------
   Sonar states what it will do, then waits. Calm, not alarming: the surface
   is one step up from the thread, the rows read like a docket, and the
   confirm affordance lives in a footer behind a hairline.
   ========================================================================== */

.plan{
  align-self:stretch;max-width:100%;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  opacity:0;transform:translateY(8px);animation:rise var(--dur-4) var(--ease) forwards;
  transition:border-color var(--dur-3) var(--ease),background var(--dur-3) var(--ease);
}
.plan-head{padding:var(--sp5) 22px var(--sp4)}
.plan-eyebrow{
  display:flex;align-items:center;gap:10px;margin-bottom:11px;
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-3);
}
.plan-eyebrow .ping{width:22px;height:22px;margin:0}
.plan-eyebrow .st{margin-left:auto}
.plan-summary{
  font-family:var(--display);font-weight:600;font-size:var(--fs-lg);
  letter-spacing:-.014em;line-height:var(--lh-snug);margin:0;
  color:var(--paper);text-wrap:balance;max-width:46ch;
}
.plan-rows{
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
  padding:var(--sp1) 22px;
}
.plan-row{
  display:grid;grid-template-columns:20px 104px minmax(0,1fr);
  gap:var(--sp3);align-items:baseline;
  padding:11px 0;font-size:var(--fs-sm);line-height:1.45;
}
.plan-row + .plan-row{border-top:1px solid var(--line)}
.plan-row-ico{
  color:var(--amber);font-size:var(--fs-xs);line-height:1.45;
  display:block;text-align:center;flex:none;transition:color var(--dur-3) var(--ease);
}
.plan-row-label{
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-3);
}
.plan-row-value{color:var(--paper);min-width:0}
.plan-row-value em{font-style:normal;color:var(--text-3)}
.plan-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;
  border-top:1px solid var(--line);background:var(--surface);
  padding:var(--sp3) 22px;
}
.plan-note{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);max-width:38ch}
.plan-actions{display:flex;gap:9px;align-items:center;margin-left:auto}
.plan-state{
  display:none;align-items:center;gap:9px;
  font-size:var(--fs-xs);color:var(--text-2);line-height:var(--lh);
}
.plan-state strong{color:var(--paper);font-weight:600}
.plan-state .sdot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}

/* resting state — confirmed */
.plan.is-confirmed{border-color:var(--good-line)}
.plan.is-confirmed .plan-row-ico{color:var(--good)}
.plan.is-confirmed .plan-actions,.plan.is-confirmed .plan-note{display:none}
.plan.is-confirmed .plan-state{display:flex}

/* resting state — adjusted */
.plan.is-adjusted{background:var(--surface);border-color:var(--line)}
.plan.is-adjusted .plan-summary,.plan.is-adjusted .plan-rows{opacity:.6}
.plan.is-adjusted .plan-row-ico{color:var(--text-3)}
.plan.is-adjusted .plan-actions,.plan.is-adjusted .plan-note{display:none}
.plan.is-adjusted .plan-state{display:flex}
.plan.is-adjusted .plan-state .sdot{background:var(--text-3)}

/* busy while routing */
.plan.is-routing{border-color:var(--amber-line)}
.plan.is-routing .plan-actions{opacity:.5;pointer-events:none}

/* ==========================================================================
   12 · ASKS, MATCHES, ENGAGE
   ========================================================================== */

.ask-composer{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:15px 17px 13px;margin-bottom:var(--sp6);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.ask-composer:focus-within{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-wash)}
.ask-composer .textarea{background:none;border:0;padding:0;min-height:62px;font-size:var(--fs-md);border-radius:0}
.ask-composer .textarea:focus{border:0;background:none;box-shadow:none}
.ask-composer-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:var(--sp3);padding-top:var(--sp3);border-top:1px solid var(--line);
}
.ask-composer-note{font-size:var(--fs-2xs);color:var(--text-3);line-height:var(--lh)}

.ask-list{display:flex;flex-direction:column;gap:var(--sp3)}
.ask{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.ask:hover{border-color:var(--line-strong);background:var(--surface-2)}
.ask-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ask-company{font-size:var(--fs-xs);color:var(--paper);font-weight:600}
.ask-date{font-size:var(--fs-xs);color:var(--text-3);margin-left:auto;font-variant-numeric:tabular-nums}
.ask-text{
  font-family:var(--display);font-weight:600;font-size:var(--fs-lg);letter-spacing:-.012em;
  line-height:1.4;margin:0;color:var(--paper);text-wrap:pretty;
}
.ask-meta{font-size:var(--fs-xs);color:var(--text-3);margin-top:8px}
.ask-matches{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);margin-top:15px}
.ask-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);margin-top:14px;flex-wrap:wrap}

.matches{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);align-self:stretch;max-width:100%}
.match{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;gap:9px;min-width:0;
  opacity:0;transform:translateY(8px);animation:rise var(--dur-4) var(--ease) forwards;
  transition:border-color var(--dur-2) var(--ease);
}
.match:hover{border-color:var(--line-strong)}
.match-head{display:flex;align-items:center;gap:11px;min-width:0}
.match-name{font-weight:600;font-size:var(--fs-md);line-height:1.25}
.match-role{font-size:var(--fs-xs);color:var(--text-3);line-height:1.35}
.match-why{font-size:var(--fs-sm);color:var(--text-2);border-left:2px solid var(--amber);padding-left:11px;line-height:var(--lh)}
.match-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.match-slot{font-size:var(--fs-xs);color:var(--text-3)}
.match-kind{margin-left:auto}
.match.is-declined{opacity:.45}

.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em}
.status-good{color:var(--good)}
.status-wait{color:var(--amber)}
.status-dim{color:var(--text-3)}
.status .sdot{width:6px;height:6px;border-radius:50%;background:currentColor}

.engage{
  align-self:stretch;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
  opacity:0;transform:translateY(8px);animation:rise var(--dur-4) var(--ease) forwards;
}
.engage-title{margin-bottom:11px}
.engage-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;color:var(--text-2)}
.engage-row + .engage-row{border-top:1px solid var(--line)}
.engage-row strong{color:var(--paper);font-weight:600}
.engage-check{
  width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--good-soft);color:var(--good);font-size:var(--fs-2xs);
}
.engage-check.is-open{background:var(--surface-3);color:var(--text-3)}

/* ==========================================================================
   13 · MOMENTS (member inbox)
   ========================================================================== */

.member-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}
.moments{display:flex;flex-direction:column;gap:var(--sp3)}
.moment{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.moment:hover{border-color:var(--line-strong);background:var(--surface-2)}
.moment-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.moment-units{font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--amber);font-variant-numeric:tabular-nums}
.moment-invited{color:var(--paper);font-size:var(--fs-2xs);letter-spacing:var(--tr-label);text-transform:uppercase}
.moment-title{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.012em;margin:0 0 4px;line-height:1.3}
.moment-sub{margin:0;font-size:var(--fs-xs);color:var(--text-3)}
.moment-why{margin:9px 0 0;font-size:var(--fs-sm);color:var(--text-2);border-left:2px solid var(--amber);padding-left:11px}
.moment-actions{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap}
.moment-done{display:none;margin-top:15px;font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh)}
.moment-done strong{color:var(--amber)}
.moment.is-done{border-color:var(--good-line)}
.moment.is-done .moment-actions{display:none}
.moment.is-done .moment-done{display:block}
.moment.is-passed{opacity:.45}
.moment.is-passed .moment-actions{display:none}
.ok-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:4px}
.moments-foot{font-size:var(--fs-xs);color:var(--text-3);padding:6px 2px}

/* rail */
.rail{display:flex;flex-direction:column;gap:var(--sp3);position:sticky;top:var(--sp6);min-width:0}
.rail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.rail-label{margin-bottom:10px}
.rail-body{margin:0;font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh)}
.rail-dim{color:var(--text-3);font-size:var(--fs-xs)}
.rail-note{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp3);line-height:var(--lh)}

/* tags */
.tag{
  display:inline-block;font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);border:1px solid;line-height:1.5;
}
.tag-advise{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.tag-door{color:var(--sky);border-color:var(--sky-line);background:var(--sky-soft)}
.tag-win{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.tag-cofound{color:var(--paper);border-color:var(--line-strong);background:var(--surface-3)}
.tag-join{color:var(--lilac);border-color:var(--lilac-line);background:var(--lilac-soft)}
.tag-row{display:flex;gap:5px;flex-wrap:wrap}
.tag-mini{
  display:inline-block;font-size:var(--fs-3xs);color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap;line-height:1.6;
}

/* status chips */
.st{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  padding:4px 11px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);
  color:var(--text-2);background:var(--surface-3);line-height:1.5;
}
.st .sdot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-new{color:var(--paper);border-color:var(--line-strong)}
.st-matching{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.st-matching .sdot{animation:pulse 1.1s ease-in-out infinite}
.st-proposed{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.st-pending{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.st-scheduled{color:var(--sky);border-color:var(--sky-line);background:var(--sky-soft)}
.st-done{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.st-routed{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.st-archived{color:var(--text-3);opacity:.75}
.st-active{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.st-invited{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.st-draft{color:var(--text-3);border-color:var(--line-strong);background:var(--surface-2)}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;
  padding:4px 11px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);color:var(--text-2);background:var(--surface-3);
}
.pill-assist{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}

/* ==========================================================================
   14 · MEMBER PROFILE
   ========================================================================== */

.profile{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}
.profile-main{display:flex;flex-direction:column;gap:var(--sp5);min-width:0}
.profile-rail{display:flex;flex-direction:column;gap:var(--sp3);position:sticky;top:var(--sp6);min-width:0}

.profile-head{
  display:flex;gap:var(--sp5);align-items:flex-start;flex-wrap:wrap;
  padding-bottom:var(--sp5);border-bottom:1px solid var(--line);
}
.profile-id{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.profile-name{
  font-family:var(--display);font-weight:700;font-size:var(--fs-2xl);
  letter-spacing:-.024em;line-height:var(--lh-tight);margin:0;
}
.profile-role{font-size:var(--fs-lg);color:var(--text-2);font-weight:500;line-height:var(--lh-snug);margin:0}
.profile-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
.profile-fact{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;
}
.profile-fact svg{color:var(--text-4);flex:none}
.profile-fact strong{color:var(--text-2);font-weight:500}
.profile-avail{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:6px 14px;font-size:var(--fs-xs);color:var(--text-2);white-space:nowrap;
}
.profile-avail .sdot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.profile-avail.is-limited .sdot{background:var(--amber)}
.profile-avail.is-closed .sdot{background:var(--text-3)}
.profile-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

.bio{max-width:68ch}
.bio-text{margin:0;font-size:var(--fs-md);color:var(--text-2);line-height:var(--lh-loose)}
.bio-text + .bio-text{margin-top:var(--sp3)}
.bio-links{display:flex;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp3)}
.bio-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--text-2);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-loud);
  transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease);
}
.bio-link:hover{color:var(--amber);text-decoration-color:var(--amber-line)}

.expertise{display:flex;flex-wrap:wrap;gap:7px}
.expertise-tag{
  display:inline-block;font-size:var(--fs-xs);color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-xs);padding:5px 11px;line-height:1.4;white-space:nowrap;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
a.expertise-tag:hover{border-color:var(--amber-line);color:var(--amber);text-decoration:none}
.expertise-tag.is-match{border-color:var(--amber-line);color:var(--amber);background:var(--amber-soft)}

/* contribution history — a typed timeline, so the marker carries meaning */
.history{display:flex;flex-direction:column;position:relative}
.history-item{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--sp3);
  padding:var(--sp3) 0;align-items:start;position:relative;
}
.history-item + .history-item{border-top:1px solid var(--line)}
.history-ico{
  width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-3);
}
.history-item.is-session .history-ico{color:var(--viz-1);border-color:rgba(201,128,1,.5)}
.history-item.is-door .history-ico{color:var(--viz-2);border-color:rgba(42,152,175,.5)}
.history-item.is-win .history-ico{color:var(--viz-3);border-color:rgba(7,168,85,.5)}
.history-item.is-cofound .history-ico{color:var(--viz-4);border-color:rgba(134,104,182,.5)}
.history-body{min-width:0}
.history-what{font-size:var(--fs-sm);color:var(--paper);line-height:1.45;margin:0}
.history-what strong{font-weight:600}
.history-who{font-size:var(--fs-xs);color:var(--text-3);margin:3px 0 0;line-height:1.45}
.history-when{font-size:var(--fs-xs);color:var(--text-4);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.history-units{
  font-family:var(--display);font-weight:700;font-size:var(--fs-sm);
  color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* impact notes from founders */
.notes{display:flex;flex-direction:column;gap:var(--sp3)}
.note{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp4) 18px;
}
.note-quote{
  margin:0;font-family:var(--display);font-weight:500;font-size:var(--fs-lg);
  line-height:var(--lh-snug);letter-spacing:-.008em;color:var(--paper);text-wrap:pretty;
}
.note-quote::before{content:"\201C"}
.note-quote::after{content:"\201D"}
.note-by{
  display:flex;align-items:center;gap:9px;margin:var(--sp3) 0 0;
  font-size:var(--fs-xs);color:var(--text-3);
}
.note-by strong{color:var(--text-2);font-weight:600}
.note-co{color:var(--text-4)}
.note-when{margin-left:auto;color:var(--text-4);font-variant-numeric:tabular-nums}

/* admin-only contact block — reads as privileged */
.contact{
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:var(--sp4) 18px;position:relative;
  background-image:repeating-linear-gradient(135deg,rgba(250,250,250,.022) 0 6px,transparent 6px 12px);
}
.contact-head{display:flex;align-items:center;gap:8px;margin-bottom:var(--sp3);padding-bottom:11px;border-bottom:1px solid var(--line)}
.contact-lock{display:inline-flex;color:var(--amber);flex:none}
.contact-title{font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-2)}
.contact-scope{margin-left:auto;font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--amber)}
.contact-rows{display:flex;flex-direction:column;gap:10px}
.contact-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:var(--sp3);align-items:baseline;font-size:var(--fs-sm)}
.contact-k{font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-3)}
.contact-v{color:var(--paper);word-break:break-word;min-width:0}
.contact-v.is-empty{color:var(--text-4);font-style:italic}
.contact-note{font-size:var(--fs-2xs);color:var(--text-3);margin:var(--sp3) 0 0;line-height:var(--lh)}

/* ==========================================================================
   15 · MEMBER DIRECTORY
   ========================================================================== */

.directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--sp3)}
.dir-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:var(--sp3);min-width:0;
  text-align:left;color:inherit;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
a.dir-card:hover,button.dir-card:hover{border-color:var(--line-loud);background:var(--surface-2);transform:translateY(-1px);text-decoration:none}
a.dir-card:active,button.dir-card:active{transform:translateY(0)}
.dir-card-head{display:flex;align-items:center;gap:var(--sp3);min-width:0}
.dir-name{font-family:var(--display);font-weight:600;font-size:var(--fs-lg);letter-spacing:-.012em;line-height:1.25;margin:0}
.dir-role{font-size:var(--fs-xs);color:var(--text-3);line-height:1.35;margin:2px 0 0}
.dir-bio{font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dir-tags{display:flex;gap:5px;flex-wrap:wrap}
.dir-meta{
  display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--sp3);border-top:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--text-3);
}
.dir-stat{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.dir-stat strong{color:var(--text-2);font-weight:600}

/* dense list variant */
.directory.is-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.directory.is-list .dir-card{
  border:0;border-radius:0;flex-direction:row;align-items:center;gap:var(--sp4);
  padding:12px 16px;transform:none;
}
.directory.is-list .dir-card + .dir-card{border-top:1px solid var(--line)}
.directory.is-list .dir-bio,.directory.is-list .dir-tags{display:none}
.directory.is-list .dir-meta{margin:0 0 0 auto;padding:0;border:0;white-space:nowrap}

/* ==========================================================================
   16 · NOTIFICATIONS
   ========================================================================== */

.bell{
  position:relative;background:none;border:1px solid transparent;color:var(--text-2);
  width:36px;height:36px;border-radius:var(--radius-sm);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.bell:hover{background:var(--surface-2);color:var(--paper)}
.bell[aria-expanded="true"]{background:var(--surface-3);color:var(--paper)}
.bell-badge{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--radius-pill);background:var(--amber);color:var(--ink);
  font-size:10px;font-weight:700;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--bg);
}
.bell-dot{
  position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 2px var(--bg);
}
.bell.is-unread{color:var(--paper)}

.notif-pop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:76;
  width:min(360px,calc(100vw - 32px));
  background:var(--surface-4);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);overflow:hidden;
  animation:pop var(--dur-2) var(--ease) both;
}
.notif-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.notif-head-title{font-size:var(--fs-sm);font-weight:600}
.notif-list{max-height:min(60vh,420px);overflow-y:auto;display:flex;flex-direction:column}
.notif{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;
  padding:12px 14px;text-align:left;background:none;border:0;width:100%;
  color:var(--text-2);position:relative;
  transition:background var(--dur-1) var(--ease);
}
.notif + .notif{border-top:1px solid var(--line)}
.notif:hover{background:rgba(250,250,250,.05)}
.notif.is-unread{background:var(--amber-wash)}
.notif.is-unread:hover{background:var(--amber-soft)}
.notif.is-unread::before{
  content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--amber);
}
.notif-ico{
  width:26px;height:26px;border-radius:50%;flex:none;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line);color:var(--text-3);
}
.notif.is-unread .notif-ico{border-color:var(--amber-line);color:var(--amber);background:var(--amber-soft)}
.notif-body{min-width:0}
.notif-text{font-size:var(--fs-sm);line-height:1.45;margin:0;color:var(--text-2)}
.notif.is-unread .notif-text{color:var(--paper)}
.notif-text strong{color:var(--paper);font-weight:600}
.notif-when{font-size:var(--fs-2xs);color:var(--text-4);margin:3px 0 0;font-variant-numeric:tabular-nums}
.notif-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:var(--sp3)}
.notif-empty{padding:var(--sp7) var(--sp5);text-align:center}
.notif-empty-title{font-size:var(--fs-sm);font-weight:600;margin:0 0 4px}
.notif-empty-line{font-size:var(--fs-xs);color:var(--text-3);margin:0;line-height:var(--lh)}

/* ==========================================================================
   17 · THE ROOM FEED
   ========================================================================== */

.feed{display:flex;flex-direction:column}
.feed-day{
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-4);padding:var(--sp5) 0 var(--sp2);
}
.feed-day:first-child{padding-top:0}
.feed-item{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:var(--sp3);
  padding:13px 0;align-items:start;
}
.feed-item + .feed-item{border-top:1px solid var(--line)}
.feed-ico{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text-3);
}
.feed-item.is-session .feed-ico{color:var(--viz-1);border-color:rgba(201,128,1,.5);background:rgba(201,128,1,.10)}
.feed-item.is-door .feed-ico{color:var(--viz-2);border-color:rgba(42,152,175,.5);background:rgba(42,152,175,.10)}
.feed-item.is-win .feed-ico{color:var(--viz-3);border-color:rgba(7,168,85,.5);background:rgba(7,168,85,.10)}
.feed-item.is-joined .feed-ico{color:var(--viz-4);border-color:rgba(134,104,182,.5);background:rgba(134,104,182,.10)}
.feed-body{min-width:0}
.feed-text{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;margin:0}
.feed-text strong{color:var(--paper);font-weight:600}
.feed-kind{
  display:inline-block;margin-right:7px;
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
}
.feed-item.is-session .feed-kind{color:var(--viz-1-ink)}
.feed-item.is-door .feed-kind{color:var(--viz-2-ink)}
.feed-item.is-win .feed-kind{color:var(--viz-3-ink)}
.feed-item.is-joined .feed-kind{color:var(--viz-4-ink)}
.feed-sub{font-size:var(--fs-xs);color:var(--text-3);margin:3px 0 0;line-height:1.45}
.feed-when{font-size:var(--fs-xs);color:var(--text-4);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}

/* ==========================================================================
   18 · STATS, METERS, CHARTS
   ========================================================================== */

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp3);margin-bottom:22px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;min-width:0;
  transition:border-color var(--dur-2) var(--ease);
}
.tile:hover{border-color:var(--line-strong)}
.tile-value{font-family:var(--display);font-weight:800;font-size:var(--fs-3xl);letter-spacing:-.022em;line-height:1.05}
.tile-accent{color:var(--amber)}
.tile-label{font-size:var(--fs-xs);color:var(--text-3);margin-top:6px;line-height:1.4}
.tile-delta{
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font-size:var(--fs-2xs);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.tile-delta.is-up{color:var(--good)}
.tile-delta.is-down{color:var(--warn)}
.tile-foot{margin-top:var(--sp3);padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-2xs);color:var(--text-4)}

/* stat row (profile) — flex with hairline dividers, so a short row never
   leaves an empty grid cell showing through */
.statrow{
  display:flex;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.stat{flex:1 1 0;min-width:96px;padding:var(--sp4) 16px}
.stat + .stat{box-shadow:-1px 0 0 var(--line)}
.stat-value{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1.1}
.stat-value.is-accent{color:var(--amber)}
.stat-label{font-size:var(--fs-2xs);color:var(--text-3);margin-top:5px;line-height:1.4}
.stat-hint{font-size:var(--fs-2xs);color:var(--text-4);margin-top:3px;line-height:1.4}

/* meters — single-series magnitude */
.meter{display:flex;flex-direction:column;gap:7px;min-width:0}
.meter + .meter{margin-top:var(--sp3)}
.meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp3)}
.meter-label{font-size:var(--fs-xs);color:var(--text-2)}
.meter-value{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.meter-track{height:6px;border-radius:99px;background:var(--viz-track);overflow:hidden;display:block}
.meter-fill{
  display:block;height:100%;width:var(--w,0%);border-radius:99px;background:var(--viz-1);
  transition:width var(--dur-4) var(--ease);
}
.meter.is-k1 .meter-fill{background:var(--viz-1)}
.meter.is-k2 .meter-fill{background:var(--viz-2)}
.meter.is-k3 .meter-fill{background:var(--viz-3)}
.meter.is-k4 .meter-fill{background:var(--viz-4)}
.meter.is-good .meter-fill{background:var(--viz-3)}
.meter.is-low .meter-fill{background:var(--viz-1)}
.meter-note{font-size:var(--fs-2xs);color:var(--text-3);line-height:1.45}
.meter-lg .meter-track{height:9px}

/* profile completeness */
.complete{display:flex;flex-direction:column;gap:var(--sp3)}
.complete-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp3)}
.complete-pct{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.complete-list{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.complete-item{
  display:flex;align-items:center;gap:9px;
  font-size:var(--fs-xs);color:var(--text-3);line-height:1.45;
}
.complete-item .engage-check{margin-top:0;width:16px;height:16px;font-size:10px}
.complete-item.is-done{color:var(--text-2)}
.complete-item.is-done .engage-check{background:var(--good-soft);color:var(--good)}

/* stake breakdown (kind-typed, always direct-labelled) */
.stake-total{font-family:var(--display);font-weight:800;font-size:var(--fs-3xl);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.stake-unit-word{font-size:var(--fs-md);font-weight:600;color:var(--text-3);letter-spacing:0}
.stake-delta{font-size:var(--fs-xs);color:var(--text-3);margin:6px 0 14px}
.stake-delta.is-hot{color:var(--amber)}
.stake-rows{display:flex;flex-direction:column;gap:9px}
.stake-row{display:grid;grid-template-columns:86px minmax(0,1fr) 46px;gap:10px;align-items:center;font-size:var(--fs-xs);color:var(--text-2)}
.stake-row span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-3)}
.stake-bar{height:6px;border-radius:99px;background:var(--viz-track);overflow:hidden;display:block}
.stake-bar i{display:block;height:100%;width:var(--w,0%);border-radius:99px;background:var(--viz-1);transition:width var(--dur-4) var(--ease)}
.stake-row.is-k1 .stake-bar i{background:var(--viz-1)}
.stake-row.is-k2 .stake-bar i{background:var(--viz-2)}
.stake-row.is-k3 .stake-bar i{background:var(--viz-3)}
.stake-row.is-k4 .stake-bar i{background:var(--viz-4)}
.stake-hero{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end}
.stake-total-lg{font-family:var(--display);font-weight:800;font-size:var(--fs-4xl);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.rail-card .stake-rows{margin-top:2px}

/* bar chart */
.chart{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:14px;align-items:end;height:190px;padding-top:26px;position:relative;
}
.chart-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;position:relative;min-width:0}
.bar{
  width:100%;max-width:58px;border-radius:4px 4px 0 0;background:var(--viz-1);
  min-height:4px;position:relative;
  transform-origin:bottom;animation:grow .7s var(--ease) both;
  transition:filter var(--dur-1) var(--ease);
}
@keyframes grow{from{transform:scaleY(0)}}
.bar-col:hover .bar{filter:brightness(1.18)}
.bar.is-k1{background:var(--viz-1)}
.bar.is-k2{background:var(--viz-2)}
.bar.is-k3{background:var(--viz-3)}
.bar.is-k4{background:var(--viz-4)}
.bar.is-muted{background:var(--viz-0)}
.bar-label{font-size:var(--fs-2xs);color:var(--text-3)}
.bar-value{
  position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  font-size:var(--fs-2xs);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;
  opacity:0;transition:opacity var(--dur-1) var(--ease);
}
.bar-col:hover .bar-value,.bar-col.is-labeled .bar-value{opacity:1}
.chart-base{position:absolute;left:0;right:0;bottom:26px;border-bottom:1px solid var(--viz-axis)}

/* stacked bar — 2px surface gap between segments, per the dataviz rules */
.stack{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--viz-track);gap:2px}
.stack i{display:block;height:100%;width:var(--w,0%);background:var(--viz-1)}
.stack i.is-k1{background:var(--viz-1)}
.stack i.is-k2{background:var(--viz-2)}
.stack i.is-k3{background:var(--viz-3)}
.stack i.is-k4{background:var(--viz-4)}

/* legend — present whenever two or more series share a plot */
.legend{display:flex;flex-wrap:wrap;gap:var(--sp3) var(--sp4);margin-top:var(--sp3)}
.legend-item{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-2xs);color:var(--text-2)}
.legend-swatch{width:10px;height:10px;border-radius:3px;flex:none;background:var(--viz-1)}
.legend-swatch.is-k1{background:var(--viz-1)}
.legend-swatch.is-k2{background:var(--viz-2)}
.legend-swatch.is-k3{background:var(--viz-3)}
.legend-swatch.is-k4{background:var(--viz-4)}
.legend-value{color:var(--text-3);font-variant-numeric:tabular-nums}

.how-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px;font-size:var(--fs-xs);color:var(--text-2);line-height:var(--lh)}
.how-list strong{color:var(--paper)}

/* ==========================================================================
   19 · TABLES
   ========================================================================== */

.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
.ledger-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}

.ledger-table,.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ledger-table{min-width:560px}
.data-table{min-width:660px}
.ledger-table th,.data-table th{
  text-align:left;font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--text-3);padding:8px 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.ledger-table td,.data-table td{padding:11px 10px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:middle}
.ledger-table tr:last-child td,.data-table tr:last-child td{border-bottom:0}
.ledger-table td:first-child{color:var(--text-3);white-space:nowrap}
.ledger-table td:nth-child(2){color:var(--paper);font-weight:500;white-space:nowrap}
.ledger-table .tag,.data-table .tag{margin-right:8px}
.data-table .cell-strong{color:var(--paper);font-weight:500;white-space:nowrap}
.data-table .cell-dim{color:var(--text-3)}
.data-table .cell-nowrap{white-space:nowrap}
.data-table tbody tr{transition:background var(--dur-1) var(--ease)}
.data-table.is-rows tbody tr:hover{background:var(--surface-2)}
.data-table tbody tr.is-selected{background:var(--amber-wash)}
.row-actions{display:flex;gap:7px;justify-content:flex-end;white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--amber);font-weight:600;white-space:nowrap}
th.num{color:var(--text-3);font-weight:600}
.entry-desc{color:var(--text-2)}

/* ==========================================================================
   20 · OVERLAYS — modal, drawer, popover
   ========================================================================== */

.modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(4,4,4,.74);
  animation:fade var(--dur-2) var(--ease) both;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
@keyframes fade{from{opacity:0}}
.modal-card{
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);padding:22px 24px 24px;
  animation:lift var(--dur-3) var(--ease) both;
}
@keyframes lift{from{opacity:0;transform:translateY(10px) scale(.99)}}
.modal-wide{max-width:880px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.modal-title{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.018em;margin:0}
.modal-sub{font-size:var(--fs-xs);color:var(--text-3);margin:4px 0 0;line-height:var(--lh)}
.modal-body{min-width:0}
.modal-x{
  background:none;border:0;color:var(--text-3);font-size:19px;line-height:1;
  padding:3px 8px;border-radius:var(--radius-xs);flex:none;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.modal-x:hover{color:var(--paper);background:var(--surface-3)}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:20px;flex-wrap:wrap}

.drawer{
  position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;
  background:rgba(4,4,4,.66);animation:fade var(--dur-2) var(--ease) both;
}
.drawer-panel{
  width:min(460px,100%);height:100%;display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow-pop);animation:slide var(--dur-3) var(--ease) both;
}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 22px;border-bottom:1px solid var(--line);
}
.drawer-title{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.016em;margin:0}
.drawer-sub{font-size:var(--fs-xs);color:var(--text-3);margin:4px 0 0;line-height:var(--lh)}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px}
.drawer-foot{
  display:flex;gap:9px;justify-content:flex-end;align-items:center;flex-wrap:wrap;
  padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-2);
}

.copy-row{
  display:flex;gap:9px;align-items:center;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:8px 8px 8px 13px;
}
.copy-url{
  flex:1;min-width:0;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2);
  overflow-x:auto;white-space:nowrap;padding:2px 0;
}

/* ==========================================================================
   21 · ADMIN — dashboard blocks, company page, knowledge base, console
   ========================================================================== */

.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp3);align-items:start}
.block{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
}
.block-wide{grid-column:span 2}
.block-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.block-title{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.008em}
.block-link{font-size:var(--fs-xs);color:var(--text-3)}
.block-link:hover{color:var(--amber);text-decoration:none}
.block-body{padding:18px;min-width:0}
.block-body.is-flush{padding:0}
.block-body.is-flush .feed-item,.block-body.is-flush .notif{padding-left:18px;padding-right:18px}
.block-foot{padding:11px 18px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-3)}

/* key/value rows — company page facts, settings summaries */
.kv{display:flex;flex-direction:column}
.kv-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp4);
  padding:11px 0;align-items:baseline;font-size:var(--fs-sm);
}
.kv-row + .kv-row{border-top:1px solid var(--line)}
.kv-k{font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-3)}
.kv-v{color:var(--paper);min-width:0}
.kv-v.is-empty{color:var(--text-4);font-style:italic}

/* knowledge-base editor */
.kb{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.kb-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;position:sticky;top:var(--sp6)}
.kb-form-head{margin-bottom:var(--sp4)}
.kb-list{display:flex;flex-direction:column;gap:var(--sp2)}
.kb-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.kb-item:hover{border-color:var(--line-strong);background:var(--surface-2)}
.kb-item.is-editing{border-color:var(--amber-line);background:var(--surface-2)}
.kb-item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kb-item-title{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;margin:0;line-height:1.35}
.kb-item-meta{font-size:var(--fs-2xs);color:var(--text-4);margin-left:auto;white-space:nowrap}
.kb-item-body{
  font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.kb-item-foot{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;margin-top:2px}
.kb-item-foot .row-actions{margin-left:auto}

/* matching console */
.console-ask{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:19px 21px;margin-bottom:18px}
.console-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.console-bar .sec-title{margin-right:auto}
.console{display:flex;flex-direction:column;gap:11px}
.crow{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:grid;grid-template-columns:19px minmax(0,1fr);gap:13px;
  align-items:start;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.crow:hover{border-color:var(--line-strong)}
.crow.is-on{border-color:var(--amber-line);background:var(--surface-2)}
.crow-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.crow-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.crow-fit{
  margin-left:auto;font-size:var(--fs-3xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
.crow-grid{display:grid;grid-template-columns:132px minmax(0,1fr) 190px 92px;gap:10px;align-items:end}
.crow-note{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh)}
.crow-remove{margin-left:8px}
.add-manual{
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:14px 16px;display:flex;gap:10px;align-items:end;flex-wrap:wrap;
}
.add-manual .field{margin:0;flex:1;min-width:220px}

/* ==========================================================================
   22 · EMPTY + LOADING
   ========================================================================== */

.empty{
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:34px 26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.empty-ico{
  width:38px;height:38px;border-radius:50%;margin-bottom:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-3);
}
.empty-title{font-family:var(--display);font-weight:600;font-size:var(--fs-lg);letter-spacing:-.012em;margin:0}
.empty-line{font-size:var(--fs-sm);color:var(--text-3);margin:0;line-height:var(--lh);max-width:46ch}
.empty-action{margin-top:var(--sp3)}
.empty-sm{padding:22px 18px}

.loading{font-size:var(--fs-xs);color:var(--text-3);padding:20px 2px}
.skeleton{display:flex;flex-direction:column;gap:10px}
.skel-line,.skel-block{
  background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);
  background-size:220% 100%;border-radius:6px;animation:shimmer 1.4s linear infinite;
}
.skel-line{height:11px}
.skel-line.is-short{width:42%}
.skel-line.is-mid{width:68%}
.skel-block{height:86px;border-radius:var(--radius)}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* ==========================================================================
   23 · TOAST
   ========================================================================== */

.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px);
  background:var(--surface-4);border:1px solid var(--line-strong);color:var(--paper);
  border-radius:var(--radius-pill);padding:11px 22px;font-size:var(--fs-sm);
  opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
  box-shadow:var(--shadow-pop);z-index:90;max-width:88vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-good{border-color:var(--good-line)}
.toast.is-error{border-color:var(--warn-line)}

/* ==========================================================================
   24 · RESPONSIVE
   ========================================================================== */

@media (max-width:1120px){
  .kb{grid-template-columns:1fr}
  .kb-form{position:static}
  .block-wide{grid-column:auto}
}
@media (max-width:1020px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-grid,.ledger-grid,.profile{grid-template-columns:minmax(0,1fr)}
  .rail,.profile-rail{position:static}
  .crow-grid{grid-template-columns:120px minmax(0,1fr) 150px 84px}
}
@media (max-width:900px){
  .ask-matches{grid-template-columns:1fr}
  .crow-grid{grid-template-columns:1fr}
  .field-row,.field-row-3,.form-grid{grid-template-columns:1fr}
}

/* sidebar becomes a top bar */
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr);align-content:start} /* start, not stretch: min-height:100vh would otherwise split the spare height between the top bar and a short view and strand the nav mid-screen */
  .sidebar{
    position:sticky;top:0;height:auto;z-index:40;
    background:rgba(10,10,10,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    flex-direction:row;align-items:center;gap:12px;
    padding:10px 16px;border-right:0;border-bottom:1px solid var(--line);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sidebar .brand{--lk:var(--lk-foot)}
  .side-brand{
    gap:calc(var(--lk-foot) * .44);
    padding:0 calc(var(--lk-foot) * .44) 0 0;flex:none;
  }
  .side-brand-tag{display:none}
  .side-brand-name{font-size:16px}
  .side-nav{flex-direction:row;align-items:center;gap:4px}
  .side-group{display:none}
  .side-link{white-space:nowrap;font-size:var(--fs-xs);padding:8px 12px}
  .side-badge{margin-left:4px}
  .side-foot{display:none}
  .view{padding:22px 18px 40px}
  .view-head{flex-direction:column;align-items:flex-start;gap:12px}
  .view-head .acct{align-self:flex-start}
  .acct-menu,.notif-pop{right:auto;left:0}
  .matches{grid-template-columns:1fr}
  .msg{max-width:100%}
  .chat-wrap{min-height:calc(100vh - 250px)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stake-total-lg{font-size:var(--fs-3xl)}
  .modal{padding:14px;align-items:flex-start;padding-top:40px}
  .plan-row{grid-template-columns:20px minmax(0,1fr)}
  .plan-row-label{grid-column:2;margin-bottom:-6px}
  .plan-row-value{grid-column:2}
  .plan-foot{align-items:flex-start}
  .plan-actions{margin-left:0;width:100%}
  .plan-actions .btn-primary{flex:1}
  .directory{grid-template-columns:1fr}
  .drawer-panel{width:100%}
}

@media (max-width:520px){
  .tiles{grid-template-columns:1fr}
  .auth{padding:34px 16px 76px}
  .auth-brand{padding:calc(44px * .44) 0}
  .auth-brand .brand{--lk:44px}
  .brand{--lk:var(--lk-foot)}
  .profile-head{gap:var(--sp4)}
  .avatar-xl{width:60px;height:60px;font-size:20px}
  .contact-row,.kv-row{grid-template-columns:1fr;gap:2px}
  .history-item,.feed-item{grid-template-columns:22px minmax(0,1fr)}
  .history-when,.feed-when{grid-column:2;text-align:left;margin-top:3px}
}

@media (max-height:600px){
  .cover{overflow:auto;justify-content:flex-start}
  .cover-inner{padding-top:26px}
  .cover-foot{position:static;margin-top:30px;flex:none}
}

/* ==========================================================================
   25 · MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .msg,.match,.engage,.plan,.thinking,.msg-sys,.chat-note,.replay{opacity:1;transform:none}
  .ping.is-live::after{display:none}
}

@media (prefers-contrast:more){
  :root{
    --line:rgba(250,250,250,.20);
    --line-strong:rgba(250,250,250,.34);
    --text-3:#A9A9A6;
    --text-4:#8E8E8B;
  }
}


/* ==========================================================================
   ==========================================================================
   SONAR v4 — PROMPT-FIRST · AI TWINS · SONAR BOXES
   --------------------------------------------------------------------------
   Additive only. Every v2/v3 class above still resolves untouched.

     26 v4 tokens · 27 prompt-first home · 28 scoped prompt
     29 twin identity + disclosure · 30 escalation · 31 review queue
     32 Sonar Box · 33 onboarding research · 34 advisor rename aliases
     35 v4 responsive · 36 v4 motion

   THE ONE RULE THAT MATTERS
   -------------------------
   A machine answer must never be mistakable for the human. v4 carries that
   on a FORM channel, not a colour one, so it survives greyscale, colour-vision
   deficiency, low contrast and a 16px avatar:

        SOLID EDGE = a person.     DASHED EDGE = a machine.

   The dash appears on the twin avatar, the disclosure band, an unverified
   research item and the research spine — nowhere else in the system.
   ========================================================================== */

/* ==========================================================================
   26 · v4 TOKENS — named intents over the existing validated palette.
   No new hues are introduced.
   ========================================================================== */

:root{
  /* the machine register */
  --twin-edge:rgba(250,250,250,.34);   /* the dashed edge — machine, provisional */
  --twin-edge-hi:rgba(250,250,250,.52);
  --twin-ground:#171614;               /* half a step off --surface: a twin block is
                                          adjacent to the human plane, not on it */
  --twin-hatch:rgba(250,250,250,.05);  /* the weave behind a twin answer */

  /* escalation reuses the "door / introduction" hue, because an escalation
     IS an introduction — a question being handed to a person. */
  --handoff:var(--sky);
  --handoff-soft:var(--sky-soft);
  --handoff-line:var(--sky-line);

  /* Sonar Box source spines. The validated --viz-N fills, re-used for a
     different 4-member categorical set (see DESIGN.md §9.6): own file /
     own words / points outward / machine-found. Research is ALSO dashed,
     so the machine reading never depends on hue. */
  --src-upload:var(--viz-1);
  --src-paste:var(--viz-4);
  --src-link:var(--viz-2);
  --src-research:var(--twin-edge);   /* the machine edge, not a hue */

  /* prompt-first type */
  --fs-prompt:18px;                    /* the home prompt input */
  --fs-prompt-sm:15px;                 /* the scoped prompt input */
}

/* ==========================================================================
   27 · THE PROMPT-FIRST HOME
   --------------------------------------------------------------------------
   The prompt IS the page. One centred column, the lockup above it, openers
   beneath, recent threads below the fold. Identical layout for all three
   roles — only the placeholder and the openers differ.
   ========================================================================== */

.home{max-width:none;padding:0}
.home-inner{
  max-width:720px;width:100%;margin:0 auto;
  padding:var(--sp7) var(--sp5) var(--sp9);
  display:flex;flex-direction:column;
  min-height:calc(100vh - 96px);
  min-height:calc(100svh - 96px);
  transition:padding var(--dur-3) var(--ease);
}

/* the block that fades away when a thread starts.
   Holds ONLY the lockup, the title and the line. */
.home-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp3);margin:auto auto var(--sp6);max-height:60vh;overflow:visible;
  transition:max-height var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease),
             transform var(--dur-3) var(--ease),margin var(--dur-3) var(--ease);
}
.home-lockup{display:flex;justify-content:center}
.home-lockup .brand{--lk:34px;color:var(--paper)}
.home-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.4vw,40px);letter-spacing:-.03em;
  line-height:var(--lh-tight);margin:0;text-wrap:balance;
}
.home-title .cover-dot{color:var(--amber)}
.home-line{
  margin:0;color:var(--text-3);font-size:var(--fs-md);
  line-height:var(--lh);max-width:52ch;text-wrap:balance;
}

/* the prompt itself — deliberately larger than .composer-bar */
.home-prompt{
  display:flex;flex-direction:column;gap:10px;width:100%;
  margin:0 auto;flex:none;
}
.home-prompt-bar{
  display:flex;gap:10px;align-items:flex-end;width:100%;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:26px;padding:8px 8px 8px 24px;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
             padding var(--dur-3) var(--ease),border-radius var(--dur-3) var(--ease);
}
.home-prompt-bar:hover{border-color:var(--line-loud)}
.home-prompt-bar:focus-within{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-wash),var(--shadow-sm)}
.home-prompt-input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);
  font-family:var(--ui);font-size:var(--fs-prompt);line-height:1.5;
  padding:13px 0;resize:none;max-height:220px;overflow-y:auto;
  transition:font-size var(--dur-3) var(--ease),padding var(--dur-3) var(--ease);
}
.home-prompt-input::placeholder{color:var(--text-4)}
.home-prompt-send{
  width:44px;height:44px;border-radius:50%;border:0;flex:none;
  background:var(--amber);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
             width var(--dur-3) var(--ease),height var(--dur-3) var(--ease);
}
.home-prompt-send:hover{background:var(--amber-hi)}
.home-prompt-send:active{transform:scale(.94)}
.home-prompt-send[disabled]{opacity:.4;cursor:not-allowed;background:var(--amber);transform:none}
.home-prompt-note{
  margin:0;text-align:center;font-size:var(--fs-2xs);color:var(--text-4);
}
.home-prompt-note kbd{
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text-3);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;
}

/* suggested openers — cards, not chips: this is the moment they carry */
.home-openers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px;width:100%;margin-top:var(--sp5);
  max-height:50vh;
  transition:max-height var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease),
             transform var(--dur-3) var(--ease),margin var(--dur-3) var(--ease);
}
.home-opener{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  border-radius:var(--radius);padding:14px 15px;
  font-size:var(--fs-sm);line-height:1.45;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.home-opener:hover{
  border-color:var(--amber-line);color:var(--paper);
  background:var(--surface-2);transform:translateY(-1px);text-decoration:none;
}
.home-opener:active{transform:translateY(0)}
.home-opener-text{min-width:0}
.home-opener-go{
  color:var(--text-4);flex:none;font-size:var(--fs-xs);line-height:1.6;
  transition:color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease);
}
.home-opener:hover .home-opener-go{color:var(--amber);transform:translateX(2px)}

/* below the fold — recent threads */
.home-fold{
  margin-top:var(--sp9);padding-top:var(--sp5);border-top:1px solid var(--line);
  transition:opacity var(--dur-2) var(--ease);
}
.home-fold-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp3);margin-bottom:var(--sp3);
}
.home-recent{display:flex;flex-direction:column}
.home-thread{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px var(--sp4);align-items:baseline;
  padding:13px 12px;margin:0 -12px;border-radius:var(--radius-sm);
  color:var(--text-2);
  transition:background var(--dur-1) var(--ease);
}
.home-thread + .home-thread{box-shadow:inset 0 1px 0 var(--line)}
.home-thread:hover{background:var(--surface);text-decoration:none}
.home-thread-title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--paper);letter-spacing:-.006em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.home-thread:hover .home-thread-title{color:var(--amber)}
.home-thread-when{
  font-size:var(--fs-2xs);color:var(--text-4);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
.home-thread-snip{
  grid-column:1;font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.home-empty{padding:var(--sp5) 0;font-size:var(--fs-xs);color:var(--text-4)}

/* --- the transition: a thread starts from the home prompt ----------------
   Frontend adds .is-starting, appends .home-launch, and swaps to .chat-wrap
   once the outbound transition has run (~300ms). */
.home-launch{display:none}
.home.is-starting .home-inner{justify-content:flex-start;padding-top:var(--sp5)}
.home.is-starting .home-hero{
  max-height:0;opacity:0;transform:translateY(-14px);
  margin:0;overflow:hidden;pointer-events:none;
}
.home.is-starting .home-openers{
  max-height:0;opacity:0;transform:translateY(-10px);
  margin-top:0;overflow:hidden;pointer-events:none;
}
.home.is-starting .home-fold{display:none}
.home.is-starting .home-prompt{order:-1}
.home.is-starting .home-prompt-bar{padding:5px 5px 5px 20px;border-radius:22px}
.home.is-starting .home-prompt-input{font-size:15px;padding:10px 0}
.home.is-starting .home-prompt-send{width:38px;height:38px}
.home.is-starting .home-launch{
  display:flex;flex-direction:column;gap:var(--sp5);
  padding-top:var(--sp6);
}

/* ==========================================================================
   28 · SCOPED PROMPT — the same prompt, smaller, leading a profile.
   Sits above .profile / .kv on every advisor and company page.
   ========================================================================== */

.prompt-scoped{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--sp4) 18px var(--sp4);
  margin-bottom:22px;
  display:flex;flex-direction:column;gap:11px;
}
.prompt-scoped-head{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-3);
}
.prompt-scoped-head .twin-avatar,
.prompt-scoped-head .avatar{flex:none}
/* the head is an uppercase micro-label — but a person's name never is */
.prompt-scoped-head .twin-name{
  text-transform:none;letter-spacing:-.008em;font-size:var(--fs-sm);
}
.prompt-scoped-head .st,
.prompt-scoped-head .twin-badge{margin-left:auto}
.prompt-scoped-bar{
  display:flex;gap:8px;align-items:flex-end;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:20px;padding:5px 5px 5px 18px;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.prompt-scoped-bar:hover{border-color:var(--line-loud)}
.prompt-scoped-bar:focus-within{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-wash)}
.prompt-scoped-input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);
  font-family:var(--ui);font-size:var(--fs-prompt-sm);line-height:1.5;
  padding:9px 0;resize:none;max-height:140px;overflow-y:auto;
}
.prompt-scoped-input::placeholder{color:var(--text-4)}
.prompt-scoped-send{
  width:36px;height:36px;border-radius:50%;border:0;flex:none;
  background:var(--amber);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.prompt-scoped-send:hover{background:var(--amber-hi)}
.prompt-scoped-send:active{transform:scale(.94)}
.prompt-scoped-send[disabled]{opacity:.4;cursor:not-allowed;background:var(--amber);transform:none}
.prompt-scoped-openers{display:flex;gap:7px;flex-wrap:wrap}
.prompt-scoped-opener{
  background:none;border:1px solid var(--line);color:var(--text-3);
  border-radius:var(--radius-pill);font-size:var(--fs-2xs);padding:5px 12px;line-height:1.3;
  text-align:left;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.prompt-scoped-opener:hover{border-color:var(--amber-line);color:var(--amber);background:var(--amber-wash)}
.prompt-scoped-note{margin:0;font-size:var(--fs-2xs);color:var(--text-4);line-height:var(--lh)}

/* the subject's twin is off — the prompt still exists, it just reaches a human */
.prompt-scoped.is-off .prompt-scoped-bar{background:var(--surface-2);border-style:dashed}
.prompt-scoped.is-off .prompt-scoped-note{color:var(--text-3)}

/* ==========================================================================
   29 · TWIN IDENTITY AND DISCLOSURE
   --------------------------------------------------------------------------
   CRITICAL. A twin answer carries the machine reading on FOUR independent
   channels, any one of which is enough:
     1. the avatar is dashed and carries a radar node — a person's never is
     2. the name is "Sonar · {name}", never "{name}"
     3. a full-width disclosure BAND above the answer, at body size
     4. the answer block itself is hatched and dash-railed
   The band is not decoration, not collapsible, not dismissible, and it
   precedes the answer in the reading order. See DESIGN.md §9.3.
   ========================================================================== */

/* --- the twin avatar: a person's initials, visibly machine-held ---------- */
.twin-avatar{
  position:relative;flex:none;
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.02em;
  background:var(--twin-ground);color:var(--text-2);
  border:1.5px dashed var(--twin-edge);
}
.twin-avatar.is-sm{width:30px;height:30px;font-size:11px;border-width:1.5px}
.twin-avatar.is-lg{width:52px;height:52px;font-size:17px}
.twin-avatar.is-xl{width:76px;height:76px;font-size:24px;font-family:var(--display);font-weight:700}
/* the radar node — Sonar's mark, riding on the person's initials */
.twin-avatar-tag{
  position:absolute;right:-3px;bottom:-3px;
  width:16px;height:16px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber);color:var(--ink);
  border:2px solid var(--bg);
}
.twin-avatar-tag svg{width:9px;height:9px}
.twin-avatar.is-sm .twin-avatar-tag{width:14px;height:14px;right:-3px;bottom:-3px}
.twin-avatar.is-lg .twin-avatar-tag{width:20px;height:20px}
.twin-avatar.is-xl .twin-avatar-tag{width:26px;height:26px;border-width:3px}
.twin-avatar.is-xl .twin-avatar-tag svg{width:14px;height:14px}
/* a quiet twin */
.twin-avatar.is-off{opacity:.55;border-color:var(--line-strong)}
.twin-avatar.is-off .twin-avatar-tag{background:var(--surface-4);color:var(--text-3)}

/* --- the twin's name: "Sonar · Reid Hoffman", never "Reid Hoffman" ------- */
.twin-name{
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--paper);letter-spacing:-.008em;display:inline-flex;
  align-items:baseline;gap:6px;min-width:0;
}
.twin-name-sonar{color:var(--amber);font-weight:700}
.twin-name-sonar::after{content:" ·";color:var(--text-4);font-weight:400}
.twin-name-person{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* --- the inline "AI twin" chip, for lists and headers -------------------- */
.twin-badge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;line-height:1.5;
  padding:3px 10px;border-radius:var(--radius-pill);
  border:1.5px dashed var(--twin-edge);color:var(--paper);background:var(--twin-ground);
}
.twin-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
.twin-badge.is-off{color:var(--text-3);border-color:var(--line-strong);background:none}
.twin-badge.is-off .twin-badge-dot{background:var(--text-4)}
.twin-badge.is-reviewed{border-style:solid;border-color:var(--good-line);background:var(--good-soft);color:var(--good)}
.twin-badge.is-reviewed .twin-badge-dot{background:var(--good)}

/* --- the answer block ---------------------------------------------------- */
.twin-answer{
  position:relative;overflow:hidden;
  background:var(--twin-ground);
  border:1px solid var(--line-strong);
  border-left:0;
  border-radius:var(--radius-lg);
  max-width:100%;align-self:stretch;
}
/* the dashed machine rail — a texture nothing else in the system uses */
.twin-answer::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(
    to bottom,var(--twin-edge-hi) 0 7px,transparent 7px 13px);
}
/* the weave — barely there, but it means the plane is not a person's */
.twin-answer::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(
    -45deg,var(--twin-hatch) 0 1px,transparent 1px 7px);
}
.twin-answer > *{position:relative;z-index:1}

.twin-answer-head{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:13px 18px 13px 21px;
}
.twin-answer-head .twin-badge{margin-left:auto}
.twin-answer-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.twin-answer-src{font-size:var(--fs-2xs);color:var(--text-4);line-height:1.4}

/* --- THE DISCLOSURE BAND ------------------------------------------------
   Above the answer, at body size, on its own ground, dash-edged, with the
   load-bearing clause at full paper brightness. Never smaller than this.  */
.twin-disclosure{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 18px 13px 21px;
  background:var(--surface-2);
  border-top:1.5px dashed var(--twin-edge);
  border-bottom:1.5px dashed var(--twin-edge);
  font-size:var(--fs-md);line-height:1.5;color:var(--text-2);
  font-weight:500;text-wrap:pretty;
}
.twin-disclosure-ico{
  flex:none;width:24px;height:24px;border-radius:50%;margin-top:-1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-4);color:var(--paper);
  border:1.5px dashed var(--twin-edge);
}
.twin-disclosure-ico svg{width:13px;height:13px}
.twin-disclosure-text{min-width:0}
/* the half of the sentence that must land: "{name} has not seen this." */
.twin-disclosure strong{color:var(--paper);font-weight:700}

/* the human has read it — solid edges, the good hue, a check */
.twin-disclosure.is-reviewed{
  background:var(--good-soft);
  border-top:1.5px solid var(--good-line);
  border-bottom:1.5px solid var(--good-line);
  color:var(--text-2);
}
.twin-disclosure.is-reviewed .twin-disclosure-ico{
  background:var(--good-soft);border:1.5px solid var(--good-line);color:var(--good);
}
.twin-disclosure.is-reviewed strong{color:var(--good)}

/* a reviewed answer drops the machine rail and the weave: a person stood
   behind it, so it may sit on the human plane. */
.twin-answer.is-reviewed{background:var(--surface);border-left:1px solid var(--good-line);border-color:var(--good-line)}
.twin-answer.is-reviewed::before{display:none}
.twin-answer.is-reviewed::after{display:none}

.twin-answer-body{
  padding:16px 18px 4px 21px;
  font-size:var(--fs-md);line-height:var(--lh);color:var(--paper);
}
.twin-answer-body p{margin:0 0 11px}
.twin-answer-body p:last-child{margin-bottom:0}
.twin-answer-body ul,.twin-answer-body ol{margin:0 0 11px;padding-left:19px;display:flex;flex-direction:column;gap:5px}
.twin-answer-body strong{color:var(--amber);font-weight:600}

.twin-sources{padding:10px 18px 15px 21px;display:flex;flex-wrap:wrap;gap:6px}
.twin-sources-label{
  width:100%;font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-4);margin-bottom:2px;
}
.twin-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);
  flex-wrap:wrap;padding:11px 18px 11px 21px;border-top:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--text-4);
}
.twin-foot-actions{display:flex;gap:8px;align-items:center;margin-left:auto}

/* --- SAFETY NETS ---------------------------------------------------------
   1. A twin answer with no disclosure is a BUG. Make it look like one.     */
.twin-answer:not(:has(.twin-disclosure)) .twin-answer-body::before{
  content:"This answer is from an AI twin. The person has not seen it.";
  display:block;margin:-6px 0 14px;padding:12px 14px;
  background:var(--warn-soft);border:1.5px dashed var(--warn);
  border-radius:var(--radius-sm);
  color:var(--paper);font-size:var(--fs-sm);font-weight:700;line-height:1.5;
}
/* 2. A person's real avatar must never stand alone on a machine answer.
      If markup drops one in, render it in the machine register anyway.     */
.twin-answer .avatar-member,
.twin-answer .avatar-advisor,
.twin-answer-head .avatar-member,
.twin-answer-head .avatar-advisor{
  background:var(--twin-ground);color:var(--text-2);
  border:1.5px dashed var(--twin-edge);
}

/* --- the mode selector: a real radio group, each mode explaining itself -- */
.twin-modes{display:flex;flex-direction:column;gap:9px}
.twin-mode{
  display:grid;grid-template-columns:20px minmax(0,1fr);
  gap:var(--sp3);align-items:start;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.twin-mode:hover{border-color:var(--line-loud)}
.twin-mode-input{
  -webkit-appearance:none;appearance:none;margin:0;flex:none;
  width:18px;height:18px;border-radius:50%;margin-top:1px;
  border:1.5px solid var(--line-loud);background:none;cursor:pointer;
  display:inline-grid;place-content:center;
  transition:border-color var(--dur-1) var(--ease);
}
.twin-mode-input::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);
  transform:scale(0);transition:transform var(--dur-1) var(--ease);
}
.twin-mode-input:checked{border-color:var(--amber)}
.twin-mode-input:checked::after{transform:scale(1)}
.twin-mode-text{min-width:0}
.twin-mode-name{
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--paper);letter-spacing:-.006em;margin-bottom:3px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.twin-mode-what{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);max-width:52ch}
.twin-mode-flag{
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-4);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 8px;
}
/* selected */
.twin-mode:has(.twin-mode-input:checked){border-color:var(--amber-line);background:var(--amber-wash)}
.twin-mode:has(.twin-mode-input:checked) .twin-mode-what{color:var(--text-2)}
/* keyboard focus lands on the whole card, not the 18px dot */
.twin-mode:has(.twin-mode-input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
.twin-mode-input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@supports selector(:has(*)){ .twin-mode-input:focus-visible{outline:none} }
/* off is the quiet one — no amber wash, because nothing is switched on */
.twin-mode.is-quiet:has(.twin-mode-input:checked){background:var(--surface-3);border-color:var(--line-loud)}
.twin-mode.is-quiet .twin-mode-input:checked{border-color:var(--text-2)}
.twin-mode.is-quiet .twin-mode-input:checked::after{background:var(--text-2)}
.twin-modes-note{
  margin:11px 0 0;font-size:var(--fs-xs);color:var(--text-3);
  line-height:var(--lh);max-width:56ch;text-wrap:pretty;
}

/* --- the twin page header ------------------------------------------------ */
.twin-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:22px;
}
.twin-head-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.twin-head-name{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.014em}
.twin-head-name .twin-name-sonar{font-size:var(--fs-lg)}
.twin-head-sub{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh)}
.twin-head-end{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* --- the twin-off resting state ------------------------------------------ */
.twin-off{
  display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  background:var(--surface-2);border:1px dashed var(--line-strong);
  border-radius:var(--radius);padding:18px;
}
.twin-off-ico{
  position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1.5px dashed var(--line-strong);color:var(--text-4);
}
/* the slash — the twin is silent */
.twin-off-ico::after{
  content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1.5px;
  background:var(--text-4);transform:translateX(-50%) rotate(-45deg);
}
.twin-off-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.twin-off-title{font-family:var(--display);font-weight:600;font-size:var(--fs-md);color:var(--paper)}
.twin-off-line{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);max-width:52ch}
.twin-off-end{margin-left:auto;flex:none}

/* ==========================================================================
   30 · ESCALATION — the twin hands the question back to the human.
   A moment of integrity, never an error. It borrows the "door" hue because
   an escalation IS an introduction.
   ========================================================================== */

.escalate{
  display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:var(--sp3) 14px;align-items:start;
  background:var(--handoff-soft);border:1px solid var(--handoff-line);
  border-radius:var(--radius-lg);padding:17px 19px;
  max-width:100%;align-self:stretch;
}
.escalate-ico{
  grid-row:1;width:38px;height:38px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--handoff-line);color:var(--handoff);
}
.escalate-body{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:7px}
.escalate-line{
  font-family:var(--display);font-weight:600;font-size:var(--fs-lg);
  letter-spacing:-.014em;line-height:var(--lh-snug);color:var(--paper);
  margin:0;text-wrap:balance;max-width:44ch;
}
.escalate-why{margin:0;font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh);max-width:52ch;text-wrap:pretty}
.escalate-to{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px;
  font-size:var(--fs-xs);color:var(--text-3);
}
/* here the person's REAL avatar is correct — this is the human */
.escalate-to strong{color:var(--paper);font-weight:600}
.escalate-foot{
  grid-column:2;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp3);flex-wrap:wrap;margin-top:4px;
}
.escalate-actions{display:flex;gap:8px;align-items:center;margin-left:auto}

/* waiting on the human */
.escalate-wait{
  grid-column:1/-1;display:flex;align-items:center;gap:9px;
  margin-top:2px;padding-top:12px;border-top:1px solid var(--handoff-line);
  font-size:var(--fs-xs);color:var(--text-2);line-height:var(--lh);
}
.escalate-wait strong{color:var(--paper);font-weight:600}
.escalate-wait .sdot{width:7px;height:7px;border-radius:50%;background:var(--handoff);flex:none}
.escalate.is-waiting .escalate-wait .sdot{animation:pulse 1.6s ease-in-out infinite}
.escalate.is-answered{background:var(--good-soft);border-color:var(--good-line)}
.escalate.is-answered .escalate-ico{border-color:var(--good-line);color:var(--good)}
.escalate.is-answered .escalate-wait{border-top-color:var(--good-line)}
.escalate.is-answered .escalate-wait .sdot{background:var(--good);animation:none}

/* ==========================================================================
   31 · REVIEW QUEUE — drafts awaiting an advisor, on a 24-hour clock.
   ========================================================================== */

.review-list{display:flex;flex-direction:column;gap:14px}
.review{
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);overflow:hidden;
}
.review-head{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line);
}
.review-asker{display:flex;flex-direction:column;gap:1px;min-width:0}
.review-asker-name{font-size:var(--fs-sm);font-weight:600;color:var(--paper)}
.review-asker-co{font-size:var(--fs-2xs);color:var(--text-4)}
.review-head .review-clock{margin-left:auto}

/* the countdown chip — hours left before this escalates */
.review-clock{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:var(--fs-2xs);font-weight:600;line-height:1.5;
  padding:5px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.review-clock svg{width:12px;height:12px;flex:none}
.review-clock.is-soon{
  border-color:var(--amber-line);background:var(--amber-soft);color:var(--amber);
}
.review-clock.is-soon svg{animation:pulse 1.6s ease-in-out infinite}
.review-clock.is-expired{
  border-style:dashed;border-color:var(--line-strong);
  background:none;color:var(--text-4);
}

.review-q{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:start;padding:15px 18px;background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.review-q-label{
  grid-column:1/-1;font-size:var(--fs-3xs);font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-4);
}
.review-q-text{
  grid-column:1/-1;margin:0;font-size:var(--fs-md);line-height:var(--lh);
  color:var(--paper);max-width:62ch;
}

.review-draft{padding:15px 18px 4px}
.review-draft-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.review-draft-label{
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-4);
}
.review-draft-body{
  font-size:var(--fs-md);line-height:var(--lh);color:var(--text-2);
  border-left:3px solid var(--twin-edge);
  border-left-style:dashed;padding-left:15px;max-width:62ch;
}
.review-draft-body p{margin:0 0 11px}
.review-draft-body p:last-child{margin-bottom:0}
.review-draft-body strong{color:var(--paper);font-weight:600}
.review-draft .twin-sources{padding:12px 0 0}

.review-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp3);flex-wrap:wrap;
  padding:13px 18px;margin-top:15px;
  border-top:1px solid var(--line);background:var(--surface-2);
}
.review-note{font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);max-width:36ch}
.review-actions{display:flex;gap:9px;align-items:center;margin-left:auto;flex-wrap:wrap}

/* the editor, when "Edit and send" is chosen */
.review-edit{display:none;padding:0 18px 15px}
.review.is-editing .review-edit{display:block}
.review.is-editing .review-draft-body{opacity:.4}

/* expired — the clock ran out and Sonar handed it back */
.review.is-expired{border-color:var(--line);background:var(--surface-2)}
.review.is-expired .review-draft-body{opacity:.45}
.review.is-expired .review-actions{display:none}
.review-expired{
  display:none;align-items:center;gap:10px;
  font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh);
}
.review.is-expired .review-expired{display:flex}
.review-expired strong{color:var(--paper);font-weight:600}
.review-expired .sdot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex:none}

/* sent / rejected resting states */
.review.is-sent{border-color:var(--good-line)}
.review.is-sent .review-actions,.review.is-rejected .review-actions{display:none}
.review-state{
  display:none;align-items:center;gap:9px;
  font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh);
}
.review.is-sent .review-state,.review.is-rejected .review-state{display:flex}
.review-state strong{color:var(--paper);font-weight:600}
.review-state .sdot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.review.is-rejected .review-state .sdot{background:var(--text-3)}

/* ==========================================================================
   32 · THE SONAR BOX — an advisor's or a company's material.
   Reads as a library someone is proud of, not a file manager.
   ========================================================================== */

.box-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp4);flex-wrap:wrap;margin-bottom:var(--sp4);
}
.box-title{font-family:var(--display);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.02em;margin:0 0 4px;text-wrap:balance}
.box-sub{margin:0;font-size:var(--fs-sm);color:var(--text-3);line-height:var(--lh);max-width:58ch;text-wrap:pretty}
.box-count{
  flex:none;display:inline-flex;align-items:baseline;gap:7px;
  font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;
}
.box-count strong{
  font-family:var(--display);font-weight:700;font-size:var(--fs-lg);
  color:var(--paper);letter-spacing:-.01em;
}
.box-count-sep{color:var(--text-4)}

/* --- add affordances ----------------------------------------------------- */
.box-add{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp5)}
.box-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;width:100%;
  background:var(--surface);border:1.5px dashed var(--line-strong);
  border-radius:var(--radius);padding:26px 20px;color:var(--text-2);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease);
}
.box-drop:hover{border-color:var(--line-loud);background:var(--surface-2)}
.box-drop.is-over{border-color:var(--amber);background:var(--amber-wash);color:var(--paper)}
.box-drop-ico{
  width:38px;height:38px;border-radius:50%;margin-bottom:4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-3);
  transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.box-drop.is-over .box-drop-ico{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.box-drop-label{font-family:var(--display);font-weight:600;font-size:var(--fs-md);color:var(--paper)}
.box-drop-hint{font-size:var(--fs-xs);color:var(--text-3)}
.box-add-row{display:flex;gap:9px;flex-wrap:wrap}
.box-add-btn{
  flex:1 1 160px;display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  border-radius:var(--radius-sm);padding:11px 14px;font-size:var(--fs-sm);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.box-add-btn:hover{border-color:var(--amber-line);color:var(--paper);background:var(--surface-2)}
.box-add-btn svg{flex:none;color:var(--text-3)}
.box-add-btn:hover svg{color:var(--amber)}

/* --- the shelf ----------------------------------------------------------- */
.box-list{display:flex;flex-direction:column;gap:10px}
.box-item{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:6px var(--sp4);align-items:start;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--src-upload);
  border-radius:var(--radius);padding:14px 16px 14px 17px;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.box-item:hover{background:var(--surface-2)}
/* source-typed spines. Colour AND the source word AND (for research) the dash. */
.box-item.is-upload{border-left-color:var(--src-upload)}
.box-item.is-paste{border-left-color:var(--src-paste)}
.box-item.is-link{border-left-color:var(--src-link)}
.box-item.is-research{
  border-left-color:var(--src-research);border-left-style:dashed;
  background:var(--surface-2);
}
.box-item-main{grid-column:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.box-item-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.box-item-title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-md);
  color:var(--paper);letter-spacing:-.01em;line-height:var(--lh-snug);
  margin:0;min-width:0;
}
.box-item-src{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:var(--fs-3xs);font-weight:600;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--text-3);line-height:1.5;
}
.box-item-src svg{width:12px;height:12px;flex:none}
.box-item.is-upload .box-item-src{color:var(--viz-1-ink)}
.box-item.is-paste  .box-item-src{color:var(--viz-4-ink)}
.box-item.is-link   .box-item-src{color:var(--viz-2-ink)}
.box-item.is-research .box-item-src{color:var(--text-3)}
.box-item-body{
  margin:0;font-size:var(--fs-sm);color:var(--text-3);line-height:var(--lh);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-clamp:2;overflow:hidden;max-width:70ch;
}
.box-item-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--fs-2xs);color:var(--text-4);font-variant-numeric:tabular-nums;
}
.box-item-meta > *:not(:first-child)::before{content:"·";margin-right:8px;color:var(--text-4)}
.box-item-meta a{color:var(--text-3);text-decoration:underline;text-underline-offset:2px;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.box-item-meta a:hover{color:var(--amber)}
.box-item-end{
  grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:flex-end;
}
.box-item-actions{display:flex;gap:7px;align-items:center}

/* --- unverified: research Sonar found, not yet confirmed ----------------- */
.box-unverified{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;line-height:1.5;
  padding:3px 10px;border-radius:var(--radius-pill);
  border:1.5px dashed var(--amber-line);color:var(--amber);background:var(--amber-wash);
}
.box-unverified-note{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;padding-top:11px;border-top:1px dashed var(--line-strong);
  font-size:var(--fs-xs);color:var(--text-2);line-height:var(--lh);
}
.box-unverified-note .btn-line{margin-left:auto}
.box-item.is-confirming{border-color:var(--good-line)}
.box-item.is-confirming .box-unverified{border-style:solid;border-color:var(--good-line);color:var(--good);background:var(--good-soft)}

/* --- delete confirmation, inline. Calmer and safer than a modal. --------- */
.box-del{
  display:none;grid-column:1/-1;
  align-items:center;gap:11px;flex-wrap:wrap;
  margin-top:8px;padding-top:12px;border-top:1px solid var(--warn-line);
  font-size:var(--fs-sm);color:var(--paper);line-height:var(--lh);
}
/* the sentence goes in .box-del-text: .box-del is a flex row, and a bare
   text node would be split into gapped chunks around the <strong> title */
.box-del-text{min-width:0}
.box-del strong{font-weight:600}
.box-del-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.box-item.is-deleting{border-color:var(--warn-line);background:var(--warn-soft)}
.box-item.is-deleting .box-del{display:flex}
.box-item.is-deleting .box-item-body,
.box-item.is-deleting .box-item-actions{display:none}

/* --- empty ---------------------------------------------------------------
   A faint shelf of spines: what the box will look like when it is full. */
.box-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp3);padding:var(--sp8) var(--sp5);
  background:var(--surface);border:1px dashed var(--line-strong);
  border-radius:var(--radius);
}
.box-empty-shelf{
  display:flex;align-items:flex-end;gap:5px;height:46px;
  margin-bottom:var(--sp2);opacity:.5;
  padding-bottom:6px;border-bottom:1px solid var(--line-strong);
}
.box-empty-shelf i{
  display:block;width:7px;border-radius:2px;background:var(--line-strong);
}
.box-empty-shelf i:nth-child(1){height:30px}
.box-empty-shelf i:nth-child(2){height:44px;background:var(--src-upload);opacity:.5}
.box-empty-shelf i:nth-child(3){height:36px}
.box-empty-shelf i:nth-child(4){height:42px;background:var(--src-link);opacity:.5}
.box-empty-shelf i:nth-child(5){height:26px}
.box-empty-title{
  font-family:var(--display);font-weight:600;font-size:var(--fs-lg);
  letter-spacing:-.014em;margin:0;color:var(--paper);text-wrap:balance;
}
.box-empty-line{margin:0;font-size:var(--fs-sm);color:var(--text-3);line-height:var(--lh);max-width:48ch;text-wrap:pretty}
.box-empty-action{margin-top:var(--sp2)}

/* ==========================================================================
   33 · ONBOARDING RESEARCH — the pass that fills a new advisor's box.
   ========================================================================== */

.research{
  display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:4px 14px;align-items:start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
}
.research-ico{
  grid-row:1/span 2;width:38px;height:38px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text-3);
}
.research-body{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:5px}
.research-line{
  margin:0;font-family:var(--display);font-weight:600;font-size:var(--fs-md);
  color:var(--paper);letter-spacing:-.01em;line-height:var(--lh-snug);text-wrap:balance;
}
.research-note{margin:0;font-size:var(--fs-xs);color:var(--text-3);line-height:var(--lh);max-width:56ch;text-wrap:pretty}
.research-foot{
  grid-column:2;display:flex;align-items:center;gap:var(--sp3);
  flex-wrap:wrap;margin-top:9px;
}
.research-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.research-found{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;
}
.research-found strong{
  font-family:var(--display);font-weight:700;font-size:var(--fs-lg);
  color:var(--paper);letter-spacing:-.01em;
}

/* indeterminate sweep — running */
.research-bar{
  grid-column:2;position:relative;overflow:hidden;
  height:3px;border-radius:2px;background:var(--viz-track);margin-top:11px;
}
.research-bar::after{
  content:"";position:absolute;inset:0;width:34%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
  animation:research-sweep 1.5s var(--ease) infinite;
}
@keyframes research-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

.research.is-running{border-color:var(--amber-line)}
.research.is-running .research-ico{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.research.is-done{border-color:var(--good-line)}
.research.is-done .research-ico{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.research.is-done .research-bar{display:none}
.research.is-empty .research-bar,.research.is-off .research-bar{display:none}
.research.is-off{border-style:dashed}
.research.is-off .research-ico{border-style:dashed}
.research-state-note{
  grid-column:1/-1;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--text-4);line-height:var(--lh);
}

/* ==========================================================================
   34 · "MEMBER" → "ADVISOR"
   --------------------------------------------------------------------------
   The CSS carries no user-facing copy, so the rename is a markup sweep. The
   only string this stylesheet renders is the pair of curly quotes on
   .note-quote. These aliases let markup say "advisor" where it used to say
   "member"; both names resolve to the same rules for as long as v2/v3 pages
   are still shipping.
   ========================================================================== */

.avatar-advisor{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.advisor-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:start}
.advisor-grid > *{min-width:0}

/* ==========================================================================
   35 · v4 RESPONSIVE — no horizontal page scroll down to 320px.
   ========================================================================== */

@media (max-width:1020px){
  .advisor-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .home-inner{
    min-height:calc(100vh - 150px);
    min-height:calc(100svh - 150px);
    padding:var(--sp6) var(--sp4) var(--sp8);
  }
  .home-lockup .brand{--lk:30px}
  .home-fold{margin-top:var(--sp7)}
  .escalate{grid-template-columns:minmax(0,1fr)}
  .escalate-ico{grid-row:auto}
  .escalate-body,.escalate-foot,.escalate-wait{grid-column:1}
  .research{grid-template-columns:minmax(0,1fr)}
  .research-ico{grid-row:auto}
  .research-body,.research-foot,.research-bar{grid-column:1}
  .research-state-note{grid-column:1}
}
@media (max-width:640px){
  .home-openers{grid-template-columns:1fr}
  .box-item{grid-template-columns:minmax(0,1fr)}
  .box-item-end{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:4px}
  .box-add-btn{flex:1 1 100%}
  .review-head{gap:9px}
  .review-head .review-clock{margin-left:0;width:100%;justify-content:center}
  .review-actions{margin-left:0;width:100%}
  .review-actions .btn-primary,.review-actions .btn-line{flex:1 1 auto;text-align:center}
}
@media (max-width:520px){
  .home-inner{padding:var(--sp5) var(--sp4) var(--sp7)}
  .home-hero{gap:var(--sp2);margin-bottom:var(--sp5)}
  .home-lockup .brand{--lk:var(--lk-foot)}
  .home-prompt-bar{padding:6px 6px 6px 17px;border-radius:22px}
  .home-prompt-input{font-size:16px;padding:11px 0}
  .home-prompt-send{width:40px;height:40px}
  .home-thread{grid-template-columns:minmax(0,1fr)}
  .home-thread-snip{order:1}
  .home-thread-when{grid-column:1;order:2;text-align:left;margin-top:2px}
  /* On a phone a long placeholder wraps to two lines. box-sizing is
     border-box, so the min-height has to carry the padding too, or the
     second line is clipped mid-glyph. */
  .home-prompt-input{min-height:calc(3em + 22px)}
  .prompt-scoped-input{min-height:calc(3em + 18px)}
  .prompt-scoped{padding:var(--sp3) 14px;border-radius:var(--radius)}
  .prompt-scoped-bar{padding:5px 5px 5px 15px}
  .prompt-scoped-input{font-size:16px}
  .twin-answer-head,.twin-disclosure{padding-left:17px;padding-right:15px}
  .twin-answer-body,.twin-sources,.twin-foot{padding-left:17px;padding-right:15px}
  .twin-disclosure{gap:9px}
  .twin-answer-head .twin-badge{margin-left:0}
  .twin-mode{padding:12px 13px;gap:11px}
  .twin-off{gap:12px}
  .twin-off-end{margin-left:0;width:100%}
  .escalate{padding:15px 16px}
  .escalate-actions{margin-left:0}
  .box-empty{padding:var(--sp7) var(--sp4)}
  .review-q,.review-draft,.review-foot,.review-head,.review-edit{padding-left:15px;padding-right:15px}
}

/* ==========================================================================
   36 · v4 MOTION — every new animation neutralised for reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .home-hero,.home-openers,.home-prompt-bar,.home-prompt-input,
  .home-prompt-send,.home-inner,.home-fold{transition:none !important}
  .research-bar::after{
    animation:none;width:100%;
    background:repeating-linear-gradient(
      90deg,var(--amber) 0 6px,transparent 6px 12px);
    opacity:.55;transform:none;
  }
  .review-clock.is-soon svg,
  .escalate.is-waiting .escalate-wait .sdot{animation:none}
  .twin-mode,.box-item,.box-drop,.home-opener{transition:none !important}
}

@media (prefers-contrast:more){
  :root{
    --twin-edge:rgba(250,250,250,.52);
    --twin-edge-hi:rgba(250,250,250,.72);
  }
}