/* ==========================================================================
   Vantage SDI · application styles
   Swiss Modernism 2.0 · zero radius · hairline rules · tabular data
   ========================================================================== */

:root{
  /* surface */
  --paper:#F4F2ED;
  --surface:#FBFAF7;
  --paper-2:#EAE7DF;
  --paper-3:#E1DDD2;
  --white:#FFFFFF;

  /* ink */
  --ink:#14130F;
  --ink-2:#3D3B35;
  --ink-3:#6A665C;
  /* A11Y-01: was #8E897D (3.12:1 on paper, 2.82:1 on paper-2 - both below the
     4.5:1 AA floor). #6C685D is the lightest warm grey that clears AA on BOTH
     surfaces (4.97 / 4.50). Accepted cost, recorded: the brightness step to
     --ink-3 narrows to ~4%, so the hint-vs-meta tier this token used to carry
     is effectively merged; separation now comes from size, weight and context
     (ink-4 is almost only small caps mono labels). Warm hue relation R>G>B
     kept. Design decision by the design owner, 2026-10-31. */
  --ink-4:#6C685D;

  /* rules */
  --rule:#D5D0C4;
  --rule-2:#BDB7A8;
  --rule-soft:#E3DFD4;

  /* signal */
  --accent:#CF3319;
  --accent-ink:#8F2210;
  --up:#1E6B4E;
  --down:#B0341B;
  --warn:#8A5A00;
  --info:#2F4E73;

  /* type */
  --f:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fm:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing 8px base */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* layout */
  --mast-h:54px;
  --sect-h:42px;
  --rail-w:352px;
  --pad-x:26px;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:220ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:.875rem;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse;width:100%}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

.mono{font-family:var(--fm);font-size:.625rem;line-height:1.45;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.mono-md{font-family:var(--fm);font-size:.75rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.num{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ============================ masthead ============================ */
.mast{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.mast-in{display:flex;align-items:center;gap:18px;height:var(--mast-h);padding-inline:22px}
.brand{display:inline-flex;align-items:baseline;gap:6px;font-weight:700;letter-spacing:-.035em;font-size:1rem;font-variation-settings:"wdth" 96}
.brand i{width:6px;height:6px;background:var(--accent);transform:translateY(-8px)}
.brand span{font-family:var(--fm);font-size:.5rem;letter-spacing:.14em;color:var(--ink-3);font-weight:500}

.ws{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-left:1px solid var(--rule);padding-left:18px}
.ws b{font-weight:600;color:var(--ink);letter-spacing:.06em}
.ws .sep{color:var(--rule-2)}
.pulse{width:5px;height:5px;background:var(--up);display:inline-block;border-radius:50%}

.mast-right{margin-left:auto;display:flex;align-items:center;gap:4px}
.cmd-trigger{
  display:flex;align-items:center;gap:10px;height:30px;min-width:230px;
  padding:0 9px;border:1px solid var(--rule-2);background:var(--surface);
  cursor:pointer;color:var(--ink-3);font-size:.75rem;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.cmd-trigger:hover{border-color:var(--ink);color:var(--ink-2);background:var(--white)}
.cmd-trigger .k{margin-left:auto;display:flex;gap:3px}
kbd{
  font-family:var(--fm);font-size:.5625rem;letter-spacing:.04em;
  border:1px solid var(--rule-2);background:var(--paper);padding:1px 4px;color:var(--ink-3);
}
.iconbtn{
  width:30px;height:30px;display:grid;place-items:center;background:transparent;
  border:1px solid transparent;cursor:pointer;color:var(--ink-2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  position:relative;
}
.iconbtn:hover{background:var(--white);border-color:var(--rule-2);color:var(--ink)}
.iconbtn .dot{position:absolute;top:5px;right:5px;width:4px;height:4px;background:var(--accent)}
.avatar{
  width:26px;height:26px;display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:var(--fm);font-size:.625rem;letter-spacing:.04em;margin-left:6px;cursor:pointer;
}

/* section bar */
.sections{position:sticky;top:var(--mast-h);z-index:55;background:var(--paper);border-bottom:1px solid var(--rule)}
.sections-in{display:flex;padding-inline:16px;overflow-x:auto;scrollbar-width:none}
.sections-in::-webkit-scrollbar{display:none}
.sections a{
  position:relative;padding:0 13px;height:var(--sect-h);display:inline-flex;align-items:center;
  font-size:.8125rem;color:var(--ink-3);white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.sections a:hover{color:var(--ink)}
.sections a[aria-current="page"]{color:var(--ink);font-weight:600}
.sections a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;background:var(--accent)}
.sections .count{
  font-family:var(--fm);font-size:.5625rem;margin-left:6px;color:var(--ink-4);
  border:1px solid var(--rule);padding:0 4px;line-height:1.5;
}
.sections a[aria-current="page"] .count{border-color:var(--rule-2);color:var(--ink-3)}

/* ============================ layout ============================ */
.cols{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);align-items:start;min-height:calc(100dvh - var(--mast-h) - var(--sect-h))}
.cols > .main{min-width:0;padding:26px var(--pad-x) 72px}
.cols > .rail{border-left:1px solid var(--rule);align-self:stretch;min-width:0;padding:26px 18px 72px;background:var(--paper)}
.rail-in{position:sticky;top:calc(var(--mast-h) + var(--sect-h) + 26px)}

.full{padding:0}
.canvas-page{display:grid;grid-template-columns:minmax(0,1fr);height:calc(100dvh - var(--mast-h) - var(--sect-h))}

/* page header */
.page-head{padding-bottom:18px;border-bottom:1px solid var(--ink);margin-bottom:22px}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--fm);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.eyebrow .sep{color:var(--rule-2)}
.eyebrow .live{color:var(--accent)}
.h-page{
  font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.08;letter-spacing:-.04em;font-weight:700;
  font-variation-settings:"wdth" 94;max-inline-size:34ch;text-wrap:balance;
}
.h-page em{font-style:normal;color:var(--accent)}
.lede{margin-top:10px;max-inline-size:68ch;color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.head-right{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.h-sec{font-size:1rem;letter-spacing:-.02em;font-weight:650;font-variation-settings:"wdth" 96}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.sec-head .note{color:var(--ink-3);font-size:.75rem;max-inline-size:44ch}
.stack{display:grid;gap:14px}
.stack-sm{display:grid;gap:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* ============================ controls ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  height:34px;padding:0 14px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 80ms;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-quiet{background:transparent;border-color:var(--rule-2);color:var(--ink-2)}
.btn-quiet:hover{background:var(--white);border-color:var(--ink);color:var(--ink)}
.btn-sm{height:28px;padding:0 10px;font-size:.75rem;font-weight:500}
.btn-xs{height:24px;padding:0 8px;font-size:.6875rem;font-weight:500;border-color:var(--rule-2);background:transparent;color:var(--ink-2)}
.btn-xs:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.quiet-link{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--ink-3);cursor:pointer;background:none;border:0;padding:0}
.quiet-link:hover{color:var(--accent)}
.quiet-link svg{transition:transform var(--dur) var(--ease)}
.quiet-link:hover svg{transform:translateX(2px)}

.seg{display:inline-flex;border:1px solid var(--rule-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{
  height:28px;padding:0 11px;background:transparent;border:0;border-right:1px solid var(--rule);
  font-size:.75rem;color:var(--ink-3);cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:background var(--dur),color var(--dur);
}
.seg button:last-child{border-right:0}
.seg button:is([aria-pressed="true"],[aria-selected="true"]){background:var(--ink);color:var(--paper)}
.seg button:hover:not([aria-pressed="true"]):not([aria-selected="true"]){background:var(--white);color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.field{display:grid;gap:6px}
.field label{font-family:var(--fm);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
input[type="text"],input[type="search"],input[type="email"],select,textarea{
  height:32px;border:1px solid var(--rule-2);background:var(--white);padding:0 9px;
  font-family:var(--f);font-size:.8125rem;color:var(--ink);width:100%;
}
textarea{height:auto;padding:8px 9px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}

.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{margin-left:auto}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;
  border:1px solid var(--rule-2);background:var(--surface);font-size:.75rem;color:var(--ink-2);cursor:pointer;
  transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .x{color:var(--ink-4);font-family:var(--fm);font-size:.625rem}
.chip b{font-weight:600}

/* ============================ tags / badges ============================ */
.tag{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:.5625rem;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 5px;border:1px solid var(--rule-2);color:var(--ink-3);
  white-space:nowrap;line-height:1.5;
}
.tag-acc{border-color:var(--accent);color:var(--accent-ink);background:rgba(207,51,25,.05)}
.tag-up{border-color:rgba(30,107,78,.4);color:var(--up);background:rgba(30,107,78,.05)}
.tag-down{border-color:rgba(176,52,27,.35);color:var(--down);background:rgba(176,52,27,.05)}
.tag-warn{border-color:rgba(138,90,0,.35);color:var(--warn);background:rgba(138,90,0,.05)}
.tag-info{border-color:rgba(47,78,115,.3);color:var(--info);background:rgba(47,78,115,.04)}
.tag-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag-lg{font-size:.625rem;padding:3px 7px}

.delta{font-family:var(--fm);font-size:.75rem;display:inline-flex;align-items:center;gap:3px}
.delta.up{color:var(--up)}
.delta.down{color:var(--down)}
.delta.flat{color:var(--ink-3)}

/* confidence: label + segmented meter, never colour alone */
.conf{display:inline-flex;align-items:center;gap:7px}
.conf .lbl{font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.conf .bars{display:inline-flex;gap:2px}
.conf .bars i{width:4px;height:9px;background:var(--rule)}
.conf[data-level="high"] .bars i:nth-child(-n+4){background:var(--ink)}
.conf[data-level="med"] .bars i:nth-child(-n+3){background:var(--ink-3)}
.conf[data-level="low"] .bars i:nth-child(-n+1){background:var(--rule-2)}
.conf[data-level="none"] .bars i{background:transparent;border:1px solid var(--rule-2);height:7px}

/* 10-segment score meter */
.meter{display:inline-flex;gap:2px;vertical-align:middle}
.meter i{width:100%;min-width:2px;height:5px;background:var(--rule-soft);flex:1}
.meter i.on{background:var(--ink)}
.meter.acc i.on{background:var(--accent)}
.meter.up i.on{background:var(--up)}
.meter.wide{display:flex;width:100%}
.meter.wide i{height:6px}

/* source badge */
.src{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--rule);padding:1px 5px;background:var(--surface);white-space:nowrap}
.src .d{width:4px;height:4px;background:var(--up)}
.src[data-fresh="stale"] .d{background:var(--warn)}
.src[data-fresh="cache"] .d{background:var(--ink-4)}

/* ============================ cards ============================ */
.card{border:1px solid var(--rule);background:var(--surface);padding:16px}
.card-tight{padding:12px}
.card-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.card-h .t{font-size:.9375rem;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.card-h .meta{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.card p{color:var(--ink-2);font-size:.8125rem;line-height:1.5}
.card-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-soft);margin-top:12px;padding-top:10px}
.card-kv > div{padding-right:10px}
.card-kv .k{font-family:var(--fm);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.card-kv .v{font-family:var(--fm);font-size:.8125rem;letter-spacing:-.01em}

/* decision row: rank + body + score */
.dec{border:1px solid var(--rule);background:var(--surface);display:grid;grid-template-columns:44px minmax(0,1fr) 152px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.dec:hover{border-color:var(--rule-2);background:var(--white)}
.dec[aria-selected="true"]{border-color:var(--ink);background:var(--white)}
.dec .rank{display:flex;align-items:flex-start;justify-content:center;padding-top:16px;border-right:1px solid var(--rule-soft);font-family:var(--fm);font-size:.75rem;color:var(--ink-4)}
.dec .body{padding:14px 16px;min-width:0}
.dec .side{border-left:1px solid var(--rule-soft);padding:14px 14px;display:grid;gap:8px;align-content:start}
.dec .title{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dec .title h3{font-size:.9375rem;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.dec .why{margin-top:7px;color:var(--ink-2);font-size:.8125rem;line-height:1.5;max-inline-size:70ch}
.dec .facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;align-items:center}
.dec .act{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}

/* demand card */
.dcard{border:1px solid var(--rule);background:var(--surface);padding:15px;display:grid;gap:11px;cursor:pointer;transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease)}
.dcard:hover{border-color:var(--ink);background:var(--white)}
.dcard .top{display:flex;align-items:baseline;gap:10px}
.dcard h3{font-size:.9375rem;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.dcard .summary{font-size:.8125rem;color:var(--ink-2);line-height:1.5;min-height:2.4em}
.dcard .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--rule-soft);padding-top:10px}
.dcard .figs .k{font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.dcard .figs .v{font-family:var(--fm);font-size:.875rem}

/* ============================ tables ============================ */
.table-scroll{overflow-x:auto;border:1px solid var(--rule);background:var(--surface)}
table.tb{font-size:.8125rem;min-width:680px}
table.tb thead th{
  position:sticky;top:0;background:var(--paper-2);text-align:left;
  font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:8px 12px;border-bottom:1px solid var(--rule-2);white-space:nowrap;font-weight:500;
}
table.tb thead th.sortable{cursor:pointer;user-select:none}
table.tb thead th.sortable:hover{color:var(--ink)}
table.tb thead th .ar{opacity:.35;margin-left:4px}
table.tb thead th[aria-sort] .ar{opacity:1;color:var(--accent)}
table.tb tbody td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.tb tbody tr:last-child td{border-bottom:0}
table.tb tbody tr:hover{background:var(--white)}
table.tb tbody tr[aria-selected="true"]{background:rgba(207,51,25,.05)}
table.tb .r{text-align:right}
table.tb .c{text-align:center}
table.tb td.name{font-weight:550;color:var(--ink)}
table.tb td.dim{color:var(--ink-3)}
.cbx{width:13px;height:13px;border:1px solid var(--rule-2);background:var(--white);display:inline-block;cursor:pointer;position:relative}
.cbx[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.cbx[aria-checked="true"]::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border-right:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:rotate(40deg)}

/* ============================ charts ============================ */
.spark{display:block;width:100%;height:auto;overflow:visible}
.spark path.line{fill:none;stroke:var(--ink);stroke-width:1.4}
.spark path.line.acc{stroke:var(--accent)}
.spark path.area{fill:rgba(20,19,15,.06);stroke:none}
.spark path.area.acc{fill:rgba(207,51,25,.08)}
.spark line.base{stroke:var(--rule-2);stroke-width:1;stroke-dasharray:2 3}
.spark circle{fill:var(--accent)}

.chart{border:1px solid var(--rule);background:var(--surface);padding:16px}
.chart-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.chart-title{font-size:.875rem;font-weight:600;letter-spacing:-.01em}
.chart-note{font-size:.75rem;color:var(--ink-3);margin-top:3px;max-inline-size:56ch}
.chart-body{margin-top:14px;position:relative}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid var(--rule-soft)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.chart-legend i{width:12px;height:2px;background:var(--ink)}
.chart-legend i.acc{background:var(--accent)}
.chart-legend i.dash{background:repeating-linear-gradient(90deg,var(--rule-2) 0 3px,transparent 3px 6px)}

.bars{display:grid;gap:9px}
.bars.wide .bar-row{grid-template-columns:232px minmax(0,1fr) 50px}
.bar-row{display:grid;grid-template-columns:132px minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:.8125rem}
.bar-row .name{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .track{height:14px;background:var(--paper-2);position:relative;overflow:hidden}
.bar-row .fill{position:absolute;inset:0 auto 0 0;background:var(--ink);transform-origin:left;animation:grow 620ms var(--ease) both}
.bar-row .fill.acc{background:var(--accent)}
.bar-row .fill.ghost{background:var(--rule-2)}
.bar-row .val{text-align:right;font-family:var(--fm);font-size:.75rem;color:var(--ink-2)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================ feed ============================ */
.feed{border-top:1px solid var(--ink)}
.feed-row{display:grid;grid-template-columns:132px 26px minmax(0,1fr) 96px;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule);text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;transition:background var(--dur)}
.feed-row:hover{background:var(--surface)}
.feed-row .when{font-family:var(--fm);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.feed-row .mark{width:7px;height:7px;background:var(--ink-4)}
.feed-row.sev-high .mark{background:var(--accent)}
.feed-row.sev-med .mark{background:var(--warn)}
/* `change_events.severity` allows 'critical' as well as 'low'|'med'|'high'.
   The feed renders severity as a colour, so an unmapped value would render as
   no severity at all - which reads as "this change is routine". */
.feed-row.sev-critical .mark{background:var(--down);box-shadow:0 0 0 2px rgba(176,52,27,.18)}
.feed-row .body-t{display:block;font-size:.875rem;letter-spacing:-.01em;color:var(--ink)}
.feed-row .body-s{display:block;font-size:.75rem;color:var(--ink-3);margin-top:2px}
.feed-row .right{text-align:right;display:flex;justify-content:flex-end;gap:6px}

/* ============================ evidence ============================ */
.ev{border:1px solid var(--rule);background:var(--surface)}
.ev-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--rule)}
.ev-h .t{font-size:.8125rem;font-weight:650}
.ev-h .meta{margin-left:auto}
.ev-sec{padding:13px 14px;border-bottom:1px solid var(--rule-soft)}
.ev-sec:last-child{border-bottom:0}
.ev-sec .k{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.ev-sec .k .sq{width:6px;height:6px;background:var(--ink-3)}
.ev-sec.for .k .sq{background:var(--up)}
.ev-sec.against .k .sq{background:var(--accent)}
.ev-sec.unknown .k .sq{background:var(--warn)}
.ev-li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;padding:5px 0;font-size:.8125rem;color:var(--ink-2);line-height:1.5}
.ev-li .b{color:var(--rule-2);font-family:var(--fm);font-size:.625rem;line-height:1.7}
.ev-li .srcs{margin-top:4px;display:flex;gap:5px;flex-wrap:wrap}
.ev-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:var(--paper-2);border-top:1px solid var(--rule);font-family:var(--fm);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* reasoning panel */
.reason{border:1px solid var(--rule);background:var(--surface)}
.reason-h{padding:11px 14px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:8px}
.reason-b{padding:13px 14px;display:grid;gap:12px}
.reason-b .lbl{font-family:var(--fm);font-size:.5625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.reason-b p{font-size:.8125rem;color:var(--ink-2);line-height:1.55}
.reason-r{display:grid;grid-template-columns:14px minmax(0,1fr);gap:7px;font-size:.8125rem;color:var(--ink-2);line-height:1.5}
.reason-r .b{font-family:var(--fm);font-size:.625rem;color:var(--ink-4);line-height:1.6}

/* ============================ score decomposition ============================ */
.score-big{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.sum-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;border-bottom:1px solid var(--rule);padding-bottom:20px}
@media (max-width:900px){.sum-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
.stat-row .stat-cell:first-child{padding-left:0}
.score-big .n{font-family:var(--fm);font-size:2.75rem;line-height:.9;letter-spacing:-.04em;font-weight:500}
.score-big .n small{font-size:1rem;color:var(--ink-4);letter-spacing:0}
.score-big .lbl{font-family:var(--fm);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:5px}

.decomp{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
.decomp .d-row{display:grid;grid-template-columns:1fr 100px 40px;gap:12px;align-items:center;background:var(--surface);padding:9px 12px}
.decomp .d-row .k{font-size:.8125rem;color:var(--ink-2)}
.decomp .d-row .k small{font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);letter-spacing:.06em;margin-left:6px}
.decomp .d-row .v{font-family:var(--fm);font-size:.75rem;text-align:right;color:var(--ink-2)}
.decomp .d-row.total{background:var(--ink);color:var(--paper)}
.decomp .d-row.total .k,.decomp .d-row.total .v{color:var(--paper)}
.decomp .d-row.total .k small{color:rgba(244,242,237,.6)}

.formula{border:1px solid var(--rule);background:var(--paper-2);padding:12px 14px;font-family:var(--fm);font-size:.6875rem;line-height:1.9;color:var(--ink-2);overflow-x:auto}
.formula b{color:var(--ink);font-weight:600}
.formula .op{color:var(--ink-4)}

/* ============================ graph ============================ */
.graph-wrap{position:relative;background:var(--paper);border:1px solid var(--rule);overflow:hidden;height:100%}
.graph-tools{position:absolute;top:12px;left:12px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--rule);padding:6px}
.graph-legend{position:absolute;left:12px;bottom:12px;z-index:3;background:var(--paper);border:1px solid var(--rule);padding:9px 11px;display:grid;gap:5px}
.graph-legend .row{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.graph-legend .sw{width:8px;height:8px;border:1px solid var(--ink)}
.graph-legend .sw.d{background:var(--ink)}
.graph-legend .sw.p{background:var(--paper)}
.graph-legend .sw.a{background:var(--accent);border-color:var(--accent)}
.graph-zoom{position:absolute;right:12px;top:12px;z-index:3;display:grid;border:1px solid var(--rule);background:var(--paper)}
.graph-zoom button{width:28px;height:28px;display:grid;place-items:center;background:transparent;border:0;border-bottom:1px solid var(--rule);cursor:pointer;color:var(--ink-2)}
.graph-zoom button:last-child{border-bottom:0}
.graph-zoom button:hover{background:var(--white)}
svg.g .edge{stroke:var(--rule-2);stroke-width:1;fill:none}
svg.g .edge.overlap{stroke:var(--accent);stroke-dasharray:3 3;stroke-width:1.1}
svg.g .edge.active{stroke:var(--ink);stroke-width:1.6}
svg.g .node{cursor:pointer}
svg.g .node rect,svg.g .node circle{transition:fill var(--dur),stroke var(--dur)}
svg.g .node text{font-family:var(--fm);font-size:9px;letter-spacing:.02em;fill:var(--ink-2);pointer-events:none}
svg.g .node.demand rect{fill:var(--paper);stroke:var(--ink)}
svg.g .node.page rect{fill:var(--white);stroke:var(--rule-2)}
svg.g .node.product rect{fill:var(--paper-2);stroke:var(--rule-2)}
svg.g .node.cluster rect{fill:var(--ink);stroke:var(--ink)}
svg.g .node.cluster text{fill:var(--paper)}
svg.g .node.orphan rect{stroke:var(--accent);stroke-dasharray:3 2}
svg.g .node:hover rect,svg.g .node:hover circle{stroke:var(--accent)}
svg.g .node.sel rect{stroke:var(--accent);stroke-width:1.6}
svg.g .node.dim{opacity:.28}

/* ============================ drawer ============================ */
.scrim{position:fixed;inset:0;background:rgba(20,19,15,.32);z-index:80;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);background:var(--paper);
  border-left:1px solid var(--ink);z-index:90;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 260ms var(--ease);
}
.drawer.on{transform:translateX(0)}
.drawer:focus{outline:none}
.drawer.wide{width:min(720px,96vw)}
.drawer-h{padding:14px 18px;border-bottom:1px solid var(--ink);display:flex;align-items:flex-start;gap:12px;flex-shrink:0}
.drawer-h .t{font-size:1rem;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.drawer-h .s{margin-top:3px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.drawer-b{padding:16px 18px;overflow-y:auto;flex:1;display:grid;gap:16px;align-content:start}
.drawer-f{border-top:1px solid var(--rule);padding:11px 18px;display:flex;gap:8px;align-items:center;flex-shrink:0;background:var(--paper)}

/* ============================ command palette ============================ */
.pal-scrim{position:fixed;inset:0;background:rgba(20,19,15,.28);z-index:100;display:none}
.pal-scrim.on{display:block}
.pal{
  position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(640px,94vw);
  background:var(--paper);border:1px solid var(--ink);z-index:101;display:none;
  box-shadow:0 24px 48px -24px rgba(20,19,15,.4);
}
.pal.on{display:block;animation:palIn 180ms var(--ease)}
@keyframes palIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.pal-in input{border:0;background:transparent;height:26px;font-size:.9375rem;padding:0;letter-spacing:-.01em}
/* A11Y-03: the programmatic focus on open stays quiet (:not(:focus-visible)),
   but a keyboard Tab into the field falls through to the global input:focus
   ring. Same specificity as the old line, so the open animation is visually
   unchanged while the keyboard outline comes back. */
.pal-in input:focus:not(:focus-visible){outline:none}
.pal-in .hint{font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.pal-list{max-height:min(420px,52vh);overflow-y:auto;padding:6px 0}
.pal-group{font-family:var(--fm);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:8px 14px 5px}
.pal-item{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;border-left:2px solid transparent}
.pal-item .ic{width:14px;height:14px;display:grid;place-items:center;color:var(--ink-4);flex-shrink:0}
.pal-item .t{font-size:.8125rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item .m{margin-left:auto;font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);white-space:nowrap}
.pal-item[aria-selected="true"]{background:var(--paper-2);border-left-color:var(--accent)}
.pal-item:hover{background:var(--surface)}
.pal-foot{border-top:1px solid var(--rule);padding:8px 14px;display:flex;gap:14px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}

/* ============================ AI analyst ============================ */
.ai-panel{position:fixed;top:var(--mast-h);right:0;bottom:0;width:min(420px,94vw);background:var(--paper);border-left:1px solid var(--ink);z-index:70;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 260ms var(--ease)}
.ai-panel.on{transform:translateX(0)}
.ai-h{padding:11px 14px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:9px;flex-shrink:0}
.ai-h .t{font-size:.8125rem;font-weight:650}
.ai-h .ctx{font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);padding:1px 5px}
.ai-log{flex:1;overflow-y:auto;padding:14px;display:grid;gap:12px;align-content:start}
.ai-msg{border-left:2px solid var(--rule-2);padding:2px 0 2px 11px}
.ai-msg.user{border-left-color:var(--ink);margin-left:26px}
.ai-msg .who{font-family:var(--fm);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.ai-msg p{font-size:.8125rem;line-height:1.55;color:var(--ink-2)}
.ai-msg p + p{margin-top:7px}
.ai-msg ul{display:grid;gap:5px;margin-top:7px}
.ai-msg li{font-size:.8125rem;color:var(--ink-2);display:grid;grid-template-columns:12px 1fr;gap:6px;line-height:1.5}
.ai-msg li .b{font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);line-height:1.7}
.ai-cite{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.ai-sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.ai-sugg button{font-size:.6875rem;border:1px solid var(--rule-2);background:var(--surface);padding:4px 8px;cursor:pointer;color:var(--ink-2);text-align:left}
.ai-sugg button:hover{border-color:var(--ink);color:var(--ink)}
.ai-in{border-top:1px solid var(--rule);padding:10px 14px;display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
.ai-in textarea{min-height:38px;max-height:110px;font-size:.8125rem}
.ai-in textarea:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ai-panel{box-shadow:-24px 0 48px -34px rgba(20,19,15,.28)}
.ai-disclaimer{padding:0 14px 9px;font-family:var(--fm);font-size:.5rem;letter-spacing:.06em;color:var(--ink-4);text-transform:uppercase}

/* ============================ toast ============================ */
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:120;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:var(--paper);padding:9px 14px;display:flex;align-items:center;gap:10px;
  font-size:.8125rem;box-shadow:0 8px 20px -10px rgba(0,0,0,.5);animation:toastIn 220ms var(--ease);
  pointer-events:auto;max-width:min(520px,92vw);
}
.toast .undo{font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);border-bottom:1px solid rgba(244,242,237,.4);cursor:pointer;background:none;border:0;border-bottom:1px solid rgba(244,242,237,.4);padding:0}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================ states ============================ */
.empty{border:1px dashed var(--rule-2);padding:28px;text-align:center;background:var(--surface)}
.empty .t{font-size:.9375rem;font-weight:600;margin-bottom:6px}
.empty p{color:var(--ink-3);font-size:.8125rem;max-inline-size:46ch;margin-inline:auto}
.empty ul{margin:12px auto 0;max-inline-size:40ch;text-align:left;display:grid;gap:5px}
.empty li{font-size:.8125rem;color:var(--ink-2);display:grid;grid-template-columns:12px 1fr;gap:7px}
.empty li .b{color:var(--rule-2);font-family:var(--fm);font-size:.625rem}

.skel{background:linear-gradient(90deg,var(--paper-2) 0%,var(--paper-3) 50%,var(--paper-2) 100%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
.skel-line{height:10px;margin-bottom:8px}

.loading-stages{border:1px solid var(--rule);background:var(--surface);padding:18px;display:grid;gap:9px;max-width:460px}
.stage{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:.6875rem;color:var(--ink-4);letter-spacing:.02em}
.stage .bx{width:9px;height:9px;border:1px solid var(--rule-2)}
.stage.done{color:var(--ink-2)}
.stage.done .bx{background:var(--ink);border-color:var(--ink)}
.stage.active{color:var(--ink)}
.stage.active .bx{border-color:var(--accent);animation:blink 900ms steps(2) infinite}
@keyframes blink{50%{background:var(--accent)}}

.error-box{border:1px solid var(--accent);background:rgba(207,51,25,.04);padding:12px 14px}
.error-box .t{font-size:.8125rem;font-weight:650;color:var(--accent-ink);display:flex;align-items:center;gap:7px}
.error-box p{font-size:.8125rem;color:var(--ink-2);margin-top:4px;line-height:1.5}
.error-box .acts{margin-top:9px;display:flex;gap:8px}

/* ============================ misc ============================ */
.kv-list{display:grid;gap:7px}
.kv-list .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--rule-soft);font-size:.8125rem}
.kv-list .row:last-child{border-bottom:0;padding-bottom:0}
.kv-list .k{color:var(--ink-3);font-size:.75rem}
.kv-list .v{font-family:var(--fm);font-size:.75rem;color:var(--ink)}

.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.stat-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-cell{padding:12px 14px 14px 0;border-right:1px solid var(--rule)}
.stat-cell:last-child{border-right:0}
.stat-cell .k{font-family:var(--fm);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
.stat-cell .v{font-family:var(--fm);font-size:1.25rem;letter-spacing:-.03em;line-height:1.1}
.stat-cell .v small{font-size:.6875rem;color:var(--ink-4);letter-spacing:0}
.stat-cell .m{margin-top:4px;display:flex;align-items:center;gap:7px;font-size:.6875rem;color:var(--ink-3)}

.timeline{display:grid;gap:0}
.tl-row{display:grid;grid-template-columns:44px 14px minmax(0,1fr);gap:10px;align-items:start;padding:0 0 13px;position:relative}
.tl-row::before{content:"";position:absolute;left:51px;top:9px;bottom:-9px;width:1px;background:var(--rule-2);z-index:0}
.tl-row:last-child::before{display:none}
.tl-row .when{font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);letter-spacing:.05em;padding-top:2px;text-align:right;position:relative;z-index:1}
.tl-row .dot{width:7px;height:7px;background:var(--paper);border:1px solid var(--ink-2);margin-left:-4px;margin-top:4px;z-index:2;position:relative}
.tl-row.acc .dot{background:var(--accent);border-color:var(--accent)}
.tl-row .what{font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.tl-row .what b{font-weight:600;color:var(--ink)}

.pill-list{display:flex;gap:5px;flex-wrap:wrap}
.coverage-dot{width:7px;height:7px;display:inline-block;border:1px solid var(--ink)}
.coverage-dot.full{background:var(--ink)}
.coverage-dot.partial{background:var(--paper);border-color:var(--ink)}
.coverage-dot.gap{border-style:dashed;border-color:var(--rule-2)}

.hr{height:1px;background:var(--rule);border:0;margin:0}
.section-block{margin-top:30px}
.section-block:first-child{margin-top:0}
.rail-sec{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.rail-sec:last-child{border-bottom:0;margin-bottom:0}
.rail-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.rail-h .t{font-family:var(--fm);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.bubble-note{font-size:.75rem;color:var(--ink-3);line-height:1.5}
.muted{color:var(--ink-3)}
.tiny{font-size:.6875rem;line-height:1.45}
.nowrap{white-space:nowrap}

/* scatter */
.scatter{position:relative;border:1px solid var(--rule);background:var(--surface)}
.scatter svg{display:block;width:100%;height:auto}
.scatter .ax{stroke:var(--rule);stroke-width:1}
.scatter .ax-lbl{font-family:var(--fm);font-size:8px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-4)}
.scatter .pt{cursor:pointer}
.scatter .pt circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.2;transition:fill var(--dur),stroke var(--dur),r 120ms}
.scatter .pt:hover circle{stroke:var(--accent);stroke-width:2}
.scatter .pt.sel circle{fill:var(--accent);stroke:var(--accent)}
.scatter .pt.sel text{fill:var(--accent-ink)}
.scatter .pt text{font-family:var(--fm);font-size:7.5px;fill:var(--ink-3);pointer-events:none}
.scatter .gridline{stroke:var(--rule-soft);stroke-width:1}
.scatter .quad{font-family:var(--fm);font-size:8px;letter-spacing:.1em;text-transform:uppercase;fill:var(--rule-2)}

/* radar */
.radar svg{width:100%;max-width:280px;height:auto}
.radar .ring{fill:none;stroke:var(--rule)}
.radar .spoke{stroke:var(--rule);stroke-width:1}
.radar .them{fill:rgba(20,19,15,.08);stroke:var(--ink-3);stroke-width:1}
.radar .us{fill:rgba(207,51,25,.12);stroke:var(--accent);stroke-width:1.4}
.radar .lbl{font-family:var(--fm);font-size:8px;letter-spacing:.05em;text-transform:uppercase;fill:var(--ink-3)}

/* ============================ responsive ============================ */
@media (max-width:1280px){
  :root{--rail-w:308px}
  .dec{grid-template-columns:40px minmax(0,1fr) 136px}
}
@media (max-width:1120px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .cols > .rail{display:none}
  .rail-mobile{display:block !important}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--pad-x:18px}
  .ws{display:none}
  .cmd-trigger{min-width:0;padding:0 8px}
  .cmd-trigger span.ph{display:none}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .dec{grid-template-columns:minmax(0,1fr)}
  .dec .rank{display:none}
  .dec .side{border-left:0;border-top:1px solid var(--rule-soft);grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-kv{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-cell:nth-child(2){border-right:0}
  .stat-cell{border-bottom:1px solid var(--rule);padding-left:0}
  .feed-row{grid-template-columns:minmax(0,1fr) 80px;gap:8px}
  .feed-row .when{grid-column:1 / -1;order:-1}
  .feed-row .mark{display:none}
  .bar-row{grid-template-columns:100px minmax(0,1fr) 46px}
  .bars.wide .bar-row{grid-template-columns:140px minmax(0,1fr) 42px}
  .decomp .d-row{grid-template-columns:1fr 76px 34px;gap:8px}
  .bubble-note{display:none}

  /* the graph is a 4-column spatial layout, so it cannot reflow. Below 900px
     it scrolls horizontally at a legible minimum width instead of shrinking
     node labels into illegibility. */
  .canvas-page{height:auto;min-height:calc(100dvh - var(--mast-h) - var(--sect-h))}
  .graph-wrap{height:calc(100dvh - var(--mast-h) - var(--sect-h) - 24px);overflow:auto}
  .graph-wrap svg.g{min-width:880px}
}
@media (max-width:640px){
  .mast-in{padding-inline:14px;gap:10px}
  .mast-right .iconbtn.opt{display:none}
  .sections-in{padding-inline:8px}
  .sections a{padding:0 10px;font-size:.75rem}
  .sections .count{display:none}
  .drawer{width:100vw}
  .ai-panel{top:0;width:100vw}
  .pal{top:0;width:100vw;height:100dvh}
  .pal-list{max-height:none;height:calc(100dvh - 106px)}
  .h-page{font-size:1.375rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   ADDENDUM 1 · organisation chrome, new business pages, six data states
   Covers DATA_MODEL_AND_DATABASE, PAGE_FUNCTIONS_AND_UX, page-design and
   USER_SYSTEM_AUTH_BILLING_AND_UX. Appended rather than interleaved so the
   original token order stays intact.
   ========================================================================== */

/* ---------- workspace switcher popover ---------- */
.ws-pop{
  position:absolute;top:calc(100% + 1px);left:132px;width:min(440px,94vw);
  background:var(--paper);border:1px solid var(--ink);z-index:70;
  box-shadow:0 26px 44px -32px rgba(20,19,15,.42);
}
.sw-head{padding:12px 14px;border-bottom:1px solid var(--ink)}
.sw-org{display:flex;align-items:baseline;gap:8px;font-size:.9375rem;font-weight:650;letter-spacing:-.015em}
.sw-org .mono{color:var(--ink-3)}
.sw-ws{margin-top:3px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sw-search{padding:8px 14px;border-bottom:1px solid var(--rule)}
.sw-search input{height:28px;font-size:.8125rem}
.sw-list{max-height:286px;overflow-y:auto;padding:3px 0}
.sw-group{font-family:var(--fm);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);padding:10px 14px 5px}
.sw-item{
  display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;align-items:center;
  width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;
  padding:7px 14px;cursor:pointer;
}
.sw-item:hover{background:var(--surface);border-left-color:var(--ink)}
.sw-item[aria-current="true"]{background:var(--paper-2);border-left-color:var(--accent)}
.sw-item .ic{font-size:.5rem;color:var(--accent);line-height:1}
.sw-item[aria-current="false"] .ic{color:var(--rule-2)}
.sw-item .t{display:block;font-size:.8125rem;color:var(--ink)}
.sw-item .t small{display:block;font-family:var(--fm);font-size:.5625rem;letter-spacing:.05em;color:var(--ink-4);margin-top:2px}
.sw-item .r{font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.sw-foot{display:flex;gap:6px;padding:9px 14px;border-top:1px solid var(--rule);background:var(--surface)}

/* ---------- notification centre ---------- */
.np-pop{
  position:absolute;top:calc(100% + 1px);right:52px;width:min(420px,94vw);
  background:var(--paper);border:1px solid var(--ink);z-index:70;
  box-shadow:0 26px 44px -32px rgba(20,19,15,.42);
}
.np-head{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--ink)}
.np-head .t{font-size:.8125rem;font-weight:650}
.np-head .mono{color:var(--ink-3)}
.np-policy{padding:8px 14px;border-bottom:1px solid var(--rule);background:var(--paper-2);font-size:.6875rem;color:var(--ink-3);line-height:1.45}
.np-list{max-height:min(440px,60vh);overflow-y:auto}
.np-item{display:grid;grid-template-columns:6px minmax(0,1fr);gap:10px;padding:11px 14px;border-bottom:1px solid var(--rule-soft)}
.np-item:last-child{border-bottom:0}
.np-item .mk{width:6px;height:6px;margin-top:6px;background:var(--ink-4)}
.np-item .mk[data-sev="high"]{background:var(--accent)}
.np-item .mk[data-sev="med"]{background:var(--warn)}
.np-item .t{font-size:.8125rem;font-weight:550;line-height:1.35}
.np-item .s{font-size:.75rem;color:var(--ink-3);margin-top:3px;line-height:1.45}
.np-item .m{margin-top:6px;font-family:var(--fm);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.np-item .a{display:flex;gap:6px;margin-top:8px;grid-column:2}
.np-item.read{opacity:.5}
.np-item:hover{background:var(--surface)}

/* ---------- account menu ---------- */
.acct-pop{
  position:absolute;top:calc(100% + 1px);right:14px;width:min(290px,92vw);
  background:var(--paper);border:1px solid var(--ink);z-index:70;
  box-shadow:0 26px 44px -32px rgba(20,19,15,.42);
}
.acct-head{padding:12px 14px;border-bottom:1px solid var(--ink)}
.acct-head .n{font-size:.875rem;font-weight:650;letter-spacing:-.01em}
.acct-head .e{font-family:var(--fm);font-size:.5625rem;color:var(--ink-3);margin-top:2px}
.acct-plan{padding:9px 14px;border-bottom:1px solid var(--rule);background:var(--surface)}
.acct-plan .row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.acct-plan .row b{color:var(--ink);letter-spacing:.04em}
.acct-plan .bar{height:4px;background:var(--rule-soft);margin-top:6px;position:relative;overflow:hidden}
.acct-plan .bar i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.acct-list{padding:4px 0}
.acct-list a,.acct-list button{display:flex;width:100%;gap:8px;align-items:center;padding:7px 14px;font-size:.8125rem;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink-2)}
.acct-list a:hover,.acct-list button:hover{background:var(--surface);color:var(--ink)}
.acct-list .k{margin-left:auto;font-family:var(--fm);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.acct-list .sep{height:1px;background:var(--rule-soft);margin:4px 0}
.acct-foot{border-top:1px solid var(--rule);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ---------- mobile navigation ---------- */
.mnav{display:none}

/* ---------- saved views ---------- */
.saved-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0 0 14px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.saved-bar > .mono{color:var(--ink-4);margin-right:2px}
.saved-bar .chip .c{font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);border-left:1px solid var(--rule);padding-left:5px}
.saved-bar .chip.quiet{border-style:dashed;color:var(--ink-3)}
.saved-bar .spacer{margin-left:auto}

/* ---------- plans and comparison ---------- */
.plan-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.plan-card{border:1px solid var(--rule);background:var(--surface);padding:11px}
.plan-card.on{border-color:var(--ink);background:var(--white);box-shadow:inset 0 2px 0 0 var(--accent)}
.plan-card .mono{color:var(--ink-3);margin-bottom:5px}
.plan-card .price{font-family:var(--fm);font-size:1.25rem;letter-spacing:-.03em;line-height:1.1}
.plan-card .price small{font-size:.625rem;color:var(--ink-4);letter-spacing:0}
.plan-card .tiny{margin-top:6px}

.cmp{border:1px solid var(--rule);background:var(--surface)}
.cmp-h,.cmp-r{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:10px;padding:8px 11px;font-size:.8125rem}
.cmp-h{background:var(--paper-2);border-bottom:1px solid var(--rule);font-family:var(--fm);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.cmp-r{border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.cmp-r:last-child{border-bottom:0}
.cmp-r .k{color:var(--ink-3);font-size:.75rem}
.cmp-r.win .b{font-weight:650;color:var(--accent-ink)}

/* ---------- six data states ---------- */
.state-banner{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--rule-2);background:var(--surface);padding:9px 12px;margin-bottom:16px}
.state-banner .mk{flex-shrink:0;width:15px;height:15px;display:grid;place-items:center;border:1px solid var(--rule-2);font-family:var(--fm);font-size:.5rem;margin-top:1px}
.state-banner .t{font-size:.8125rem;font-weight:600;line-height:1.35}
.state-banner .s{font-size:.75rem;color:var(--ink-3);margin-top:2px;line-height:1.45}
.state-banner .btn{margin-left:auto;flex-shrink:0}
.state-banner.stale{border-color:rgba(138,90,0,.45);background:rgba(138,90,0,.05)}
.state-banner.stale .mk{border-color:var(--warn);color:var(--warn)}
.state-banner.partial{border-color:rgba(47,78,115,.35);background:rgba(47,78,115,.04)}
.state-banner.partial .mk{border-color:var(--info);color:var(--info)}
/* BILL-04: the dunning banner carries the accent in the mark and the title
   text only - the surface stays the normal one, per the design rule that a
   failed payment is a fact to read, not an alarm that repaints the page. */
.state-banner.dunning .mk{border-color:var(--accent);color:var(--accent)}
.state-banner.dunning .s a{color:var(--accent)}
.empty.denied{border-color:var(--rule-2);background:var(--surface)}
.empty.locked{border-color:var(--accent);background:rgba(207,51,25,.04)}
.empty.locked .t{color:var(--accent-ink)}

.skel{padding:6px 0}
.skel .skel-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) 56px;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.skel .skel-row .b{display:block;height:10px;background:linear-gradient(90deg,var(--paper-2) 0%,var(--paper-3) 50%,var(--paper-2) 100%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}

/* ---------- provenance chain ---------- */
.prov{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));border:1px solid var(--rule);background:var(--surface)}
.prov-step,.prov-ev{min-width:0;display:grid;gap:2px;padding:10px 14px;border-right:1px solid var(--rule-soft)}
.prov-step:last-child,.prov-ev{border-right:0}
.prov-step .k,.prov-ev .k{font-family:var(--fm);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.prov-step .l,.prov-ev .l{font-size:.8125rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov-step .m{font-family:var(--fm);font-size:.5625rem;color:var(--ink-3)}
.prov-step:hover{background:var(--white)}
.prov-step:hover .l{color:var(--accent)}
.prov-ev{background:var(--paper-2)}
.prov-ev .l{font-size:.75rem;color:var(--ink-2)}

/* ---------- emerging signal board ---------- */
.em-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.em-card{border:1px solid var(--rule);background:var(--surface);padding:14px;display:grid;gap:11px;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.em-card:hover,.em-card:focus-visible{border-color:var(--ink);background:var(--white)}
.em-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.em-t{font-size:.9375rem;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.em-metrics{display:grid;grid-template-columns:minmax(0,1fr) 80px 80px;gap:12px;align-items:end;border-top:1px solid var(--rule-soft);padding-top:10px}
.em-metrics .k{display:block;font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.em-metrics .v{display:block;margin-top:3px;font-family:var(--fm);font-size:.6875rem;color:var(--ink-2)}
.em-spark .lbl{display:block;margin-top:4px;font-family:var(--fm);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.em-kv{display:flex;flex-wrap:wrap;gap:3px 12px;font-family:var(--fm);font-size:.5625rem;color:var(--ink-3)}
.em-read{font-size:.8125rem;color:var(--ink-2);line-height:1.5;border-left:2px solid var(--accent);padding-left:9px}
.em-card footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--rule-soft);padding-top:8px}
.em-card footer .mono{color:var(--ink-4)}

/* ---------- SERP attackability ---------- */
.attack{border:1px solid var(--ink);background:var(--surface);margin-top:20px}
.attack-h{display:flex;align-items:flex-start;gap:18px;padding:13px 16px;border-bottom:1px solid var(--rule)}
.attack-h > div:first-child{min-width:0}
.attack-v{margin-left:auto;flex-shrink:0;font-family:var(--fm);font-size:1.75rem;line-height:1;letter-spacing:-.04em}
.attack-v small{font-size:.75rem;color:var(--ink-4);letter-spacing:0}
.attack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px;padding:13px 16px}
.attack-grid .reason-r .b{color:var(--accent)}
.attack-grid .reason-r:last-child .b{color:var(--warn)}

/* ---------- competitor detail ---------- */
.why-list{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
.why-list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;background:var(--surface);padding:11px 14px}
.why-list .rk{font-family:var(--fm);font-size:.75rem;color:var(--ink-4);padding-top:2px}
.why-list .f{font-size:.875rem;font-weight:600;letter-spacing:-.01em}
.why-list .d{font-size:.8125rem;color:var(--ink-2);line-height:1.5;margin-top:3px}

.radar-block{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start;border:1px solid var(--rule);background:var(--surface);padding:16px}
.radar-side{display:grid;gap:12px;align-content:start;min-width:0}
.legend{display:flex;gap:14px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:9px;height:9px;display:inline-block;border:1px solid var(--ink-3)}
.legend .sw.them{background:rgba(20,19,15,.18);border-color:var(--ink-2)}
.legend .sw.us{background:rgba(207,51,25,.22);border-color:var(--accent)}
.gap-row{display:grid;grid-template-columns:minmax(0,1fr) 26px 12px 26px 42px;gap:6px;align-items:center;font-size:.75rem;color:var(--ink-2);padding-bottom:5px;border-bottom:1px solid var(--rule-soft)}
.gap-row .num{text-align:right;font-family:var(--fm);font-size:.6875rem}
.gap-row .arrow{text-align:center;color:var(--ink-4);font-family:var(--fm)}
.gap-row .d{text-align:right;font-family:var(--fm);font-size:.625rem}
.gap-row .d.up{color:var(--up)}
.gap-row .d.down{color:var(--accent-ink)}
.gap-row.worst{background:rgba(207,51,25,.06);padding:4px 6px;border-bottom-color:rgba(207,51,25,.3)}
.gap-row.worst .k{font-weight:600;color:var(--ink)}

.legend-row{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--fm);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.legend-row .sw{width:10px;height:2px;background:var(--ink);display:inline-block}
.legend-row .sw.acc{background:var(--accent)}

/* ---------- action detail ---------- */
.verb-block{flex-shrink:0;text-align:right;padding-left:18px;border-left:1px solid var(--rule)}
.verb-block .verb{margin:2px 0 3px;font-size:.9375rem;font-weight:650;letter-spacing:-.01em}
.impact-line{font-family:var(--fm);font-size:.8125rem;line-height:1.6;color:var(--ink)}

.checklist{border:1px solid var(--rule);background:var(--surface)}
.chk{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:start;padding:10px 14px;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.chk:last-child{border-bottom:0}
.chk:hover{background:var(--white)}
.chk .bx{width:13px;height:13px;margin-top:1px;border:1px solid var(--rule-2);background:var(--white);position:relative;cursor:pointer}
.chk .bx[aria-checked="true"]{background:var(--ink);border-color:var(--ink)}
.chk .bx[aria-checked="true"]::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border-right:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:rotate(40deg)}
.chk .t{font-size:.8125rem;color:var(--ink-2);line-height:1.45}

.impl{border:1px solid var(--rule);background:var(--surface)}
.impl-h{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--rule)}
.impl-h .tiny{margin-left:auto}
.impl-list{padding:2px 14px 10px;counter-reset:impl}
.impl-list li{counter-increment:impl;display:grid;grid-template-columns:22px 94px minmax(0,1fr);gap:9px;padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:.8125rem;color:var(--ink-2)}
.impl-list li:last-child{border-bottom:0}
.impl-list li::before{content:counter(impl,decimal-leading-zero);font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);padding-top:2px}
.impl-list li b{font-family:var(--fm);font-size:.5625rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}

.dep-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--rule);background:var(--surface);font-size:.8125rem}
.dep-row:hover{border-color:var(--ink);background:var(--white)}
.dep-row .mono{color:var(--ink-4)}

/* ---------- small shared utilities ---------- */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.inset-note{border-left:3px solid var(--rule-2);background:var(--paper-2);padding:8px 12px;font-size:.8125rem;color:var(--ink-2);line-height:1.5}
.sel-sm{height:28px;width:auto;min-width:158px}
.rowlink{cursor:pointer}
.warn{color:var(--warn)}
.stage-def{display:grid;gap:2px;padding-bottom:7px;border-bottom:1px solid var(--rule-soft)}
.stage-def:last-child{border-bottom:0;padding-bottom:0}
.stage-def .lbl{font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.stage-def .d{font-size:.75rem;color:var(--ink-3);line-height:1.45}
.seg .count{font-family:var(--fm);font-size:.5rem;margin-left:5px;color:var(--ink-4);border:1px solid var(--rule);padding:0 3px}
.seg button:is([aria-pressed="true"],[aria-selected="true"]) .count{border-color:rgba(244,242,237,.4);color:var(--paper-2)}

/* the SERP composition bars use a different child vocabulary than .bars */
.bars .bar-row .lbl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .bar-row .bar{display:block;height:14px;background:var(--paper-2);position:relative;overflow:hidden}
.bars .bar-row .bar > i{position:absolute;inset:0 auto 0 0;display:block;background:var(--ink);animation:grow 620ms var(--ease) both;transform-origin:left}
.bars .bar-row .v{text-align:right;font-family:var(--fm);font-size:.75rem;color:var(--ink-2)}

/* change feed rows written as mark / body / when */
.feed-row[data-sev]{grid-template-columns:8px minmax(0,1fr) 92px;cursor:default}
.feed-row[data-sev]:hover{background:var(--surface)}
.feed-row[data-sev] .mark{margin-top:5px}
.feed-row[data-sev][data-sev="high"] .mark{background:var(--accent)}
.feed-row[data-sev][data-sev="med"] .mark{background:var(--warn)}

@media (max-width:1120px){
  .radar-block{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media (max-width:900px){
  .mnav{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:75;
    background:var(--paper);border-top:1px solid var(--ink);padding-bottom:env(safe-area-inset-bottom);
  }
  .mnav button{
    display:grid;place-items:center;gap:3px;padding:7px 0 6px;background:none;border:0;cursor:pointer;
    font-family:var(--fm);font-size:.5rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  }
  .mnav button[aria-current="true"]{color:var(--ink)}
  .mnav button:focus-visible{outline-offset:-3px}
  body{padding-bottom:56px}

  .ws-pop,.np-pop,.acct-pop{left:8px;right:8px;width:auto}
  .em-grid{grid-template-columns:minmax(0,1fr)}
  .em-metrics{grid-template-columns:minmax(0,1fr) 72px 72px}
  .attack-grid{grid-template-columns:minmax(0,1fr)}
  .plan-row{grid-template-columns:minmax(0,1fr)}
  .why-list li{grid-template-columns:26px minmax(0,1fr)}
  .prov-step,.prov-ev{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .prov-step:last-child,.prov-ev{border-bottom:0}
  .verb-block{text-align:left;border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:9px;width:100%}
  .cmp-h,.cmp-r{grid-template-columns:88px minmax(0,1fr) minmax(0,1fr);font-size:.75rem;gap:6px}
  .saved-bar .tiny{display:none}
  .impl-list li{grid-template-columns:20px 72px minmax(0,1fr)}
  .gap-row{grid-template-columns:minmax(0,1fr) 24px 10px 24px 38px}
}

/* ==========================================================================
   ADDENDUM 2 · authentication, onboarding, settings tree
   ========================================================================== */

/* ---------- auth surface ---------- */
body[data-chrome="auth"] #sections,
body[data-chrome="auth"] .mast,
body[data-chrome="auth"] .mnav{display:none}
body[data-chrome="auth"]{padding-bottom:0}
body[data-chrome="auth"] .mast-in{padding-inline:22px}

.auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);min-height:100dvh}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(22px,5vw,88px);max-width:560px;width:100%}
.auth-brand{display:inline-flex;margin-bottom:34px;align-self:flex-start}
.auth-h{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;letter-spacing:-.04em;font-weight:700;font-variation-settings:"wdth" 94}
.auth-sub{margin-top:8px;color:var(--ink-2);font-size:.875rem;line-height:1.55;max-inline-size:44ch}
.auth-stack{display:grid;gap:14px;margin-top:22px}
.auth-submit{height:38px;width:100%;margin-top:2px}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.auth-check{display:flex;align-items:flex-start;gap:8px;font-size:.75rem;color:var(--ink-2);line-height:1.45;cursor:pointer}
.auth-check input{margin:2px 0 0;accent-color:#14130F}
.auth-or{display:flex;align-items:center;gap:10px;margin:20px 0 14px;font-family:var(--fm);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.auth-or::before,.auth-or::after{content:"";height:1px;background:var(--rule);flex:1}
.auth-alt{display:grid;gap:7px}
.auth-alt .btn{width:100%;justify-content:flex-start}
.auth-legal{margin-top:24px;font-size:.6875rem;color:var(--ink-3);line-height:1.55;max-inline-size:46ch;border-top:1px solid var(--rule);padding-top:12px}
.auth-legal a{color:var(--ink);border-bottom:1px solid var(--rule-2)}
.auth-legal a:hover{color:var(--accent);border-color:var(--accent)}
.auth-form .error-box{margin-top:16px}

.auth-side{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.auth-side-in{position:sticky;top:0;padding:56px clamp(24px,4vw,54px);display:flex;flex-direction:column;min-height:100dvh;gap:0}
.auth-side .mono{color:rgba(244,242,237,.55)}
.auth-claim{margin-top:auto;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.06;letter-spacing:-.04em;font-weight:700;font-variation-settings:"wdth" 92;max-inline-size:18ch;color:var(--paper)}
.auth-body{margin-top:14px;font-size:.875rem;line-height:1.6;color:rgba(244,242,237,.72);max-inline-size:38ch}
.auth-proof{margin-top:28px;border-top:1px solid rgba(244,242,237,.24)}
.auth-proof > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(244,242,237,.14)}
.auth-proof .k{font-family:var(--fm);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,237,.55)}
.auth-proof .v{font-family:var(--fm);font-size:.875rem;color:var(--paper)}
.auth-foot{margin-top:auto;padding-top:26px;font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,242,237,.4)}

.pw{display:flex;align-items:center;gap:9px;margin-top:6px}
.pw-bar{display:flex;gap:3px;flex:1}
.pw-bar i{flex:1;height:3px;background:var(--rule-soft)}
.pw-bar i[data-on="true"]{background:var(--ink)}
.pw-lbl{font-family:var(--fm);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ---------- onboarding ---------- */
.onb{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}
.onb-head{display:flex;align-items:center;gap:20px;padding:14px 26px;border-bottom:1px solid var(--ink)}
.onb-prog{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin-left:6px}
.onb-prog::-webkit-scrollbar{display:none}
.onb-prog span{font-family:var(--fm);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:4px 10px;border-right:1px solid var(--rule);white-space:nowrap}
.onb-prog span[data-on="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 0 var(--accent)}
.onb-prog span[data-done="true"]{color:var(--ink-3)}
.onb-body{padding:38px 26px;display:flex;justify-content:flex-start}
.onb-card{width:100%;max-width:680px}
.onb-step{display:grid;gap:0}
.onb-h{font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin-top:8px;max-inline-size:30ch;text-wrap:balance}
.onb-sub{margin-top:9px;color:var(--ink-2);font-size:.875rem;line-height:1.55;max-inline-size:62ch}
.onb-fields{margin-top:24px}
.onb-foot{display:flex;align-items:center;gap:14px;padding:12px 26px;border-top:1px solid var(--rule);background:var(--paper);position:sticky;bottom:0}
.onb-src{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--rule);background:var(--surface);cursor:pointer}
.onb-src:hover{border-color:var(--rule-2);background:var(--white)}
.onb-src input{margin:0;accent-color:#14130F}
.onb-src .t{font-size:.8125rem;font-weight:550}
.onb-src .t small{display:block;font-size:.75rem;font-weight:400;color:var(--ink-3);margin-top:1px}
.onb-src .mono{color:var(--ink-4);text-align:right;max-width:220px}
.onb-src input:disabled{opacity:.6}

/* ---------- settings tree ---------- */
.set{display:grid;grid-template-columns:228px minmax(0,1fr);align-items:start}
.set-nav{border-right:1px solid var(--rule);position:sticky;top:calc(var(--mast-h) + var(--sect-h));max-height:calc(100dvh - var(--mast-h) - var(--sect-h));overflow-y:auto;padding:18px 0 40px}
.set-group{padding-bottom:14px;margin-bottom:4px}
.set-group-title{font-family:var(--fm);font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding:8px 18px 6px}
.set-item{display:block;padding:6px 18px 6px 17px;font-size:.8125rem;color:var(--ink-2);border-left:2px solid transparent}
.set-item:hover{background:var(--surface);color:var(--ink)}
.set-item[aria-current="page"]{background:var(--paper-2);border-left-color:var(--accent);color:var(--ink);font-weight:600}
.set-group:last-child .set-group-title{color:var(--accent-ink)}
.set-main{padding:26px var(--pad-x) 80px;min-width:0}

.danger-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 14px;border:1px solid var(--rule);background:var(--surface)}
.danger-row .t{font-size:.8125rem;font-weight:600}
.danger-row .s{font-size:.75rem;color:var(--ink-2);margin-top:3px;line-height:1.45;max-inline-size:60ch}
.danger-row .m{margin-top:5px;font-family:var(--fm);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.danger-row .btn{border-color:var(--accent);background:transparent;color:var(--accent-ink);flex-shrink:0}
.danger-row .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}

@media (max-width:900px){
  .auth-shell{grid-template-columns:minmax(0,1fr)}
  .auth-side{display:none}
  .auth-form{padding:34px 20px;max-width:none}
  .set{grid-template-columns:minmax(0,1fr)}
  .set-nav{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--rule);display:flex;gap:0;overflow-x:auto;padding:0;scrollbar-width:none}
  .set-nav::-webkit-scrollbar{display:none}
  .set-group{padding:0;margin:0;display:flex}
  .set-group-title{display:none}
  .set-item{white-space:nowrap;padding:10px 12px;border-left:0;border-bottom:2px solid transparent}
  .set-item[aria-current="page"]{border-left:0;border-bottom-color:var(--accent);background:transparent}
  .set-main{padding:20px 18px 68px}
  .onb-head{padding:12px 18px;flex-wrap:wrap;gap:10px}
  .onb-body{padding:24px 18px}
  .onb-foot{padding:11px 18px}
  .onb-src .mono{display:none}
  .danger-row{grid-template-columns:minmax(0,1fr)}
  .danger-row .btn{justify-self:start}
}

/* meter and value on one line inside a table cell */
.meter-inline .meter{width:78px}
.meter-inline{display:inline-flex;vertical-align:middle;margin-right:5px}

/* ---------- opportunity board ---------- */
.board{display:grid;grid-template-columns:repeat(6,minmax(168px,1fr));gap:8px;overflow-x:auto;padding-bottom:4px;align-items:start}
.board-col{border:1px solid var(--rule);background:var(--paper)}
.board-h{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.board-h .t{font-family:var(--fm);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.board-h .c{margin-left:auto;font-family:var(--fm);font-size:.5625rem;color:var(--ink-3);border:1px solid var(--rule-2);padding:0 4px;line-height:1.5}
.board-body{display:grid;gap:0;min-height:60px}
.board-empty{padding:14px 10px;font-size:.6875rem;color:var(--ink-4);border-bottom:1px solid var(--rule-soft)}
.bcard{display:grid;gap:5px;padding:10px;border-bottom:1px solid var(--rule-soft);background:var(--surface);cursor:pointer;transition:background var(--dur)}
.bcard:last-child{border-bottom:0}
.bcard:hover{background:var(--white)}
.bcard.sel{background:var(--white);box-shadow:inset 2px 0 0 0 var(--accent)}
.bcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bcard-t{font-size:.8125rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.bcard-m{font-size:.6875rem;color:var(--ink-3);line-height:1.4}
.bcard-meter{margin:2px 0 1px}
.bcard-kv{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--fm);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.bcard-f{font-family:var(--fm);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
@media (max-width:900px){
  .board{grid-template-columns:repeat(6,minmax(168px,168px))}
  .bcard-t{font-size:.75rem}
}

/* ---------- demand map ---------- */
.dmap{position:relative;border:1px solid var(--rule);background:var(--surface);margin-bottom:0}
.dmap-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--rule);background:var(--paper)}
.dmap-legend span{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.dmap-legend .bs{width:9px;height:9px;display:inline-block;border:1px solid var(--ink-3)}
.dmap-legend .bs.cons{background:rgba(20,19,15,.12)}
.dmap-legend .bs.sol{background:rgba(207,51,25,.18);border-color:var(--accent)}
.dmap-legend .bs.dec{background:rgba(30,107,78,.18);border-color:var(--up)}
.dmap-legend .bs.pur{background:rgba(138,90,0,.18);border-color:var(--warn)}
.dmap-legend .bs.post{background:rgba(47,78,115,.16);border-color:var(--info)}
.dmap-legend .dmap-hint{margin-left:auto;color:var(--ink-4);letter-spacing:.06em}
.dmap-stage{position:relative}
.dmap-stage svg{display:block;width:100%;height:auto}
.dmap .gridline{stroke:var(--rule-soft);stroke-width:1}
.dmap .ax-lbl{font-family:var(--fm);font-size:8px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-4)}
.dmap .bub{cursor:pointer}
.dmap .bub circle{stroke-width:1.2;transition:stroke-width 120ms var(--ease)}
.dmap .bub.cons circle{fill:rgba(20,19,15,.10);stroke:var(--ink-2)}
.dmap .bub.sol circle{fill:rgba(207,51,25,.13);stroke:var(--accent)}
.dmap .bub.dec circle{fill:rgba(30,107,78,.13);stroke:var(--up)}
.dmap .bub.pur circle{fill:rgba(138,90,0,.13);stroke:var(--warn)}
.dmap .bub.post circle{fill:rgba(47,78,115,.12);stroke:var(--info)}
.dmap .bub text{font-family:var(--fm);font-weight:600;fill:var(--ink);pointer-events:none}
.dmap .bub:hover circle{stroke-width:2.2}
.dmap .bub.sel circle{stroke-width:2.6;stroke:var(--ink)}
.dmap .bub:focus-visible circle{stroke:var(--ink);stroke-width:2.6}

.dmap-tip{
  position:absolute;z-index:5;width:214px;background:var(--paper);border:1px solid var(--ink);
  padding:9px 11px;box-shadow:0 18px 32px -24px rgba(20,19,15,.45);pointer-events:none;
}
.dmap-tip .tt{font-size:.8125rem;font-weight:650;letter-spacing:-.01em;line-height:1.3;margin-bottom:7px}
.dmap-tip .tr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 0;font-size:.6875rem;color:var(--ink-3)}
.dmap-tip .tr b{font-family:var(--fm);font-size:.6875rem;color:var(--ink);font-weight:500}

@media (max-width:900px){
  .dmap-stage{overflow-x:auto}
  .dmap-stage svg{min-width:720px}
  .dmap-legend .dmap-hint{display:none}
}

/* ---------- site brain header ---------- */
.graph-wrap{display:grid;grid-template-rows:auto minmax(0,1fr)}
.graph-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:13px 18px 12px;border-bottom:1px solid var(--rule);background:var(--paper)}
.graph-h1{font-size:1.375rem;font-weight:700;letter-spacing:-.035em;line-height:1.1;font-variation-settings:"wdth" 94}
.graph-sub{font-size:.75rem;color:var(--ink-3);line-height:1.45;max-inline-size:88ch;margin:5px 0 0}
.graph-meta{margin-left:auto;color:var(--ink-4);white-space:nowrap}
.graph-stage{position:relative;min-height:0;overflow:hidden}
@media (max-width:900px){
  .graph-head{padding:11px 14px;gap:6px}
  .graph-meta{display:none}
  .graph-sub{font-size:.6875rem}
  .graph-stage{height:calc(100dvh - var(--mast-h) - var(--sect-h) - 108px)}
}

/* a programmatically focused heading or panel is a focus target, not a
   keyboard stop, so it must not draw a ring that looks like an error */
#view [tabindex="-1"]:focus{outline:none}

.axis-pair{display:inline-flex;align-items:center;gap:7px}
.dmap-legend .dmap-scroll{display:none}
@media (max-width:900px){
  .dmap-legend .dmap-scroll{display:block;flex-basis:100%;color:var(--ink-4);letter-spacing:.06em}
  .axis-pair{flex:1 1 46%}
  .axis-pair select{flex:1}
}

/* ==========================================================================
   ADDENDUM 3 · pricing, checkout, billing settings, invoice, invitation
   ========================================================================== */

/* ---------- pricing ---------- */
.pricing{max-width:1240px;margin:0 auto;padding:38px 26px 80px}
.pricing .h-page{max-inline-size:26ch}
.pricing-toggle{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.pricing-toggle .save{font-family:var(--fm);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent);padding:3px 7px;background:rgba(207,51,25,.05)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px;align-items:start}
.pcard{border:1px solid var(--rule);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:100%}
.pcard.on{border-color:var(--ink);background:var(--white);box-shadow:inset 0 2px 0 0 var(--accent)}
.pcard-price{display:flex;align-items:baseline;gap:5px;margin-top:9px}
.pcard-price .amount{font-family:var(--fm);font-size:2rem;line-height:1;letter-spacing:-.045em}
.pcard-price .per{font-family:var(--fm);font-size:.6875rem;color:var(--ink-3)}
.pcard-equiv{font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;color:var(--ink-4);margin-top:4px}
.pcard-for{font-size:.75rem;color:var(--ink-3);line-height:1.45;min-height:3.2em}
.pcard-limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);padding:10px 0}
.pcard-limits .k{display:block;font-family:var(--fm);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
.pcard-limits .v{font-family:var(--fm);font-size:.8125rem}
.pcard-inc{display:grid;gap:4px}
.pcard-inc li{font-size:.75rem;color:var(--ink-2);line-height:1.45;padding-left:11px;position:relative}
.pcard-inc li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--ink-3)}
.pcard .btn{width:100%;margin-top:auto}

.penterprise{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px solid var(--ink);background:var(--paper-2);padding:16px 18px;margin-top:12px}
.penterprise .pe-t{font-size:.9375rem;font-weight:600;letter-spacing:-.015em;margin-top:3px}

.cmp-table th[scope="row"]{font-weight:400;font-size:.8125rem;color:var(--ink-2);text-align:left;padding:8px 12px;border-bottom:1px solid var(--rule-soft);white-space:normal}
.cmp-table td{padding:8px 12px;border-bottom:1px solid var(--rule-soft);font-family:var(--fm);font-size:.75rem;color:var(--ink-2)}
.cmp-table td.c{text-align:center}
.cmp-table .yes{color:var(--up);font-weight:600}
.cmp-table .no{color:var(--ink-4)}
.cmp-table .txt{white-space:nowrap}
.cmp-table tr.cmpgrp th{background:var(--paper-2);padding:0;border-bottom:1px solid var(--rule-2)}
.cmp-table tr.cmpgrp button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--fm);font-size:.5625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.cmp-table tr.cmpgrp button .car{margin-left:auto;color:var(--ink-4)}
.cmp-table tr.cmpgrp button:hover{background:var(--paper-3)}

.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{padding:12px 0;font-size:.875rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--fm);font-size:.75rem;color:var(--ink-4);width:12px}
.faq details[open] summary::before{content:"\2212"}
.faq p{padding:0 0 14px 22px;font-size:.8125rem;color:var(--ink-2);line-height:1.55;max-inline-size:78ch}
.pricing-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:14px;border-top:1px solid var(--rule)}

/* ---------- checkout ---------- */
.co{max-width:1120px;margin:0 auto;padding:34px 26px 72px}
.co-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;margin-top:24px;align-items:start}
.co-summary{display:grid;gap:12px}
.co-form{display:grid;gap:12px}
.co-inc{display:grid;gap:4px}
.co-inc li{font-size:.75rem;color:var(--ink-2);line-height:1.45;padding-left:11px;position:relative}
.co-inc li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--ink-3)}
.pm{display:grid;grid-template-columns:15px 74px 74px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 11px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;font-size:.8125rem}
.pm:hover{border-color:var(--rule-2);background:var(--white)}
.pm input{accent-color:#14130F;margin:0}
.pm .brand{font-weight:600}
.pm .num{font-family:var(--fm);font-size:.75rem;color:var(--ink-2)}
.pm .exp{font-family:var(--fm);font-size:.5625rem;letter-spacing:.06em;color:var(--ink-4);text-align:right}
.co-promo{display:flex;gap:7px}
.co-promo input{flex:1}
.co-credit{display:flex;align-items:flex-start;gap:9px;font-size:.8125rem;color:var(--ink-2);line-height:1.45;cursor:pointer}
.co-credit input{margin-top:3px;accent-color:#14130F}
.co-total{border:1px solid var(--ink);background:var(--surface);padding:12px 14px}
.co-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:4px 0;font-size:.8125rem;color:var(--ink-2)}
.co-line > span:last-child{font-family:var(--fm);font-size:.8125rem;color:var(--ink)}
.co-line.total{border-top:1px solid var(--ink);margin-top:7px;padding-top:9px;font-weight:650;color:var(--ink);font-size:.9375rem}
.co-line.total > span:last-child{font-size:1rem}
.co-submit{width:100%;height:42px}
.co-end{display:grid;place-items:center;min-height:calc(100dvh - 60px);padding:34px 26px}
.co-end-card{max-width:660px;width:100%;border:1px solid var(--ink);background:var(--surface);padding:clamp(20px,3vw,34px)}

/* ---------- billing extras ---------- */
.dun{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.dun:last-of-type{border-bottom:0}
.dun-when{color:var(--ink-4);padding-top:2px}
.dun-body .t{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600}
.dun-body .s{font-size:.8125rem;color:var(--ink-2);line-height:1.5;margin-top:3px}
.dun-body .a{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.qa{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.qa .num{font-family:var(--fm);font-size:.5625rem;color:var(--ink-4);padding-top:2px}
.qa .q{font-size:.8125rem;color:var(--ink)}
.qa .a{font-size:.6875rem;color:var(--ink-3);margin-top:2px}

/* ---------- invoice document ---------- */
.inv-page{padding:30px 26px 72px}
.inv{max-width:840px;background:var(--white);border:1px solid var(--ink);padding:clamp(20px,3vw,36px)}
.inv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ink);padding-bottom:16px}
.inv-h1{font-size:1.75rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.inv-status{text-align:right}
.inv-parties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:20px}
.inv-addr{font-size:.8125rem;color:var(--ink-2);line-height:1.6}
.inv-lines td{padding:9px 12px}
.inv-totals{margin:16px 0 0 auto;max-width:330px}
.inv-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:14px;border-top:1px solid var(--rule)}

@media (max-width:1120px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .pricing,.co{padding:24px 18px 64px}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .pcard-for{min-height:0}
  .pricing-toggle{gap:9px}
  .cmp-table th[scope="row"]{min-width:150px}
  .qa-grid{grid-template-columns:minmax(0,1fr)}
  .inv-page{padding:18px 14px 60px}
  .inv-parties{grid-template-columns:minmax(0,1fr);gap:16px}
  .inv-totals{max-width:none}
  .pm{grid-template-columns:15px 60px 66px minmax(0,1fr);row-gap:4px}
  .pm .exp{grid-column:2 / -1;text-align:left}
  .dun{grid-template-columns:minmax(0,1fr);gap:4px}
  .co-end{min-height:auto;padding:24px 18px 56px}
}

/* recovery codes, shown once */
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border:1px solid var(--rule);background:var(--paper-2);padding:12px}
.codes span{font-family:var(--fm);font-size:.8125rem;letter-spacing:.1em;color:var(--ink)}
@media (max-width:640px){.codes{grid-template-columns:minmax(0,1fr)}}

/* ---------- decision memory ---------- */
.dmem-list{display:grid;gap:0;border-top:1px solid var(--ink)}
.dmem{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:14px 2px;border-bottom:1px solid var(--rule);cursor:pointer;transition:background var(--dur)}
.dmem:hover{background:var(--surface)}
.dmem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dmem-when{display:flex;align-items:flex-start;gap:8px;padding-top:2px;position:relative}
.dmem-when .mono{color:var(--ink-4)}
.dmem-when .dot{width:8px;height:8px;background:var(--rule-2);margin-top:4px;flex-shrink:0}
.dmem.up .dot{background:var(--up)}
.dmem.down .dot{background:var(--accent)}
.dmem-body{min-width:0;display:grid;gap:6px}
.dmem-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dmem-t{font-size:.9375rem;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.dmem-r{font-size:.8125rem;color:var(--ink-2);line-height:1.5;max-inline-size:78ch}
.dmem-lesson{border-left:2px solid var(--rule-2);padding-left:9px;font-size:.8125rem;color:var(--ink-2);line-height:1.5;display:grid;gap:2px}
.dmem.up .dmem-lesson{border-left-color:var(--up)}
.dmem.down .dmem-lesson{border-left-color:var(--accent)}
.dmem-meta{display:flex;gap:14px;font-family:var(--fm);font-size:.5625rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4)}
@media (max-width:900px){
  .dmem{grid-template-columns:minmax(0,1fr);gap:7px}
  .dmem-when{flex-direction:row}
}

/* ---------- site brain diagnostics ---------- */
.graph-diag{position:absolute;right:56px;top:12px;z-index:3;width:230px;background:var(--paper);border:1px solid var(--rule)}
.gd-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.gd-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;width:100%;text-align:left;padding:7px 10px;background:none;border:0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.gd-row:last-child{border-bottom:0}
.gd-row:hover{background:var(--surface)}
.gd-row .n{font-family:var(--fm);font-size:.8125rem;color:var(--ink)}
.gd-row .t{font-size:.6875rem;color:var(--ink-2);line-height:1.35}
.gd-row .t small{display:block;font-size:.625rem;color:var(--ink-4);margin-top:1px}
@media (max-width:1120px){.graph-diag{display:none}}

/* ---------- use cases ---------- */
.uc{padding:9px 0;border-top:1px solid var(--rule-soft)}
.uc:first-of-type{border-top:0;padding-top:6px}
.uc-job{font-size:.8125rem;color:var(--ink);line-height:1.45}
.uc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ---------- decision chain ---------- */
.dchain{display:flex;align-items:stretch;gap:0;margin:2px 0 4px;flex-wrap:wrap}
.dch-node{display:grid;gap:1px;border:1px solid var(--rule-2);background:var(--surface);padding:5px 8px;font-size:.6875rem;color:var(--ink);white-space:nowrap}
.dch-node small{font-family:var(--fm);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.dch-node.start{background:var(--paper-2)}
.dch-node.ghost{border-style:dashed;color:var(--ink-4)}
.dch-node.up{border-color:var(--up);color:var(--up)}
.dch-node.up small{color:var(--up)}
.dch-node.down{border-color:var(--accent);color:var(--accent-ink)}
.dch-node.down small{color:var(--accent-ink)}
.dch-link{display:flex;align-items:center;width:34px;flex-shrink:0}
.dch-link i{display:block;width:100%;height:1px}
.dch-link.solid i{background:var(--ink-2)}
.dch-link.dashed i{background:repeating-linear-gradient(90deg,var(--rule-2) 0 3px,transparent 3px 6px)}
@media (max-width:640px){
  .dch-link{width:16px}
  .dch-node{padding:4px 6px;font-size:.625rem}
}

/* ---------- usage thresholds ---------- */
.meter-wrap{position:relative;padding-right:10px}
.meter-mark{position:absolute;right:22%;top:-2px;bottom:-2px;width:1px;background:var(--warn);opacity:.55}
tr.warn td{background:rgba(138,90,0,.045)}
tr.hard-stop td{background:rgba(207,51,25,.05)}
tr.overage td{background:rgba(47,78,115,.04)}

/* ---------- legal documents (legal/*.html) ---------- */
/* Static pages outside app/ that reuse this sheet's primitives. Zero radius,
   zero shadow, one accent - same system. The draft banner is --accent text on
   the paper ground: it must read as a warning without introducing a color. */
.legal{max-width:76ch;margin:0 auto;padding:34px 22px 72px}
.legal-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:22px}
.legal-head .brand{font-size:.9rem}
.legal-draft{font-family:var(--fm);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
.legal h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.02em;margin:26px 0 8px}
.legal h2:first-of-type{margin-top:6px}
.legal p,.legal li{font-size:.8125rem;line-height:1.6;color:var(--ink-2);max-inline-size:70ch}
.legal ul{padding-left:18px;display:grid;gap:4px;margin:8px 0}
.legal .mono{color:var(--ink-3)}
.legal table{border-collapse:collapse;width:100%;margin:10px 0}
.legal th,.legal td{border:1px solid var(--rule);padding:7px 10px;font-size:.75rem;line-height:1.5;text-align:left;vertical-align:top}
.legal th{font-family:var(--fm);font-size:.5625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
.legal a{color:var(--ink);border-bottom:1px solid var(--rule-2)}
.legal a:hover{color:var(--accent);border-color:var(--accent)}
.legal-foot{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:640px){.legal{padding:22px 14px 56px}}