/* Tokens. Drawn from the subject: steel and sea-grey paper, chart-ink text, and the safety-yellow highlighter
   an investigator runs over the words that match. Status colours are separate and always paired with words and an icon. */
:root{color-scheme:light;
 --paper:#eef2f5;--surface:#ffffff;--sunk:#e3e9ee;--ink:#14212b;--ink-2:#45545f;--rule:#d3dbe1;--control:#6b7a86;
 --mark:#ffd84d;--mark-ink:#14212b;--ok:#1c6b3c;--close:#8a5300;--bad:#b42318;--focus:#14212b;--btn:#14212b;--btn-ink:#ffffff;
 --bar:#9fb0bd;--bar-top:#14212b;
 --display:"Barlow Semi Condensed","Arial Narrow",sans-serif;--body:Barlow,"Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;
 --paper:#0e161c;--surface:#152029;--sunk:#1b2832;--ink:#e7eef3;--ink-2:#a8b6c1;--rule:#26343f;--control:#71838f;
 --mark:#ffd84d;--mark-ink:#14212b;--ok:#63c98f;--close:#e2b052;--bad:#ff8b7d;--focus:#ffd84d;--btn:#e7eef3;--btn-ink:#0e161c;
 --bar:#4a5c69;--bar-top:#e7eef3}}
:root[data-theme=dark]{color-scheme:dark;
 --paper:#0e161c;--surface:#152029;--sunk:#1b2832;--ink:#e7eef3;--ink-2:#a8b6c1;--rule:#26343f;--control:#71838f;
 --mark:#ffd84d;--mark-ink:#14212b;--ok:#63c98f;--close:#e2b052;--bad:#ff8b7d;--focus:#ffd84d;--btn:#e7eef3;--btn-ink:#0e161c;
 --bar:#4a5c69;--bar-top:#e7eef3}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px;scrollbar-color:var(--control) var(--paper);accent-color:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;caret-color:var(--ink)}
::selection{background:var(--mark);color:var(--mark-ink)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
button,input,select,textarea{font:inherit;color:inherit}
button,a,select,summary,label{touch-action:manipulation}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0 0 12px}
.measure{max-width:68ch}
.muted{color:var(--ink-2)}
.small{font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
code,pre,kbd{font-family:var(--mono);font-size:14px}
kbd{background:var(--sunk);padding:1px 6px;border-radius:4px}
.icon{width:20px;height:20px;flex:none;vertical-align:-4px}

/* Views */
.views{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.views a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:600;color:var(--ink-2)}
.views a:hover{color:var(--ink);background:var(--sunk)}
.views a[aria-current=page]{color:var(--ink);background:var(--surface);box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 12%,transparent)}
.count{font-size:14px;color:var(--ink-2);font-weight:500}
.view[hidden]{display:none}
.wrap{max-width:1240px;margin:0 auto;padding:20px 16px 48px}
.sub-h{font-size:26px;margin:40px 0 8px}
/* Inbox */
.lanes{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 4px}
.lanes .btn[aria-pressed=true]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.inbox-grid{display:grid;gap:24px;margin-top:16px}
@media (min-width:980px){.inbox-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.inbox-grid>.reading{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}}
.queue{list-style:none;margin:0;padding:0}
.queue li+li{border-top:1px solid var(--rule)}
.item{display:grid;gap:2px;width:100%;text-align:left;background:none;border:0;padding:12px 8px;cursor:pointer;border-radius:6px;transition:background-color .12s ease-out}
.item:hover{background:var(--surface)}
.item[aria-current=true]{background:var(--surface);box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 12%,transparent)}
.item .top{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.item .meta{font-size:15px;color:var(--ink-2)}
.stmt{padding:14px 0;border-top:1px solid var(--rule)}
.stmt:first-of-type{border-top:0}
.pair{display:grid;gap:4px 16px;margin-top:8px;font-size:15px}
@media (min-width:640px){.pair{grid-template-columns:1fr 1fr}}
.pair b{display:block;font-size:14px;color:var(--ink-2);font-weight:600}
/* Patterns */
.themes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.theme{background:var(--surface);border-radius:10px;padding:16px 20px;box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 10%,transparent)}
.theme h3{font-size:22px;margin-bottom:4px}
.theme .meter{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden;margin:8px 0;max-width:420px}
.theme .meter i{display:block;height:100%;background:var(--bar-top);border-radius:4px}
.theme .new{font-weight:600}
/* Top bar */
.bar{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:16px 16px 0}
.mark{font:700 22px/1 var(--display);letter-spacing:.01em}
.bar .muted{font-size:15px}
.bar nav{margin-left:auto;font-size:15px}

/* Work area: report on the left, the reading on the right */
.work{max-width:1240px;margin:0 auto;padding:20px 16px 48px;display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.work>*,.inbox-grid>*{min-width:0}
@media (min-width:980px){.work{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.intake{position:sticky;top:16px}}
h1{font-size:clamp(30px,4.2vw,42px);margin-bottom:10px}
.intro{font-size:18px;color:var(--ink-2);margin-bottom:20px;max-width:46ch}

/* Buttons: one primary per view, quiet secondaries, 44px targets */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:6px;border:1px solid var(--control);background:var(--surface);cursor:pointer;font-weight:600;transition:background-color .12s ease-out,border-color .12s ease-out,transform .12s ease-out;text-decoration:none}
.btn:hover{background:var(--sunk)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-busy=true]{opacity:.6;cursor:progress}
.btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);font-size:18px;padding:10px 22px}
.btn.primary:hover{background:color-mix(in oklab,var(--btn) 86%,var(--paper))}
.btn.link{border:0;background:none;padding:8px 4px;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.btn.link:hover{background:none;text-decoration-thickness:2px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:16px;overflow-x:auto}
.tabs [role=tab]{min-height:44px;padding:8px 14px;border:0;background:none;cursor:pointer;font-weight:600;color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs [role=tab]:hover{color:var(--ink)}
[role=tabpanel][hidden]{display:none}

/* Fields: label above, hint below the label, errors next to the field */
.field{display:block;font-weight:600;margin-bottom:4px}
.hint{font-size:15px;color:var(--ink-2);margin:0 0 8px}
textarea{display:block;width:100%;min-height:148px;resize:vertical;font-size:17px;line-height:1.5;padding:12px 14px;border:1px solid var(--control);border-radius:6px;background:var(--surface)}
textarea::placeholder{color:var(--ink-2);opacity:.85}
select,input[type=file]{min-height:44px;padding:8px 10px;border:1px solid var(--control);border-radius:6px;background:var(--surface);max-width:100%}
.actions{margin:12px 0 8px}
.examples{margin-top:16px}
.examples .row{gap:4px 12px}

/* Your corrections: the memory the page keeps for you, visible and editable */
.memory{margin-top:24px;padding-top:16px;border-top:1px solid var(--rule)}
details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary .chev{transition:transform .12s ease-out}
details[open]>summary .chev{transform:rotate(90deg)}
.paste-state{margin-top:8px}
.paste-state textarea{min-height:90px;font-family:var(--mono);font-size:13px}

/* The reading */
.reading{background:var(--surface);border-radius:10px;box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 10%,transparent),0 8px 24px -12px color-mix(in oklab,var(--ink) 22%,transparent);min-height:420px}
.reading section{padding:20px 24px;border-top:1px solid var(--rule)}
.reading section:first-child{border-top:0}
@media (max-width:520px){.reading section{padding:18px 16px}}
.empty{padding:32px 24px;color:var(--ink-2)}
.empty h2{font-size:24px;color:var(--ink);margin-bottom:12px}
.empty ol{margin:12px 0 0;padding-left:22px}.empty li{margin:6px 0}
.status{display:flex;gap:8px;align-items:flex-start;font-weight:600;margin-bottom:8px}
.status.ok{color:var(--ok)}.status.close{color:var(--close)}.status.bad{color:var(--bad)}
.verdict{background:color-mix(in oklab,var(--surface) 92%,var(--ink));border-radius:10px 10px 0 0}
.verdict.provisional .cause{color:var(--ink-2)}
.cause{font-size:clamp(30px,4vw,40px);margin:2px 0 6px}
.group{color:var(--ink-2)}
h3{font-size:21px;margin-bottom:10px}
.sub{color:var(--ink-2);font-size:15px;margin:-4px 0 12px}

/* What is missing */
.fixes{list-style:none;margin:0;padding:0}
.fixes li{display:grid;gap:2px 20px;padding:12px 0;border-top:1px solid var(--rule)}
.fixes li:first-child{border-top:0;padding-top:0}
@media (min-width:640px){.fixes li{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}
.fixes b{color:var(--bad)}
.rebuilt{background:var(--sunk);border-radius:6px;padding:12px 14px;margin:10px 0}

/* Six causes compared; each row is also the correction control */
.compare{list-style:none;margin:0;padding:0}
.compare li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:6px 0}
.compare .name{font-weight:500}
.compare .top .name{font-weight:700}
.compare .meter{grid-column:1/-1;height:8px;background:var(--sunk);border-radius:4px;overflow:hidden}
.compare .meter i{display:block;height:100%;background:var(--bar);border-radius:4px}
.compare .top .meter i{background:var(--bar-top)}
.compare .score{font-size:15px;color:var(--ink-2)}
.compare .btn{min-height:36px;padding:4px 12px;font-size:15px}
@media (pointer:coarse){.compare .btn{min-height:44px}}

/* Past incidents and alerts */
.match{padding:12px 0;border-top:1px solid var(--rule)}
.match:first-of-type{border-top:0;padding-top:0}
.tag{display:inline-block;font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
mark{background:var(--mark);color:var(--mark-ink);padding:.05em .25em;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.alert-rec{margin:8px 0 0;padding:12px 14px;background:var(--sunk);border-radius:6px}
.more{margin-top:8px}

/* Decide */
.choices{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:4px}
.choice{display:block;text-align:left;min-height:64px;padding:10px 14px;border:1px solid var(--control);border-radius:6px;background:var(--surface);cursor:pointer;transition:background-color .12s ease-out,border-color .12s ease-out}
.choice:hover{background:var(--sunk)}
.choice b{display:block}
.choice span{font-size:15px;color:var(--ink-2)}
.choice[aria-pressed=true]{border:2px solid var(--ink);background:var(--sunk);padding:9px 13px}
.record{margin-top:12px;padding:12px 14px;background:var(--sunk);border-radius:6px}

/* Messages and loading */
.msg{display:flex;gap:8px;align-items:flex-start;margin:8px 0}
.msg.bad{color:var(--bad)}.msg.ok{color:var(--ok)}
.skel{padding:24px}
.skel i{display:block;height:14px;border-radius:4px;background:var(--sunk);margin:12px 0}
.skel i:nth-child(1){height:30px;width:60%}.skel i:nth-child(2){width:90%}.skel i:nth-child(3){width:75%}.skel i:nth-child(4){width:85%}
@media (prefers-reduced-motion:no-preference){.skel i{animation:breathe 1.4s ease-in-out 3}}
@keyframes breathe{50%{opacity:.55}}

/* Upload and API */
.scroll{overflow-x:auto;margin-top:12px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--rule)}
th{font-weight:600;color:var(--ink-2)}
pre{background:var(--sunk);border-radius:6px;padding:12px 14px;overflow-x:auto;white-space:pre;margin:8px 0}
.mapping{display:grid;gap:12px;margin-top:12px}
@media (min-width:640px){.mapping{grid-template-columns:1fr 1fr}}
.confirm{margin-top:12px;padding:14px;border:1px solid var(--control);border-radius:6px}

/* About */
.about{max-width:1240px;margin:0 auto;padding:8px 16px 64px}
.about h2{font-size:28px;margin:32px 0 12px}
.about dl{display:grid;gap:4px 24px;margin:0}
@media (min-width:760px){.about dl{grid-template-columns:12rem minmax(0,1fr)}}
.about dt{font-weight:700}.about dd{margin:0 0 12px;max-width:68ch}
.fine{font-size:15px;color:var(--ink-2);max-width:72ch}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}}

/* Shell: site navigation on the left at desk width, a bottom bar on a phone (thumb reach, gloves) */
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--btn);color:var(--btn-ink);padding:10px 14px;border-radius:6px}
.skip:focus{left:8px}
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.sitenav{display:none}
.content{min-width:0;padding-bottom:88px}
.content:focus{outline:none}
@media (min-width:1080px){
 .shell{grid-template-columns:232px minmax(0,1fr)}
 .sitenav{display:block;position:sticky;top:0;height:100vh;overflow:auto;padding:20px 12px 24px 16px;border-right:1px solid var(--rule);background:var(--paper)}
 .content{padding-bottom:32px}
 .tabbar,.more-menu{display:none!important}}
.sitenav .mark{display:block;font:700 26px/1 var(--display);text-decoration:none;padding:4px 8px}
.sitenav .tag{font-size:14px;color:var(--ink-2);margin:6px 8px 16px;line-height:1.4}
.sitenav ul{list-style:none;margin:0;padding:0}
.sitenav .group{font-size:13px;font-weight:600;color:var(--ink-2);margin:16px 8px 4px}
.sitenav a[data-view]{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:8px 10px;border-radius:6px;text-decoration:none;font-weight:600;color:var(--ink-2);transition:background-color .12s ease-out}
.sitenav a[data-view]:hover{background:var(--sunk);color:var(--ink)}
.sitenav a[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 12%,transparent)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--rule);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2);background:none;border:0;border-radius:6px;cursor:pointer}
.tabbar [aria-current=page],.tabbar [aria-expanded=true]{color:var(--ink);background:var(--sunk)}
.tabbar .count{font-size:12px}
.more-menu{position:fixed;left:8px;right:8px;bottom:72px;z-index:11;background:var(--surface);border-radius:10px;padding:8px;box-shadow:0 8px 24px -8px color-mix(in oklab,var(--ink) 35%,transparent)}
.more-menu a{display:flex;justify-content:space-between;min-height:48px;align-items:center;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:600}
.more-menu a:hover{background:var(--sunk)}
input:not([type=file]):not([type=checkbox]):not([type=radio]){min-height:44px;padding:8px 12px;border:1px solid var(--control);border-radius:6px;background:var(--surface);font-size:17px;width:100%}
.about .wrap,.about{max-width:1240px}
/* Today: one worklist, most urgent first */
.worklist{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:10px;box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 10%,transparent)}
.worklist li+li{border-top:1px solid var(--rule)}
.worklist a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:16px 20px;text-decoration:none;transition:background-color .12s ease-out}
.worklist a:hover{background:var(--sunk)}
.worklist .n{font:700 30px/1 var(--display);min-width:2ch;text-align:right}
.worklist .what{font-weight:600}
.worklist .why{grid-column:2;font-size:15px;color:var(--ink-2)}
.worklist .go{color:var(--ink-2)}
.worklist .bad .n{color:var(--bad)}.worklist .close .n{color:var(--close)}
/* Actions */
.alist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.act{background:var(--surface);border-radius:10px;padding:16px 20px;box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 10%,transparent)}
.act h3{font-size:20px;margin-bottom:4px}
.act .meta{font-size:15px;color:var(--ink-2)}
.act.done{opacity:.8}

/* Account box: who is signed in, or the way in */
.account{margin:24px 8px 0;padding-top:16px;border-top:1px solid var(--rule);font-size:15px}
.account .who{font-weight:600;overflow-wrap:anywhere}
.account .org{color:var(--ink-2)}
.more-menu .account{margin:8px 4px 0;padding:12px 8px 4px}
[data-auth][hidden]{display:none!important}
/* People and analytics */
.people{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:10px}
.people li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 20px}
.people li+li{border-top:1px solid var(--rule)}
.people .meta{font-size:15px;color:var(--ink-2)}
.people select{min-height:40px}
.stats{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:10px}
.stats li{display:grid;grid-template-columns:minmax(5ch,auto) minmax(0,1fr);gap:2px 16px;align-items:baseline;padding:14px 20px}
.stats li+li{border-top:1px solid var(--rule)}
.stats .n{font:700 28px/1 var(--display);text-align:right}
.stats .why{grid-column:2;font-size:15px;color:var(--ink-2)}
.source{display:flex;gap:8px;margin:0 0 8px}