/* ============================================================
   Practice — one design system across every page.
   Airline-operations reference: cool load-sheet neutrals, ultramarine
   for structure, and semantic colour reserved strictly for state.
   ============================================================ */
:root {
  --ground:#E9EDF1; --surface:#FFFFFF; --surface-2:#F3F6F9; --sunken:#DFE5EB;
  --ink:#141D27; --ink-soft:#5A6B7C; --ink-faint:#8C9AA8;
  --rule:#C6D0DA; --rule-soft:#DCE3EA;
  --accent:#1B4FD8; --accent-soft:#E4EAFB;
  --held:#0B6E56; --held-soft:#DCF0E8;
  --broken:#BE3019; --broken-soft:#FBE3DE;
  --warn:#9A5B00; --warn-soft:#FAECD6;
  --shadow:0 1px 0 rgba(20,29,39,.06), 0 1px 3px rgba(20,29,39,.05);
  --lift:0 8px 24px rgba(20,29,39,.16);
  --display:Bahnschrift,"DIN Alternate","Archivo Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,"Liberation Mono",monospace;
  --step:4px; --dur:220ms; --ease:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0E141A; --surface:#161E27; --surface-2:#1B242F; --sunken:#10171E;
    --ink:#DFE7EF; --ink-soft:#93A3B3; --ink-faint:#6B7C8D;
    --rule:#2B3845; --rule-soft:#222D38;
    --accent:#78A2FF; --accent-soft:#1B2942;
    --held:#46C79E; --held-soft:#102E27;
    --broken:#FF7458; --broken-soft:#331912;
    --warn:#E7A64A; --warn-soft:#2E2313;
    --shadow:0 1px 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
    --lift:0 8px 28px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --ground:#0E141A; --surface:#161E27; --surface-2:#1B242F; --sunken:#10171E;
  --ink:#DFE7EF; --ink-soft:#93A3B3; --ink-faint:#6B7C8D;
  --rule:#2B3845; --rule-soft:#222D38;
  --accent:#78A2FF; --accent-soft:#1B2942;
  --held:#46C79E; --held-soft:#102E27;
  --broken:#FF7458; --broken-soft:#331912;
  --warn:#E7A64A; --warn-soft:#2E2313;
  --shadow:0 1px 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
  --lift:0 8px 28px rgba(0,0,0,.55);
}

* { box-sizing:border-box; }
html { color-scheme:light dark; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--body);
       font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:600; text-wrap:balance; margin:0; }
a { color:var(--accent); text-underline-offset:3px; }
code,.mono { font-family:var(--mono); font-size:.92em; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.wrap { max-width:1240px; margin:0 auto; padding:0 calc(var(--step)*6) calc(var(--step)*20); }
.eyebrow { font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.16em;
           text-transform:uppercase; color:var(--ink-faint); }
.mono-note { font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); line-height:1.5; }

/* -- top bar ------------------------------------------------------- */
.topbar { border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:0; z-index:20; }
.topbar-in { max-width:1240px; margin:0 auto; padding:calc(var(--step)*3) calc(var(--step)*6);
             display:flex; align-items:center; gap:calc(var(--step)*5); }
.brand { font-family:var(--display); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
         font-size:14px; color:var(--ink); text-decoration:none; }
.brand span { color:var(--ink-faint); }
.nav { display:flex; gap:calc(var(--step)*4); margin-left:calc(var(--step)*4); }
.nav a { font-family:var(--display); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
         color:var(--ink-soft); text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--accent); }
.topbar .right { margin-left:auto; display:flex; gap:calc(var(--step)*2); align-items:center; }

/* -- buttons ------------------------------------------------------- */
.btn { font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
       background:transparent; color:var(--ink-soft); border:1px solid var(--rule); border-radius:2px;
       padding:calc(var(--step)*1.5) calc(var(--step)*3); cursor:pointer; white-space:nowrap;
       text-decoration:none; display:inline-block; }
.btn:hover { color:var(--ink); border-color:var(--ink-soft); }
.btn[disabled] { opacity:.45; cursor:default; }
.btn-solid { background:var(--ink); color:var(--ground); border-color:var(--ink); }
.btn-solid:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-sm { font-size:10.5px; padding:2px calc(var(--step)*2); }

/* -- page head ----------------------------------------------------- */
.pagehead { display:grid; grid-template-columns:1fr auto; gap:calc(var(--step)*6); align-items:end;
            padding:calc(var(--step)*8) 0 calc(var(--step)*5); border-bottom:2px solid var(--ink); }
.pagehead h1 { font-size:clamp(28px,4vw,42px); line-height:1.03; margin-top:calc(var(--step)*2); }
.pagehead p { margin:calc(var(--step)*3) 0 0; max-width:62ch; color:var(--ink-soft); }

.section { margin-top:calc(var(--step)*12); }
.section-head { display:flex; align-items:baseline; gap:calc(var(--step)*3); flex-wrap:wrap;
                border-bottom:1px solid var(--rule); padding-bottom:calc(var(--step)*2);
                margin-bottom:calc(var(--step)*5); }
.section-head h2 { font-size:21px; }
.section-head .hint { color:var(--ink-faint); font-size:13px; margin-left:auto; }

/* -- panels -------------------------------------------------------- */
.panel { background:var(--surface); border:1px solid var(--rule); border-radius:3px; box-shadow:var(--shadow); }
.panel-head { padding:calc(var(--step)*2.5) calc(var(--step)*3); border-bottom:1px solid var(--rule-soft);
              background:var(--surface-2); border-radius:3px 3px 0 0; display:flex; align-items:center;
              justify-content:space-between; gap:calc(var(--step)*2); }
.panel-body { padding:calc(var(--step)*3); }

/* -- metric -------------------------------------------------------- */
.metric { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:calc(var(--step)*6);
          background:var(--surface); border:1px solid var(--rule); border-radius:3px;
          box-shadow:var(--shadow); padding:calc(var(--step)*5); align-items:start; }
.big { display:flex; align-items:baseline; gap:calc(var(--step)*2); }
.big-num { font-family:var(--display); font-size:64px; font-weight:600; line-height:.9;
           font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.big-label { font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--ink-faint); }
.sub { font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:calc(var(--step)*3);
       line-height:1.7; white-space:pre-line; }
.classes { display:flex; flex-direction:column; gap:calc(var(--step)*1.5); }
.cls { display:grid; grid-template-columns:104px minmax(0,1fr) 62px; gap:calc(var(--step)*2); align-items:center; }
.cls-name { font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
.track { height:9px; background:var(--sunken); border-radius:1px; overflow:hidden; }
.fill { height:100%; width:0; background:var(--accent); transition:width var(--dur) var(--ease); }
.fill.good { background:var(--held); } .fill.bad { background:var(--broken); }
.cls-n { font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-align:right;
         font-variant-numeric:tabular-nums; }
.cls.untested { opacity:.55; }

/* -- project cards ------------------------------------------------- */
.group { margin-bottom:calc(var(--step)*7); }
.group-head { display:flex; align-items:baseline; gap:calc(var(--step)*3); margin-bottom:calc(var(--step)*3);
              flex-wrap:wrap; }
.group-head h3 { font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.group-meta { font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); }
.group-bar { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:calc(var(--step)*3); }
.card { background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--rule);
        border-radius:3px; padding:calc(var(--step)*3); display:flex; flex-direction:column;
        gap:calc(var(--step)*2); box-shadow:var(--shadow); }
.card[data-status="doing"] { border-left-color:var(--warn); }
.card[data-status="done"] { border-left-color:var(--held); }
.card.is-next { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.card-top { display:flex; align-items:baseline; gap:calc(var(--step)*2); }
.card-code { font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.06em; }
.card-next { font-family:var(--display); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
             color:var(--accent); margin-left:auto; }
.card h4 { font-size:15.5px; line-height:1.25; }
.card h4 a { color:inherit; text-decoration:none; }
.card h4 a:hover { color:var(--accent); }
.card-learn { font-size:12.5px; color:var(--ink-soft); line-height:1.45; flex:1; }
.card-learn b { color:var(--ink); font-weight:600; }
.card-foot { display:flex; align-items:center; gap:calc(var(--step)*2); }
.card[data-status="doing"] .status-btn { color:var(--warn); border-color:var(--warn); }
.card[data-status="done"] .status-btn { color:var(--held); border-color:var(--held); }
.card-reviews { font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); margin-left:auto; }

/* -- forms & tables ------------------------------------------------ */
.field { display:flex; flex-direction:column; gap:calc(var(--step)); margin-bottom:calc(var(--step)*2.5); }
.field label { font-family:var(--display); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
               color:var(--ink-faint); }
.field input, .field select, .field textarea {
  font-family:var(--mono); font-size:12.5px; background:var(--surface); color:var(--ink);
  border:1px solid var(--rule); border-radius:2px; padding:calc(var(--step)*1.5) calc(var(--step)*2); width:100%; }
.field textarea { resize:vertical; min-height:56px; line-height:1.55; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--step)*2.5); }
table { width:100%; border-collapse:collapse; }
.table-scroll { overflow-x:auto; }
th { font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
     color:var(--ink-faint); text-align:left; padding:calc(var(--step)*1.5) calc(var(--step)*2);
     border-bottom:1px solid var(--rule); white-space:nowrap; }
td { font-family:var(--mono); font-size:12px; padding:calc(var(--step)*1.5) calc(var(--step)*2);
     border-bottom:1px solid var(--rule-soft); vertical-align:top; }
td.num { font-variant-numeric:tabular-nums; text-align:right; }
.res { font-family:var(--display); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
       padding:1px 6px; border-radius:2px; border:1px solid; white-space:nowrap; }
.res.HIT { color:var(--held); border-color:var(--held); background:var(--held-soft); }
.res.PARTIAL { color:var(--warn); border-color:var(--warn); background:var(--warn-soft); }
.res.MISS { color:var(--broken); border-color:var(--broken); background:var(--broken-soft); }
.empty { font-family:var(--mono); font-size:12px; color:var(--ink-faint); padding:calc(var(--step)*4);
         line-height:1.7; }

.due-item { display:flex; align-items:baseline; gap:calc(var(--step)*2); font-family:var(--mono);
            font-size:12px; padding:calc(var(--step)*2); border:1px solid var(--rule-soft);
            border-left:3px solid var(--accent); border-radius:2px; background:var(--surface-2);
            margin-bottom:calc(var(--step)*2); }
.due-item .age { margin-left:auto; color:var(--ink-faint); font-size:11px; }

.banner { padding:calc(var(--step)*3); border-radius:2px; font-family:var(--mono); font-size:12px;
          line-height:1.6; margin-top:calc(var(--step)*4); border:1px solid; }
.banner.warn { border-color:var(--warn); background:var(--warn-soft); color:var(--warn); }
.banner.bad { border-color:var(--broken); background:var(--broken-soft); color:var(--broken); }
.banner.ok { border-color:var(--held); background:var(--held-soft); color:var(--held); }

/* -- login --------------------------------------------------------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:calc(var(--step)*6); }
.login-card { width:100%; max-width:380px; }
.login-card h1 { font-size:26px; margin-bottom:calc(var(--step)*2); }
.login-card p { color:var(--ink-soft); font-size:13.5px; margin:0 0 calc(var(--step)*5); }