/* ═══════════════════════════════════════════════════════════════════════════
   CRM — the app CSS layer.

   Loaded between the Meridian kit and ATTEST (public/index.html). It carries ONLY what
   neither kit ships: the mockup's own idioms (docs/mockup/index.html's <style> block, which
   is the agreed look) plus the small pieces of app chrome — the toast stack, the language
   switch, the notification bell — that every Meridian app styles itself.

   Never duplicate a design-kit-meridian class here, and never a class ATTEST already owns
   (.mast, .rail, .fld, .zone, .sheet, .tbl, .tag, .att, .ev, .lnk, .src-ref, .voice-*).
   Check lib/design-kit-meridian/src/components/ and public/styles/attest.css first.

   ATTEST law, restated because it is easy to break here: tone is TEXT COLOUR, never a hue
   assigned to a category. No .stat-card. No --stage-* spectrum. Dates and counts are tabular
   sans (.voice-figure), refs are mono (.src-ref), verbatim text is serif (.voice-record).
   Nothing under 12px.
   ═══════════════════════════════════════════════════════════════════════════ */


/* topbar bits Signet defines app-side */
.lang-switch { display:inline-flex; flex:none; border:1px solid var(--line); border-radius:var(--r1); overflow:hidden; }
.lang-switch-btn { border:0; background:none; font:inherit; font-size:var(--t-label); font-weight:600; letter-spacing:.06em; padding:4px 8px; color:var(--ink-3); cursor:pointer; white-space:nowrap; }
.lang-switch-btn.on { background:var(--well); color:var(--ink-1); }
.topbar-eng-select { width:auto; min-width:200px; max-width:260px; flex:none; font-size:var(--t-scan); padding:3px 8px; }
.topbar-right { flex-shrink:0; }
.mock-tag { font-size:var(--t-label); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-4); border:1px dashed var(--rule-2); padding:1px 6px; border-radius:var(--r1); }

/* sidebar activity */
.nav-activity { margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.nav-activity-count { font-variant-numeric:tabular-nums; font-size:var(--t-meta); color:var(--ink-3); }
.nav-activity-dot { width:6px; height:6px; border-radius:50%; background:var(--act); }
.sidebar-foot { margin-top:auto; padding:var(--s12) var(--s16); font-size:var(--t-meta); color:var(--ink-4); border-top:1px solid var(--line); }

/* the rail: a .fld that is not a button */
.fld .fl .go { opacity:.0; } button.fld:hover .go { opacity:1; }

/* zones with two sheets side by side when the content is a pair */
.pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); align-items:start; }
.back { display:inline-block; margin-bottom:var(--s12); font-size:var(--t-meta); color:var(--ink-3); text-decoration:none; cursor:pointer; }
.back:hover { color:var(--act); }
.statedot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin:0 6px 2px 8px; }
.statedot--idle { background:var(--ink-4); }
.statelabel { font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; }

/* next move */
.move-head { display:flex; align-items:flex-start; gap:var(--s16); flex-wrap:wrap; }
.move-head h2 { margin:0; font-size:var(--t-h2); font-weight:600; letter-spacing:-.015em; max-width:36ch; line-height:1.25; }
.move-cta { margin-left:auto; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--s12); }

/* generic record rows inside a sheet */
.row { display:grid; gap:var(--s12); align-items:baseline; padding:10px var(--s16); border-bottom:1px solid var(--rule); font-size:var(--t-scan); }
.row:last-child { border-bottom:0; }
.row--btn { cursor:pointer; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule); font:inherit; color:inherit; }
.row--btn:hover { background:var(--sheet-2); }
.row--new { box-shadow: inset 2px 0 0 var(--ink-1); }
.row .k { font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-4); font-weight:600; }
.row .d { color:var(--ink-3); font-size:var(--t-meta); }
.fig { font-variant-numeric:tabular-nums lining-nums; }
.w { font-weight:600; color:var(--ink-1); }

/* per-row fixed figure slots (Clients board idiom) */
.figs { display:flex; gap:var(--s16); }
.figs .f .k { display:block; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-4); font-weight:600; }
.figs .f .v { display:block; font-size:var(--t-h3); font-weight:600; font-variant-numeric:tabular-nums; }
.figs .f .v.warn { color:var(--attend); } .figs .f .v.err { color:var(--broken); } .figs .f .v.nil { color:var(--ink-4); font-weight:400; }
.figs .f .u { font-size:var(--t-meta); color:var(--ink-3); font-weight:400; margin-left:3px; }

/* facts panel — by conversation, two columns */
.facts { columns:2; column-gap:var(--s32); }
.fgroup { break-inside:avoid; margin-bottom:var(--s16); }
.fgroup-h { margin-bottom:6px; }
.fact { display:grid; grid-template-columns:118px minmax(0,1fr) auto; gap:var(--s8); padding:6px 0; border-bottom:1px solid var(--rule); font-size:var(--t-scan); align-items:baseline; }
.fact:last-child { border-bottom:0; }
.fact .fk { color:var(--ink-3); font-size:var(--t-meta); }
.fact .fmeta { font-size:var(--t-meta); color:var(--ink-3); white-space:nowrap; }

/* timeline stream */
.tl-row { display:grid; grid-template-columns:84px 1fr; gap:var(--s12); padding:8px var(--s16); border-bottom:1px solid var(--rule); }
.tl-row:last-child { border-bottom:0; }
.tl-date { text-align:right; color:var(--ink-4); font-size:var(--t-meta); font-variant-numeric:tabular-nums; line-height:1.45; }
.tl-kind { font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; margin-right:8px; }
.tl-title { color:var(--ink-1); }
.tl-sum { color:var(--ink-2); font-size:var(--t-meta); margin-top:2px; }

/* two-pane rail + stand (proposals idiom) */
.panes { display:grid; grid-template-columns:380px 1fr; min-height:min(72vh, 860px); }
.qrail { border-right:1px solid var(--rule); background:var(--sheet-2); display:flex; flex-direction:column; }
.qtabs { display:flex; gap:var(--s4); padding:6px var(--s12) 0; border-bottom:1px solid var(--rule); }
.qtab { border:0; background:none; font:inherit; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; font-weight:600; color:var(--ink-3); padding:8px 8px 7px; border-bottom:2px solid transparent; cursor:pointer; }
.qtab.on { color:var(--ink-1); border-bottom-color:var(--act); }
.qtab .n { font-weight:400; letter-spacing:0; text-transform:none; margin-left:4px; color:var(--ink-3); }
.qgrp { position:sticky; top:0; display:flex; justify-content:space-between; padding:6px var(--s12); font-size:var(--t-meta); color:var(--ink-3); background:var(--well); border-bottom:1px solid var(--rule); }
.qrow { display:grid; grid-template-columns:16px 1fr auto; gap:var(--s8); width:100%; text-align:left; border:0; border-bottom:1px solid var(--rule); background:none; padding:10px var(--s12); font:inherit; color:inherit; cursor:pointer; align-items:start; }
.qrow:hover { background:var(--sheet); }
.qrow.on { background:var(--sheet); box-shadow: inset 2px 0 0 var(--act); }
.qrow .qk { display:block; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; }
.qrow .qs { display:block; font-size:var(--t-scan); color:var(--ink-1); margin-top:2px; }
.qrow .qm { display:block; font-size:var(--t-meta); color:var(--ink-3); margin-top:2px; }
.qrow .qflag { font-size:var(--t-meta); white-space:nowrap; }
.qflag.attend { color:var(--attend); } .qflag.broken { color:var(--broken); } .qflag.mute { color:var(--ink-4); }
.stand { display:flex; flex-direction:column; min-width:0; }
.sthd { display:flex; align-items:center; gap:var(--s8); flex-wrap:wrap; padding:var(--s12) var(--s20); border-bottom:1px solid var(--rule); font-size:var(--t-meta); color:var(--ink-3); }
.sthd .kind { font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-1); font-weight:600; }
.stbody { padding:var(--s8) var(--s20) var(--s20); flex:1; }
.sec { margin-top:var(--s16); }
.lbl { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.lbl .r { font-size:var(--t-meta); color:var(--ink-3); letter-spacing:0; text-transform:none; font-weight:400; }
.dif del { color:var(--broken); } .dif ins { color:var(--ok); text-decoration:none; font-weight:600; }
.rat { font-size:var(--t-scan); color:var(--ink-2); line-height:var(--lh-scan); max-width:68ch; margin:0; }
.wpre { margin-top:var(--s16); padding:var(--s8) var(--s12); background:var(--well); border-radius:var(--r1); font-size:var(--t-meta); color:var(--ink-2); }
.stfoot { position:sticky; bottom:0; display:flex; align-items:center; gap:var(--s8); flex-wrap:wrap; padding:var(--s12) var(--s20); background:var(--sheet-2); border-top:1px solid var(--rule-2); }
.stfoot .spacer { flex:1; }
.kbd { font-family:var(--mono); font-size:12px; color:var(--ink-4); border:1px solid var(--rule-2); border-radius:3px; padding:0 4px; margin-left:4px; }
.nb { border:1px solid var(--rule); border-radius:var(--r1); padding:var(--s8) var(--s12); font-size:var(--t-scan); }
.nb.hit { border-color:var(--attend-line); }
.lint { font-size:var(--t-meta); color:var(--ink-2); } .lint .lm { font-weight:600; letter-spacing:.06em; margin-right:6px; }
.lint.pass .lm { color:var(--ok); } .lint.warn .lm { color:var(--attend); }

/* agent voice blocks (drafts, personas): sans in a dashed ghost frame = proposed text */
.ghost { border:1px dashed var(--attend-line); border-radius:var(--r1); padding:var(--s8) var(--s12); background:var(--sheet); }
.ghost .who { font-size:var(--t-meta); color:var(--ink-3); margin-bottom:4px; display:flex; gap:var(--s8); flex-wrap:wrap; }
.ghost p { margin:0; font-size:var(--t-scan); line-height:var(--lh-scan); color:var(--ink-2); }
.msg { padding:var(--s12) var(--s16); border-bottom:1px solid var(--rule); }
.msg:last-child { border-bottom:0; }
.msg .who { display:flex; gap:var(--s8); font-size:var(--t-meta); color:var(--ink-3); margin-bottom:6px; flex-wrap:wrap; }
.msg--out { background:var(--sheet-2); }

/* pipeline board — position, not hue */
.pipe { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }
.pipe-col { border-right:1px solid var(--rule); min-height:320px; }
.pipe-col:last-child { border-right:0; }
.pipe-h { padding:8px var(--s12); border-bottom:1px solid var(--rule); background:var(--sheet-2); display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:52px; }
.pipe-h .u-label { white-space:nowrap; }
.pipe-h .n { font-size:var(--t-meta); color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pipe-col--hold .pipe-h { box-shadow: inset 0 2px 0 var(--ink-1); }
.deal { margin:var(--s8); padding:var(--s8) var(--s12); border:1px solid var(--rule); border-radius:var(--r1); background:var(--sheet); font-size:var(--t-meta); }
.deal .t { font-size:var(--t-scan); color:var(--ink-1); margin:2px 0; }
.deal .d { color:var(--ink-3); }
.deal--stale { border-left:2px solid var(--attend); }

/* instrument band with dots (agent desk idiom) */
.ag-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:6px; vertical-align:middle; }
.ag-dot--attend { background:transparent; box-shadow:inset 0 0 0 1.5px var(--attend); }
.ag-dot--off { background:var(--rule-2); }
.band-item { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:var(--t-meta); color:var(--ink-2); }

/* run ledger */
.run { display:grid; grid-template-columns:118px 1fr auto; gap:var(--s12); padding:10px var(--s16); border-bottom:1px solid var(--rule); align-items:start; font-size:var(--t-scan); }
.run:last-child { border-bottom:0; }
.run .when { font-size:var(--t-meta); color:var(--ink-3); }
.run .pass { color:var(--ink-1); }
.run .verdict { color:var(--ink-2); font-size:var(--t-meta); margin-top:2px; }
.run .push { color:var(--attend); font-size:var(--t-meta); margin-top:2px; }
.seal { font-size:var(--t-label); text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
.seal--ok { color:var(--ok); } .seal--attend { color:var(--attend); } .seal--none { color:var(--ink-4); }

.standing { border-left:2px solid var(--attend-line); padding:4px var(--s12); font-size:var(--t-scan); color:var(--ink-2); margin:0; }
.sepdot { color:var(--ink-4); }
.measure { max-width:68ch; }
.agentmark { font-size:var(--t-meta); color:var(--ink-3); font-weight:500; }

/* ═══ App chrome neither kit ships ═══════════════════════════════════════════ */

/* Scroll-into-view must clear the fixed topbar. Meridian's .topbar is position:fixed and the
   window is the page's only scroller, but the kit sets no scroll-padding to match — so an
   #anchor or a scrollIntoView lands underneath it and reads as a cut-off page. */
html { scroll-padding-top: calc(var(--topbar-h, 48px) + var(--s8, 8px)); }

/* Toast stack — a floating layer, so a shadow is allowed (Meridian law #1). */
.toast-stack {
  position: fixed; top: var(--s16); right: var(--s16); z-index: 1000;
  display: flex; flex-direction: column; gap: var(--s8); max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s8);
  padding: var(--s12) var(--s16);
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--elev-2); font-size: var(--t-scan);
}
.toast-ok   { border-left: 2px solid var(--ok); }
.toast-warn { border-left: 2px solid var(--attend); }
.toast-err  { border-left: 2px solid var(--broken); }

/* The brand: the tick, then the wordmark. Text, not the kit's img-oriented .brand-logo. */
.brand-name {
  font-weight: 650; font-size: var(--t-scan); letter-spacing: .14em;
  color: var(--ink-1); cursor: default;
}

/* NotificationBell (notification-kit component; every Meridian app styles it itself). */
.notification-bell { position: relative; }
.notification-bell-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
  padding: 4px; border-radius: var(--r1);
}
.notification-bell-btn:hover { color: var(--ink-1); background: var(--well); }
.notification-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--broken);
  color: var(--broken-ink, #fff);
  /* a count is a quantity: tabular sans, never mono */
  font-size: var(--t-label); font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.notification-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-height: 480px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--elev-2); z-index: 200; display: flex; flex-direction: column;
}
.notification-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s12) var(--s16); border-bottom: 1px solid var(--line);
}
.notification-dropdown-title { font-weight: 600; font-size: var(--t-scan); }
.notification-dropdown-list { overflow-y: auto; flex: 1; }
.notification-empty { padding: var(--s32) var(--s16); text-align: center; color: var(--ink-3); font-size: var(--t-scan); }
.notification-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--rule); padding: 10px var(--s16); cursor: pointer; font: inherit;
}
.notification-item:hover { background: var(--sheet-2); }
.notification-item.unread { border-left: 2px solid var(--act); }
.notification-item-title { font-size: var(--t-scan); color: var(--ink-1); }
.notification-item-body { font-size: var(--t-meta); color: var(--ink-2); margin-top: 2px; }
.notification-item-time { font-size: var(--t-meta); color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Identity marks (components/Identity.tsx). A logo or an avatar is a picture of a subject, so
   it is square-ish, quiet, and NEVER tinted by a category. The fallback is initials — an
   absent picture is stated, not faked with a stock silhouette. */
.idmark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  overflow: hidden; background: var(--well); border: 1px solid var(--rule);
  color: var(--ink-3); font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; line-height: 1; user-select: none;
}
.idmark--org    { border-radius: var(--r1); }
.idmark--person { border-radius: 50%; }
.idmark img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The nav drawer scrim (phone breakpoint — attest.css PHONE section). */
.shell-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .38);
}

/* Board filter bars (instr-band): chips + the search box. Used by Organisations, People and
   Signals, and by the Review stand header as a plain inline note (.chip on a <span>).
   A chip states a slice of the record, so it is a quiet outline that fills in when active;
   the count inside it stays a .voice-figure. Nothing here carries a category hue. */
.filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: var(--t-meta); line-height: 1.2; white-space: nowrap;
  color: var(--ink-2); background: none; border: 1px solid var(--rule-2);
  border-radius: var(--r1); padding: 4px 9px; cursor: pointer;
}
span.chip { border: 0; padding: 0; cursor: default; }
button.chip:hover { border-color: var(--ink-4); color: var(--ink-1); }
button.chip.active, button.chip[aria-pressed="true"] {
  background: var(--ink-1); border-color: var(--ink-1); color: var(--sheet);
}
button.chip.active .voice-figure, button.chip[aria-pressed="true"] .voice-figure { color: inherit; }
.chip .voice-figure { color: var(--ink-3); }
button.chip:focus-visible { outline: 2px solid var(--act); outline-offset: 1px; }

.search-wrapper { display: flex; align-items: center; }
.search-input {
  width: 100%; font: inherit; font-size: var(--t-scan); line-height: 1.3;
  color: var(--ink-1); background: var(--sheet);
  border: 1px solid var(--rule-2); border-radius: var(--r1); padding: 5px 9px;
}
.search-input::placeholder { color: var(--ink-4); }
.search-input:focus { outline: none; border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }