/* cantum tracker — Cantum production design system, direction "grotesque restraint".
   Tokens are the site's (cantum/site/cantum-ds.css); this file carries only what the
   tracker needs. Elevation = hairline + whitespace. One accent, used like a status LED. */

:root{
  --ink:#0C0D0F; --cream:#F3F1EB; --surface:#FFFFFF; --graphite:#5F646C; --mist:#8C9199;
  --hairline:#E4E1D8; --hairline-2:#D6D2C7; --signal:#3B2FE6; --signal-press:#2A1FC4;
  --tint:rgba(12,13,15,.04); --tint-2:rgba(12,13,15,.07);
  --display:"Schibsted Grotesk","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif; /* taste-ok: the Cantum design system names Inter for UI */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --r:0; --r-card:0;  /* site law: no radius, hairlines and whitespace do the work */
  --ease:cubic-bezier(0.16,1,0.3,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --fast:150ms; --dur:200ms; --draw:600ms;
  --wrap:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--body); /* taste-ok: Cantum DS ground #F3F1EB and Inter for UI */font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100svh}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--r)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:8px 12px;z-index:100}
.skip:focus{left:16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.mono{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--graphite);line-height:1.5}
.mono.signal{color:var(--signal)}
.num{font-variant-numeric:tabular-nums lining-nums}
.quiet{color:var(--graphite)}
.hide{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.03em;text-transform:lowercase;text-wrap:balance}
h1{font-size:clamp(28px,3.6vw,44px);line-height:1}
h2{font-size:clamp(22px,2.2vw,28px);line-height:1.1}
h3{font-size:18px;letter-spacing:-.02em}
p{max-width:64ch;text-wrap:pretty}

/* ---- product shell: fixed sidebar, scope bar, content ---- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100svh}
.side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4) var(--s3) var(--s3);border-right:1px solid var(--hairline);background:var(--cream);overflow-y:auto;overscroll-behavior:contain}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);flex-wrap:wrap;padding:0 var(--s2)}
.mark .glyph{color:var(--ink)}
.mark .node{fill:var(--signal)}
.mark .wordmark{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.04em;text-transform:lowercase}
.mark .product{margin-left:2px;font-size:11px}
body.white .mark .glyph,body.white .mark .wordmark,body.white .mark .product{display:none}
body.white .mark::before{content:attr(data-client);font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;text-transform:lowercase}
.ws-box{display:flex;flex-direction:column;gap:6px;padding:12px var(--s2);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.ws-pick{position:relative;display:block}
.ws-pick .ws-name{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.02em;line-height:1.2;display:block;padding-right:20px;text-transform:lowercase}
.ws-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;background-image:none}
.ws-pick::after{content:"";position:absolute;right:2px;top:7px;width:7px;height:7px;border-right:1.2px solid var(--graphite);border-bottom:1.2px solid var(--graphite);transform:rotate(45deg)}
.ws-meta{font-size:11px;letter-spacing:.08em}
.views{display:flex;flex-direction:column;gap:2px;flex:1}
.views .group{margin:var(--s3) var(--s2) 4px;font-size:11px}
.views .group:first-child{margin-top:0}
.views a{font-size:14px;text-decoration:none;text-transform:lowercase;color:var(--ink);padding:7px var(--s2);border-radius:var(--r);border-left:2px solid transparent;transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.views a[aria-current="page"]{color:var(--signal);border-left-color:var(--signal);background:var(--tint)}
.side-foot{display:flex;flex-direction:column;gap:10px;padding:var(--s3) var(--s2) 0;border-top:1px solid var(--hairline)}
.side-foot .btn-ghost{justify-content:center}
.body{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:8px clamp(16px,3vw,40px);flex-wrap:wrap}
.top .menu-btn{display:none}
.scope{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.top .print{margin-left:auto;text-decoration:none}
.seg{display:inline-flex;border:1px solid var(--hairline-2);border-radius:var(--r)}
.seg button{font-size:13px;padding:8px 12px;min-height:32px;color:var(--graphite);transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--cream)}
.seg button:not([aria-checked="true"]):active{background:var(--tint)}
.sel{display:inline-flex;align-items:center;gap:8px}
select{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid var(--hairline-2);border-radius:var(--r);padding:4px 28px 4px 8px;font-size:16px;min-height:36px;text-transform:lowercase;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F646C' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
@media (hover:hover) and (pointer:fine){
  .views a:hover{color:var(--signal)}
  .seg button:not([aria-checked="true"]):hover{color:var(--ink);background:var(--tint)}
  select:hover{border-color:var(--ink)}
}
@media (max-width:1023px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:56;width:min(300px,86vw);transform:translateX(-100%);visibility:hidden;border-right:1px solid var(--hairline-2);transition:transform var(--dur) var(--ease-drawer),visibility 0s linear var(--dur)}
  .side.open{transform:none;visibility:visible;transition:transform 320ms var(--ease-drawer),visibility 0s}
  .top .menu-btn{display:inline-flex}
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,40px);width:100%}

/* ---- buttons ---- */
.btn,.btn-ghost{font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;min-height:40px;border-radius:var(--r);border:1px solid var(--ink);transition:background var(--fast) var(--ease),color var(--fast) var(--ease),transform 160ms var(--ease),border-color var(--fast) var(--ease)}
.btn{background:var(--ink);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn.signal{background:var(--signal);border-color:var(--signal);color:#fff}
.btn:active,.btn-ghost:active{transform:scale(.97)}
.btn[disabled],.btn-ghost[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.small{padding:4px 12px;min-height:32px;font-size:13px}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#2A2C31}
  .btn.signal:hover{background:var(--signal-press);border-color:var(--signal-press)}
  .btn-ghost:hover{background:var(--tint)}
}
a.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline-2);transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
@media (hover:hover) and (pointer:fine){a.link:hover{color:var(--signal);border-color:var(--signal)}}
.row-btn{text-align:left;width:100%;display:block;padding:0;border-radius:0}

/* ---- view shell: one restrained reveal per view ---- */
.view{padding:var(--s6) 0 var(--s8)}
html.js .view{opacity:1}
@media (prefers-reduced-motion:no-preference){
  html.js .view.enter{animation:view-in 240ms var(--ease) both}
  @keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.view-head .mono{margin-bottom:8px;display:block}
section.block{margin-top:var(--s7)}
section.block>h2{margin-bottom:var(--s4)}
.sub{color:var(--graphite);font-size:14px;max-width:64ch;margin-top:8px}

/* ---- the cantilever: the one authored moment ---- */
.canti{position:relative;padding:var(--s4) 0 var(--s5)}
.canti-top{display:flex;justify-content:flex-end;margin-bottom:var(--s2)}
.canti svg{display:block;width:100%;height:60px;overflow:visible}
.canti .member{stroke:var(--ink);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.canti .post{fill:var(--ink)}
.canti .node{fill:var(--signal)}
.canti .tick{stroke:var(--hairline-2);stroke-width:1;vector-effect:non-scaling-stroke}
.canti-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-top:var(--s2)}
.canti .figure-wrap{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:var(--s2)}
.canti .figure{font-family:var(--display);font-weight:500;font-size:clamp(64px,10vw,124px);letter-spacing:-.045em;line-height:.9;color:var(--ink)}
.canti .unit{font-weight:400;font-size:clamp(24px,4vw,48px);color:var(--graphite);letter-spacing:-.02em;margin-left:4px}
@media (prefers-reduced-motion:no-preference){
  html.js .canti.draw .member{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw var(--draw) var(--ease) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  html.js .canti.draw .node{animation:lock 420ms var(--ease) var(--draw) both}
  @keyframes lock{0%{transform:scale(.6);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
}
.canti .node{transform-box:fill-box;transform-origin:center}
@media (max-width:640px){.canti-foot{flex-direction:column}.canti .figure-wrap{align-items:flex-start;text-align:left}}
.live{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--signal);vertical-align:middle;margin-right:8px}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--signal);opacity:0}
@media (prefers-reduced-motion:no-preference){.live::after{animation:breath 3.8s var(--ease) infinite}.live.paused::after{animation-play-state:paused}} /* taste-ok: t-loop, paused off-screen by app.js */
@keyframes breath{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.6);opacity:0}}

/* ---- figures strip ---- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.strip .fig{padding:var(--s4) var(--s4) var(--s3);border-right:1px solid var(--hairline);min-width:0}
.strip .fig:last-child{border-right:0}
.fig .label{display:block;margin-bottom:10px}
.fig .val{font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1;display:flex;align-items:baseline;gap:8px}
.fig .val small{font-size:14px;color:var(--graphite);font-weight:400;letter-spacing:-.01em}
.fig .delta{margin-top:8px;font-size:13px;color:var(--graphite)}
.fig .delta.up{color:var(--ink)}
.fig .delta.down{color:var(--graphite)}
.fig .n{display:block;margin-top:10px}
@media (max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}.strip .fig:nth-child(2n){border-right:0}.strip .fig:nth-child(-n+2){border-bottom:1px solid var(--hairline)}}

/* ---- charts (load-diagram style: hairline, no fills) ---- */
.chart{position:relative;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);padding:var(--s4)}
.chart svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.chart .axis{stroke:var(--hairline-2);stroke-width:1}
.chart .grid{stroke:var(--hairline);stroke-width:1}
.chart .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--graphite);font-weight:500}
.chart .line{fill:none;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.chart .line.ink{stroke:var(--ink)}
.chart .line.graphite{stroke:var(--graphite)}
.chart .line.mist{stroke:var(--mist)}
.chart .line.signal{stroke:var(--signal)}
.chart .line.dash{stroke-dasharray:4 4}
.chart .line.dot{stroke-dasharray:1.5 5;stroke-linecap:round}
.chart .pt{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}.chart .pt.graphite{stroke:var(--graphite)}.chart .pt.mist{stroke:var(--mist)}.chart .pt.signal{stroke:var(--signal)}
.chart .cross{stroke:var(--signal);stroke-width:1;opacity:0;transition:opacity var(--fast) var(--ease)}
.chart.hover .cross{opacity:1}
.chart .tip{position:absolute;top:var(--s3);right:var(--s4);background:var(--ink);color:var(--cream);padding:8px 12px;border-radius:var(--r);font-size:12px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease);min-width:150px}
.chart.hover .tip{opacity:1}
.chart .tip b{font-weight:500;color:#fff}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3)}
.legend span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--graphite)}
.legend i{display:inline-block;width:18px;height:0;border-top:1.75px solid var(--ink)}
.legend i.graphite{border-color:var(--graphite)}
.legend i.mist{border-color:var(--mist)}
.legend i.signal{border-color:var(--signal)}
.legend i.dash{border-top-style:dashed}
.legend i.dot{border-top-style:dotted}
.hit{fill:transparent}

/* member bars: a horizontal member whose length is the value, node at its end */
.member-bar{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:var(--s3)}
.member-bar .bar{position:relative;height:14px}
.member-bar .bar::before{content:"";position:absolute;left:0;top:6px;height:1px;width:100%;background:var(--hairline)}
.member-bar .bar i{position:absolute;left:0;top:6px;height:1.5px;background:var(--ink);width:var(--w,0%)}
.member-bar .bar i::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.member-bar .bar.signal i{background:var(--signal)}
.member-bar .bar.signal i::after{background:var(--signal)}
.member-bar .v{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-align:right;color:var(--ink)}

/* ---- engines ---- */
.engines{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.engine{padding:var(--s4);border-right:1px solid var(--hairline)}
.engine:last-child{border-right:0}
.engine h3{margin-bottom:var(--s3);display:flex;justify-content:space-between;align-items:baseline}
.engine h3 small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);font-weight:500}
.engine .row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);align-items:center;padding:8px 0;border-top:1px solid var(--hairline)}
.engine .row:first-of-type{border-top:0}
.engine .row .mono{font-size:11px}
@media (max-width:820px){.engines{grid-template-columns:1fr}.engine{border-right:0;border-bottom:1px solid var(--hairline)}.engine:last-child{border-bottom:0}}

/* ---- tables ---- */
.tbl-wrap{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);font-weight:500;text-align:left;padding:12px 16px;border-bottom:1px solid var(--hairline-2);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td .mono{font-size:11px}
tbody tr{transition:background var(--fast) var(--ease)}
tbody tr.click{cursor:pointer}
@media (hover:hover) and (pointer:fine){tbody tr.click:hover{background:var(--tint)}}
tbody tr.click:active{background:var(--tint-2)}
.wrap-text{max-width:46ch;min-width:26ch;text-wrap:pretty}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);border:1px solid var(--hairline-2);border-radius:var(--r);padding:2px 8px;margin-right:4px}
.tag.ink{color:var(--ink);border-color:var(--ink)}
.tag.signal{color:var(--signal);border-color:var(--signal)}
.bar-cell{min-width:160px}
.delta{font-variant-numeric:tabular-nums}

/* ---- chips / filters ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4)}
.chip{font-size:13px;padding:8px 12px;min-height:32px;border:1px solid var(--hairline-2);border-radius:var(--r);color:var(--graphite);text-transform:lowercase;transition:background var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.chip:not([aria-pressed="true"]):hover{color:var(--ink);border-color:var(--ink)}}

/* ---- forms ---- */
.form{display:grid;grid-template-columns:minmax(0,1fr) 180px 160px auto;gap:var(--s2);align-items:end;margin-bottom:var(--s5)}
.form label{display:block}
.form label .mono{display:block;margin-bottom:8px}
input[type=text],textarea{width:100%;background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--r);padding:8px 12px;font-size:16px;min-height:40px;transition:border-color var(--fast) var(--ease)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[type=text]:focus,textarea:focus{border-color:var(--ink);outline:none}
input::placeholder,textarea::placeholder{color:var(--mist)}
.form .sel select{width:100%}
@media (max-width:820px){.form{grid-template-columns:1fr 1fr}.form .grow{grid-column:1/-1}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:var(--r);font-size:14px;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index:60}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---- claims / changes lists ---- */
.list{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
.item{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--s3);padding:16px 16px;border-top:1px solid var(--hairline);align-items:start}
.item:first-child{border-top:0}
.item .sev{width:7px;height:7px;border-radius:50%;background:var(--mist);margin-top:7px}
.item .sev.s3{background:var(--signal)}
.item .sev.s2{background:var(--ink)}
.item .sev.s1{background:var(--graphite)}
.item .what{font-size:15px;text-wrap:pretty;max-width:70ch}
.item .meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.item .quote{margin-top:8px;color:var(--graphite);font-size:14px;border-left:1px solid var(--hairline-2);padding-left:12px;max-width:66ch} /* taste-ok: admonition */
.item .when{text-align:right;white-space:nowrap}
.day-head{padding:12px 16px;background:var(--cream);border-top:1px solid var(--hairline)}
.day-head:first-child{border-top:0}
.matrix td{text-align:right;font-variant-numeric:tabular-nums}
.matrix td:first-child{text-align:left}
.matrix .hot{color:var(--ink);font-weight:500}
.matrix .zero{color:var(--mist)}

/* ---- mix bar (segmented hairline member) ---- */
.mix{display:flex;height:14px;border:1px solid var(--hairline-2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.mix i{display:block;height:100%;border-right:1px solid var(--surface)}
.mix i.own{background:var(--ink)}
.mix i.competitor{background:var(--graphite)}
.mix i.directory{background:var(--mist)}
.mix i.social{background:var(--hairline-2)}
.mix i.engine{background:#CFCBC0}
.mix i.other{background:var(--hairline)}
.mix-legend{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:12px}
.mix-legend span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--graphite)}
.mix-legend b{display:inline-block;width:10px;height:10px;border:1px solid var(--hairline-2)}

/* ---- states ---- */
.state{padding:var(--s6) var(--s4);text-align:left;border:1px dashed var(--hairline-2);border-radius:var(--r-card);color:var(--graphite);font-size:14px;max-width:64ch}
.state b{color:var(--ink);font-weight:500;display:block;margin-bottom:4px;font-family:var(--display);font-size:18px;letter-spacing:-.02em}
.state code{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--tint);padding:2px 8px;border-radius:var(--r)}
.skeleton{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);padding:var(--s4);min-height:120px;position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;left:var(--s4);right:var(--s4);top:50%;height:1px;background:var(--hairline-2)}
.skeleton .mono{position:absolute;left:var(--s4);top:var(--s4)}
.err{border:1px solid var(--ink);border-radius:var(--r-card);padding:var(--s4);background:var(--surface);max-width:64ch}
.err b{display:block;font-weight:500;margin-bottom:8px}
.err .btn-ghost{margin-top:12px}

/* ---- drawer (sheet from the right) ---- */
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(680px,100%);background:var(--surface);border-left:1px solid var(--hairline);z-index:55;transform:translateX(100%);visibility:hidden;display:flex;flex-direction:column;transition:transform var(--dur) var(--ease-drawer),visibility 0s linear var(--dur)}
.drawer.open{transform:none;visibility:visible;transition:transform 320ms var(--ease-drawer),visibility 0s}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,3vw,32px);border-bottom:1px solid var(--hairline)}
.drawer-body{padding:var(--s4) clamp(16px,3vw,32px) calc(var(--s6) + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;flex:1}
.drawer-body h2{margin-bottom:var(--s2)}
.drawer-body .meta{display:flex;gap:12px;flex-wrap:wrap;margin:var(--s2) 0 var(--s4)}
.drawer-body h3{margin:var(--s5) 0 var(--s3)}
.drawer-body .answer{white-space:pre-wrap;font-size:15px;line-height:1.6;color:var(--ink);max-width:68ch;border-top:1px solid var(--hairline);padding-top:var(--s3)}
.drawer-body .srcs{list-style:none}
.drawer-body .srcs li{padding:8px 0;border-top:1px solid var(--hairline);font-size:13px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.drawer-body .srcs li:first-child{border-top:0}
.drawer-body .srcs a{color:var(--ink);text-decoration:none;word-break:break-all}
.drawer-body .srcs a.own{color:var(--signal)}
.drawer-body .brands li{padding:8px 0;border-top:1px solid var(--hairline);font-size:14px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px}
.drawer-body .brands{list-style:none}
.drawer-body .brands li:first-child{border-top:0}
.drawer-body .brands .self{font-weight:500}
.scrim{position:fixed;inset:0;background:rgba(12,13,15,.28);z-index:50;opacity:0;transition:opacity var(--dur) var(--ease)}
.scrim.show{opacity:1}
body.locked{overflow:hidden}

/* ---- brand & facts, collect, reports ---- */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.panel{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);padding:var(--s4)}
.panel h3{margin-bottom:var(--s3)}
.stack{display:grid;gap:12px}
.stack label{display:block}
.stack label .mono{display:block;margin-bottom:6px}
.stack .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;min-height:44px}
.switch input{appearance:none;width:34px;height:20px;border:1px solid var(--hairline-2);border-radius:10px;position:relative;background:var(--surface);transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);cursor:pointer}
.switch input::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--graphite);transition:transform var(--fast) var(--ease),background var(--fast) var(--ease)}
.switch input:checked{background:var(--ink);border-color:var(--ink)}
.switch input:checked::after{transform:translateX(14px);background:var(--cream)}
.fact-row td:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.fact-row td .quiet{font-size:12px;display:block;margin-top:4px}
.ghost-row td{color:var(--mist)}
.frame{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);width:100%;height:min(78vh,900px);display:block}
.book{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px dashed var(--ink);border-radius:var(--r);font-weight:500;text-decoration:none;color:var(--ink);cursor:grab;min-height:44px}
.book .node{width:8px;height:8px;border-radius:50%;background:var(--signal)}
.steps{counter-reset:s;list-style:none;display:grid;gap:10px;max-width:64ch}
.steps li{position:relative;padding-left:32px;font-size:14px;color:var(--graphite)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;border:1px solid var(--hairline-2);border-radius:50%;font-family:var(--mono);font-size:11px;display:grid;place-items:center;color:var(--ink)}
.kinds{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface);margin-bottom:var(--s4)}
.kinds button{padding:14px 16px;text-align:left;border-right:1px solid var(--hairline);display:grid;gap:4px;min-height:44px;transition:background var(--fast) var(--ease)}
.kinds button:last-child{border-right:0}
.kinds button[aria-pressed="true"]{background:var(--tint)}
.kinds .k{font-size:13px;text-transform:lowercase}
.kinds .c{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;line-height:1}
@media (max-width:820px){.kinds{grid-template-columns:repeat(2,1fr)}.kinds button{border-bottom:1px solid var(--hairline)}}
.item .act{font-size:13px;margin-top:6px;color:var(--ink)}
.item .srcs-inline{margin-top:6px;font-size:12px;color:var(--graphite);word-break:break-all}
.item .srcs-inline a{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--hairline-2);margin-right:10px}

/* ---- login (app/login.html) ---- */
body.login{display:grid;place-items:center;padding:var(--s4)}
.login-box{width:min(440px,100%);border:1px solid var(--hairline);background:var(--surface);padding:var(--s5) var(--s5) var(--s4)}
.login-box .mark{padding:0;margin-bottom:var(--s5)}
.login-box h1{margin-bottom:var(--s2)}
.login-box .stack{margin-top:var(--s4)}
.login-box input{width:100%;background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--r);padding:8px 12px;font-size:16px;min-height:44px;transition:border-color var(--fast) var(--ease)}
.login-box input:focus{border-color:var(--ink);outline:none}
.login-error{font-size:14px;color:var(--ink);display:flex;gap:10px;align-items:baseline}
.login-error[hidden]{display:none}
.login-error::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--signal);transform:translateY(-1px)}
.login-foot{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hairline)}

/* ---- collection ---- */
.key-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px 0;border-top:1px solid var(--hairline)}
.key-row:first-of-type{border-top:0}
.note-err{color:var(--signal)}
.ro-note{font-size:13px;color:var(--graphite);border-left:2px solid var(--hairline-2);padding-left:12px;margin-bottom:var(--s4)}

/* ---- method note ---- */
.method{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--hairline);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.method div{font-size:13px;color:var(--graphite);max-width:34ch}
.method .mono{display:block;margin-bottom:8px;color:var(--ink)}
@media (max-width:820px){.method{grid-template-columns:1fr 1fr}}
.foot{padding:var(--s5) clamp(16px,3vw,40px) var(--s6);border-top:1px solid var(--hairline);margin-top:auto}
.foot .line{font-family:var(--mono);font-size:12px;color:var(--graphite);letter-spacing:.02em}

@media (max-width:640px){
  .top{gap:var(--s2)}
  .top .print{margin-left:0}
  .scope{width:100%;gap:var(--s2)}
  .view{padding-top:var(--s5)}
  td,th{padding:10px 10px}
  .item{grid-template-columns:14px minmax(0,1fr)}
  .item .when{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .drawer,.side{transition:none}
  .live::after{display:none}
}
/* ?shot=1 (screenshots, headless captures): final values, no motion */
html[data-motion="reduce"] *{transition-duration:.01ms!important;animation-duration:.01ms!important}
html[data-motion="reduce"] .drawer,html[data-motion="reduce"] .side{transition:none}
html[data-motion="reduce"] .live::after{display:none}

/* signed change under a figure, the diverging gap bar, the movers grid */
.d{position:relative;display:block;margin-top:2px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--graphite);white-space:nowrap;font-variant-numeric:tabular-nums}
.d i{font-style:normal;display:inline-block;transform:scale(.72)}
.d.up{color:var(--ink);font-weight:500}
.d.down{color:var(--graphite)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
table.deltas td{vertical-align:top}
tr.self-row td{font-weight:500}
.gap-cell{min-width:200px;display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:var(--s3)}
.gap-cell .num{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-align:right}
.gap-bar{position:relative;height:14px}
.gap-bar::before{content:"";position:absolute;left:0;top:6px;height:1px;width:100%;background:var(--hairline)}
.gap-bar::after{content:"";position:absolute;left:50%;top:1px;height:11px;width:1px;background:var(--hairline-2)}
.gap-bar i{position:absolute;top:6px;height:1.5px;width:var(--w,0%);background:var(--graphite)}
.gap-bar.ahead i{left:50%;background:var(--ink)}
.gap-bar.behind i{right:50%}
.movers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.movers-list{list-style:none;margin:0;padding:0}
.movers-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:start;padding:10px 0;border-top:1px solid var(--hairline);font-size:14px}
.movers-list li:first-child{border-top:0}
.movers-list .num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:820px){.movers{grid-template-columns:1fr}.gap-cell{min-width:150px}}

/* page sparkline, url cells, suggestion actions */
.spark{display:block;width:96px;height:22px}
.spark polyline{fill:none;stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.url-cell{max-width:340px;overflow-wrap:anywhere;font-size:13px}
.sub-h{margin:var(--s5) 0 var(--s3);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--graphite)}
.sug-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
tr.ghost-row td{color:var(--graphite)}