@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(../fonts/roboto-slab-latin-ext.woff2?v=114) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Slab"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(../fonts/roboto-slab-latin.woff2?v=114) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/roboto-condensed-500-latin-ext.woff2?v=114) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/roboto-condensed-500-latin.woff2?v=114) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Nunito; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2?v=114) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Nunito; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/nunito-latin.woff2?v=114) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #e4effd;
  --surface: #ffffff;
  --surface-done: #f7f9fc;
  --fill: #e8eef6;
  --fill-strong: #d3dce8;
  --edge: #c2cfe0;
  --line: #d3dce8;
  --line-strong: #7b8796;
  --ink: #1a1a18;
  --ink-2: #4d5650;
  --ink-3: #8a918c;
  --ink-unit: #5f6762;
  --ink-quiet: #6f7671;
  --on-ink: #ffffff;
  --sky: #529dfa;
  --sky-edge: #1f5fbd;
  --sky-deep: #1c60b8;
  --sky-soft: #dcebfe;
  --on-sky: #1a1a18;
  --grass: #97dc45;
  --on-grass: #1a1a18;
  --grass-soft: #eaf8da;
  --forest: #377e22;
  --forest-edge: #245316;
  --on-forest: #ffffff;
  --earth: #5f461d;
  --ochre: #ecd28a;
  --on-ochre: var(--earth);
  --earth-edge: #3b2b10;
  --on-earth: #ffffff;
  --leaf: #e2efd1;
  --leaf-edge: #a8c78b;
  --on-leaf: #22401a;
  --meadow: #eef2d6;
  --ok: #2f6f1d;
  --warn: #7d6300;
  --warn-soft: #fbf4c4;
  --critical: #c32f29;
  --critical-soft: #fbe4e2;
  --focus: var(--sky-deep);
  --live: var(--critical);
  --live-edge: #841f1b;
  --on-live: #ffffff;
  --scrim: #0c1a2c66;
  --press: #0000001a;
  --trail-freeride: #408ecc;
  --trail-komarka: #723882;
  --trail-prasklinka: #804624;
  --trail-downhill: #c32f29;
  --trail-stepup: #efe14c;
  --trail-xindldrek: #3c8444;
  --trail-jumpline2: #706f6d;
  --trail-easyline: #ffffff;
  --trail-jumpline1: #222220;
  --raise: 0 3px 0 #c2cfe0;
  --raise-pressed: 0 1px 0 #c2cfe0;
  --sunken: inset 0 2px 0 #c2cfe0;
  --float: 0 3px 0 #c2cfe0, 0 12px 28px #0c1a2c29;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1c60b8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --tap-min: 44px;
  --control-h: 44px;
  --control-h-lg: 52px;
  --row-min: 78px;
  --cell-w: 64px;
  --edge-h: 3px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --font-display: "Roboto Slab", Rockwell, Georgia, serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: Nunito, ui-rounded, system-ui, sans-serif;
  --font-cond: "Roboto Condensed", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--sky); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 22px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  padding-bottom: calc(var(--tabbar-h) + var(--space-8) + env(safe-area-inset-bottom));
}
body.locked, body.public { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--sky-deep); }
[hidden] { display: none !important; }

.cm-mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.cm-label { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.cm-title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-1); font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.cm-text { margin: 0; font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cm-empty { margin: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-done); font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cm-error { color: var(--critical); }
.cm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cm-trail { width: 22px; height: 22px; flex: none; border-radius: var(--radius-xs); background: var(--trail); box-shadow: 0 0 0 1.5px var(--ink); }
.cm-trail-sm { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--trail); box-shadow: 0 0 0 1px var(--ink); vertical-align: -1px; }

.cm-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-i-sm { width: 16px; height: 16px; }
.cm-i-xs { width: 12px; height: 12px; stroke-width: 2.6; }
.cm-i .solid { fill: currentColor; }

.cm-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md);
  background: var(--fill); color: var(--ink); box-shadow: var(--raise);
  font-size: 17px; line-height: 22px; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform .1s ease-out, box-shadow .1s ease-out;
}
.cm-btn:active { transform: translateY(2px); box-shadow: var(--raise-pressed); }
.cm-btn:focus-visible { outline: none; box-shadow: var(--raise), var(--focus-ring); }
.cm-btn:disabled { opacity: .4; transform: none; cursor: default; }
.cm-btn-primary { background: var(--forest); color: var(--on-forest); box-shadow: 0 3px 0 var(--forest-edge); }
.cm-btn-primary:active { box-shadow: 0 1px 0 var(--forest-edge); }
.cm-btn-live { background: var(--live); color: var(--on-live); box-shadow: 0 3px 0 var(--live-edge); }
.cm-btn-live:active { box-shadow: 0 1px 0 var(--live-edge); }
.cm-btn-pause { background: var(--sky); color: var(--on-sky); box-shadow: 0 3px 0 var(--sky-edge); }
.cm-btn-pause:active { box-shadow: 0 1px 0 var(--sky-edge); }
.cm-btn-plain { background: transparent; color: var(--sky-deep); box-shadow: none; padding: 0 var(--space-2); }
.cm-btn-plain:active { background: var(--fill); box-shadow: none; transform: none; }
.cm-btn-destructive { color: var(--critical); }
.cm-btn-lg { min-height: var(--control-h-lg); padding: 0 var(--space-5); }
.cm-btn-icon { width: var(--tap-min); padding: 0; flex: none; }

.cm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-field-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); }
.cm-input {
  width: 100%; min-width: 0; min-height: var(--control-h); margin: 0; padding: 2px var(--space-3) 0; border: 0; border-radius: var(--radius-sm);
  background: var(--fill); color: var(--ink); box-shadow: var(--sunken); font-size: 17px; line-height: 22px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.cm-input::placeholder { color: var(--ink-3); }
.cm-input:focus { background: var(--surface); box-shadow: var(--sunken), 0 0 0 2px var(--sky-deep); }
.cm-input.cm-mono { font-weight: 700; }
.cm-input.is-invalid { box-shadow: var(--sunken), 0 0 0 2px var(--critical); }
.cm-input, .cm-stepper-value { transition: box-shadow .15s ease-out, background-color .15s ease-out; }
textarea.cm-input { min-height: 132px; padding: 10px var(--space-3); resize: vertical; }
select.cm-input {
  padding-right: 30px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5650' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
input[type="date"].cm-input, input[type="time"].cm-input { display: flex; align-items: center; }
.cm-input-row { display: flex; align-items: flex-end; gap: var(--space-2); }
.cm-input-row > .cm-field { flex: 1; }
.cm-field-side { flex: none; display: flex; }
.cm-field-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cm-field-hint.is-error { color: var(--critical); }
.cm-reveal { display: grid; grid-template-rows: 0fr; margin-top: -6px; opacity: 0; transition: grid-template-rows .22s ease-out, opacity .22s ease-out; }
.cm-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.cm-reveal > div { min-height: 0; overflow: hidden; }
.cm-reveal .cm-field-hint { padding-top: 6px; }

.cm-stepper { display: inline-flex; align-self: flex-start; align-items: stretch; gap: 2px; min-height: var(--control-h); padding: 3px 3px 4px; border-radius: var(--radius-md); background: var(--fill); box-shadow: var(--sunken); }
.cm-stepper > button { transition: background-color .1s ease-out, color .15s ease-out; width: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.cm-stepper > button:active { background: var(--fill-strong); }
.cm-stepper > button:disabled { color: var(--ink-3); background: transparent; cursor: default; }
.cm-stepper-value {
  min-width: 76px; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 3px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); white-space: nowrap;
  background: var(--surface); box-shadow: 0 2px 0 var(--edge); color: var(--ink);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; text-align: center;
}
input.cm-stepper-value { width: 88px; outline: none; -webkit-appearance: none; appearance: none; }
input.cm-stepper-value::placeholder { color: var(--ink-3); font-weight: 700; }
input.cm-stepper-value:focus { box-shadow: 0 0 0 2px var(--sky-deep); }
input.cm-stepper-value.is-invalid { box-shadow: 0 0 0 2px var(--critical); }
input[type="time"].cm-stepper-value { display: block; width: 96px; height: 37px; padding: 0 var(--space-1); line-height: 37px; }
input[type="time"].cm-stepper-value::-webkit-calendar-picker-indicator { display: none; }
input[type="time"].cm-stepper-value::-webkit-date-and-time-value { text-align: center; }
.cm-stepper-value small { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-unit); }
.cm-stepper-field { display: flex; flex-direction: column; gap: 6px; }
.cm-stepper-fill { flex: 1; min-width: 0; align-self: auto; }
.cm-stepper-fill > button { width: 64px; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 2px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; }
.cm-stepper-fill > button small { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-unit); }
.cm-stepper-fill > button:disabled small { color: inherit; }
.cm-stepper-fill > .cm-stepper-value { flex: 1 1 0; width: 0; min-width: 0; }

.cm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px 3px 5px; border-radius: var(--radius-md); background: var(--fill); box-shadow: var(--sunken); }
.cm-seg > button {
  min-height: 38px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.cm-seg > button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 var(--edge); }
.cm-seg.has-thumb { position: relative; }
.cm-seg.has-thumb::before { content: ""; position: absolute; top: 3px; bottom: 5px; left: 0; width: var(--seg-w, 0); transform: translateX(var(--seg-x, 0)); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 2px 0 var(--edge); transition: transform .22s ease-in-out, width .22s ease-in-out; }
.cm-seg.has-thumb > button { position: relative; z-index: 1; transition: color .15s ease-out; }
.cm-seg.has-thumb > button[aria-checked="true"] { background: transparent; box-shadow: none; }
.cm-seg.is-instant::before { transition: none; }

.cm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cm-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); margin: 0; padding: 0 14px 0 11px;
  border: 0; border-radius: var(--radius-full); background: var(--fill); color: var(--ink); box-shadow: var(--raise);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 700; cursor: pointer; touch-action: manipulation;
  transition: transform .1s ease-out, box-shadow .1s ease-out;
}
.cm-chip .cm-i { color: var(--ink-2); }
.cm-chip:active { transform: translateY(2px); box-shadow: var(--raise-pressed); }
.cm-chip[aria-pressed="true"] { background: var(--grass); color: var(--on-grass); box-shadow: 0 3px 0 var(--forest); }
.cm-chip[aria-pressed="true"] .cm-i { color: var(--on-grass); }
.cm-chip[aria-pressed="true"]:active { box-shadow: 0 1px 0 var(--forest); }

.cm-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--radius-full); font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cm-pill-live { background: var(--live); color: var(--on-live); }
.cm-pill .cm-dot { background: currentColor; }
.cm-pill-paused { background: var(--sky-soft); color: var(--sky-deep); }
.cm-pill-neutral { background: var(--fill); color: var(--ink-2); }
.cm-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-full); background: var(--live); display: inline-block; }
.cm-dot.is-live { animation: cm-pulse 2s ease-in-out infinite; }
@keyframes cm-pulse { 50% { opacity: .35; } }

.cm-topbar { position: sticky; top: 0; z-index: 20; height: calc(var(--topbar-h) + env(safe-area-inset-top)); color: var(--on-sky); }
.cm-topbar-panel {
  position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) calc(var(--space-4) + env(safe-area-inset-right)) 10px calc(var(--space-4) + env(safe-area-inset-left));
  background: var(--sky);
}
.cm-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: calc(var(--topbar-h) - 18px); }
.cm-topbar-race { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cm-topbar-logo { flex: none; width: auto; height: 30px; }
.cm-topbar-race strong, .cm-topbar-row .cm-clock { transform: translateY(1px); }
body.locked .cm-topbar-logo { display: none; }
.cm-topbar-race strong { font-family: var(--font-display); font-size: 17px; line-height: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cm-topbar-row > .cm-sync { flex: none; }
.cm-sync { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-full); background: var(--surface); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.cm-sync.is-ok .cm-i { color: var(--ok); }
.cm-sync.is-pending, .cm-sync.is-warn { color: var(--warn); }
.cm-sync.is-info { color: var(--ink); }
.cm-sync.is-info .cm-i { color: var(--ink-2); }
.cm-sync .cm-dot { margin: 0 2px; }
.cm-sync.is-error { color: var(--critical); }
.cm-sync-close { position: relative; display: grid; place-items: center; width: 16px; height: 16px; margin: 0 -2px 0 2px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-2); cursor: pointer; }
.cm-sync-close::after { content: ""; position: absolute; inset: -14px -12px; }
.cm-sync-close:active { background: var(--press); }
.cm-status { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease-out, opacity .22s ease-out; }
.cm-status.is-hidden { grid-template-rows: 0fr; opacity: 0; transition-duration: .18s; }
.cm-status-inner { min-height: 0; overflow: hidden; display: flex; justify-content: center; }
.cm-status-inner .cm-sync { margin: 2px 0 4px; }
.cm-status-inner .cm-sync, .cm-status-float .cm-sync { max-width: 100%; height: auto; min-height: 22px; padding-block: 3px; border-radius: 11px; white-space: normal; }
.cm-status-inner .cm-sync > .cm-i, .cm-status-float .cm-sync > .cm-i { flex: none; align-self: flex-start; }
.cm-status-float { position: fixed; z-index: 1; top: calc(var(--space-3) + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; justify-content: center; width: max-content; max-width: min(520px, calc(100vw - 32px)); }
.cm-topbar-end { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.cm-conn { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--surface); color: var(--forest); cursor: pointer; touch-action: manipulation; transition: color .15s ease-out; }
.cm-conn::after { content: ""; position: absolute; inset: -9px; }
.cm-conn.is-idle { color: var(--ink-3); }
.cm-conn.is-warn { color: var(--warn); }
.cm-conn.is-error { color: var(--critical); }
.cm-conn b { position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--ink); color: var(--on-ink); font-family: var(--font-num); font-size: 11px; line-height: 16px; font-weight: 800; text-align: center; }
body.locked .cm-conn { display: none; }
.cm-clock { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 21px; line-height: 24px; font-weight: 800; white-space: nowrap; }
.cm-clock small { margin-left: 4px; font-size: 13px; font-weight: 700; }

.cm-main { display: flex; flex-direction: column; gap: var(--space-3); max-width: 720px; margin: 0 auto; padding: var(--space-2) calc(var(--space-4) + env(safe-area-inset-right)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-left)); }
.cm-view { display: flex; flex-direction: column; gap: var(--space-3); }
.cm-notices { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; padding: 0 var(--space-4); }
.cm-notices > .cm-notice { margin-top: var(--space-3); }

.cm-dock { position: fixed; z-index: 20; left: calc(var(--space-3) + env(safe-area-inset-left)); right: calc(var(--space-3) + env(safe-area-inset-right)); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); max-width: 696px; margin: 0 auto; }
.cm-tabbar { position: relative; display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-lg); background: var(--ochre); box-shadow: var(--float); }
.cm-tabbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--tab-w, 0); transform: translateX(var(--tab-x, 0)); background: var(--earth); box-shadow: inset 0 -3px 0 var(--earth-edge); transition: transform .22s ease-in-out, width .22s ease-in-out; }
.cm-tabbar.is-instant::before { transition: none; }
.cm-tabbar::-webkit-scrollbar { display: none; }
.cm-tab {
  position: relative; flex: 1 0 auto; min-width: 0; min-height: var(--tabbar-h); margin: 0; padding: 0 var(--space-2) var(--edge-h); border: 0; border-radius: 0;
  background: transparent; color: var(--on-ochre); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  z-index: 1;
}
.cm-tab.is-active { color: var(--on-earth); }
.cm-tab.is-active .cm-dot { box-shadow: 0 0 0 2px var(--on-earth); }
.cm-tab.is-active .cm-tab-bottom .cm-i { color: var(--on-earth); }
.cm-tab-top, .cm-tab-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-1); height: 12px; }
.cm-tab-top { top: 7px; }
.cm-tab-bottom { bottom: calc(var(--edge-h) + 6px); }
.cm-tab-bottom .cm-i { color: var(--critical); }
.cm-tab-bottom > span { display: grid; place-items: center; }
.cm-tab-bottom .cm-tab-mine .cm-i { color: currentColor; }

.cm-measure { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-done); }
.cm-measure > p { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-2); }
.cm-measure > p > .cm-i { flex: none; }
.cm-measure > p > span { display: flex; flex-direction: column; min-width: 0; }
.cm-measure strong { color: var(--ink); font-weight: 800; }
.cm-measure small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); }
.cm-measure.is-mine > p { color: var(--forest); }
.cm-measure .cm-btn { flex: none; min-height: 40px; padding: 0 var(--space-3); font-size: 15px; }
.cm-readout { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cm-readout > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px var(--space-2) 12px; min-width: 0; text-align: center; }
.cm-readout > div + div { border-left: 1px solid var(--line); }
.cm-readout b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 24px; line-height: 28px; font-weight: 800; }
.cm-readout span { font-family: var(--font-cond); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0; text-transform: lowercase; color: var(--ink-quiet); white-space: nowrap; }
.cm-readout .is-zero b { color: var(--ink-3); }
.cm-readout .is-critical b, .cm-readout .is-critical span { color: var(--critical); }
.cm-readout + * { margin-top: var(--space-2); }

.cm-row {
  position: relative; display: flex; align-items: stretch; min-height: var(--row-min); overflow: hidden;
  --row-shadow: var(--raise);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--row-shadow);
  outline: 2px solid transparent; outline-offset: -2px; cursor: pointer;
}
.cm-row-bib { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-left: var(--space-2); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.cm-row-bib small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-cond); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-quiet); }
.cm-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: var(--space-2); }
.cm-row-name { margin: 0 0 2px; font-size: 17px; line-height: 21px; font-weight: 600; white-space: nowrap; }
.cm-row-line { margin: 0; display: flex; align-items: baseline; gap: 5px; font-size: 13px; line-height: 17px; color: var(--ink-2); white-space: nowrap; }
.cm-row-key { min-width: 30px; color: var(--ink-quiet); }
.cm-row-line.is-bad, .cm-row-line.is-bad .cm-t, .cm-row-line.is-bad .cm-row-key { color: var(--critical); }
.cm-row-mark { align-self: center; display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; font-weight: 600; }
.cm-row-mark.is-critical { color: var(--critical); }
.cm-row-mark.is-warn { color: var(--warn); }
.cm-t { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.cm-bib { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; margin-right: 6px; }
.cm-who { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.cm-cells { position: absolute; top: 0; right: 0; bottom: 0; display: flex; gap: 2px; background: inherit; }
.cm-cell {
  transition: background-color .2s ease-out, color .2s ease-out, box-shadow .1s ease-out;
  width: var(--cell-w); margin: 0; padding: 0 0 var(--edge-h); border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-display); font-size: 15px; line-height: 18px; font-weight: 800; letter-spacing: .02em; cursor: pointer; touch-action: manipulation;
}
.cm-cell small { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: 0; }
.cm-cell-start { background: var(--grass); color: var(--on-grass); box-shadow: inset 0 -3px 0 var(--forest); }
.cm-cell-start:active { box-shadow: inset 0 -1px 0 var(--forest), inset 0 0 0 100px var(--press); padding-top: 2px; }
.cm-cell-finish { background: var(--forest); color: var(--on-forest); box-shadow: inset 0 -3px 0 var(--forest-edge); }
.cm-cell-finish:active { box-shadow: inset 0 -1px 0 var(--forest-edge), inset 0 0 0 100px var(--press); padding-top: 2px; }
.cm-cell-finish small { font-size: 16px; line-height: 18px; }
.cm-cell-finish small.is-long { font-size: 12px; }
.cm-cell-status { background: var(--leaf); color: var(--on-leaf); box-shadow: inset 0 -3px 0 var(--leaf-edge); }
.cm-cell-status:active { box-shadow: inset 0 -1px 0 var(--leaf-edge), inset 0 0 0 100px var(--press); padding-top: 2px; }
.cm-cell:disabled { background: var(--fill); color: var(--ink-3); box-shadow: none; cursor: default; padding-top: 0; }
.cm-row-total { flex: none; width: 76px; display: flex; align-items: center; justify-content: center; }
.cm-row-total b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 24px; line-height: 1; font-weight: 800; }
.cm-row-total.is-bad { color: var(--critical); }
.cm-row-total.is-running { flex-direction: column; gap: 6px; }
.cm-row-total.is-running b { font-size: 20px; line-height: 22px; }
.cm-row-total.is-bad .cm-i { width: 24px; height: 24px; }
.cm-row.is-done, .cm-row.is-out { --row-shadow: 0 0 0 0 transparent; background: var(--surface-done); }
.cm-row.is-done .cm-row-bib, .cm-row.is-out .cm-row-bib { color: var(--ink-2); }
.cm-row.is-invalid { outline-color: var(--critical); }
.cm-row.is-flash { animation: cm-flash 1.2s ease-out; }
@keyframes cm-flash { from { box-shadow: var(--row-shadow), 0 0 0 4px var(--grass); } to { box-shadow: var(--row-shadow), 0 0 0 4px transparent; } }

.cm-auto {
  display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--raise); outline: 2px solid transparent; outline-offset: -2px;
}
.cm-auto.is-running { outline-color: var(--live); }
.cm-auto.is-paused { outline-color: var(--sky-deep); }
.cm-auto.is-done, .cm-auto.is-collapsed { background: var(--surface-done); box-shadow: none; outline-color: transparent; padding-block: var(--space-3); }
.cm-auto-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cm-auto-head strong { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; }
.cm-auto-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cm-auto-toggle { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); margin: -9px -10px -9px 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; touch-action: manipulation; transition: background-color .15s ease-out; }
.cm-auto-caret { display: grid; place-items: center; width: 24px; color: var(--ink-2); }
.cm-auto-caret.is-done { color: var(--ink-quiet); }
.cm-auto-toggle:active { background: var(--fill); }
.cm-auto.is-collapsed { cursor: pointer; transition: background-color .15s ease-out; }
.cm-auto.is-collapsed:active { background: var(--fill); }
.cm-auto-readout { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cm-auto-next { display: flex; flex-direction: column; gap: 2px; }
.cm-auto-next > span:first-child { font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cm-countdown { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 36px; line-height: 40px; font-weight: 800; }
.cm-auto-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-2); }
.cm-auto-controls .cm-stepper > button { width: 36px; }
.cm-auto-controls .cm-stepper-value { min-width: 56px; }
.cm-auto-controls input[type="time"].cm-stepper-value { width: 80px; }
@media (min-width: 480px) {
  .cm-auto-controls { justify-content: flex-start; column-gap: var(--space-6); }
}
.cm-auto-foot { display: flex; justify-content: flex-end; }
.cm-auto-foot .cm-btn { min-width: 148px; }

.cm-settings { gap: var(--space-6); }
.cm-section { display: flex; flex-direction: column; gap: var(--space-2); }
.cm-section > .cm-label { margin: 0; padding: 0 var(--space-4); }
.cm-section-foot { margin: 0; padding: 0 var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cm-group { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--raise); }
.cm-group-row { position: relative; display: flex; align-items: center; gap: var(--space-1); min-height: 54px; margin: 0; padding: 4px var(--space-1) 4px var(--space-3); }
.cm-group-row + .cm-group-row::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: 0; border-top: 1px solid var(--line); }
.cm-group-row > .cm-input { flex: 1; padding-left: var(--space-1); background: transparent; box-shadow: none; }
.cm-group-row > .cm-input:focus { box-shadow: 0 0 0 2px var(--sky-deep); }
.cm-group-row .cm-btn-icon { color: var(--ink-2); background: transparent; box-shadow: none; }
.cm-group-row .cm-btn-icon:active { transform: none; background: var(--fill); }
.cm-group-row .cm-btn-icon.cm-btn-destructive { color: var(--critical); }
.cm-group-row .cm-btn-icon:disabled { color: var(--ink-3); opacity: 1; }
.cm-group-row > .cm-btn-plain { padding-left: 0; }
.cm-group-block { position: relative; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); }
.cm-group-row + .cm-group-block::before, .cm-group-block + .cm-group-block::before, .cm-group-block + .cm-group-row::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: 0; border-top: 1px solid var(--line); }
.cm-group-block > .cm-group-row { padding: 0; min-height: 0; }
.cm-group-key { flex: none; width: 112px; padding-left: var(--space-1); font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cm-group-value { flex: 1; min-width: 0; padding-left: var(--space-1); font-weight: 700; overflow-wrap: anywhere; }
.cm-group-value.cm-link { font-weight: 400; }
.cm-group-hint { display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 0; padding: 0 var(--space-4) var(--space-3); font-size: 13px; line-height: 18px; color: var(--critical); }
.cm-group-hint .cm-i { flex: none; margin-top: 3px; }
.cm-group-hint + .cm-group-row::before, .cm-group-hint + .cm-group-block::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: 0; border-top: 1px solid var(--line); }
.cm-rider-row > .cm-input.cm-rider-bib { flex: 0 0 48px; width: 48px; padding-right: var(--space-1); text-align: right; }
.cm-rider-row > .cm-input.cm-rider-name { flex: 1 1 0; }
.cm-rider-row > select.cm-input { flex: 0 1 104px; width: 104px; padding-left: var(--space-1); background-color: transparent; box-shadow: none; }
.cm-trash-row > .cm-trash-type { flex: none; width: 80px; padding-left: var(--space-1); color: var(--ink-quiet); }
.cm-trash-row > .cm-trash-object { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-trash-meta { display: flex; flex-direction: column; flex: none; text-align: right; font-size: 13px; line-height: 16px; color: var(--ink-quiet); white-space: nowrap; }
@media (min-width: 480px) {
  .cm-trash-meta { flex-direction: row; gap: var(--space-3); text-align: left; }
  .cm-trash-meta > :first-child { width: 96px; overflow: hidden; text-overflow: ellipsis; }
}
.cm-add-row { gap: var(--space-1); }
.cm-add-row > .cm-input { background: var(--fill); box-shadow: var(--sunken); }
.cm-add-row > .cm-input:focus { background: var(--surface); box-shadow: var(--sunken), 0 0 0 2px var(--sky-deep); }
.cm-add-row > .cm-rider-bib { flex: 0 0 48px; width: 48px; padding: 2px var(--space-1) 0; text-align: right; }
.cm-add-row > .cm-rider-name { flex: 1 1 0; padding-left: var(--space-2); }
.cm-add-row > select.cm-input { flex: 0 1 104px; width: 104px; padding-left: var(--space-2); }
input[type="number"].cm-input { -moz-appearance: textfield; }
input[type="number"].cm-input::-webkit-inner-spin-button, input[type="number"].cm-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cm-offset { min-width: 84px; }
.cm-paste-errors { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 19px; color: var(--critical); }
.cm-link { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.cm-disclosure > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); color: var(--sky-deep); font-weight: 600; cursor: pointer; list-style: none; }
.cm-disclosure > summary::-webkit-details-marker { display: none; }
.cm-disclosure-body { display: flex; flex-direction: column; gap: var(--space-3); }

.cm-swatch { width: var(--tap-min); height: var(--tap-min); flex: none; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.cm-swatch-color { width: 22px; height: 22px; border-radius: var(--radius-xs); background: var(--trail); box-shadow: 0 0 0 1.5px var(--ink); }
.cm-swatch:active { background: var(--fill); }

.cm-legend { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--raise); }
.cm-legend-row { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-4); border: 0; background: transparent; text-align: left; cursor: pointer; touch-action: manipulation; }
.cm-legend-row + .cm-legend-row::before { content: ""; position: absolute; top: 0; left: calc(var(--space-4) + 34px); right: 0; border-top: 1px solid var(--line); }
.cm-legend-row { transition: background-color .15s ease-out; }
.cm-legend-row:active { background: var(--fill); }
.cm-legend-row strong { flex: 1; font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 800; }
.cm-legend-row .cm-i { color: var(--forest); }
.cm-legend-row[aria-pressed="true"] { background: var(--grass-soft); }

.cm-gen { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; align-items: center; gap: var(--space-2) var(--space-2); }
.cm-gen > .cm-field-label:nth-child(n+2) { text-align: center; }
.cm-gen > span:not(.cm-field-label) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cm-gen > .cm-field-hint { grid-column: 1 / -1; margin-top: -4px; }
.cm-gen .cm-input { text-align: center; }

.cm-sheet {
  position: fixed; inset: auto 0 0; width: 100%; max-width: 520px; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); margin: 0 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--float);
}
.cm-sheet[open] { animation: cm-sheet-in .24s ease-out; }
.cm-sheet::backdrop { background: var(--scrim); }
.cm-sheet[open]::backdrop { animation: cm-fade-in .24s ease-out; }
@keyframes cm-fade-in { from { opacity: 0; } }
@keyframes cm-sheet-in { from { transform: translateY(100%); } }
.cm-sheet-body { display: flex; flex-direction: column; gap: var(--space-4); }
.cm-grabber { position: relative; height: 25px; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0; cursor: grab; touch-action: none; }
.cm-grabber::before { content: ""; position: absolute; top: var(--space-2); left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: var(--radius-full); background: var(--fill-strong); }
.cm-sheet-head { display: flex; flex-direction: column; gap: 2px; touch-action: none; }
.cm-sheet-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; overflow-wrap: anywhere; }
.cm-sheet-head p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cm-sheet-head .is-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; }
.cm-sheet-text { margin: 0; font-size: 17px; line-height: 23px; text-align: center; text-wrap: balance; }
.cm-sheet-text strong { font-weight: 700; }
.cm-preview { transition: color .15s ease-out; margin: 0; padding: 10px var(--space-3); border-radius: var(--radius-sm); background: var(--meadow); font-size: 15px; line-height: 20px; }
.cm-preview.is-error { color: var(--critical); }
.cm-sheet-foot { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
.cm-sheet-foot .cm-btn { min-width: 128px; }

.cm-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--fill); color: var(--ink); font-size: 15px; line-height: 20px; }
.cm-notice p { margin: 0; flex: 1; min-width: 0; }
.cm-notice-warn { background: var(--warn-soft); }
.cm-notice-warn > .cm-i { color: var(--warn); }
.cm-notice-critical { background: var(--critical-soft); }
.cm-notice-critical > .cm-i { color: var(--critical); }
.cm-notice-ok { background: var(--grass-soft); align-items: center; }
.cm-notice-ok > .cm-i { color: var(--forest); }
.cm-notice-ok .cm-btn { min-height: 36px; padding: 0 var(--space-3); font-size: 15px; }
.cm-notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cm-notice-body p { flex: none; }
.cm-notice-body .cm-btn { min-height: 36px; padding: 0 var(--space-3); font-size: 15px; }
.cm-notice-close { margin: -10px -12px -10px 0; color: var(--ink-2); background: transparent; box-shadow: none; }
.cm-notice-close:active { transform: none; background: var(--press); box-shadow: none; }

.cm-gate { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 420px; margin: var(--space-6) auto 0; }
.cm-gate-logo { display: block; width: 168px; height: auto; margin: 0 auto var(--space-4); }
.cm-gate-name { margin: 0; font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.cm-gate-message { min-height: 20px; margin: 0; font-size: 15px; line-height: 20px; color: var(--critical); }
.cm-gate .cm-btn-primary { align-self: flex-end; min-width: 160px; }

.cm-results { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.cm-results-table { display: none; }
.cm-results-wide .cm-results-table { display: block; }
.cm-results-wide .cm-rlist, .cm-results-wide .cm-results-tracks { display: none; }
.cm-results-measuring .cm-results-table { display: block; position: absolute; left: 0; right: 0; visibility: hidden; }
.cm-main.cm-main-wide { max-width: 1000px; }
.cm-results-compact .cm-th-rest { display: none; }
.cm-results + .cm-results { margin-top: var(--space-3); }
.cm-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0 var(--space-4); }
.cm-results-head h3 { margin: 0; min-width: 0; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; }
.cm-results-tracks { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px var(--space-3); font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-quiet); }
.cm-results-track { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cm-results-track .cm-trail-sm { margin-right: 0; }
.cm-results-title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 800; }
.cm-rlist { container-type: inline-size; margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--raise); }
.cm-r { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: 60px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); }
.cm-r + .cm-r::before { content: ""; position: absolute; top: 0; left: calc(36px + var(--space-2) + var(--space-3)); right: 0; border-top: 1px solid var(--line); }
.cm-r-rank { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 18px; line-height: 22px; font-weight: 800; text-align: right; }
.cm-r-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-r-cat { margin: 0; font-size: 13px; line-height: 16px; color: var(--ink-2); }
.cm-r-splits { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, 76px); column-gap: var(--space-3); row-gap: 2px; font-size: 13px; line-height: 18px; color: var(--ink-quiet); }
.cm-r-split { display: inline-flex; align-items: baseline; gap: 4px; }
.cm-r-split .cm-trail-sm { align-self: center; width: 12px; height: 12px; margin-right: 0; }
@container (max-width: 440px) {
  .cm-r-splits { grid-template-columns: repeat(auto-fill, 48px); column-gap: var(--space-2); }
  .cm-r-code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cm-r-split { gap: 5px; }
}
.cm-r-splits .cm-t { color: var(--ink-2); font-weight: 700; }
.cm-r-total { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cm-r-total b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 18px; line-height: 22px; font-weight: 800; }
.cm-r-total span { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-2); }
.cm-r.is-pending .cm-r-rank { color: var(--ink-3); }
.cm-r-rank .cm-dot { margin-right: 4px; }
.cm-r.is-pending .cm-r-total b { color: var(--ink-2); font-weight: 600; }
.cm-r.is-out .cm-r-rank { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
.cm-r.is-out .cm-who { color: var(--ink-2); }
.cm-r-split.is-bad, .cm-r-split.is-bad .cm-t { color: var(--critical); }
.cm-ontrack { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-2); }

.cm-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--raise); }
.cm-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.cm-table th { padding: 12px var(--space-3) 8px; text-align: left; white-space: nowrap; font-family: var(--font-display); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cm-table td { padding: 10px var(--space-3); white-space: nowrap; border-bottom: 1px solid var(--line); }
.cm-table tr:last-child td { border-bottom: 0; }
.cm-table th:first-child, .cm-table td:first-child { padding-left: var(--space-4); }
.cm-table .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.cm-table th.num { font-family: var(--font-display); font-weight: 700; }
.cm-table .rank { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; }
.cm-table .total { font-weight: 800; }
.cm-table .gap { color: var(--ink-2); }
.cm-table tr.is-pending td { color: var(--ink-2); }
.cm-table tr.is-out td { color: var(--ink-2); font-style: italic; }
.cm-table tr.is-invalid td { color: var(--critical); }
.cm-print-only { display: none; }
.cm-print-race { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 700; color: var(--ink-2); }

@media print {
  html, body { background: #fff; }
  body { padding: 0; }
  .cm-topbar, .cm-dock, .cm-notices, .cm-no-print, .cm-rlist, .cm-ontrack, .cm-results-tracks { display: none !important; }
  .cm-print-only, .cm-results-table { display: block !important; }
  .cm-th-rest { display: inline !important; }
  .cm-main { max-width: none; padding: 0; }
  .cm-table-wrap { overflow: visible; box-shadow: none; border-radius: 0; }
  .cm-table { font-size: 12px; line-height: 16px; }
  .cm-table th, .cm-table td { padding: 5px 6px; }
  .cm-table th:first-child, .cm-table td:first-child { padding-left: 0; }
  .cm-table th { white-space: normal; }
  .cm-results { break-after: page; }
  .cm-results:last-child { break-after: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .cm-btn:active, .cm-chip:active { transform: none; }
}