/* 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}

/* 5. the sign-in screen (owner, 2026-10-28: "enterprise-grade ... no jazz and flash"). Two quiet halves: the lockup, one
   clay action and one value line; beside it the website's board screen on the mark grid, with ONE motion element, the
   story's stage rail filling once, left to right, and settling in the board's final state (finalBoard on the website).
   No text moves or fades, so contrast holds at every frame; under prefers-reduced-motion the final state shows at once. */
.page-login header.top{display:none}
.page-login .shell{max-width:none}
.page-login main{max-width:none;padding:0;display:flex}
.signin{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(760px,calc(100vh - 150px))}
.si-copy{align-self:center;justify-self:end;width:min(520px,100%);box-sizing:border-box;padding:64px clamp(24px,5vw,72px) 64px var(--gut)}
.si-lock{display:flex;align-items:center;gap:12px;margin:0 0 clamp(40px,7vh,72px)}
.si-mark{width:40px;height:40px;flex:none}
.si-mark .mk-lanes{fill:none;stroke:var(--ink);stroke-width:5}
.si-mark .mk-check{fill:var(--brand)}
.si-wm{font-family:var(--f-disp);font-stretch:var(--disp-w);font-weight:var(--w-wm-a);font-size:26px;line-height:1;letter-spacing:-.025em;color:var(--ink)}
.si-wm b{font-weight:var(--w-wm-b)}
.signin .kicker{margin-bottom:14px}
.signin h1{font-size:clamp(30px,3.2vw,42px);margin:0}
.si-lede{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--ink-2);margin:16px 0 0;max-width:38ch;text-wrap:pretty}
.si-act{margin:34px 0 0}
.si-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;font-size:16px;text-decoration:none}
.si-btn .mslogo{margin-right:12px}
.si-note{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.si-stage{position:relative;display:grid;place-items:center;padding:64px var(--gut);background:var(--bg-2);border-left:1px solid var(--line);overflow:hidden}
.si-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:center;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.si-screen{position:relative;width:min(420px,100%);background:var(--surface);border-radius:var(--r-screen);box-shadow:var(--sh-2);overflow:hidden}
.si-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;box-shadow:0 1px 0 var(--line)}
.si-dots{display:flex;gap:6px}
.si-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.si-title{font:500 12px/1.3 var(--f-mono);font-stretch:87.5%;color:var(--ink-2);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si-body{padding:22px 22px 20px}
.si-story{margin:0;display:grid;gap:6px;font-family:var(--f-disp);font-stretch:var(--disp-w);font-weight:var(--w-head);font-size:17px;line-height:1.3;color:var(--ink)}
.si-key{font:500 12px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.04em;color:var(--brand-text)}
.si-rail{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.si-rail li{display:grid;gap:7px;text-align:center;font:500 11px/1 var(--f-mono);font-stretch:87.5%;color:var(--ink-2);margin:0;padding:0}
.si-rail li::before{content:"";height:4px;border-radius:2px;background:var(--ok);animation:si-fill 1.2s var(--ease) both}
.si-rail li:nth-child(2)::before{animation-delay:.55s}.si-rail li:nth-child(3)::before{animation-delay:1.1s}
.si-rail li:nth-child(4)::before{animation-delay:1.65s}.si-rail li:nth-child(5)::before{animation-delay:2.2s}
.si-rail li:nth-child(6)::before{animation-delay:2.75s}.si-rail li:nth-child(7)::before{animation-delay:3.3s}
.si-rail li:nth-child(8)::before{animation-delay:3.85s}
.si-rail li:first-child::before{animation-delay:.4s}
@keyframes si-fill{0%{background:var(--line-2)}40%{background:var(--brand)}100%{background:var(--ok)}}
.si-now{margin:12px 0 0;font:500 12px/1.3 var(--f-mono);font-stretch:87.5%;color:var(--ink-2)}
.si-gate{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.si-st{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ok-text)}
.si-st::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok)}
.si-who{font-size:14px;color:var(--ink-2)}
.page-login footer{max-width:84ch;margin:0 auto;padding:20px var(--gut);font-size:13px;line-height:1.55;color:var(--ink-2)}
@media (max-width:900px){
  .signin{grid-template-columns:minmax(0,1fr);min-height:0}
  .si-copy{justify-self:stretch;width:auto;max-width:560px;padding:40px var(--gut) 36px}
  .si-lock{margin-bottom:36px}
  .si-stage{border-left:0;border-top:1px solid var(--line);padding:36px var(--gut) 40px}
}
@media (max-width:380px){.si-body{padding:18px 16px 16px}.si-btn{padding:0 20px}}
@media (prefers-reduced-motion:reduce){.si-rail li::before{animation:none}}

/* Story and Project actions (owner, 2026-10-28): one open section at the foot of the page, grouped by intent, each
   action with one plain line; what replaces work, hides or removes it sits apart in a zone with a rose rule. */
.actions{margin:32px 0 8px;border-top:1.5px solid var(--line-2);padding-top:14px}
.actions-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin:0 0 6px}
.actions-head h2{margin:0}
.actions-scope{margin:0;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 8px}
.act-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:4px 40px}
.act-grid>*{min-width:0}
.act-group{padding:6px 0}
.act-group>h3,.act-group>h4{margin:10px 0 2px;font-size:1rem}
.act-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;border-top:1px solid var(--line)}
.act-group>h3+.act-item,.act-group>h4+.act-item{border-top:0}
.act-item>.act-text{flex:1 1 240px;min-width:0}
.act-item p{margin:2px 0 0;color:var(--ink-2)}
.act-item form{margin:0}
.act-form{display:block}
.act-form textarea{width:100%}
.act-fold{display:block}
.act-fold>summary{cursor:pointer;display:flex;flex-direction:column;gap:2px}
.act-fold>summary .small{color:var(--ink-2)}
.act-zone{margin:18px 0 0;padding:4px 0 0 16px;border-left:3px solid var(--bad)}
.act-zone>h3{margin:6px 0 2px}
.act-zone>p{margin:0 0 4px;color:var(--ink-2)}
button[aria-disabled="true"],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
/* a story row's actions (Home, Stories, the project's list): opens in place, so a scrolling table never clips it */
.row-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;
  border:1px solid var(--line-2);border-radius:999px;color:var(--ink);font-size:.88rem;white-space:nowrap}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu>summary::after{content:"";width:10px;height:7px;background:var(--chev) center/contain no-repeat}
.row-menu[open]>summary::after{transform:rotate(180deg)}
.row-menu-body{display:grid;gap:4px;margin-top:6px;min-width:150px}
.row-menu-body form{margin:0}
.row-menu-body button,.row-menu-body a{width:100%;justify-content:flex-start;text-align:left;font-size:.88rem;padding:4px 10px;min-height:28px}
.row-menu-body .muted{font-size:.82rem}
td.row-acts{width:1%;white-space:nowrap}
/* the purge review */
.purge-pick{display:grid;gap:4px;max-height:360px;overflow:auto;padding:4px 0}
.purge-pick label{display:flex;gap:10px;align-items:center;margin:0}
.purge-list{columns:2 220px;margin:6px 0}
.purge-confirm{border-left:3px solid var(--bad);padding:4px 0 4px 16px;margin-top:16px}
.purge-scope{border:0;padding:0;margin:0;display:grid;gap:6px}
.purge-scope label.check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 0}
.purge-scope label.check input[type=radio]{width:20px;height:20px;min-width:20px;margin:2px 0 0;flex:none}
.purge-sub,.purge-pick{margin-left:30px}
/* a scrolling table is the containing block of what it holds, so a visually hidden label in a far column (position:
   absolute) scrolls with it instead of widening the page at 320px */
.scroll{position:relative}

/* The selection and its action panel (owner, 2026-10-28): Select all (n), a box per Jira-item group, then one panel
   that summarises the selection and offers distinct, explained choices; one primary action per step. */
.selbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 10px}
.selbar .muted{color:var(--ink-2)}
.ghead{gap:8px}
.ghead .gpick{width:24px;height:24px;min-width:24px;margin:0 0 0 2px;flex:none;accent-color:var(--brand)}
.ghead .gtoggle{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:32px;background:none;border:0;padding:0;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.ghead .gtoggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.actpanel{border:1.5px solid var(--brand);border-radius:12px;background:var(--surface);padding:14px 16px;margin:0 0 12px}
.actpanel .ap-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between}
.actpanel .ap-sum{font-size:1rem;margin:0;font-weight:650;overflow-wrap:anywhere}
.actpanel fieldset.ap-intents{border:0;margin:10px 0 0;padding:0;display:grid;gap:6px}
.actpanel fieldset.ap-intents legend{font-weight:650;font-size:.9rem;margin:0 0 4px;padding:0}
.ap-intent{display:grid;grid-template-columns:24px 1fr;gap:2px 10px;align-items:start;border:1px solid var(--line-2);
  border-radius:10px;padding:8px 10px;background:var(--bg)}
.ap-intent input[type=radio]{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand)}
.ap-intent label{cursor:pointer;display:block;margin:0}
.ap-intent label strong{display:block}
.ap-intent .ap-explain{display:block;font-size:.85rem;color:var(--ink-2)}
.ap-intent.on{border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.ap-intent.off label{cursor:not-allowed}
.ap-intent.off label strong{color:var(--ink-2)}
.ap-intent .ap-why{grid-column:2;margin:2px 0 0;font-size:.82rem;color:var(--ink)}
.ap-detail{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--brand);background:var(--bg-2);border-radius:0 8px 8px 0}
.ap-detail .f{display:grid;gap:4px;max-width:28rem}
.ap-detail input[type=text],.ap-detail select{max-width:100%}
.ap-detail input:invalid:not(:placeholder-shown){border-color:var(--bad)}
.ap-go{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-top:12px}
.ap-go p{margin:0;flex:1 1 220px}
fieldset.fmt-choice{border:0;margin:0;padding:0;min-width:0}
fieldset.fmt-choice legend{font-weight:650;font-size:.88rem;padding:0;margin:0 0 4px}
.fmt-choice .fmt-opts{display:flex;flex-wrap:wrap;gap:4px 14px}
.fmt-choice label.check{display:inline-flex;gap:6px;align-items:center;margin:0}
.fmt-choice input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--brand)}
.fmt-choice .hint{color:var(--ink-2);font-size:.8rem}
.t-brief{align-items:center;flex-wrap:wrap}
dialog .actpanel.single{border:0;padding:0;margin:0;background:transparent}
dialog#dlg-jira{max-width:min(40rem,calc(100vw - 32px))}
.jira-review .jr-list{padding-left:1.2em}
.jira-review .jr-list>li{margin:0 0 12px}
.jira-review .jr-format{margin:12px 0;align-items:end;flex-wrap:wrap}
.jira-review .jr-send{margin-top:8px}
.jira-format{margin-top:10px}
/* the panel lives in the height-limited master pane: it scrolls on its own and the list keeps room */
.inv-master .actpanel{flex:none;max-height:min(52vh,560px);overflow:auto}
.inv-master .mlist{min-height:min(240px,40vh)}
@media (max-width:1000px){.inv-master .actpanel{max-height:none;overflow:visible}}