/* Design tokens and base rules for the console. Colours live only here; views use the variables.
   --ink3, the lightest text, holds 4.5:1 on every surface it sits on, in every theme. */

:root{
--pg:#f7f7f8;--sf:#ffffff;--sf2:#f3f3f5;--ink:#18181b;--ink2:#57575f;--ink3:#6b6b76;
--rule:#e7e7eb;--rule2:#d5d5dc;--hatchc:#dcdce3;
--acc:oklch(0.55 0.18 258);--acc-b:oklch(0.84 0.07 258);--acc-w:oklch(0.965 0.022 258);
--rad:8px;--rad2:6px;--shadow:0 1px 2px rgba(20,20,32,.06);
--pass:oklch(0.50 0.12 152);--pass-b:oklch(0.85 0.06 152);--pass-w:oklch(0.97 0.028 152);
--esc:oklch(0.55 0.13 70);--esc-b:oklch(0.85 0.07 70);--esc-w:oklch(0.972 0.03 74);
--chal:oklch(0.52 0.16 258);--chal-b:oklch(0.84 0.07 258);--chal-w:oklch(0.968 0.024 258);
--blk:oklch(0.53 0.19 27);--blk-b:oklch(0.83 0.09 27);--blk-w:oklch(0.968 0.028 27);
--rowpad:9px;--fs:12.5px;
color-scheme:light;
}
:root[data-theme="dark"]{
--pg:#0e0e11;--sf:#17171a;--sf2:#1f1f24;--ink:#f0f0f3;--ink2:#a3a3ad;--ink3:#8a8a96;
--rule:#26262c;--rule2:#3a3a42;--hatchc:#2e2e36;
--acc:oklch(0.72 0.15 258);--acc-b:oklch(0.45 0.10 258);--acc-w:oklch(0.28 0.05 258);
--shadow:0 1px 2px rgba(0,0,0,.45);
--pass:oklch(0.80 0.13 152);--pass-b:oklch(0.42 0.08 152);--pass-w:oklch(0.24 0.04 152);
--esc:oklch(0.83 0.13 78);--esc-b:oklch(0.44 0.08 70);--esc-w:oklch(0.25 0.045 74);
--chal:oklch(0.78 0.12 258);--chal-b:oklch(0.42 0.09 258);--chal-w:oklch(0.25 0.05 258);
--blk:oklch(0.74 0.16 27);--blk-b:oklch(0.43 0.12 27);--blk-w:oklch(0.25 0.055 27);
color-scheme:dark;
}
:root{--pad:14px;--cardpad:16px}
:root[data-density="roomy"]{--rowpad:13px;--fs:13.5px;--pad:18px;--cardpad:20px;--rad:10px}

/* The header bar's own surface; standard contrast keeps it on the plain surface. */
:root{--bar:var(--sf);--bar-rule:var(--rule)}
:root[data-contrast="high"]{--bar:#e9ebf1;--bar-rule:#c8ccd4}
:root[data-theme="dark"][data-contrast="high"]{--bar:#111114;--bar-rule:#2e2e35}

/* High contrast: surfaces a real step apart, secondary ink at ~5:1, hairlines that exist. */
:root[data-contrast="high"]{
--pg:#edeff3;--sf2:#f4f5f8;--ink2:#45464e;--ink3:#686a74;
--rule:#dfe1e6;--rule2:#c8ccd4;--hatchc:#d3d5dc;--shadow:0 1px 2px rgba(20,20,32,.10);
--acc-b:oklch(0.76 0.09 258);
--pass-b:oklch(0.78 0.08 152);--esc-b:oklch(0.78 0.09 70);--chal-b:oklch(0.76 0.09 258);--blk-b:oklch(0.76 0.11 27);
}
:root[data-theme="dark"][data-contrast="high"]{
--pg:#0a0a0d;--sf:#17171a;--sf2:#212127;--ink2:#b4b4bd;--ink3:#8a8a95;
--rule:#2e2e35;--rule2:#45454e;--hatchc:#34343c;--shadow:0 1px 2px rgba(0,0,0,.55);
}

/* Instrument rail: the navigation in near-black in either theme. Custom properties cascade, so
   the rail's own styles pick these up unchanged; its popovers go dark with it. */
:root[data-rail="instrument"] .rail, :root[data-rail="instrument"] .bar{
--pg:#0e0e11;--sf:#18181b;--sf2:#26262c;--ink:#f0f0f3;--ink2:#b0b0ba;--ink3:#8e8e99;
--rule:#2b2b31;--rule2:#3d3d46;--hatchc:#2e2e36;
--acc:oklch(0.72 0.15 258);--acc-b:oklch(0.45 0.10 258);--acc-w:oklch(0.28 0.05 258);--shadow:0 1px 2px rgba(0,0,0,.45);
--pass:oklch(0.80 0.13 152);--esc:oklch(0.83 0.13 78);--chal:oklch(0.78 0.12 258);--blk:oklch(0.78 0.16 27);
}
:root[data-rail="instrument"] .bar{--bar:#18181b;--bar-rule:#2b2b31}
:root[data-rail="instrument"] .rail ::selection,:root[data-rail="instrument"] .bar ::selection{background:var(--ink);color:var(--pg)}
html,body{margin:0;padding:0;background:var(--pg)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc);text-decoration:none}
input::placeholder{color:var(--ink3)}
::selection{background:var(--ink);color:var(--pg)}
@keyframes vh-tick{0%,100%{opacity:.2}50%{opacity:1}}

/* hover states the views ask for by class; inline styles cannot express them */
.hover-sf2:hover{background:var(--sf2)}
.hover-acc-w:hover{background:var(--acc-w)}
.hover-ink:hover{color:var(--ink)}
.hover-ink2:hover{color:var(--ink2)}
.hover-sf-ink:hover{background:var(--sf);color:var(--ink)}
button{font-family:inherit}
.boot{padding:24px;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:12.5px;color:var(--ink3)}

/* focus is visible everywhere; fields ring in the accent */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)!important;box-shadow:0 0 0 2px var(--acc-w)}
/* the loading placeholder pulses slowly; motion is off when the reader asked for none */
.loading span{animation:vh-pulse 1.8s ease-in-out infinite}
@keyframes vh-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Layout. The main column is a size container: the header and the board adapt to the room they
   actually have, which depends on the rail as much as on the window. */
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:88px;container:main/inline-size}
.page{box-sizing:border-box;min-width:0;padding:22px 26px 0}
.page-board{padding:18px 24px 0}

/* The header bar: one row when there is room; otherwise where-you-are and search on the first
   row, when and how fresh on the second. Breadcrumbs truncate, they never stack. */
.bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 24px;position:sticky;top:0;z-index:6;
  border-bottom:1px solid var(--bar-rule);background:var(--bar);color:var(--ink)}
.bar-crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 0;overflow:hidden}
.bar-crumbs>*{flex:none;white-space:nowrap}
.bar-crumbs>a:not(:first-child):not(:last-child){flex:0 1 auto;min-width:4ch;overflow:hidden;text-overflow:ellipsis}
.bar-when,.bar-status{display:flex;align-items:center;gap:6px;flex:none}
/* A cap-sized count can make the status pills wider than a narrow bar: they wrap instead. */
.bar-status{flex:0 1 auto;flex-wrap:wrap;min-width:0;max-width:100%}
.bar-when{flex:0 1 auto;min-width:0;max-width:100%}.bar-when>[data-testid=snapshot-pill]{min-width:0}.bar-when>[data-testid=snapshot-pill]>.pill-text{overflow:hidden;text-overflow:ellipsis}
.bar-fill{display:none}
.bar-break{display:none}
.bar .search{width:300px;flex:none}
@container main (max-width:1359px){
  .bar-crumbs{order:1}
  .bar .search{order:2;width:240px}
  .bar-break{display:block;order:3;flex-basis:100%;height:0}
  .bar-when{order:4}
  .bar-fill{display:block;order:5;flex:1}
  .bar-status{order:6}
}
@container main (max-width:1023px){
  .bar .search{width:auto}
  .bar .search .search-label{display:none}
}

/* The board's row-header column narrows before the tiles do. */
.board{--board-head:150px}
@container main (max-width:1199px){.board{--board-head:124px}}

/* The cohort page: the reading on the left; the decision on the right, in view while the reading
   scrolls. With too little room the decision stacks first, straight under the title. */
.page{--bar-h:49px}
@container main (max-width:1359px){.page{--bar-h:92px}}
.cohort{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start;margin-top:4px}
.cohort-main{min-width:0;container:cohort/inline-size}
.cohort-side{position:sticky;top:calc(var(--bar-h) + 12px);max-height:calc(100vh - var(--bar-h) - 24px);overflow-y:auto;padding-top:14px;scrollbar-width:thin}
.cohort-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.cohort-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@container cohort (max-width:760px){.cohort-why{grid-template-columns:minmax(0,1fr)}.cohort-why>.cohort-why-col{padding:16px 0!important;border-right:0!important}.cohort-why>.cohort-why-col+.cohort-why-col{border-top:1px solid var(--rule)}}
@container cohort (max-width:900px){.cohort-pair{grid-template-columns:minmax(0,1fr)}}
@container main (max-width:1359px){.cohort{grid-template-columns:minmax(0,1fr) 340px}}
@container main (max-width:899px){
  .cohort{grid-template-columns:minmax(0,1fr)}
  .cohort-side{position:static;max-height:none;overflow:visible}
}

/* Skip link: off screen until a keyboard reaches it. */
.skip{position:absolute;left:12px;top:-40px;z-index:50;padding:6px 10px;border-radius:var(--rad2);background:var(--ink);color:var(--pg);font-size:12px;font-weight:600}
.skip:focus{top:10px;color:var(--pg)}

/* Type scale: views take sizes from here rather than pixel values, so density reaches them. */
:root{--t-xs:9px;--t-s:10.5px;--t-m:11.5px;--t-base:12.5px;--t-l:14.5px;--t-xl:17px;--t-h1:32px}
:root[data-density="roomy"]{--t-s:11px;--t-m:12px;--t-base:13.5px;--t-l:15.5px;--t-xl:18px}

/* The frame every destination shares. */
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.page-head{padding-bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.page-title{margin:4px 0 0;font-size:var(--t-h1);font-weight:600;letter-spacing:-.018em;line-height:1.05}
.page-note{font-size:var(--t-m);color:var(--ink3);text-align:right;line-height:1.7;white-space:nowrap}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.card-title{margin:0;font-size:var(--t-l);font-weight:600}
.prose-lead{margin:0 0 14px;font-family:'IBM Plex Serif',Georgia,serif;font-size:14px;line-height:1.5;color:var(--ink2);max-width:80ch}
.link-quiet{color:var(--ink2);border-bottom:1px solid var(--rule2)}
.link-go{color:var(--acc);font-weight:500}
.sep{color:var(--rule2)}
.min0{min-width:0}
@container main (max-width:1099px){.page-note{white-space:normal}}
/* Cohort header figures as a two-column grid on a phone, read left to right. */
@container main (max-width:599px){:is([data-testid=cohort-header],[data-testid=members-header])>div:last-child{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;text-align:left!important;width:100%}:is([data-testid=cohort-header],[data-testid=members-header])>div:last-child>div{padding:0!important;margin:0!important;border-left:0!important;max-width:none!important}}
/* Traffic: two columns as designed; narrower, one column, with the ruler's minor axis marks hidden. */
.traffic-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.traffic-head{flex-wrap:wrap;row-gap:6px}.traffic-head>h2{min-width:0}.traffic-head>span,.traffic-head>div:last-child{flex:none;margin-left:auto;max-width:100%;overflow-wrap:anywhere}
@container main (max-width:899px){.traffic-grid{grid-template-columns:minmax(0,1fr)}.traffic-tick-minor{visibility:hidden}}
/* Traffic networks: the designed six columns; in a narrow card each network stacks into three lines. */
.traffic-nets{container:nets/inline-size}
.traffic-net{display:grid;grid-template-columns:122px 66px minmax(0,1fr) 30px 78px 44px;grid-template-areas:"prefix asn name cc share reqs";gap:12px;align-items:center;padding:var(--rowpad) 14px;border-bottom:1px solid var(--rule)}
.traffic-net>*{min-width:0}
.traffic-net-head{padding:9px 14px;background:var(--sf2);font-size:10.5px;font-weight:500;color:var(--ink3)}
.traffic-net>.n-prefix{grid-area:prefix}.traffic-net>.n-asn{grid-area:asn}.traffic-net>.n-name{grid-area:name}.traffic-net>.n-cc{grid-area:cc}.traffic-net>.n-share{grid-area:share}.traffic-net>.n-reqs{grid-area:reqs}
/* Narrow: the network and its count, then ASN and country, the AS name on its own line, and the
   share. The count takes at most 45% of the row, so a cap-sized one cannot crowd out the rest. */
@container nets (max-width:479px){.traffic-net{grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-areas:"prefix reqs" "asn cc" "name name" "share share";row-gap:5px}.traffic-net>.n-reqs{max-width:45cqw}.traffic-net-head{display:none}}
/* Narrow Traffic header: the note goes under the title and count instead of being squeezed beside them. */
@container main (max-width:599px){.traffic-page-head{flex-direction:column;align-items:stretch;gap:8px}.traffic-page-head>.page-note{text-align:left}}

/* The element a link landed on is marked briefly. */
.landed{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px;transition:outline-color 1.2s ease-out}

/* Live investigation reads reuse the console's existing colour and type system. */
.live-main{line-height:1.55;max-width:1800px}.live-provenance{font-size:11px;color:var(--ink3);margin:0 0 12px;max-width:none!important}.live-provenance b{color:var(--ink)}
.live-main *{box-sizing:border-box}.live-main a{color:var(--acc);text-decoration:none}.live-main a:hover{text-decoration:underline}
.live-main h1{font-size:25px;line-height:1.3;font-weight:550;margin:6px 0 10px}.live-main h1.page-title{font-size:var(--t-h1);font-weight:600;line-height:1.05;margin:4px 0 0}.live-main h2{font-size:16px;font-weight:600;margin:0 0 16px}.live-main h3{font-size:13px;font-weight:600;margin:18px 0 8px}.live-main p{max-width:100ch}.live-main input,.live-main select,.live-main button,.live-button{font:inherit;padding:7px 12px;border:1px solid var(--rule2);border-radius:var(--rad2);background:var(--sf);color:var(--ink)}.live-main button{cursor:pointer}.live-button{display:inline-block;color:var(--acc)!important;background:var(--acc-w);border-color:var(--acc-b)}
.live-snapshot{display:grid;gap:3px;background:var(--sf2);border:1px solid var(--rule);border-left:3px solid var(--acc);padding:12px 16px;margin:20px 0;color:var(--ink2);font-size:11px}.live-snapshot b{color:var(--ink)}.live-situation-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}.live-card{padding:20px;background:var(--sf);border:1px solid var(--rule);border-radius:var(--rad);box-shadow:var(--shadow);margin:18px 0;min-width:0}.live-facts{margin:0}.live-facts>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:8px 0;border-bottom:1px solid var(--rule)}.live-facts>div:last-child{border-bottom:0}.live-facts dt{color:var(--ink3)}.live-facts dd{margin:0;overflow-wrap:anywhere}.live-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.live-unavailable,.live-state{color:var(--ink3)}.live-state{padding:16px;border:1px dashed var(--rule2);border-radius:var(--rad2)}
.live-table-wrap{overflow:auto;max-height:620px}.live-main table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}.live-main th{font-weight:600;color:var(--ink2);background:var(--sf2)}.live-main td,.live-main th{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}.live-main thead th{position:sticky;top:0}.live-main code,.live-main pre{font-family:'IBM Plex Mono',monospace;font-size:11px}.live-main pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:480px;overflow:auto;padding:14px;background:var(--sf2);border:1px solid var(--rule);border-radius:var(--rad2)}.live-trace-step{border-left:2px solid var(--acc-b);padding-left:18px;margin:25px 0}.live-tabs{display:flex;gap:22px;border-bottom:1px solid var(--rule);margin:20px 0}.live-tabs a{padding:10px 0}.live-tabs [aria-current=page]{border-bottom:2px solid var(--acc);font-weight:600}.live-pagination{display:flex;gap:18px;align-items:center;margin:18px 0}
@media(max-width:1000px){.live-columns{grid-template-columns:1fr}.live-facts>div{grid-template-columns:140px minmax(0,1fr)}}
@media(max-width:700px){.live-situation-tiles{grid-template-columns:1fr}.live-facts>div{grid-template-columns:120px minmax(0,1fr)}.live-tabs{gap:15px;flex-wrap:wrap}}
.live-page-link{font-size:12px;padding:4px 10px;border-radius:var(--rad2);border:1px solid var(--rule);background:var(--sf);color:var(--ink2);text-decoration:none}
@media(max-width:1000px){.live-incident-grid{grid-template-columns:1fr!important}.live-incident-grid>div{position:static!important}.live-incident-notes{grid-template-columns:1fr!important}}
@media(max-width:700px){.live-step-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}.live-step-row{grid-template-columns:30px minmax(0,1fr) 92px!important}.live-step-row>:nth-child(3),.live-step-row>:nth-child(4),.live-step-row>:nth-child(6){display:none}.live-decide-fields{grid-template-columns:1fr!important}.live-condition{grid-template-columns:minmax(0,1fr) auto!important}.live-condition>:nth-child(2){grid-column:1/-1;grid-row:2}[data-testid=worklist]>[role=row],[data-testid=incident-row]{grid-template-columns:36px minmax(0,1fr) auto!important}[data-testid=worklist]>[role=row]>:nth-child(2),[data-testid=worklist]>[role=row]>:nth-child(4),[data-testid=worklist]>[role=row]>:nth-child(5),[data-testid=worklist]>[role=row]>:nth-child(6),[data-testid=incident-row]>:nth-child(2),[data-testid=incident-row]>:nth-child(4),[data-testid=incident-row]>:nth-child(5),[data-testid=incident-row]>:nth-child(6){display:none!important}.live-incident-grid table{min-width:560px}}
@media(max-width:1000px){.live-fp-row{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr) 80px!important}.live-fp-row>:nth-child(4),.live-fp-row>:nth-child(5),.live-fp-row>:nth-child(6){display:none!important}.live-fp-counts{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.live-fp-head{display:none!important}.live-fp-row{grid-template-columns:minmax(0,1fr)!important;row-gap:3px!important}.live-fp-row>:nth-child(4),.live-fp-row>:nth-child(5),.live-fp-row>:nth-child(6){display:block!important}}
@media(max-width:1000px){.live-ai-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.live-ai-tiles{grid-template-columns:minmax(0,1fr)!important}.live-ai-head{display:none!important}.live-ai-row{grid-template-columns:minmax(0,1fr)!important;row-gap:3px!important}.live-ai-card-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:1000px){.live-gap-row{grid-template-columns:28px minmax(0,1fr) auto auto!important}.live-gap-row>:nth-child(4){display:none!important}.live-gap-panels{grid-template-columns:1fr!important}}
@media(max-width:700px){.live-gap-row{grid-template-columns:22px minmax(0,1fr)!important;row-gap:8px!important}.live-gap-row>:nth-child(3),.live-gap-row>:nth-child(5){grid-column:2}.live-gap-row>:nth-child(5){text-align:left!important}}
/* Text an AI wrote: one subtle mark wherever it appears; the page says who wrote it. */
.ai-text{text-decoration:underline dotted var(--ink3);text-decoration-thickness:1px;text-underline-offset:3px}
@media(max-width:1000px){.request-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:700px){[data-testid=exchange-header],.request-fact{grid-template-columns:minmax(0,1fr)!important;row-gap:2px!important}}