/* Enzo — the enso "Earth & Sky" design system, ported to the serve webapp.
   CSP-clean: this is the ONLY style source (no inline styles anywhere; fonts are
   self-hosted under /static/fonts so nothing is fetched from an external host).
   Tokens, values, and light/dark parity mirror enso/apps/web/app/globals.css.
   Colours are OKLCH: swap the hue primitives to re-theme; the -mist tints and dark
   mode derive from them via color-mix(), so most tokens have one definition. */

/* ── Self-hosted brand webfonts (vendored by scripts/vendor_serve_fonts.py) ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url('/static/fonts/eb-garamond.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/static/fonts/geist-mono.woff2') format('woff2')}

:root{
  color-scheme:light dark;
  /* Type families */
  --font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"EB Garamond","Iowan Old Style",Georgia,serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── Tier 1: hue primitives (light) — swap these to re-theme ── */
  --indigo:oklch(0.42 0.09 260);   /* actions, interactive */
  --sage:oklch(0.52 0.06 140);     /* positive signal */
  --gold:oklch(0.52 0.09 75);      /* AI marker */
  --amber:oklch(0.47 0.12 65);     /* attention — darkened for AA text on --amber-mist */
  --red:oklch(0.49 0.19 27);       /* danger — darkened for AA text on --red-mist */

  /* ── Tier 1: warm-stone neutrals (light / parchment) ── */
  --bg:oklch(0.975 0.006 60);
  --card:oklch(0.988 0.004 60);
  --card-raised:oklch(0.998 0.002 60);
  --muted:oklch(0.945 0.005 60);
  --text:oklch(0.20 0.006 60);
  --text-2:oklch(0.47 0.006 60);
  --text-3:oklch(0.51 0.006 60);   /* darkened: was 0.58 (failed AA at small label sizes) */
  --border:oklch(0.80 0.005 60);
  --border-subtle:oklch(0.90 0.004 60);

  /* ── Tier 2: derived tints + on-colours (auto-adapt to dark via the vars above) ── */
  --indigo-mist:color-mix(in oklch, var(--indigo) 12%, var(--bg));
  --sage-mist:color-mix(in oklch, var(--sage) 14%, var(--bg));
  --gold-mist:color-mix(in oklch, var(--gold) 16%, var(--bg));
  --amber-mist:color-mix(in oklch, var(--amber) 15%, var(--bg));
  --red-mist:color-mix(in oklch, var(--red) 13%, var(--bg));
  /* readable "ink" text for coloured chips — dark enough on the -mist grounds in light,
     re-lightened in dark so the same chip clears contrast both ways */
  --on-sage:oklch(0.44 0.09 145);
  --on-indigo:var(--indigo);
  --on-accent:oklch(0.98 0.005 70);   /* near-white text on a solid accent fill */
  --overlay:oklch(0.20 0.02 60 / 0.32);
  /* Inverted surface — always dark regardless of mode (tooltips, scrims). Not
     overridden in dark, so it stays a dark chip with light text both ways. */
  --inverted:oklch(0.24 0.006 60);
  --inverted-foreground:oklch(0.96 0.006 60);

  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px oklch(0.20 0.01 60 / .06),0 1px 4px oklch(0.20 0.01 60 / .05);
  --shadow-md:0 4px 12px oklch(0.20 0.01 60 / .10),0 1px 3px oklch(0.20 0.01 60 / .06);
}

/* ── Dark mode: only the primitives + neutrals flip; Tier-2 tints re-derive ──
   Honour the OS preference by default, and let a data-theme attribute force either
   way (a theme toggle can set :root[data-theme]). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --indigo:oklch(0.64 0.11 262);
    --sage:oklch(0.60 0.08 145);
    --gold:oklch(0.70 0.10 78);
    --amber:oklch(0.72 0.11 68);
    --red:oklch(0.62 0.17 27);
    --bg:oklch(0.165 0.006 60);
    --card:oklch(0.205 0.006 60);
    --card-raised:oklch(0.235 0.006 60);
    --muted:oklch(0.245 0.006 60);
    --text:oklch(0.92 0.008 60);
    --text-2:oklch(0.72 0.006 60);
    --text-3:oklch(0.64 0.006 60);   /* lightened: was 0.58 (failed AA at small label sizes) */
    --border:oklch(0.36 0.006 60);
    --border-subtle:oklch(0.30 0.006 60);
    --on-sage:oklch(0.82 0.10 148);
    --shadow-sm:0 1px 2px oklch(0 0 0 / .30),0 1px 4px oklch(0 0 0 / .24);
    --shadow-md:0 6px 18px oklch(0 0 0 / .40),0 1px 3px oklch(0 0 0 / .30);
  }
}
:root[data-theme="dark"]{
  --indigo:oklch(0.64 0.11 262); --sage:oklch(0.60 0.08 145); --gold:oklch(0.70 0.10 78);
  --amber:oklch(0.72 0.11 68); --red:oklch(0.62 0.17 27);
  --bg:oklch(0.165 0.006 60); --card:oklch(0.205 0.006 60); --card-raised:oklch(0.235 0.006 60);
  --muted:oklch(0.245 0.006 60); --text:oklch(0.92 0.008 60); --text-2:oklch(0.72 0.006 60);
  --text-3:oklch(0.64 0.006 60); --border:oklch(0.36 0.006 60); --border-subtle:oklch(0.30 0.006 60);
  --on-sage:oklch(0.82 0.10 148);
  --shadow-sm:0 1px 2px oklch(0 0 0 / .30),0 1px 4px oklch(0 0 0 / .24);
  --shadow-md:0 6px 18px oklch(0 0 0 / .40),0 1px 3px oklch(0 0 0 / .30);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1120px;margin:0 auto;padding:20px}
/* Shared keyboard focus ring for every app button (individual controls may override with
   a more specific rule). Keyboard-only via :focus-visible so mouse clicks stay quiet. */
button:focus-visible{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}

/* ── Top bar: enso brush mark + serif "enzo" wordmark ──
   The bar is full-bleed (bg + border span the viewport); .bar-inner centres the
   content to the same 1120px container as <main> so brand + nav line up with the page. */
.bar-inner{max-width:1120px;margin:0 auto;padding:0 20px}
.topbar{border-bottom:1px solid var(--border-subtle);background:var(--card)}
.topbar .bar-inner{display:flex;align-items:center;gap:11px;height:52px}
.brand{display:inline-flex;align-items:center;line-height:1}
.brand:hover{text-decoration:none}
/* enzo wordmark image (height 24px, width from the 1079:483 aspect). Ships in two inks;
   show the one that reads on the current surface (same theme resolution as everything else). */
.brand-word{height:24px;width:auto;display:block;flex-shrink:0}
.brand-word.on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-word.on-light{display:none}
  :root:not([data-theme="light"]) .brand-word.on-dark{display:block}
}
:root[data-theme="dark"] .brand-word.on-light{display:none}
:root[data-theme="dark"] .brand-word.on-dark{display:block}
.brand-sep{width:1px;height:20px;background:var(--border-subtle);margin:0 3px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.topbar-org{color:var(--text-3);font-size:11.5px;font-weight:600}
/* Light/dark toggle: a quiet icon button. Sun shows in dark (click → light), moon in
   light (click → dark) — same theme resolution the brand mark uses. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--border-subtle);border-radius:8px;background:transparent;color:var(--text-2);
  cursor:pointer;font-family:inherit;transition:color .12s,border-color .12s,background .12s}
.theme-toggle:hover{color:var(--text);border-color:var(--border);background:var(--muted)}
.theme-toggle:focus-visible{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}
.theme-toggle svg{display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block}
}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}

/* persistent global nav (Accounts | Connections | …) */
.mainnav{background:var(--card);border-bottom:1px solid var(--border-subtle)}
.mainnav .bar-inner{display:flex;gap:2px}
.mainnav .navlink{font-size:12px;font-weight:600;color:var(--text-2);padding:10px 12px;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s}
.mainnav .navlink:hover{color:var(--text);text-decoration:none}
.mainnav .navlink.on{color:var(--indigo);border-bottom-color:var(--indigo)}

/* connections page — provider status cards */
.conn-cards{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.conn-card{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--card);border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm)}
.conn-card-body{min-width:0}
.conn-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.conn-name{font-size:14px;font-weight:700;letter-spacing:-.01em}
.conn-status{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:var(--muted);color:var(--text-2);border:1px solid var(--border-subtle)}
.conn-status-connected{background:var(--sage-mist);color:var(--on-sage);border-color:transparent}
.conn-status-managed{background:var(--indigo-mist);color:var(--indigo);border-color:transparent}
.conn-blurb{font-size:11.5px;color:var(--text-2);margin-top:5px;line-height:1.45}
.conn-detail{font-size:10.5px;color:var(--text-3);margin-top:3px}
.conn-scope-hint{font-size:10.5px;color:var(--text-3);margin-top:6px;line-height:1.4;max-width:52ch}
.conn-card-action{flex-shrink:0}
.conn-btn{display:inline-block;background:var(--indigo);color:var(--on-accent);border:0;border-radius:6px;
  padding:8px 16px;font-size:12px;font-weight:600;font-family:inherit;white-space:nowrap}
.conn-btn:hover{text-decoration:none;opacity:.92}
/* secondary/ghost variant — a connected card's Reconnect action reads as subordinate to
   the primary Connect CTA: transparent fill, indigo text + 1px indigo border, but the same
   dimensions (padding/font) so the two buttons are interchangeable in the action slot. */
.conn-btn-secondary{background:transparent;color:var(--indigo);border:1px solid var(--indigo)}
.conn-btn-secondary:hover{text-decoration:none;opacity:1;background:var(--indigo-mist)}
.conn-managed-tag{font-size:10.5px;color:var(--text-3);font-style:italic}
/* dead-drop paste form (Attio API key) — sits in the card action slot */
.conn-deaddrop-form{display:flex;align-items:center;gap:8px}
.conn-deaddrop-input{font-family:inherit;font-size:12px;padding:8px 10px;width:180px;
  border:1px solid var(--border);border-radius:6px;background:var(--card-raised);color:var(--text)}
.conn-deaddrop-input::placeholder{color:var(--text-3)}
.conn-deaddrop-input:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px var(--indigo-mist)}

/* connections page — one styled error/refusal state */
.conn-error{background:var(--amber-mist);border:1px solid var(--amber);border-radius:var(--radius);
  padding:14px 16px;margin:14px 0}
.conn-error-title{font-size:13px;font-weight:700;color:var(--amber)}
.conn-error-body{font-size:12px;color:var(--text-2);margin-top:5px;line-height:1.5}
.conn-error-actions{display:flex;align-items:center;gap:14px;margin-top:11px}
.conn-back{font-size:11.5px;font-weight:600;color:var(--text-2)}

/* full-page error state (404 / 403 / 500) — reuses the shared tokens; no new palette */
.error-main{display:flex;justify-content:center}
.error-state{max-width:440px;margin:56px auto;text-align:center}
.error-code{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--text-3)}
.error-title{font-size:20px;font-weight:700;margin:8px 0 0}
.error-body{font-size:13px;color:var(--text-2);line-height:1.55;margin:10px 0 20px}
.error-back{display:inline-block}

/* accounts list */
.accounts h1,.account h1{font-size:18px;margin:0 0 14px}
.org{color:var(--text-2);margin-bottom:12px}
.empty{color:var(--text-3)}

/* home page — search toolbar + sortable account list (the old bucket chips are
   superseded by the actionable / no-action section split) */
.list-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
#acct-search{font-family:inherit;font-size:12.5px;padding:7px 11px;border:1px solid var(--border);
  border-radius:8px;background:var(--card-raised);color:var(--text);min-width:220px}
#acct-search:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}
.acct-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border-subtle);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.acct-table thead th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border-subtle);
  cursor:pointer;user-select:none;white-space:nowrap;background:var(--card)}
.acct-table thead th:hover{color:var(--text)}
.acct-table thead th.sorted-asc::after{content:" ▲";font-size:8px;color:var(--indigo)}
.acct-table thead th.sorted-desc::after{content:" ▼";font-size:8px;color:var(--indigo)}
.acct-table tbody tr{border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .1s}
.acct-table tbody tr:last-child{border-bottom:0}
.acct-table tbody tr:hover{background:var(--muted)}
.acct-table td{padding:10px 14px;font-size:12.5px;vertical-align:middle;font-variant-numeric:tabular-nums}
/* Account name is an <a> (keyboard path to the account) but reads as text, not a link. */
.t-name{font-weight:600;color:var(--text);text-decoration:none}
.acct-table tbody tr:hover .t-name{text-decoration:underline}
.t-domain{display:block;font-size:10.5px;color:var(--text-3)}
.t-of{color:var(--text-3)}
.t-move{color:var(--text-2);font-size:11.5px;max-width:340px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-variant-numeric:normal}
.t-moves{font-size:10px;font-weight:700;color:var(--indigo);margin-left:5px}

/* header */
.acct-header{background:var(--card);border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:16px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.acct-header-main{display:flex;align-items:center;gap:14px}
/* Account monogram — a tint disc in the account's own initials (identity slot, not
   branded chrome), the square counterpart to the round person .avatar. Tokened mist/ink
   so light+dark contrast is already handled. */
.acct-icon{width:38px;height:38px;border-radius:9px;background:var(--indigo-mist);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  letter-spacing:.01em;flex-shrink:0}
.acct-name{font-size:17px;font-weight:700;letter-spacing:-.02em}
.acct-meta{font-size:11.5px;color:var(--text-2);margin-top:2px}
.acct-eng{margin-top:2px;color:var(--text-3)}
.acct-eng .eng-risk{color:var(--amber);font-weight:600}
.acct-back{font-size:11.5px;margin-bottom:10px;display:block}

/* graph canvas */
.canvas-wrap{position:relative;background:radial-gradient(ellipse at 42% 40%,var(--card-raised) 0%,var(--card) 55%,var(--muted) 100%);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);
  height:440px;margin-bottom:14px}
.canvas-wrap #net{width:100%;height:100%}
.canvas-badge{position:absolute;top:12px;left:14px;color:var(--text-3);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;pointer-events:none}
.legend{position:absolute;bottom:10px;left:12px;background:color-mix(in oklch,var(--card) 82%,transparent);border:1px solid var(--border-subtle);
  border-radius:6px;padding:7px 10px;font-size:10px;color:var(--text-2);display:flex;gap:12px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center}
.legend .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
/* Legend sentiment swatches — classes, not inline style= (CSP style-src 'self' blocks inline styles). */
.sw-pos{background:var(--sage)}.sw-neg{background:var(--red)}.sw-unread{background:var(--text-3)}

/* layout grid — MAIN (the move + the read) | ASIDE (diagnosis at a glance) */
/* The grid itself owns the gap to whatever follows it (the full-width graph canvas):
   both columns zero their last panel's margin, so a taller sidebar can never sit flush
   against .canvas-wrap while the main column carries a stray double margin. */
.grid{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start;margin-bottom:14px}
/* The grid columns are min-width:0 so long prose/EB names can't blow out the track. */
.grid-main,.grid-side{min-width:0}
.grid-main .panel:last-child{margin-bottom:0}
/* Sidebar density: the 320px rail reads as a tighter, intentional diagnostic column —
   slightly denser panels and a smaller inter-panel gap than the roomy main read. */
.grid-side .panel{padding:13px 15px;margin-bottom:12px}
.grid-side .panel:last-child{margin-bottom:0}
/* Stack to a single column on narrow viewports (the 320px rail can't fit beside content).
   The action hero stays first (it lives at the top of grid-main and is the focal point),
   so on mobile the order is: hero → the read → the diagnosis rail. Hoisting the glance/
   scorecard above the hero would demote the action, so we deliberately keep hero first;
   the diagnosis rail trailing the narrative read is an acceptable mobile order.
   (The inter-column gap comes from the grid's row gap; the trailing gap from .grid's
   own margin - no per-panel override needed.) */
@media (max-width:720px){.grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.panel.dashed{border-style:dashed}
.panel-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);
  font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 4px var(--gold)}
.prose{font-size:13.5px;line-height:1.55;color:var(--text)}
.prose-muted{color:var(--text-2)}
/* risks / opportunities / coverage render as <ul class="prose">. The global reset zeroes
   list padding, which clips the disc markers; restore a small indent and even per-item rhythm.
   When a second labelled group (Risks, What we don't know) follows a list inside one panel,
   give its label top air so the groups don't butt together. */
ul.prose{padding-left:17px}
ul.prose li{margin-bottom:3px}
ul.prose li:last-child{margin-bottom:0}
ul.prose + .panel-label{margin-top:14px}
.goal-row{display:flex;gap:10px;align-items:baseline;margin-top:2px}
.goal-arrow{color:var(--sage);font-weight:700}
/* a sub-label inside a shared panel (e.g. "Proposed strategy" under "Goals") */
.panel-label-sub{margin-top:12px}
/* v27 goals list — the WHAT, primary first; tight, scannable */
.goals-list{list-style:none;margin:0;display:flex;flex-direction:column;gap:7px}
.goals-list .goal .prose{font-size:12.5px;line-height:1.5}
.goal-primary .prose{font-weight:600}
/* a single short goal folds into the read card as one quiet line */
.goal-inline{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-left:16px}
.goal-inline-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-2);font-weight:700;flex-shrink:0}
.goal-inline .prose{font-size:13px}

/* v27 MEDDPICC scorecard — vertical status table, one row per element. Each row is a
   2-col grid (element label | status), so the status pills line up on a single right
   edge and the column scans top-to-bottom in the 320px rail. The status pill carries
   the colour (the scan-line); rows stay neutral so the read is calm, not a stoplight.
   The resolved person (EB / champion) sits on its own subtle second line. */
/* Collapsed-by-default scorecard: the summary row is the whole panel until opened.
   Same chevron affordance as the read beats; the cue carries the status counts. */
.medd-toggle{cursor:pointer;user-select:none;list-style:none}
.medd-toggle::-webkit-details-marker{display:none}
.medd-toggle::after{content:"\25B8";margin-left:auto;flex-shrink:0;font-size:9px;
  color:var(--text-3);transition:transform .12s ease}
.meddpicc[open] .medd-toggle::after{transform:rotate(90deg)}
.medd-toggle:hover{color:var(--text-2)}
.medd-toggle:hover::after{color:var(--text)}
.meddpicc:not([open]) .medd-toggle{margin-bottom:0}
/* Collapsed MEDDPICC = a status-tinted acronym strip. Each of the 8 letters is a tiny
   chip colored by its element's status, so "MEDDPICC" reads as the score at a glance and
   each letter carries a hover gloss (element + status). Replaces the old textual count cue. */
.medd-acro{display:inline-flex;gap:4px;align-items:center}
.medd-ltr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:5px;font-size:12.5px;font-weight:800;letter-spacing:0;text-transform:none;
  background:var(--muted);color:var(--text-3);border:1px solid var(--border-subtle)}
.medd-L-confirmed{background:var(--sage-mist);color:var(--on-sage);border-color:transparent}
.medd-L-partial{background:var(--amber-mist);color:var(--amber);border-color:transparent}
.medd-L-unknown{background:var(--muted);color:var(--text-3);border-color:var(--border-subtle)}
.medd-L-not_applicable{background:transparent;color:var(--text-3);border-style:dashed}
.medd-L-absent{background:transparent;color:var(--text-3);opacity:.4}
.medd-grid{display:flex;flex-direction:column;gap:5px}
.medd-secondary{margin-top:8px;opacity:.66}
/* A pill is a small vertical stack: header row (element label + status pill), then the
   resolved person, then the model's one-clause `note` (the substance), then the grounding
   citation. The note is what makes "Champion: partial" mean something; the citation only
   renders when there's substance behind it (template-gated), so Unknown rows stay quiet. */
.medd-pill{display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:8px;
  background:var(--muted);border:1px solid var(--border-subtle)}
.medd-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Element label — calm muted-strong, top-left. */
.medd-el{text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:9px;
  color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Status pill — pinned to the right edge of the header row. */
.medd-stat{flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.01em;
  padding:2px 9px;border-radius:999px;white-space:nowrap}
/* Resolved person (EB / champion) — own line, no clamp, ellipsis only on true overflow. */
.medd-name{font-size:11px;font-weight:600;color:var(--text);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* The substance — the one-clause "what the record shows". This is the answer to
   "partial — who/what?"; it carries the meaning, so it reads at body weight, not as fine print. */
.medd-note{font-size:11px;color:var(--text-2);line-height:1.45}
/* Grounding citation — readable event ref(s), quiet under the substance; falsifiable, not shouted. */
.medd-ev{font-size:9.5px;color:var(--text-3);line-height:1.35;margin-top:1px}
/* Unknown-status elements collapse to ONE muted line under the pills - nothing to say,
   so don't spend a pill (let alone a stack of them) saying it. */
.medd-unknown-row{margin-top:8px;font-size:10px;color:var(--text-3);line-height:1.5}
/* Status colours live on the pill: confirmed = sage, partial = amber, n/a = faint.
   Rows hold a barely-there matching wash. (Unknown never renders as a pill - it folds
   into the single .medd-unknown-row line above.) */
.medd-confirmed{background:var(--sage-mist);border-color:transparent}
.medd-confirmed .medd-stat{background:var(--sage-mist);color:var(--on-sage)}
.medd-partial{background:var(--amber-mist);border-color:transparent}
.medd-partial .medd-stat{background:var(--amber-mist);color:var(--amber)}
.medd-not_applicable{background:transparent;border-style:dashed;opacity:.5}
.medd-not_applicable .medd-stat{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--border-subtle)}

/* action cards */
.act{border:1px solid var(--border-subtle);border-radius:10px;padding:12px 14px;border-left-width:3px;
  background:var(--card-raised);margin-bottom:9px}
.act.p-urgent{border-left-color:var(--red);background:linear-gradient(160deg,color-mix(in oklch,var(--red) 9%,var(--card-raised)),var(--card-raised))}
.act.p-high{border-left-color:var(--amber);background:linear-gradient(160deg,color-mix(in oklch,var(--amber) 10%,var(--card-raised)),var(--card-raised))}
.act.p-medium{border-left-color:var(--indigo);background:linear-gradient(160deg,var(--indigo-mist),var(--card-raised))}
.act-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.act-when{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px}
.p-urgent .act-when{color:var(--red);background:var(--red-mist)}
.p-high .act-when{color:var(--amber);background:var(--amber-mist)}
.p-medium .act-when{color:var(--indigo);background:var(--indigo-mist)}
.act-what{font-size:13px;font-weight:600;line-height:1.35}
.act-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.act-meta .act-who{margin-top:0}
.act-who{font-size:10.5px;color:var(--text-3);margin-top:4px}
/* ER-46 Part B: subtle timing chip on a Next-move. Neutral by default; the act-now bands
   (overdue/today/soon) tint warm, off-clock bands (later/opportunistic) stay muted. */
.act-timing{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:999px;color:var(--text-2);background:var(--muted);white-space:nowrap}
.act-timing.tim-overdue{color:var(--red);background:var(--red-mist)}
.act-timing.tim-today{color:var(--amber);background:var(--amber-mist)}
.act-timing.tim-soon{color:var(--indigo);background:var(--indigo-mist)}
.act-why{font-size:11.5px;color:var(--text-2);margin-top:6px;line-height:1.45}
/* (draft toggle + empty-draft box removed 7/7; drafts fully removed from the engine 7/9, ER-96) */
/* ER-139 spike: the per-action strategic brief (key_context) as a collapsed disclosure,
   mirroring the contact info-panel pattern (.c-info-*). Tactical move stays visible; the
   strategic frame is one click away. */
.act-ctx{margin-top:8px}
/* Same chevron affordance as the read beats + MEDDPICC collapse: a ▸ that rotates
   to ▾ on open, muted, darkening on hover. Convention, not a bespoke caret. */
.act-ctx-sum{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);cursor:pointer;user-select:none;list-style:none;
  display:inline-flex;align-items:center;gap:6px}
.act-ctx-sum::-webkit-details-marker{display:none}
.act-ctx-sum::after{content:"\25B8";font-size:9px;color:var(--text-3);transition:transform .12s}
.act-ctx-sum:hover{color:var(--text-2)}
.act-ctx-sum:hover::after{color:var(--text)}
.act-ctx[open] .act-ctx-sum::after{transform:rotate(90deg)}
.act-ctx-body{margin-top:8px;padding:11px 13px;background:var(--muted);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.act-ctx-block+.act-ctx-block{margin-top:9px}
.act-ctx-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);margin-bottom:3px}
.act-ctx-txt{font-size:11px;color:var(--text-2);line-height:1.5}
.act-ctx-facts{margin:0;padding-left:15px;font-size:11px;color:var(--text-2);line-height:1.5}
.act-ctx-facts li{margin-top:2px}

/* right rail */
.sig{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border-subtle)}
.sig:last-child{border-bottom:0}
.sig-name{font-size:12px;font-weight:500}
.sig-val{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.sig-val.warm{background:var(--amber-mist);color:var(--amber)}
.sig-val.trust{background:var(--indigo-mist);color:var(--indigo)}
.sig-val.mom{background:var(--sage-mist);color:var(--on-sage)}
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{background:var(--muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:9px 11px}
.fact-val{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact-lbl{font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.note{font-size:10.5px;color:var(--text-3);font-style:italic;margin-top:8px}
.contact{border-bottom:1px solid var(--border-subtle)}
.contact:last-child{border-bottom:0}
.contact.hi{background:var(--indigo-mist);border-radius:6px}
.c-row{display:flex;align-items:center;gap:9px;padding:8px 0;cursor:pointer;list-style:none}
.c-row::-webkit-details-marker{display:none}
.c-noinfo>.c-row{cursor:default}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--indigo-mist);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.c-main{min-width:0}
.c-name{font-size:12px;font-weight:600}
.c-title{font-size:10.5px;color:var(--text-3)}
/* ⓘ button — pushed to the right edge; rotates subtly when its panel is open */
.c-info-ind{margin-left:auto;font-size:14px;color:var(--text-3);flex-shrink:0;
  transition:color .12s,transform .12s}
.c-row:hover .c-info-ind{color:var(--indigo)}
.contact[open] .c-info-ind{color:var(--indigo);transform:rotate(180deg)}
/* expandable panel — the per-contact writeup, hidden until the row is clicked */
.c-info-body{padding:2px 0 10px 37px}
.c-info-block{margin-top:7px}
.c-info-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);margin-bottom:2px}
.c-dossier{font-size:10.5px;color:var(--text-2);line-height:1.5;font-style:italic}
.c-summary{font-size:10.5px;color:var(--text-2);line-height:1.5}
.c-notitle{color:var(--text-3);font-style:italic}
/* Casing system: panel LABELS are small-caps; VALUE pills (chips, authority, status)
   read sentence case - the template label maps supply the casing, CSS never shouts a
   value. (The per-contact relationship .badge was removed 7/7 - see _detail.html.) */

/* feedback form */
.flag-form{display:flex;flex-direction:column;gap:8px}
.flag-form label{font-size:11px;color:var(--text-2);display:flex;flex-direction:column;gap:3px}
.flag-form select,.flag-form input{font-family:inherit;font-size:12px;padding:6px 8px;
  border:1px solid var(--border);border-radius:6px;background:var(--card-raised);color:var(--text)}
.flag-form button{align-self:flex-start;background:var(--indigo);color:var(--on-accent);border:0;border-radius:6px;
  padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}

/* ── arm diagnosis signals: deal stage · ICP · constraint · authority · sentiment ── */
.acct-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;
  white-space:nowrap;background:var(--muted);color:var(--text-2);border:1px solid var(--border-subtle)}
/* deal stage (chip on detail header + .pill on the list Stage column).
   In-progress stages → indigo, advanced/won → sage, stuck → amber, ended → muted. */
.chip.stage-exploring,.chip.stage-evaluating,.chip.stage-evaluation,.chip.stage-lead,
.chip.stage-qualified,.chip.stage-discovery,.chip.stage-proposal,.chip.stage-negotiation,
.chip.stage-contract,.pill.stage-exploring,.pill.stage-evaluating,.pill.stage-evaluation,
.pill.stage-lead,.pill.stage-qualified,.pill.stage-discovery,.pill.stage-proposal,
.pill.stage-negotiation,.pill.stage-contract{
  background:var(--indigo-mist);color:var(--indigo);border-color:transparent}
.chip.stage-selected,.chip.stage-committed,.chip.stage-closing,.chip.stage-post_sale,
.chip.stage-won,.chip.stage-closed_won,
.pill.stage-selected,.pill.stage-committed,.pill.stage-closing,.pill.stage-post_sale,
.pill.stage-won,.pill.stage-closed_won{
  background:var(--sage-mist);color:var(--on-sage);border-color:transparent}
.chip.stage-stalled,.chip.stage-on_hold,.pill.stage-stalled,.pill.stage-on_hold{
  background:var(--amber-mist);color:var(--amber);border-color:transparent}
.chip.stage-dead,.chip.stage-lost,.chip.stage-closed_lost,.chip.stage-churned,
.pill.stage-dead,.pill.stage-lost,.pill.stage-closed_lost,.pill.stage-churned{
  background:var(--muted);color:var(--text-3);border-color:transparent}
/* ICP fit + constraint */
.chip.icp-fit,.chip.icp-right_buyers{background:var(--sage-mist);color:var(--on-sage);border-color:transparent}
.chip.icp-unfit,.chip.icp-wrong_personas{background:var(--red-mist);color:var(--red);border-color:transparent}
.chip.constraint{background:var(--amber-mist);color:var(--amber);border-color:transparent;vertical-align:middle}
.icp-verdicts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}
/* list: off-ICP marker + blocker hint */
.t-stage{white-space:nowrap}
.t-officp{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--red);background:var(--red-mist);padding:1px 6px;border-radius:999px;margin-left:6px;vertical-align:middle}
/* per-contact authority (pill beside the name) + sentiment/authority panel tags */
.c-auth{font-size:9.5px;font-weight:700;letter-spacing:.01em;padding:1px 7px;
  border-radius:999px;margin-left:7px;vertical-align:middle;background:var(--muted);color:var(--text-2)}
.auth-economic_buyer{background:var(--indigo-mist);color:var(--indigo)}
.auth-champion{background:var(--sage-mist);color:var(--on-sage)}
.auth-blocker{background:var(--red-mist);color:var(--red)}
.auth-influencer{background:var(--gold-mist);color:var(--gold)}
/* warm-lead chip (U5): a product user on this account with no seller relationship yet.
   Amber = the app's established "warm" signal (see .sig-val.warm) - an attention/opportunity
   cue, not a risk. Same pill geometry as .c-auth; the reason string rides the tooltip. */
.c-warm{font-size:9.5px;font-weight:700;letter-spacing:.01em;padding:1px 7px;
  border-radius:999px;margin-left:7px;vertical-align:middle;background:var(--amber-mist);color:var(--amber)}
/* (Contact-row/tag sentiment chips cut: bare lowercase enum tokens duplicated the
   Relationship prose. The authority pill alone carries per-row signal.) */

/* inline block-level feedback thumbs */
.fb{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle;font-size:12px}
.fb-btn{background:none;border:0;cursor:pointer;padding:2px 3px;border-radius:5px;
  opacity:.45;font-size:13px;line-height:1;font-family:inherit;color:inherit}
.fb-btn svg{display:block}
.fb-btn:hover{opacity:1;background:var(--muted)}
.fb-btn.fb-up:hover{color:var(--sage)}
.fb-btn.fb-down:hover{color:var(--red)}
.fb[data-done]{opacity:.7;color:var(--text-2);font-size:11px}
.fb[data-err]::after{content:" couldn't save";color:var(--red);font-size:10px}
/* Inline feedback error hint — styled here (not via JS .style) so all tokens live in the sheet. */
.fb-err{color:var(--red);font-size:11px}
.fb-panel-top{display:flex;justify-content:flex-end;margin-bottom:2px}
.fb-done{font-size:12px;color:var(--on-sage)}

/* Feedback note popover — ONE shared element (feedback.js builds it once; top/left are
   assigned via CSSOM when anchored to the clicked thumb - never inline markup styles). */
.fb-pop{position:absolute;z-index:60;width:264px;background:var(--card-raised);
  border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);
  padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.fb-pop[hidden]{display:none}
.fb-pop-verdict{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-2)}
.fb-pop-note{font-family:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--border);
  border-radius:6px;background:var(--card-raised);color:var(--text)}
.fb-pop-note::placeholder{color:var(--text-3)}
.fb-pop-note:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}
.fb-pop-actions{display:flex;gap:8px;align-items:center}
.fb-pop-send{background:var(--indigo);color:var(--on-accent);border:0;border-radius:6px;padding:5px 13px;
  font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
.fb-pop-send:hover{opacity:.92}
.fb-pop-cancel{background:none;border:0;color:var(--text-2);font-size:11.5px;cursor:pointer;
  font-family:inherit;padding:5px 6px}
.fb-pop-cancel:hover{color:var(--text)}

/* Freshness: the why-might-this-be-out-of-date line under the account header, and the
   per-action "May be stale" chip. Visible but non-alarming (amber, not red). */
/* Freshness — the header card's final bordered row (metadata about this read), not a
   free-floating page caption. The border-top reads as "belongs to this card" in both themes. */
.freshness-note{font-size:10.5px;color:var(--text-2);margin:0;padding-top:8px;border-top:1px solid var(--border-subtle)}
.freshness-warn{color:var(--amber);font-weight:600}
/* (per-action stale chip removed 7/7 - the freshness line under the header carries it) */

/* ════════ Raw account table (the list view) ════════ */
main.list-main{max-width:1080px;padding:18px 24px}
.list-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.list-head h1{margin:0}
.list-head .org{color:var(--text-2);margin:0;font-size:11.5px}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-sm)}
.table-wrap .acct-table{border:0;border-radius:0;box-shadow:none}
/* one quiet line naming the queue's ordering - not a banner */
.list-note{font-size:11px;color:var(--text-2);margin:-4px 0 10px}
/* move + "+N more" badge share one baseline row; the clamp lives on .t-move inside */
.t-move-row{display:flex;align-items:baseline;gap:6px;max-width:820px}
.t-move-row .t-move{flex:0 1 auto;min-width:0}
/* Priority rank: quiet tabular number naming the delivered order. Hidden (not removed -
   columns keep their widths) once a custom column sort makes the numbers lie. */
.acct-table .col-rank{width:26px;padding-right:0}
.t-rank{font-size:11px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.acct-table.rank-hidden .t-rank{visibility:hidden}
.acct-table thead th.col-rank{cursor:default;color:var(--text-3)}
.acct-table .col-name{width:20%}
/* The read & next move is the point of the row — give it the room (the Blocker column
   was dropped 7/7, so it absorbs that width plus more). */
.acct-table .col-move{width:76%}
.acct-table td.col-move{vertical-align:top}
/* The no-action table carries a 3rd "reason" column, so the wide main-table col-move
   would overflow it — rebalance the three columns just for that table. */
.noact-table .col-name{width:22%}
.noact-table .col-move{width:56%}
.noact-table .col-reason{width:22%}

/* No-action section: the accounts with nothing queued live in a collapsed <details>
   below the main table, each with an honest reason in place of the blocker column -
   so the main table stays uniformly actionable and these never read as broken rows. */
.no-action{margin-top:16px}
.no-action-toggle{cursor:pointer;user-select:none;list-style:none;display:inline-flex;
  align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-2);padding:4px 0}
.no-action-toggle::-webkit-details-marker{display:none}
.no-action-toggle::before{content:"\25B8";font-size:9px;color:var(--text-3);transition:transform .12s ease}
.no-action[open] .no-action-toggle::before{transform:rotate(90deg)}
.no-action-toggle:hover{color:var(--text)}
.no-action .table-wrap{margin-top:8px}
/* No sorting in this section, so no pointer/hover affordance on its headers. */
.noact-table thead th{cursor:default}
.noact-table thead th:hover{color:var(--text-3)}
.t-reason{font-size:11px;color:var(--text-2)}
/* Middle cell is a stacked block now: bold move (or "No action") on top, muted
   strategy/read line under it. The move can wrap to 2 lines before clamping. */
.t-move{display:block;font-weight:600;color:var(--text);font-size:12.5px;line-height:1.35;
  max-width:820px;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t-moves{font-size:10px;font-weight:700;color:var(--indigo);margin-left:5px;vertical-align:top}
/* directional play under the move (act rows) */
.t-strategy{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:3px;font-size:11px;color:var(--text-2);line-height:1.35;max-width:820px}
/* action-less rows: the muted one-line read alone (no tag — the bold-vs-muted
   contrast against act rows is the signal) */
.t-read{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:11px;color:var(--text-2);line-height:1.35;max-width:820px}
/* account-cell meta row: recency + non-target relationship pill */
.t-meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.t-recency{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--text-3)}
.t-recency .rdot{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
.recency-live .rdot{background:var(--sage)}
.recency-warm .rdot{background:var(--gold)}
.recency-stale .rdot{background:var(--amber)}
.recency-dead .rdot{background:var(--red)}
.t-rel{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.01em;
  color:var(--gold);background:var(--gold-mist);padding:2px 7px;border-radius:5px}
/* Reusable CSS-only tooltip (CSP-safe: no JS, no inline). Any element with [data-tip]
   reveals its text on hover/keyboard-focus; add .tip for the "?" help cursor on a
   non-interactive badge (leave it off clickable controls so they keep the pointer).
   Opens downward, left-aligned — for the left/middle table cells and the toolbar. */
.tip{cursor:help}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;z-index:40;top:calc(100% + 7px);left:0;
  width:max-content;max-width:230px;white-space:normal;text-align:left;
  background:var(--inverted);color:var(--inverted-foreground);font-size:11px;font-weight:500;line-height:1.45;
  letter-spacing:normal;text-transform:none;padding:8px 10px;border-radius:8px;
  box-shadow:var(--shadow-md)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{
  content:"";position:absolute;z-index:40;top:calc(100% + 1px);left:11px;
  border:6px solid transparent;border-bottom-color:var(--inverted)}

/* Detail page: the move is the hero at the top */
/* Hero is the first element of grid-main; the grid is align-items:start, so any top
   margin would drop the main column below the aside's first panel. Zero top margin keeps
   the two columns flush at the top; the 14px bottom keeps the panel rhythm down the column. */
.acct-move-hero { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 16px 18px; margin: 0 0 14px; }
.acct-move-hero .panel-label { margin-bottom: 10px; }
.acct-move-hero .act-what { font-size: 1.15rem; line-height: 1.35; }

/* Action card tools row: copy-for-Claude + mark-done / dismiss toggles */
.act-tools { display: flex; gap: .6rem; align-items: center; margin-top: 10px; }
.act-copy { font-size: .82rem; border: 1px solid var(--border); background: var(--card-raised); border-radius: 6px;
  padding: .15rem .6rem; cursor: pointer; color: var(--text-2); }
.act-copy:hover { background: var(--muted); }
.act-copy.copied { background: var(--sage-mist); border-color: var(--sage); color: var(--on-sage); }
.act-done { font-size: .82rem; border: 1px solid var(--border); background: var(--card-raised); border-radius: 6px;
  padding: .15rem .6rem; cursor: pointer; color: var(--text-2); }
.act-done.on { background: var(--sage-mist); border-color: var(--sage); color: var(--on-sage); }
.act.done { opacity: .6; }
.act.done .act-what { text-decoration: line-through; }
.act-dismiss { font-size: .82rem; border: 1px solid var(--border); background: var(--card-raised); border-radius: 6px;
  padding: .15rem .6rem; cursor: pointer; color: var(--text-2); }
.act-dismiss.on { background: var(--amber-mist); border-color: var(--amber); color: var(--amber); }
.act.dismissed { opacity: .6; }
.act.dismissed .act-what { text-decoration: line-through; }
.act-snooze { font-size: .82rem; border: 1px solid var(--border); background: var(--card-raised); border-radius: 6px;
  padding: .15rem .6rem; cursor: pointer; color: var(--text-2); }
.act-snooze:hover { background: var(--muted); }
.act-snooze.on { background: var(--indigo-mist); border-color: var(--indigo); color: var(--indigo); }

/* Close/snooze popover — ONE shared element (actions.js builds it once; top/left are
   assigned via CSSOM when anchored to the clicked button). Mirrors .fb-pop; content rows
   (note / snooze presets+date / 👎 toggle) show per mode. */
.act-pop { position: absolute; z-index: 60; width: 264px; background: var(--card-raised);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.act-pop[hidden] { display: none; }
.act-pop [hidden] { display: none; }
.act-pop-title { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-2); }
.act-pop-note, .act-pop-date { font-family: inherit; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card-raised); color: var(--text); }
.act-pop-note::placeholder { color: var(--text-3); }
.act-pop-note:focus, .act-pop-date:focus { outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-mist); }
.act-pop-presets { display: flex; gap: 6px; }
.act-pop-chip { flex: 1; font-family: inherit; font-size: 11px; padding: 5px 4px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card-raised);
  color: var(--text-2); cursor: pointer; }
.act-pop-chip:hover { border-color: var(--indigo); color: var(--text); }
.act-pop-fb { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--text-2); cursor: pointer; }
.act-pop-fb input { margin: 0; cursor: pointer; }
.act-pop-actions { display: flex; gap: 8px; align-items: center; }
.act-pop-go { background: var(--indigo); color: var(--on-accent); border: 0; border-radius: 6px;
  padding: 5px 13px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.act-pop-go:hover { opacity: .92; }
.act-pop-cancel { background: none; border: 0; color: var(--text-2); font-size: 11.5px;
  cursor: pointer; font-family: inherit; padding: 5px 6px; }
.act-pop-cancel:hover { color: var(--text); }

/* ════════ UX-cleanup pass: the read as one story, softer citations, richer contacts ════════ */

/* ── The read card: Situation → The gap → Proposed strategy is ONE causal chain, so it
   reads as a single card bound by a left rail with a node per beat — scannable sub-beats,
   not three co-equal floating panels. One thumb for the whole diagnosis. ── */
.read-card .fb-panel-top{margin-bottom:2px}
.read-beat{position:relative;padding-left:16px}
.read-beat + .read-beat{margin-top:12px}
/* connecting rail down the left of the chain (hidden below the last beat) */
.read-beat::before{content:"";position:absolute;left:3px;top:4px;bottom:-12px;width:2px;background:var(--border-subtle)}
.read-beat:last-child::before{display:none}
/* gold-ringed node marker per beat — doubles as the "AI-generated" cue the ai-dot gives elsewhere */
.read-beat::after{content:"";position:absolute;left:0;top:3px;width:8px;height:8px;border-radius:50%;
  background:var(--card);box-shadow:inset 0 0 0 2px var(--gold)}
.read-sub{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);
  font-weight:700;flex-shrink:0}
/* Each beat is a <details>: collapsed = label + one-line teaser (the first sentence),
   open = the full prose. The gold node marker stays the "AI-generated" cue; the teaser
   disappears once the full text is shown. */
.read-head{cursor:pointer;user-select:none;list-style:none;display:flex;align-items:baseline;gap:8px;min-width:0}
.read-head::-webkit-details-marker{display:none}
/* visible expand affordance: a chevron pinned to the row's right edge (the gold rail
   node is a marker, not an affordance) - rotates when the beat is open */
.read-head::after{content:"\25B8";margin-left:auto;flex-shrink:0;font-size:9px;
  color:var(--text-3);transition:transform .12s ease;align-self:center}
.read-beat[open] .read-head::after{transform:rotate(90deg)}
.read-head:hover::after{color:var(--text)}
.read-head:hover .read-sub{color:var(--text)}
.read-teaser{flex:1;min-width:0;font-size:12px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.read-beat[open] .read-teaser{display:none}
.read-beat>.prose,.read-beat>.goal-row{margin-top:4px}
.read-beat .prose{font-size:13px;line-height:1.55}

/* ── Numbered citation chips (ER-45). The prose references each source inline by a small
   clickable number; clicking reveals the source's title/date and, when openable, a link.
   Collapsed by default so the prose reads clean; the number is the source's position in the
   read's citations array. Colour + weight, never colour alone, so it clears WCAG AA. ── */
.cite-chip{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;
  padding:0 4px;margin:0 1px;vertical-align:1px;font-size:9.5px;font-weight:700;line-height:1;
  color:var(--indigo);background:var(--indigo-mist);border:1px solid var(--border-subtle);
  border-radius:5px;cursor:pointer;font-family:var(--font)}
.cite-chip:hover,.cite-chip[aria-expanded="true"]{background:var(--indigo);color:var(--on-accent);border-color:var(--indigo)}
.cite-popover{position:absolute;z-index:40;max-width:280px;padding:9px 11px;font-size:11.5px;
  line-height:1.45;color:var(--text);background:var(--card-raised);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.cite-popover .cite-pop-title{font-weight:600;margin-bottom:3px}
.cite-popover .cite-pop-meta{color:var(--text-2);font-size:10.5px}
.cite-popover a.cite-pop-open{display:inline-block;margin-top:6px;font-weight:600;font-size:11px}
.cite-popover .cite-pop-nolink{display:block;margin-top:6px;color:var(--text-3);font-size:10.5px}

/* ── Risks / Opportunities, demoted to the rail. Compact list; the labels carry a quiet
   semantic tint (opportunity = sage, risk = amber) instead of the default uppercase grey. ── */
.risks-opps .fb-panel-top{margin-bottom:2px}
.ro-lbl{margin-bottom:5px}
.ro-list{padding-left:16px;margin-bottom:0}
.ro-list li{margin-bottom:3px;font-size:11.5px;color:var(--text-2);line-height:1.45}
.ro-list li:last-child{margin-bottom:0}
.ro-list + .ro-lbl{margin-top:12px}
.ro-opp{color:var(--on-sage)}
.ro-risk{color:var(--amber)}

/* ── Contact LinkedIn icon: small, muted, brand-blue on hover; opens in a new tab without
   toggling the contact card (guarded in actions.js). ── */
.c-linkedin{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle;
  color:var(--text-3);flex-shrink:0;line-height:0}
.c-linkedin:hover{color:#0a66c2}  /* LinkedIn brand blue — a deliberate brand-locked exception, like the OAuth buttons */
.c-linkedin svg{display:block;fill:currentColor}

/* --- Credentials (self-service PAT) --------------------------------------------- */
.credentials-main{max-width:720px;margin:0 auto;padding:18px 20px}
.cred-reveal{background:var(--card-raised);border:1px solid var(--indigo);
  border-radius:8px;padding:14px 16px;margin:14px 0}
.cred-reveal-title{margin:0 0 4px;font-weight:600;font-size:13px}
.cred-reveal-warn{margin:0 0 10px;color:var(--red);font-size:11.5px}
.cred-reveal-row{display:flex;gap:8px;align-items:center}
.cred-token{flex:1;font-family:var(--font-mono);font-size:12px;
  background:var(--muted);border:1px solid var(--border-subtle);border-radius:6px;
  padding:8px 10px;word-break:break-all;user-select:all}
.cred-copy{white-space:nowrap}
.cred-list{margin:16px 0}
.cred-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.cred-row-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cred-label{font-size:13px;font-weight:600;color:var(--text)}
.cred-meta{font-size:11px;color:var(--text-2);
  font-family:var(--font-mono)}
.cred-empty{color:var(--text-2);font-size:12px;margin:14px 0}
.cred-mint-form{display:flex;gap:8px;align-items:center;margin-top:18px}
.cred-label-input{flex:1;font-size:12px;padding:8px 10px;border:1px solid var(--border);
  border-radius:6px;background:var(--card-raised);color:var(--text)}
.cred-confirm{background:var(--card-raised);border:1px solid var(--red);
  border-radius:8px;padding:16px 18px;margin:16px 0}
.cred-confirm-warn{margin:0 0 14px;font-size:13px;color:var(--text)}
.cred-confirm-actions{display:flex;gap:8px;align-items:center}

/* "My Company" knowledge tab — a two-pane editor (markdown source | live preview)
   that sits on the same warm-paper surface as the rest of the app. Without these
   rules the textarea fell back to the tiny unstyled browser default and the preview
   stacked underneath it. */
.company-main{max-width:1040px}
.company-main h1{font-size:18px;margin:0 0 8px}
.company-guide{color:var(--text-2);font-size:12.5px;line-height:1.6;max-width:76ch;margin-bottom:10px}
.company-saved{display:inline-block;background:var(--sage-mist);color:var(--on-sage);font-size:11.5px;
  font-weight:600;border-radius:6px;padding:3px 9px;margin-bottom:10px}
.company-meta{color:var(--text-3);font-size:11px;margin-bottom:14px}

.company-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.company-col{display:flex;flex-direction:column;min-width:0}
.company-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:20px;margin-bottom:6px}
.company-col-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--text-3)}
.company-toggle{font-size:10.5px;font-weight:600;color:var(--text-2);background:transparent;
  border:1px solid var(--border-subtle);border-radius:6px;padding:2px 9px;cursor:pointer;
  font-family:inherit;line-height:1.4;white-space:nowrap}
.company-toggle:hover{border-color:var(--indigo);color:var(--indigo)}
.company-toggle:focus-visible{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}

/* Minimized editor: the markdown column collapses to just its header (label + toggle)
   and the split becomes a single column, so the header sits as a compact strip ABOVE
   the full-width preview. The toggle stays visible so it's reversible. */
.company-split.editor-collapsed{grid-template-columns:1fr}
.company-split.editor-collapsed .company-editor #company-body{display:none}
.company-split.editor-collapsed .company-editor .company-col-head{justify-content:flex-start;gap:10px}

#company-body{width:100%;min-height:560px;resize:vertical;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.65;
  color:var(--text);background:var(--card-raised);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;tab-size:2}
#company-body:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}
#company-body::placeholder{color:var(--text-3)}

.company-preview{min-height:560px;overflow-y:auto;background:var(--card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:16px 18px;
  font-size:12.5px;line-height:1.6;color:var(--text-2);box-shadow:var(--shadow-sm)}
.company-preview>:first-child{margin-top:0}
.company-preview h1{font-size:17px;font-weight:700;color:var(--text);margin:18px 0 8px;line-height:1.3}
.company-preview h2{font-size:14px;font-weight:700;color:var(--text);margin:16px 0 6px;
  padding-bottom:4px;border-bottom:1px solid var(--border-subtle)}
.company-preview h3{font-size:12.5px;font-weight:700;color:var(--text);margin:14px 0 5px}
.company-preview p{margin:0 0 10px}
.company-preview ul,.company-preview ol{margin:0 0 10px;padding-left:20px}
.company-preview li{margin:2px 0}
.company-preview strong{font-weight:700;color:var(--text)}
.company-preview a{color:var(--indigo)}
.company-preview code{font-family:var(--font-mono);font-size:11.5px;
  background:var(--muted);border-radius:4px;padding:1px 5px}
.company-preview blockquote{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--border);
  color:var(--text-3)}
.company-preview hr{border:0;border-top:1px solid var(--border-subtle);margin:16px 0}

.company-form>.conn-btn{margin-top:2px}

@media (max-width:820px){
  .company-split,.company-split.editor-collapsed{grid-template-columns:1fr}
  #company-body,.company-preview{min-height:340px}
}

/* Accessibility: honor reduced-motion - every transition here is decorative
   (chevrons, hovers, row washes), so switch them all off wholesale. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* sign-in page (ER-215) — standalone, centered card; reuses the shared tokens/palette.
   Google is the primary CTA (brand-compliant button, see login.html header comment);
   Microsoft is a secondary federated option; native email+password is progressively
   disclosed and styled as OUR component (indigo), not a provider's. */
.login-main{max-width:400px;margin:0 auto;padding:20px}
.login-card{background:var(--card);border:1px solid var(--border-subtle);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:28px 26px;margin-top:64px}
.login-brand{font-weight:700;letter-spacing:-.01em;font-size:14px}
.login-title{font-size:19px;font-weight:700;margin:14px 0 20px}
.login-error{background:var(--red-mist);border:1px solid var(--red-mist);border-radius:var(--radius-sm);
  color:var(--red);font-size:12px;font-weight:600;padding:9px 12px;margin-bottom:14px}

/* federated buttons */
.login-oauth{display:flex;flex-direction:column;gap:10px}

/* "Sign in with Google" — brand-locked per Google's identity branding guidelines
   (developers.google.com/identity/branding-guidelines): #FFFFFF fill, #747775 1px
   stroke, #1F1F1F text, medium-weight 14px type, unmodified 4-color "G" mark with its
   own clear space, ~40px min height. Google Sans is unavailable under our CSP (no
   external fonts), so type falls back to the app's system stack at the same weight/size -
   the one permitted deviation. */
.login-btn-google{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:40px;background:#FFFFFF;color:#1F1F1F;
  border:1px solid #747775;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:10px 12px}
.login-btn-google:hover{text-decoration:none;background:rgba(31,31,31,.04)}
.login-btn-google:active{background:rgba(31,31,31,.12)}
.login-btn-google:focus-visible{outline:2px solid #1a73e8;outline-offset:1px}
.login-btn-google-logo{flex-shrink:0}
.login-btn-google-text{line-height:20px}

/* "Sign in with Microsoft" — secondary federated option, Microsoft's own light-theme
   button treatment (learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps):
   the unaltered 4-square logo (#F25022 / #7FBA00 / #00A4EF / #FFB900) paired with the
   approved "Sign in with Microsoft" text. Kept visually quieter than Google (muted
   border, our warm border token) so Google reads as primary. */
.login-btn-microsoft{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:40px;background:#FFFFFF;color:#5E5E5E;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:13.5px;font-weight:600;
  padding:10px 12px}
.login-btn-microsoft:hover{text-decoration:none;background:var(--muted)}
.login-btn-microsoft:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.login-btn-microsoft-logo{flex-shrink:0}

/* progressive email disclosure — native <details>/<summary>, no JS. Low-emphasis
   entry point; the form inside uses our own indigo styling, not a provider's. */
.login-disclosure{margin-top:16px}
.login-summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;color:var(--text-2);font-size:12px;font-weight:600;padding:6px 0;
  border-radius:6px}
.login-summary::-webkit-details-marker{display:none}
.login-summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--text-3);
  border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);margin-top:-3px;
  transition:transform .15s ease}
.login-disclosure[open] .login-summary::after{transform:rotate(-135deg);margin-top:2px}
.login-summary:hover{color:var(--text)}
.login-summary:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.login-disclosure[open] .login-summary{margin-bottom:4px}

.login-form{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.login-label{font-size:11.5px;font-weight:600;color:var(--text-2);margin-top:10px}
.login-input{font-family:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--border);
  border-radius:6px;background:var(--card-raised);color:var(--text)}
.login-input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-mist)}
.login-btn{display:block;width:100%;text-align:center;background:var(--indigo);color:var(--on-accent);border:0;
  border-radius:6px;padding:10px 16px;font-size:13px;font-weight:600;font-family:inherit;
  margin-top:14px;cursor:pointer}
.login-btn:hover{text-decoration:none;opacity:.92}
.login-btn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}