/* FEMS — friendly bento theme (neo-brutalist, offline system fonts). */
:root{
  /* TwentyFour brand: purple structure, green energy (design-system.md) */
  --tf-dark-purple:#482865; --tf-purple:#783A8E; --tf-purple3:#8B3E90;
  --tf-lime:#C3D200; --tf-green-mid:#8FB22D; --tf-green:#0C6C31; --tf-green-dark:#095126;
  --ink:#1c1522; --paper:#f5f2ec; --white:#fffdfa;
  --yellow:var(--tf-lime); --blue:#d9cce6; --pink:#ff9fca; --green:#c9e06a;
  --purple:#c9b3dd; --orange:#ff9d57; --grey:#e9e4d9;
  --border:2.5px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --small-shadow:3px 3px 0 var(--ink);
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;min-height:100vh;
  color-scheme:light; /* native selects/date-pickers stay light even when Windows is in dark mode */
  background:
    radial-gradient(circle at 8% 12%, rgba(255,216,77,.35), transparent 26%),
    radial-gradient(circle at 92% 10%, rgba(140,188,255,.35), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(169,231,108,.18), transparent 30%),
    var(--paper)}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{background:var(--yellow)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin:6px 0 14px;color:var(--tf-dark-purple)}
h2{font-size:19px;font-weight:800;margin:18px 0 10px;color:var(--tf-purple);
  border-bottom:3px solid var(--tf-lime);padding-bottom:4px;display:inline-block}
h3{font-size:15px;font-weight:800;margin:14px 0 6px;color:var(--tf-green-mid)}
code,pre,.mono{font-family:var(--mono)}
pre{color:var(--ink);background:var(--white);border:var(--border);border-radius:10px;padding:10px 12px;font-size:12.5px;
    white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;box-shadow:var(--small-shadow)}
.mono{font-size:11.5px;word-break:break-all;color:#555}
.muted{color:#5c574b}
.big{font-size:17px}

/* Header */
.topbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 22px;margin:14px auto 0;
  width:min(1280px,calc(100% - 28px));border:var(--border);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--tf-dark-purple),var(--tf-purple));
  border-bottom:6px solid var(--tf-lime);box-shadow:var(--shadow);color:#fff}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand:hover{background:transparent}
.brand-logo{height:32px;display:block}
.brand-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--tf-lime);font-weight:800}
.topbar nav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.topbar nav a{text-decoration:none;font-weight:700;font-size:13px;padding:6px 12px;border:2.5px solid transparent;
  border-radius:10px;color:#fff}
.topbar nav a:hover{border-color:var(--ink);background:var(--tf-lime);color:var(--tf-dark-purple);box-shadow:var(--small-shadow)}
.whoami{display:flex;gap:10px;align-items:center;font-size:12.5px;color:#fff}
.prompt{font-weight:700}
.role{font-size:11px;font-weight:800;text-transform:uppercase;background:var(--tf-lime);color:var(--tf-dark-purple);
  border:2px solid var(--ink);border-radius:8px;padding:1px 8px}
.whoami .btn-ghost{background:transparent;color:#fff;border-color:#ffffff88}
.whoami .btn-ghost:hover{background:var(--tf-lime);color:var(--tf-dark-purple)}

/* Assessment context bar */
.ctxbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:min(1280px,calc(100% - 28px));
  margin:12px auto 0;padding:10px 18px;background:var(--white);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--small-shadow)}
.ctx-ref{font-weight:800}
.ctx-client{color:#5c574b}
.ctx-nav{display:flex;gap:4px;flex-wrap:wrap}
.ctx-nav a{text-decoration:none;font-size:12.5px;font-weight:600;padding:4px 10px;border:2px solid transparent;border-radius:8px}
.ctx-nav a:hover{border-color:var(--ink);background:var(--tf-lime)}

.wrap{width:min(1280px,calc(100% - 28px));margin:0 auto;padding:20px 0 70px}
.footer{width:min(1280px,calc(100% - 28px));margin:0 auto 20px;padding:12px 18px;color:var(--tf-dark-purple);
  font-size:12px;font-weight:600}
.footer b{color:var(--tf-green)}

/* Panels */
.panel{background:var(--white);border:var(--border);border-radius:var(--radius);padding:18px 22px;margin:0 0 18px;
  box-shadow:var(--shadow)}
.panel h2:first-child,.panel h3:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid2,.grid3{grid-template-columns:1fr}}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%;margin:8px 0;background:var(--white);
  border:var(--border);border-radius:12px;overflow:hidden}
th,td{border-bottom:2px solid var(--ink);border-right:2px solid #17171722;padding:8px 11px;text-align:left;
  vertical-align:top;font-size:13.5px}
th{background:var(--grey);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:none}
th:last-child,td:last-child{border-right:none}
tr:hover td{background:#fff8dd}

/* Chips */
.chip{display:inline-block;padding:2px 10px;border:2px solid var(--ink);border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.05em;background:var(--white)}
.chip-pass{background:var(--tf-green-mid);color:var(--tf-dark-purple)}
.chip-fail{background:var(--pink)}
.chip-pending{background:var(--grey)}
.chip-na{background:var(--white);color:#777}
.chip-obs{background:var(--yellow)}

/* Buttons & forms */
.btn{display:inline-block;cursor:pointer;background:var(--white);border:var(--border);color:var(--ink);
  font-family:var(--sans);font-weight:700;font-size:14px;padding:9px 18px;border-radius:12px;
  box-shadow:var(--small-shadow);text-decoration:none;
  transition:transform 120ms ease,box-shadow 120ms ease,background 120ms ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--yellow)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-sm{padding:4px 11px;font-size:12px;border-width:2px;border-radius:9px}
.btn-danger{background:var(--pink)}
.btn-danger:hover{background:var(--pink);filter:brightness(1.05)}
.btn-amber{background:var(--orange)}
.btn-amber:hover{background:var(--orange);filter:brightness(1.06)}
.btn-ghost{background:var(--paper);box-shadow:none;border-style:dashed}
.btn-ghost:hover{background:var(--white)}
.bigbtn{font-size:16px;padding:13px 24px;border-radius:14px}
input,select,textarea{background:var(--white);border:2.5px solid var(--ink);color:var(--ink);
  font-family:var(--sans);font-size:14px;padding:8px 11px;border-radius:10px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--purple);outline-offset:1px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--ink);transform:scale(1.25)}
input[type=file]{padding:6px;background:var(--paper)}
label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:10px 0 4px;color:#4c473b}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
form.inline{display:inline}

/* Flash + toast */
.flash{border:var(--border);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:14px;
  font-weight:600;box-shadow:var(--small-shadow);background:var(--white)}
.flash-success{background:var(--tf-green-mid);color:var(--tf-dark-purple)}
.flash-error{background:var(--pink)}
.flash-info{background:var(--blue)}
.flash-tag{font-family:var(--mono)}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;background:var(--ink);
  color:var(--white);border-radius:12px;padding:10px 18px;font-weight:700;display:none;box-shadow:0 6px 0 #0004}

/* Progress bars */
.bar{height:14px;background:var(--white);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.bar > span{display:block;height:100%;background:var(--tf-green-mid)}
.bar.warn > span{background:var(--yellow)}
.bar.bad > span{background:var(--pink)}

/* Login */
body.bare{display:flex;align-items:center;justify-content:center;min-height:100vh}
.gate{width:min(480px,94vw)}
.ascii{display:none}
.boot{display:none}

/* Guided mode */
.guide-top{margin:6px 0 16px}
.guide-progress{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.gdot{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:2.5px solid var(--ink);background:var(--white);color:var(--ink);font-size:13px;font-weight:800;
  flex:0 0 auto;text-decoration:none;box-shadow:var(--small-shadow)}
.gdot:hover{background:var(--yellow);transform:translate(-1px,-1px)}
.gdot.cur{background:var(--yellow);outline:3px solid var(--purple);outline-offset:2px}
.gdot.done{background:var(--tf-green-mid);color:var(--tf-dark-purple)}
.gline{width:20px;height:3px;background:var(--ink);opacity:.25;flex:0 0 auto}
.gline.done{opacity:1;background:var(--green);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);height:7px}
.guide-card{padding:26px 30px}
.guide-title{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin:0 0 6px}
.guide-blurb{font-size:16px;max-width:72ch;margin:4px 0 18px}
.guide-hint{color:var(--ink);border:2.5px dashed var(--ink);background:#fff8dd;border-radius:12px;padding:10px 14px;
  font-size:14px;max-width:82ch}
.guide-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 34px}

/* Wizard */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.steps a{font-size:11.5px;font-weight:700;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;
  text-decoration:none;background:var(--white);box-shadow:2px 2px 0 var(--ink)}
.steps a.cur{background:var(--yellow);outline:2px solid var(--purple);outline-offset:1px}
.steps a.done{background:var(--tf-green-mid);color:var(--tf-dark-purple)}
.steps a.failed{background:var(--pink)}
.whattodo{background:linear-gradient(180deg,var(--tf-dark-purple),var(--tf-purple));color:#fff}
.whattodo h2{color:var(--tf-lime);border-bottom-color:var(--tf-lime);
  font-size:clamp(22px,2.6vw,28px);line-height:1.25;display:block;padding-bottom:8px}
.whattodo pre,.whattodo code{color:var(--ink);background:var(--white)}
.whattodo .cmdblock pre{color:var(--ink)}
.whattodo details summary{color:var(--tf-purple)}
.whattodo a{color:var(--tf-lime)}
.whattodo table,.whattodo th,.whattodo td{color:var(--ink)}
.whattodo ol{margin:8px 0 2px;padding-left:24px}
.whattodo li{margin:8px 0;font-size:15px;color:#fff}
.whattodo .check-objective{background:var(--white);color:var(--ink)}
.whattodo details{background:var(--white);color:var(--ink)}
.whattodo .muted{color:#e8dff2}
.check-objective{color:var(--ink);border-left:6px solid var(--ink);background:#fff8dd;padding:8px 12px;border-radius:0 10px 10px 0}
.instructions li{margin:6px 0}
.cmdblock{display:flex;gap:8px;align-items:stretch;margin:6px 0}
.cmdblock pre{flex:1;margin:0}
.copybtn{white-space:nowrap;align-self:center}
.suff{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;margin:6px 0}
.suff .ok,.suff .no{border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-weight:700;background:var(--tf-green-mid);color:var(--tf-dark-purple)}
.suff .no{background:var(--pink);color:var(--ink)}
.score-ring{font-size:24px;font-weight:800}
.decision-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;align-items:center}
.decision-row label.opt{display:flex;gap:8px;align-items:center;text-transform:none;font-size:15px;font-weight:700;
  border:2.5px solid var(--ink);padding:10px 16px;border-radius:12px;cursor:pointer;background:var(--white);
  box-shadow:var(--small-shadow);margin:0}
.decision-row label.opt:hover{transform:translate(-1px,-1px)}
.decision-row label.opt:has(input:checked){background:var(--yellow);outline:3px solid var(--purple);outline-offset:1px}
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.evcard{color:var(--ink);border:var(--border);border-radius:12px;padding:10px;background:var(--white);font-size:12px;
  box-shadow:var(--small-shadow)}
.evcard img{width:100%;border:2px solid var(--ink);border-radius:8px;background:var(--paper)}
details{color:var(--ink);border:2.5px dashed var(--ink);border-radius:12px;padding:10px 14px;margin:10px 0;background:var(--white)}
summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--ink)}
.danger-note{border:var(--border);background:var(--pink);padding:10px 14px;border-radius:12px;font-size:13.5px;
  font-weight:600;box-shadow:var(--small-shadow)}
.stage-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.stage{padding:4px 12px;border:2px solid var(--ink);border-radius:999px;font-size:12px;font-weight:700;background:var(--white)}
.stage.cur{background:var(--yellow)}
.stage.ok{background:var(--tf-green-mid);color:var(--tf-dark-purple)}
.stage-arrow{opacity:.4}
.kv{margin:4px 0;font-size:13.5px}
.kv b{display:inline-block;min-width:190px;font-weight:700;color:#4c473b}

/* Paste zone */
.pastezone{border:3px dashed var(--ink);border-radius:14px;background:var(--white);padding:22px 18px;
  text-align:center;cursor:pointer;font-weight:700;font-size:15px;transition:background 120ms ease}
.pastezone:hover,.pastezone:focus,.pastezone.armed{background:var(--yellow);outline:none}
.pastezone.busy{background:var(--blue)}
.pastezone small{display:block;font-weight:400;color:#5c574b;margin-top:4px}

/* 90-day deadline modal — blocking until acknowledged */
.deadline-overlay{position:fixed;inset:0;z-index:400;background:rgba(28,21,34,.78);
  display:grid;place-items:center;padding:20px;overflow:auto}
.deadline-modal{max-width:780px;width:100%;margin:0;border-width:3px;
  box-shadow:10px 10px 0 var(--ink);border-color:#b00020}
.deadline-modal table{margin:12px 0}

@media print{.topbar,.ctxbar,.footer,.guide-nav,#toast,.deadline-overlay{display:none}body{background:#fff}}