/* ShipCheck design system. Tokens first; classes documented in docs/DESIGN_SYSTEM.md.
   Dark graphite, one neutral accent, colour only for state. No animations, gradients or shadows, no external assets. */
:root{
  color-scheme:dark;
  --bg:#0d1013;--s1:#14181d;--s2:#1b2127;--s3:#232b33;--line:#2c353e;--control:#6b7885;
  --text:#e8ebee;--text-2:#aeb7c0;--text-3:#8a95a0;--link:#9cc4f2;--ok:#4cc38a;--focus:#f5f7f9;--white:#ffffff;
  --sev-critical:#ff6b8a;--sev-high:#f5933a;--sev-medium:#e3cb4f;--sev-low:#4fb3e8;--sev-info:#9ba6b1;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;--sp8:64px;
  --r1:4px;--r0:2px;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --t-display:clamp(28px,4vw,40px);--t-h1:24px;--t-h2:18px;--t-h3:15px;--t-body:15px;--t-small:13px;--t-mono:13px;--t-label:12px;
  --measure:68ch;--wrap:1120px;
  /* aliases for pages written against the first version */
  --panel:var(--s1);--surface:var(--s1);--surface-2:var(--s2);--border:var(--line);--border-strong:var(--control);
  --muted:var(--text-2);--accent:var(--link);--accent-ink:var(--bg);--bad:var(--sev-critical);--warn:var(--sev-medium);
  --font:var(--font-ui);--mono:var(--font-mono);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:var(--t-body)/1.55 var(--font-ui);min-height:100vh}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px}a:hover{color:var(--text)}
h1,h2,h3,h4{line-height:1.25;margin:0;font-weight:600;text-wrap:balance}
h1{font-size:var(--t-h1);margin:var(--sp5) 0 var(--sp2)}
h2{font-size:var(--t-h2);margin:var(--sp6) 0 var(--sp3)}
h3{font-size:var(--t-h3);line-height:1.35}
p{margin:var(--sp2) 0;max-width:var(--measure)}
code,pre,kbd{font-family:var(--font-mono);font-size:var(--t-mono)}
code{background:var(--s2);padding:1px 6px;border-radius:var(--r0)}
td,th,.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
main:focus{outline:none}
.muted{color:var(--text-2)}.dim{color:var(--text-3)}.ok{color:var(--ok)}
.bad{color:var(--text)}.bad::before{content:"Error: ";font-weight:600;color:var(--sev-critical)}
.warn{color:var(--text)}
.mono{font-family:var(--font-mono)}
.lead{font-size:18px;color:var(--text-2);max-width:var(--measure)}
.stack>*+*{margin-top:var(--sp4)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* shell */
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--sp2);top:var(--sp2);background:var(--s1);padding:var(--sp2) var(--sp3);z-index:20;border:2px solid var(--focus)}
.layout{display:block}
.site-header{border-bottom:1px solid var(--line);background:var(--s1);padding:var(--sp2) var(--sp4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp1) var(--sp4)}
.brand{font:600 17px/1 var(--font-mono);color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp2);letter-spacing:.01em;min-height:44px}
.brand::before{content:"";width:14px;height:14px;background:var(--text);clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%)}
.brand:hover{color:var(--text)}
.menu-btn{display:none;margin-left:auto}
.nav{display:flex;gap:var(--sp1);flex:1;min-width:0;overflow-x:auto}
.nav-group{display:flex;gap:var(--sp1)}
.nav-label{display:none}
.nav a{padding:var(--sp2) var(--sp3);color:var(--text-2);text-decoration:none;min-height:44px;display:inline-flex;flex-direction:column;justify-content:center;white-space:nowrap;border-bottom:2px solid transparent}
.nav a small{display:none;color:var(--text-3);font-size:var(--t-small)}
.nav a:hover{color:var(--text);background:var(--s2)}
.nav a[aria-current=page]{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.account{display:flex;gap:var(--sp2);align-items:center;flex-wrap:wrap}
.account a{color:var(--text-2);padding:var(--sp2);min-height:44px;display:inline-flex;align-items:center}
.content{min-width:0;display:flex;flex-direction:column;min-height:calc(100vh - 62px)}
main{max-width:var(--wrap);width:100%;margin:0 auto;padding:var(--sp2) var(--sp4) var(--sp6);flex:1}
.site-footer{border-top:1px solid var(--line);margin-top:var(--sp6)}
.site-footer-in{max-width:var(--wrap);margin:0 auto;padding:var(--sp4);display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp5);align-items:center;color:var(--text-3);font-size:var(--t-small)}
.site-footer p{margin:0;max-width:none}
@media(max-width:599px){
  .site-header{padding:0 var(--sp4)}
  .menu-btn{display:inline-flex}
  .nav{display:none;flex:0 0 100%;order:3;flex-direction:column;overflow:visible}
  .site-header.open .nav{display:flex}.nav-group{flex-direction:column}
  .nav a{border-bottom:0;border-left:2px solid transparent}.nav a[aria-current=page]{border-left-color:var(--text);background:var(--s3)}
  .account{display:none;order:4;flex:0 0 100%;padding-bottom:var(--sp3)}.site-header.open .account{display:flex}
}
@media(min-width:600px){.account{margin-left:auto}}
@media(min-width:1024px){
  .layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
  .site-header{flex-direction:column;align-items:stretch;flex-wrap:nowrap;border-bottom:0;border-right:1px solid var(--line);padding:var(--sp5) var(--sp3);position:sticky;top:0;height:100vh;overflow-y:auto;gap:var(--sp5)}
  .brand{padding:0 var(--sp3)}
  .nav{flex-direction:column;flex:0 0 auto;overflow:visible;gap:var(--sp4)}
  .nav-group{flex-direction:column}
  .nav-label{display:block;padding:0 var(--sp3);margin-bottom:var(--sp1);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
  .nav a{border-bottom:0;border-left:2px solid transparent;white-space:normal}
  .nav a small{display:block}
  .nav a[aria-current=page]{border-left-color:var(--text);background:var(--s3)}
  .account{margin:auto 0 0;flex-direction:column;align-items:stretch}
  .account a{padding:var(--sp2) var(--sp3)}
  .content{min-height:100vh}
}

/* buttons */
button,.btn{font:inherit;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--control);border-radius:var(--r1);padding:0 var(--sp4);min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2)}
@media(min-width:600px){button,.btn{min-height:40px}}
button:hover,.btn:hover{background:var(--s2);color:var(--text)}
button:disabled{color:var(--text-3);border-color:var(--line);background:transparent;cursor:default}
.btn-primary,button[type=submit]:not(.btn-secondary){background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-primary:hover,button[type=submit]:not(.btn-secondary):hover{background:var(--white);color:var(--bg)}
button[type=submit]:disabled{background:var(--s3);color:var(--text-3);border-color:var(--line)}
.btn-secondary,.btn-quiet{background:transparent;color:var(--text);border-color:var(--control)}
.btn-danger{border-color:var(--sev-critical);color:var(--text)}
.btn-sm{min-height:44px;padding:0 var(--sp3);font-size:var(--t-small)}
@media(min-width:600px){.btn-sm{min-height:36px}}
button[aria-pressed="true"]{background:var(--s3);border-color:var(--text)}
.linklike{background:none;border:0;padding:0;min-height:44px;color:var(--link);text-decoration:underline;font-weight:400}
.linklike:hover{background:none;color:var(--text)}

/* fields */
label,.label{display:block;color:var(--text);font-weight:600;font-size:var(--t-small);margin:var(--sp4) 0 var(--sp1)}
.hint{color:var(--text-3);font-size:var(--t-small);margin:0 0 var(--sp1);font-weight:400;max-width:var(--measure)}
input,textarea,select{font:inherit;color:var(--text);background:var(--s2);border:1px solid var(--control);border-radius:var(--r1);padding:10px var(--sp3);min-height:44px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=number],textarea,select{width:100%}
input::placeholder,textarea::placeholder{color:var(--text-3)}
textarea{min-height:200px;font-family:var(--font-mono);font-size:var(--t-mono);line-height:1.5;resize:vertical}
input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px;accent-color:var(--text)}
input[type=file]{width:100%;padding:var(--sp2)}
input[type=file]::file-selector-button{background:var(--s3);color:var(--text);border:1px solid var(--control);border-radius:var(--r1);padding:6px var(--sp3);margin-right:var(--sp3);font:inherit;cursor:pointer}
[aria-invalid=true]{border-color:var(--sev-critical)}
.field-error{color:var(--text);font-size:var(--t-small);margin:var(--sp1) 0 0}
.field-error::before{content:"Error: ";font-weight:600;color:var(--sev-critical)}
.row{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-top:var(--sp3);align-items:center}
.row label{display:flex;align-items:center;gap:var(--sp2);margin:0;font-weight:400;font-size:var(--t-body)}
.account.row{margin-top:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pw-wrap{display:flex;gap:var(--sp2)}.pw-wrap input{flex:1}

/* cards, panels */
.card,.panel{display:block;background:var(--s1);border:1px solid var(--line);border-radius:var(--r1);padding:var(--sp4);color:var(--text);text-decoration:none}
a.card:hover{border-color:var(--control);background:var(--s2);color:var(--text)}
.card h2,.card h3{margin:0 0 var(--sp1)}
.card p{margin:0;color:var(--text-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp3);padding:0;margin:var(--sp3) 0;list-style:none}
.panel-title{margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--sp5)}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

/* tabs (segmented) */
.tabs{display:inline-flex;flex-wrap:wrap;border:1px solid var(--control);border-radius:var(--r1);margin:var(--sp3) 0;max-width:100%}
.tabs button{border:0;border-radius:0;color:var(--text-2);border-bottom:2px solid transparent}
.tabs button+button{border-left:1px solid var(--line)}
.tabs button:hover{background:var(--s2);color:var(--text)}
.tabs button[aria-selected="true"]{background:var(--s3);color:var(--text);border-bottom-color:var(--text)}

/* severity: word + 4-cell glyph (filled 4/3/2/1/0), never colour alone.
   Markup: <span class="badge badge-high"><span class="glyph" aria-hidden="true"><i></i><i></i><i></i><i></i></span>high</span> (JS: sevBadge) */
.badge{display:inline-flex;align-items:center;gap:var(--sp2);font-size:var(--t-label);font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.glyph{display:inline-flex;gap:2px;flex:none}
.glyph i{display:block;width:4px;height:12px;border:1px solid var(--control);background:transparent}
.badge-critical .glyph i,.badge-high .glyph i:nth-child(-n+3),.badge-medium .glyph i:nth-child(-n+2),.badge-low .glyph i:nth-child(1){background:currentColor;border-color:currentColor}
.badge-critical .glyph i{background:currentColor;border-color:currentColor}
.badge-critical,.c-critical{color:var(--sev-critical)}
.badge-high,.c-high{color:var(--sev-high)}
.badge-medium,.c-medium{color:var(--sev-medium)}
.badge-low,.c-low{color:var(--sev-low)}
.badge-info,.c-info{color:var(--sev-info)}
.badge-ok{color:var(--ok)}.badge-neutral{color:var(--text-2)}
.badge-ok::before,.badge-neutral::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.tag{display:inline-block;font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.sev{font-weight:600;text-transform:uppercase;font-size:var(--t-label);letter-spacing:.06em}

/* report summary */
.summary{background:var(--s1);border:1px solid var(--line);border-radius:var(--r1);padding:var(--sp4);margin:var(--sp3) 0}
.summary h2{margin:0 0 var(--sp1);font-size:var(--t-h3);color:var(--text-2)}
.verdict{font-size:22px;font-weight:600;margin:var(--sp1) 0}
.counts{display:flex;gap:var(--sp2);flex-wrap:wrap;margin:var(--sp3) 0 0;padding:0;list-style:none}
.counts li{margin:0}
.chip{display:inline-flex;align-items:center;gap:var(--sp2);border:1px solid var(--control);border-radius:var(--r1);padding:0 var(--sp3);min-height:44px;font-size:var(--t-small);font-weight:600;background:var(--bg);color:var(--text);font-family:inherit}
@media(min-width:600px){.chip{min-height:36px}}
.chip .badge{color:inherit}
.chip[aria-pressed=true]{background:var(--s3);border-color:var(--text)}
.chip:disabled{color:var(--text-3);border-color:var(--line);background:transparent}
.chip .n{font-variant-numeric:tabular-nums}
.meta{color:var(--text-3);font-size:var(--t-small);margin:var(--sp2) 0 0;max-width:none}
.meter{height:8px;background:var(--s3);border:1px solid var(--control);margin:var(--sp2) 0;max-width:420px}
.meter>i{display:block;height:100%;background:var(--text-2)}
.meter-scale{display:flex;justify-content:space-between;max-width:420px;color:var(--text-3);font-size:var(--t-small)}

/* finding: details.finding > summary */
.finding{background:var(--s1);border:1px solid var(--line);border-radius:var(--r1);margin:var(--sp2) 0;padding:0}
.finding>summary{list-style:none;cursor:pointer;min-height:48px;padding:var(--sp3) var(--sp4);display:grid;grid-template-columns:96px minmax(0,1fr) 20px;gap:var(--sp1) var(--sp3);align-items:start;color:var(--text)}
.finding>summary::-webkit-details-marker{display:none}
.finding>summary:hover{background:var(--s2)}
.finding>summary::after{content:"";grid-column:3;grid-row:1;width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);margin:6px 0 0 4px}
.finding[open]>summary::after{transform:rotate(45deg)}
.finding .badge{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:var(--sp1)}
.finding .f-title{font-size:var(--t-h3);font-weight:600;margin:0;grid-column:2;grid-row:1;overflow-wrap:anywhere}
.finding .f-loc{grid-column:2;grid-row:2;color:var(--text-2);font:var(--t-mono)/1.4 var(--font-mono);overflow-wrap:anywhere}
.finding .f-body{padding:var(--sp1) var(--sp4) var(--sp4) calc(var(--sp4) + 96px + var(--sp3))}
.finding .f-body p{margin:var(--sp2) 0}
.finding .f-body h4{margin:var(--sp4) 0 var(--sp1);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.finding .f-body ol{margin:var(--sp1) 0;padding-left:var(--sp5);max-width:var(--measure)}
.finding .f-body li{margin:var(--sp1) 0}
@media(max-width:599px){
  .finding>summary{grid-template-columns:minmax(0,1fr) 20px}
  .finding .badge{grid-column:1;grid-row:1}.finding .f-title{grid-column:1;grid-row:2}.finding .f-loc{grid-column:1;grid-row:3}
  .finding>summary::after{grid-row:1;grid-column:2}
  .finding .f-body{padding-left:var(--sp4)}
}
.loc{font-family:var(--font-mono);font-size:var(--t-mono);color:var(--text-2);word-break:break-all}
.f-label{font-weight:600}
.report-tools{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center;margin:var(--sp4) 0 var(--sp2)}
.sticky-actions{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:var(--sp2) 0;z-index:5}
@media(min-width:600px){.sticky-actions{position:static;border:0;padding:0}}

/* agent prompt block */
.prompt{border:1px solid var(--control);border-radius:var(--r1);background:var(--s2);margin:var(--sp3) 0}
.prompt-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--line);font-size:var(--t-small);font-weight:600;flex-wrap:wrap}
.prompt-head .count{color:var(--text-3);font-weight:400;margin-left:var(--sp2)}
.prompt pre{margin:0;border:0;border-radius:0;background:transparent;max-height:22em;overflow:auto}
pre{background:var(--s2);border:1px solid var(--line);border-radius:var(--r1);padding:var(--sp3);overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.5}

/* states */
.empty{border:1px solid var(--line);border-radius:var(--r1);padding:var(--sp5);color:var(--text-2);margin:var(--sp3) 0;background:var(--s1)}
.empty h2,.empty h3{color:var(--text);margin-top:0}
.empty p{margin:var(--sp2) 0}
.notice{border:1px solid var(--line);border-radius:var(--r1);padding:var(--sp3) var(--sp4) var(--sp3) var(--sp6);background:var(--s1);margin:var(--sp3) 0;color:var(--text);position:relative}
.notice::before{content:"";position:absolute;left:var(--sp3);top:19px;width:8px;height:8px;background:var(--control)}
.notice-error::before{background:var(--sev-critical)}.notice-warn::before{background:var(--sev-medium)}.notice-ok::before{background:var(--ok)}
.loading{color:var(--text-2)}

/* tables, details */
details{margin-top:var(--sp2)}summary{cursor:pointer}
details:not(.finding)>summary{color:var(--text-2)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r1)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:var(--sp3);border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--text-3);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
tbody tr:hover{background:var(--s2)}tbody tr:last-child td{border-bottom:0}
@media(max-width:599px){
  table.stack-m,table.stack-m tbody,table.stack-m tr,table.stack-m td{display:block;width:100%}
  table.stack-m thead{position:absolute;left:-9999px}
  table.stack-m td{border:0;padding:var(--sp1) var(--sp3)}
  table.stack-m td[data-label]::before{content:attr(data-label) ": ";color:var(--text-3)}
  table.stack-m tr{border-bottom:1px solid var(--line);padding:var(--sp2) 0}
}

/* home */
.hero{padding:var(--sp5) 0 var(--sp3);display:grid;gap:var(--sp5);grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.hero h1{font-size:var(--t-display);line-height:1.15;margin:var(--sp3) 0;max-width:22ch}
.quick textarea{min-height:140px}
.steps{display:grid;grid-template-columns:1fr;gap:var(--sp3);padding:0;margin:var(--sp3) 0;list-style:none;counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;border-top:2px solid var(--text);padding-top:var(--sp3)}
.steps li::before{content:"0" counter(s);font:600 var(--t-small) var(--font-mono);color:var(--text-3)}
.steps h3{margin:var(--sp1) 0}.steps p{margin:0;color:var(--text-2)}

/* dialogs and misc */
dialog{background:var(--s1);color:var(--text);border:1px solid var(--control);border-radius:var(--r1);max-width:520px;width:calc(100% - 24px);padding:var(--sp5)}
dialog::backdrop{background:rgba(0,0,0,.75)}
dialog h2{margin-top:0}
.fb{border-top:1px solid var(--line);padding-top:var(--sp2);margin-top:var(--sp2)}
.narrow{max-width:460px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp2) var(--sp5);margin:var(--sp3) 0}
.kv dt{color:var(--text-3)}.kv dd{margin:0}
.anchors{display:flex;gap:var(--sp3);flex-wrap:wrap;margin:var(--sp3) 0;padding:0;list-style:none}
@media(forced-colors:active){.glyph i{border-color:CanvasText}}
.mt{margin-top:var(--sp5)}
.account a.btn{padding:0 var(--sp4)}
.account a.btn-primary,.account a.btn-primary:hover{color:var(--bg)}
.example-d{display:none}
@media(min-width:820px){.example-m{display:none}.example-d{display:block}}
.example-m>summary{min-height:44px;display:flex;align-items:center}
.account a{text-decoration:none}
.account a:hover{color:var(--text);background:var(--s2)}
.account a[aria-current=page]{color:var(--text);font-weight:600}
@media(min-width:1024px){.account{gap:0}.account a{min-height:40px}.account button{margin-top:var(--sp2)}}
.hero h2.tag{margin:0 0 var(--sp2);font-size:var(--t-label)}

/* design-qa: footer links reach the 24px target minimum */
.site-footer-in a{display:inline-flex;align-items:center;min-height:32px}

/* profile tabs as links, notification switches */
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp4);color:var(--text-2);text-decoration:none;border-bottom:2px solid transparent}
.tabs a+a{border-left:1px solid var(--line)}
.tabs a:hover{background:var(--s2);color:var(--text)}
.tabs a[aria-current="page"]{background:var(--s3);color:var(--text);border-bottom-color:var(--text)}
@media(min-width:600px){.tabs a{min-height:40px}}
.prefs{list-style:none;margin:var(--sp3) 0;padding:0;border:1px solid var(--line);border-radius:var(--r1)}
.prefs li{display:flex;align-items:flex-start;gap:var(--sp3);padding:var(--sp3) var(--sp4)}
.prefs li+li{border-top:1px solid var(--line)}
.prefs input{margin-top:2px;flex:none}
.prefs label{margin:0;font-weight:600;flex:1}
.prefs label .hint{display:block;margin-top:var(--sp1)}
.freq{border:1px solid var(--line);border-radius:var(--r1);margin:var(--sp4) 0;padding:var(--sp3) var(--sp4)}
.freq legend{font-weight:600;font-size:var(--t-small);padding:0 var(--sp2)}