/* =====================================================================
   SNOLAB IT Console - "field console" aesthetic.
   Mobile-first, high contrast, large tap targets, Aa text-size control.
   Colour rule: amber = the two flagged pain points; red/green only for
   real status (done, warning, gotcha). Everything else is slate.
   ===================================================================== */
:root{
  --bg:#EEF1F5; --bg-2:#E3E8EE; --card:#FFFFFF;
  --ink:#0F1720; --ink-soft:#39434F; --ink-faint:#5B6675;
  --line:#D5DCE4; --line-soft:#E6EBF0;
  --slate:#1F4E6B; --slate-deep:#123A52; --slate-tint:#E6EFF5;
  --amber:#9A6B12; --amber-tint:#FBF0DA;
  --good:#1E6F4E; --good-bg:#E2F1EA;
  --crit:#A93226; --crit-bg:#F7E6E3;
  --fs:1;
  --mono:ui-monospace,'Cascadia Mono','SF Mono',Consolas,'Liberation Mono',monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,sans-serif;
  --r:12px;
  --shadow:0 1px 2px rgba(15,23,32,.06),0 6px 20px rgba(15,23,32,.06);
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:60px; --top-h:52px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:calc(16.5px * var(--fs)); line-height:1.58;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-weight:650;letter-spacing:-.012em;margin:0;line-height:1.25}
button{font-family:inherit;color:inherit;cursor:pointer}
a{color:var(--slate)}
:focus-visible{outline:2.5px solid var(--slate);outline-offset:2px;border-radius:6px}
.muted{color:var(--ink-faint)}
.hidden{display:none !important}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;height:var(--top-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 14px;background:rgba(238,241,245,.94);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:650;text-decoration:none;color:var(--ink)}
.brand-mark{font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;background:var(--slate);
  padding:3px 7px;border-radius:6px;letter-spacing:.06em}
.topbar-actions{display:flex;gap:4px}
.icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:10px;color:var(--ink-soft)}
.icon-btn:active{background:var(--bg-2);transform:scale(.94)}
.icon-btn.ts{font-weight:700;font-size:16px;color:var(--slate)}

/* ---------- search ---------- */
.searchbar{position:sticky;top:var(--top-h);z-index:39;display:flex;gap:8px;align-items:center;
  padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.searchbar input{flex:1;min-width:0;font:inherit;font-size:calc(16px * var(--fs));padding:10px 12px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--slate);font-weight:600;padding:8px 4px}

/* ---------- layout ---------- */
.view{max-width:780px;margin:0 auto;padding:16px 14px calc(var(--nav-h) + var(--safe-b) + 30px)}
.stack{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card.tight{padding:13px 14px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);font-weight:700}
.page-h{margin:2px 0 12px}
.page-h h1{font-size:calc(23px * var(--fs))}
.page-h p{margin:6px 0 0;color:var(--ink-faint);font-size:calc(14.5px * var(--fs))}
.lead{margin:0;font-size:calc(15px * var(--fs))}

/* ---------- duty list ---------- */
.duty-list{display:flex;flex-direction:column;gap:10px}
.duty-i{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.duty-i:active{transform:scale(.99);background:var(--bg-2)}
.duty-n{flex:none;width:42px;height:42px;border-radius:10px;background:var(--slate-tint);color:var(--slate-deep);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700}
.duty-i.pain .duty-n{background:var(--amber-tint);color:var(--amber)}
.duty-b{min-width:0;flex:1}
.duty-b h3{font-size:calc(16px * var(--fs))}
.duty-b p{margin:2px 0 0;font-size:calc(13.5px * var(--fs));color:var(--ink-faint)}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--bg-2);color:var(--ink-faint);padding:2px 6px;border-radius:5px}
.tag.pain{background:var(--amber-tint);color:var(--amber);font-weight:700}

/* ---------- duty detail ---------- */
.dutyhead{background:var(--slate);color:#fff;border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.dutyhead .eyebrow{color:#A9C9DD}
.dutyhead h1{font-size:calc(21px * var(--fs));margin-top:4px}
.dutyhead .quote{margin:10px 0 0;padding:10px 12px;background:rgba(255,255,255,.11);border-radius:8px;
  font-size:calc(14px * var(--fs));line-height:1.5}
.dutyhead .quote b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#A9C9DD;margin-bottom:4px;font-weight:700}

.sec{margin-top:6px}
.sec-h{display:flex;align-items:center;gap:8px;margin:18px 0 9px}
.sec-h h2{font-size:calc(17px * var(--fs))}
.sec-h .count{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* runbooks */
.rb{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.rb + .rb{margin-top:10px}
.rb-h{width:100%;display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:none;border:0;padding:14px;text-align:left;font-size:calc(15.5px * var(--fs));font-weight:640}
.rb-h .chev{flex:none;transition:transform .18s}
.rb.open .rb-h .chev{transform:rotate(90deg)}
.rb-b{padding:0 14px 14px;border-top:1px solid var(--line-soft)}
.rb ol{margin:12px 0 0;padding-left:0;list-style:none;counter-reset:s}
.rb ol li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:11px;
  font-size:calc(14.5px * var(--fs));line-height:1.55}
.rb ol li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;
  border-radius:6px;background:var(--slate-tint);color:var(--slate-deep);font-family:var(--mono);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* commands */
.cmd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:10px}
.cmd-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;
  border-bottom:1px solid var(--line-soft)}
.cmd-h .l{font-size:calc(14.5px * var(--fs));font-weight:640;min-width:0}
.lang{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--slate-tint);color:var(--slate-deep);padding:2px 6px;border-radius:5px;font-weight:700;flex:none}
.copy{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);padding:5px 9px;border-radius:7px}
.copy.done{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.cmd pre{margin:0;padding:13px;overflow-x:auto;background:#0F1720;color:#E4EBF2;
  font-family:var(--mono);font-size:calc(12.6px * var(--fs));line-height:1.6;white-space:pre;-webkit-overflow-scrolling:touch}
.cmd .note{margin:0;padding:10px 13px;background:var(--slate-tint);color:var(--slate-deep);
  font-size:calc(13.5px * var(--fs));line-height:1.5}

/* bullets */
.bul{margin:0;padding:0;list-style:none}
.bul li{position:relative;padding-left:20px;margin-bottom:9px;font-size:calc(14.5px * var(--fs));line-height:1.55}
.bul li::before{content:"";position:absolute;left:5px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--slate)}
.bul.warn li::before{background:var(--crit)}
.card.warn{background:var(--crit-bg);border-color:#E4BCB5}
.card.warn .eyebrow{color:var(--crit)}
.card.pain{background:var(--amber-tint);border-color:#E6D2A6}
.card.pain .eyebrow{color:var(--amber)}

/* ---------- trees ---------- */
.tree-q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.tree-q h2{font-size:calc(18px * var(--fs));margin-bottom:8px}
.tree-help{margin:0 0 14px;padding:10px 12px;background:var(--slate-tint);border-radius:8px;
  color:var(--slate-deep);font-size:calc(13.5px * var(--fs));line-height:1.5}
.tree-help code{font-family:var(--mono);font-size:.94em}
.opt{display:block;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--line);
  border-radius:10px;padding:14px;margin-bottom:9px;font-size:calc(15px * var(--fs));font-weight:600}
.opt:active{background:var(--slate-tint);border-color:var(--slate)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;font-size:calc(12.5px * var(--fs));color:var(--ink-faint)}
.crumb span{background:var(--bg-2);padding:3px 8px;border-radius:6px}
.done-card{background:var(--good-bg);border:1px solid #B6D8C7;border-radius:var(--r);padding:16px}
.done-card h2{font-size:calc(18px * var(--fs));color:var(--good)}

/* ---------- checklists ---------- */
.prog{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin:10px 0 4px}
.prog i{display:block;height:100%;background:var(--slate);transition:width .25s}
.prog-t{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.grp{margin-top:16px}
.grp h3{font-size:calc(14px * var(--fs));font-family:var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px}
.chk{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px;margin-bottom:7px;cursor:pointer}
.chk input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--slate)}
.chk span{font-size:calc(14.5px * var(--fs));line-height:1.5}
.chk.on{background:var(--good-bg);border-color:#B6D8C7}
.chk.on span{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}

/* instances */
.inst-row{display:flex;gap:8px;margin-bottom:10px}
.inst-row input{flex:1;min-width:0;font:inherit;font-size:calc(15px * var(--fs));padding:11px 12px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--card)}
.btn{background:var(--slate);color:#fff;border:0;border-radius:10px;padding:11px 15px;
  font-size:calc(14.5px * var(--fs));font-weight:640}
.btn.ghost{background:var(--card);color:var(--slate);border:1.5px solid var(--line)}
.btn.danger{background:var(--card);color:var(--crit);border:1.5px solid #E4BCB5}
.btn:active{transform:scale(.98)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);
  border-radius:99px;padding:8px 13px;font-size:calc(13.5px * var(--fs));text-decoration:none;color:var(--ink)}
.pill.on{background:var(--slate);color:#fff;border-color:var(--slate)}

/* ---------- forms / doc builders ---------- */
.fld{margin-bottom:13px}
.fld label{display:block;font-size:calc(13.5px * var(--fs));font-weight:640;margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:calc(15px * var(--fs));
  padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.fld textarea{min-height:88px;resize:vertical;line-height:1.5}
.out{background:#0F1720;color:#E4EBF2;border-radius:var(--r);padding:14px;overflow-x:auto;
  font-family:var(--mono);font-size:calc(12.4px * var(--fs));line-height:1.6;white-space:pre-wrap;word-break:break-word}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:calc(13.5px * var(--fs))}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);background:var(--bg-2);position:sticky;top:0}
td.p{font-family:var(--mono);font-weight:700;white-space:nowrap;color:var(--slate-deep)}
td.s{font-weight:640;white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ---------- calculators ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:calc(14.5px * var(--fs))}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--mono);font-weight:700;text-align:right;word-break:break-all}
.verdict{border-radius:var(--r);padding:14px;margin-top:12px;border:1px solid}
.v-p1{background:var(--crit-bg);border-color:#E4BCB5;color:var(--crit)}
.v-p2{background:var(--amber-tint);border-color:#E6D2A6;color:var(--amber)}
.v-p3{background:var(--slate-tint);border-color:#BFD6E4;color:var(--slate-deep)}
.v-p4{background:var(--bg-2);border-color:var(--line);color:var(--ink-soft)}
.verdict h2{font-size:calc(20px * var(--fs))}
.verdict p{margin:6px 0 0;font-size:calc(14px * var(--fs));line-height:1.5;color:var(--ink-soft)}

/* ---------- search results ---------- */
.res{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 13px;
  margin-bottom:8px;text-decoration:none;color:inherit}
.res .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:700}
.res h3{font-size:calc(15px * var(--fs));margin:3px 0 2px}
.res p{margin:0;font-size:calc(13.5px * var(--fs));color:var(--ink-faint);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
mark{background:#FDE9B5;color:inherit;border-radius:3px;padding:0 2px}

/* ---------- bottom nav ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);display:grid;grid-template-columns:repeat(6,1fr);
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.nav-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--ink-faint);font-size:11px;font-weight:600}
.nav-i svg{width:22px;height:22px}
.nav-i.on{color:var(--slate)}
.nav-i:active{background:var(--bg-2)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  z-index:60;background:var(--ink);color:#fff;padding:11px 17px;border-radius:99px;
  font-size:14px;font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.22)}

/* ---------- labs ---------- */
.lab-head{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;box-shadow:var(--shadow);margin-bottom:12px}
.card.scen{background:var(--slate-tint);border-color:#BFD6E4;margin-bottom:12px}
.card.scen p{margin:0 0 8px;font-size:calc(14.5px * var(--fs));line-height:1.55}
.card.scen p:last-child{margin-bottom:0}

.step-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.step-blk{padding:14px;border-bottom:1px solid var(--line-soft)}
.step-blk:last-child{border-bottom:0}
.step-blk > p{margin:5px 0 0;font-size:calc(15px * var(--fs));line-height:1.55}
.step-blk.why{background:var(--bg-2)}
.step-blk.why > p{color:var(--ink-soft)}
.step-blk.teach{background:var(--card)}
.blk-l{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);font-weight:700;display:block}
.step-blk.why .blk-l{color:var(--ink-faint)}

.step-blk.teach p{margin:9px 0 0;font-size:calc(14.5px * var(--fs));line-height:1.6}
.teach-list{margin:9px 0 0;padding-left:20px}
.teach-list li{margin-bottom:7px;font-size:calc(14.5px * var(--fs));line-height:1.55}
.teach-code{margin:10px 0 0;padding:12px;background:#0F1720;color:#E4EBF2;border-radius:9px;
  overflow-x:auto;font-family:var(--mono);font-size:calc(12.4px * var(--fs));line-height:1.6;white-space:pre}
.teach-tbl{margin-top:10px}
.teach-tbl table{min-width:430px}  /* scroll rather than squash on a phone */
.teach-tbl th,.teach-tbl td{font-size:calc(13px * var(--fs));white-space:normal}

.task{background:var(--brass-tint,#F6EFDF);background:#FBF4E4;border:1px solid #E6D9B8;
  border-radius:var(--r);padding:13px 14px;margin:14px 0 4px}
.task > p{margin:5px 0 0;font-size:calc(15px * var(--fs));line-height:1.55;font-weight:560}
.task .blk-l{color:var(--amber)}

.act{margin-top:10px}
.cmdin{font-family:var(--mono) !important;font-size:calc(13.5px * var(--fs)) !important;
  min-height:104px;line-height:1.55}
.opt.right{background:var(--good-bg);border-color:var(--good)}
.opt.wrong{background:var(--crit-bg);border-color:#E4BCB5;opacity:.7}
.opt:disabled{cursor:default}

.ord-picked{min-height:52px;background:var(--card);border:1.5px dashed var(--line);border-radius:10px;
  padding:10px;margin-bottom:10px}
.ord-empty{font-size:calc(13.5px * var(--fs))}
.ord-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line-soft);
  font-size:calc(14px * var(--fs));line-height:1.45}
.ord-row:last-child{border-bottom:0}
.ord-n{flex:none;width:22px;height:22px;border-radius:6px;background:var(--slate);color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.opt.ord:disabled{opacity:.35}

.fb{border-radius:var(--r);padding:14px;margin-top:12px;border:1px solid}
.fb.ok{background:var(--good-bg);border-color:#B6D8C7}
.fb.ok .blk-l{color:var(--good)}
.fb.no{background:#FBF4E4;border-color:#E6D9B8}
.fb.no .blk-l{color:var(--amber)}
.fb p{margin:6px 0 0;font-size:calc(14.5px * var(--fs));line-height:1.55}
.fb ul{margin:8px 0 0;padding-left:20px}
.fb li{margin-bottom:6px;font-size:calc(14px * var(--fs));line-height:1.5}
.model{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.09)}
.model pre{margin:6px 0 0;padding:12px;background:#0F1720;color:#E4EBF2;border-radius:9px;
  overflow-x:auto;font-family:var(--mono);font-size:calc(12.4px * var(--fs));line-height:1.6;white-space:pre}

/* ---------- back link ---------- */
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0 10px;
  color:var(--slate);font-weight:640;font-size:calc(14px * var(--fs));text-decoration:none}

@media (min-width:640px){
  .view{padding-left:22px;padding-right:22px}
  .grid2{gap:12px}
}

/* ---------- Vault / SQL project ---------- */
/* Verdict cards: the only place in the app where red and green carry
   meaning beyond status, because these are literal pass/fail gates. */
.vd{background:var(--card);border:1px solid var(--line);border-left-width:5px;border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px;margin-bottom:9px}
.vd h3{font-size:calc(15.5px * var(--fs));margin:3px 0 6px}
.vd p{margin:0;font-size:calc(14px * var(--fs));line-height:1.55;color:var(--ink-soft)}
.vd-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vd-g{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700}
.vd-m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;font-weight:700;
  padding:3px 7px;border-radius:5px}
.vd-pass{border-left-color:var(--good)}
.vd-pass .vd-m{background:var(--good-bg);color:var(--good)}
.vd-fail{background:var(--crit-bg);border-color:#E4BCB5;border-left-color:var(--crit)}
.vd-fail .vd-m{background:#fff;color:var(--crit)}
.vd-warn{background:var(--amber-tint);border-color:#E6D2A6;border-left-color:var(--amber)}
.vd-warn .vd-m{background:#fff;color:var(--amber)}
.vd-unknown{border-left-color:var(--line)}
.vd-unknown .vd-m{background:var(--bg-2);color:var(--ink-faint)}

/* secondary prose inside cards */
.note-p{margin:0;font-size:calc(14px * var(--fs));line-height:1.55;color:var(--ink-soft)}
.fld-help{margin:5px 0 0;font-size:calc(13px * var(--fs));line-height:1.5;color:var(--ink-faint)}
.fixline{background:var(--slate-tint);border-radius:9px;padding:10px 12px}
.fixline p{margin:3px 0 0;font-size:calc(14px * var(--fs));line-height:1.5;color:var(--slate-deep)}

/* the paste-able "what to say" block */
pre.say{margin:9px 0 0;padding:13px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;white-space:pre-wrap;word-break:break-word;
  font-family:var(--sans);font-size:calc(14px * var(--fs));line-height:1.6;color:var(--ink-soft)}

/* a done tag on a finished phase */
.tag.done{background:var(--good-bg);color:var(--good);border-color:#B6D8C7}

/* six nav items instead of five: narrower columns, so shrink the icon
   and label a touch and stop long words forcing a wrap. */
.nav-i{gap:2px;font-size:10px;min-width:0;padding:0 2px}
.nav-i svg{width:20px;height:20px}
.nav-i span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- practice lab ---------- */
/* Jargon decoder: term, plain meaning, then the out-loud version. The
   "say it like this" line is the point of the whole block, so it gets
   the tinted treatment rather than the definition above it. */
.jg .jg-i{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.jg .jg-i:last-child{border-bottom:0;padding-bottom:0}
.jg h4{margin:0 0 4px;font-size:calc(14.5px * var(--fs));font-weight:680;color:var(--slate-deep)}
.jg p{margin:0;font-size:calc(14px * var(--fs));line-height:1.55;color:var(--ink-soft)}
.jg-say{margin-top:7px !important;padding:9px 11px;background:var(--slate-tint);border-radius:9px;
  color:var(--slate-deep);font-style:italic}
.jg-say span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-style:normal;font-weight:700;opacity:.75;margin-bottom:3px}

/* ground rules + if-stuck share a compact term/answer shape */
.rule-i,.stuck-i{padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.rule-i:last-child,.stuck-i:last-child{border-bottom:0;padding-bottom:0}
.rule-i h4,.stuck-i h4{margin:0 0 4px;font-size:calc(14.5px * var(--fs));font-weight:680}
.rule-i p,.stuck-i p{margin:0;font-size:calc(14px * var(--fs));line-height:1.55;color:var(--ink-soft)}
.stuck-i h4{color:var(--crit)}

/* the "how you know it worked" card - the only green card in the app */
.card.ok{background:var(--good-bg);border-color:#B6D8C7}
.card.ok .eyebrow{color:var(--good)}

/* secondary note under a table cell */
.td-n{margin-top:4px;font-size:calc(12.5px * var(--fs));line-height:1.5;color:var(--ink-faint)}

/* lab call-out on the project index */
.lab-cta{display:block;text-decoration:none;color:inherit;background:var(--slate-tint);border-color:#BFD6E4}
.lab-cta h3{margin:5px 0 6px;font-size:calc(17px * var(--fs));color:var(--slate-deep)}
.lab-cta p{margin:0;font-size:calc(14px * var(--fs));line-height:1.55;color:var(--ink-soft)}
.lab-cta:active{transform:scale(.995)}