/* SecureSprints: the Lanes design system for the application (website/design-system is authoritative).
   1. The Lanes tokens, verbatim from website/design-system/tokens.css (light, dark by device, dark by choice).
   2. Aliases: the app's older token names resolve to Lanes roles, so every existing screen takes the Lanes palette and
      type in both themes while screens are rebuilt in Lanes components one by one (SECURESPRINTS-PLAN phase 1).
   3. The shell: wordmark, mark, ribbon. Green and yellow are not Lanes colours: older 'warn' maps to clay. */
/* Lanes design tokens: light (default), dark by device preference, dark by choice. Source: src/01-head.html */
:root{
  --f-disp:"Archivo","Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-sans:"Archivo","Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --disp-w:106%;
  --w-disp:680;--w-head:640;--w-wm-a:430;--w-wm-b:760;
  --max:1360px;--gut:clamp(16px,4vw,48px);--r-screen:18px;--ease:cubic-bezier(.2,0,0,1);

  --bg:#F7F7F5;--bg-2:#EFEFEC;--bg-3:#E5E5E1;--surface:#FFFFFF;--surface-2:#F4F4F1;
  --ink:#17181C;--ink-2:#4B4D53;--ink-3:#6B6D73;--line:#E1E1DD;--line-2:#C9CAC5;
  --brand:#A3402A;--brand-2:#8A3420;--on-brand:#FFFFFF;--brand-text:#983A25;--brand-soft:#F4E3DC;
  --ok:#136C7E;--ok-text:#0F6273;--ok-soft:#DDEEF1;
  --bad:#B21F4D;--bad-text:#A81C47;--bad-soft:#F8E1E8;
  --deep:#A3402A;--d-ink:#FFFFFF;--d-ink-2:#F7DDD3;--d-ink-3:#F3D0C3;--d-line:#BC6650;--d-line-2:#D9937E;--d-surface:#8F3622;
  --d-brand:#FFFFFF;--d-brand-2:#F7E6DF;--d-on-brand:#7E2D1B;--d-brand-text:#FFFFFF;--d-bad:#2A1210;
  --link:#983A25;--focus:#2F5FD0;--field:#FFFFFF;--field-line:#D3D3CE;--code-bg:#1C1D21;--code-ink:#EDEBE6;--scrim:rgba(17,18,21,.55);
  --brand-l:#A3402A;--brand-d:#E2704C;
  --sh-1:0 1px 2px rgba(23,24,28,.07),0 0 0 1px rgba(23,24,28,.05);
  --sh-2:0 1px 2px rgba(23,24,28,.05),0 14px 34px -14px rgba(23,24,28,.22),0 0 0 1px rgba(23,24,28,.05);
  --sh-3:0 24px 60px -16px rgba(23,24,28,.35),0 0 0 1px rgba(23,24,28,.06);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6D73' stroke-width='1.6'/%3E%3C/svg%3E");
  --arrow-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121316;--bg-2:#18191D;--bg-3:#23242A;--surface:#1C1D22;--surface-2:#24252B;
    --ink:#EDECE8;--ink-2:#B4B3AE;--ink-3:#8F8E89;--line:#2A2B31;--line-2:#3B3C43;
    --brand:#E0694A;--brand-2:#EA7D5F;--on-brand:#1A0B06;--brand-text:#F08E6F;--brand-soft:#3A221B;
    --ok:#4DB6C8;--ok-text:#6CC7D6;--ok-soft:#14313A;
    --bad:#F0587F;--bad-text:#FF8BA5;--bad-soft:#3B1621;
    --deep:#7A2D1C;--d-ink:#FFF6F2;--d-ink-2:#F2D3C8;--d-ink-3:#E8C0B2;--d-line:#934029;--d-line-2:#B5634B;--d-surface:#6A2617;
    --d-brand:#FFF6F2;--d-brand-2:#FFFFFF;--d-on-brand:#6A2617;--d-brand-text:#FFF6F2;--d-bad:#1A0C09;
    --link:#F08E6F;--focus:#8AB4FF;--field:#17181C;--field-line:#3B3C43;--code-bg:#0B0C0E;--code-ink:#E9E7E2;--scrim:rgba(0,0,0,.62);
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);
    --sh-2:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
    --sh-3:0 28px 70px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238F8E89' stroke-width='1.6'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121316;--bg-2:#18191D;--bg-3:#23242A;--surface:#1C1D22;--surface-2:#24252B;
  --ink:#EDECE8;--ink-2:#B4B3AE;--ink-3:#8F8E89;--line:#2A2B31;--line-2:#3B3C43;
  --brand:#E0694A;--brand-2:#EA7D5F;--on-brand:#1A0B06;--brand-text:#F08E6F;--brand-soft:#3A221B;
  --ok:#4DB6C8;--ok-text:#6CC7D6;--ok-soft:#14313A;
  --bad:#F0587F;--bad-text:#FF8BA5;--bad-soft:#3B1621;
  --deep:#7A2D1C;--d-ink:#FFF6F2;--d-ink-2:#F2D3C8;--d-ink-3:#E8C0B2;--d-line:#934029;--d-line-2:#B5634B;--d-surface:#6A2617;
  --d-brand:#FFF6F2;--d-brand-2:#FFFFFF;--d-on-brand:#6A2617;--d-brand-text:#FFF6F2;--d-bad:#1A0C09;
  --link:#F08E6F;--focus:#8AB4FF;--field:#17181C;--field-line:#3B3C43;--code-bg:#0B0C0E;--code-ink:#E9E7E2;--scrim:rgba(0,0,0,.62);
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  --sh-3:0 28px 70px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238F8E89' stroke-width='1.6'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* 2. aliases (same specificity as the app's own dark block, loaded after it, so these win in both themes) */
:root:not([data-theme="lanes-never"]){
  --surface-3:var(--bg-3); --line-strong:var(--line-2);
  --accent:var(--brand); --accent-2:var(--brand-2); --accent-ink:var(--on-brand); --accent-soft:var(--brand-soft);
  --accent-glow:color-mix(in srgb,var(--brand) 18%,transparent);
  --ok-bg:var(--ok-soft); --bad-bg:var(--bad-soft); --crit:var(--bad-text);
  --warn:var(--brand-text); --warn-bg:var(--brand-soft);
  --shadow:var(--sh-1); --shadow-lift:var(--sh-2);
  --radius:12px; --radius-s:8px;
  --f-display:var(--f-disp); --f-body:var(--f-sans);
}
body{font-family:var(--f-sans);font-size:16px}
h1,h2,h3{font-family:var(--f-disp);font-stretch:var(--disp-w);font-weight:var(--w-head);letter-spacing:-.018em}
code,pre,.mono,kbd{font-family:var(--f-mono);font-stretch:87.5%}
a{color:var(--link)}

/* 3. shell: The Bend mark and the wordmark (secure + bold sprints, lowercase, no ".ai") */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
.brand .mark .mk-lanes{fill:none;stroke:var(--ink);stroke-width:5}
.brand .mark .mk-check{fill:var(--brand)}
.brand .wm{font-family:var(--f-disp);font-weight:var(--w-wm-a);font-size:20px;line-height:1;letter-spacing:-.025em;font-stretch:var(--disp-w)}
.brand .wm b{font-weight:var(--w-wm-b);color:var(--ink)}

/* the ribbon at the foot of every page (owner, 27 Oct 2026) */
.ribbon{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;padding:18px 16px;border-top:1px solid var(--line);background:var(--bg)}
.ribbon-t{font-family:var(--f-disp);font-weight:var(--w-head);font-size:16px;color:var(--ink)}
.ribbon-sep{width:2px;height:26px;background:var(--line-2)}
.ribbon-p{font-size:15px;color:var(--ink-2)}
.ribbon-logo{height:40px;width:auto;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ribbon-logo{background:#F7F7F5;border-radius:6px;padding:2px 6px}}
:root[data-theme="dark"] .ribbon-logo{background:#F7F7F5;border-radius:6px;padding:2px 6px}
@media (max-width:520px){.ribbon-sep{display:none}.ribbon{flex-direction:column;gap:6px}}

/* 4. Lanes components for the application screens (SECURESPRINTS-PLAN §8, Phase 1). Open lanes, not boxes: a section is
   separated from the next by the two-line lane rule, never by a bordered or shadowed card, so sections nested inside
   sections stay flat. Clay marks the one action per screen; petrol only means verified or approved; rose means
   blocking. The only raised surfaces are floating UI (dialogs, the threat drawer on phones, the Guide panel, menus). */
main{animation:none}
h1{font-family:var(--f-disp);font-stretch:var(--disp-w);font-weight:var(--w-disp);font-size:clamp(28px,3.2vw,40px);line-height:1.06;letter-spacing:-.026em;text-wrap:balance}
h2{font-size:clamp(19px,1.6vw,22px);font-weight:var(--w-head);line-height:1.2}
h3{font-size:17px;font-weight:var(--w-head)}
p{text-wrap:pretty}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:500 12.5px/1.3 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-text)}
.kicker::before{content:"";flex:none;width:22px;height:6px;border-block:1.5px solid currentColor}
.kicker a{color:inherit;text-decoration:none}.kicker a:hover{text-decoration:underline}
.label{font:500 12px var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--ink-2);max-width:62ch;margin:.3rem 0 0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* lanes: every former card is an open section under a two-line lane rule */
.card,details.card{background:transparent;border:0;border-top:1.5px solid var(--line-2);border-radius:0;box-shadow:none;padding:22px 0 10px;margin:0;position:relative}
.card::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1.5px solid var(--line-2)}
.card .card{border-top:0;padding-top:8px}
.card .card::before{content:none}
.card:hover{box-shadow:none}
.card.attention,.mywork.attention{box-shadow:none;border-left:0}
details.card>summary{padding:2px 0}

/* the "now" band: what this screen asks of you, with its one clay action (a tint band, no box, no gradient) */
.status-panel,.status-panel.yourturn,.status-panel.working,.status-panel.yourturn.attention,.status-panel.finished,.status-panel.stopped{background:var(--bg-2);border:0;border-left:4px solid var(--line-2);border-radius:0;box-shadow:none;padding:20px clamp(16px,2.4vw,28px);margin:6px 0 18px}
.status-panel::before,.status-panel.yourturn::after{content:none}
.status-panel.yourturn{border-left-color:var(--ok)}
.status-panel.yourturn.attention,.status-panel.working{border-left-color:var(--brand)}
.status-panel .muted{color:var(--ink-2)}   /* AA on the panel tint (found when the a11y check first saw a live call, 2026-10-28) */
.status-panel h2{font-size:clamp(20px,1.8vw,24px)}
.decision,.decision.needs{border-left:0}

/* buttons: a clay pill for the one primary action, an outlined lane for the rest */
.btn,button{border-radius:999px;border:1.5px solid var(--line-2);background:transparent;color:var(--ink);padding:8px 18px;font-weight:600;box-shadow:none}
.btn:hover,button:hover{border-color:var(--ink-2);box-shadow:none;background:var(--bg-2)}
.btn.primary,button.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);box-shadow:none}
.btn.primary:hover,button.primary:hover{background:var(--brand-2);border-color:var(--brand-2);box-shadow:none}
.btn.danger,button.danger{border-color:var(--bad);color:var(--bad-text);background:transparent}
.btn.danger:hover,button.danger:hover{background:var(--bad-soft)}
.linklike,button.linklike{border:0;background:none;color:var(--link);padding:0;border-radius:0;font-weight:500}
.linklike:hover,button.linklike:hover{background:none}
.btn.small,button.small{padding:5px 13px}

/* tags: 6px corners; colour always paired with a word */
.badge{border-radius:6px;font-weight:600;background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.badge.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok-text)}
.badge.warn,.badge.accent{background:var(--brand-soft);border-color:transparent;color:var(--brand-text)}
.badge.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad-text)}

/* messages: a rule and a tint, not a box */
.flash{border:0;border-left:3px solid var(--line-2);border-radius:0;background:var(--bg-2);color:var(--ink)}
.flash.ok{border-left-color:var(--ok);background:var(--ok-soft)}
.flash.warn{border-left-color:var(--brand);background:var(--brand-soft)}
.flash.bad{border-left-color:var(--bad);background:var(--bad-soft)}

/* fields */
input[type=text],input[type=password],input[type=search],input[type=number],input[type=email],select,textarea{background:var(--field);border:1px solid var(--field-line);border-radius:10px}

/* tiles and lists inside lanes: colour fields, no borders */
.fcard{border:0;border-radius:10px;background:var(--bg-2);box-shadow:none}
.fcard:hover,.fcard:focus-visible{transform:none;box-shadow:none;background:var(--bg-3)}
.tiles-inv .tile{border:0;border-radius:10px;background:var(--bg-2)}
.tiles-inv .tile:hover{transform:none;box-shadow:none}
.tile.sev-high b,.tile.sev-critical b{color:var(--bad-text)}
.qcard{border:0;border-left:3px solid var(--line-2);border-radius:0;background:transparent;padding:6px 0 6px 14px}
.qcard.answered{background:transparent;border-left-color:var(--ok)}
.record{border:0;border-top:1px solid var(--line);border-radius:0;padding:10px 0;background:transparent}
.gsec,.gthread,details.field{border-radius:0;border-width:0 0 1px;background:transparent}
.hub-step a{border:0;border-top:1.5px solid var(--line-2);border-radius:0;background:transparent}
.hub-step a:hover{transform:none;box-shadow:none;background:var(--bg-2)}
.hub-step.now a{border-top-color:var(--brand)}
.inv-dash{background:transparent;border:0;border-bottom:1.5px solid var(--line-2);border-radius:0;padding:4px 0 14px}
.dash-kpi div{border:0;background:var(--bg-2)}
.funnel li{background:var(--bg-2)}.funnel li.attn{background:var(--brand-soft)}.funnel li.attn b{color:var(--brand-text)}
.funnel li.done{background:var(--ok-soft)}.funnel li.done b{color:var(--ok-text)}
.actionbar{border:0;border-bottom:1.5px solid var(--line-2);border-radius:0;box-shadow:none;background:var(--bg);padding:8px 0}
.journey{box-shadow:none;border:0;border-right:1.5px solid var(--line-2);border-radius:0;background:transparent}
.j-now{background:var(--brand-soft);border:0;border-left:3px solid var(--brand);border-radius:0}
.j-now:hover{box-shadow:none;transform:none}
.lcard2:hover,.vitem:hover,.lcard:hover{transform:none}

/* the page head: kicker, title, one line under it */
.ss-head{margin:0 0 16px}
.ss-head h1{margin:0}
.ss-head .ss-sub{display:block;color:var(--ink-2);font-weight:500;font-size:.62em;letter-spacing:-.01em;margin-top:4px}
.ss-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ss-key h1{margin:0}
.ss-head p.ss-summary{font-family:var(--f-disp);font-stretch:var(--disp-w);font-size:clamp(17px,2vw,25px);line-height:1.2;margin:4px 0 0}
/* the run controls next to a story's key (owner, 2026-10-28): compact pills, by state */
.runctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.runctl form{margin:0;display:inline-flex}
.runctl button{min-height:32px;padding:4px 14px;font-size:.92rem}
.ss-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin:0 0 16px}
.ss-head-row>*{min-width:0}

/* "More": secondary detail and actions, closed by default */
details.more{margin:18px 0 0;border-top:1.5px solid var(--line-2);padding-top:6px}
details.more>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 0;color:var(--link);font-weight:600;margin:0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:10px;height:7px;background:var(--chev) center/contain no-repeat;transition:transform .16s var(--ease)}
details.more[open]>summary::after{transform:rotate(180deg)}
.more-body>section,.more-body>form,.more-body>details,.more-body>div{padding:12px 0;border-top:1px solid var(--line)}
.more-body>:first-child{border-top:0}
.more-body h3{margin:0 0 6px}

/* two lanes where the content asks for it: the main lane and a narrow side lane */
.ss-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 40px}
.ss-cols>*{min-width:0}
@media (max-width:900px){.ss-cols{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){details.more>summary::after{transition:none}}
details.bi{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:10px 0}
.j-now .btn{background:var(--bg);color:var(--ink);border-color:var(--line-2)}

/* severity in Lanes colours: Critical and High rose (Critical solid), Medium ink, Low and Note grey; the word always shows */
.s-critical,.s-high{background:var(--bad)}.s-medium{background:var(--ink-2)}.s-low{background:var(--ink-3)}.s-note{background:var(--line-2)}
.mrow .rail.sev-critical,.mrow .rail.sev-high{background:var(--bad)}.mrow .rail.sev-medium{background:var(--ink-2)}.mrow .rail.sev-low{background:var(--ink-3)}.mrow .rail.sev-note{background:var(--line-2)}
.lcard2.sev-critical,.lcard2.sev-high{border-left-color:var(--bad)}.lcard2.sev-medium{border-left-color:var(--ink-2)}.lcard2.sev-low{border-left-color:var(--ink-3)}
.badge.sev-critical{background:var(--bad);border-color:var(--bad);color:var(--on-brand)}
.badge.sev-high{background:var(--bad-soft);border-color:transparent;color:var(--bad-text)}
.badge.sev-medium{border-color:var(--ink-2);color:var(--ink)}
.tile.sev-medium b{color:var(--ink)}
@media (max-width:1100px){.journey{background:var(--surface);box-shadow:var(--sh-3);border-right:0}}
@media (max-width:480px){.funnel{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}.funnel li span{letter-spacing:0}}
/* segmented controls: a tint track, the selected option raised (Lanes .seg); clay stays for the one action */
.segmented{border:0;background:var(--bg-2);border-radius:999px;padding:3px;gap:2px}
.segmented a{border:0;border-radius:999px;padding:6px 14px;color:var(--ink-2)}
.segmented a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.chips-mobile a{border-radius:999px}
.chips-mobile a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.login::before{content:none}
.login{padding:28px 0 0}
.pick-tools .check{white-space:nowrap;margin:0}
.plist{border-radius:0;border-left:0;border-right:0;background:transparent}

/* WCAG 2.2 AA (the a11y check, 2026-10-28): small secondary text on a tinted surface uses --ink-2 (6.5-8.4:1);
   --ink-3 reaches only 4.2-4.5:1 there. Accent words used as text use --brand-text, never the fill colour. */
.tiles-inv .tile span,.funnel li span,.fcard-preview,.fcard>.muted,.mrow .mt .ms,.mrow .mt .ms .mono,.dash-kpi span,.mrow .ptext{color:var(--ink-2)}
.j-now .j-k{color:var(--brand-text)}
/* touch targets of at least 24px (WCAG 2.5.8) */
.mrow .pick input[type=checkbox],label.check input[type=checkbox]{width:24px;height:24px;min-width:24px;margin:0;flex:none}