/* =====================================================================
   CATO MIGRATOR — GRAYSCALE DESIGN SYSTEM
   Compact, monochrome, modern. Colour is reserved for state only
   (error / warning / destructive), never for decoration.
   Self-contained: no CDN, no external fonts, no JS framework.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* neutral ramp — the whole identity lives here */
  --ink-900:#1a1c1f;   /* primary text, active elements */
  --ink-700:#3a3f45;   /* body text, headings */
  --ink-500:#6b7178;   /* muted text, labels */
  --ink-300:#aeb4ba;   /* disabled, placeholder */
  --line:#e3e6e9;      /* borders, dividers */
  --surface-2:#f4f5f7; /* subtle fills, table heads, hover */
  --surface-1:#fafbfc; /* page background */
  --surface-0:#ffffff; /* cards, inputs */

  /* the single accent: graphite */
  --accent:#2d3138;
  --accent-soft:#eceef1;

  /* state colours — only these two are true colours */
  --danger:#b4232a;
  --danger-soft:rgba(180,35,42,.08);
  --danger-line:rgba(180,35,42,.28);
  --warning:#a66a00;
  --warning-soft:rgba(166,106,0,.07);
  --warning-line:rgba(166,106,0,.28);

  /* type scale (compact) */
  --fs-xs:.6875rem;    /* 11px captions, badges, table heads */
  --fs-sm:.75rem;      /* 12px table cells, labels */
  --fs-md:.8125rem;    /* 13px body */
  --fs-lg:.9375rem;    /* 15px card titles */
  --fs-xl:1.125rem;    /* 18px page titles */
  --fs-2xl:1.375rem;   /* 22px hero */

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --radius:4px;--radius-lg:6px;
  --shadow-sm:0 1px 2px rgba(26,28,31,.05);
  --shadow-md:0 2px 8px rgba(26,28,31,.07);
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --topbar:52px;--sidebar:264px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-1);color:var(--ink-700);font-family:var(--font-sans);
  font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink-900);text-decoration:none;text-decoration-color:var(--ink-300)}
a:hover{color:var(--accent);text-decoration:underline}
h1,h2,h3{margin:0;color:var(--ink-900);font-weight:650;letter-spacing:-.01em}
h1{font-size:var(--fs-2xl);line-height:1.3}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-500);font-weight:700;
  margin:var(--space-5) 0 var(--space-2)}
p{margin:0 0 var(--space-2)}
code,pre,kbd,.mono{font-family:var(--font-mono)}
code{font-size:.92em;background:var(--surface-2);color:var(--ink-900);padding:1px 5px;border-radius:var(--radius)}
pre{background:var(--surface-1);color:var(--ink-700);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-3);overflow:auto;max-height:420px;font-size:var(--fs-xs);margin:var(--space-2) 0}
kbd{font-size:var(--fs-xs);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--radius);
  padding:0 4px;background:var(--surface-2);color:var(--ink-700)}
.muted{color:var(--ink-500)}
.small{font-size:var(--fs-sm)}.tiny{font-size:var(--fs-xs)}
.ok{color:var(--ink-900)}.warn{color:var(--warning)}.bad{color:var(--danger)}
.nowrap{white-space:nowrap}.right{text-align:right}.center{text-align:center}
.mt0{margin-top:0}.mt8{margin-top:var(--space-2)}.mt16{margin-top:var(--space-4)}.mb0{margin-bottom:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------------------------------------------------------------
   2. TOP BAR
   --------------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar);background:var(--surface-0);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-900);font-weight:700;font-size:var(--fs-lg)}
.brand:hover{text-decoration:none;color:var(--ink-900)}
.brand .mark{width:26px;height:26px;border-radius:var(--radius);background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-md);font-weight:700}
.topbar nav{display:flex;gap:var(--space-1);margin-left:var(--space-3)}
.topbar nav a{color:var(--ink-500);font-size:var(--fs-sm);font-weight:600;padding:6px 10px;border-radius:var(--radius)}
.topbar nav a:hover{color:var(--ink-900);background:var(--surface-2);text-decoration:none}
.topbar nav a.active{color:var(--ink-900);background:var(--accent-soft)}
.topbar .ctx{display:flex;align-items:center;gap:var(--space-2);color:var(--ink-500);font-size:var(--fs-sm);min-width:0}
.topbar .ctx b{color:var(--ink-900);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
.topbar .user{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-sm);color:var(--ink-500)}
.topbar .user form{margin:0}

/* ---------------------------------------------------------------------
   3. SHELL
   --------------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:calc(100vh - var(--topbar))}
.sidebar{background:var(--surface-0);border-right:1px solid var(--line);position:sticky;top:var(--topbar);
  height:calc(100vh - var(--topbar));overflow:auto;padding:var(--space-4) var(--space-3) var(--space-5)}
.sidebar .proj{padding:0 var(--space-2) var(--space-3);margin-bottom:var(--space-2);border-bottom:1px solid var(--line)}
.sidebar .proj .name{display:block;font-weight:650;color:var(--ink-900);font-size:var(--fs-md);line-height:1.3}
.sidebar .proj .name:hover{color:var(--accent);text-decoration:none}
.sidebar .proj .src{font-size:var(--fs-xs);color:var(--ink-500);margin-top:var(--space-1);line-height:1.45}
.sidebar .cap{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300);
  padding:var(--space-4) var(--space-2) var(--space-2)}
.main{padding:var(--space-5) var(--space-6) var(--space-6);max-width:1320px;width:100%;margin:0 auto;min-width:0}

/* the wizard stepper: a timeline rail with flat markers */
ol.ph{list-style:none;margin:0;padding:0;position:relative}
ol.ph::before{content:"";position:absolute;left:19px;top:18px;bottom:18px;width:2px;background:var(--line);border-radius:1px}
ol.ph>li{margin:0;position:relative}
ol.ph>li>a,ol.ph>li>span.h{display:flex;gap:10px;align-items:flex-start;padding:7px var(--space-2);border-radius:var(--radius);color:var(--ink-700)}
ol.ph>li>a:hover{background:var(--surface-2);text-decoration:none}
ol.ph .n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink-500);margin-top:1px;
  position:relative;z-index:1;box-shadow:0 0 0 3px var(--surface-0);transition:background .16s ease,color .16s ease}
ol.ph .t{display:block;font-weight:600;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.35}
ol.ph .d{display:block;font-size:var(--fs-xs);color:var(--ink-500);line-height:1.35}
ol.ph>li.done .n{background:var(--accent);border-color:var(--accent);color:#fff}
ol.ph>li.done .t{color:var(--ink-900)}
ol.ph>li.now>a,ol.ph>li.now>span.h{background:var(--accent-soft)}
ol.ph>li.now .n{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 3px var(--surface-0),0 0 0 5px var(--accent-soft)}
ol.ph>li.now .t{color:var(--ink-900);font-weight:700}
ol.ph>li.later .n{background:var(--surface-0)}
ol.ph>li.later .t{color:var(--ink-500);font-weight:500}

/* the steps of the phase you are in: ✓ done · dot now · nothing ahead */
ol.st{list-style:none;margin:2px 0 var(--space-2) 19px;padding:var(--space-1) 0;border-left:2px solid var(--line)}
ol.st li{margin:0;padding-left:var(--space-3)}
ol.st li a,ol.st li span{display:flex;gap:7px;align-items:center;padding:4px var(--space-2);border-radius:var(--radius);
  font-size:var(--fs-sm);color:var(--ink-500);position:relative}
ol.st li a:hover{background:var(--surface-2);color:var(--ink-900);text-decoration:none}
ol.st .sd{flex:0 0 10px;display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;line-height:1;color:var(--accent);border:0;background:none;border-radius:0}
ol.st li.done a,ol.st li.done span{color:var(--ink-700)}
ol.st li.now .sd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
ol.st li.now a,ol.st li.now span{color:var(--ink-900);font-weight:600;background:var(--accent-soft)}
ol.st li.later a,ol.st li.later span{color:var(--ink-300)}
.sidebar .tools a{display:block;padding:5px var(--space-2);border-radius:var(--radius);color:var(--ink-500);font-size:var(--fs-sm);font-weight:500}
.sidebar .tools a:hover{background:var(--surface-2);color:var(--ink-900);text-decoration:none}
.sidebar .tools a.active{background:var(--accent-soft);color:var(--ink-900);font-weight:600}

/* ---------------------------------------------------------------------
   4. PAGE HEAD
   --------------------------------------------------------------------- */
.page-head{display:flex;justify-content:space-between;gap:var(--space-5);align-items:flex-start;margin-bottom:var(--space-4)}
.page-head h1{font-size:var(--fs-xl)}
.page-head .lead{font-size:var(--fs-md);color:var(--ink-700);margin:var(--space-2) 0 2px}
.page-head .why{font-size:var(--fs-sm);color:var(--ink-500);margin:0}
.page-head .why b{color:var(--ink-700);font-weight:600}
.page-head .actions{display:flex;gap:var(--space-2);align-items:center;flex-shrink:0;padding-top:2px}
.req{display:inline-block;vertical-align:middle;margin-right:var(--space-2)}
.progress{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin:0 0 var(--space-4);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--ink-500)}
.progress .bar{width:220px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:var(--space-1)}
.progress .bar span{display:block;height:100%;background:var(--accent);transition:width .4s ease}
.progress a{color:var(--ink-500)}

/* ---------------------------------------------------------------------
   5. SURFACES
   --------------------------------------------------------------------- */
/* the main panel of a page carries the graphite rail; the rest are hairline cards */
.card{background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5) var(--space-5);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
.main>.card:first-of-type,.main>form>.card:first-of-type{border-top:3px solid var(--accent)}
.card>h2{margin-bottom:var(--space-3)}
.card>h3:first-child,.card>.mt0{margin-top:0}
.card.tight{padding:var(--space-3) var(--space-4);border-top-width:1px}
.card.warn{border-top:3px solid var(--warning)}
.card.good{border-top:3px solid var(--accent)}
.grid{display:grid;gap:var(--space-4)}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.split{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap}
details{margin:var(--space-2) 0}
details>summary{cursor:pointer;color:var(--ink-700);font-weight:600;font-size:var(--fs-sm);list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"›";display:inline-block;margin-right:6px;color:var(--ink-300);transition:transform .14s ease}
details[open]>summary::before{transform:rotate(90deg)}
details>summary:hover{color:var(--ink-900)}
details.more{margin:var(--space-4) 0 0;padding-top:var(--space-3);border-top:1px solid var(--line)}
details.more>summary{color:var(--ink-500);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs)}
details.more p{font-size:var(--fs-sm);color:var(--ink-700);margin-top:var(--space-2)}
.empty{padding:var(--space-5);text-align:center;color:var(--ink-500);font-size:var(--fs-sm);
  border:1px dashed var(--ink-300);border-radius:var(--radius);background:var(--surface-1)}

/* stat tiles */
.stats{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}
.stat{background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-4);
  min-width:104px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--ink-500);box-shadow:var(--shadow-sm)}
.stat b{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--ink-900);line-height:1.25;
  text-transform:none;letter-spacing:-.02em}
.stat b.ok{color:var(--ink-900)}.stat b.warn{color:var(--warning)}.stat b.bad{color:var(--danger)}
.stat.accent{border-left:3px solid var(--accent)}

/* report cards: one finding per card, colour only for state */
.rc{display:flex;gap:var(--space-3);align-items:flex-start;border:1px solid var(--line);border-left:3px solid var(--ink-300);
  border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin:var(--space-2) 0;background:var(--surface-0)}
.rc .ic{flex:0 0 22px;height:22px;border-radius:var(--radius);display:grid;place-items:center;font-weight:700;font-size:var(--fs-xs);
  background:var(--surface-2);color:var(--ink-700);border:1px solid var(--line)}
.rc .body{flex:1;min-width:0}
.rc .title{font-weight:650;color:var(--ink-900);font-size:var(--fs-md)}
.rc .text{font-size:var(--fs-sm);color:var(--ink-500);margin-top:2px}
.rc .text p{margin:var(--space-1) 0}
.rc.ok{border-left-color:var(--accent);background:var(--surface-1)}
.rc.info{border-left-color:var(--ink-300);background:var(--surface-1)}
.rc.none{border-left-color:var(--line)}
.rc.warn{border-left-color:var(--warning);background:var(--warning-soft);border-color:var(--warning-line)}
.rc.warn .ic{background:rgba(166,106,0,.12);color:var(--warning);border-color:var(--warning-line)}
.rc.warn .title{color:#7a4e00}
.rc.bad{border-left-color:var(--danger);background:var(--danger-soft);border-color:var(--danger-line)}
.rc.bad .ic{background:rgba(180,35,42,.12);color:var(--danger);border-color:var(--danger-line)}
.rc.bad .title{color:#7e1b20}

/* key/value list */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-2) var(--space-5);margin:var(--space-2) 0 var(--space-3)}
.kv dt{color:var(--ink-500);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding-top:2px}
.kv dd{margin:0;font-size:var(--fs-md);color:var(--ink-700)}
.kv.wide{grid-template-columns:190px 1fr}
.tun{border:1px solid var(--line);border-radius:4px;padding:var(--space-2) var(--space-3);margin:0 0 var(--space-2)}
.tun:last-child{margin-bottom:0}
.tun-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--ink-900);font-weight:600}
.tun-d{color:var(--ink-500);margin-top:3px;line-height:1.5}

/* ---------------------------------------------------------------------
   6. TABLES
   --------------------------------------------------------------------- */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--surface-2);color:var(--ink-900);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:1px solid var(--line)}
td{font-size:var(--fs-sm);color:var(--ink-700);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover>td,table tr:hover>td{background:var(--surface-2)}
.table-wrap{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-0)}
.table-wrap th{position:sticky;top:0;z-index:2}
.table-wrap table th:first-child,.table-wrap table td:first-child{padding-left:var(--space-3)}
table.rules{min-width:980px}
tr.off td{opacity:.5}tr.rejected td{opacity:.5}
tr.approved td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   7. FORMS
   --------------------------------------------------------------------- */
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea{
  font-family:inherit;font-size:var(--fs-md);color:var(--ink-900);background:var(--surface-0);
  border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .6rem;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink-700);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-300)}
textarea{font-family:var(--font-mono);font-size:var(--fs-sm)}
label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);letter-spacing:.01em}
label>input,label>select,label>textarea{margin-top:var(--space-1);font-weight:400}
label.inline{display:inline-flex;align-items:center;gap:6px;width:auto;font-weight:500}
label.inline>input{margin:0;width:auto}
input[type=checkbox],input[type=radio]{width:14px;height:14px;accent-color:var(--accent);vertical-align:-2px}
input[type=file]{font-size:var(--fs-sm);border:1px dashed var(--ink-300);background:var(--surface-1);padding:var(--space-2)}
input[type=file]:hover{border-color:var(--ink-700);background:var(--surface-2)}
.field{margin-bottom:var(--space-3)}
.help{font-size:var(--fs-xs);color:var(--ink-500);margin-top:var(--space-1);line-height:1.45}
.filterbar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-3)}
.filterbar select,.filterbar input{width:auto;min-width:0;font-size:var(--fs-sm);padding:.3rem .5rem}

/* ---------------------------------------------------------------------
   8. BUTTONS — graphite primary, hairline secondary, red only for destruction
   --------------------------------------------------------------------- */
button,.btn{font-family:inherit;font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius);
  padding:.45rem .9rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.35;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
button:hover,.btn:hover{background:var(--ink-900);border-color:var(--ink-900);color:#fff;text-decoration:none}
button.secondary,.btn.secondary{background:transparent;border-color:var(--line);color:var(--ink-700)}
button.secondary:hover,.btn.secondary:hover{background:var(--surface-2);border-color:var(--ink-300);color:var(--ink-900)}
button.danger,.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
button.danger:hover,.btn.danger:hover{background:#8e1b21;border-color:#8e1b21}
button.link,.btn.link{background:none;border-color:transparent;color:var(--ink-700);padding:.35rem .4rem;font-weight:600;text-decoration:underline;
  text-decoration-color:var(--ink-300)}
button.link:hover,.btn.link:hover{background:none;color:var(--ink-900);border-color:transparent}
button.small,.btn.small{font-size:var(--fs-xs);padding:.3rem .6rem}
button:disabled,.btn.disabled{opacity:.45;cursor:not-allowed}
.act{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.act .hint{font-size:var(--fs-xs);color:var(--ink-500);line-height:1.45}

/* ---------------------------------------------------------------------
   9. BADGES — neutral by default; colour only for warn / bad
   --------------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
  padding:.25em .5em;border-radius:var(--radius);background:var(--surface-2);color:var(--ink-700);border:1px solid var(--line);white-space:nowrap}
.badge.auto,.badge.st-asis,.badge.approved,.badge.internet,.badge.wan,.badge.lan,.badge.none,.badge.act-allow,.badge.act-monitor,.badge.act-rbi{
  background:var(--surface-2);color:var(--ink-700);border-color:var(--line)}
.badge.approved,.badge.auto,.badge.st-asis{color:var(--ink-900);border-color:var(--ink-300)}
.badge.review,.badge.pending,.badge.st-changed,.badge.act-prompt,.badge.flag.warn{
  background:var(--warning-soft);color:var(--warning);border-color:var(--warning-line)}
.badge.unsupported,.badge.rejected,.badge.st-no,.badge.act-block,.badge.flag.bad{
  background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.badge.flag{font-weight:500}
.chip{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:.2em .5em;border-radius:var(--radius);
  background:var(--surface-2);color:var(--ink-700);border:1px solid var(--line);white-space:nowrap}
.obj{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-xs);background:var(--surface-1);
  border:1px dashed var(--line);color:var(--ink-700);border-radius:var(--radius);padding:2px 6px;margin:1px 3px 1px 0;white-space:nowrap}
ul.issues{margin:0;padding-left:16px}
ul.issues li{color:var(--warning);font-size:var(--fs-sm)}
ul.notes li{color:var(--ink-500)}

/* ---------------------------------------------------------------------
   10. MESSAGES
   --------------------------------------------------------------------- */
.flash{display:flex;gap:var(--space-2);align-items:flex-start;padding:.6rem .9rem;border-radius:var(--radius);
  margin-bottom:var(--space-3);font-size:var(--fs-sm);border:1px solid var(--line);
  border-left:3px solid var(--accent);background:var(--surface-0);color:var(--ink-700)}
.flash.ok{background:var(--surface-1)}
.flash.error{background:var(--danger-soft);border-color:var(--danger-line);border-left-color:var(--danger);color:#7e1b20}

/* ---------------------------------------------------------------------
   11. CHOICES
   --------------------------------------------------------------------- */
.choices{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr)}
.choice{display:block;background:var(--surface-0);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-3) var(--space-4);cursor:pointer;transition:border-color .14s ease,background .14s ease}
.choice:hover{border-color:var(--ink-300);background:var(--surface-1)}
.choice:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.choice.off{opacity:.55;cursor:not-allowed;background:var(--surface-1)}
.choice .h{display:flex;gap:var(--space-2);align-items:center;font-weight:650;font-size:var(--fs-md);color:var(--ink-900)}
.choice .w,.choice .nd{font-size:var(--fs-sm);color:var(--ink-500);margin-top:var(--space-2)}
.choice .w b,.choice .nd b{color:var(--ink-700);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.05em}
.choice .cap{font-size:var(--fs-xs);margin-top:var(--space-2);color:var(--ink-500)}
.choice .cap.warn{color:var(--warning)}.choice .cap.bad{color:var(--danger)}.choice .cap.ok{color:var(--ink-700)}
.options{display:flex;flex-direction:column;gap:var(--space-2)}
.option{display:flex;gap:var(--space-2);align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);
  padding:.55rem .75rem;cursor:pointer;background:var(--surface-0)}
.option:hover{background:var(--surface-1);border-color:var(--ink-300)}
.option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.option input{margin-top:3px}
.option .t{font-weight:600;color:var(--ink-900);font-size:var(--fs-md)}
.option .d{display:block;font-size:var(--fs-sm);color:var(--ink-500)}

/* ---------------------------------------------------------------------
   12. WALK (rule x of n)
   --------------------------------------------------------------------- */
.walk{display:flex;gap:var(--space-1);align-items:center;flex-wrap:wrap;margin:0 0 var(--space-3)}
.walk .s{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);padding:3px 9px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface-0);color:var(--ink-500)}
.walk .s .sd{display:inline-flex;align-items:center;justify-content:center;min-width:12px;font-size:9px;font-weight:700;
  color:var(--ink-300);border:0;background:none}
.walk .s.done{color:var(--ink-700)}
.walk .s.done .sd{color:var(--accent)}
.walk .s.now{border-color:var(--accent);background:var(--accent-soft);color:var(--ink-900);font-weight:700}
.walk .s.now .sd{color:var(--ink-900)}
.walk .s.later{color:var(--ink-300)}
.walk .gap{color:var(--ink-300)}

/* ---------------------------------------------------------------------
   13. CHECKLIST (manual steps)
   --------------------------------------------------------------------- */
.check{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0;border-top:1px solid var(--line)}
.check:first-of-type{border-top:0}
.check.done{opacity:.55}
.check .body{flex:1;min-width:0}
.check .title{font-weight:650;color:var(--ink-900);font-size:var(--fs-md)}
.check pre{margin:var(--space-2) 0;white-space:pre-wrap;max-height:none}

/* ---------------------------------------------------------------------
   14. QUEUE (all steps)
   --------------------------------------------------------------------- */
ol.queue{list-style:none;margin:0;padding:0}
ol.queue li{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-2) var(--space-3);
  border:1px solid transparent;border-radius:var(--radius);margin:2px 0}
ol.queue li:hover{background:var(--surface-1)}
ol.queue li.now{background:var(--surface-2);border-color:var(--line)}
ol.queue li .n{flex:0 0 20px;height:20px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-500);font-size:var(--fs-xs);font-weight:700;display:grid;place-items:center;margin-top:1px}
ol.queue li.now .n{background:var(--accent);border-color:var(--accent);color:#fff}
ol.queue li .t a{font-weight:600;color:var(--ink-900);font-size:var(--fs-md)}
ol.queue li .t a:hover{color:var(--accent)}
ol.queue li .d{font-size:var(--fs-sm);color:var(--ink-500);margin-top:2px}

/* ---------------------------------------------------------------------
   15. FOOTER BAR
   --------------------------------------------------------------------- */
.foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-5);
  padding-top:var(--space-3);border-top:1px solid var(--line);font-size:var(--fs-sm)}
.foot .hint{color:var(--ink-500);font-size:var(--fs-xs)}
.foot a{color:var(--ink-700);font-weight:600}
.foot a.btn{color:#fff}
.foot a.btn.secondary{color:var(--ink-700)}

/* ---------------------------------------------------------------------
   16. LOGIN
   --------------------------------------------------------------------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--surface-1);padding:var(--space-5)}
.login{background:var(--surface-0);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-5);width:352px;box-shadow:var(--shadow-md)}
.login .brand{margin-bottom:var(--space-1)}
.login .sub{color:var(--ink-500);font-size:var(--fs-sm);margin-bottom:var(--space-4)}
.login button{width:100%;justify-content:center;margin-top:var(--space-4)}

/* ---------------------------------------------------------------------
   17. REPORT
   --------------------------------------------------------------------- */
.report h1{font-size:var(--fs-xl);margin-bottom:var(--space-2)}
.report h2{margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-lg);text-transform:none;letter-spacing:-.01em;color:var(--ink-900)}
.report .toc a{margin-right:var(--space-3)}

/* ---------------------------------------------------------------------
   18. RESPONSIVE & PRINT
   --------------------------------------------------------------------- */
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;padding:var(--space-2) var(--space-3);border-right:0;border-bottom:1px solid var(--line)}
  .sidebar .proj,.sidebar .cap,.sidebar .tools,ol.st{display:none}
  ol.ph{display:flex;gap:var(--space-1);overflow-x:auto;padding-bottom:var(--space-1)}
  ol.ph>li{flex:0 0 auto}ol.ph .d{display:none}
  .g2,.g3,.g4,.choices{grid-template-columns:1fr}
  .main{padding:var(--space-4)}
  .topbar{padding:0 var(--space-3);gap:var(--space-2)}.topbar nav{display:none}
  .kv{grid-template-columns:1fr}.page-head{flex-direction:column}
}
@media print{.topbar,.sidebar,.foot,.progress{display:none}.shell{display:block}.main{padding:0}.card{box-shadow:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}