/* Axsys Signals app: shared design layer for the coded tenant pages.
   LOOK A, "Ledger rule" (chosen 9/01): financial-statement typesetting.
   Zero radius, no shadows, a three-weight ink rule system (heavy 2px ink, structural
   1px #c9cedb, hairline 1px #dfe3ea), the accountant's 3px double rule closing the
   stat band and the queue, ticker-glyph statuses instead of pills, typeset tiers,
   tabular figures. Same palette and type as tokens.css and the mockups. */
:root {
  color-scheme: light;
  --paper: #f5f6f8; --card: #ffffff; --inset: #fafbfc;
  --rule: #131a26; --hair: #c9cedb; --hair2: #dfe3ea;
  --ink: #131a26; --dim: #57616e; --faint: #8d96a3; --navy: #1f365c; --navy-2: #1a2c4c;
  --accent: #2a78d6; --accent-ink: #1d5ea8; --accent-bg: #e4eefb; --accent-line: #c9def6;
  --signal: #d95926; --signal-ink: #b34517; --signal-bg: #fbeae2; --signal-line: #f3d3c2;
  --amber-bg: #fdf3e4; --amber-ink: #97690f; --amber-line: #f0dcb4;
  --green: #177a4c; --green-bg: #e2f3ea; --green-line: #b9e0cb;
  --font-ui: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif: 'Besley', Georgia, serif;
}
/* dark mode: same rules, inverted paper. Applied by html[data-theme=dark]; the
   sidebar stays navy in both. Chosen per user, remembered per browser. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141a24; --card: #1b2230; --inset: #171d28;
  --rule: #e7ecf3; --hair: #2b3646; --hair2: #222c3a;
  --ink: #e7ecf3; --dim: #a0abb9; --faint: #6e7a89;
  --accent: #5b9ae6; --accent-ink: #9fc2ec; --accent-bg: #1e2f4a; --accent-line: #2a4468;
  --signal: #ef7a4a; --signal-ink: #f1a37f; --signal-bg: #3a2118; --signal-line: #5a3324;
  --amber-bg: #3a2e14; --amber-ink: #e0b25c; --amber-line: #5a4720;
  --green: #4fc48a; --green-bg: #153126; --green-line: #1f5a3d;
}
html[data-theme="dark"] .avatar { background: #1e2f4a; color: #9fc2ec; }
html[data-theme="dark"] .avatar.muted { background: #222c3a; color: #a0abb9; }
html[data-theme="dark"] .chip.on { background: #e7ecf3; color: #141a24; border-color: #e7ecf3; }
html[data-theme="dark"] .rec .t, html[data-theme="dark"] .rec .label { color: #e7ecf3; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--paper); font-size: 13.5px; line-height: 1.45; }
a { color: var(--accent-ink); text-decoration: none; } a:hover { color: #17497f; }
button { font-family: var(--font-ui); }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
/* the ticker voice: small caps, letterspaced, no box */
.tick { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { display: flex; flex-direction: column; background: var(--navy); color: #fff; padding: 22px 14px 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: baseline; gap: 8px; padding: 0 12px 22px; border-bottom: 1px solid rgba(255,255,255,0.14); margin-bottom: 10px;text-decoration: none; }
/* Lane 1 UI (9/07): the wordmark goes home, on every page, the way a logo should */
a.brand:hover .sg { color: #fff; }
.brand .ax { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; }
.brand .sg { font-size: 14px; font-weight: 600; color: #9fc2ec; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.navitem { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13.5px; color: #c6d2e4; }
.navitem:hover { background: rgba(255,255,255,0.05); color: #fff; }
.navitem.active { background: rgba(255,255,255,0.07); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 #f5f6f8; }
.navitem svg { flex: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.wscard { border-top: 1px solid rgba(255,255,255,0.18); padding: 12px 12px 0; }
.wscard .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: #9fc2ec; }
.wscard .n { font-size: 13px; font-weight: 600; margin-top: 3px; }
.wscard .s { font-size: 11.5px; color: #c6d2e4; margin-top: 2px; }
.wsswitch { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.wsswitch a { font-size: 11.5px; color: #9fc2ec; text-decoration: none; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; padding: 4px 8px; }
.wsswitch a:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.me { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.me .av { width: 30px; height: 30px; border-radius: 2px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.me .n { font-size: 12.5px; font-weight: 600; }
.me .r { font-size: 11px; color: #9fc2ec; }
.me a { color: #9fc2ec; font-size: 11px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 18px 32px 14px; border-bottom: 1px solid var(--hair); background: var(--paper); }
.topbar > div:first-child { display: flex; align-items: baseline; gap: 16px; }
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.topbar .sub { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; padding-left: 16px; border-left: 1px solid var(--hair); }
.topbar .tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--hair); padding: 8px 12px; width: 240px; color: var(--faint); font-size: 13px; }
.search input { border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 13px; color: var(--ink); width: 100%; }
.content { display: flex; flex-direction: column; gap: 22px; padding: 24px 32px; }
/* Lane 4 resilience: page-top notices (live data delayed, a note from the team).
   Ledger voice: a ruled amber band, no box, no radius. */
.notice { display: flex; align-items: baseline; gap: 12px; padding: 9px 32px; background: var(--amber-bg); color: var(--amber-ink); border-bottom: 1px solid var(--amber-line); font-size: 12.5px; line-height: 1.5; }
.notice .tick { color: var(--amber-ink); flex: none; }
.notice a { color: inherit; text-decoration: underline; }

/* ---------- primitives ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: #fff; border: 1px solid var(--navy); padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #2a4a7c; }
.btn.ghost { background: var(--card); color: var(--dim); border-color: var(--hair); }
.btn.ghost:hover { background: var(--paper); }
.btn.small { padding: 5px 12px; font-size: 12px; }
.btn.good { background: var(--card); color: var(--green); border-color: var(--green); }
.btn.danger { background: var(--card); color: var(--signal-ink); border-color: var(--signal-ink); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* tags: square outline stamps in the ticker voice */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; background: var(--card); border: 1px solid var(--hair); color: var(--dim); }
.chip.outline { font-weight: 600; }
.chip.on { background: var(--rule); color: #fff; border-color: var(--rule); }
.chip.click { cursor: pointer; }
.chip.blue { color: var(--accent-ink); border-color: var(--accent-line); }
.chip.good { color: var(--green); border-color: var(--green-line); }
.chip.gray { color: var(--dim); }
/* tiers are typeset, not boxed */
.chip.tier1, .chip.tier2, .chip.tier3, .chip.tier4 { background: none; border: none; padding: 0; letter-spacing: 0.08em; color: var(--ink); }
.chip.tier3, .chip.tier4 { color: var(--dim); }
/* statuses are market notation: glyph + letterspaced caps, no fill */
.chip.surge, .chip.heat, .chip.mon { background: none; border: none; padding: 0; letter-spacing: 0.08em; font-family: var(--font-ui); }
.chip.surge { color: var(--signal); } .chip.surge::before { content: "\25B2"; }
.chip.heat { color: var(--amber-ink); } .chip.heat::before { content: "\25C6"; }
.chip.mon { color: var(--dim); } .chip.mon::before { content: "\25CF"; }
.score { font-family: var(--font-mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 34px; }
.label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }
.card { background: var(--card); border: 1px solid var(--hair); }
.card-h { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; border-bottom: 2px solid var(--rule); }
.card-h .t { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.card-h .d { font-size: 12px; color: var(--faint); }
/* the stat band: one continuous sheet, column rules, heavy top, double close */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--card); border-top: 2px solid var(--rule); border-bottom: 3px double var(--rule); }
.tile { padding: 14px 18px; border-right: 1px solid var(--hair); }
.tile:last-child { border-right: none; }
.tile .v { font-family: var(--font-mono); font-size: 26px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile.hot .label, .tile.hot .v { color: var(--signal); }
.tile.hot .label::before { content: "\25B2\00a0"; }
/* segmented filters sharing borders */
.filters { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.filters .chip { padding: 6px 12px; margin-left: -1px; letter-spacing: 0.08em; }
.filters .chip:first-child { margin-left: 0; }
.filters .count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.avatar { width: 36px; height: 36px; border-radius: 2px; background: var(--accent-bg); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex: none; }
.avatar.muted { background: #eef1f5; color: var(--dim); }
.empty { padding: 40px 20px; text-align: center; color: var(--faint); font-size: 13px; }
.foot { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.err { background: var(--card); border: 1px solid var(--signal); border-left: 4px solid var(--signal); color: var(--signal-ink); padding: 9px 12px; font-size: 13px; }
.ok { background: var(--card); border: 1px solid var(--green); border-left: 4px solid var(--green); color: var(--green); padding: 9px 12px; font-size: 13px; }
input.in, select.in, textarea.in { width: 100%; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink); background: var(--card); border: 1px solid var(--hair); padding: 9px 12px; outline: none; }
input.in:focus, select.in:focus, textarea.in:focus { border-color: var(--rule); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--dim); }

/* ---------- queue ---------- */
.queue { display: flex; flex-direction: column; border: none; border-bottom: 3px double var(--rule); background: var(--card); }
.qhead { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 130px 40px 56px 20px; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 2px solid var(--rule); }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 130px 40px 56px 20px; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--hair2); cursor: pointer; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--paper); }
.row .nm { font-size: 14.5px; font-weight: 700; }
.row .why { font-size: 12.5px; color: var(--dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .when { font-family: var(--font-mono); font-size: 11px; color: var(--faint); text-align: right; }
.row .chev { color: var(--faint); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(19,26,38,0.28); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 20; }
/* Lane 1 UI (9/06) fix MINOR R (audit 26): a closed panel used to sit off the right edge and
   stay in the tab order, so a person who opened a brief and closed it then tabbed into an
   invisible panel. visibility: hidden takes it out of the tab order; the zero length visibility
   step is delayed by the length of the slide, so the panel still animates away instead of
   blinking out, and comes back with no delay when it opens. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 94vw; background: var(--paper); border-left: 1px solid var(--rule); transform: translateX(100%); visibility: hidden; transition: transform .22s, visibility 0s linear .22s; z-index: 21; display: flex; flex-direction: column; }
body.open .scrim { opacity: 1; pointer-events: auto; }
body.open .drawer { transform: none; visibility: visible; transition: transform .22s, visibility 0s; }
.drawer .dh { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 2px solid var(--rule); background: var(--card); }
.drawer .dh .t { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.drawer .dh .x { margin-left: auto; background: none; border: 1px solid var(--hair); padding: 5px 9px; cursor: pointer; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.drawer .dh .x + .t { margin-left: 0; }
.drawer .dh .x:first-child { margin-left: 0; }
.drawer .db { padding: 20px 24px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; font-size: 12.5px; }
.kv .k { color: var(--faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.tl { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair2); }
.tl:last-child { border-bottom: none; }
.tl .d { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.tl .w { font-size: 13px; }
.tl .m { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.tl .p { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.rec { display: flex; align-items: center; gap: 16px; background: var(--card); border-top: 2px solid var(--rule); border-bottom: 1px solid var(--hair); padding: 14px 18px; }
.rec .label { color: var(--ink); }
.rec .t { font-size: 13.5px; color: var(--ink); margin-top: 5px; line-height: 1.55; }

/* ---------- library ---------- */
.lib { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.rail { display: flex; flex-direction: column; gap: 0; padding: 0; }
.rail .it { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--dim); border-bottom: 1px solid var(--hair2); }
.rail .it:last-child { border-bottom: none; }
.rail .it:hover { background: var(--paper); }
.rail .it.on { background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: inset 2px 0 0 var(--rule); }
.rail .it .c { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lcard { background: var(--card); border: 1px solid var(--hair); border-top: 2px solid var(--rule); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.lcard:hover { background: var(--inset); }
.lcard .t { font-size: 14.5px; font-weight: 700; }
.lcard .s { font-size: 12.5px; color: var(--dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lcard .m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.grade { font-family: var(--font-mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grade.small { font-size: 13px; }
.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.chain .node { padding: 10px 12px; border-right: 1px solid var(--hair); }
.chain .node:last-child { border-right: none; }
.chain .node .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--faint); }
.chain .node .v { font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--rule); text-transform: uppercase; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--hair2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { cursor: pointer; }

/* ---------- narrow screens, THE LIST B30 ----------
   Below 860px the shell stops being a 232px rail beside a starved content column.
   The rail becomes a top band: brand and account on one line, the nine nav items on a
   strip that scrolls sideways inside its own box, and the content column takes the whole
   page. Stat tiles go two up, queue rows stack, wide blocks scroll in their own container.
   Every rule below lives inside the query, so nothing above 860px changes. */
@media (max-width: 860px) {
  /* the shell: one column, the rail on top */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; top: auto; height: auto; min-height: 0; flex-direction: row; flex-wrap: wrap;
          align-items: center; gap: 6px 14px; padding: 10px 14px 0; }
  .brand { order: 1; padding: 0; margin: 0; border-bottom: none; }
  .side-foot { order: 2; margin: 0; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center;
               justify-content: flex-end; gap: 4px 12px; min-width: 0; }
  .wscard { border-top: none; padding: 0; min-width: 0; }
  .wscard .k { display: none; }
  .wscard .n, .wscard .s { margin-top: 0; overflow-wrap: anywhere; }
  .me { padding: 0; min-width: 0; }
  .me > div { min-width: 0; }
  .me .n, .me .r { overflow-wrap: anywhere; }
  .me .av { width: 28px; height: 28px; }
  /* the nine items become a strip. It may scroll sideways inside its own box; the page may not. */
  .nav { order: 3; flex: 0 0 100%; flex-direction: row; gap: 0; min-width: 0; margin-top: 8px;
         overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
  .nav::-webkit-scrollbar { display: none; }
  /* Lane 1 UI (9/06) audit 81: the scrollbar is hidden on purpose, so nothing told a phone
     user the strip carries on past the right edge and five of the nine pages read as absent.
     The mask fades the last items into the navy. It hangs off the scrollport, not the content,
     so it stays pinned to the right edge while the strip scrolls under it. */
  .nav { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 38px), rgba(0, 0, 0, 0.12) 100%);
         mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 38px), rgba(0, 0, 0, 0.12) 100%);
         -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .navitem { flex: 0 0 auto; min-height: 44px; padding: 10px 12px; white-space: nowrap; }
  .navitem.active { box-shadow: inset 0 -2px 0 #f5f6f8; }   /* the page you are on, underlined instead of barred */

  /* the content column takes the full width */
  .topbar { padding: 14px 16px; flex-wrap: wrap; row-gap: 8px; }
  .topbar > div:first-child { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
  .topbar h1 { font-size: 19px; overflow-wrap: anywhere; }
  .topbar .sub { padding-left: 0; border-left: none; }
  .topbar .tools { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .search { width: 100%; }
  .content { padding: 16px; gap: 16px; }
  .notice { padding: 9px 16px; flex-wrap: wrap; }
  .card-h { flex-wrap: wrap; padding: 12px 14px; }
  .empty { padding: 28px 14px; }

  /* tappable: 44px on a control that stands on its own */
  .btn { min-height: 44px; }
  .btn.small { min-height: 36px; }
  .filters .chip { padding: 9px 12px; }
  .drawer .dh .x { min-height: 38px; }

  /* the stat band goes two up; the column rule drops on the right tile of each pair */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 12px 14px; border-bottom: 1px solid var(--hair); }
  .tile:nth-child(2n) { border-right: none; }
  .tile:nth-last-child(-n+2) { border-bottom: none; }
  .tile .v { font-size: 21px; }
  .tile .label { overflow-wrap: anywhere; }

  /* queue rows stack: avatar, name and score on the first line, the stamps under them.
     The cells carry no classes of their own, so the name block is the one unclassed div
     and the ::after is a forced line break for the flex row. */
  .queue .qhead { display: none; }
  .queue .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 12px 16px; }
  .queue .row::after { content: ""; flex: 0 0 100%; height: 0; order: 4; }
  .queue .row > .avatar { order: 1; }
  .queue .row > div:not([class]) { order: 2; flex: 1 1 60px; min-width: 0; }
  .queue .row > .score { order: 3; margin-left: auto; }
  .queue .row > .chip, .queue .row > .when { order: 5; }
  .queue .row .nm, .queue .row .why { white-space: normal; overflow-wrap: anywhere; }
  .queue .row .when { text-align: left; }
  .queue .row .chev { display: none; }

  /* the drawer fills the screen and its own grids stack */
  .drawer { width: 100%; max-width: 100%; border-left: none; }
  .drawer .dh { padding: 12px 16px; }
  .drawer .db { padding: 16px; gap: 14px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv .k { padding-top: 8px; }
  .tl { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .tl > .d { grid-column: 1 / -1; }
  .rec { flex-wrap: wrap; padding: 12px 14px; }

  /* the library: the category rail sits above the cards, one card to a row */
  .lib { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .lcard { padding: 14px; }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain .node { border-right: none; border-bottom: 1px solid var(--hair); }
  .chain .node:last-child { border-bottom: none; }

  /* a table keeps a readable width and scrolls inside the box that holds it */
  .tbl { min-width: 420px; }

  /* long strings break rather than push the page wide */
  .card-h .d, .foot, .err, .ok, .label, .score, .rec .t { overflow-wrap: anywhere; }
  .chip, .btn { white-space: normal; }
}

/* ---------- C9 (9/14) Ask Signals: the panel ----------
   The same look as the account drawer (fixed, right, full height, 560px, one ink rule on
   its left edge) but its own classes and ids, so it opens on top of an open brief and
   never shares the body.open switch with it. The scrim and the panel sit above the help
   menu (60) and below the report modal (70). Colours are the tokens above, so the dark
   theme needs no rules of its own. Under 700px the panel takes the whole width. */
.ax-ask-scrim { position: fixed; inset: 0; background: rgba(19,26,38,0.28); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 64; }
.ax-ask-scrim.on { opacity: 1; pointer-events: auto; }
.ax-ask-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 94vw; background: var(--paper); border-left: 1px solid var(--rule); transform: translateX(100%); visibility: hidden; transition: transform .22s, visibility 0s linear .22s; z-index: 65; display: flex; flex-direction: column; }
.ax-ask-panel.on { transform: none; visibility: visible; transition: transform .22s, visibility 0s; }
.ax-ask-h { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 2px solid var(--rule); background: var(--card); flex: none; }
.ax-ask-h .t { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ax-ask-h .x { margin-left: auto; background: none; border: 1px solid var(--hair); padding: 5px 9px; cursor: pointer; color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ax-ask-h .x:hover { color: var(--ink); border-color: var(--rule); }
.ax-ask-intro { padding: 10px 24px; font-size: 12.5px; color: var(--dim); border-bottom: 1px solid var(--hair2); background: var(--inset); flex: none; }
.ax-ask-log { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.ax-ask-empty { color: var(--faint); font-size: 13px; padding: 24px 0; text-align: center; }
.ax-ask-t { display: flex; }
.ax-ask-t.me { justify-content: flex-end; }
.ax-ask-t.ans, .ax-ask-t.note { justify-content: flex-start; }
.ax-ask-b { max-width: 88%; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--hair); background: var(--card); color: var(--ink); overflow-wrap: anywhere; }
.ax-ask-t.me .ax-ask-b { background: var(--accent-bg); border-color: var(--accent-line); }
.ax-ask-t.ans .ax-ask-b { border-top: 2px solid var(--rule); }
.ax-ask-t.note .ax-ask-b { color: var(--dim); border-style: dashed; }
.ax-ask-b p { margin: 0; }
.ax-ask-b p + p, .ax-ask-b p + ul, .ax-ask-b ul + p, .ax-ask-b ul + ul { margin-top: 8px; }
.ax-ask-b ul { margin: 0; padding-left: 18px; }
.ax-ask-b li + li { margin-top: 3px; }
.ax-ask-f { flex: none; padding: 12px 24px 16px; border-top: 2px solid var(--rule); background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.ax-ask-l { font-size: 12px; font-weight: 600; color: var(--dim); }
.ax-ask-f textarea.in { resize: none; min-height: 58px; }
.ax-ask-a { display: flex; align-items: center; gap: 12px; }
.ax-ask-clear { background: none; border: none; padding: 0; font-family: var(--font-ui); font-size: 12.5px; color: var(--accent-ink); cursor: pointer; text-decoration: none; }
.ax-ask-clear:hover { text-decoration: underline; }
.ax-ask-foot { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.ax-ask-a .btn { flex: none; }
.ax-ask-a .btn:disabled { opacity: 0.6; cursor: default; }
.ax-ask-h .x:focus-visible, .ax-ask-clear:focus-visible, .ax-ask-a .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) {
  .ax-ask-panel { width: 100%; max-width: 100%; border-left: none; }
  .ax-ask-h { padding: 12px 16px; }
  .ax-ask-intro, .ax-ask-log { padding-left: 16px; padding-right: 16px; }
  .ax-ask-f { padding: 12px 16px 14px; }
  .ax-ask-h .x { min-height: 38px; }
  .ax-ask-b { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-ask-scrim, .ax-ask-panel { transition: none; }
}