/* ============================================================
   eCheck — "Yard" design system  (STAGING preview)
   Framework-free. Shared by the home screen and the check forms.
   ============================================================ */
:root{
  --bg:#0C0F0E; --surface:#161B18; --surface2:#12160F; --line:#242C27;
  --text:#F1F6F3; --muted:#93A099;
  --green:#00ED00; --green-soft:#12C24A; --green-ink:#03140A;
  --red:#FF5A54; --blue:#3E9BFF; --amber:#FFB020; --orange:#FF7A2F; --purple:#B98BFF;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none}
.app{max-width:520px;margin:0 auto;min-height:100vh;}

/* legacy preview ribbon (unused in production) */
.staging-tag{position:sticky;top:0;z-index:30;background:#1a1200;color:var(--amber);
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  padding:6px 12px;border-bottom:1px solid #33260a;}

/* icons */
.ic{display:block;stroke-width:1.9;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px;}
.ic-s{width:22px;height:22px}
.ic-lg{width:52px;height:52px;stroke-width:2}

/* app bar */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 14px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:42px;height:42px;border-radius:12px;background:var(--green);color:var(--green-ink);
  display:grid;place-items:center;font-weight:900;font-size:22px;
  box-shadow:0 0 0 1px rgba(0,237,0,.35),0 8px 22px rgba(0,237,0,.2);}
.brand b{font-size:20px;font-weight:830;letter-spacing:-.01em}
.brand span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:-2px}
.site{font-size:12px;color:var(--muted);font-weight:650;text-align:right;line-height:1.35}
.site b{color:var(--text);font-weight:750;display:block}

/* top nav (Home / Help / Resources / Login) */
.topnav{display:flex;align-items:center;gap:18px;padding:0 20px 16px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.topnav a{font-size:13px;font-weight:700;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent;}
.topnav a.on{color:var(--text);border-bottom-color:var(--green);}
.topnav a.right{margin-left:auto;color:var(--green-soft);}

/* how-it-works strip */
.steps{display:flex;gap:8px;padding:0 20px;margin:-8px 0 4px;}
.steps span{flex:1;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--muted);
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:9px 10px;line-height:1.2;}
.steps b{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(0,237,0,.14);color:var(--green);
  display:grid;place-items:center;font-size:10.5px;font-weight:830;}

/* streak hero */
.streak{margin:2px 18px 22px;background:linear-gradient(135deg,#101c13,#0b120d);border:1px solid var(--line);
  border-radius:22px;padding:20px 22px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;}
.streak::after{content:"";position:absolute;right:-46px;top:-46px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,237,0,.18),transparent 70%);}
.streak .big{font-size:50px;font-weight:880;line-height:.85;letter-spacing:-.03em;color:var(--green);font-variant-numeric:tabular-nums;}
.streak .lab b{display:block;color:var(--text);font-size:16px;font-weight:770;letter-spacing:-.01em}
.streak .lab span{font-size:13px;color:var(--muted);font-weight:550}

/* section labels */
.sec-label{margin:24px 20px 13px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;}
.sec-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}
.sec-label.hr-label{color:var(--red);}
.sec-label.hr-label::after{background:linear-gradient(90deg,rgba(255,90,84,.5),transparent);}
a.tile .chip.chip-red{}

/* tile grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:0 20px;}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:17px 16px 15px;
  display:flex;flex-direction:column;gap:12px;min-height:126px;position:relative;color:var(--text);
  transition:transform .1s,border-color .15s;}
.tile:active{transform:scale(.985)}
.tile.tall{min-height:150px}
.tile.wide{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:0;gap:15px}
.tile.wide .chip{margin:0}
.tile.wide .txt{flex:1}
.tile.wide h4{margin:0}
.tile.wide .go{position:static;margin-left:auto}
.chip{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;}
.tile h4{margin:0;font-size:16px;font-weight:760;letter-spacing:-.01em;line-height:1.15}
.tile p{margin:0;font-size:12px;color:var(--muted);font-weight:550;line-height:1.3}
.tile .go{position:absolute;top:18px;right:15px;color:var(--muted);width:19px;height:19px}
.tile.demo{border-color:var(--green-soft);box-shadow:0 0 0 1px rgba(0,237,0,.25)}
.tile .live{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  background:rgba(0,237,0,.16);color:#8effab;border-radius:20px;padding:3px 8px;}
.tile.muted-tile{opacity:.55}

.chip-red{background:rgba(255,90,84,.14);color:var(--red)}
.chip-blue{background:rgba(62,155,255,.14);color:var(--blue)}
.chip-green{background:rgba(0,237,0,.13);color:var(--green)}
.chip-amber{background:rgba(255,176,32,.15);color:var(--amber)}
.chip-orange{background:rgba(255,122,47,.15);color:var(--orange)}
.chip-purple{background:rgba(185,139,255,.15);color:var(--purple)}
.chip-slate{background:rgba(147,160,153,.16);color:#C7D2CC}
.chip-brown{background:rgba(150,105,66,.20);color:#CE9E6E}

.hr{grid-column:1/3;background:linear-gradient(135deg,#1c110f,#140c0b);border:1px solid #3a201d;border-radius:20px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;}
.hr .chip{width:46px;height:46px;border-radius:13px;background:rgba(255,90,84,.16);color:var(--red);flex:none}
.hr .txt{flex:1}.hr h4{margin:0;font-size:15.5px;font-weight:760}.hr p{margin:2px 0 0;font-size:12px;color:#c39b96}
.hr .badge{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:20px;padding:4px 10px}

.foot-note{margin:22px 20px 4px;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface2);
  font-size:12.5px;color:var(--muted);line-height:1.5;font-weight:550;}
.pad{height:40px}

/* ===================== FORM ===================== */
.nav{display:flex;align-items:center;gap:12px;padding:8px 16px 12px;position:sticky;top:0;background:var(--bg);z-index:20;}
.nav.with-tag{top:29px}
.back{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text);flex:none}
.nav .ttl b{font-size:17px;font-weight:790;letter-spacing:-.01em;display:block;line-height:1.15}
.nav .ttl span{font-size:12px;color:var(--muted);font-weight:600}
.prog{height:4px;background:var(--line);margin:0 20px 8px;border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .25s}

.body{padding:8px 20px 20px;display:flex;flex-direction:column;gap:14px}
.sec-head-row{margin:10px 0 -4px}
.sec-head-row .lab{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:10px}
.sec-head-row .lab::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.lab{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:block}
.req{color:var(--red)}
.input{width:100%;background:var(--surface2);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--text);font:inherit;font-size:15.5px}
.input::placeholder{color:#5c6a63}
textarea.input{min-height:76px;resize:vertical}
.hint{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.4}
.qtext{font-size:15.5px;font-weight:680;line-height:1.3;margin:0 0 12px}
.qtext .n{color:var(--muted);font-weight:800;margin-right:6px}

.seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.seg button{appearance:none;font:inherit;font-weight:770;font-size:14px;border-radius:12px;padding:13px 0;cursor:pointer;
  background:var(--surface2);border:1.5px solid var(--line);color:var(--muted);transition:.12s}
.seg .pass.on{background:rgba(0,237,0,.16);border-color:var(--green-soft);color:#8effab}
.seg .fail.on{background:rgba(255,90,84,.16);border-color:var(--red);color:#ffb3af}
.seg .na.on{background:rgba(147,160,153,.18);border-color:#48544e;color:#d5ddd8}

.yn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yn button{appearance:none;font:inherit;font-weight:790;font-size:15px;border-radius:14px;padding:15px 0;cursor:pointer;
  background:var(--surface2);border:1.5px solid var(--line);color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;transition:.12s}
.yn .y.on{background:rgba(0,237,0,.16);border-color:var(--green-soft);color:#8effab}
.yn .n.on{background:rgba(255,90,84,.16);border-color:var(--red);color:#ffb3af}

.drop{border:1.5px dashed #34403a;border-radius:14px;background:var(--surface2);padding:20px;display:flex;
  flex-direction:column;align-items:center;gap:8px;color:var(--muted);text-align:center;cursor:pointer}
.drop .cam{width:44px;height:44px;border-radius:13px;background:rgba(0,237,0,.12);color:var(--green);display:grid;place-items:center}
.drop b{color:var(--text);font-size:14.5px;font-weight:720}
.drop span{font-size:12px}
.drop.has{border-style:solid;border-color:var(--green-soft)}
.drop img{max-width:100%;max-height:180px;border-radius:10px}

.ackcard .stmt{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.ackrow{display:flex;gap:13px;align-items:flex-start;cursor:pointer}
.ackrow .box{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);background:var(--surface2);
  display:grid;place-items:center;flex:none;margin-top:1px;color:transparent;transition:.12s}
.ackrow.on .box{border-color:var(--green-soft);background:rgba(0,237,0,.16);color:var(--green)}
.ackrow p{margin:0;font-size:14px;color:#cdd6d1;font-weight:640}

.faultflag{background:linear-gradient(135deg,#1c110f,#140c0b);border:1px solid #3a201d;border-radius:14px;
  padding:13px 14px;display:flex;gap:11px;align-items:center;margin-top:12px}
.faultflag .ic{color:var(--red);flex:none}
.faultflag p{margin:0;font-size:12.5px;color:#e2b6b1;line-height:1.4}

.sigpad{height:180px;border-radius:14px;background:#fbfdfb;position:relative;overflow:hidden;border:1.5px solid var(--line);touch-action:none}
.sigpad canvas{position:absolute;inset:0;width:100%;height:100%}
.sigpad .base{position:absolute;left:16px;right:16px;bottom:44px;border-bottom:2px dashed #c7d0ca;pointer-events:none}
.sigpad .x{position:absolute;left:16px;bottom:47px;color:#9aa6a0;font-size:20px;font-weight:800;pointer-events:none}
.sigrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.sigrow .who{font-size:13px;color:var(--muted)}.sigrow .who b{color:var(--text);display:block;font-size:14.5px;font-weight:720}
.clear{appearance:none;background:var(--surface2);border:1.5px solid var(--line);color:var(--text);font:inherit;font-weight:720;font-size:13px;border-radius:10px;padding:9px 15px;cursor:pointer}

.err{background:rgba(255,90,84,.12);border:1px solid rgba(255,90,84,.4);color:#ffb3af;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;border-radius:15px;padding:16px;
  font:inherit;font-weight:820;font-size:16px;cursor:pointer;background:var(--green);color:var(--green-ink);
  box-shadow:0 8px 22px rgba(0,237,0,.22)}
.btn[disabled]{opacity:.55;cursor:default;box-shadow:none}
.btn.ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--line);box-shadow:none}
.stick{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 26%);padding:16px 20px 22px;display:flex;flex-direction:column;gap:10px}

/* submitted */
.done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 26px 20px;gap:6px}
.done .ring{width:112px;height:112px;border-radius:50%;background:rgba(0,237,0,.12);display:grid;place-items:center;color:var(--green);margin-bottom:10px;box-shadow:0 0 0 1px rgba(0,237,0,.3),0 0 44px rgba(0,237,0,.18)}
.done h2{margin:0;font-size:24px;font-weight:830;letter-spacing:-.02em}
.pill{margin-top:6px;background:rgba(0,237,0,.16);color:#8effab;font-size:12px;font-weight:800;border-radius:99px;padding:6px 14px;letter-spacing:.04em;text-transform:uppercase}
.done p{color:var(--muted);font-size:14px;max-width:32ch;margin:12px 0 0;line-height:1.5}
.receipt{width:100%;margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 16px}
.receipt .r{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.receipt .r:last-child{border-bottom:none}.receipt .r span{color:var(--muted)}.receipt .r b{font-weight:720}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===================== POLICIES ===================== */
.pol-cats{display:flex;flex-direction:column;gap:11px}
.pol-cat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:15px 16px;color:var(--text)}
.pol-cat:active{transform:scale(.99)}
.pol-cat .chip{width:46px;height:46px;border-radius:13px;flex:none}
.pol-cat .txt{flex:1}
.pol-cat h4{margin:0;font-size:16px;font-weight:760;letter-spacing:-.01em}
.pol-cat p{margin:2px 0 0;font-size:12.5px;color:var(--muted);font-weight:550}
.pol-cat .go{color:var(--muted);width:19px;height:19px;flex:none}

.pol-count{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  font-size:13.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:10px}
.pol-count b{color:var(--text);font-weight:800;white-space:nowrap}
.pol-count .rem{margin-left:auto;flex:none;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(255,176,32,.14);color:var(--amber);border-radius:99px;padding:4px 10px}
.pol-count .rem.ok{background:rgba(0,237,0,.15);color:#8effab}

.pol{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pol-head{width:100%;display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--text);
  font:inherit;text-align:left;padding:15px 15px;cursor:pointer}
.pol-head .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;color:var(--muted)}
.pol-head .t{flex:1;font-size:14.5px;font-weight:730;line-height:1.25}
.pol-head .st{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface2);border-radius:99px;padding:4px 9px}
.pol-head .st.out{background:rgba(255,176,32,.14);color:var(--amber)}
.pol-head .st.ok{background:rgba(0,237,0,.15);color:#8effab}
.pol-head .caret{width:17px;height:17px;color:var(--muted);flex:none;transform:rotate(90deg);transition:transform .15s}
.pol-head.open .caret{transform:rotate(-90deg)}
.pol-head.open .n{background:rgba(0,237,0,.13);color:var(--green);border-color:transparent}

.pol-body{padding:0 15px 15px;border-top:1px solid var(--line)}
.pol-meta{margin:12px 0 0;font-size:11.5px;color:var(--muted);font-weight:600}
.pol-text{font-size:14px;line-height:1.6;color:#D8E2DC;max-height:340px;overflow-y:auto;
  margin:10px 0 0;padding-right:6px}
.pol-text p{margin:0 0 12px}
.pol-text ul{margin:0 0 12px;padding-left:20px}
.pol-text li{margin-bottom:6px}
.pol-fig{margin:12px 0 0}
.pol-fig img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.pol-fig figcaption{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.45}
.pol-open{margin:8px 0 0;font-size:12.5px}
.pol-open a{color:var(--green-soft);font-weight:700;text-decoration:underline}
.pol-appx{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.pol-appx h5{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.pol-gal{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.pol-gal figure{margin:0}
.pol-gal img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.pol-gal figcaption{margin-top:5px;font-size:10.5px;color:var(--muted);line-height:1.35}
.pol-notes{margin:10px 0 0;padding-left:20px;font-size:13.5px;line-height:1.55;color:#D8E2DC}
.pol-notes li{margin-bottom:5px}
.pol-body .ackrow{margin-top:14px}
.pol-count .cw{min-width:0}

/* ===================== DESKTOP =====================
   The app is phone-first: a 520px column is right on a handset but strands the
   home screen in whitespace on a yard PC. Only the tile screens widen — the
   forms stay a single readable column, which is what you want when someone is
   working down a checklist. */
@media (min-width: 820px) {
  .app-wide{max-width:900px}
  .app-wide .grid{grid-template-columns:repeat(3,1fr);gap:15px}
  .app-wide .appbar{padding:20px 24px 16px}
  .app-wide .topnav{padding:0 24px 16px;gap:24px}
  .app-wide .topnav a{font-size:14px}
  .app-wide .streak{margin:6px 22px 24px;padding:26px 28px}
  .app-wide .streak .big{font-size:62px}
  .app-wide .steps{padding:0 24px}
  .app-wide .steps span{font-size:12.5px;padding:11px 13px}
  .app-wide .sec-label{margin:30px 24px 14px}
  .app-wide .grid{padding:0 24px}
  .app-wide .foot-note{margin:26px 24px 4px}
  /* forms and policies: a touch wider for comfort, still one column */
  .app{max-width:620px}
  .pol-gal{grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 1200px) {
  .app-wide{max-width:1120px}
  .app-wide .grid{grid-template-columns:repeat(4,1fr)}
}
/* A pointer-driven screen gets hover affordances a touchscreen never needs. */
@media (hover: hover) {
  .tile:hover{border-color:var(--green-soft)}
  .pol-cat:hover{border-color:var(--green-soft)}
  .pol-head:hover{background:var(--surface2)}
  .topnav a:hover{color:var(--text)}
}

/* ===================== HELP / RESOURCES ===================== */
.callout-amber{border-left:3px solid var(--amber)}
.callout-amber p{margin:0;font-size:14px;line-height:1.55;color:#E8EFEA}
.callout-amber b{color:var(--amber)}
.help-list{display:flex;flex-direction:column;gap:11px}
.help-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:14px 15px}
.help-row .chip{width:44px;height:44px;border-radius:13px;flex:none}
.help-row h4{margin:0;font-size:15px;font-weight:750}
.help-row p{margin:2px 0 0;font-size:12.5px;color:var(--muted);font-weight:550;line-height:1.4}

.res-list{display:flex;flex-direction:column;gap:11px}
.res{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:15px;color:var(--text)}
.res .chip{width:46px;height:46px;border-radius:13px;flex:none}
.res .txt{flex:1;min-width:0}
.res h4{margin:0;font-size:15.5px;font-weight:750;line-height:1.2}
.res p{margin:3px 0 0;font-size:12.5px;color:var(--muted);font-weight:550;line-height:1.45}
.res .meta{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--surface2);border:1px solid var(--line);
  border-radius:99px;padding:3px 9px}
.res .go{width:19px;height:19px;color:var(--muted);flex:none}

/* ===================== TRAINING MODULE ===================== */
.draft-band{display:flex;gap:11px;align-items:flex-start;background:rgba(255,176,32,.10);
  border:1px solid rgba(255,176,32,.35);border-radius:14px;padding:12px 14px;font-size:12.5px;
  line-height:1.45;color:#ffd489}
.draft-band .ic{flex:none;color:var(--amber);margin-top:1px}
.draft-band b{color:var(--amber)}

.tr-meta{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2px 15px}
.tr-meta .r{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.tr-meta .r:last-child{border-bottom:none}
.tr-meta .r span{color:var(--muted);flex:none}
.tr-meta .r b{font-weight:700;text-align:right}

.tr-list{display:flex;flex-direction:column;gap:9px}
.tr-row{display:flex;align-items:center;gap:11px;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;color:var(--text);
  font:inherit;text-align:left;cursor:pointer}
.tr-row .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--muted)}
.tr-row.done .n{background:rgba(0,237,0,.14);color:var(--green);border-color:transparent}
.tr-row .t{flex:1;font-size:14px;font-weight:700;line-height:1.3}
.tr-row .st{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface2);border-radius:99px;padding:4px 9px}
.tr-row.done .st{background:rgba(0,237,0,.15);color:#8effab}
.tr-row .go{width:17px;height:17px;color:var(--muted);flex:none}

.tr-h{margin:2px 0 4px;font-size:21px;font-weight:830;letter-spacing:-.02em;line-height:1.2}
.tr-outcome{margin:0 0 4px;font-size:13.5px;color:var(--muted);line-height:1.5}
.tr-outcome b{color:var(--green);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.1em;display:block;margin-bottom:3px}
.tr-p{margin:0;font-size:14px;line-height:1.6;color:#D8E2DC}
.tr-ul{margin:0;padding-left:20px;font-size:14px;line-height:1.6;color:#D8E2DC}
.tr-ul li{margin-bottom:9px}

.tr-fig{margin:4px 0}
.tr-fig img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.tr-fig figcaption{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.45}

.tr-stop{display:flex;gap:12px;background:rgba(255,90,84,.10);border:1px solid rgba(255,90,84,.35);
  border-radius:14px;padding:13px 15px}
.tr-stop .ic{flex:none;color:var(--red);margin-top:2px}
.tr-stop b{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.tr-stop p{margin:0;font-size:13.5px;line-height:1.5;color:#ffc9c6}
.tr-stop.critical{background:rgba(255,122,47,.10);border-color:rgba(255,122,47,.4)}
.tr-stop.critical .ic,.tr-stop.critical b{color:var(--orange)}
.tr-stop.critical p{color:#ffd2b3}

.tr-check{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.tr-check .q{margin:8px 0 12px;font-size:14px;font-weight:650;line-height:1.5}
.tr-check .a{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:13.5px;line-height:1.5;color:#8effab}
.tr-check .a .ic{flex:none;color:var(--green);margin-top:2px}
.tr-check .a b{color:var(--green);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;margin-right:5px}
.btn.sm{padding:12px;font-size:14px;box-shadow:none}
.tr-navrow{display:flex;gap:9px}
.tr-navrow .btn{flex:1}

.tr-q{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px}
.tr-q .qtext{margin:0 0 12px}
.tr-q .crit{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(255,90,84,.16);color:var(--red);border-radius:99px;padding:3px 8px;vertical-align:middle}
.tr-opts{display:flex;flex-direction:column;gap:8px}
.tr-opt{display:flex;gap:11px;align-items:flex-start;background:var(--surface2);border:1.5px solid var(--line);
  border-radius:12px;padding:12px 13px;font-size:13.5px;line-height:1.45;cursor:pointer}
.tr-opt .dot{flex:none;width:19px;height:19px;border-radius:50%;border:2px solid var(--line);margin-top:1px}
.tr-opt.on{border-color:var(--green);background:rgba(0,237,0,.08)}
.tr-opt.on .dot{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--surface2)}

.tr-score{display:flex;align-items:center;gap:18px;border-radius:20px;padding:20px 22px;
  background:linear-gradient(135deg,#101c13,#0b120d);border:1px solid var(--line)}
.tr-score .big{font-size:44px;font-weight:880;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tr-score.pass .big{color:var(--green)}
.tr-score.fail{background:linear-gradient(135deg,#1c110f,#140c0b);border-color:#3a201d}
.tr-score.fail .big{color:var(--red)}
.tr-score .lab b{display:block;font-size:15px;font-weight:770}
.tr-score .lab span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block;margin-top:3px}

.tr-wrong{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.tr-wrong .q{margin:0 0 8px;font-size:13.5px;font-weight:700;line-height:1.45}
.tr-wrong .crit{display:inline-block;margin-left:7px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(255,90,84,.16);color:var(--red);border-radius:99px;padding:2px 7px}
.tr-wrong .a{margin:0;font-size:13px;line-height:1.5;color:#8effab}
.tr-wrong .a b{color:var(--green);text-transform:uppercase;font-size:10px;letter-spacing:.08em;margin-right:5px}

.tr-lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,6,4,.95);display:grid;place-items:center;padding:16px}
.tr-lightbox img{max-width:100%;max-height:88vh;border-radius:10px;background:#fff}
.tr-lightbox .x{position:absolute;top:14px;right:14px;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;font:inherit;font-weight:700;font-size:13px}
button.back{font:inherit;cursor:pointer;padding:0}
.tr-pairs{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tr-pairs .ph{background:var(--surface2);padding:10px 14px;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--line)}
.tr-pairs .ph span{color:var(--muted);margin-left:8px}
.tr-pairs .pr{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.tr-pairs .pr:last-child{border-bottom:none}
.tr-pairs .pr b{display:block;font-size:13.5px;font-weight:780;margin-bottom:4px}
.tr-pairs .pr span{display:block;font-size:13px;line-height:1.55;color:#C6D2CB}
.tr-opt.right{border-color:var(--green);background:rgba(0,237,0,.10)}
.tr-opt.right .dot{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--surface2)}
.tr-opt.wrong{border-color:var(--red);background:rgba(255,90,84,.10)}
.tr-opt.wrong .dot{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 3px var(--surface2)}
.tr-opt.dim{opacity:.5}
.tr-check .a.bad{color:#ffc9c6}
.tr-check .a.bad .ic,.tr-check .a.bad b{color:var(--red)}

/* ===================== TICKABLE CARDS ===================== */
.cd-prog{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.cd-prog .bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.cd-prog .bar i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .2s}
.cd-prog .lb{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--muted);font-weight:600}
.cd-prog .lb b{color:var(--text);font-weight:800}
.cd-prog .lb span{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,176,32,.14);color:var(--amber);border-radius:99px;padding:4px 10px;white-space:nowrap}
.cd-prog .lb span.ok{background:rgba(0,237,0,.15);color:#8effab}

.cd-step{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cd-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface2);
  border-bottom:1px solid var(--line)}
.cd-head .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--green-ink);
  display:grid;place-items:center;font-size:14px;font-weight:900}
.cd-head .t{flex:1;font-size:14.5px;font-weight:830;letter-spacing:.04em;text-transform:uppercase;line-height:1.25}
.cd-head .c{flex:none;font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.cd-items{padding:6px}

/* the tap target is the whole row, and it is deliberately large */
.cd-item{display:flex;align-items:flex-start;gap:13px;padding:14px 12px;border-radius:12px;cursor:pointer;
  min-height:56px;-webkit-tap-highlight-color:transparent}
.cd-item + .cd-item{border-top:1px solid var(--line)}
.cd-item .box{flex:none;width:28px;height:28px;border-radius:9px;border:2px solid var(--line);
  background:var(--surface2);display:grid;place-items:center;color:transparent;transition:background .12s,border-color .12s}
.cd-item .tx{flex:1;font-size:14.5px;line-height:1.45;font-weight:600;padding-top:3px}
.cd-item.on .box{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.cd-item.on .tx{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(147,160,153,.5)}
.cd-item:active{background:var(--surface2)}

.cd-never{background:rgba(255,90,84,.09);border:1px solid rgba(255,90,84,.35);border-radius:18px;padding:15px 17px}
.cd-never .hd{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:850;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px}
.cd-never ul{margin:0;padding-left:20px;font-size:14px;line-height:1.55;color:#ffc9c6}
.cd-never li{margin-bottom:7px}

.cd-remember{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cd-remember .r{background:linear-gradient(135deg,#101c13,#0b120d);border:1px solid var(--line);
  border-radius:16px;padding:16px;text-align:center}
.cd-remember .r b{display:block;font-size:15px;font-weight:830;line-height:1.2}
.cd-remember .r span{display:block;margin-top:5px;font-size:14px;font-weight:800;color:var(--green)}

.cd-calls{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cd-call{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:15px;text-align:center;color:var(--text)}
.cd-call b{display:block;font-size:15px;font-weight:800}
.cd-call span{display:block;margin-top:4px;font-size:15px;color:var(--green);font-weight:750;letter-spacing:.02em}
.cd-call:active{background:var(--surface2)}

.cd-strap{text-align:center;font-size:11.5px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:6px 0 2px}

@media (min-width:760px){
  .app-wide .cd-step .cd-items{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
  .app-wide .cd-item + .cd-item{border-top:none}
  .app-wide .cd-items .cd-item{border-top:1px solid var(--line)}
  .app-wide .cd-never ul{columns:2;column-gap:26px}
}
.res-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.res-card .res{background:none;border:none;border-radius:0}
.res .meta.open{background:rgba(0,237,0,.15);color:#8effab}
.res-pdf{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--line);
  background:var(--surface2);font-size:12.5px;font-weight:650;color:var(--muted)}
.res-pdf .ic{color:var(--muted);flex:none}
.res-pdf:active{background:var(--line)}

/* ===== Desktop for the reading and form pages =====
   These are single-column by nature (a lesson, a policy, a check), so they
   get a comfortable reading measure rather than the home screen's full
   width — long body text at 1120px is harder to read, not easier. */
@media (min-width:760px){
  .app-read{max-width:860px}
  .app-read .body{padding:10px 28px 24px;gap:16px}
  .app-read .nav{padding:12px 24px 14px}
  .app-read .prog{margin:0 28px 10px}
  .app-read .stick{padding:18px 28px 26px}
  /* a policy is a long document — give it room instead of a 340px porthole */
  .app-read .pol-text{max-height:60vh}
  .app-read .pol-gal{grid-template-columns:repeat(3,1fr)}
  /* the training diagrams are 1600x900; let them actually be seen */
  .app-read .tr-fig img{max-height:62vh;object-fit:contain;background:#fff}
  .app-read .tr-opts{gap:10px}
  .app-read .tr-q{padding:18px}
}
@media (min-width:1200px){
  .app-read{max-width:960px}
}