/* THRY Evaluations -- the field app's look.
 *
 * The LOUD roles (public/coach-tools/loud/tokens/colors.css), the look the
 * Practice pages and the new Admin wear, copied here because eval.gothry.com
 * serves only /eval/ files. Archivo (display, uppercase), Geist (body), Geist
 * Mono (every figure and every uppercase micro-label), loaded by the page.
 *
 * The class names are the field-tested app's own (thry-evaluations
 * public/index.html), so the ported markup is unchanged; the old names
 * (--ground, --panel, --sys ...) are mapped onto LOUD roles below.
 *
 * TYPE FLOOR 13px for anything read while scoring; score targets >= 44px
 * (the inventory's strongest advisory, D14). ASCII only.
 */
:root {
  --x-canvas: #EAE7E2; --x-surface: #FFFFFF; --x-surface-2: #F4F2EF;
  --x-ink: #0C0C0B; --x-on-ink: var(--x-canvas); --x-ink-2: #4A4945; --x-ink-3: #67655F;
  --x-line: #D7D3CC; --x-line-2: #C2BDB4;
  --x-accent: #D8FF3E; --x-on-accent: #0C0C0B; --x-accent-soft: #F2FFC4;
  --x-ok: #12A150; --x-warn: #C97A00; --x-bad: #D40009;
  --x-lane-1: #FF1E8C; --x-lane-2: #5B3FD6; --x-lane-3: #1E4FFF;
  --x-radius-card: 20px; --x-radius-control: 10px; --x-radius-well: 12px; --x-radius-sheet: 24px;
  --ease: cubic-bezier(.16,1,.3,1);

  /* the old app's names, on LOUD roles */
  --ground: var(--x-canvas); --panel: var(--x-surface); --sunken: var(--x-surface-2);
  --ink: var(--x-ink); --soft: var(--x-ink-2); --faint: var(--x-ink-3);
  --line: var(--x-line); --line2: var(--x-line-2);
  --heat: var(--x-lane-1); --ice: var(--x-lane-3);
  --sys: var(--x-lane-2);                       /* selection, armed, Performance */
  --red: var(--x-bad); --amber: var(--x-warn); --green: var(--x-ok); --deep: #0B7A3B;
  --t1: #0B7A3B; --t2: #12A150; --t3: #C97A00; --t4: #D40009;
  --drawerhead: 52px;
  --font-display: Archivo, "Arial Narrow", system-ui, sans-serif;
  --font-body: Geist, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --x-canvas: #0B0B0A; --x-surface: #161614; --x-surface-2: #201F1C;
  --x-ink: #F5F3EF; --x-ink-2: #B3B1AA; --x-ink-3: #94918A;
  --x-line: #2E2D29; --x-line-2: #3D3B36;
  --x-accent-soft: #2A3308;
  --x-ok: #3ED07E; --x-warn: #FFB92E; --x-bad: #FF5B52;
  --sys: var(--x-accent);
  --deep: #2FAE66; --t1: #3ED07E; --t2: #9BE7B8; --t3: #FFB92E; --t4: #FF5B52;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; background: var(--ground); }
body {
  color: var(--ink); font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--sys); outline-offset: 2px;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* -- The app frame ------------------------------------------------------------ */
.page { min-height: 100dvh; }
.device { width: 100%; max-width: 560px; height: 100vh; height: 100dvh; margin: 0 auto; }
.device[data-frame="tablet"] { max-width: none; }
.screen { --safe-top: max(10px, env(safe-area-inset-top, 0px));
  width: 100%; height: 100%; background: var(--ground); display: flex; flex-direction: column; position: relative; overflow: hidden; }

.top { display: flex; align-items: center; gap: 10px; padding: var(--safe-top) 14px 10px;
       border-bottom: 1px solid var(--line); flex: none; background: var(--panel); }
.mark { width: 16px; height: 16px; flex: none; background: linear-gradient(100deg, var(--heat), var(--ice));
        clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.title { display: grid; min-width: 0; flex: 1; line-height: 1.1; }
.title #tname { font: 700 17px/1.1 var(--font-display); font-stretch: 87%; text-transform: uppercase;
                letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { font: 400 13px/1.3 var(--font-mono); color: var(--soft); letter-spacing: .06em; text-transform: uppercase;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whochip { font: 500 13px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--soft);
           border: 1px solid var(--line2); border-radius: 999px; padding: 7px 10px; white-space: nowrap; flex: none;
           max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
.lockbtn { width: 44px; height: 44px; flex: none; border-radius: var(--x-radius-control); border: 1px solid var(--line2);
           background: var(--sunken); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.lockbtn:hover { border-color: var(--ink); }
.device[data-frame="p-port"] .whochip { display: none; }

.body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

.dock { padding: 6px 12px max(9px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px;
        flex: none; background: var(--panel); border-top: 1px solid var(--line); }
.dock .nav { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr);
             background: var(--sunken); border: 1px solid var(--line); border-radius: 16px; padding: 4px; gap: 2px; }
.dock .nav button { border: 0; background: transparent; cursor: pointer; border-radius: 12px; height: 48px;
  padding: 0 2px; color: var(--soft); font: 700 15px/1 var(--font-display); font-stretch: 87%;
  letter-spacing: .02em; text-transform: uppercase; }
.dock .nav button[aria-pressed="true"] { background: var(--ink); color: var(--x-on-ink); }
.device[data-frame="tablet"] .dock { padding-left: 20px; padding-right: 20px; }
.device[data-frame="tablet"] .dock .nav { max-width: 640px; margin: 0 auto; }

.mic { width: 58px; height: 58px; flex: none; border-radius: 50%; cursor: pointer;
       border: 1.5px solid var(--line2); background: var(--sunken); color: var(--ink);
       display: grid; place-items: center; position: relative; touch-action: none;
       user-select: none; -webkit-user-select: none; transition: transform .12s ease, border-color .18s ease; }
.mic:hover { border-color: var(--sys); }
.mic[data-live="1"] { border-color: var(--sys); transform: scale(1.06); }
.heard { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 30;
         background: var(--ink); color: var(--x-on-ink); border-radius: 12px;
         padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.heard em { font-style: normal; display: block; margin-top: 4px; font: 13px var(--font-mono);
            letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

/* -- Shared bits ------------------------------------------------------------- */
.pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.formcol { max-width: 760px; margin: 0 auto; }
.slab { font: 500 13px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
        display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.slab em { font-style: normal; color: var(--faint); letter-spacing: .04em; }
.rule { height: 2px; background: linear-gradient(100deg, var(--heat), var(--ice)); opacity: .6; display: block; }
.pill { font: 13px var(--font-mono); text-transform: uppercase; border: 1px solid var(--line2);
        border-radius: 20px; padding: 2px 8px; color: var(--soft); white-space: nowrap; }

/* -- EVALUATE ---------------------------------------------------------------- */
.subj { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.bib { width: 52px; height: 52px; flex: none; border-radius: var(--x-radius-control); display: grid; place-items: center;
       background: var(--sunken); border: 1px solid var(--line2); font-size: 22px; font-weight: 500; }
.subj .bib, .subj .who { font: inherit; background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0; }
.subj .bib { border: 1px solid var(--line2); background: var(--sunken); font: 500 22px var(--font-mono); text-align: center; }
.subj .bib:hover { border-color: var(--sys); }
.subj .who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.subj .nm { font-size: 18px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subj .meta { font: 13px/1.3 var(--font-mono); color: var(--soft); letter-spacing: .04em; text-transform: uppercase; }
.subj .caret { flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
               border: 1px solid var(--line2); border-radius: var(--x-radius-control); background: var(--sunken);
               color: var(--soft); display: grid; place-items: center; }
.subj .caret::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.subj .caret[aria-expanded="true"]::before { transform: rotate(225deg) translate(-2px, -2px); }
.subj .caret:hover { color: var(--ink); border-color: var(--sys); }
.clockbox { display: grid; justify-items: end; gap: 3px; flex: none; }
.clockbox .slab { font-size: 13px; }
.obs { font: 500 19px var(--font-mono); letter-spacing: .02em; border: 1.5px solid var(--line2); border-radius: var(--x-radius-control);
       padding: 0 12px; background: var(--sunken); cursor: pointer; color: var(--ink); min-height: 44px; min-width: 82px; }
.obs.run { border-color: var(--green); color: var(--green); }
.obs.prov { border-color: var(--amber); }

.scorebar { display: flex; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); align-items: stretch; flex: none; background: var(--panel); }
.bigscore { display: grid; gap: 3px; flex: none; min-width: 104px; align-content: start; }
.bigscore .v { font: 500 40px/1 var(--font-mono); letter-spacing: -.03em; }
.bigscore .l { font: 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.tierchip { font: 500 13px/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase;
            border-radius: 6px; padding: 3px 7px; align-self: start; border: 1.5px solid; }
.parts { display: grid; gap: 6px; flex: 1; min-width: 0; align-content: center; }
.prow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.prow span { width: 82px; flex: none; color: var(--soft); font-family: var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.prow i { flex: 1; height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; border: 1px solid var(--line); }
.prow i u { display: block; height: 100%; text-decoration: none; transition: width .3s var(--ease); }
.prow b { width: 34px; text-align: right; font-weight: 500; font-size: 15px; }

/* Rows in the picker and the iPad athlete list. */
.subjrow { width: 100%; display: flex; align-items: center; gap: 12px; font: inherit;
           background: transparent; border: 0; border-bottom: 1px solid var(--line);
           color: inherit; cursor: pointer; padding: 10px 14px; min-height: 60px; text-align: left; }
.subjrow:hover { background: var(--sunken); }
.subjrow.on { background: color-mix(in srgb, var(--sys) 16%, transparent); box-shadow: inset 3px 0 0 var(--sys); }
.subjrow .n { width: 38px; flex: none; font-size: 18px; font-weight: 500; color: var(--soft); text-align: center; }
.subjrow.on .n { color: var(--ink); }
.subjrow .who { display: grid; gap: 2px; flex: 1; min-width: 0; }
.subjrow .nm { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subjrow .meta { font: 13px var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }

/* -- Assignment, in the picker (lead only; the server re-checks) ------------- */
.sheethead .modebtn { font: 700 15px/1 var(--font-display); font-stretch: 87%; text-transform: uppercase;
  padding: 0 14px; min-height: 44px; cursor: pointer; border: 1px solid var(--line2); border-radius: var(--x-radius-control);
  background: transparent; color: var(--ink); }
.sheethead .modebtn:hover { border-color: var(--sys); }
.sheethead .modebtn.on { background: var(--ink); color: var(--x-on-ink); border-color: var(--ink); }
.assignall { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
             border-bottom: 1px solid var(--line); background: var(--sunken); flex: none; }
.assignall .lb, .setrow .lb { font-size: 15px; font-weight: 600; display: grid; gap: 3px; }
.assignall .lb em, .setrow .lb em { font-style: normal; font-size: 13.5px; font-weight: 400; color: var(--soft); line-height: 1.45; }
.sw { flex: none; width: 52px; height: 32px; padding: 3px; cursor: pointer; margin-top: 1px;
      border: 1px solid var(--line2); border-radius: 999px; background: var(--sunken); }
.sw i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--faint);
        transition: transform .2s var(--ease), background .2s ease; }
.sw.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); }
.sw.on i { transform: translateX(20px); background: var(--green); }
.sw:disabled { opacity: .45; cursor: default; }
.subjrow.assigning { cursor: default; }
.subjrow .pickpart { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
                     font: inherit; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; text-align: left; }
.subjrow .pickpart:disabled { cursor: default; }
.assignset { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.ev { font: 500 13px var(--font-mono); width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: var(--x-radius-control);
      border: 1px solid var(--line2); background: var(--ground); color: var(--faint); }
.ev.on { border-color: var(--sys); background: color-mix(in srgb, var(--sys) 22%, transparent); color: var(--ink); }
.ev:disabled { opacity: .4; cursor: default; }

/* -- Setup and Export -------------------------------------------------------- */
.setsec { padding: 16px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.setsec:last-child { border-bottom: 0; }
.opts { display: grid; gap: 8px; }
.opt { font: inherit; text-align: left; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line2);
       border-radius: var(--x-radius-control); background: var(--panel); color: var(--ink); display: grid; gap: 3px; min-height: 52px; }
.opt.on { border-color: var(--sys); background: color-mix(in srgb, var(--sys) 14%, var(--panel)); box-shadow: inset 0 0 0 1px var(--sys); }
.opt:disabled { cursor: default; opacity: .7; }
.opt:disabled.on { opacity: 1; }
.opt .ol { font-size: 16px; font-weight: 600; }
.opt .om { font-size: 13.5px; color: var(--soft); line-height: 1.45; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fld { display: grid; gap: 5px; min-width: 0; }
.fld.grow { flex: 1; }
.fld > span { font: 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fld input, .fld textarea { font: inherit; font-size: 16px; width: 100%; padding: 10px 12px; border-radius: var(--x-radius-control);
  border: 1px solid var(--line2); background: var(--panel); color: var(--ink); min-height: 48px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); }
.fld input:disabled, .fld textarea:disabled { background: var(--sunken); color: var(--soft); }
.setrow { display: flex; align-items: flex-start; gap: 12px; }
.setrow.tight { gap: 10px; }
.addrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.addrow .lb { flex: 1; display: grid; gap: 2px; font-size: 16px; font-weight: 600; min-width: 0; }
.addrow .lb em { font-style: normal; color: var(--soft); font-size: 13.5px; font-weight: 400; }
.hintline { margin: 0; font-size: 13.5px; color: var(--soft); line-height: 1.55; }
.hintline.warn { color: var(--amber); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--x-radius-control); overflow: hidden; background: var(--sunken); }
.seg button { font: 500 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 0 14px; border: 0;
              background: transparent; color: var(--soft); cursor: pointer; min-height: 44px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--x-on-ink); }
.seg.wide { display: grid; grid-template-columns: 1fr 1fr; }
.cover { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
         border-radius: var(--x-radius-control); background: var(--sunken); }
.cover .cv { font-size: 22px; font-weight: 500; flex: none; }
.cover .cl { font-size: 15px; display: grid; gap: 3px; }
.cover .cl em { font-style: normal; font-size: 13.5px; color: var(--soft); line-height: 1.45; }
.fmts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fmt { font: inherit; cursor: pointer; padding: 12px; border-radius: var(--x-radius-control); border: 1px solid var(--line2);
       background: var(--panel); color: var(--ink); display: grid; gap: 3px; text-align: left; min-height: 64px; }
.fmt:hover { border-color: var(--ink); }
.fmt b { font: 700 17px/1.1 var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.fmt span { font-size: 13px; color: var(--soft); line-height: 1.4; }
.fmt:disabled { opacity: .45; cursor: default; }
.made { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.made .mm { font-size: 13.5px; color: var(--soft); }

/* -- Subject entry ----------------------------------------------------------- */
.subjlist, .rosterlist { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.rosterlist { max-height: none; padding: 12px 14px; }
.rosterlist.short { max-height: 320px; padding: 0; }
.sitem { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; cursor: pointer; padding: 8px 12px;
         border-radius: var(--x-radius-control); text-align: left; border: 1px solid var(--line); background: var(--panel);
         color: var(--ink); min-height: 52px; }
.sitem:hover { border-color: var(--sys); }
.sitem:disabled { cursor: default; }
.sitem:disabled:hover { border-color: var(--line); }
.sitem .pin { width: 38px; flex: none; text-align: center; font-size: 17px; font-weight: 500; color: var(--soft); }
.sitem .who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sitem .nm { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem .nm.anon { color: var(--faint); font-style: italic; }
.sitem .meta { font: 13px var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.idst { flex: none; font: 500 13px var(--font-mono); letter-spacing: .03em; text-transform: uppercase;
        border-radius: 999px; padding: 3px 9px; border: 1px solid; }
.idst.linked { color: var(--green); border-color: var(--green); }
.idst.prospect { color: var(--sys); border-color: var(--sys); }
.idst.named { color: var(--amber); border-color: var(--amber); }
.idst.number { color: var(--faint); border-color: var(--line2); }
.parsed { display: grid; gap: 5px; padding: 12px; border-radius: var(--x-radius-control); border: 1px solid var(--line); background: var(--sunken); }
.prow2 { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.prow2 .pin { width: 32px; text-align: center; font-weight: 500; color: var(--soft); font-family: var(--font-mono); }
.prow2.more { font-size: 13.5px; color: var(--faint); padding-left: 42px; }
.prow2.bad { color: var(--amber); font-size: 13.5px; }
.prow2 b { margin-left: auto; font-family: var(--font-mono); font-size: 14px; }
.btn { font: 700 15px/1 var(--font-display); font-stretch: 87%; letter-spacing: .03em; text-transform: uppercase;
       padding: 0 16px; min-height: 44px; border-radius: var(--x-radius-control); border: 1px solid var(--line2);
       background: var(--panel); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn.small { min-height: 40px; padding: 0 12px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--soft); }
.btn.ghost:hover { color: var(--ink); }
.btn.primary { background: var(--x-accent); color: var(--x-on-accent); border-color: var(--x-accent); }
.btn.primary:hover { filter: brightness(1.04); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line2)); }
.btn.danger:hover { border-color: var(--red); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:active, .fmt:active, .opt:active, .scale button:active, .key:active { transform: scale(.98); }

/* Evaluators (lead): one row each, and the PIN shown once. */
.evrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.evrow .ini { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--x-radius-control);
              border: 1px solid var(--line2); background: var(--sunken); font-size: 15px; }
.evrow .lb { flex: 1; min-width: 140px; font-size: 16px; font-weight: 600; display: grid; gap: 2px; }
.evrow .lb em { font-style: normal; font: 13px var(--font-mono); color: var(--soft); text-transform: uppercase; letter-spacing: .03em; }
.evadd { align-items: flex-end; }
.pinshow { display: grid; gap: 10px; padding: 16px; border-radius: var(--x-radius-card); border: 1.5px solid var(--sys);
           background: color-mix(in srgb, var(--sys) 10%, var(--panel)); justify-items: start; }
.pinbig { font-size: 56px; line-height: 1; letter-spacing: .14em; font-weight: 500; }

/* -- Evaluate: section drawers ---------------------------------------------- */
.secdrawer { border-bottom: 1px solid var(--line); }
.secdrawer:last-child { border-bottom: 0; }
.sechead { display: flex; align-items: center; gap: 8px; padding-right: 12px; background: var(--sunken); }
.sectoggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font: inherit; background: transparent;
             border: 0; color: inherit; cursor: pointer; padding: 0 14px; min-height: var(--drawerhead); text-align: left; }
.sectoggle:hover .seclabel { color: var(--ink); }
.seclabel { font: 700 17px/1.1 var(--font-display); font-stretch: 87%; text-transform: uppercase; letter-spacing: .01em;
            color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { margin-left: auto; flex: none; font: 500 13px/1.2 var(--font-mono); letter-spacing: .02em; text-transform: uppercase;
         border-radius: 999px; padding: 3px 9px; border: 1px solid; white-space: nowrap; }
.badge.red   { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.badge.amber { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.badge.green { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.badge.measured { color: var(--faint); border-color: var(--line2); }
/* The Notes chip. Yellow while anything is owed -- it is a demand, not a
   label -- and quiet once every justification is filed, still reachable. */
.noteschip { flex: none; font: 700 15px/1 var(--font-display); font-stretch: 87%; text-transform: uppercase;
             border-radius: var(--x-radius-control); padding: 0 12px; border: 1.5px solid; cursor: pointer; user-select: none;
             min-height: 40px; display: inline-flex; align-items: center; }
.noteschip.owed { color: var(--amber); border-color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.noteschip.owed:hover { background: color-mix(in srgb, var(--amber) 26%, transparent); }
.noteschip.met { color: var(--green); border-color: var(--green); background: transparent; }

/* -- Notes sheet ------------------------------------------------------------- */
.sheetfoot { display: flex; align-items: center; gap: 8px; padding: 10px 14px max(10px, env(safe-area-inset-bottom, 0px)); flex: none;
             border-top: 1px solid var(--line); background: var(--sunken); }
.dirtyhint { margin-right: auto; font: 13px var(--font-mono); text-transform: uppercase; color: var(--amber); }
.noterow { border-bottom: 1px solid var(--line); }
.noterowhead { width: 100%; display: flex; align-items: center; gap: 10px; font: inherit; background: transparent; border: 0;
               color: inherit; cursor: pointer; padding: 10px 14px; min-height: 56px; text-align: left; }
.noterowhead:hover { background: var(--sunken); }
.noterow .ni { display: grid; gap: 2px; min-width: 0; flex: 1; }
.noterow .nlab { font-size: 16px; font-weight: 600; }
.noterow .nsec { font: 13px var(--font-mono); text-transform: uppercase; color: var(--faint); }
.noterow .nstate { flex: none; font: 500 13px var(--font-mono); text-transform: uppercase; color: var(--amber); }
.noterow.written .nstate { color: var(--green); }
.noterow.open { background: var(--sunken); }
.notepreview { padding: 0 14px 12px; font-size: 15px; color: var(--soft); line-height: 1.5; }
.noteedit { padding: 0 14px 12px; display: grid; gap: 10px; }
.noteedit textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; padding: 10px 12px;
  border-radius: var(--x-radius-control); border: 1px solid var(--line2); background: var(--panel); color: var(--ink);
  resize: vertical; min-height: 88px; }
.noteedit textarea:focus { outline: none; border-color: var(--ink); }
.noteacts { display: flex; gap: 8px; justify-content: flex-end; }

/* -- The items. Score buttons are the most-pressed control in the app: 44px
      targets at least, a 16px figure. Ten in a row fits a wide pane; a narrow
      one wraps to five a row rather than shrinking the target. -------------- */
.items { padding: 10px 14px 18px; display: grid; gap: 8px; container-type: inline-size; }
.item { border: 1px solid var(--line); border-radius: var(--x-radius-well); padding: 10px; background: var(--panel); }
.item.anchored { border-color: var(--sys); box-shadow: inset 0 0 0 1px var(--sys); }
.item .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.item .lbl { font-size: 16px; font-weight: 600; }
.item .note { margin-left: auto; font: 500 13px var(--font-mono); text-transform: uppercase; color: var(--faint); }
.item .note.req { color: var(--amber); }
.item .note.done { color: var(--green); }
.item .note.lock { color: var(--sys); }
.scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.scale button { font: 500 17px var(--font-mono); padding: 0; min-height: 48px; min-width: 44px; border: 1px solid var(--line2);
  border-radius: var(--x-radius-control); background: var(--sunken); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.scale button[aria-pressed="true"] { background: var(--ink); color: var(--x-on-ink); border-color: var(--ink); }
.scale button:disabled { opacity: .45; cursor: default; }
.scale button[aria-pressed="true"]:disabled { opacity: 1; background: var(--sys); border-color: var(--sys); color: var(--x-on-accent); }
@container (max-width: 500px) {
  .scale { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); }
}
.measured { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); flex-wrap: wrap; }
.measured b { color: var(--ink); font-weight: 500; font-size: 17px; }
.measured .noref { color: var(--amber); font-size: 13.5px; }

/* iPad: the athlete list beside the instrument. */
.evalsplit { display: flex; flex: 1; min-height: 0; }
.athlist { flex: 0 0 300px; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.athlist .listhead { display: flex; align-items: center; gap: 8px; }
.athlist .listhead .slab { flex: 1; }
.instrument { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 1100px) { .athlist { flex-basis: 340px; } }

/* -- BOARD -------------------------------------------------------------------- */
.board { display: flex; gap: 0; flex: 1; min-height: 0; }
.board .col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.board .pool { flex: 0 0 360px; border-right: 1px solid var(--line); }
.board .teams { flex: 1; }
.colhead { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; flex: none; }
.grouphead { display: flex; align-items: center; gap: 8px; padding: 10px 14px 6px;
             font: 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.grouphead .bar { width: 4px; height: 16px; border-radius: 2px; }
.grouphead .ct { margin-left: auto; color: var(--faint); }
/* 0fr -> 1fr on a grid row animates to an unknown height without measuring. */
.drawerbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.drawerbody > .inner { overflow: hidden; min-height: 0; }
[data-open="true"] > .drawerbody { grid-template-rows: 1fr; }
.chev { width: 9px; height: 9px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(-45deg); transition: transform .26s var(--ease); opacity: .75; }
[data-open="true"] .chev { transform: rotate(45deg); }
.tierdrawer { border-bottom: 1px solid var(--line); }
.tierdrawer:last-child { border-bottom: 0; }
button.grouphead { width: 100%; font: 700 16px/1.1 var(--font-display); font-stretch: 87%; letter-spacing: .01em; color: var(--ink);
  background: transparent; border: 0; cursor: pointer; padding: 10px 14px; min-height: var(--drawerhead); text-align: left; }
button.grouphead:hover { background: var(--sunken); }
.tierdrawer .ct { font: 500 17px var(--font-mono); color: var(--ink); }
.tierdrawer .ct.none { color: var(--faint); }
.plr { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 6px 8px;
       border: 1px solid var(--line); border-radius: var(--x-radius-control); background: var(--panel);
       cursor: grab; user-select: none; min-height: 52px; transition: border-color .14s ease, transform .14s ease, opacity .14s ease; }
.plr:active { cursor: grabbing; }
.plr.armed { border-color: var(--sys); box-shadow: inset 0 0 0 1px var(--sys); transform: translateX(3px); }
.plr.ghost { opacity: .35; }
.plr .n { width: 32px; flex: none; text-align: center; font-size: 16px; font-weight: 500; color: var(--soft); }
.plr .nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plr .ps { font: 13px var(--font-mono); color: var(--faint); flex: none; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plr .sc { font-size: 17px; font-weight: 500; width: 34px; text-align: right; flex: none; }
.plr .fit { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.plr.fixed { cursor: default; opacity: .72; }
.plr .needs { font-style: normal; color: var(--amber); font: 13px var(--font-mono); text-transform: uppercase; margin-left: 4px; }

.teamwrap { display: grid; gap: 12px; padding: 12px 14px 22px; }
.team { border: 1px solid var(--line); border-radius: var(--x-radius-card); background: var(--panel); overflow: hidden; }
.team.over, .team.dropopen { border-color: var(--sys); }
.team .th { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sunken); flex-wrap: nowrap;
            width: 100%; font: inherit; color: inherit; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
            text-align: left; min-height: var(--drawerhead); }
.team .th:hover { background: color-mix(in srgb, var(--sys) 8%, var(--sunken)); }
.team[data-open="false"] .th { border-bottom-color: transparent; }
.team .tn { font: 700 18px/1 var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.team .tgt { font: 13px var(--font-mono); text-transform: uppercase; color: var(--soft); }
.team .fillct { font: 13px var(--font-mono); text-transform: uppercase; color: var(--faint); border: 1px solid var(--line2);
                border-radius: 999px; padding: 2px 8px; white-space: nowrap; flex: none; }
.team .tn, .team .tgt { white-space: nowrap; flex: none; }
.spanpart { font-style: normal; }
.device[data-frame="p-port"] .team .spanpart { display: none; }
.device[data-frame="p-port"] .compmeter { width: 56px; }
.device[data-frame="p-port"] .compval { min-width: 50px; }
.device[data-frame="p-port"] .team .th { gap: 8px; padding: 10px; }
.comp { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.compmeter { width: 108px; height: 8px; border-radius: 4px; background: var(--ground); border: 1px solid var(--line2); overflow: hidden; position: relative; }
.compmeter u { display: block; height: 100%; text-decoration: none; transition: width .34s var(--ease), background .2s ease; }
.compmeter s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .8; }
.compval { font-size: 18px; font-weight: 500; min-width: 58px; text-align: right; }
.compval small { font-size: 13px; font-weight: 400; color: var(--soft); }
.slots { display: grid; }
.slot { display: flex; align-items: center; gap: 8px; padding: 6px 14px; min-height: 52px; border-top: 1px solid var(--line); transition: background .14s ease; }
.slot:first-child { border-top: 0; }
.slot.open { background: var(--sunken); }
.slot.target { background: color-mix(in srgb, var(--sys) 16%, transparent); }
.slot .rng { font: 13px var(--font-mono); color: var(--faint); width: 62px; flex: none; }
.slot .empty { font: 13px var(--font-mono); text-transform: uppercase; color: var(--faint); }
.slot .fit { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.slot .nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .n { font-size: 15px; font-weight: 500; color: var(--soft); width: 30px; flex: none; }
.slot .sc { font-size: 17px; font-weight: 500; width: 32px; text-align: right; flex: none; }
.slot .x { font-size: 22px; line-height: 1; width: 44px; height: 44px; flex: none; padding: 0; border: 0; background: transparent;
           color: var(--faint); cursor: pointer; border-radius: 8px; }
.slot .x:hover { color: var(--red); }
.info { font: 600 15px/1 var(--font-mono); width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--line2);
        background: transparent; color: var(--soft); cursor: pointer; border-radius: 50%; }
.info:hover { color: var(--ink); border-color: var(--sys); }

/* -- Sheets -------------------------------------------------------------------
   Anchored to the top on the phone, centred on the iPad; the notes sheet keeps
   its bottom anchor because the keyboard comes up from that edge. */
.scrim { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: flex-start;
         justify-content: center; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0 } }
.sheet { width: 100%; max-height: 92%; display: flex; flex-direction: column; background: var(--panel);
         border-bottom: 1px solid var(--line2); border-radius: 0 0 var(--x-radius-sheet) var(--x-radius-sheet);
         animation: drop .26s var(--ease); overflow: hidden; }
@keyframes drop { from { transform: translateY(-14px); opacity: .4 } }
@keyframes rise { from { transform: translateY(14px); opacity: .4 } }
.scrim.notescrim { align-items: flex-end; }
.notescrim .sheet { border-bottom: 0; border-top: 1px solid var(--line2); border-radius: var(--x-radius-sheet) var(--x-radius-sheet) 0 0; animation: rise .26s var(--ease); }
.device[data-frame="tablet"] .scrim { align-items: flex-start; padding-top: 28px; }
.device[data-frame="tablet"] .notescrim { align-items: center; padding-top: 0; }
.device[data-frame="tablet"] .sheet { max-width: 620px; border-radius: var(--x-radius-sheet); border: 1px solid var(--line2); max-height: 86%; }
.device[data-frame="p-land"] .sheet { max-height: 96%; }
.sheethead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.sheethead .bib { width: 48px; height: 48px; font: 500 19px var(--font-mono); }
.sheethead .who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sheethead .nm { font: 700 20px/1.1 var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.sheethead .meta { font: 13px var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--soft); }
.sheethead .close { font-size: 24px; width: 44px; height: 44px; flex: none; border: 1px solid var(--line2);
                    border-radius: var(--x-radius-control); background: transparent; color: var(--soft); cursor: pointer; line-height: 1; }
.sheethead .close:hover { color: var(--ink); }
.sheetbody { overflow-y: auto; overscroll-behavior: contain; padding: 0 0 14px; }
.sheetsec { padding: 14px 14px 4px; }
.sheetsec > .slab { margin-bottom: 10px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mcell { border: 1px solid var(--line); border-radius: var(--x-radius-control); padding: 8px 10px; background: var(--sunken); }
.mcell .k { font: 13px var(--font-mono); text-transform: uppercase; color: var(--faint); }
.mcell .v { font-size: 17px; font-weight: 500; margin-top: 2px; }
.rrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.rrow .rlab { width: 104px; flex: none; font: 13px var(--font-mono); text-transform: uppercase; color: var(--soft); }
.rrow .rbar { flex: 1; min-width: 0; height: 8px; border-radius: 4px; background: var(--sunken); border: 1px solid var(--line2); overflow: hidden; }
.rrow .rbar u { display: block; height: 100%; text-decoration: none; }
.rrow .rval { width: 36px; text-align: right; font-size: 17px; font-weight: 500; flex: none; }
.rgrouphead { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; }
.rgrouphead .gl { font: 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.rgrouphead .gv { margin-left: auto; font-size: 16px; font-weight: 500; }
.rgrouphead .gline { flex: 1; height: 1px; background: var(--line); }
.placedline { font-size: 14px; color: var(--soft); padding: 8px 14px 0; }
.placedline b { color: var(--ink); }
.legend { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--line); font: 13px var(--font-mono);
          text-transform: uppercase; color: var(--soft); flex: none; flex-wrap: wrap; align-items: center; background: var(--sunken); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.empty-note { padding: 24px 16px; color: var(--soft); font-size: 15px; text-align: center; line-height: 1.5; }

/* -- Narrow: the board stacks and drag becomes tap-to-place ----------------- */
.board.stack { flex-direction: column; }
.board.stack .pool { flex: 0 0 auto; max-height: 46%; border-right: 0; border-bottom: 1px solid var(--line); }
.armbar { display: none; align-items: center; gap: 8px; padding: 8px 14px; flex: none; font-size: 15px;
          background: color-mix(in srgb, var(--sys) 20%, var(--ground)); border-bottom: 1px solid var(--sys); }
.armbar.on { display: flex; }
.armbar b { font-weight: 700; }
.armbar button { margin-left: auto; font: 700 15px/1 var(--font-display); font-stretch: 87%; text-transform: uppercase;
                 background: transparent; border: 1px solid var(--line2); color: var(--ink); border-radius: var(--x-radius-control);
                 padding: 0 12px; cursor: pointer; min-height: 44px; }

/* -- Saving, combining, and the save warning -------------------------------- */
.btnrow { display: flex; gap: 8px; }
.btnrow .ghost { flex: 1; min-height: 48px; padding: 0 12px; border-radius: var(--x-radius-control); border: 1px solid var(--line2);
                 background: var(--panel); color: var(--ink); font: 700 15px/1 var(--font-display); font-stretch: 87%;
                 text-transform: uppercase; cursor: pointer; }
.btnrow .ghost:hover { border-color: var(--ink); }
.savewarn { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; background: var(--panel);
            border: 1.5px solid var(--red); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; font-size: 15px; }
.savewarn span { color: var(--soft); }
.savewarn button { justify-self: end; min-height: 44px; padding: 0 16px; border-radius: var(--x-radius-control);
                   border: 1px solid var(--line2); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95;
         background: var(--ink); color: var(--x-on-ink); border-radius: 12px; padding: 12px 16px; font-size: 15px;
         max-width: min(92vw, 520px); }
.emptystate { display: grid; gap: 12px; justify-items: start; padding: 32px 20px; max-width: 520px; }
.emptystate b { font: 700 24px/1.1 var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.emptystate span { font-size: 15px; color: var(--soft); line-height: 1.55; }
.newsess .lb { flex: 1; display: grid; gap: 2px; font-size: 16px; }
.newsess .lb em { font-style: normal; color: var(--soft); font-size: 13.5px; }
.newsess .lb { font: 700 20px/1.15 var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.newsess .lb em { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .03em; }

/* -- The door (Practice's PIN door, in this app's skin) ---------------------- */
.door { position: fixed; inset: 0; z-index: 200; background: var(--ground); display: grid; place-items: center;
        padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.door[hidden] { display: none; }
body.doorup .page { visibility: hidden; }
.doorcard { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 360px;
            animation: padIn 420ms var(--ease) both; }
@keyframes padIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.door .logo { height: 58px; width: auto; }
.doortitle { font: 700 34px/36px var(--font-display); font-stretch: 87%; letter-spacing: -.4px; text-transform: uppercase; text-wrap: balance; }
.doortitle.big { font-size: 52px; line-height: 1; animation: successPop 620ms var(--ease) 380ms both; }
.doorwhen { font-size: 14px; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.doorsub { max-width: 300px; font-size: 15px; line-height: 22px; color: var(--soft); }
.doorsub.bad, .doormsg.bad { color: var(--red); }
.unlock { margin-top: 6px; min-height: 64px; min-width: 240px; padding: 0 28px; border: 0; border-radius: var(--x-radius-well);
          background: var(--x-accent); color: var(--x-on-accent); cursor: pointer; display: flex; align-items: center;
          justify-content: center; gap: 12px; font: 700 22px/1 var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.unlock:hover { filter: brightness(1.03); }
.unlock:active { transform: scale(.97); }
.dots { display: flex; gap: 14px; }
.dots.shake { animation: shake 420ms ease both; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-7px); } 80% { transform: translateX(4px); } }
.dot { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--ink); transition: background 120ms; }
.dot.on { background: var(--x-accent); border-color: var(--x-accent); }
.dot.err { border-color: var(--red); }
.dot.err.on { background: var(--red); }
.doormsg { min-height: 22px; max-width: 300px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--soft); }
.keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 22px; }
.key { width: 76px; height: 76px; border-radius: 999px; border: 1px solid var(--line2); background: var(--sunken); color: var(--ink);
       cursor: pointer; font: 400 28px var(--font-mono); display: flex; align-items: center; justify-content: center; }
.key:disabled { opacity: .5; }
.key.ghost { border: 0; background: transparent; color: var(--soft); font: 600 15px var(--font-body); }
.doorcard.ok .ring { width: 120px; height: 120px; }
.ring circle { fill: none; stroke: var(--green); stroke-width: 5; stroke-dasharray: 302; stroke-linecap: round;
               transform: rotate(-90deg); transform-origin: 52px 52px; animation: ringDraw 520ms var(--ease) both; }
.ring path { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
             stroke-dasharray: 80; animation: checkDraw 380ms var(--ease) 400ms both; }
@keyframes ringDraw { from { stroke-dashoffset: 302; } to { stroke-dashoffset: 0; } }
@keyframes checkDraw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes successPop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@media (max-height: 640px) { .keys { grid-template-columns: repeat(3, 64px); gap: 10px 18px; } .key { width: 64px; height: 64px; } }

/* -- The report ----------------------------------------------------------------
   Paper, whatever theme the device is in: a report is a document someone
   prints or forwards, and it has to look the same for everyone. */
.rpt { --r-bg: #fafaf7; --r-ink: #0b0b10; --r-soft: #6b6b76; --r-faint: #9a9aa6; --r-line: #e4e4e9; --r-track: #ececef;
  --r-t1: #14783f; --r-t2: #4bbd7a; --r-t3: #d9a520; --r-t4: #8e8e99;
  --r-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --r-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--r-bg); color: var(--r-ink); font-family: var(--r-font); font-size: 13px; line-height: 1.5;
  padding: 22px 20px 26px; text-align: left; border-radius: 8px; }
.rpt + .rpt { margin-top: 14px; }
.rpt .num { font-family: var(--r-mono); font-variant-numeric: tabular-nums; }
.r-kick { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--r-soft); font-weight: 600; }
.rpt h1, .rpt h3, .rpt h4 { font-family: var(--r-font); }
.r-name { font-size: 26px; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.01em; font-weight: 700; }
.r-meta { font-size: 11px; color: var(--r-soft); }
.r-lead { margin: 10px 0 0; font-size: 13px; }
.r-score { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.r-big { font-size: 46px; line-height: 1; }
.r-of { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--r-soft); margin-left: 6px; }
.r-comp { display: grid; gap: 2px; font-size: 11px; color: var(--r-soft); text-align: right; }
.r-comp b { color: var(--r-ink); font-weight: 500; }
.r-seam { height: 2px; margin: 18px 0 14px; background: linear-gradient(90deg, var(--r-t4), var(--r-t3), var(--r-t1)); }
.r-dial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.r-band i { display: block; height: 5px; background: var(--r-track); }
.r-band em { display: block; font-style: normal; font-size: 10px; color: var(--r-faint); margin-top: 5px; }
.r-band.on i { height: 9px; }
.r-band.on em { color: var(--r-ink); font-weight: 700; }
.r-dial .r-band.on:nth-child(1) i { background: var(--r-t4); }
.r-dial .r-band.on:nth-child(2) i { background: var(--r-t3); }
.r-dial .r-band.on:nth-child(3) i { background: var(--r-t2); }
.r-dial .r-band.on:nth-child(4) i { background: var(--r-t1); }
.r-sec { margin-top: 18px; border-top: 1px solid var(--r-line); padding-top: 12px; }
.r-sec h3 { margin: 0 0 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--r-soft); font-weight: 600; }
.r-sec h4 { margin: 8px 0 4px; font-size: 11px; font-weight: 600; }
.r-part { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 10px; margin: 7px 0; }
.r-pl { font-size: 12px; font-weight: 500; }
.r-track { height: 6px; background: var(--r-track); position: relative; }
.r-track i { position: absolute; inset: 0 auto 0 0; background: var(--r-ink); }
.r-pv { font-size: 11px; color: var(--r-soft); text-align: right; }
.r-hint { font-size: 11px; color: var(--r-soft); margin: 6px 0 0; }
.r-flag { font-size: 11px; margin: 12px 0 0; padding: 7px 9px; border-left: 2px solid var(--r-t3); background: color-mix(in srgb, var(--r-t3) 9%, transparent); }
.r-pri { margin: 4px 0; font-weight: 500; }
.r-pri::before { content: "\2014\00a0\00a0"; color: var(--r-faint); }
.r-note { margin: 0 0 10px; }
.r-note p { margin: 3px 0 0; }
.r-nk { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--r-faint); font-weight: 600; }
.r-private { color: var(--r-t4); font-weight: 700; letter-spacing: .08em; }
.r-no { margin: 3px 0; display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.r-no .num { color: var(--r-soft); font-size: 11px; }
.r-grid, .r-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.r-items h4 { grid-column: 1 / -1; }
.r-grid span, .r-items span { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; border-bottom: 1px solid var(--r-line); padding: 3px 0; }
.r-grid em, .r-items em { font-style: normal; color: var(--r-soft); }
.r-grid b, .r-items b { font-weight: 500; }
.r-close { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--r-line); font-size: 11.5px; color: var(--r-soft); }
.previewsheet { max-height: 96%; }
.previewsheet .shead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line2); }
.previewsheet .shead b { font: 700 20px var(--font-display); font-stretch: 87%; text-transform: uppercase; }
.previewbody { overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.fmts.four { grid-template-columns: 1fr 1fr; }

/* -- Printing: only the reports print, one athlete per page ----------------- */
#printroot { display: none; }
@media print {
  @page { margin: 14mm; }
  html.printing body > *:not(#printroot) { display: none !important; }
  html.printing #printroot { display: block; }
  html.printing body { background: #fff !important; }
  #printroot .rpt { padding: 0; background: #fff; font-size: 11pt; }
  #printroot .rpt + .rpt { margin-top: 0; break-before: page; }
  #printroot .r-sec, #printroot .r-note { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}