/* FieldFirst Scenario Runner - design system v2
   Brand: navy #041a38 (logo/site accent), shield blue, shield red, steel. */
:root {
  --bg: #f2f4f8; --card: #ffffff; --card2: #f4f6fa; --card3: #eaeef5;
  --ink: #0b1a2f; --ink2: #46556d; --ink3: #8794a9; --line: rgba(11,26,47,.09); --line2: rgba(11,26,47,.14);
  --fill: rgba(11,26,47,.05); --fill2: rgba(11,26,47,.09);
  --navy: #041a38; --navy2: #0d2c5a; --navy3: #17437f;
  --primary: #1f5fcf; --primary-ink: #fff; --primary-soft: rgba(31,95,207,.10); --primary-line: rgba(31,95,207,.35);
  --red: #cf2f3c; --red-soft: rgba(207,47,60,.09); --red-line: rgba(207,47,60,.32);
  --green: #12996a; --green-soft: rgba(18,153,106,.11);
  --amber: #d98300; --amber-soft: rgba(217,131,0,.12);
  --hl: rgba(255,200,0,.42);
  --navbg: rgba(242,244,248,.78); --sheetbg: rgba(250,251,253,.92);
  --shadow: 0 1px 1px rgba(4,26,56,.04), 0 4px 14px rgba(4,26,56,.06);
  --shadow-lg: 0 10px 34px rgba(4,26,56,.20), 0 2px 6px rgba(4,26,56,.10);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --gutter: 16px; --radius: 20px;
  --spring: cubic-bezier(.34,1.56,.64,1); --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05090f; --card: #0f1724; --card2: #162133; --card3: #1c2940;
    --ink: #eef3fb; --ink2: #a8b5ca; --ink3: #66758f; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12);
    --fill: rgba(255,255,255,.05); --fill2: rgba(255,255,255,.09);
    --navy: #0b2247; --navy2: #12336a; --navy3: #1b4c92;
    --primary: #5c9bff; --primary-ink: #04142b; --primary-soft: rgba(92,155,255,.14); --primary-line: rgba(92,155,255,.45);
    --red: #ff5f6b; --red-soft: rgba(255,95,107,.12); --red-line: rgba(255,95,107,.4);
    --green: #36d39a; --green-soft: rgba(54,211,154,.13);
    --amber: #ffb547; --amber-soft: rgba(255,181,71,.14);
    --hl: rgba(255,204,0,.34);
    --navbg: rgba(5,9,15,.74); --sheetbg: rgba(22,30,45,.92);
    --shadow: 0 0 0 1px rgba(255,255,255,.045);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Inter", system-ui, sans-serif;
  font-size: 17px; line-height: 1.3; letter-spacing: -.2px; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.tnum { font-variant-numeric: tabular-nums; }
.press { transition: transform .18s var(--ease), filter .18s; }
.press:active { transform: scale(.97); }

/* ---------- screens + nav ---------- */
.screen { min-height: 100vh; padding-bottom: calc(118px + var(--sab)); animation: push .38s var(--ease); }
.screen.noanim { animation: none; } .screen.pop { animation: popin .32s var(--ease); }
@keyframes push { from { transform: translateX(24%); opacity: .3; } }
@keyframes popin { from { transform: translateX(-14%); opacity: .4; } }
.nav { position: sticky; top: 0; z-index: 20; padding-top: var(--sat); border-bottom: .5px solid transparent; transition: background .25s, border-color .25s; }
.nav.scrolled { background: var(--navbg); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom-color: var(--line2); }
.nav-row { height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 calc(8px + var(--sar)) 0 calc(8px + var(--sal)); }
.nav-title { font-weight: 650; font-size: 17px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.nav.scrolled .nav-title { opacity: 1; transform: none; }
.nav-left { justify-self: start; display: flex; } .nav-right { justify-self: end; display: flex; gap: 2px; }
.nav-btn { color: var(--primary); display: flex; align-items: center; gap: 2px; height: 44px; min-width: 40px; justify-content: center; padding: 0 8px; font-size: 17px; border-radius: 12px; transition: background .2s, color .2s; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.back { padding-left: 0; } .nav-btn.back svg { width: 24px; height: 24px; margin-right: -1px; }
.nav-btn.active { color: #1a1300; background: #ffcc00; height: 34px; }
.large-title { font-size: 34px; font-weight: 750; letter-spacing: .2px; line-height: 40px; margin: 0 0 14px; padding: 0 calc(var(--gutter) + var(--sar)) 0 calc(var(--gutter) + var(--sal)); }
.eyebrow-brand { display: flex; align-items: center; gap: 8px; padding: 6px var(--gutter) 2px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink2); }
.eyebrow-brand img { height: 22px; width: auto; }
.eyebrow-brand b { color: var(--red); font-weight: 800; }

/* ---------- search + segmented ---------- */
.search { margin: 0 var(--gutter) 12px; height: 40px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ink3); }
.search svg { width: 17px; height: 17px; flex: none; }
.search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; font-size: 17px; min-width: 0; }
.search input::placeholder { color: var(--ink3); }
.seg { margin: 0 var(--gutter) 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fill2); border-radius: 12px; padding: 3px; position: relative; height: 38px; }
.seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 3)); transform: translateX(calc(100% * var(--i, 0))); background: var(--card); border-radius: 9px; box-shadow: 0 2px 8px rgba(4,26,56,.12), 0 1px 1px rgba(4,26,56,.06); transition: transform .32s var(--spring); }
@media (prefers-color-scheme: dark) { .seg::before { background: #2a3a55; } }
.seg button { position: relative; z-index: 1; font-size: 14px; font-weight: 550; color: var(--ink2); border-radius: 9px; transition: color .2s; }
.seg button.on { color: var(--ink); font-weight: 650; }

/* ---------- generic cards / lists ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 var(--gutter) 16px; overflow: hidden; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink2); }
.card-h svg { width: 18px; height: 18px; color: var(--primary); }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 16px; width: 100%; text-align: left; }
.row + .row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset, 16px); height: .5px; background: var(--line2); }
.row.tappable:active { background: var(--fill); }
.row .main { flex: 1; min-width: 0; }
.row .title { font-size: 17px; font-weight: 500; }
.row .sub { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.row .trail { color: var(--ink3); display: flex; align-items: center; gap: 6px; flex: none; }
.chev { width: 8px; height: 13px; color: var(--ink3); flex: none; }
.icon-tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.icon-tile svg { width: 18px; height: 18px; }
.foot { font-size: 13px; color: var(--ink3); padding: 0 calc(var(--gutter) + 16px); margin: -6px 0 22px; line-height: 1.4; }
.empty { text-align: center; color: var(--ink2); padding: 48px 24px; font-size: 15px; }

/* ---------- badges / chips ---------- */
.badge { display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .6px; border-radius: 15px; width: 52px; height: 52px; font-size: 15px; flex: none; position: relative; overflow: hidden; }
.badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.badge.BLS { background: linear-gradient(150deg, #2a64c9, #0d2c5a 85%); }
.badge.ALS { background: linear-gradient(150deg, #e2414e, #8f1520 85%); }
.badge.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--fill); color: var(--ink2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip svg { width: 13px; height: 13px; }
.chip.draft, .tag.draft { background: var(--amber-soft); color: var(--amber); }
.chip.run { background: var(--green-soft); color: var(--green); }
.chip.pause { background: var(--amber-soft); color: var(--amber); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }
.tag.crit { background: var(--red-soft); color: var(--red); }
.tag.ph { background: var(--amber-soft); color: var(--amber); }
.tag.branch { background: var(--amber-soft); color: var(--amber); margin-top: 8px; }

/* ---------- scenario cards (list) ---------- */
.sc-card { display: block; background: var(--card); border-radius: 22px; box-shadow: var(--shadow); margin: 0 var(--gutter) 14px; padding: 16px; position: relative; overflow: hidden; }
.sc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--primary)); }
.sc-card.BLS { --accent: #2a64c9; } .sc-card.ALS { --accent: #d23441; }
.sc-top { display: flex; gap: 14px; align-items: center; }
.sc-top .t { flex: 1; min-width: 0; }
.sc-top .k { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink3); }
.sc-top h3 { margin: 2px 0 0; font-size: 21px; font-weight: 720; letter-spacing: -.2px; }
.sc-desc { margin: 12px 0 12px; font-size: 15px; line-height: 1.4; color: var(--ink2); }
.sc-prog { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--fill2); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--primary), #3f86ff); transition: width .6s var(--ease); }
.bar.done > i { background: var(--green); }
.sc-prog small { font-size: 13px; font-weight: 650; color: var(--ink2); white-space: nowrap; }
.group-label { display: flex; justify-content: space-between; align-items: baseline; margin: 6px calc(var(--gutter) + 4px) 10px; font-size: 13px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--ink3); }

/* ---------- scenario hero ---------- */
.hero { margin: 0 var(--gutter) 16px; border-radius: 26px; padding: 20px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(63,134,255,.38), rgba(63,134,255,0) 60%), linear-gradient(150deg, #0d2c5a 0%, #041a38 70%);
  box-shadow: 0 12px 30px rgba(4,26,56,.28); }
.hero.ALS { background: radial-gradient(120% 90% at 100% 0%, rgba(255,90,100,.35), rgba(255,90,100,0) 60%), linear-gradient(150deg, #3a0d16 0%, #160810 70%); }
@media (prefers-color-scheme: dark) { .hero { box-shadow: 0 0 0 1px rgba(255,255,255,.07); } }
.hero .wm { position: absolute; right: -26px; bottom: -30px; width: 190px; opacity: .08; pointer-events: none; filter: grayscale(1) brightness(3); }
.hero .stripe { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #2a64c9 0 50%, #cf2f3c 50% 100%); }
.hero-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.hb { height: 24px; padding: 0 9px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; background: rgba(255,255,255,.14); color: #fff; }
.hb.solid { background: #fff; color: #041a38; }
.hb.draft { background: #ffb547; color: #2a1700; }
.hero h1 { margin: 12px 0 6px; font-size: 30px; line-height: 1.08; font-weight: 780; letter-spacing: -.3px; }
.hero p { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.78); max-width: 520px; }
.hero-stats { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.ring { position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .fg { transition: stroke-dashoffset .9s var(--ease), stroke .4s; }
.ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.hero .ring .lbl b { font-size: 24px; font-weight: 750; } .hero .ring .lbl span { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.65); margin-top: 3px; }
.hstat-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hstat { background: rgba(255,255,255,.09); border-radius: 14px; padding: 9px 10px; min-width: 0; }
.hstat b { display: block; font-size: 18px; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hstat b small { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.hstat span { display: block; font-size: 11px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 2px; }
.draft-banner { margin: 0 var(--gutter) 14px; padding: 12px 14px; border-radius: 16px; background: var(--amber-soft); color: var(--ink); font-size: 14px; line-height: 1.4; border: 1px solid rgba(217,131,0,.35); }
.draft-banner b { display: block; color: var(--amber); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }

/* ---------- section cards ---------- */
.sec { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 var(--gutter) 16px; overflow: hidden; }
.sec-h { padding: 14px 16px 12px; border-bottom: .5px solid var(--line2); }
.sec-h .top { display: flex; align-items: center; gap: 10px; }
.sec-num { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 800; flex: none; transition: background .3s, color .3s; }
.sec-num svg { width: 15px; height: 15px; }
.sec.complete .sec-num { background: var(--green); color: #fff; }
.sec-h h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; }
.sec-h .pct { font-size: 13px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.sec-h .meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sec-h .meta small { font-size: 12px; font-weight: 650; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sec-h .bar { height: 5px; }
.sec.critical { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--red-line); }
.sec.critical .sec-h { background: linear-gradient(180deg, var(--red-soft), transparent); }
.sec.critical .sec-num { background: var(--red); color: #fff; }
.sec.critical .bar > i { background: linear-gradient(90deg, var(--red), #ff6b75); }
.sec.complete .bar > i { background: var(--green); }
.sec-foot { font-size: 13px; color: var(--ink3); padding: 0 16px 14px; margin-top: -4px; line-height: 1.4; }

/* ---------- checklist rows ---------- */
.ck-row { --inset: 56px; align-items: flex-start; padding: 13px 14px 13px 14px; gap: 12px; cursor: pointer; transition: background .2s; }
.ck-row:active { background: var(--fill); }
.ck { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; background: transparent; transition: background .2s, border-color .2s; margin-top: -2px; }
@media (prefers-color-scheme: light) { .ck { border-color: #c3cad6; } }
.ck svg { width: 16px; height: 16px; color: #fff; }
.ck svg path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .25s ease .05s; }
.ck.on { background: var(--primary); border-color: var(--primary); }
.ck.on svg path { stroke-dashoffset: 0; }
.sec.critical .ck.on { background: var(--red); border-color: var(--red); }
.ck.pop { animation: ckpop .45s var(--spring); }
@keyframes ckpop { 0% { transform: scale(.6); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.ck-row .main { flex: 1; min-width: 0; }
.ck-row .title { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; }
.ck-row .fb { margin-top: 7px; font-size: 15px; line-height: 1.38; color: var(--ink); background: var(--card2); border-radius: 10px; padding: 7px 10px; white-space: pre-line; border-left: 3px solid var(--primary-line); transition: opacity .25s; }
.sec.critical .ck-row .fb { border-left-color: var(--red-line); }
.ck-row.done .title { color: var(--ink2); }
.ck-row.done .fb { opacity: .62; }
.ck-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; min-width: 40px; }
.pts { font-size: 12px; font-weight: 750; padding: 3px 8px; border-radius: 8px; background: var(--fill); color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .25s, color .25s; }
.ck-row.done .pts { background: var(--green-soft); color: var(--green); }
.ts { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 650; color: var(--primary); font-variant-numeric: tabular-nums; }
.ts svg { width: 11px; height: 11px; }
.ck-row.branch .ck { border-style: dashed; }
.row.flagged::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #ffcc00; }

/* vitals as tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.tile { position: relative; background: var(--card2); border-radius: 16px; padding: 12px 12px 11px; text-align: left; border: 1.5px solid transparent; transition: background .25s, border-color .25s, transform .18s var(--ease); cursor: pointer; }
.tile:active { transform: scale(.97); }
.tile .lab { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--ink2); padding-right: 30px; }
.tile .val { display: block; margin-top: 6px; font-size: 22px; font-weight: 750; letter-spacing: -.3px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile .ck { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; margin: 0; }
.tile .ck svg { width: 13px; height: 13px; }
.tile .foot2 { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; min-height: 18px; }
.tile.done { background: var(--primary-soft); border-color: var(--primary-line); }
.tile.done .pts { background: var(--green-soft); color: var(--green); }
.tile.flagged { box-shadow: inset 0 -3px 0 #ffcc00; }

/* vital chips inside rows */
.vit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.vit div { background: var(--card2); border-radius: 10px; padding: 6px 9px; }
.vit small { display: block; font-size: 11px; color: var(--ink2); font-weight: 700; letter-spacing: .3px; }
.vit span { font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
/* v16: hyphenated words stay together (U+2011 in the markup); text still wraps at spaces, and a word too long for its box breaks
   rather than overflowing. Long values span two columns or the full row. */
.vit > div { min-width: 0; overflow-wrap: anywhere; hyphens: manual; -webkit-hyphens: manual; }
.vit > div.vw1 { grid-column: span 2; } .vit > div.vw2 { grid-column: 1 / -1; }
.tile .val, .sh-vit { overflow-wrap: anywhere; hyphens: manual; -webkit-hyphens: manual; }
.hstat-grid.two { grid-template-columns: repeat(2, 1fr); }
.ck-row.branch .vit div { background: var(--amber-soft); }
.ck-row:not(.branch) .vit div { background: var(--green-soft); }

/* notes */
.note-row { position: relative; padding: 10px 16px 12px; border-top: .5px solid var(--line2); background: var(--card); }
.note-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink3); padding: 2px 0 4px; }
.note-row label svg { width: 14px; height: 14px; }
.note-row.has label { color: var(--primary); }
textarea.note { width: 100%; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; letter-spacing: -.2px; min-height: 24px; padding: 2px 0; line-height: 1.4; overflow: hidden; }
textarea.note::placeholder { color: var(--ink3); }
.field-row input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; text-align: right; min-width: 0; font-weight: 500; }
.field-row input::placeholder { color: var(--ink3); font-weight: 400; }
.big-note { border-top: 0; padding: 4px 16px 14px; }
.big-note textarea { min-height: 150px; }
.btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; margin: 0 var(--gutter) 10px; width: calc(100% - 2 * var(--gutter)); border-radius: 16px; background: var(--primary); color: var(--primary-ink); font-weight: 650; font-size: 17px; box-shadow: 0 6px 18px rgba(31,95,207,.25); }
.btn-primary svg { width: 18px; height: 18px; }

/* brief */
.brief-text { padding: 0 16px 16px; font-size: 16px; line-height: 1.5; }
.brief-list { margin: 0; padding: 0 0 6px; list-style: none; counter-reset: n; }
.brief-list li { position: relative; padding: 10px 16px 10px 52px; font-size: 16px; line-height: 1.45; counter-increment: n; }
.brief-list li::before { content: counter(n); position: absolute; left: 16px; top: 10px; width: 24px; height: 24px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.brief-list li + li::after { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: .5px; background: var(--line2); }
.card.brief-flow .brief-list li::before { background: var(--navy); color: #fff; }
.card.brief-aar .brief-list li::before, .card.brief-discussion .brief-list li::before { background: var(--red-soft); color: var(--red); }

/* highlights */
mark { background: var(--hl); color: inherit; border-radius: 4px; padding: 0 2px; margin: 0 -1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-mode [data-hl] { cursor: text; }
.hl-banner { position: sticky; top: calc(48px + var(--sat)); z-index: 15; margin: 0 var(--gutter) 14px; background: #ffcc00; color: #1a1300; border-radius: 14px; padding: 10px 14px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(120,90,0,.25); animation: drop .3s var(--spring); }
.hl-banner button { font-weight: 750; background: rgba(0,0,0,.1); padding: 5px 12px; border-radius: 10px; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } }
.hl-pill { position: fixed; z-index: 60; transform: translate(-50%, -100%); }
.hl-pill button { background: #0b1a2f; color: #fff; font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.28); display: flex; gap: 6px; align-items: center; }
.hl-pill button::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #ffcc00; }

/* reveal + viewer */
.reveal { display: block; width: 100%; margin-top: 9px; border-radius: 14px; overflow: hidden; position: relative; }
.reveal.hidden-r { height: 104px; background: repeating-linear-gradient(135deg, var(--fill) 0 10px, transparent 10px 20px), var(--card2); border: 1.5px dashed var(--primary-line); display: grid; place-items: center; transition: transform .2s var(--ease); }
.reveal.hidden-r:active { transform: scale(.98); }
.reveal.hidden-r span { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; font-size: 15px; background: var(--card); padding: 9px 14px; border-radius: 12px; box-shadow: var(--shadow); }
.reveal.hidden-r svg { width: 20px; height: 20px; }
.reveal.shown { animation: reveal .5s var(--ease); }
@keyframes reveal { from { opacity: 0; transform: scale(.97); filter: blur(6px); } }
.reveal.shown img { display: block; width: 100%; height: auto; background: #fff; }
.reveal .zoom-ico { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 10px; background: rgba(4,26,56,.7); color: #fff; display: grid; place-items: center; }
.reveal .zoom-ico svg { width: 16px; height: 16px; }
.reveal-cap { font-size: 12px; color: var(--ink3); margin-top: 6px; }
.viewer { position: fixed; inset: 0; z-index: 95; background: #000; color: #fff; display: flex; flex-direction: column; animation: fade .25s; }
.v-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--sat) + 4px) 8px 4px; font-size: 13px; color: rgba(255,255,255,.6); }
.v-stage { flex: 1; overflow: hidden; display: grid; place-items: center; touch-action: none; }
.v-stage img { max-width: 100%; max-height: 100%; transform-origin: center; user-select: none; -webkit-user-select: none; background: #fff; }
.v-cap { padding: 12px 16px calc(12px + var(--sab)); font-size: 14px; color: rgba(255,255,255,.75); text-align: center; }

/* ---------- floating timer pill ---------- */
.timerbar { position: fixed; z-index: 30; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(10px + var(--sab));
  height: 72px; border-radius: 26px; padding: 0 10px 0 18px; display: flex; align-items: center; gap: 10px; color: #fff;
  background: linear-gradient(150deg, rgba(16,44,90,.96), rgba(4,26,56,.97)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .3s; animation: rise .45s var(--spring); }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.timerbar::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--state, rgba(255,255,255,.25)); transition: background .3s; }
.timerbar.running { --state: #36d39a; } .timerbar.paused { --state: #ffb547; } .timerbar.stopped { --state: #ff5f6b; }
.timerbar.running { box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(54,211,154,.35); }
.timerbar .clock { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.timerbar .clock b { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .5px; line-height: 1; }
.timerbar .clock span { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; font-weight: 750; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.timerbar .clock span i { width: 7px; height: 7px; border-radius: 50%; background: var(--state, rgba(255,255,255,.4)); }
.timerbar.running .clock span { color: #36d39a; } .timerbar.paused .clock span { color: #ffb547; } .timerbar.stopped .clock span { color: #ff8a93; }
.timerbar.running .clock span i { animation: pulse 1.4s infinite; }
.timerbar .clock em { display: inline-flex; opacity: .55; margin-left: 2px; } .timerbar .clock em svg { width: 11px; height: 11px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(54,211,154,.6); } 70% { box-shadow: 0 0 0 7px rgba(54,211,154,0); } 100% { box-shadow: 0 0 0 0 rgba(54,211,154,0); } }
.tbtn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; position: relative; transition: transform .2s var(--spring), background .2s, opacity .2s; flex: none; }
.tbtn svg { width: 22px; height: 22px; }
.tbtn:active { transform: scale(.88); }
.tbtn:disabled { opacity: .35; }
.tbtn.ghost { background: rgba(255,255,255,.12); color: #fff; }
.tbtn.stop { background: rgba(255,255,255,.13); color: #ff6b76; }
.tbtn.start { background: #36d39a; color: #03281a; box-shadow: 0 6px 16px rgba(54,211,154,.35); }
.tbtn.pause { background: #ffb547; color: #2a1700; box-shadow: 0 6px 16px rgba(255,181,71,.3); }
.tbtn .lbl { display: none; }

/* ---------- full-screen timer ---------- */
.tfull { position: fixed; inset: 0; z-index: 70; color: #fff; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(var(--sat) + 4px) calc(20px + var(--sar)) calc(24px + var(--sab)) calc(20px + var(--sal));
  background: radial-gradient(90% 60% at 50% 38%, rgba(42,100,201,.35), rgba(42,100,201,0) 70%), linear-gradient(180deg, #0a2250 0%, #041a38 55%, #020c1c 100%);
  animation: sheetup .42s var(--ease); }
@keyframes sheetup { from { transform: translateY(100%); } }
.tfull.running { --state: #36d39a; } .tfull.paused { --state: #ffb547; } .tfull.stopped { --state: #ff5f6b; } .tfull.ready { --state: rgba(255,255,255,.5); }
.tf-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.tf-top .x { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; }
.tf-top .x svg { width: 16px; height: 16px; }
.tf-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.tf-brand img { height: 22px; }
.tf-title { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.tf-title b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.2px; } .tf-title small { color: rgba(255,255,255,.65); font-size: 14px; font-weight: 500; }
.tf-clock { flex: 1; display: grid; place-items: center; min-height: 260px; }
.tf-ring { position: relative; width: min(78vw, 340px); aspect-ratio: 1; }
.tf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tf-ring .fg { transition: stroke-dashoffset .9s var(--ease); }
.tf-ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tf-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--state); background: rgba(255,255,255,.08); padding: 5px 11px; border-radius: 20px; }
.tf-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--state); }
.tfull.running .tf-status i { animation: pulse 1.4s infinite; }
.tf-time { font-size: min(19vw, 84px); font-weight: 250; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; margin: 14px 0 10px; }
.tf-sub { font-size: 13px; font-weight: 650; color: rgba(255,255,255,.6); }
.tf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tf-stats div { background: rgba(255,255,255,.08); border-radius: 16px; padding: 11px 12px; }
.tf-stats b { font-size: 22px; font-weight: 720; font-variant-numeric: tabular-nums; } .tf-stats small { font-size: 13px; color: rgba(255,255,255,.55); font-weight: 600; }
.tf-stats span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 2px; }
.tf-log { margin-top: 10px; background: rgba(255,255,255,.06); border-radius: 16px; padding: 6px 14px; }
.tf-log-h { font-size: 11px; font-weight: 750; text-transform: uppercase; color: rgba(255,255,255,.5); letter-spacing: .8px; padding: 6px 0; }
.tf-log .li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: .5px solid rgba(255,255,255,.1); font-size: 15px; animation: fade .3s; }
.tf-log .li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-log .li b { font-variant-numeric: tabular-nums; color: #8fbaff; font-weight: 700; }
.tf-empty { font-size: 14px; color: rgba(255,255,255,.45); padding: 6px 0 10px; }
.tf-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 0 6px; }
.tf-btns .tbtn { width: 84px; height: 84px; }
.tf-btns .tbtn svg { width: 30px; height: 30px; }
.tf-btns .wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: rgba(255,255,255,.75); }
.tf-mid { font-size: 13px; color: rgba(255,255,255,.5); text-align: center; flex: 1; }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(54px + var(--sab)); padding-bottom: var(--sab); background: var(--navbg);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-top: .5px solid var(--line2); display: grid; grid-template-columns: repeat(2, 1fr); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink3); font-size: 10.5px; font-weight: 600; }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: var(--primary); }

/* ---------- action sheet / toast ---------- */
.backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(2,10,24,.42); animation: fade .25s; }
.asheet { position: fixed; z-index: 81; left: 8px; right: 8px; bottom: calc(8px + var(--sab)); animation: sheetup .36s var(--ease); max-width: 520px; margin: 0 auto; }
.asheet .grp { background: var(--sheetbg); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 16px; overflow: hidden; margin-bottom: 8px; }
.asheet .msg { padding: 14px 16px; text-align: center; font-size: 13px; color: var(--ink2); border-bottom: .5px solid var(--line2); }
.asheet .msg b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.asheet button { display: block; width: 100%; height: 57px; font-size: 19px; color: var(--primary); }
.asheet button + button { border-top: .5px solid var(--line2); }
.asheet button.destructive { color: var(--red); }
.asheet .cancel { background: var(--card); border-radius: 16px; font-weight: 650; }
.toast { position: fixed; left: 50%; top: calc(56px + var(--sat)); transform: translateX(-50%); z-index: 90; background: #0b1a2f; color: #fff; border-radius: 22px; padding: 10px 18px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); animation: drop .3s var(--spring); }
/* v16: a single toast that sits in the navigation bar strip (44px, below the safe area) instead of over the checklist, so it never
   covers a row; it does not take taps. While the Debrief sheet is open it sits at the bottom edge, clear of the Debrief heading. */
.toast:not(.warn) { left: 0; right: 0; margin: 0 auto; transform: none; top: calc(var(--sat) + 3px); width: max-content; max-width: min(340px, calc(100vw - 176px));
  min-height: 38px; max-height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px 14px; border-radius: 16px;
  font-size: 12px; line-height: 1.12; overflow: hidden; pointer-events: none; z-index: 120; }
.toast.low:not(.warn) { top: auto; bottom: calc(var(--sab) + 10px); max-width: calc(100vw - 32px); }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@keyframes fade { from { opacity: 0; } }
.brand { display: flex; align-items: center; gap: 14px; margin: 0 var(--gutter) 18px; padding: 16px; border-radius: var(--radius); color: #fff; background: linear-gradient(150deg, #0d2c5a, #041a38); }
.brand img { width: 64px; height: auto; } .brand div { font-size: 13px; color: rgba(255,255,255,.7); } .brand b { display: block; color: #fff; font-size: 17px; }

/* ===================== iPad split view ===================== */
.insp-toggle, .insp-close { display: none !important; }
.welcome { text-align: center; padding: 16vh 40px 0; color: var(--ink2); }
.welcome img { width: 220px; margin-bottom: 22px; }
.welcome h2 { color: var(--ink); font-size: 28px; margin: 0 0 8px; }
.welcome p { font-size: 17px; max-width: 400px; margin: 0 auto; line-height: 1.45; }
@media (min-width: 768px) and (min-height: 600px) {
  :root { --sbw: 304px; --inw: 0px; --gutter: 24px; }
  html, body { height: 100%; overflow: hidden; }
  .shell { display: grid; grid-template-columns: var(--sbw) 1fr; height: 100vh; height: 100dvh; }
  .sidebar { background: var(--card); border-right: .5px solid var(--line2); overflow-y: auto; padding: calc(var(--sat) + 12px) 12px calc(var(--sab) + 20px) calc(12px + var(--sal)); }
  @media (prefers-color-scheme: light) { .sidebar { background: #fbfcfe; } }
  .main-col { overflow-y: auto; height: 100%; position: relative; background: var(--bg); }
  .main-col .screen { min-height: 100%; padding-bottom: calc(130px + var(--sab)); animation: none; }
  .main-col .screen > *:not(.nav) { max-width: 780px; margin-left: auto !important; margin-right: auto !important; }
  .main-col .screen > .sec, .main-col .screen > .card, .main-col .screen > .hero, .main-col .screen > .seg, .main-col .screen > .hl-banner, .main-col .screen > .draft-banner { width: calc(100% - 2 * var(--gutter)); }
  .main-col .screen #body > * { margin-left: 0; margin-right: 0; }
  .main-col .screen #body { width: calc(100% - 2 * var(--gutter)); }
  .main-col .nav-btn.back { display: none; }
  .main-col #tabs { display: none; }
  .tabbar { display: none; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 34px; }
  .side-head { padding: 4px 8px 16px; }
  .side-head { display: block; } .side-head img { width: 112px; display: block; margin: 2px 0 0 4px; }
  .side-h { font-size: 12px; font-weight: 750; color: var(--ink3); text-transform: uppercase; letter-spacing: .8px; padding: 16px 10px 8px; }
  .side-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 14px; color: var(--ink); min-height: 46px; transition: background .2s; }
  .side-row:active { background: var(--fill); }
  .side-row.on { background: linear-gradient(150deg, #0d2c5a, #041a38); color: #fff; box-shadow: 0 6px 16px rgba(4,26,56,.25); }
  .side-row.on small { color: rgba(255,255,255,.7); }
  .side-main { flex: 1; min-width: 0; }
  .side-main b { display: block; font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-main small { font-size: 13px; color: var(--ink3); font-weight: 600; }
  .side-row.side-sec .side-main b { font-size: 15px; font-weight: 500; white-space: normal; line-height: 1.25; }
  .side-row.side-sec.crit .side-main b { color: var(--red); }
  .side-count { font-size: 12px; font-weight: 700; color: var(--ink3); font-variant-numeric: tabular-nums; }
  .mini-ring { flex: none; }
  .mini-ring svg { transform: rotate(-90deg); }
  .inspector { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: 390px; max-width: 90vw; background: var(--bg); border-left: .5px solid var(--line2);
    box-shadow: -20px 0 50px rgba(4,26,56,.18); transform: translateX(105%); transition: transform .42s var(--ease); overflow-y: auto; padding-bottom: calc(var(--sab) + 30px); --gutter: 16px; }
  .shell.insp-open .inspector { transform: none; }
  .insp-toggle, .insp-close { display: flex !important; }
  .insp-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; padding: calc(var(--sat) + 10px) 8px 12px 0; background: var(--navbg); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-bottom: .5px solid var(--line2); margin-bottom: 16px; }
  .insp-head .seg { flex: 1; margin: 0 4px 0 16px; --n: 2; }
  .timerbar { left: calc(var(--sbw) + 24px); right: calc(var(--inw) + 24px); bottom: calc(16px + var(--sab)); height: 84px; border-radius: 30px; padding: 0 14px 0 24px; gap: 14px; }
  .timerbar .clock b { font-size: 42px; }
  .timerbar .tbtn { width: 60px; height: 60px; }
  .tf-time { font-size: min(13vw, 130px); }
  .tf-ring { width: min(56vh, 460px); }
  .tfull { padding-left: 48px; padding-right: 48px; }
  .tfull > * { width: 100%; max-width: 660px; margin-left: auto; margin-right: auto; }
  .tf-btns .tbtn { width: 104px; height: 104px; }
}
@media (min-width: 1100px) and (min-height: 600px) {
  :root { --inw: 370px; }
  .shell.has-insp { grid-template-columns: var(--sbw) 1fr var(--inw); }
  .inspector { position: static; transform: none; width: auto; max-width: none; box-shadow: none; height: 100%; }
  .insp-toggle, .insp-close { display: none !important; }
}
@media (min-width: 768px) and (min-height: 600px) and (orientation: landscape) {
  .tfull { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto 1fr auto auto; column-gap: 48px; row-gap: 12px; }
  .tfull > * { max-width: none; margin: 0; }
  .tf-top { grid-column: 1 / -1; }
  .tf-title { grid-column: 2; grid-row: 2; margin-top: 0; }
  .tf-clock { grid-column: 1; grid-row: 2 / 6; }
  .tf-ring { width: min(66vh, 520px); }
  .tf-stats { grid-column: 2; grid-row: 3; align-self: start; }
  .tf-log { grid-column: 2; grid-row: 4; margin-top: 0; align-self: start; }
  .tf-btns { grid-column: 2; grid-row: 5; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.ck-row .head { display: flex; align-items: flex-start; gap: 10px; }
.ck-row .head .title { flex: 1; min-width: 0; }
.ck-row .head .pts { margin-top: 1px; flex: none; }
.done-at { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; font-size: 12px; font-weight: 650; color: var(--primary); font-variant-numeric: tabular-nums; }
.done-at svg { width: 12px; height: 12px; }
.sec.critical .done-at { color: var(--red); }
@media (min-width: 768px) and (min-height: 600px) { .vit { grid-template-columns: repeat(5, 1fr); } }

/* ===================== nav text buttons, debrief ===================== */
.nav-btn.txt { font-size: 15px; font-weight: 600; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--primary-soft); white-space: nowrap; }
.nav-btn.txt.debrief-btn { background: var(--red); color: #fff; }
.nav-btn.txt.debrief-btn[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) { .nav-btn.txt.debrief-btn { color: #1a0306; } }
.nav-right { align-items: center; }
.seg button { font-size: 13.5px; }
.db-banner { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter) 16px; text-align: left; padding: 14px 14px 14px 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--red-line); animation: drop .35s var(--spring); }
.db-banner .db-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.db-banner .db-ic svg { width: 20px; height: 20px; }
.db-banner .db-t { flex: 1; min-width: 0; } .db-banner b { display: block; font-size: 16px; } .db-banner small { display: block; font-size: 13px; color: var(--ink2); margin-top: 2px; line-height: 1.3; }
.debrief { position: fixed; inset: 0; z-index: 85; }
.db-back { position: absolute; inset: 0; background: rgba(2,10,24,.45); animation: fade .3s; }
.db-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--sat) + 12px); background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: sheetup .45s var(--ease); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.debrief.closing .db-sheet { transform: translateY(100%); transition: transform .26s ease-in; } .debrief.closing .db-back { opacity: 0; transition: opacity .26s; }
.db-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line2); margin: 7px auto 0; flex: none; }
.db-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 12px 10px var(--gutter); flex: none; }
.db-head small { font-size: 12px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase; color: var(--red); }
.db-head h2 { margin: 2px 0 0; font-size: 30px; font-weight: 780; }
.db-head .db-done { font-weight: 650; }
.db-scroll { flex: 1; overflow-y: auto; padding-bottom: calc(var(--sab) + 24px); -webkit-overflow-scrolling: touch; }
.db-sum { display: flex; align-items: center; gap: 16px; margin: 4px var(--gutter) 16px; padding: 16px; border-radius: 22px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(63,134,255,.35), rgba(63,134,255,0) 60%), linear-gradient(150deg, #0d2c5a, #041a38 70%); }
.db-sum .ring .lbl b { font-size: 24px; font-weight: 750; } .db-sum .ring .lbl span { display: block; font-size: 11px; color: rgba(255,255,255,.65); margin-top: 3px; font-weight: 600; }
.db-sum .ring circle:first-child { stroke: rgba(255,255,255,.16); }
.db-sum .ring circle.fg { stroke: #fff; }
.db-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.db-stats div { background: rgba(255,255,255,.09); border-radius: 14px; padding: 9px 11px; }
.db-stats small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: rgba(255,255,255,.62); }
.db-stats b { display: block; font-size: 19px; font-weight: 720; margin-top: 2px; } .db-stats b.bad { color: #ff8a93; } .db-stats b.good { color: #5fe3b0; }
.db-card .card-h svg { color: var(--red); }
.db-missed { list-style: none; margin: 0; padding: 0 16px 10px; }
.db-missed li { padding: 10px 0 10px 14px; border-top: .5px solid var(--line2); position: relative; }
.db-missed li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.db-missed b { display: block; font-size: 16px; } .db-missed span { display: block; font-size: 14px; color: var(--ink2); margin-top: 2px; }
.db-n { padding: 10px 16px; border-top: .5px solid var(--line2); }
.db-notes .card-h + .db-n { border-top: 0; padding-top: 2px; }
.db-n small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink3); }
.db-n p { margin: 3px 0 0; font-size: 16px; line-height: 1.4; white-space: pre-line; }
.db-notes { padding-bottom: 6px; }
.db-notes .card-h svg { color: var(--primary); }
.db-ok { margin: 0; padding: 0 16px 16px; color: var(--green); font-weight: 600; }
.card.brief-discussion .brief-list li::before, .card.brief-aar .brief-list li::before { background: var(--red-soft); color: var(--red); }

/* ===================== iPad: clean digital scoring sheet ===================== */
.side-toggle { display: none !important; }
.sheet, .sh-head { --paper: #ffffff; --rule: #3a4150; --rule-in: #dde2ea; --band: #b4c6e7; --band-ink: #0b1a2f; --sheet-ink: #0b1a2f; --sheet-ink2: #5a6579; --colhead: #f6f8fb; --done: rgba(180,198,231,.20); }
@media (prefers-color-scheme: dark) {
  .sheet, .sh-head { --paper: #0f1724; --rule: rgba(214,226,246,.34); --rule-in: rgba(214,226,246,.10); --band: #22385e; --band-ink: #e6eeff; --sheet-ink: #eef3fb; --sheet-ink2: #9aa8bf; --colhead: #131d2d; --done: rgba(92,155,255,.08); }
}
@media (min-width: 768px) and (min-height: 600px) {
  .nav-btn.txt { height: 34px; font-size: 15px; }
  .shell.sheet-mode { grid-template-columns: 1fr; }
  .shell.sheet-mode .sidebar { position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; width: var(--sbw); transform: translateX(-105%); transition: transform .42s var(--ease); box-shadow: 20px 0 50px rgba(4,26,56,.18); }
  .shell.sheet-mode.side-open .sidebar { transform: none; }
  .shell.sheet-mode .side-toggle { display: flex !important; }
  .shell.sheet-mode .inspector { position: fixed; transform: translateX(105%); width: 400px; max-width: 90vw; height: auto; box-shadow: -20px 0 50px rgba(4,26,56,.18); }
  .shell.sheet-mode.insp-open .inspector { transform: none; }
  .shell.sheet-mode .insp-toggle { display: flex !important; }
  .shell.sheet-mode .insp-close { display: flex !important; }
  .shell.sheet-mode ~ .timerbar { left: max(24px, calc(50% - 300px)); right: max(24px, calc(50% - 300px)); height: 76px; transition: left .42s var(--ease), right .42s var(--ease), box-shadow .3s; }
  .shell.sheet-mode.insp-open ~ .timerbar { left: 24px; right: calc(min(400px, 90vw) + 24px); }
  .shell.sheet-mode.side-open ~ .timerbar { left: calc(var(--sbw) + 24px); }
  .shell.sheet-mode .timerbar .clock b { font-size: 38px; }
  .shell.sheet-mode .main-col .screen { padding-bottom: calc(150px + var(--sab)); }
  .shell.sheet-mode .main-col .screen > *:not(.nav) { max-width: none; }
  .shell.sheet-mode .main-col .screen #body, .shell.sheet-mode .main-col .screen #hero, .shell.sheet-mode .main-col .screen > .draft-banner, .shell.sheet-mode .main-col .screen > .hl-banner, .shell.sheet-mode .main-col .screen #dbBanner { width: calc(100% - 64px); max-width: 1180px; }
  .shell.sheet-mode .main-col .screen #dbBanner .db-banner { width: 100%; margin: 0 0 22px; }
  .shell.sheet-mode .main-col .screen .hl-banner { top: calc(52px + var(--sat)); }

  /* compact one-row header block */
  .sh-head { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); color: var(--sheet-ink); margin: 8px 0 28px; border: 1.5px solid var(--rule); box-shadow: var(--shadow); }
  .sh-head td { padding: 12px 18px; vertical-align: middle; text-align: left; border-left: 1px solid var(--rule-in); }
  .sh-head td:first-child { border-left: 0; }
  .sh-head td small { white-space: nowrap; display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sheet-ink2); margin-bottom: 3px; }
  .sh-head td b { font-family: "Times New Roman", Times, Georgia, serif; font-size: 20px; font-weight: 700; }
  .sh-head td.logo { width: 76px; padding: 8px 12px; }
  .sh-head td.logo img { width: 58px; display: block; }
  .sh-head td.f-pv { width: 128px; } .sh-head td b { white-space: nowrap; } .sh-head td.inst { width: 26%; }
  .sh-head td.inst input { width: 100%; border: 0; background: transparent; outline: none; color: inherit; font: 700 20px "Times New Roman", Times, Georgia, serif; padding: 0; }
  .sh-head td.inst input::placeholder { color: var(--sheet-ink2); font-weight: 400; font-style: italic; }
  .sh-head td.scored { width: 190px; background: var(--done); }
  .sh-head td.scored b { font-size: 24px; } .sh-head td.scored .of { color: var(--sheet-ink2); font-size: 20px; }
  .sh-head #shScored { display: inline-block; } .sh-head #shScored.bump { animation: ckpop .45s var(--spring); }

  /* sheet layout */
  .sheet.one { max-width: 880px; margin: 0 auto; }
  .sheet.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
  .sh-sec { margin: 0 0 36px; }
  .sh-tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--paper); color: var(--sheet-ink); font-family: "Times New Roman", Times, Georgia, serif; font-size: 17px; line-height: 1.35; border: 1.5px solid var(--rule); box-shadow: var(--shadow); }
  .sh-tbl col.w-ck { width: 60px; } .sh-tbl col.w-pts { width: 54px; } .sh-tbl col.w-bench { width: 40%; }
  .sheet.two .sh-tbl { font-size: 16px; } .sheet.two .sh-tbl col.w-ck { width: 54px; } .sheet.two .sh-tbl col.w-pts { width: 46px; }
  .sh-tbl th, .sh-tbl td { border: 0; border-top: 1px solid var(--rule-in); border-left: 1px solid var(--rule-in); text-align: center; vertical-align: middle; padding: 12px 14px; }
  .sh-tbl tr > :first-child { border-left: 0; }
  .sh-tbl tr.band th { position: sticky; top: calc(44px + var(--sat)); z-index: 4; border-top: 0; background: var(--band); color: var(--band-ink); font-size: 15px; font-weight: 700; letter-spacing: .3px; padding: 12px 14px; box-shadow: 0 1px 0 var(--rule); }
  .band-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
  .band-in .l { justify-self: start; } .band-in .t { text-align: center; }
  .band-in .cnt { justify-self: end; font-family: -apple-system, system-ui, sans-serif; font-size: 13px; font-weight: 750; background: rgba(255,255,255,.55); color: var(--band-ink); padding: 3px 9px; border-radius: 10px; }
  @media (prefers-color-scheme: dark) { .band-in .cnt { background: rgba(255,255,255,.12); } }
  .sh-sec.complete .band-in .cnt { background: var(--green); color: #fff; }
  .sh-tbl tr.band .tag { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; }
  .sh-tbl tr.band .bprog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--navy3); transition: width .5s var(--ease); }
  @media (prefers-color-scheme: dark) { .sh-tbl tr.band .bprog { background: var(--primary); } }
  .sh-sec.complete tr.band .bprog { background: var(--green); }
  .sh-tbl tr.cols th { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sheet-ink2); padding: 9px 10px; background: var(--colhead); }
  .sh-tbl tr.cols th svg { width: 16px; height: 16px; margin: 0 auto; stroke-width: 3; }
  .sh-row { cursor: pointer; transition: background .2s; }
  .sh-row:active { background: var(--fill2); }
  .sh-row td { height: 56px; }
  .sh-row.done { background: var(--done); }
  .sh-row .c-pts { font-size: 16px; color: var(--sheet-ink2); }
  .sh-row .c-fb { white-space: pre-line; }
  .sh-row.flagged .c-ck { box-shadow: inset 4px 0 0 #ffcc00; }
  .sbox { width: 26px; height: 26px; border: 2px solid var(--sheet-ink2); border-radius: 6px; display: grid; place-items: center; margin: 0 auto; background: var(--paper); transition: background .18s, border-color .18s; }
  .sbox svg { width: 17px; height: 17px; color: #fff; }
  .sbox svg path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .22s ease .04s; }
  .sbox.on { background: var(--navy); border-color: var(--navy); }
  @media (prefers-color-scheme: dark) { .sbox.on { background: var(--primary); border-color: var(--primary); } .sbox svg { color: #04142b; } }
  .sbox.on svg path { stroke-dashoffset: 0; }
  .sbox.pop { animation: ckpop .45s var(--spring); }
  .sts { display: block; margin-top: 5px; font-family: -apple-system, system-ui, sans-serif; font-size: 11px; font-weight: 600; color: var(--sheet-ink2); font-variant-numeric: tabular-nums; }
  .sh-row.branch .sbox { border-style: dashed; }
  .sh-vit { text-align: left; display: inline-block; line-height: 1.4; }
  .sh-row .reveal { margin-top: 6px; }
  .sh-row .reveal.hidden-r.sh-rev { height: 56px; }
  .sh-row .reveal.hidden-r.sh-rev span { font-family: -apple-system, system-ui, sans-serif; font-size: 14px; padding: 7px 12px; box-shadow: none; }
  .sh-row .reveal.hidden-r.sh-rev svg { width: 17px; height: 17px; }
  .sh-note td { text-align: left; padding: 10px 16px 12px; }
  .sh-note label { display: flex; align-items: center; gap: 6px; font-family: -apple-system, system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sheet-ink2); }
  .sh-note label svg { width: 13px; height: 13px; }
  .sh-note textarea.note { font-family: "Times New Roman", Times, Georgia, serif; font-size: 17px; color: var(--sheet-ink); min-height: 24px; }
  .sh-under { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; padding-top: 6px; }
  .sh-foot { font-size: 13px; color: var(--ink3); }
  .sh-addnote { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--primary); padding: 6px 10px; border-radius: 10px; flex: none; }
  .sh-addnote:active { background: var(--primary-soft); }
  .sh-addnote svg { width: 14px; height: 14px; }
  .sh-tbl mark { padding: 0 1px; }

  /* debrief as centered form sheet */
  .db-sheet { left: 50%; right: auto; top: 50%; bottom: auto; width: min(680px, calc(100vw - 80px)); height: min(860px, calc(100vh - 80px)); transform: translate(-50%, -50%); border-radius: 26px; animation: formin .4s var(--ease); }
  @keyframes formin { from { transform: translate(-50%, -46%) scale(.96); opacity: 0; } }
  .debrief.closing .db-sheet { transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .26s, opacity .26s; }
  .db-grab { display: none; }
  .db-head { padding-top: 18px; }
}

/* ===================== safe areas (native shell + iPhone landscape with notch / Dynamic Island) ===================== */
.screen { padding-left: var(--sal); padding-right: var(--sar); }
.screen > .nav { margin-left: calc(-1 * var(--sal)); margin-right: calc(-1 * var(--sar)); }
.db-sheet { padding-left: var(--sal); padding-right: var(--sar); }
html.native, html.native body { overscroll-behavior: none; }


/* ===================== v4: tabs, login, home, database, history, requests ===================== */
.tabbar { grid-template-columns: repeat(var(--n, 5), 1fr); padding-left: var(--sal); padding-right: var(--sar); z-index: 31; }
.tab { gap: 2px; font-size: 10.5px; letter-spacing: .1px; padding-top: 4px; transition: color .2s; }
.tab svg { width: 25px; height: 25px; stroke-width: 1.8; transition: transform .25s var(--spring); }
.tab.on svg { stroke-width: 2.2; transform: translateY(-1px); }
.tab:active svg { transform: scale(.88); }
.screen.tabbed { padding-bottom: calc(54px + var(--sab) + 28px); }
.screen.tabbed.with-timer { padding-bottom: calc(54px + 84px + var(--sab) + 24px); }
.tabbar ~ .timerbar { bottom: calc(54px + var(--sab) + 8px); }
.link-btn { color: var(--primary); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.nav-btn.strong { font-weight: 700; }
.avatar-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 750; color: #fff; background: linear-gradient(150deg, #2a64c9, #0d2c5a); margin-right: 4px; box-shadow: 0 2px 6px rgba(4,26,56,.25); }
.lede { margin: -6px calc(var(--gutter) + 4px) 18px; color: var(--ink2); font-size: 15px; }
.tag.ex { background: var(--fill2); color: var(--ink2); }

/* empty states */
.estate { text-align: center; padding: 40px 32px 28px; color: var(--ink2); }
.estate-ic { width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 18px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
.estate-ic svg { width: 36px; height: 36px; }
.estate h3 { margin: 0 0 6px; color: var(--ink); font-size: 21px; font-weight: 720; }
.estate p { margin: 0 auto 20px; max-width: 330px; font-size: 15px; line-height: 1.45; }
.btn-primary.sm { display: inline-flex; width: auto; height: 46px; padding: 0 22px; margin: 0; font-size: 16px; }

/* login */
.login { position: fixed; inset: 0; overflow-y: auto; color: #fff; background: radial-gradient(120% 70% at 50% 0%, #17437f 0%, rgba(23,67,127,0) 60%), linear-gradient(180deg, #0d2c5a, #041a38 55%, #020d1f); }
.login-glow { position: absolute; left: 50%; top: -12%; width: 140vmax; height: 60vmax; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(92,155,255,.20), transparent); pointer-events: none; }
.login-inner { position: relative; min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--sat) + 28px) calc(24px + var(--sar)) calc(var(--sab) + 24px) calc(24px + var(--sal)); }
.login-brand { text-align: center; margin-bottom: 26px; animation: rise .6s var(--ease); }
.login-brand img { width: 196px; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.tagline { margin: 10px 0 0; font-size: 13px; font-weight: 750; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.72); }
.login-card { width: 100%; max-width: 400px; box-sizing: border-box; padding: 22px 20px 14px; border-radius: 26px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: rise .6s var(--ease) .06s both; }
.login-card h2 { margin: 0; font-size: 26px; font-weight: 760; }
.login-sub { margin: 4px 0 18px; color: rgba(255,255,255,.65); font-size: 15px; }
.lf { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; margin-bottom: 10px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.55); transition: border-color .2s, background .2s; }
.lf:focus-within { border-color: rgba(92,155,255,.75); background: rgba(255,255,255,.12); }
.lf > svg { width: 20px; height: 20px; flex: none; }
.lf input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 17px; }
.lf input::placeholder { color: rgba(255,255,255,.45); }
.lf-eye { color: rgba(255,255,255,.55); display: grid; place-items: center; width: 34px; height: 34px; margin-right: -8px; }
.lf-eye svg { width: 20px; height: 20px; }
.login-err { color: #ff8a93; font-size: 14px; margin: 2px 2px 8px; }
.login-btn { width: 100%; height: 54px; margin-top: 6px; border-radius: 16px; background: #fff; color: #041a38; font-size: 17px; font-weight: 750; display: grid; place-items: center; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.login-btn.busy span { opacity: 0; }
.login-btn.busy::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(4,26,56,.2); border-top-color: #041a38; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-link { display: block; text-align: center; margin-top: 12px; padding: 6px; font-size: 15px; font-weight: 600; color: #8db8ff; }
.login-new { margin: 22px 0 0; font-size: 15px; color: rgba(255,255,255,.7); animation: fade .8s .2s both; }
.login-new a { color: #fff; font-weight: 700; }
.login-note { margin: 16px 0 0; max-width: 340px; text-align: center; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.42); }

/* home */
.greet .large-title { margin-bottom: 2px; }
.greet p { margin: 0 calc(var(--gutter) + 2px) 18px; color: var(--ink2); font-size: 15px; font-weight: 600; letter-spacing: .3px; }
.cont-card { display: flex; align-items: center; gap: 14px; margin: 0 var(--gutter) 14px; padding: 16px; border-radius: 24px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, rgba(63,134,255,.35), rgba(63,134,255,0) 60%), linear-gradient(150deg, #0d2c5a, #041a38 70%); box-shadow: var(--shadow-lg); }
.cont-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #2a64c9 0 50%, #cf2f3c 50% 100%); }
.cont-card > svg.chev { color: rgba(255,255,255,.6); }
.cc-ring { position: relative; width: 64px; height: 64px; flex: none; }
.cc-ring svg { transform: rotate(-90deg); }
.cc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 760; }
.cc-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.12); flex: none; }
.cc-ic svg { width: 28px; height: 28px; }
.cc-main { flex: 1; min-width: 0; }
.cc-main small { display: block; font-size: 12px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.62); }
.cc-main b { display: block; font-size: 22px; font-weight: 760; margin: 2px 0 6px; }
.cc-main > span { display: block; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.35; }
.cc-meta { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.cc-st i { width: 7px; height: 7px; border-radius: 50%; background: #36d39a; animation: pulse 1.4s infinite; }
.cc-st.run { color: #5fe3b0; } .cc-st.pause { color: #ffc46b; } .cc-st.stop { color: #ff9aa2; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 var(--gutter) 24px; }
.stat { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px; }
.stat b { display: block; font-size: 24px; font-weight: 760; color: var(--ink); } .stat b small { font-size: 15px; color: var(--ink3); font-weight: 650; }
.stat span { font-size: 12.5px; font-weight: 650; color: var(--ink2); }
.post { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); margin: 0 var(--gutter) 12px; padding: 16px; position: relative; overflow: hidden; }
.post.skeleton { height: 120px; background: linear-gradient(90deg, var(--card) 0%, var(--card2) 50%, var(--card) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.post-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.post-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--kc, var(--primary)); flex: none; }
.post-ic svg { width: 16px; height: 16px; }
.post-kind { font-size: 12px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; color: var(--kc, var(--primary)); }
.post-date { margin-left: auto; font-size: 13px; color: var(--ink3); font-weight: 600; }
.post.k-scn { --kc: #d23441; } .post.k-upd { --kc: var(--primary); } .post.k-tip { --kc: #12996a; } .post.k-news { --kc: var(--amber); }
.post h3 { margin: 0 0 4px; font-size: 18px; font-weight: 720; line-height: 1.25; }
.post p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.45; }
.post.example { background: var(--card); box-shadow: none; border: 1.5px dashed var(--line2); }
.post.example h3 { color: var(--ink2); }
.post-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); font-size: 15px; font-weight: 650; }
.post-cta svg.chev { width: 7px; height: 12px; color: currentColor; }

/* database */
.fbar { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--gutter) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fbar::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 17px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 .5px var(--line2); color: var(--ink); font-size: 14.5px; font-weight: 600; transition: background .2s, color .2s, transform .15s; }
.fchip:active { transform: scale(.96); }
.fchip svg { width: 16px; height: 16px; color: var(--ink2); }
.fchip.on { background: var(--navy2); color: #fff; box-shadow: 0 4px 12px rgba(4,26,56,.22); } .fchip.on svg { color: rgba(255,255,255,.8); }
@media (prefers-color-scheme: dark) { .fchip.on { background: var(--primary); } }
.fchip.x svg { width: 12px; height: 12px; stroke-width: 2.6; }
.fchip .cnt { font-style: normal; min-width: 20px; height: 20px; border-radius: 10px; background: #fff; color: var(--navy2); font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; box-sizing: border-box; }
.more-card { display: flex; align-items: center; gap: 12px; margin: 8px var(--gutter) 16px; padding: 14px 16px; border-radius: 20px; border: 1.5px dashed var(--line2); color: var(--ink); }
.mc-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; } .mc-ic svg { width: 22px; height: 22px; }
.mc-main { flex: 1; } .mc-main b { display: block; font-size: 16px; } .mc-main small { font-size: 14px; color: var(--ink2); }

/* filter sheet */
.fsheet { position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--sat) - 40px); display: flex; flex-direction: column; background: var(--bg); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); animation: sheetup .42s var(--ease); padding-left: var(--sal); padding-right: var(--sar); }
.fsheet.closing { transform: translateY(100%); transition: transform .24s ease-in; }
#sheet-root .backdrop { transition: opacity .24s; }
.fs-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 10px 8px; }
.fs-head b { font-size: 17px; font-weight: 700; } .fs-head #fsDone { justify-self: end; }  .fs-head #fsReset { justify-self: start; }
.fs-body { overflow-y: auto; padding: 4px 0 8px; }
.fs-sec { margin: 0 var(--gutter) 22px; }
.fs-sec h4 { margin: 0 4px 10px; font-size: 13px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; color: var(--ink2); }
.fs-sec .seg { margin: 0; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chips .fchip i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink3); margin-left: 2px; }
.fs-chips .fchip.on i { color: rgba(255,255,255,.7); }
.fs-chips .fchip.zero:not(.on) { color: var(--ink3); box-shadow: inset 0 0 0 .5px var(--line2); background: transparent; }
.fs-chips .fchip svg { width: 14px; height: 14px; stroke-width: 2.6; color: #fff; }
.fs-list { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.fs-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; font-size: 17px; color: var(--ink); text-align: left; position: relative; }
.fs-opt + .fs-opt::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--line2); }
.fs-opt svg { width: 18px; height: 18px; color: var(--primary); stroke-width: 2.6; opacity: 0; }
.fs-opt.on svg { opacity: 1; } .fs-opt.on { font-weight: 600; }
.fs-foot { padding: 10px 0 calc(var(--sab) + 12px); border-top: .5px solid var(--line2); background: var(--navbg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.fs-foot .btn-primary { margin-bottom: 0; }

/* history */
.card.runs .row.run { padding: 12px 14px; align-items: center; }
.run-ring { position: relative; width: 46px; height: 46px; flex: none; }
.run-ring svg { transform: rotate(-90deg); }
.run-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 760; }
.row.run .title { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.badge.xs { width: auto; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; display: inline-grid; }
.run-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13.5px; color: var(--ink2); }
.run-meta span { display: inline-flex; align-items: center; gap: 4px; } .run-meta svg { width: 13px; height: 13px; }
.run-meta .bad { color: var(--red); font-weight: 650; } .run-meta .good { color: var(--green); font-weight: 650; }
.run-head { margin: 6px var(--gutter) 16px; }
.run-head small { font-size: 12px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase; color: var(--ink3); }
.run-head h1 { margin: 4px 0 6px; font-size: 30px; font-weight: 780; }
.run-head p { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 15px; flex-wrap: wrap; }
.run-head .hb.solid { background: var(--navy2); color: #fff; }
.run-detail .db-sum { margin-top: 0; }
.db-saved { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; } .db-saved svg { width: 15px; height: 15px; }

/* requests */
.req-hero { margin: 0 var(--gutter) 16px; padding: 22px 20px; border-radius: 24px; color: #fff; text-align: left; position: relative; overflow: hidden;
  background: radial-gradient(110% 120% at 100% 0%, rgba(207,47,60,.35), rgba(207,47,60,0) 55%), linear-gradient(150deg, #0d2c5a, #041a38 70%); box-shadow: var(--shadow-lg); }
.rh-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.14); margin-bottom: 14px; } .rh-ic svg { width: 26px; height: 26px; }
.req-hero h2 { margin: 0 0 6px; font-size: 24px; font-weight: 760; } .req-hero p { margin: 0; color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.45; }
.icon-tile.soft { background: var(--primary-soft); color: var(--primary); }

/* account */
.acct { display: flex; align-items: center; gap: 14px; margin: 0 var(--gutter) 12px; padding: 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.acct-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 760; color: #fff; background: linear-gradient(150deg, #2a64c9, #0d2c5a); flex: none; }
.acct-av.sm { width: 34px; height: 34px; font-size: 15px; }
.acct b { display: block; font-size: 19px; } .acct small { font-size: 15px; color: var(--ink2); }

/* iPad: sidebar tabs */
@media (min-width: 768px) and (min-height: 600px) {
  .side-tabs { display: flex; flex-direction: column; gap: 2px; }
  .side-tab .st-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); flex: none; transition: background .2s, color .2s; }
  .side-tab .st-ic svg { width: 20px; height: 20px; }
  .side-row.on .st-ic { background: rgba(255,255,255,.14); color: #fff; }
  .side-acct { margin-top: 18px; border-top: .5px solid var(--line2); border-radius: 0 0 14px 14px; padding-top: 14px; }
  .side-acct > svg { width: 20px; height: 20px; color: var(--ink3); }
  .side-row.on > svg { color: rgba(255,255,255,.7); }
  .main-col .nav-btn.back { display: inline-flex; }
  .main-col   .screen.tabbed, .screen.tabbed.with-timer { padding-bottom: calc(140px + var(--sab)); }
  .main-col .screen > .stat-row, .main-col .screen > .cont-card, .main-col .screen > .post, .main-col .screen > #feed, .main-col .screen > .req-hero, .main-col .screen > .acct, .main-col .screen > .more-card, .main-col .screen > .search, .main-col .screen > .fbar, .main-col .screen > #lists, .main-col .screen > .btn-primary { width: calc(100% - 2 * var(--gutter)); }
  .main-col .screen > #feed > .post, .main-col .screen > #lists > * { margin-left: 0; margin-right: 0; }
  .main-col .screen > #lists .group-label { margin-left: 4px; margin-right: 4px; }
  .main-col .screen > .fbar { padding-left: 0; padding-right: 0; }
  .greet p { margin-left: 2px; }
  .main-col .estate { padding-top: 12vh; }
  .fsheet { left: 50%; right: auto; top: 50%; bottom: auto; width: 540px; max-height: min(760px, calc(100% - 80px)); transform: translate(-50%, -50%); border-radius: 26px; animation: formin .36s var(--ease); }
  .fsheet.closing { transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .24s, opacity .24s; }
  .fsheet .db-grab { display: none; } .fs-head { padding-top: 14px; } .fs-foot { border-radius: 0 0 26px 26px; }
  .login-brand img { width: 240px; }
  .login-card { max-width: 420px; padding: 28px 26px 16px; }
}
@media (prefers-reduced-motion: reduce) { .login-brand, .login-card, .login-new, .post.skeleton { animation: none; } }
@media (min-width: 768px) and (min-height: 600px) {
  .main-col .avatar-btn { display: none; }
  .main-col .screen > .greet, .main-col .screen > .eyebrow-brand, .main-col .screen > .large-title, .main-col .screen > .lede, .main-col .screen > .run-head, .main-col .screen > .group-label, .main-col .screen > .foot { width: calc(100% - 2 * var(--gutter)); box-sizing: border-box; }
  .main-col .screen > .greet .large-title, .main-col .screen > .large-title { padding-left: 2px; padding-right: 0; }
  .main-col .screen > .eyebrow-brand { padding-left: 2px; padding-top: 18px; }
  .main-col .screen > .lede { padding-left: 2px; }
  .main-col .screen > .run-head { margin-top: 12px; }
  .main-col .screen > .group-label { padding: 0 4px; }
  .main-col .screen > .card.runs, .main-col .screen > .acct, .main-col .screen > .db-sum { width: calc(100% - 2 * var(--gutter)); box-sizing: border-box; }
  .main-col .screen > .db-sum { margin-left: auto; margin-right: auto; }
}

/* ===================== v5: iPad scoring sheet fills the window ===================== */
@media (min-width: 768px) and (min-height: 600px) {
  :root { --sheet-m: clamp(20px, 2vw, 24px); }
  .shell.sheet-mode .main-col .screen #body, .shell.sheet-mode .main-col .screen #hero, .shell.sheet-mode .main-col .screen > .draft-banner, .shell.sheet-mode .main-col .screen > .hl-banner, .shell.sheet-mode .main-col .screen #dbBanner {
    width: auto; max-width: none; margin-left: var(--sheet-m) !important; margin-right: var(--sheet-m) !important; }
  .shell.sheet-mode .main-col .screen > .hl-banner { margin-left: calc(var(--sheet-m) + var(--sal)) !important; }
  .sheet.one { max-width: none; margin: 0; }
  .sheet.two { gap: 0 28px; }
  .sh-col { min-width: 0; container-type: inline-size; }
  .sh-tbl { font-size: 16px; font-size: clamp(15px, calc(12.5px + 0.55cqi), 18.5px); }
  .sheet.two .sh-tbl { font-size: 16px; font-size: clamp(15px, calc(12.5px + 0.55cqi), 18.5px); }
  .sh-tbl col.w-ck, .sheet.two .sh-tbl col.w-ck { width: 58px; }
  .sh-tbl col.w-pts, .sheet.two .sh-tbl col.w-pts { width: 50px; }
  .sh-tbl col.w-bench { width: 39%; }
  .sh-tbl th, .sh-tbl td { padding: 12px clamp(10px, 1.4cqi, 18px); }
  .sh-tbl tr.band th { font-size: clamp(14px, calc(11px + 0.45cqi), 16.5px); }
  .sh-head td b, .sh-head td.inst input { font-size: clamp(18px, calc(14px + 0.5vw), 22px); }
  .sh-head td.scored b { font-size: clamp(22px, calc(17px + 0.6vw), 27px); }

  /* sidebar docks beside the sheet on wide windows, slides over on narrower ones */
  .shell.sheet-mode { display: grid; grid-template-columns: 0 minmax(0, 1fr); transition: grid-template-columns .42s var(--ease); }
  .shell.sheet-mode .main-col { grid-column: 2; }
}
@media (min-width: 1100px) and (min-height: 600px) {
  .shell.sheet-mode.side-open { grid-template-columns: var(--sbw) minmax(0, 1fr); }
  .shell.sheet-mode.side-open .sidebar { position: relative; grid-column: 1; transform: none; box-shadow: none; height: 100vh; height: 100dvh; z-index: 1; }
  .shell.sheet-mode.side-open ~ .timerbar { left: max(calc(var(--sbw) + 24px), calc(50% + var(--sbw) / 2 - 300px)); right: max(24px, calc(50% - var(--sbw) / 2 - 300px)); }
}
@media (prefers-reduced-motion: reduce) { .shell.sheet-mode { transition: none; } }


/* ===================== v6: resume banner, full-screen scenario, collapsing header, select-to-highlight ===================== */
.resume { position: fixed; z-index: 29; left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); bottom: calc(54px + var(--sab) + 8px); height: 62px; box-sizing: border-box;
  display: flex; align-items: center; gap: 11px; padding: 0 10px 0 11px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(63,134,255,.35), rgba(63,134,255,0) 60%), linear-gradient(150deg, #0d2c5a, #041a38 75%);
  box-shadow: 0 10px 30px rgba(4,26,56,.35), inset 0 0 0 .5px rgba(255,255,255,.12); animation: rise .45s var(--ease); }
.rb-ring { position: relative; width: 38px; height: 38px; flex: none; }
.rb-ring svg { transform: rotate(-90deg); }
.rb-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 760; }
.rb-main { flex: 1; min-width: 0; }
.rb-main b { display: block; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-prov { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.16); margin-left: 4px; vertical-align: 2px; }
.rb-main small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); white-space: nowrap; }
.rb-main small i { width: 7px; height: 7px; border-radius: 50%; background: #ffb547; flex: none; }
.resume.run .rb-main small i { background: #36d39a; animation: pulse 1.4s infinite; } .resume.stop .rb-main small i { background: #ff5f6b; }
.resume.run .rb-time { color: #5fe3b0; }
.rb-btn { flex: none; height: 36px; padding: 0 16px; border-radius: 18px; background: #fff; color: #041a38; font-size: 15px; font-weight: 750; display: grid; place-items: center; }
.screen.tabbed:has(> .resume) { padding-bottom: calc(54px + 70px + var(--sab) + 24px); }

/* scenario opens full screen (no tab bar); back button returns to the tab it came from */
#scr .nav-btn.back { display: inline-flex; }

/* select text, then tap Highlight; tap a highlight to remove it */
html.native a, html.native button, html.native img { -webkit-touch-callout: none; }   /* no link-preview menus on controls; text stays selectable */
[data-hl] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.hl-pill.below { transform: translate(-50%, 0); }
.hl-pill.rm button::before { background: transparent; border: 1.5px solid #ffcc00; box-sizing: border-box; }
mark { cursor: pointer; }

/* iPhone: collapsing scenario header */
@media not all and (min-width: 768px) and (min-height: 600px) {
  #scr { --cp: 0; --bar: clamp(0, calc((var(--cp) - .45) * 4), 1); }
  #scr #hero .hero { transform-origin: 50% 0; transform: translateY(calc(var(--cp) * 28px)) scale(calc(1 - var(--cp) * .06)); opacity: calc(1 - var(--cp) * .9); will-change: transform, opacity; }
  #scr .nav { overflow: hidden; }
  #scr .nav::before { content: ""; position: absolute; inset: 0; opacity: var(--bar); pointer-events: none;
    background: radial-gradient(120% 200% at 100% 0%, rgba(63,134,255,.30), rgba(63,134,255,0) 60%), linear-gradient(150deg, #0d2c5a, #041a38 75%); }
  #scr .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: var(--bar); background: linear-gradient(90deg, #2a64c9 0 50%, #cf2f3c 50% 100%); }
  #scr .nav-row { position: relative; }
  #scr .nav .nav-title { transition: none; opacity: var(--bar); transform: translateY(calc((1 - var(--bar)) * 6px)); max-width: 230px; color: #fff; }
  #scr .nav .nav-btn { transition: color .2s; }
  #scr.collapsed .nav .nav-btn:not(.debrief-btn) { color: #fff; }
  #scr.collapsed .nav { border-bottom-color: transparent; }
  #scr .nav-title .mini { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
  #scr .nav-title .mini b { overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
  #scr .nav-title .mini .badge.xs { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
  #scr .mini-score { font-size: 12.5px; font-weight: 750; padding: 2px 7px; border-radius: 9px; background: rgba(255,255,255,.16); }
}
@media (min-width: 768px) and (min-height: 600px) {
  #scr .nav-title .mini { display: inline-flex; align-items: center; gap: 7px; }
  #scr .mini-score { font-size: 13px; font-weight: 700; color: var(--ink2); padding: 2px 8px; border-radius: 9px; background: var(--fill); }
  .resume { position: relative; left: auto; right: auto; bottom: auto; height: 64px; margin: 10px auto 18px; width: calc(100% - 2 * var(--gutter)); max-width: 780px; animation: none; }
  .main-col .screen > .resume { margin-left: auto !important; margin-right: auto !important; }
  .screen.tabbed:has(> .resume) { padding-bottom: calc(140px + var(--sab)); }
}
@media (prefers-reduced-motion: reduce) { .resume { animation: none; } #scr #hero .hero { transition: opacity .01s; } }

/* ===================== v7: points and times move to the debrief Timeline ===================== */
.db-tl-card .card-h svg { color: var(--primary); }
.db-tl { list-style: none; margin: 0 16px; padding: 0; }
.db-tl li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: .5px solid var(--line); font-size: 15px; }
.db-tl li:first-child { border-top: 0; }
.db-tl .t { font-weight: 700; color: var(--primary); }
.db-tl .l { min-width: 0; }
.db-tl .p { font-weight: 750; color: var(--green); }
.db-tl small { display: block; color: var(--ink3); font-size: 12px; margin-top: 1px; }
.db-tl-card .db-ok { margin: 0 16px; }
.db-tl-sum { display: flex; justify-content: space-between; margin: 6px 16px 0; padding: 10px 0 14px; border-top: 1px solid var(--line); font-weight: 750; font-size: 15px; }
@media (min-width: 768px) and (min-height: 600px) {
  .sh-tbl col.w-bench { width: 40%; }
  .band-in .cnt small { font-size: .78em; font-weight: 650; opacity: .75; }
}

/* ===================== v8: student name + critical-fail items ===================== */
/* phone hero: student field */
.hero-stu { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0 12px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); }
.hero-stu svg { width: 16px; height: 16px; flex: none; opacity: .75; }
.hero-stu span { font-size: 12px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.66); flex: none; }
.hero-stu input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; color: #fff; font: 650 16px/1 inherit; font-family: inherit; padding: 0 0 0 4px; -webkit-user-select: text; user-select: text; }
.hero-stu input::placeholder { color: rgba(255,255,255,.5); font-weight: 500; }
.hero-stu:focus-within { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
/* collapsed bar: title + student on two lines, red dot on critical fail */
#scr .nav-title .mini-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
#scr .nav-title .mini-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr .nav-title .mini-t small { font-size: 11.5px; font-weight: 600; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr .nav-title .mini-t small[hidden], .mini-cf[hidden] { display: none; }
.mini-cf { width: 9px; height: 9px; border-radius: 50%; background: #ff5f6b; flex: none; box-shadow: 0 0 0 2px rgba(255,95,107,.3); }
/* critical-fail chip (hero, sheet header) */
.cf-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px; background: #cf2f3c; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; font-family: -apple-system, system-ui, sans-serif; white-space: nowrap; }
.cf-chip svg { width: 12px; height: 12px; }
#hCF:empty, #shCF:empty { display: none; }
.hero-badges #hCF { display: inline-flex; }
/* critical-fail item rows */
.tag.cfail { background: var(--red-soft); color: var(--red); margin-top: 8px; }
.ck-row.cfail { box-shadow: inset 3px 0 0 var(--red); background: linear-gradient(90deg, var(--red-soft), transparent 70%); }
.ck-row.cfail .ck { border-color: var(--red-line); }
.ck-row.cfail.done { background: var(--red-soft); }
.ck-row.cfail.done .ck.on { background: var(--red); border-color: var(--red); }
.ck-row.cfail.done .tag.cfail { background: var(--red); color: #fff; }
.ck-row.cfail .main { opacity: 1 !important; }
/* resume banner chip */
.rb-cf { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 6px; border-radius: 6px; background: #cf2f3c; color: #fff; margin-left: 5px; vertical-align: 2px; text-transform: uppercase; }
/* debrief: student + critical fail block */
.db-student { display: flex; align-items: baseline; gap: 10px; margin: 0 var(--gutter, 16px) 12px; padding: 0 2px; }
.db-student small { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink3); }
.db-student b { font-size: 19px; font-weight: 750; }
.db-cf { margin: 0 var(--gutter, 16px) 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(150deg, #e2414e, #8f1520 90%); color: #fff; box-shadow: 0 10px 26px rgba(143,21,32,.28); }
.db-cf-h { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 850; letter-spacing: .2px; text-transform: uppercase; }
.db-cf-h svg { width: 22px; height: 22px; }
.db-cf-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 16px; }
.db-cf-row span { font-weight: 800; white-space: nowrap; }
.db-cf p { margin: 10px 0 0; font-size: 13.5px; color: rgba(255,255,255,.86); }
.db-tl li.cf { background: var(--red-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.db-tl li.cf .t, .db-tl li.cf .p { color: var(--red); }
.db-tl li.cf .p { font-size: 11px; letter-spacing: .5px; }
/* history */
.run-stu { font-weight: 500; color: var(--ink2); margin-left: 6px; }
.run-stu::before { content: "- "; }
.run-meta .cf-pill { font-weight: 800; }
@media (min-width: 768px) and (min-height: 600px) {
  .sh-head td.stu, .sh-head td.inst { width: 21%; }
  .sh-head td.stu input { width: 100%; border: 0; background: transparent; outline: none; color: inherit; font: 700 20px "Times New Roman", Times, Georgia, serif; padding: 0; font-size: clamp(18px, calc(14px + 0.5vw), 22px); }
  .sh-head td.stu input::placeholder { color: var(--sheet-ink2); font-weight: 400; font-style: italic; }
  .sh-head td.scored #shCF { display: block; margin-top: 4px; }
  .sh-row.cfail td { background: rgba(207,47,60,.06); }
  .sh-row.cfail td.c-ck { box-shadow: inset 3px 0 0 var(--red); }
  .sh-row.cfail.done td { background: rgba(207,47,60,.16); }
  .sh-row.cfail .sbox.on { background: var(--red); border-color: var(--red); }
  .sh-row.cfail .tag.cfail { margin-top: 6px; font-family: -apple-system, system-ui, sans-serif; }
  .sh-row.cfail.done .tag.cfail { background: var(--red); color: #fff; }
}
#scr .mini-score { flex: none; }
@media (min-width: 768px) and (min-height: 600px) { #scr .nav-title { max-width: min(440px, 46vw); } }

/* ===================== v8: scenario request form ===================== */
.rq-card { display: block; padding: 4px 0; }
.rq-f { padding: 12px 16px 14px; border-top: .5px solid var(--line); }
.rq-f:first-child { border-top: 0; }
.rq-l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 15px; font-weight: 650; color: var(--ink); }
.rq-l i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink3); }
.rq-f input, .rq-f textarea { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; background: var(--fill); color: var(--ink); font: inherit; font-size: 17px; padding: 12px 14px; outline: none; resize: none; -webkit-appearance: none; appearance: none; transition: box-shadow .15s, background .15s; }
.rq-f textarea { min-height: 84px; line-height: 1.4; }
.rq-f input::placeholder, .rq-f textarea::placeholder { color: var(--ink3); }
.rq-f input:focus, .rq-f textarea:focus { background: var(--card); box-shadow: inset 0 0 0 2px var(--primary); }
.rq-f .seg.rq-seg { margin: 0; height: 40px; }
.rq-f .seg.rq-seg button { font-size: 15.5px; font-weight: 650; }
.rq-seg:not(.has)::before { opacity: 0; }
.rq-err { display: none; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--red); }
.rq-f.bad .rq-err { display: block; }
.rq-f.bad input, .rq-f.bad textarea, .rq-f.bad .seg { box-shadow: inset 0 0 0 2px var(--red); }
.rq-f :disabled { opacity: .6; }
.rq-send.sending { opacity: .85; pointer-events: none; }
.rq-send.sending svg { display: none; }
.rq-send.sending::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.rq-note { margin-top: 2px; color: var(--red); }
.rq-done { text-align: center; padding: 28px 20px 22px; }
.rq-ok { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; animation: ckpop .45s var(--ease); }
.rq-ok svg { width: 32px; height: 32px; }
.rq-done h2 { margin: 0 0 8px; font-size: 21px; font-weight: 760; }
.rq-done p { margin: 0 0 6px; font-size: 16px; color: var(--ink2); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-done small { display: block; color: var(--ink3); font-size: 13.5px; margin-bottom: 18px; }
.rq-list .title { display: flex; align-items: center; gap: 8px; }
.rq-list .title .hb, .rq-done .hb { height: 20px; background: var(--primary); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 6px; font-weight: 800; letter-spacing: .5px; }
.rq-st { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; font-weight: 700; color: var(--green); }
.rq-st svg { width: 14px; height: 14px; }
@media (min-width: 768px) and (min-height: 600px) {
  .main-col .screen > .rq-card, .main-col .screen > .rq-done, .main-col .screen > .rq-list, .main-col .screen > .rq-note { width: calc(100% - 2 * var(--gutter)); box-sizing: border-box; }
  .rq-card { display: grid; grid-template-columns: 1fr 1fr; }
  .rq-card .rq-f[data-f="rqScope"], .rq-card .rq-f[data-f="rqTopic"] { border-top: 0; }
  .rq-card .rq-f[data-f="rqNotes"] { border-left: .5px solid var(--line); }
  .main-col .screen > .rq-send { max-width: 360px; margin-left: auto; margin-right: var(--gutter); }
}

/* ===================== v9: debrief export ===================== */
.db-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; margin: 0 var(--gutter, 16px) 16px; }
.db-actions .btn-primary, .db-actions .btn-tinted { margin: 0; width: auto; height: 50px; font-size: 16px; }
.btn-tinted { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 16px; background: rgba(31,95,207,.12); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 17px; font-weight: 650; border: 0; }
.btn-tinted svg { width: 18px; height: 18px; }
.db-actions .busy { opacity: .8; pointer-events: none; }
.db-actions .busy svg { display: none; }
.db-actions .busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.main-col .screen > .db-actions { width: calc(100% - 2 * var(--gutter)); box-sizing: border-box; }
@media (min-width: 768px) and (min-height: 600px) { .db-actions { grid-template-columns: 1fr 1fr; max-width: 560px; } }

/* ---------- v10: training disclaimer (end of every screen's scroll content; never fixed) ---------- */
.disclaimer { box-sizing: border-box; max-width: 640px; margin: 28px auto 0; padding: 12px calc(var(--gutter) + 8px) 0; position: relative; text-align: center; }
.disclaimer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(220px, 50%); height: 1px; background: var(--line2); }
.disclaimer p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink2); opacity: .82; letter-spacing: .005em; text-wrap: pretty; }
.disclaimer.on-dark { margin-top: 22px; max-width: 360px; padding-left: 4px; padding-right: 4px; }
.disclaimer.on-dark::before { background: rgba(255,255,255,.16); }
.disclaimer.on-dark p { color: rgba(255,255,255,.6); opacity: 1; }
.db-scroll > .disclaimer { margin-top: 8px; margin-bottom: 8px; }
.insp-body > .disclaimer { margin-top: 20px; padding-left: 12px; padding-right: 12px; }
@media print { .disclaimer p { color: #444; opacity: 1; } }
.disclaimer p.copyright { margin-top: 8px; }
.main-col .screen > .disclaimer { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }

/* ---------- v10: required safety checks (item.criticalIfMissed + before) ---------- */
.ck-row.gate { box-shadow: inset 3px 0 0 var(--red-line); }
.ck-row.gate .ck { border-color: var(--red-line); }
.tag.gate-tag { white-space: normal; text-align: left; line-height: 1.25; }
.ck-row.gate.done .tag.gate-tag { background: var(--fill); color: var(--ink2); }
.ck-row.gfail { box-shadow: inset 3px 0 0 var(--red); background: var(--red-soft); }
.ck-row.gfail .tag.gate-tag, .ck-row.gfail.done .tag.gate-tag { background: var(--red); color: #fff; }
.ck-row.gate .main { opacity: 1 !important; }
@media (min-width: 768px) and (min-height: 600px) {
  .sh-row.gate td.c-ck { box-shadow: inset 3px 0 0 var(--red-line); }
  .sh-row.gate .tag.gate-tag { margin-top: 6px; font-family: -apple-system, system-ui, sans-serif; }
  .sh-row.gate.done .tag.gate-tag { background: var(--fill); color: var(--ink2); }
  .sh-row.gfail td { background: rgba(207,47,60,.12); }
  .sh-row.gfail td.c-ck { box-shadow: inset 3px 0 0 var(--red); }
  .sh-row.gfail .tag.gate-tag, .sh-row.gfail.done .tag.gate-tag { background: var(--red); color: #fff; }
}

/* v14: failed-save warning (non-blocking: taps pass through) */
.toast.warn { pointer-events: none; background: #b3261e; width: max-content; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; text-align: center; line-height: 1.35; border-radius: 16px; }

/* v14: iPhone is portrait-only. The native app locks it in Info.plist; in Safari / the web app a phone turned
   to landscape gets this notice instead of an unusable layout. iPad is never matched (landscape height is 600+). */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .rotate-note { display: flex; position: fixed; inset: 0; z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: #05090f; color: #fff; }
  .rotate-note b { font-size: 18px; font-weight: 700; }
  .rotate-note span { font-size: 14px; color: rgba(255,255,255,.75); max-width: 360px; }
}

/* v16: deterioration branch ("Updated Vitals (Without Treatment)") once triggered: red highlight + time, 0 pts, never a critical fail */
.tag.branch.trig { background: var(--red); color: #fff; }
.ck-row.branch.btrig { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.ck-row.branch.btrig .ck.on { background: var(--red); border-color: var(--red); border-style: solid; }
.ck-row.branch.btrig .vit div { background: rgba(255,255,255,.7); }
.sh-row.branch.btrig td { background: var(--red-soft); }
.sh-row.branch.btrig .sbox.on { background: var(--red); border-color: var(--red); border-style: solid; }
.sh-row.branch .tag.branch { display: inline-flex; margin-top: 6px; font-family: -apple-system, system-ui, sans-serif; }
.db-tl li.br { background: var(--red-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.db-tl li.br .t, .db-tl li.br .p { color: var(--red); } .db-tl li.br .p { font-size: 11px; letter-spacing: .3px; }
/* v16: requests that were not sent (service error / offline) */
.rq-st.bad { color: var(--red); }
.rq-why { color: var(--red); }
.rq-list .rq-retry { flex: none; margin-left: 8px; height: 32px; padding: 0 14px; border-radius: 16px; font-size: 14px; }