/* FieldFirst web v20 - sheet-mode grading screen (round-2 mockup). Scoped to #scr.sm (scenario screen), .sm-db (live Debrief
   sheet) and .smd (debrief content, shared by the Debrief sheet and History). Light + dark via prefers-color-scheme. */
:root {
  --sm-page: #eef1f6; --sm-bg: #ffffff; --sm-head: #f7f9fc; --sm-line: #d5dbe5; --sm-line-strong: #b9c2d0;
  --sm-ink: #0b1a2f; --sm-ink2: #2f3e55; --sm-ink3: #5f6d83; --sm-box: #8794a9; --sm-boxbg: #fff;
  --sm-red-ink: #b3202d; --sm-green-ink: #0b7a53; --sm-amber-ink: #8a5200; --sm-brown: #a2603a; --sm-brown-ink: #7a3d14;
  --sm-row-done: #eaf6f0; --sm-row-fail: #fde8ea; --sm-row-note: #fff4e0; --sm-row-active: #f1f4f9;
  --sm-head-crit: #fdf3f4; --sm-head-done: #e9f7f0; --sm-tag-crit: #fdecee; --sm-tag-good: #dff3ea; --sm-tag-note: #fff1d9; --sm-tag-br: #f9e9dc;
  --sm-tint: #e8eef9; --sm-tint-ink: #0d2c5a; --sm-chip: #f1f4f9; --sm-olist: #e8eef9; --sm-foot: rgba(255,255,255,.96);
  --sm-done-ink: #0a3a28; --smd-track: #e3e8f0; --sm-bar1: #041a38; --sm-bar2: #0d2c5a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sm-page: #05090f; --sm-bg: #0f1724; --sm-head: #162133; --sm-line: rgba(255,255,255,.10); --sm-line-strong: rgba(255,255,255,.18);
    --sm-ink: #eef3fb; --sm-ink2: #b9c5d8; --sm-ink3: #8796ae; --sm-box: #7b8aa3; --sm-boxbg: #0b121d;
    --sm-red-ink: #ff8a93; --sm-green-ink: #5fe3b0; --sm-amber-ink: #ffc46b; --sm-brown: #c98a5e; --sm-brown-ink: #f0b78d;
    --sm-row-done: rgba(54,211,154,.10); --sm-row-fail: rgba(255,95,107,.13); --sm-row-note: rgba(255,181,71,.10); --sm-row-active: rgba(255,255,255,.05);
    --sm-head-crit: #2a1519; --sm-head-done: #10281f; --sm-tag-crit: rgba(255,95,107,.16); --sm-tag-good: rgba(54,211,154,.16); --sm-tag-note: rgba(255,181,71,.16); --sm-tag-br: rgba(201,138,94,.18);
    --sm-tint: #1c2940; --sm-tint-ink: #cfe0ff; --sm-chip: #1c2940; --sm-olist: #1c2940; --sm-foot: rgba(15,23,36,.96);
    --sm-done-ink: #d6f5e8; --smd-track: rgba(255,255,255,.12); --sm-bar1: #0b2247; --sm-bar2: #12336a;
  }
}
html.sm-screen, html.sm-screen body { background: var(--sm-page); }
/* Scenario root only (#scr.sm). Do NOT use bare .sm — it collides with size modifier .btn-primary.sm / .acct-av.sm and stretches them to 100vh. */
#scr.sm { --barH: 170px; --footH: 66px; min-height: 100vh; background: var(--sm-page); color: var(--sm-ink); font-size: 17px; line-height: 1.4; letter-spacing: -.15px; }
:where(#scr.sm) :where(button, input, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(#scr.sm) :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- sticky score bar ---------- */
.sm-bar { position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, var(--sm-bar1) 0%, var(--sm-bar2) 100%); color: #fff; padding-top: var(--sat); box-shadow: 0 2px 10px rgba(4,26,56,.25); }
.sm-bar::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #1f5fcf 0 50%, #cf2f3c 50% 100%); }
.sm-bar-in { max-width: 1400px; margin: 0 auto; padding-left: var(--sal); padding-right: var(--sar); }
.sm-top { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; }
.sm-back { display: flex; align-items: center; color: #9cc0ff; font-size: 17px; height: 44px; padding-right: 4px; flex: none; text-decoration: none; }
.sm-back svg { width: 22px; height: 22px; }
.sm-ttl { flex: 1; min-width: 0; text-align: center; font-weight: 650; font-size: 16px; line-height: 1.2; }
.sm-ttl b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-ttl small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: #9fb3d1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-ttl small [hidden] { display: none; }
.sm-ib { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #dce7f7; font-size: 14px; font-weight: 600; flex: none; transition: background .2s; }
.sm-ib[hidden] { display: none; }
.sm-ib svg { width: 18px; height: 18px; }
.sm-ib:active { background: rgba(255,255,255,.12); }
#debriefBtn { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.sm-main { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 14px; padding: 2px 16px 10px; }
.sm-big { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.sm-big b { font-size: 40px; font-weight: 800; letter-spacing: -1px; display: inline-block; transform-origin: 50% 80%; }
.sm-big b.bump { animation: smBump .32s var(--spring); }
@keyframes smBump { 40% { transform: scale(1.14); color: #7ff0c2; } }
.sm-big span { font-size: 20px; font-weight: 650; color: #9fb3d1; }
.sm-big em { font-style: normal; font-size: 13px; font-weight: 700; color: #9fb3d1; letter-spacing: .6px; margin-left: 4px; text-transform: uppercase; }
.sm-chips { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: #e6eefb; white-space: nowrap; }
.sm-chip[hidden] { display: none; }
.sm-chip svg { width: 13px; height: 13px; }
.sm-chip.crit { background: rgba(207,47,60,.28); color: #ffd9dc; }
.sm-chip.crit.ok { background: rgba(18,153,106,.32); color: #c9f7e3; }
.sm-chip.crit.fail { background: #cf2f3c; color: #fff; }
.sm-meter { flex-basis: 100%; height: 6px; background: rgba(255,255,255,.14); margin-top: 10px; border-radius: 6px; overflow: hidden; }
.sm-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f8cff, #36d39a); border-radius: 6px; transition: width .45s var(--ease); }
.sm-meter i.full { background: #36d39a; }
.sm-seg { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 10px 10px; background: rgba(255,255,255,.1); border-radius: 11px; padding: 3px; gap: 2px; }
.sm-seg button { height: 34px; border-radius: 9px; font-size: 14.5px; font-weight: 650; color: #c9d6ea; white-space: nowrap; position: relative; transition: background .18s, color .18s; }
.sm-seg button.on { background: #fff; color: #041a38; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sm .dot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ffcc00; display: none; }
.sm .has .dot { display: block; }
.sm-draft { max-width: 1400px; margin: 10px auto 0; padding: 10px 16px; background: #fff4e0; color: #8a5200; font-size: 15px; border-top: 1px solid #f0d9ae; border-bottom: 1px solid #f0d9ae; }
@media (prefers-color-scheme: dark) { .sm-draft { background: rgba(255,181,71,.12); color: #ffc46b; border-color: rgba(255,181,71,.25); } }

/* ---------- layout ---------- */
.sm-layout { max-width: 1400px; margin: 0 auto; padding: 10px 0 calc(var(--footH) + 24px); padding-left: var(--sal); padding-right: var(--sar); }
.sm.phone[data-tab="run"] .sm-side { display: none; }
.sm.phone:not([data-tab="run"]) #body { display: none; }
.sm.phone .sm-side { display: block; }
.sm .disclaimer { margin-bottom: 8px; }

/* ---------- sections ---------- */
.sm-sec, .sm-ref { background: var(--sm-bg); border-top: 1px solid var(--sm-line); border-bottom: 1px solid var(--sm-line); margin-bottom: 10px; }
.sm-sh, .sm-rh { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; text-align: left; background: var(--sm-head); border-bottom: 1.5px solid var(--sm-line-strong); overflow: hidden; color: var(--sm-ink); }
.sm-sh { position: sticky; top: var(--barH); z-index: 10; }
.sm-num { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: #041a38; color: #fff; transition: background .25s; }
@media (prefers-color-scheme: dark) { .sm-num { background: #1b4c92; } }
.sm-num svg { width: 16px; height: 16px; }
.sm-sh h2, .sm-rh h2 { margin: 0; flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; line-height: 1.25; color: var(--sm-ink); }
.sm-ph { display: inline-block; font-size: 11px; letter-spacing: .5px; padding: 1px 6px; border-radius: 5px; background: var(--sm-tag-note); color: var(--sm-amber-ink); vertical-align: 2px; }
.sm-cnt { font-size: 15px; font-weight: 700; color: var(--sm-ink2); flex: none; }
.sm-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--sm-ink3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.sm-sec.collapsed .sm-chev { transform: rotate(-90deg); }
.sm-sec.collapsed .sm-rows { display: none; }
.sm-sec.collapsed .sm-sh { border-bottom: 0; }
.sm-sec.critical .sm-num { background: #cf2f3c; }
.sm-sec.critical .sm-sh { background: var(--sm-head-crit); }
.sm-sec.complete .sm-sh { background: var(--sm-head-done); }
.sm-sec.complete .sm-num { background: var(--green); }
.sm-sec.complete .sm-cnt { color: var(--sm-green-ink); }
.sm-sec.just-done .sm-num { animation: smPop .5s var(--spring); }
.sm-sec.just-done .sm-sh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(18,153,106,.25), transparent); animation: smSweep .7s var(--ease) forwards; pointer-events: none; }
@keyframes smSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes smPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.sm-secfoot { padding: 8px 14px 10px; font-size: 14px; color: var(--sm-ink3); }

/* ---------- rows ---------- */
.sm-row { display: grid; grid-template-columns: 30px 1fr 34px; column-gap: 12px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--sm-line); cursor: pointer; touch-action: manipulation; position: relative; transition: background-color .22s; outline: none; }
.sm-row:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
.sm-row:active { background: var(--sm-row-active); }
.sm-box { width: 28px; height: 28px; margin-top: -1px; border: 2.25px solid var(--sm-box); border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--sm-boxbg); transition: background .18s, border-color .18s, transform .18s; -webkit-user-select: none; user-select: none; }
.sm-box svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sm-box .ckp { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .22s var(--ease) .04s; }
.sm-box .xp { display: none; }
.sm-row.on .sm-box { background: var(--green); border-color: var(--green); }
.sm-row.on .sm-box .ckp { stroke-dashoffset: 0; }
.sm-box.pop { animation: smBoxpop .3s var(--spring); }
@keyframes smBoxpop { 0% { transform: scale(.78); } 100% { transform: scale(1); } }
.sm-row.on { background: var(--sm-row-done); }
.sm-txt { min-width: 0; }
.sm-lab { font-size: 17px; font-weight: 650; line-height: 1.3; color: var(--sm-ink); overflow-wrap: anywhere; }
.sm-fb { font-size: 16px; line-height: 1.42; color: var(--sm-ink2); margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }
.sm-row.on .sm-lab { color: var(--sm-done-ink); }
.sm-pts { justify-self: end; text-align: right; font-size: 17px; font-weight: 700; color: var(--sm-ink3); padding-top: 1px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; -webkit-user-select: none; user-select: none; }
.sm-row.on .sm-pts { color: var(--sm-green-ink); }
.sm-pts.pop { animation: smPtspop .35s var(--spring); }
@keyframes smPtspop { 50% { transform: scale(1.3); } }
.sm-flag { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--hl); color: var(--sm-ink); font-style: normal; }
.sm-flag svg { width: 14px; height: 14px; }
.sm-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; line-height: 1.5; }
.sm-tag svg { width: 12px; height: 12px; flex: none; }
.sm-tag.warn, .sm-tag.bad { color: var(--sm-red-ink); background: var(--sm-tag-crit); }
.sm-tag.good { color: var(--sm-green-ink); background: var(--sm-tag-good); }
.sm-tag.zero { color: var(--sm-amber-ink); background: var(--sm-tag-note); }
.sm-tag.br { color: var(--sm-brown-ink); background: var(--sm-tag-br); }
/* must-do + required-before: red stripe, red box until done */
.sm-row.k-must::before, .sm-row.k-gate::before, .sm-row.k-trig::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
.sm-row.k-must .sm-box, .sm-row.k-gate .sm-box, .sm-row.k-trig .sm-box { border-color: var(--red); }
.sm-row.k-must.on::before, .sm-row.k-gate.on::before { background: var(--green); }
.sm-row.k-must.on .sm-box, .sm-row.k-gate.on .sm-box { background: var(--green); border-color: var(--green); }
.sm-row.late::before { background: var(--red); }
/* missed at stop / missed-before gate */
.sm-row.fail { background: var(--sm-row-fail); }
.sm-row.fail .sm-box, .sm-row.bad .sm-box { background: var(--red); border-color: var(--red); }
.sm-row.fail .sm-box .ckp, .sm-row.bad .sm-box .ckp { display: none; }
.sm-row.fail .sm-box .xp, .sm-row.bad .sm-box .xp { display: block; }
.sm-row.fail .sm-tag.bad, .sm-row.bad .sm-tag.bad { background: var(--red); color: #fff; }
.sm-row.fail .sm-pts { color: var(--sm-red-ink); text-decoration: line-through; }
.sm-row.shake { animation: smShake .38s; }
@keyframes smShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
/* critical trigger (marking it IS the fail) */
.sm-row.k-trig.on { background: var(--sm-row-fail); }
.sm-row.k-trig.on .sm-pts { color: var(--sm-red-ink); }
/* zero-point, track only */
.sm-row.k-zero .sm-box { border-style: dashed; border-color: var(--amber); }
.sm-row.k-zero.on { background: var(--sm-row-note); }
.sm-row.k-zero.on .sm-box { background: var(--amber); border-color: var(--amber); border-style: solid; }
.sm-row.k-zero.on .sm-pts { color: var(--sm-amber-ink); }
/* branch: deterioration if treatment delayed */
.sm-row.k-branch .sm-box { border-color: var(--sm-brown); }
.sm-row.k-branch.on { background: var(--sm-row-fail); }
.sm-row.k-branch.on .sm-pts { color: var(--sm-red-ink); }
.sm-row.flagged .sm-lab { text-decoration: none; }
.sm-vit { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px 12px; margin-top: 6px; font-size: 16px; }
.sm-vit > div { display: flex; flex-direction: column; min-width: 0; }
.sm-vit > div.vw1 { grid-column: span 2; } .sm-vit > div.vw2 { grid-column: 1 / -1; }
.sm-vit small { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--sm-ink3); text-transform: uppercase; }
.sm-vit span { font-weight: 650; color: var(--sm-ink); }
.sm-rv { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--primary) !important; border: 1.5px solid var(--primary-line) !important; border-radius: 9px; padding: 6px 11px !important; background: var(--sm-bg) !important; }
.sm-rv svg { width: 17px; height: 17px; }
.sm-rv-img { display: block; position: relative; width: 100%; margin-top: 8px; border: 1px solid var(--sm-line) !important; border-radius: 8px; overflow: hidden; background: #fff !important; padding: 0 !important; }
.sm-rv-img img { display: block; width: 100%; height: auto; }
.sm-rv-img .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; }
.sm-rv-img .zoom-ico svg { width: 16px; height: 16px; }
.sm-rv-cap { font-size: 13.5px; color: var(--sm-ink3); margin-top: 4px; }
/* section notes */
.sm-snote { padding: 8px 14px 10px; border-top: 1px dashed var(--sm-line-strong); border-bottom: 1px solid var(--sm-line); background: var(--sm-head); }
.sm-addnote { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 650; color: var(--primary) !important; padding: 4px 0 !important; }
.sm-addnote svg, .sm-nlab svg { width: 16px; height: 16px; }
.sm-nlab { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--sm-ink3); margin-bottom: 4px; }
.sm textarea.note, .smd textarea.note { display: block; width: 100%; border: 1.5px solid var(--sm-line-strong); border-radius: 9px; background: var(--sm-bg); padding: 9px 11px; font-size: 17px; line-height: 1.4; color: var(--sm-ink); resize: none; min-height: 46px; overflow: hidden; outline: none; margin: 0; }
.sm textarea.note:focus, .smd textarea.note:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sm textarea.note.big, .smd textarea.note.big { min-height: 120px; }

/* ---------- reference panes ---------- */
.sm-rh .sm-num svg { width: 15px; height: 15px; }
.sm-body { padding: 12px 16px 14px; font-size: 17px; line-height: 1.5; color: var(--sm-ink); white-space: pre-line; }
.sm-body.sm-lede { font-size: 17.5px; }
.sm-body.sm-small { font-size: 15.5px; padding: 6px 16px 4px; color: var(--sm-ink2); }
.sm-body.sm-muted { color: var(--sm-ink3); font-size: 16px; }
.sm-olist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.sm-olist li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--sm-line); font-size: 17px; line-height: 1.48; color: var(--sm-ink); }
.sm-olist li:last-child { border-bottom: 0; }
.sm-olist li::before { content: counter(n); width: 26px; height: 26px; border-radius: 50%; background: var(--sm-olist); color: var(--sm-tint-ink); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sm-olist.flow li::before { background: #041a38; color: #fff; }
@media (prefers-color-scheme: dark) { .sm-olist.flow li::before { background: #1b4c92; } }
.sm-kv { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--sm-line); padding: 10px 16px; gap: 12px; font-size: 17px; align-items: baseline; }
.sm-kv:last-child { border-bottom: 0; }
.sm-kv span { color: var(--sm-ink2); }
.sm-kv b { font-weight: 750; text-align: right; }
.sm-kv.bad b { color: var(--sm-red-ink); }
.sm-subh { padding: 9px 16px 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--sm-ink3); background: var(--sm-head); border-bottom: 1px solid var(--sm-line); border-top: 1px solid var(--sm-line); }
.sm-subh.red { color: var(--sm-red-ink); background: var(--sm-head-crit); }
.sm-subh.green { color: var(--sm-green-ink); background: var(--sm-head-done); }
.sm-ecg { padding: 0 0 12px; } .sm-ecg .sm-rv, .sm-ecg .sm-rv-img, .sm-ecg .sm-rv-cap { margin-left: 16px; } .sm-ecg .sm-rv-img { width: calc(100% - 32px); }
.sm-field { display: grid; grid-template-columns: 130px 1fr; align-items: center; border-bottom: 1px solid var(--sm-line); padding: 4px 16px; min-height: 50px; font-size: 17px; }
.sm-field:last-child { border-bottom: 0; }
.sm-field span { color: var(--sm-ink2); font-weight: 600; }
.sm-field input { border: 0; outline: none; background: transparent; font-size: 17px; padding: 10px 0; color: var(--sm-ink); min-width: 0; }
.sm-pad { padding: 12px 16px; }
.sm-empty { padding: 24px 16px; text-align: center; color: var(--sm-ink3); }
.sm-foot-note { font-size: 14px; color: var(--sm-ink3); margin: 6px 16px 0; text-align: center; }
.sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 12px; font-size: 16.5px; font-weight: 700; border: 0; cursor: pointer; font-family: inherit; }
.sm-btn svg { width: 19px; height: 19px; }
.sm-btn.primary { background: #041a38; color: #fff; }
.sm-btn.tint { background: var(--sm-tint); color: var(--sm-tint-ink); }
.sm-btn.wide { width: 100%; }
.sm-btn.busy { opacity: .6; }
@media (prefers-color-scheme: dark) { .sm-btn.primary { background: #1f5fcf; } }

/* ---------- bottom bar ---------- */
.sm-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--sm-foot); border-top: 1px solid var(--sm-line-strong); padding: 10px calc(14px + var(--sar)) calc(10px + var(--sab)) calc(14px + var(--sal)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sm-foot-in { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.sm-play { width: 44px; height: 44px; border-radius: 50%; background: var(--green) !important; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; transition: transform .15s; }
.sm-play:active { transform: scale(.92); }
.sm-play svg { width: 20px; height: 20px; }
.sm-play.run { background: #041a38 !important; }
@media (prefers-color-scheme: dark) { .sm-play.run { background: #1b4c92 !important; } }
.sm-clock { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer; }
.sm-clock b { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--sm-ink); }
.sm-clock small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sm-ink3); text-transform: uppercase; letter-spacing: .6px; }
.sm-clock small i { width: 7px; height: 7px; border-radius: 50%; background: var(--sm-ink3); flex: none; }
.sm-foot.running .sm-clock small i, .sm.running .sm-foot .sm-clock small i { background: var(--green); animation: smBlink 1.6s infinite; }
.sm-foot.stopped .sm-clock small i, .sm.stopped .sm-foot .sm-clock small i { background: var(--red); }
.sm-foot.paused .sm-clock small i, .sm.paused .sm-foot .sm-clock small i { background: #e0a800; }
@keyframes smBlink { 50% { opacity: .25; } }
.sm-end { height: 44px; padding: 0 18px; border-radius: 12px; background: #041a38 !important; color: #fff; font-weight: 700; font-size: 16px; flex: none; }
.sm-end.done { background: var(--green) !important; }
@media (prefers-color-scheme: dark) { .sm-end { background: #1f5fcf !important; } .sm-end.done { background: #12996a !important; } }
/* iPad foot: points + meter beside End run */
.sm-score { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-score-top { display: flex; align-items: baseline; gap: 4px; line-height: 1; color: var(--sm-ink); }
.sm-score-top b { font-size: 28px; font-weight: 800; letter-spacing: -.5px; display: inline-block; transform-origin: 50% 80%; color: var(--sm-ink); }
.sm-score-top b.bump { animation: smBumpFoot .32s var(--spring); }
@keyframes smBumpFoot { 40% { transform: scale(1.14); color: #12996a; } }
@media (prefers-color-scheme: dark) { @keyframes smBumpFoot { 40% { transform: scale(1.14); color: #7ff0c2; } } }
.sm-score-top span { font-size: 16px; font-weight: 650; color: var(--sm-ink3); }
.sm-score-top em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--sm-ink3); letter-spacing: .6px; margin-left: 3px; text-transform: uppercase; }
.sm-score .sm-meter { flex-basis: auto; margin-top: 0; height: 6px; background: rgba(4,26,56,.10); }
@media (prefers-color-scheme: dark) { .sm-score .sm-meter { background: rgba(255,255,255,.12); } }

/* ---------- tablet ---------- */
/* Dual-column scroll: pad shell locks html/body; sheet mode scrolls #body + .sm-side-scroll independently. */
@media (min-width: 768px) and (min-height: 600px) {
  html.sm-screen, html.sm-screen body { height: 100% !important; overflow: hidden !important; }
  html.sm-screen #app { height: 100%; overflow: hidden; }
  .sm.tablet { height: 100%; max-height: 100dvh; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .sm.tablet .sm-bar { flex: none; position: relative; /* bar is outside the column scroller */ }
  .sm.tablet .sm-layout {
    flex: 1; min-height: 0; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: 16px;
    padding: 14px 16px; align-items: stretch;
  }
  @media (orientation: portrait) {
    .sm.tablet .sm-layout { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: 12px; padding: 12px; }
  }
  .sm.tablet .sm-col#body {
    min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-bottom: calc(var(--footH) + 16px);
  }
  .sm.tablet .sm-sh { top: 0; /* sticky within #body scroller */ }
  .sm.tablet .sm-side {
    position: relative; top: auto;
    height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--sm-bg); border: 1px solid var(--sm-line); border-radius: 12px; overflow: hidden;
    margin-bottom: calc(var(--footH) + 4px);
  }
}
.sm.tablet .sm-sec, .sm.tablet .sm-col .sm-ref { border: 1px solid var(--sm-line); border-radius: 12px; overflow: clip; }
.sm.tablet .sm-side .sm-ref { border: 0; margin: 0; border-bottom: 1px solid var(--sm-line); }
.sm-ptabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px; background: var(--sm-head); border-bottom: 1.5px solid var(--sm-line-strong); flex: none; }
.sm-ptabs button { height: 38px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--sm-ink2); position: relative; transition: background .18s, color .18s; }
.sm-ptabs button.on { background: #041a38; color: #fff; }
@media (prefers-color-scheme: dark) { .sm-ptabs button.on { background: #1f5fcf; } }
.sm-ptabs .dot { background: #e0a800; top: 6px; right: 8px; }
@media (orientation: portrait) { .sm-ptabs button { font-size: 14.5px; } }
.sm.tablet .sm-side-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sm.tablet .sm-side-scroll .disclaimer { margin-top: 16px; }
.sm.tablet .sm-main { flex-wrap: nowrap; align-items: center; gap: 16px; padding: 4px 18px 12px; }
/* iPad header: timer is the prominent element (play + mm:ss + state + step/crit chips) */
.sm.tablet .sm-bar .sm-play { width: 48px; height: 48px; }
.sm.tablet .sm-bar .sm-play svg { width: 22px; height: 22px; }
.sm.tablet .sm-bar .sm-play.run { background: rgba(255,255,255,.18) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.sm.tablet .sm-bar .sm-clock { align-items: baseline; color: #fff; }
.sm.tablet .sm-bar .sm-clock b { font-size: 44px; color: #fff; letter-spacing: -1px; }
.sm.tablet .sm-bar .sm-clock small { color: #9fb3d1; }
.sm.tablet .sm-bar .sm-clock small i { background: #9fb3d1; }
.sm.tablet.running .sm-bar .sm-clock small i { background: #36d39a; animation: smBlink 1.6s infinite; }
.sm.tablet.paused .sm-bar .sm-clock small i { background: #ffcc00; }
.sm.tablet.stopped .sm-bar .sm-clock small i { background: #cf2f3c; }
.sm.tablet .sm-chips { flex-direction: row; margin-left: 0; }
.sm.tablet .sm-score-top b { font-size: 32px; }
.sm.tablet .sm-score .sm-meter { height: 8px; }
.sm.tablet .sm-top { padding: 0 12px; }
.sm.tablet .sm-ttl { font-size: 18px; }
.sm.tablet .sm-row { padding: 12px 16px; }
.sm.tablet .sm-lab { font-size: 17.5px; }

/* ---------- live Debrief sheet ---------- */
.sm-db { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-end; }
.sm-db-back { position: absolute; inset: 0; background: rgba(4,26,56,.45); opacity: 0; transition: opacity .25s; }
.sm-db.show .sm-db-back { opacity: 1; }
.sm-db-sheet { position: relative; background: var(--sm-page); color: var(--sm-ink); width: 100%; max-width: 1100px; height: calc(100% - 20px - var(--sat)); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateY(40px); opacity: 0; transition: transform .32s var(--ease), opacity .25s; }
.sm-db.show .sm-db-sheet { transform: none; opacity: 1; }
.sm-db.closing .sm-db-back { opacity: 0; } .sm-db.closing .sm-db-sheet { transform: translateY(40px); opacity: 0; }
.sm-db-head { flex: none; background: linear-gradient(180deg, var(--sm-bar1), var(--sm-bar2)); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.sm-db-head small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9fb3d1; }
.sm-db-head h2 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; }
.sm-db-done { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 16px; border: 0; font-family: inherit; flex: none; cursor: pointer; }
.sm-db-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 0 20px; overscroll-behavior: contain; }
.sm-db-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px calc(10px + var(--sab)); background: var(--sm-foot); border-top: 1px solid var(--sm-line-strong); }
.sm-saved { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--sm-ink3); font-size: 14px; margin: 10px 0 0; }
.sm-saved svg { width: 16px; height: 16px; }
@media (min-width: 768px) and (min-height: 600px) { .sm-db { align-items: center; } .sm-db-sheet { height: calc(100% - 60px); border-radius: 18px; width: calc(100% - 48px); } }

/* ---------- debrief content (live sheet + History) ---------- */
.smd { container-type: inline-size; color: var(--sm-ink); }
.smd-grid { display: block; }
@container (min-width: 760px) { .smd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 14px; align-items: start; } .smd-card, .smd-ok, .smd .smd-cf { border: 1px solid var(--sm-line); border-radius: 12px; overflow: clip; } }
.smd-card { background: var(--sm-bg); border-top: 1px solid var(--sm-line); border-bottom: 1px solid var(--sm-line); margin: 0 0 10px; }
.smd-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px 9px; background: var(--sm-head); border-bottom: 1.5px solid var(--sm-line-strong); }
.smd-h h3 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--sm-ink); }
.smd-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #041a38; color: #fff; flex: none; }
@media (prefers-color-scheme: dark) { .smd-ic { background: #1b4c92; } }
.smd-ic svg { width: 15px; height: 15px; }
.smd-critcard .smd-ic { background: #cf2f3c; }
.smd .smd-cf { margin: 0 0 10px; background: var(--sm-bg); color: var(--sm-ink); border-radius: 0; border-top: 4px solid var(--red); border-bottom: 1px solid var(--sm-line); box-shadow: none; padding: 0; }
.smd .smd-cf .db-cf-h { padding: 12px 16px 4px; color: var(--sm-red-ink); font-size: 18px; }
.smd .smd-cf .db-cf-h svg { width: 20px; height: 20px; }
.smd .smd-cf .db-cf-row { margin: 0; background: none; border-radius: 0; border-bottom: 1px solid var(--sm-line); padding: 10px 16px; font-size: 17px; }
.smd .smd-cf .db-cf-row span { color: var(--sm-red-ink); }
.smd .smd-cf p { margin: 0; padding: 8px 16px 12px; font-size: 15.5px; color: var(--sm-ink2); }
.smd-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; background: var(--sm-bg); border-top: 4px solid var(--green); border-bottom: 1px solid var(--sm-line); padding: 12px 16px; font-weight: 800; color: var(--sm-green-ink); font-size: 17px; }
.smd-ok svg { width: 18px; height: 18px; flex: none; }
.smd .smd-kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--sm-line); margin: 0; background: none; }
.smd .smd-kv small { font-size: 17px; color: var(--sm-ink2); text-transform: none; letter-spacing: 0; font-weight: 400; }
.smd .smd-kv b { font-size: 17px; font-weight: 750; }
.smd .smd-sum { display: flex; align-items: center; gap: 18px; padding: 14px 16px; margin: 0; background: none; color: var(--sm-ink); border-radius: 0; box-shadow: none; }
.smd .smd-sum .ring { position: relative; width: 104px; height: 104px; flex: none; }
.smd .smd-sum .ring svg { transform: rotate(-90deg); }
.smd .smd-sum .ring circle:first-child { stroke: var(--smd-track); }
.smd .smd-sum .ring circle.fg { transition: stroke-dashoffset 1s var(--ease); }
.smd .smd-sum .ring .lbl b { font-size: 30px; font-weight: 800; color: var(--sm-ink); }
.smd .smd-sum .ring .lbl span { display: block; font-size: 13px; color: var(--sm-ink3); font-weight: 600; margin-top: 2px; }
.smd .smd-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.smd .smd-stats div { background: none; padding: 0; border-radius: 0; }
.smd .smd-stats small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--sm-ink3); }
.smd .smd-stats b { display: block; font-size: 20px; font-weight: 800; margin-top: 1px; color: var(--sm-ink); }
.smd .smd-stats b em { font-style: normal; font-size: 15px; color: var(--sm-ink3); font-weight: 700; }
.smd .smd-stats b.bad { color: var(--sm-red-ink); } .smd .smd-stats b.good { color: var(--sm-green-ink); }
.smd .smd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 14px; margin: 0; }
.smd .smd-actions .sm-btn { min-width: 0; padding: 0 10px; }
.smd-bk { border-bottom: 1px solid var(--sm-line); }
.smd-bk:last-child { border-bottom: 0; }
.smd-bk-h { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px 6px; align-items: baseline; }
.smd-bk-h b { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.smd-bk-h span { font-size: 16px; font-weight: 800; white-space: nowrap; }
.smd-bar { height: 6px; border-radius: 6px; background: var(--smd-track); overflow: hidden; margin: 0 16px 8px; }
.smd-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.smd-bk.full .smd-bk-h span { color: var(--sm-green-ink); } .smd-bk.full .smd-bar i { background: var(--green); }
.smd .smd-miss { list-style: none; margin: 0; padding: 0 16px 10px; }
.smd .smd-miss li { padding: 7px 0 7px 22px; position: relative; border-top: 1px dashed var(--sm-line); }
.smd .smd-miss li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 9px; height: 9px; border: 2px solid var(--sm-ink3); border-radius: 3px; }
.smd .smd-miss li.crit::before { border-color: var(--red); background: var(--red); }
.smd .smd-miss li.br::before { border-color: var(--sm-brown); background: var(--sm-brown); }
.smd .smd-miss li.allok { color: var(--sm-green-ink); font-weight: 700; font-size: 15.5px; }
.smd .smd-miss li.allok::before { border-color: var(--green); background: var(--green); }
.smd .smd-miss li b { display: block; font-size: 16.5px; font-weight: 700; }
.smd .smd-miss li span { display: block; font-size: 15.5px; color: var(--sm-ink2); line-height: 1.4; white-space: pre-line; }
.smd-crit { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--sm-red-ink); margin-left: 4px; }
.smd-okline { margin: 0; padding: 12px 16px; color: var(--sm-green-ink); font-weight: 700; }
.smd .smd-tl { margin: 0 16px; }
.smd .smd-tl li { border-top-color: var(--sm-line); font-size: 15.5px; }
.smd .smd-tl-sum { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--sm-line); font-weight: 700; color: var(--sm-ink2); font-size: 15px; }
.smd-muted { color: var(--sm-ink3); padding: 12px 16px; margin: 0; }
.smd-olist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.smd-olist li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--sm-line); font-size: 17px; line-height: 1.48; }
.smd-olist li:last-child { border-bottom: 0; }
.smd-olist li::before { content: counter(n); width: 26px; height: 26px; border-radius: 50%; background: var(--sm-olist); color: var(--sm-tint-ink); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.smd-olist.disc li::before { background: var(--sm-tag-note); color: var(--sm-amber-ink); }
.smd-text { padding: 12px 16px; font-size: 17px; line-height: 1.5; white-space: pre-line; }
.smd .db-n { border-top-color: var(--sm-line); }
.smd-card .smd-h + .db-n { border-top: 0; }
.smd-pad { padding: 12px 16px; }
/* History: the shared content sits inside the app's run-detail screen */
.run-detail .smd { margin-top: 6px; }
.run-detail .smd-grid { padding-left: 0; padding-right: 0; }
@media (prefers-reduced-motion: reduce) { .sm *, .sm-db, .sm-db * { animation: none !important; transition: none !important; } }