/* Risegate on the web, in the iPhone app's look (iphone/Risegate/Theme.swift): white pages, Apple's light
   greys for cards and pills, Apple's own font, ink for the main button, colour only for meaning (green
   faster, orange slower) and the four tones (blue time, orange runs, purple to check, teal people).
   Sora only for a run's big time. Light only, like the app. */

@font-face { font-family: "Sora"; font-weight: 600 800; font-display: swap;
  src: url(fonts/sora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Sora"; font-weight: 600 800; font-display: swap;
  src: url(fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --card: #f2f2f7;
  --panel-hi: #e5e5ea;
  --border: #e5e5ea;
  --ink: #0b0c0e;
  --soft: #454a52;
  --muted: #676c74;
  --warm: #ff7a1a;
  --warm-text: #b85a12;
  --good: #13855b;
  --blue: #0a84ff;
  --orange: #ff9500;
  --purple: #af52de;
  --teal: #30b0c7;
  --red: #ff3b30;
  --margin: 16px;
  --radius: 24px;
  --inner: 14px;
  --gap: 28px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Sora", var(--font);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 17px/1.3 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---------- page ---------- */
.page { max-width: 720px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 12px) var(--margin) calc(env(safe-area-inset-bottom) + 32px); }
.topbar { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.topbar .spacer { flex: 1; }
.topbar .title { flex: 1; text-align: center; min-width: 0; }
.topbar .title b { display: block; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title small { display: block; font-size: 12px; color: var(--muted); }
.large-title { font-size: 34px; font-weight: 700; letter-spacing: .2px; margin: 10px 0 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--gap) 0 10px; }
.section-head h2 { font-size: 22px; font-weight: 700; margin: 0; }
.section-head button { color: var(--muted); font-size: 16px; }

/* Apple's glass circle buttons */
.circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px var(--border), 0 4px 16px rgba(0,0,0,.06);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); font-weight: 600; }
.circle:active { transform: scale(.95); }

/* ---------- cards and rows ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card.grey { background: var(--card); border-color: transparent; }
.card + .card { margin-top: 12px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.tiny { font-size: 13px; }

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 60px; width: 100%; text-align: left; border-radius: 12px; }
button.row:hover, a.row:hover { background: rgba(11,12,14,.04); }
.row .main { flex: 1; min-width: 0; }
.row .main b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .main span { display: block; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .end { text-align: right; flex: none; }
.row .end b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.row .end span { display: block; color: var(--muted); font-size: 15px; }
.row .end span .opt { display: inline; font-size: inherit; }
.chev { color: #b0b3b8; flex: none; }

.tone { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.tone.blue { background: linear-gradient(#3aa0ff, var(--blue)); }
.tone.orange { background: linear-gradient(#ffad33, var(--orange)); }
.tone.purple { background: linear-gradient(#c77dff, var(--purple)); }
.tone.grey { background: var(--card); color: var(--muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }

.day-head { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; margin: 22px 0 4px; }
.day-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--panel-hi); border-top-color: var(--muted); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- buttons ---------- */
.ink { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; padding: 0 22px; }
.ink:active { opacity: .85; }
.ink:disabled { opacity: .35; cursor: default; }
.soft { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: 999px;
  background: var(--card); font-weight: 500; padding: 0 22px; }
.soft:active { background: var(--panel-hi); }
.ink.fit, .soft.fit { width: auto; display: inline-flex; min-height: 44px; }
.link { color: var(--muted); font-size: 15px; padding: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border); font-size: 16px; font-weight: 500; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.field { width: 100%; height: 50px; border-radius: 14px; border: 0; background: var(--card); padding: 0 16px; outline: none; }
.field:focus { box-shadow: 0 0 0 2px rgba(11,12,14,.15); }
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search .field { padding-left: 44px; border-radius: 999px; height: 46px; }

/* ---------- home ---------- */
.today .big { font-family: var(--display); font-weight: 700; font-size: 56px; letter-spacing: -1px; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.big small { font-size: 22px; color: var(--muted); font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.big .dec { color: var(--muted); }
.rank { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.rank .n { width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank .who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .who b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rank .who span { display: block; font-size: 14px; color: var(--muted); }
a.rank:hover { background: rgba(11,12,14,.03); border-radius: 12px; }
.rank .t { font-weight: 600; font-variant-numeric: tabular-nums; width: 56px; text-align: right; flex: none; }
.rank .gap { width: 62px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px; }
.rank .gap.best { color: var(--good); }
.divider { height: 1px; background: var(--border); margin: 12px 0 4px; }
.empty { text-align: center; padding: 48px 12px; }
.empty h3 { font-size: 20px; margin: 14px 0 6px; }
.empty p { color: var(--muted); margin: 0 auto 20px; max-width: 320px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.dot.off { background: #c7c7cc; }

/* ---------- run ---------- */
/* a wide screen puts gate to gate in a column beside the video, as the iPhone app does on a wide iPad */
@media (min-width: 1000px) {
  .page.wide { max-width: 1160px; }
  .run-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .run-layout > div:last-child .section-head { margin-top: 18px; }
  .run-layout > div:first-child { position: sticky; top: 84px; }
}
.run-time { margin: 6px 0 14px; }
.run-time .big { font-family: var(--display); font-weight: 700; font-size: 64px; letter-spacing: -1.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.video { width: 100%; border-radius: var(--radius); background: #000; display: block; aspect-ratio: 16/9; object-fit: contain; }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.note .tone { width: 28px; height: 28px; border-radius: 8px; }
.splits-head, .split { display: grid; grid-template-columns: 56px 56px; justify-content: space-between; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.splits-head { font-size: 13px; color: var(--muted); padding: 4px 0 8px; }
.split { padding: 10px 0; border-top: 1px solid var(--border); width: 100%; text-align: left; font-size: 16px; }
.split:hover { background: rgba(11,12,14,.03); }
.split .t { text-align: right; font-weight: 600; }
.faster { color: var(--good); }
.slower { color: var(--warm-text); }

/* ---------- menu, sheet, toast ---------- */
/* Risegate's own menu (right-click and ···): a white card with a hairline and a soft shadow, the app's font and
   outline icons, the dangerous items in red under a line; not the system's menu */
.menu { position: fixed; z-index: 60; min-width: 220px; max-width: 300px; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 5px; box-shadow: 0 10px 30px rgba(11,12,14,.12), 0 2px 6px rgba(11,12,14,.06); animation: menu-in .12s ease-out; transform-origin: top left; }
@keyframes menu-in { from { opacity: 0; transform: scale(.97); } }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; font-size: 15px; color: var(--ink); text-align: left; }
.menu button svg { color: var(--muted); flex: none; }
.menu button:hover, .menu button:focus-visible { background: var(--card); outline: none; }
.menu button.danger, .menu button.danger svg { color: var(--red); }
.menu button.danger:hover { background: #fff1f0; }
.menu hr { border: 0; height: 1px; background: var(--border); margin: 5px 6px; }
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.25); animation: fade .2s; }
.scrim.clear { background: transparent; animation: none; z-index: 58; }   /* a menu's: above an open window (55), so a click anywhere outside the menu closes it */
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; max-height: calc(100% - env(safe-area-inset-top) - 20px); overflow: auto;
  background: #fff; border-radius: 28px 28px 0 0; padding: 8px var(--margin) calc(env(safe-area-inset-bottom) + 20px); animation: up .28s cubic-bezier(.2,.9,.3,1); }
.sheet .grab { width: 36px; height: 5px; border-radius: 3px; background: #d1d1d6; margin: 0 auto 6px; }
.sheet h2 { font-size: 24px; margin: 8px 0 4px; text-align: center; }
.sheet .sub { text-align: center; color: var(--muted); margin: 0 0 18px; font-size: 15px; }
@keyframes up { from { transform: translateY(100%); } }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; transform: translate(-50%, -50%); border-radius: 28px;
    max-height: calc(100% - 60px); animation: pop .22s ease-out; padding-bottom: 24px; }
  .sheet .grab { display: none; }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, -46%); } }
}
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%);
  background: rgba(30,30,32,.94); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 15px; max-width: calc(100% - 32px); }
@media (min-width: 768px) { .toast { bottom: 30px; } }

/* ---------- marking a gate ---------- */
.mark video { width: 100%; border-radius: 18px; background: #000; aspect-ratio: 16/9; object-fit: contain; display: block; }
.scrub { width: 100%; margin: 14px 0 4px; accent-color: var(--ink); }
.steps { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 8px 0 16px; }
.steps .circle { width: 52px; height: 52px; background: var(--card); box-shadow: none; }
.steps .play { width: 60px; height: 60px; background: var(--ink); color: #fff; }
.pick { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.pick:first-child, datalist + .pick { border-top: 0; }
.pick .thumb { width: 72px; height: 48px; border-radius: 10px; background: var(--card) center/cover; flex: none; }
.pick .field { height: 44px; }
.err { color: var(--red); font-size: 14px; }

/* ---------- sign in and sign up: the wordmark in the top corner, one centred column (Tally, Perplexity) ---------- */
.si-page { min-height: 100vh; min-height: 100dvh; position: relative; background: var(--bg); }
.si-mark { position: absolute; top: 24px; left: 28px; color: var(--ink); }
.si-mark svg { height: 26px; width: auto; fill: currentColor; overflow: visible; display: block; }
.signin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: center;
  max-width: 400px; margin: 0 auto; padding: 90px var(--margin) 40px; }
.signin h1 { font-size: 30px; font-weight: 700; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.3px; }
.signin p { color: var(--muted); margin: 0 0 24px; text-wrap: balance; }
.signin .err { color: var(--red); }
.signin p b { color: var(--ink); font-weight: 600; }
.signin .field { margin-bottom: 12px; }
.signin .ink { margin-top: 4px; }
.signin .link { align-self: center; margin-top: 10px; }
.si-terms { font-size: 13px; margin: 18px 0 0 !important; }
.si-terms a { color: var(--soft); text-decoration: underline; text-underline-offset: 2px; }
.si-err { margin: 14px 0 0 !important; }
.si-note { font-size: 14px; margin: -2px 0 14px !important; text-align: left; }
.signin > .si-note.ok { text-align: center; margin: 12px 0 0 !important; }
.si-note .ok { color: var(--good); }
.si-note .bad { color: var(--red); }
.si-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); margin: 0 auto 18px; }
.si-icon svg { width: 24px; height: 24px; }
.si-links { display: flex; justify-content: center; align-items: center; gap: 4px; color: var(--muted); margin-top: 6px; }
.si-links .link { margin-top: 0; }
.si-face { display: flex; justify-content: center; margin-bottom: 16px; }
.si-face .avatar { width: 72px; height: 72px; font-size: 26px; }
.si-face .avatar.blank { background: var(--card); color: var(--muted); }
.si-at { position: relative; display: block; }
.si-at span { position: absolute; left: 16px; top: 0; height: 50px; display: flex; align-items: center; color: var(--muted); font-size: 17px; }
.si-at .field { padding-left: 34px; }
/* a new account's pages: back on the left, a line that fills as they go (Kraken, as in the iPhone app) */
.si-progress { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); width: min(400px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; }
.si-gap { width: 30px; flex: none; }
.si-track { flex: 1; height: 4px; border-radius: 2px; background: var(--card); overflow: hidden; }
.si-track i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width .3s ease; }
@media (max-width: 560px) { .si-mark { left: 16px; top: 18px; } .si-progress { top: 60px; } }
.code { letter-spacing: 8px; text-align: center; font-size: 24px; font-variant-numeric: tabular-nums; }

/* a small phone (320-360 px): the rank's number and the fastest's name give the names room */
@media (max-width: 360px) {
  .rank .n, .row .end span .opt { display: none; }
  .rank { gap: 10px; }
  .rank .gap { width: 54px; }
}

/* ---------- a computer's screen (1024 px and wider): the whole window, sidebar + content ---------- */
.shell { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px;
  background: #f7f7f9; border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; padding: 6px 10px 16px; color: var(--ink); }
/* closing the sidebar (ChatGPT's and Claude's panel button): it slides out to the left and the page takes the width; the column is
   "auto", so the sidebar's -256 px margin makes it 0 wide without squeezing what's inside. A redraw builds a new .shell, so only a click slides */
.shell > .side { width: 256px; transition: margin-left .22s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.shell.side-closed > .side { margin-left: -256px; visibility: hidden; transition: margin-left .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s; }
.side-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.side-top .brand { flex: 1; min-width: 0; }
.circle.flat.side-toggle { color: var(--muted); background: transparent; }   /* no grey square at rest, only on hover (Noel) */
.circle.flat.side-toggle:hover { color: var(--ink); background: var(--panel-hi); }
.circle.flat.side-toggle:focus-visible { color: var(--ink); outline: 2px solid var(--blue); outline-offset: 1px; }
.side-toggle svg { width: 20px; height: 20px; }
.side-shut { margin: 4px 2px 0 0; }
.drawer .circle.side-toggle.side-shut, .shell:not(.side-closed) .circle.side-toggle.side-open { display: none; }   /* the phone's menu has its own close button */
.side-closed .circle.side-toggle.side-open { display: inline-grid; margin-right: 10px; animation: fade .2s .12s both; }
.brand svg { height: 26px; width: auto; fill: currentColor; overflow: visible; }   /* the desktop app's wordmark (desktop/web/index.html) */
.side-new { min-height: 42px; height: 42px; border-radius: 10px; font-size: 15px; margin-bottom: 14px; }   /* the same shape as the rows under it (Noel) */
.side-new svg { width: 18px; height: 18px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--soft); }
.side-item svg { width: 20px; height: 20px; flex: none; }
.side-item > span:not(.count):not(.badge):not(.status-dot):not(.unread) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: rgba(11,12,14,.05); color: var(--ink); }
.side-item.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.04); }
.side-item.small { height: 32px; font-size: 14px; font-weight: 400; }
.side-item .count.disc { flex: none; width: 20px; }   /* GS, SL, SG differ in width: one width for all, so the dots line up (Noel) */
.side-item .count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.badge .spinner, .spinner.inline { width: 11px; height: 11px; border-width: 1.5px; display: inline-block; vertical-align: -1px; }
.side-label { font-size: 12px; font-weight: 600; color: var(--muted); padding: 18px 10px 6px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.side-foot .status { font-size: 12px; padding: 0 10px; line-height: 1.35; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.side-user:hover, .side-user.on { background: rgba(11,12,14,.05); }
.side-user > span { min-width: 0; }
.side-user b, .side-user small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user b { font-size: 14px; font-weight: 600; }
.side-user small { font-size: 12px; color: var(--muted); }

.desk { min-width: 0; }
.desk-head { position: sticky; top: 0; z-index: 10; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 28px; background: rgba(255,255,255,.7); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--border); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.crumbs a { color: var(--muted); white-space: nowrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: #c7c7cc; }
.actions { display: flex; align-items: center; gap: 8px; flex: none; }
.actions .soft, .actions .ink { min-height: 36px; font-size: 14px; padding: 0 14px; }
.actions .soft svg { width: 16px; height: 16px; }
.circle.flat { width: 36px; height: 36px; background: var(--card); box-shadow: none; backdrop-filter: none; }
.circle.flat:hover { background: var(--panel-hi); }
.circle.flat.sm { width: 30px; height: 30px; display: inline-grid; vertical-align: middle; }
.desk-search { width: 300px; }
.desk-search .field { height: 36px; font-size: 14px; }

.desk-body { padding: 28px 32px 56px; max-width: 1320px; }
.desk-body.narrow { max-width: 720px; margin: 0 auto; }   /* Settings and Messages: one column in the middle */
.page-title { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.page-title h1 { font-size: 30px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.page-title p { margin: 4px 0 0; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: #fff; min-width: 0; }
.tile b { font-size: 28px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile b small { font-size: 15px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.tile .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.grid-2 > .card { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.card-head h2 { font-size: 17px; margin: 0; }
.card-head .soft { min-height: 34px; font-size: 14px; padding: 0 14px; }
.rows.pad { padding: 0 12px 8px; }
.quiet { padding: 6px 18px 20px; }
.quiet p { margin: 0 0 12px; }
.big-empty { padding: 72px 20px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fafafb; }
.card.flush > .tbl:first-child th { border-top: 0; }   /* the card's own border is the line there: two looked like a stray line (Noel) */
.tbl td { padding: 11px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr[data-href] { cursor: pointer; }
.tbl tr[data-href]:hover td { background: #f7f7f9; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .strong { font-weight: 600; }
.tbl .best { color: var(--good); }
.tbl .chev { margin-left: auto; }
.tbl .day-row td { font-size: 13px; font-weight: 600; color: var(--soft); background: #fafafb; padding-top: 8px; padding-bottom: 8px; }
.who-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.who-cell b { font-weight: 500; }
.who-cell .avatar { width: 30px; height: 30px; font-size: 12px; }
.tone.sm { width: 30px; height: 30px; border-radius: 8px; }
.tone.sm svg { width: 16px; height: 16px; }

/* a run: the video fills the window, its times in a panel beside it (ClickUp clips, Frame.io, Vimeo) */
.run-desk { --panel-w: 400px; --panel-now: clamp(300px, var(--panel-w), max(300px, min(760px, 100% - 440px)));
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-now); height: calc(100vh - 56px); }
/* the line between them is a handle: drag, double-click or arrow keys (VS Code, Linear); the panel 300-760 px, the video at least 440 */
.panel-grip { position: absolute; top: 0; bottom: 0; right: var(--panel-now); width: 12px; margin-right: -6px; z-index: 5; cursor: col-resize; touch-action: none; outline: none; }
.panel-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: var(--blue); opacity: 0; transition: opacity .15s .1s; }
.panel-grip:hover::after, .panel-grip.on::after, .panel-grip:focus-visible::after { opacity: 1; }
.resizing, .resizing * { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
.run-stage { padding: 24px 28px; overflow-y: auto; min-width: 0; }
.video.stage { aspect-ratio: auto; height: auto; max-height: calc(100vh - 220px); min-height: 280px; border-radius: 18px; }
.run-meta { display: flex; justify-content: space-between; align-items: flex-start; margin: 16px 0; }
.run-meta h1 { font-size: 24px; margin: 0; }
.run-meta p { margin: 4px 0 0; }
.run-panel { border-left: 1px solid var(--border); padding: 24px 32px; overflow-y: auto; background: #fff; }
.run-panel .big { font-family: var(--display); font-weight: 700; font-size: 56px; letter-spacing: -1.2px; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 4px 0; }
.run-panel h2 { font-size: 17px; }
.split.now { background: rgba(10,132,255,.08); }
.split.now span:first-child { color: var(--blue); font-weight: 600; }

@media (min-width: 1024px) {
  /* a run page fills the window exactly (the sample-runs strip included): only .run-stage and .run-panel scroll, never the page */
  .desk.desk-run { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  .desk-run > .desk-head, .desk-run > .demo-bar { flex: none; }
  .desk-run > .run-desk { flex: 1 1 auto; min-height: 0; height: auto; }
  .run-stage, .run-panel { overscroll-behavior: contain; scrollbar-width: none; }   /* no scroll bars on the two columns (Noel): they still scroll */
  .run-stage::-webkit-scrollbar, .run-panel::-webkit-scrollbar { display: none; }
  html:has(.desk-run), html:has(.desk-run) body { overflow: hidden; overscroll-behavior: none; }
  .sheet { width: 640px; }
  .toast { bottom: 28px; left: calc(50% + 128px); }
  html:has(.side-closed) .toast { left: 50%; }
}
@media (min-width: 1024px) and (max-width: 1240px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .run-desk { --panel-w: 360px; }
}

/* ---------- Settings (Zillow, Gumloop, Sentry, Link on Mobbin) ---------- */
.set-title h1 { font-size: 30px; font-weight: 700; margin: 6px 0 4px; }
.set-title p { margin: 0 0 8px; }
.set-section h2 { font-size: 15px; font-weight: 600; color: var(--soft); margin: 26px 0 8px 4px; }
.set-card { padding: 0 18px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 0;
  border-top: 1px solid var(--border); min-height: 60px; }
.set-row:first-child { border-top: 0; }
.set-row b { grid-column: 1; grid-row: 1; font-weight: 500; font-size: 16px; }
.set-desc { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 14px; margin-top: 2px; }
.set-end { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; max-width: 340px; }
.set-end .set-value { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--soft); font-size: 15px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-end .chip { height: 34px; font-size: 14px; padding: 0 14px; }
.chip.danger { color: var(--red); }
.chip:disabled { opacity: .4; cursor: default; }
@media (max-width: 560px) {   /* a phone: the value beside its name, the line about it under both (iOS's grouped lists) */
  .set-end { grid-row: 1; max-width: 60vw; }
  .set-desc { grid-column: 1 / -1; }
}

/* ---------- Messages (Microsoft Teams, Quo, Copilot on Mobbin; the iPhone app's bubbles) ---------- */
.teamtone { background: linear-gradient(#5cc8d8, var(--teal)); }
.tone.sm, .avatar.sm { width: 34px; height: 34px; }
.chat-head .tone, .chat-head .avatar { width: 38px; height: 38px; border-radius: 50%; }
.chat-head .tone svg { width: 20px; height: 20px; }
.chat-row .main span { max-width: 100%; }
.chat-row .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-row .avatar, .chat-row .tone { width: 44px; height: 44px; border-radius: 50%; }
.chat-row .tone svg { width: 22px; height: 22px; }
/* unread: a blue dot, no number (Noel), and the chat's name, last words and time stand out, as Messages and
   WhatsApp show it */
.unread { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); display: inline-block; flex: none; }
.side-item .unread { margin-left: auto; width: 8px; height: 8px; }
.chat-row.is-unread .main b { font-weight: 700; }
.chat-row.is-unread .main span { color: var(--ink); }
.chat-row.is-unread .end .tiny { color: var(--blue); font-weight: 600; }

.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border); }
.chat-head b { display: block; font-size: 16px; }
.msgs { flex: 1; overflow-y: auto; padding: 16px 24px 8px; display: flex; flex-direction: column; }
.msgs > .empty { margin: auto; }
.day-sep { text-align: center; margin: 14px 0 6px; }
.day-sep span { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); padding: 4px 10px; border-radius: 999px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 3px; max-width: 100%; }
.msg.head { margin-top: 12px; }
.msg.mine { align-items: flex-end; }
.msg-meta { font-size: 12px; color: var(--muted); margin: 0 12px 3px; }
.msg-meta b { color: var(--soft); font-weight: 600; }
.msg-line { display: flex; align-items: center; gap: 6px; max-width: min(78%, 560px); }
.msg.mine .msg-line { flex-direction: row-reverse; }
.bubble { background: var(--card); color: var(--ink); border-radius: 20px; padding: 9px 14px; font-size: 16px; line-height: 1.35; min-width: 0;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--ink); color: #fff; }
.bubble.has-card { padding: 6px; background: var(--card); color: var(--ink); }
.msg.mine .bubble.has-card { background: var(--card); color: var(--ink); }
.bubble .deleted { font-style: italic; opacity: .7; }
.msg-more { opacity: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.msg:hover .msg-more, .msg-more:focus { opacity: 1; }
.msg-more:hover { background: var(--card); }
@media (hover: none) { .msg-more { opacity: .6; } }
.reacts { display: flex; gap: 4px; margin: 3px 8px 0; flex-wrap: wrap; }
.react { height: 26px; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 13px; }
.react.on { border-color: rgba(11,12,14,.35); background: var(--panel-hi); }
.msg-status { font-size: 12px; color: var(--muted); margin: 3px 12px 0; }
.msg-status.err { color: var(--red); }
.emoji-row { display: flex; gap: 2px; padding: 4px 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.emoji-row button { width: 38px !important; height: 38px; padding: 0 !important; font-size: 20px !important; justify-content: center !important; border-radius: 50% !important; }
.emoji-row button.on { background: var(--panel-hi); }

.msg-card { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 15px; padding: 10px 14px; min-width: 200px; color: var(--ink); }
a.msg-card:hover { background: #fafafb; }
.msg-card b { font-size: 16px; }
.card-time { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.card-time small { font-size: 14px; color: var(--muted); margin-left: 2px; }
.card-time .dec { color: var(--muted); }
.card-ranks { display: flex; flex-direction: column; margin: 6px 0 2px; font-size: 14px; }
.card-ranks div { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 3px 0; }
.card-ranks b { font-size: 14px; font-variant-numeric: tabular-nums; }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--border); background: #fff; }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--border); background: var(--card); border-radius: 22px; padding: 11px 16px; font: inherit;
  font-size: 16px; line-height: 1.3; max-height: 160px; outline: none; }
.composer textarea:focus { border-color: rgba(11,12,14,.25); background: #fff; }
.composer .send { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.composer .send:disabled { opacity: .3; cursor: default; }
.composer.left { padding: 16px 24px; justify-content: center; }

/* a computer: the chat list on the left, the open chat on the right, the whole window tall */
.desk-chat { display: flex; flex-direction: column; height: 100vh; }
.chat-desk { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.chat-side { border-right: 1px solid var(--border); overflow-y: auto; padding: 8px; }
.chat-side .chat-row { padding: 10px; }
.chat-side .chat-row.on { background: var(--card); }
.chat-side .offline { padding: 10px; color: var(--muted); }

/* a phone: the chat on its own page, the message box at the bottom (no tab bar, as the iPhone app) */
.page.chat-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
.page.chat-page .chat-pane { flex: 1; min-height: 0; margin: 0 calc(-1 * var(--margin)); }
.page.chat-page .msgs { padding: 8px var(--margin); }
.page.chat-page .composer { padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }
.page.chat-page .msg-line { max-width: 86%; }

/* ---------- Risegate's own video player (player.js): the iPhone app's look, white on a dark glass bar ---------- */
.player { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; outline: none; user-select: none; -webkit-user-select: none; }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; cursor: pointer; }
/* the box takes the video's own shape (--ar, set by player.js once the video is known), so there are never black bars (Noel):
   as wide as there is room, unless that makes it taller than --mh; a tall phone video then gets narrower and sits in the middle */
.player:not(.mk-player) { width: min(100%, calc(var(--mh, 70vh) * var(--ar, 1.7778))); margin-inline: auto; container: player / inline-size; }
.player:not(.mk-player) video { aspect-ratio: var(--ar, 16 / 9); max-height: none; }
.player.stage { --mh: max(200px, min(70vh, 100vh - 220px)); }
.player:fullscreen, .player:-webkit-full-screen { border-radius: 0; display: flex; align-items: center; }
.player:fullscreen video { max-height: 100vh; height: 100vh; aspect-ratio: auto; }
.player:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.5); }
.pl-big { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; color: #fff;
  display: grid; place-items: center; background: rgba(30,30,32,.45); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15); transition: opacity .2s, transform .2s; }
.pl-big svg { width: 30px; height: 30px; margin-left: 3px; }
.player:not(.fresh) .pl-big, .player:not(.paused) .pl-big, .player.scrub .pl-big { opacity: 0; pointer-events: none; transform: scale(.9); }
.pl-flash { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; color: #fff;
  display: grid; place-items: center; background: rgba(30,30,32,.45); pointer-events: none; opacity: 0; }
.pl-flash svg { width: 30px; height: 30px; }
.pl-flash.on { animation: pl-flash .5s ease-out; }
@keyframes pl-flash { from { opacity: 1; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } }
.pl-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 8px;
  border-radius: 16px; color: #fff; background: rgba(28,28,30,.55); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: opacity .25s, transform .25s; }
.player.idle .pl-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.player.idle { cursor: none; }
.pl-bar button { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.pl-bar button:hover { background: rgba(255,255,255,.14); }
.pl-bar .pl-speed { width: auto; min-width: 40px; padding: 0 8px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-time, .pl-dur { font-size: 13px; font-variant-numeric: tabular-nums; opacity: .9; flex: none; min-width: 52px; text-align: center; }
.pl-track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; margin: 0 4px; }
.pl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.pl-fill { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 2px; background: #fff; }
.pl-knob { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transform: scale(.75); transition: transform .12s; }
.pl-track:hover .pl-knob, .player.dragging .pl-knob { transform: scale(1); }
@media (max-width: 560px) {   /* a phone: the sound button and the length go, the timeline gets the room */
  .pl-bar { left: 8px; right: 8px; bottom: 8px; height: 44px; padding: 0 4px; }
  .pl-bar [data-pl="mute"], .pl-dur { display: none; }
  .pl-time { min-width: 46px; font-size: 12px; }
}
@container player (max-width: 440px) {   /* the same on a narrow player on a wide screen (a tall phone video): the full-screen button stays in */
  .pl-bar { left: 8px; right: 8px; bottom: 8px; height: 44px; padding: 0 4px; }
  .pl-bar [data-pl="mute"], .pl-dur { display: none; }
  .pl-time { min-width: 46px; font-size: 12px; }
}

/* ---------- a training's dot (Noel): being timed (blue, fading in and out), newly timed (blue), a run that
   couldn't be timed (yellow-orange) ---------- */
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--blue); }
.status-dot.busy { animation: dot-pulse 1.4s ease-in-out infinite; }
.status-dot.failed { background: #ffa41b; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .status-dot.busy { animation-duration: 3s; } }
.side-item .status-dot { margin: 0 2px 0 6px; }
.who-cell .status-dot { margin-left: 2px; }
.row .status-dot { margin: 0 4px; }
.row.openable { cursor: pointer; }
.row.openable:hover { background: rgba(11,12,14,.04); }

/* a run (or a whole training) that couldn't be timed: what happened and what to do, in the middle */
.fail-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; margin: 16px 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.fail-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff4e0; color: #e08600; }
.fail-icon svg { width: 26px; height: 26px; }
.fail-panel h3 { font-size: 20px; margin: 14px 0 6px; }
.fail-panel p { color: var(--muted); margin: 0 0 20px; max-width: 420px; }
.fail-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fail-actions svg { width: 17px; height: 17px; }
.desk-body.narrow .fail-panel { margin-top: 40px; }

/* New analysis, first step: a box to drop videos on, or to click (Noel: just the upload first) */
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; margin-top: 6px; border: 2px dashed var(--border);
  border-radius: 22px; background: #fafafb; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--blue); background: #f2f8ff; }
.drop-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card); margin-bottom: 4px; }
.drop-icon svg { width: 22px; height: 22px; }
.drop .ink { margin-top: 4px; pointer-events: none; }
@media (hover: none) { .drop b, .drop > .muted { display: none; } }   /* a phone has nothing to drop: just the button */

/* whose run: a button with the athlete that opens the list (the user, the athletes, add one, a name for one run) */
.who-pick { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 12px 0 8px; border-radius: 14px; background: var(--card);
  text-align: left; font-weight: 500; }
.who-pick:hover { background: var(--panel-hi); }
.who-pick .avatar { width: 32px; height: 32px; font-size: 12px; }
.who-pick > span:not(.avatar) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-pick small { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.who-pick svg { color: var(--muted); flex: none; }
.who-edit { display: flex; align-items: center; gap: 8px; }
.who-edit .field { height: 46px; }
.who-edit .ink { min-height: 46px; }
.who-edit .link { padding: 8px 4px; }
.menu button .avatar { width: 24px; height: 24px; font-size: 10px; }
.menu-check { margin-left: auto; color: var(--blue); display: grid; }
.menu-check svg { color: var(--blue) !important; }
.menu button > span:not(.avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { max-height: min(420px, calc(100vh - 20px)); overflow-y: auto; }

/* a picked video: click it to watch who it is */
button.thumb { position: relative; display: grid; place-items: center; color: #fff; cursor: pointer; overflow: hidden; }
button.thumb svg { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: rgba(0,0,0,.45); }
button.thumb:hover svg { background: rgba(0,0,0,.65); }
.watch-scrim { z-index: 64; background: rgba(0,0,0,.6); }
.watch { position: fixed; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(960px, calc(100vw - 32px)); }
.watch .player { --mh: calc(100vh - 120px); }
.watch-close { position: absolute; top: -54px; right: 0; background: rgba(255,255,255,.92); }

/* or, then Continue with Apple / Google: outlined pills under the email's Continue (the iPhone app's welcome) */
.si-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0 14px; }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.si-alt { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; font-weight: 500; margin-bottom: 10px; }
.si-alt:hover { background: #fafafb; border-color: #d6d6db; }
.si-alt:disabled { opacity: .5; }

/* ---------- marking the first and last gate: the iPhone app's MarkScreen ---------- */
.sheet .mk-count { margin: 0 0 2px; font-size: 14px; }
.mk-player { margin-top: 14px; }
.mk-player video { max-height: 46vh; }
.pl-tick { position: absolute; top: 7px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--warm); }
.mk-steps { display: flex; gap: 10px; margin-top: 10px; }
.mk-step { flex: 1; height: 48px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: rgba(28,28,30,.88);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.mk-step:active { background: rgba(28,28,30,1); transform: scale(.98); }
.mk-grid { display: grid; grid-template-columns: repeat(var(--per), minmax(0, 120px)); justify-content: center; gap: 8px; margin: 18px 0 4px; }
.mk-tile { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--panel-hi) center / cover; }
.mk-tile.open { background: none; box-shadow: inset 0 0 0 2px var(--ink); }
.mk-tile:not(.open):hover { box-shadow: 0 0 0 2px var(--border); }
.mk-done { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 1.5px #fff; }
.mk-done svg { width: 11px; height: 11px; color: #fff !important; }
.mk-warn { min-height: 20px; margin: 12px 0 8px; text-align: center; font-size: 14px; color: var(--warm-text); }
.mk-remove { display: block; margin: 8px auto 0; }
.mk-remove:disabled { opacity: .4; cursor: default; }
/* the check page: each run's two gates as pictures */
.mk-review { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 20px; max-height: 58vh; overflow-y: auto; }
.mk-row { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 6px; border-radius: 14px; }
.mk-row:hover { background: #fafafb; }
.mk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-pair i { display: block; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--panel-hi) center / cover; }
.mk-pair small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
/* as the iPhone's marking screen: the player's bar under the video, always shown, no big play button */
/* the bar sits on the window itself, no dark box: dark controls on white, like everything around the video (Noel) */
.mk-player { background: transparent; border-radius: 0; overflow: visible; }
.mk-player video { border-radius: var(--radius); background: #000; }
.mk-player .pl-bar { position: relative; left: auto; right: auto; bottom: auto; margin: 6px 0 0; padding: 0; height: 44px; color: var(--ink);
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mk-player .pl-bar button { color: var(--ink); }
.mk-player .pl-bar button:hover { background: var(--card); }
.mk-player .pl-track::before { background: var(--panel-hi); }
.mk-player .pl-fill, .mk-player .pl-knob { background: var(--ink); }
.mk-player .pl-knob { box-shadow: none; }
.mk-player .pl-time, .mk-player .pl-dur { opacity: 1; color: var(--muted); }
.mk-player.idle .pl-bar { opacity: 1; transform: none; pointer-events: auto; }
.mk-player.idle { cursor: auto; }
.mk-player .pl-big, .mk-player .pl-flash { display: none; }
/* the open run's tile (its picture is up in the big video) says so */
.mk-now { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink); }
.who-pick.empty { color: var(--muted); font-weight: 400; }
.who-pick .avatar.blank { background: #fff; color: var(--muted); }

/* full screen: the video fills the screen and the bar floats over its bottom, white on dark glass, on every player
   (the marking player's bar sat under the video and was pushed off the screen) */
.player:fullscreen { border-radius: 0; background: #000; display: block; }
.player:fullscreen video { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.player.mk-player:fullscreen .pl-bar { position: absolute; left: 24px; right: 24px; bottom: 24px; max-width: 1100px; margin: 0 auto; padding: 0 8px; height: 48px; color: #fff;
  background: rgba(28,28,30,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
.player:fullscreen .pl-bar { left: 24px; right: 24px; bottom: 24px; max-width: 1100px; margin: 0 auto; }
.player.mk-player:fullscreen .pl-bar button { color: #fff; }
.player.mk-player:fullscreen .pl-bar button:hover { background: rgba(255,255,255,.14); }
.player.mk-player:fullscreen .pl-track::before { background: rgba(255,255,255,.3); }
.player.mk-player:fullscreen .pl-fill, .player.mk-player:fullscreen .pl-knob { background: #fff; }
.player.mk-player:fullscreen .pl-time, .player.mk-player:fullscreen .pl-dur { color: #fff; }
.player:-webkit-full-screen { border-radius: 0; background: #000; display: block; }
.player:-webkit-full-screen video { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.player.mk-player:-webkit-full-screen .pl-bar { position: absolute; left: 24px; right: 24px; bottom: 24px; max-width: 1100px; margin: 0 auto; padding: 0 8px; height: 48px; color: #fff;
  background: rgba(28,28,30,.55); }
.player.mk-player:-webkit-full-screen .pl-bar button, .player.mk-player:-webkit-full-screen .pl-time, .player.mk-player:-webkit-full-screen .pl-dur { color: #fff; }
.player.mk-player:-webkit-full-screen .pl-fill, .player.mk-player:-webkit-full-screen .pl-knob { background: #fff; }
.mk-ghost { position: fixed; z-index: 57; transform-origin: 0 0; border-radius: 8px; background: #000 center / cover no-repeat; pointer-events: none; }

/* marking fits one screen, no scrolling (Noel): the video takes what the rest leaves, the rest packed tighter */
.sheet.na .mk-player { --mh: max(150px, calc(100vh - 520px)); }
@supports (height: 100dvh) { .sheet.na .mk-player { --mh: max(150px, calc(100dvh - 520px)); } }
/* the video's box takes the video's own shape (Noel): as wide as the sheet or as tall as --mh allows, whichever comes first, no black bars */
.sheet.na .mk-player video { aspect-ratio: var(--ar, 16 / 9); width: min(100%, calc(var(--mh) * var(--ar, 1.7778))); max-height: none; margin: 0 auto; }
.sheet.na h2 + .sub { margin-bottom: 0; }
.sheet.na .mk-count { margin: 0; }
.sheet.na .mk-player { margin-top: 10px; }
.mk-grid { grid-template-columns: repeat(var(--per), minmax(0, 96px)); margin: 12px 0 0; gap: 6px; }
.mk-warn { margin: 8px 0 6px; min-height: 18px; }
.mk-remove { margin-top: 2px; }
/* the frame buttons: an outline only (Noel) */
.mk-step { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); height: 44px; }
.mk-step:hover { box-shadow: inset 0 0 0 1px #c9c9cf; }
.mk-step:active { background: var(--card); }

/* marking in two columns on a wide screen (Noel: one column was too much at once): the video and its frame buttons
   on the left, whose run, the two steps, the runs and the button on the right. A phone keeps one column. */
.mk-todo, .mk-label { display: none; }
@media (min-width: 900px) {
  .sheet.na.mk { width: min(1040px, calc(100vw - 64px)); }
  .sheet.na.mk .mk-player { --mh: calc(100vh - 260px); margin-top: 0; }
  @supports (height: 100dvh) { .sheet.na.mk .mk-player { --mh: calc(100dvh - 260px); } }
  .mk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; gap: 0 28px; }
  .mk-main { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .mk-head, .mk-side { grid-column: 2; text-align: left; }
  .mk-side { display: flex; flex-direction: column; }
  .sheet.na.mk .mk-head .sub, .sheet.na.mk .mk-head h2 { text-align: left; }
  .sheet.na.mk .mk-head h2 { margin: 2px 0 0; }
  .sheet.na.mk .mk-say { display: none; }
  .mk-todo { display: block; list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--border); }
  .mk-todo li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 15px; }
  .mk-todo li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--border); }
  .mk-todo li i svg { width: 14px; height: 14px; }
  .mk-todo li span { margin-left: auto; font-variant-numeric: tabular-nums; }
  .mk-todo li.on { color: var(--ink); font-weight: 600; }
  .mk-todo li.on i { background: var(--ink); color: #fff; box-shadow: none; }
  .mk-todo li.done i { background: var(--blue); color: #fff; box-shadow: none; }
  .mk-todo li.done { color: var(--ink); }
  .mk-label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .sheet.na.mk .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; margin: 0; }
  .sheet.na.mk .mk-warn { margin: 14px 0 10px; text-align: left; }
  .sheet.na.mk .mk-remove { align-self: center; }
  .sheet.na.mk .mk-layout { margin-top: 30px; }   /* the video starts under the back button */
  .sheet.na.mk .mk-side > .mk-warn { margin-top: auto; padding-top: 14px; }   /* the button at the bottom, level with the frame buttons */
}

/* full screen fills the screen: the marking window's size limits on the video stop there (Noel) */
.sheet.na .player.mk-player:fullscreen video { width: 100vw; height: 100vh; aspect-ratio: auto; margin: 0; border-radius: 0; }
.sheet.na .player.mk-player:-webkit-full-screen video { width: 100vw; height: 100vh; aspect-ratio: auto; margin: 0; border-radius: 0; }

/* the run page's "Against the others" graph (graph.js), the iPhone app's: Apple Stocks' look */
.vsavg { margin-top: 24px; }
.vsavg h2 { font-size: 20px; margin: 0 0 10px; }
.vs-card { border: 1px solid var(--border); border-radius: 24px; padding: 14px 16px 8px; background: #fff; }
.vs-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.vs-val { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-say { font-size: 14px; font-weight: 500; }
.vs-zoom { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--card); font-variant-numeric: tabular-nums; }
.vs-plot { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.vs-plot .vs-grid { stroke: var(--border); stroke-width: 1; }
.vs-plot .vs-avg { stroke: var(--muted); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 1 3; }
.vs-plot .vs-num { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.vs-plot .vs-scrub { stroke: var(--muted); stroke-opacity: .5; stroke-width: 1; }
.vs-plot .vs-dot { stroke: #fff; stroke-width: 2; }

/* ---------- the run's analysis (analysis.js): the body on the video, lean timing under it and beside it ---------- */
canvas.body { position: absolute; left: 0; top: 0; pointer-events: none; }
canvas.body[hidden] { display: none; }
.run-meta .chip svg { width: 17px; height: 17px; }
.meta-time { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.page .run-meta h1 { display: none; }   /* a phone: the top bar already names the run */
.page .run-meta { align-items: center; gap: 12px; }

/* lean timing's two sides: blue dots for left turns, purple rings for right (told apart without colour too) */
:root { --left: var(--blue); --right: var(--purple); }
.ls-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; box-sizing: border-box; }
.ls-dot.left { background: var(--left); }
.ls-dot.right { border: 2px solid var(--right); background: #fff; }
.lt-tip { position: fixed; z-index: 60; pointer-events: none; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(11,12,14,.12); padding: 7px 10px; font-size: 13px; line-height: 1.35; max-width: 240px; }
.lt-tip b { display: block; font-weight: 600; }
.lt-tip span { display: block; color: var(--soft); font-variant-numeric: tabular-nums; }

/* the chart under the video: WHOOP's trend view (a "typical range" band behind the line) in Apple Stocks' light look */
.lt-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 6px; margin-top: 16px; background: #fff; }
.lt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 16px; margin-bottom: 8px; }
.lt-head h2 { font-size: 17px; margin: 0; }
.lt-head p { margin: 2px 0 0; }
.lt-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--soft); padding-top: 2px; }
.lt-keys > span { display: inline-flex; align-items: center; gap: 6px; }
.lt-band-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--card); box-shadow: inset 0 0 0 1px var(--panel-hi); }
.lt-plot { display: block; width: 100%; height: 220px; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.run-stage:has(.no-video) .lt-plot { height: max(300px, calc(100vh - 520px)); }   /* no video: the chart takes the room */
.lt-plot .lt-band { fill: var(--card); }
.lt-plot .lt-grid { stroke: var(--border); stroke-width: 1; }
.lt-plot .lt-num { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.lt-plot .lt-end { fill: var(--muted); font-size: 11px; }
.lt-plot .lt-usual { stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; stroke-opacity: .7; }
.lt-plot .lt-usual.left { stroke: var(--left); }
.lt-plot .lt-usual.right { stroke: var(--right); }
.lt-usual-key { display: inline-block; width: 16px; height: 0; border-top: 2px dotted var(--soft); }
.lt-note { margin: 4px 0 10px; font-size: 14px; line-height: 1.4; color: var(--soft); }
.lt-plot .lt-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-opacity: .55; }
.lt-plot .lt-line.left { stroke: var(--left); }
.lt-plot .lt-line.right { stroke: var(--right); }
.lt-plot .lt-pt.left { fill: var(--left); stroke: #fff; stroke-width: 2; }
.lt-plot .lt-pt.right { fill: #fff; stroke: var(--right); stroke-width: 2; }
.lt-plot .lt-scrub { stroke: var(--muted); stroke-opacity: .5; stroke-width: 1; }
.lt-plot .lt-ring { fill: none; stroke: var(--left); stroke-width: 2; stroke-opacity: .35; }
.lt-plot .lt-ring[data-side="right"] { stroke: var(--right); }

/* the panel: Apple Health's two values side by side, then dots on one shared scale */
.lt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lt-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soft); }
.lt-stat b { font-size: 34px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lt-info { margin: 10px 0 0; font-size: 14px; color: var(--soft); line-height: 1.4; }
.lt-info summary { list-style: none; cursor: pointer; }
.lt-info summary::-webkit-details-marker { display: none; }
.lt-i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 3px; border-radius: 50%; border: 1.5px solid var(--muted);
  color: var(--muted); font: italic 600 11px/1 Georgia, serif; vertical-align: 1px; }
.lt-info[open] .lt-i { background: var(--ink); border-color: var(--ink); color: #fff; }
.lt-info p { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--card); font-size: 13px; }
.lean-h { font-size: 15px; font-weight: 600; margin: 22px 0 2px; }
.lt-sub { margin: 0 0 8px; }
.lt-row, .lt-run { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; }
.lt-run { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); padding: 6px 8px; margin: 0 -8px; border-radius: 10px; color: inherit; text-decoration: none; }
a.lt-run:hover { background: rgba(11,12,14,.04); }
.lt-run.me { background: var(--card); }
.lt-run.lt-foot { padding-top: 0; }
.lt-lab { font-size: 13px; font-weight: 600; color: var(--soft); }
.lt-name { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.lt-name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-run.me .lt-name b { font-weight: 700; }
.lt-name .tiny { font-variant-numeric: tabular-nums; }
.lt-track { position: relative; height: 36px; }
.lt-spread .lt-track { height: 46px; }
.lt-track::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.lt-vgrid { position: absolute; top: 2px; bottom: 2px; width: 1px; background: #f0f0f3; }
.lt-mid { position: absolute; top: 50%; height: 16px; margin-top: -8px; border-radius: 4px; opacity: .14; }
.lt-mid.left { background: var(--left); }
.lt-mid.right { background: var(--right); }
.lt-median { position: absolute; top: 50%; width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; background: var(--ink); z-index: 1; }
.lt-dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0; border-radius: 50%; box-sizing: border-box; z-index: 2; }
.lt-dot.left { background: var(--left); box-shadow: 0 0 0 2px #fff; }
.lt-dot.right { background: #fff; border: 2px solid var(--right); box-shadow: 0 0 0 2px #fff; }
.lt-run .lt-dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.lt-run .lt-dot.left { top: 34%; }   /* the two sides on their own lines in a run's row, as a pair */
.lt-run .lt-dot.right { top: 66%; }
.lt-dot.same { opacity: .3; }
button.lt-dot { cursor: pointer; }
button.lt-dot:hover, .lt-dot:hover { transform: scale(1.3); }
.lt-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed; opacity: .45; }
.lt-guide.left { border-color: var(--left); }
.lt-guide.right { border-color: var(--right); }
.lt-run.me .lt-guide { display: none; }
.lt-axis { position: relative; height: 16px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lt-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lt-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.lt-spread { margin-bottom: 4px; }
/* Every gate: the middle half spans the stacked dots so it shows around them, and the median sits on top with a white edge */
.lt-spread .lt-mid { height: 38px; margin-top: -19px; opacity: .16; }
.lt-spread .lt-median { height: 42px; margin-top: -21px; z-index: 3; box-shadow: 0 0 0 1.5px #fff; }

/* the panel: Technique | Times */
.panel-tabs { margin-bottom: 16px; }   /* the run page's 16 px between blocks */
.panel-tabs .chip { height: 34px; font-size: 15px; }
.panel-h { font-size: 17px; margin: 20px 0 10px; }
.panel-time { font-family: var(--display); font-weight: 700; font-size: 44px; letter-spacing: -1px; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 2px 0; }
.panel-time small { font-size: 18px; color: var(--muted); margin-left: 2px; }
.panel-time .dec { color: var(--muted); }

/* a phone: the panel under the video */
.run-side { margin-top: 18px; }
@media (min-width: 1000px) { .run-side { margin-top: 0; } }

/* ---------- Compare: up to four runs side by side (Mixpanel, Grok on Mobbin) ---------- */
.cmp-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.cmp-top .chip { height: 34px; font-size: 14px; }
.cmp-top .soft { min-height: 36px; font-size: 14px; padding: 0 14px; }
.cmp-say { margin: 10px 0 12px; }
.cmp-grid { position: relative; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 60px; outline: none; }
.cmp-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.cmp-pane { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.cmp-pane video { display: block; width: 100%; aspect-ratio: var(--ar, 16 / 9); object-fit: contain; background: #000; cursor: pointer; }
.cmp-pane.waiting video { opacity: .55; }
.cmp-label { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 52px); display: flex; flex-direction: column; gap: 1px; padding: 6px 10px;
  border-radius: 10px; color: #fff; background: rgba(28,28,30,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 12px; }
.cmp-label b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-label span { font-variant-numeric: tabular-nums; opacity: .9; }
.cmp-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(28,28,30,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cmp-x:hover { background: rgba(28,28,30,.8); }
.cmp-missing { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 12px; text-align: center; color: #fff; font-size: 13px; }
.cmp-bar { left: 0; right: 0; bottom: 0; background: rgba(28,28,30,.88); }
.cmp-grid.idle .cmp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.cmp-bar .pl-track { min-width: 60px; }
.cmp-table { margin-top: 16px; }
.cmp-table .tbl td b { font-weight: 600; }
.cmp + .tiny, .cmp .tiny { margin-top: 10px; }
@media (max-width: 560px) {
  .cmp-grid { gap: 4px; }
  .cmp-pane { border-radius: 10px; }
  .cmp-label { left: 4px; top: 4px; padding: 3px 6px; max-width: calc(100% - 36px); font-size: 11px; }
  .cmp-label b { font-size: 12px; }
  .cmp-label .cmp-gate { display: none; }
  .cmp-x { right: 4px; top: 4px; width: 24px; height: 24px; }
  .cmp-x svg { width: 14px; height: 14px; }
  .cmp-table .tbl th, .cmp-table .tbl td { padding: 9px 8px; font-size: 13px; }
  .cmp-gates, .cmp-bar .cmp-start { display: none; }
  .cmp-bar .pl-time { min-width: 0; font-size: 12px; }
}
.cmp-table .tbl thead tr + tr th { border-top: 0; padding-top: 0; }
.cmp-table .tbl th.cmp-group { border-bottom: 0; padding-bottom: 2px; text-align: center; }

/* the compare picker */
.pick-list { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; }
.pick-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--border); cursor: pointer; }
.pick-row:first-child { border-top: 0; }
.pick-row input { width: 20px; height: 20px; accent-color: var(--ink); }
.pick-row .who-cell b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-row:has(input:disabled) { opacity: .45; cursor: default; }

/* looking around without an account (demo.js): a strip on every page saying the runs are samples */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 12px 10px 16px;
  border-radius: 16px; background: rgba(10,132,255,.08); color: var(--ink); font-size: 14px; font-weight: 500; }
.demo-bar span { display: flex; align-items: center; gap: 8px; }
.demo-bar span svg { flex: none; color: var(--blue); }
.demo-bar .ink.sm { flex: none; white-space: nowrap; height: 34px; padding: 0 16px; font-size: 14px; }   /* the button only: the line beside it wraps */
.desk > .demo-bar { margin: 12px 28px 0; }
.si-demo { display: block; margin: 18px auto 0; }
.no-video { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 18px; min-height: 56px; }   /* no video: a slim note, the charts get the room */

/* Choose the skier: one frame of the run with the people the timing computer found boxed; a click picks one */
.sheet.ck { width: min(860px, calc(100vw - 64px)); }
.ck-stage { position: relative; margin-top: 10px; }
.ck-player video { max-height: calc(100vh - 360px); max-height: calc(100dvh - 360px); }
.ck-boxes { position: absolute; pointer-events: none; }
.ck-box { position: absolute; pointer-events: auto; border-radius: 6px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.45); background: rgba(255,255,255,.08); }
.ck-box:hover { background: rgba(255,255,255,.22); }
.ck-box.on { box-shadow: 0 0 0 3px var(--blue), 0 0 0 4.5px #fff; background: rgba(10,132,255,.18); }
.ck-box span { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ck-box.on span { background: var(--blue); color: #fff; }
.tbl td .chip { margin-right: 4px; }   /* with the space after it, 8 px between Choose the skier, Retry and ··· (they touched, Noel) */
.ck-say { text-align: center; color: var(--muted); font-size: 14px; min-height: 20px; margin: 10px 0; }
.ck-auto { display: block; margin: 8px auto 0; }
@media (max-width: 767px) { .sheet.ck { width: auto; } }

/* Team (Noel, 2026-10-26): Settings' cards, each person a row with their picture on the left */
.team-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.team-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.team-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.team-row > .avatar { grid-column: 1; grid-row: 1 / span 2; margin-right: 12px; }
.team-row > b { grid-column: 2; }
.team-row > .set-desc { grid-column: 2; }
.team-row > .set-end { grid-column: 3; }
.team-leave { display: flex; justify-content: center; margin: 24px 0 8px; }
.chip.ink-chip { background: var(--ink); color: #fff; box-shadow: none; }
.ap-found { font-size: 15px; margin: 12px 2px 0; }
.sheet .field + .ink, .sheet .ap-found + .ink, .sheet .err + .ink { margin-top: 14px; }
@media (max-width: 600px) {   /* a phone: a person's buttons go under their name, which kept too little room beside them */
  .team-row > .set-end { grid-column: 2 / span 2; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; gap: 8px; max-width: none; margin-top: 8px; }
  .team-row > .set-end .chip { white-space: nowrap; }   /* three buttons since Make coach: they wrap, never squeeze (2026-10-28) */
  .team-row > .set-end:empty { display: none; }
}

/* the grey under a row the pointer is on (Noel: better spaced, everywhere): a rounded block reaching 10 px past
   the row's content on each side and 2 px short of the rows above and below, so the content keeps its place and
   never touches the grey's edge. The run page's lit section uses the same block in blue. */
a.row, button.row, .row.openable, a.rank, button.split { position: relative; z-index: 0; }
a.row:hover, button.row:hover, .row.openable:hover, a.rank:hover, .split:hover, .split.now { background: none; }
a.row::before, button.row::before, .row.openable::before, a.rank::before, button.split::before {
  content: ""; position: absolute; inset: 2px -10px; border-radius: 12px; background: transparent; z-index: -1; pointer-events: none; transition: background .12s; }
a.row:hover::before, button.row:hover::before, .row.openable:hover::before, a.rank:hover::before, button.split:hover::before { background: rgba(11,12,14,.045); }
button.split.now::before { background: rgba(10,132,255,.08); }
.rows.pad { padding: 0 18px 8px; }   /* a computer's Timing now card: the block 8 px inside the card, the rows in line with its heading */
/* the computer's chat list has room inside each row already: its own grey, as before */
.chat-side .chat-row::before { display: none; }
.chat-side .chat-row:hover { background: rgba(11,12,14,.04); }
.chat-side .chat-row.on { background: var(--card); }
.ap-link { margin-top: 10px; font-size: 13px; }
/* a run that couldn't be timed: Choose the skier and Retry beside its name, on a phone under it (they left the name no room) */
.row-acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 600px) {
  .fail-row { flex-wrap: wrap; row-gap: 8px; }
  .fail-row .row-acts { order: 5; width: 100%; padding-left: 40px; }
}

/* ---------- the whole site in the sidebar's corners (Noel, 2026-10-26: tried, kept, "everywhere you can") ----------
   Buttons, chips and fields as New analysis (10 px); cards, tiles, windows and video 14 px, since 10 looked sharp on a
   big box; the round buttons and icon badges rounded squares in proportion. Still round: people's pictures, spinners,
   status dots and the timeline's knob, where a square reads as a mistake. */
:root { --radius: 14px; }
.ink, .soft, .chip, .si-alt, .mk-step, .field, .search .field, .who-pick, .vs-zoom, .ck-auto, .demo-bar .ink.sm { border-radius: 10px; }
.toast, .react, .day-sep span, .badge { border-radius: 10px; }
.tile, .vs-card, .drop, .menu, .mk-row, .mark video, .video.stage, .msg-card, .bubble { border-radius: 14px; }
.composer textarea, .demo-bar, .pl-bar { border-radius: 12px; }
.sheet { border-radius: 16px 16px 0 0; }
@media (min-width: 768px) { .sheet { border-radius: 16px; } }
/* ...and what was round (v0.1.52): rounded squares, the corner in proportion to the size */
.circle, .composer .send, .emoji-row button { border-radius: 10px; }
.circle.flat.sm, .msg-more, button.thumb svg { border-radius: 8px; }
.pl-big, .pl-flash { border-radius: 16px; }
.si-icon, .fail-icon, .drop-icon { border-radius: 14px; }
.chat-head .tone, .chat-row .tone { border-radius: 12px; }   /* the team chat's picture; people's stay round */
.mk-todo li i { border-radius: 7px; }
.mk-done { border-radius: 5px; }
/* the sample-runs strip thinner with its new corners (Noel): 44 px tall, was 56 */
.demo-bar { padding: 6px 6px 6px 16px; }
.demo-bar .ink.sm { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 8px; }
/* the big controls a little slimmer with square-ish corners (Noel: sized for round ends they looked tall) */
.ink, .soft { min-height: 46px; }
.si-alt { min-height: 46px; }
.field { height: 46px; }
.mk-step { height: 40px; }
.who-pick { height: 44px; }
/* the top bar's title on the same line as the page under it (Noel): both 32 px in from the sidebar */
.desk-head { padding: 0 32px; }
.run-stage { padding-left: 32px; padding-right: 32px; }
/* the run page evenly spaced (Noel, 2026-10-30: "is it all even?"): both columns 32 px in at the sides, so the
   divider has 32 px on each side and the page 32 px at both outer edges; 16 px between every stacked block */
.run-stage > .card + .card { margin-top: 16px; }
.desk > .demo-bar { margin-left: 32px; margin-right: 32px; }
/* a card's heading band centred between the card's top and the line under it (Noel): even room above and below
   (one px more below, for the card's own border on top) */
.card-head { padding: 14px 18px 15px; min-height: 56px; }
.section-head { align-items: center; }   /* "See all" in the middle of the heading beside it, not on its baseline */
.team-title { align-items: center; }     /* Rename and Add people in the middle of the team's name and line */
.team-title .team-actions { margin-bottom: 0; }
/* a trainings table's days (Noel: not a grey band; Mobbin's Fabric, Asana and Canny): the day as a small bold label on
   white with room above it, no line under it, so it reads as a heading */
.tbl .day-row td { background: none; border-bottom: 0; padding: 20px 18px 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.tbl tbody .day-row:first-child td { padding-top: 12px; }
.tbl tr.day-row + tr td { border-top: 0; }
.vs-zoom { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }   /* a menu now: the up-down chevron says so, as on the iPhone; never squeezed onto two lines (320 px) */
.vs-zoom svg { opacity: .6; }
/* a heading opens its page only from its title and its See all / Open training, not from the whole band (Noel) */
.head-link { color: inherit; text-decoration: none; }
.head-link:hover { opacity: .7; }
/* Compare's pick list (Noel: a prettier tick, and a picked run greyed): the app's own box instead of the browser's,
   a white tick on blue when picked, and the picked row on a light grey block */
.pick-row { padding: 10px 12px; border-radius: 12px; transition: background .12s; }
.pick-row input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; flex: none; cursor: pointer;
  border: 1.5px solid #c7c7cc; background: #fff center / 14px no-repeat; transition: background-color .12s, border-color .12s; }
.pick-row input:checked { border-color: var(--blue); background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.pick-row input:focus-visible { outline: 2px solid rgba(10,132,255,.45); outline-offset: 2px; }
.pick-row:hover { background: rgba(11,12,14,.03); }
.pick-row:has(input:checked) { background: var(--card); }
.pick-list { display: grid; gap: 2px; }
.pick-list .pick-row { border-top: 0; }   /* the grey blocks and the gap part the rows: lines curved at the blocks' corners */
/* the top bar's back arrow, before the path (Noel) */
.desk-head { justify-content: flex-start; }
.desk-head .actions { margin-left: auto; }
.desk-back { margin-right: 10px; }
.desk-back svg { width: 18px; height: 18px; }
/* the Team page's Rename and Add people the same size (Noel) */
.team-actions .chip, .team-actions .ink { height: 40px; min-height: 40px; padding: 0 16px; font-size: 15px; font-weight: 600; }
.team-actions .ink svg { width: 16px; height: 16px; }
/* the account row at the sidebar's foot, while Settings is open: white like the other open items (Noel) */
.side-user.on, .side-user.on:hover { background: #fff; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,.04); }
.ink.red { background: #e5372b; }   /* a button that deletes for good */
.ink.red:hover { background: #cc2e23; }

/* Rename in place (Noel, 2026-10-27): a training's or a run's title becomes a field on a double-click, in the title's own type */
[data-rename] { cursor: text; }
.rename-field { font: inherit; color: inherit; letter-spacing: inherit; max-width: 100%; height: auto; line-height: inherit; margin: -3px -11px; padding: 2px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, .18); border-color: var(--blue); }

/* A page that is only a notice ("Messages need an account", "No runs yet", a deleted run) shows it in the middle of the window (Noel, 2026-10-27) */
.desk:has(.center-note) { display: flex; flex-direction: column; min-height: 100vh; }
.desk:has(.center-note) > .desk-body { flex: 1; display: flex; flex-direction: column; width: 100%; padding-bottom: 120px; }
.desk .center-note { margin-top: auto; margin-bottom: auto; }
.crumbs b:has(.rename-field) { overflow: visible; }   /* the path cuts long names short, which clipped the field's edges */
.crumbs .rename-field { margin: -4px -7px -4px -2px; padding: 2px 6px; border-radius: 8px; }   /* close round the name, clear of the "/" before it */

/* the run page's time lost or gained (sections.js) */
.wt-sum { color: var(--soft); line-height: 1.4; margin: 0 0 8px; }
.wt-sum b { color: var(--ink); font-weight: 600; }

/* lean through the run (leancurve.js) */
.lc-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 8px; background: #fff; }
.lc-plot { display: block; width: 100%; height: 150px; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.lc-plot .lc-zero { stroke: var(--border); stroke-width: 1.5; }
.lc-plot .lc-lab { fill: var(--muted); font-size: 11px; stroke: #fff; stroke-width: 3px; paint-order: stroke; }
.lc-plot .lc-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-plot .lc-pt { fill: var(--blue); }
.lc-plot .lc-gate { stroke: var(--muted); stroke-width: 1.5; }
.lc-plot .lc-scrub { stroke: var(--muted); stroke-opacity: .6; stroke-width: 1; }
.lc-note { margin: 6px 0 2px; }

/* ---------- sections you can put in your own order (reorder.js; Notion's grip, Linktree's and Luma's lift, Klarna's outlines, on Mobbin) ---------- */
[data-rbl] { position: relative; }
.rb { position: relative; }
/* no handle until Rearrange is on (reorder.js edit()); then each section has a pill on its top edge, right side, clear of
   whatever the section holds, and a soft dashed outline (Xero, Evernote), like iOS's edit mode */
.rb-grip { position: absolute; right: 14px; top: -13px; width: 46px; height: 26px; display: none; place-items: center; padding: 0; color: var(--muted);
  background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; z-index: 3;
  transition: background-color .15s ease, color .15s ease, transform .15s ease; }
body.rb-edit .rb-grip { display: grid; }
/* up and down beside the handle: one tap moves a section past a whole row (reorder.js stepTo) */
.rb-moves { position: absolute; right: 66px; top: -13px; height: 26px; display: none; gap: 2px; z-index: 3; }
body.rb-edit .rb-moves { display: flex; }
.rb-mv { width: 28px; height: 26px; display: grid; place-items: center; padding: 0; margin: 0; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.rb-mv:hover:not(:disabled) { background: var(--panel-hi); color: var(--ink, #0b0c0e); }
.rb-mv:focus-visible { outline: 2px solid var(--blue); }
.rb-mv:disabled { cursor: default; }
.rb-mv:disabled svg { opacity: .35; }
.rb-held > .rb-moves, .rb-settling > .rb-moves { display: none; }
.rb-grip:hover { background: var(--panel-hi); color: var(--ink, #0b0c0e); }
.rb-grip:focus-visible { outline: 2px solid var(--blue); }
.rb-grip:active { transform: scale(1.06); }
/* A dashed line with wide gaps round each section that moves: drawn as a picture, since a CSS dashed line can't set its gaps;
   the line sits 2 px inside the box, or the edge clips half of it and it fades in places: a section's height is rarely a whole
   pixel, so the picture ends up to a pixel short of the box and its bottom line, 1 px in, was cut thin (Noel, 2026-10-28, 2026-10-30) */
body.rb-edit [data-rbl] > .rb:not(.rb-held):not(.rb-settling)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='100%25' height='100%25' style='width:calc(100%25 - 4px);height:calc(100%25 - 4px)' rx='12' fill='none' stroke='%230A84FF' stroke-opacity='.5' stroke-width='2' stroke-dasharray='6 9' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.rb-edit [data-rbl^="run-"], body.rb-edit [data-rbl="home-phone"], body.rb-edit [data-rbl="home-desk"] { padding-top: 14px; }
/* the row of four tiles has no handle of its own: each tile has one, and the cards around it move instead */
body.rb-edit [data-rb="tiles"] > .rb-grip, body.rb-edit [data-rb="tiles"] > .rb-moves { display: none; }
body.rb-edit [data-rbl] > [data-rb="tiles"].rb:not(.rb-held):not(.rb-settling)::after { content: none; }   /* only each tile is outlined, not the row */
/* in Rearrange the dashed line takes the place of the card's own grey edge: the edge showing through the gaps made the
   dashes look faded and doubled (Noel, 2026-10-28) */
body.rb-edit [data-rbl] > .rb:not(.rb-held):not(.rb-settling):not([data-rb="tiles"]),
body.rb-edit [data-rbl] > .rb:not(.rb-held):not(.rb-settling) > .card { border-color: transparent; }
body.rb-edit .tiles .rb > .rb-grip { right: 8px; }
/* room for the bar under the last section goes inside the page, not on the body: on the body it added a white strip below the shell
   (the sidebar's grey stopped above it) and, with the page's own padding, left a screenful of empty space */
body.rb-edit .page, body.rb-edit .desk-body { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
.rb-bar { position: fixed; z-index: 90; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 32px); padding: 6px 6px 6px 18px; background: #111; color: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 14px; }
.rb-bar .rb-hint { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rb-bar .rb-hint svg { flex: none; color: #fff; }
.rb-bar .rb-sep { width: 1px; height: 20px; margin: 0 6px; background: rgba(255,255,255,.2); flex: none; }
.rb-bar button { width: auto; flex: none; height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; }
.rb-bar .rb-reset { background: transparent; color: #fff; }
.rb-bar .rb-reset:hover { background: rgba(255,255,255,.12); }
.rb-bar .rb-done { background: #fff; color: #111; }
.rb-bar .rb-done:hover { background: #e9e9e9; }
@media (max-width: 420px) { .rb-bar .rb-hint span { display: none; } .rb-bar { padding-left: 16px; } }
body.rb-dragging, body.rb-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
/* the held section: lifted a hair, a white card behind it with one thin outline and a soft layered shadow; it fades in
   as it lifts and out as it settles */
.rb-held, .rb-settling { z-index: 20; }
.rb-held { will-change: transform; }
.rb-held > .rb-grip { opacity: 1; background: var(--panel-hi); color: var(--ink, #0b0c0e); }
.rb-held::before, .rb-settling::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; background: var(--bg, #fff); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(10,132,255,.45), 0 1px 2px rgba(16,24,40,.06), 0 8px 16px -4px rgba(16,24,40,.08), 0 24px 48px -12px rgba(16,24,40,.18);
  animation: rb-in .16s ease-out both; }
.rb-settling::before { animation: rb-out .22s ease-in both; }
@keyframes rb-in { from { opacity: 0; } }
@keyframes rb-out { to { opacity: 0; } }
/* the gap where it will land: empty, with one thin outline; it glides with the others */
.rb-slot { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1); animation: rb-in .16s ease-out both; }
.rb-slot::before { content: ""; position: absolute; inset: 0; border-radius: 14px; border: 1px solid rgba(10,132,255,.3); background: rgba(10,132,255,.035); }
.rb-slot.rb-out { animation: rb-out .2s ease-in both; }
/* the held section floats in the top layer (reorder.js); its invisible stand-in keeps its place in the list, and the
   section after it keeps no top gap when the lifted one is first */
.rb-ph { visibility: hidden; box-sizing: border-box; }
.rb-lifted::backdrop { display: none; }
[data-rbl] > .rb-lifted:first-child + .rb { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .rb-slot, .rb-grip { transition: none; }
  .rb-held::before, .rb-settling::before, .rb-slot, .rb-slot.rb-out { animation: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* every section a card of its own (Noel, 2026-10-27: "try to put it all in borders"), as a PostHog dashboard's
   tiles: the card look of the video column's lean chart, its title inside top-left with the grip beside it; a
   chart's own box inside is flattened, so each section has one border. The held card and the gap then cover the card
   itself (the outline on its border). */
[data-rbl^="run-"] > .rb { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px 16px 18px; }
[data-rbl^="run-"] > .rb + .rb { margin-top: 16px; }
[data-rbl^="run-"] > .rb.rb-held::before, [data-rbl^="run-"] > .rb.rb-settling::before { inset: -1px; }
[data-rbl^="run-"] > .rb .panel-h, [data-rbl^="run-"] > .rb .lean-h, [data-rbl^="run-"] > .rb .vsavg h2 { font-size: 17px; font-weight: 600; line-height: 24px; margin: 0 0 8px; }
[data-rbl^="run-"] > .rb .lean-h + p { margin-top: -4px; }
[data-rbl^="run-"] > .rb .lc-card, [data-rbl^="run-"] > .rb .vs-card, [data-rbl^="run-"] > .rb .lt-card { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
/* the video column's cards (the lean chart, and any moved there from the panel) */
[data-rbl="run-stage"] { margin-top: 16px; }
[data-rbl^="run-"] > .rb .vsavg { margin: 0; }
[data-rbl^="run-"] > .rb .lc-note { margin-bottom: 0; }
[data-rbl^="run-"] > .rb > :last-child { margin-bottom: 0; }
[data-rbl^="run-"] > .rb p:last-child { margin-bottom: 0; }
[data-rbl^="run-"] > .rb .splits-head { padding-top: 0; }
/* Home */
[data-rbl="home-phone"] > .rb + .rb { margin-top: 12px; }
/* Home on a phone: Trainings in a card like the others */
[data-rbl="home-phone"] > [data-rb="trainings"] { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 6px 18px; }
[data-rbl="home-phone"] > [data-rb="trainings"] > .section-head { margin: 0 0 6px; }
[data-rbl="home-phone"] > [data-rb="trainings"] > .section-head h2 { font-size: 17px; font-weight: 600; }
[data-rbl="home-phone"] > [data-rb="trainings"].rb-held::before, [data-rbl="home-phone"] > [data-rb="trainings"].rb-settling::before { inset: -1px; }
.home-blocks { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; grid-auto-flow: row dense; }
.home-blocks > .span-2 { grid-column: 1 / -1; }
.home-blocks .tiles { margin-bottom: 0; }
.home-blocks > .rb > .card { margin-top: 0; }
@media (min-width: 1024px) and (max-width: 1240px) { .home-blocks { grid-template-columns: minmax(0, 1fr); } }
/* a tile's label row grabs the tile (reorder.js), like its grip */
body.rb-edit .rb-handle { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* the whole tiles row has its grip in the gutter left of the tiles, so it doesn't sit on the first tile's own grip */
/* the whole top bar of a tile is the handle, not just the words */
.tile > .rb-handle { display: block; margin: -16px -18px -6px; padding: 16px 18px 6px; }   /* lined up with the number under it (Noel); the grip fits in the 18 px edge */

/* ---------- the phone's menu: the sidebar slides in from the left (from the right until Noel moved it, 2026-10-28) over 82% of the screen (Noel, 2026-10-28: 2/3, then "a bit wider") ----------
   Mobbin: Linear's and Notion's mobile menus, a panel from the edge over a dimmed page. Only transform and opacity move. */
.menu-btn { position: relative; }
.menu-btn .unread { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; box-shadow: 0 0 0 2px #fff; }
.drawer-dim { position: fixed; inset: 0; z-index: 80; background: rgba(11,12,14,.4); opacity: 0; visibility: hidden;
  transition: opacity .26s ease, visibility 0s .26s; }
.drawer { position: fixed; z-index: 81; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 420px; transform: translateX(-100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; box-shadow: 8px 0 30px rgba(0,0,0,.12); touch-action: pan-y; }
.drawer .side { position: static; height: 100%; width: 100%; border-right: 0; padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 14px);
  overscroll-behavior: contain; }
.drawer-x { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 10px; width: 36px; height: 36px; }
.drawer .brand { padding-right: 44px; }
html.drawer-open { overflow: hidden; }
html.drawer-open .drawer-dim { opacity: 1; visibility: visible; transition: opacity .26s ease; }
html.drawer-open .drawer { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.drawer.dragging { transition: none; }
@media (min-width: 1024px) { .drawer, .drawer-dim, .menu-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-dim, html.drawer-open .drawer, html.drawer-open .drawer-dim { transition: none; } }
/* the phone top bar's round buttons a bit smaller (Noel, 2026-10-28: "make these a bit smaller"): 44 -> 38 px */
.topbar .circle { width: 38px; height: 38px; border-radius: 9px; font-size: 15px; }
.topbar .circle svg { width: 18px; height: 18px; }
/* a warning's X, top right of its box (Noel, 2026-10-28) */
.note .note-x { margin-left: auto; margin-top: -4px; margin-right: -6px; color: var(--muted); }
/* in the sidebar the name is edited in place with no box round it (Noel, 2026-10-28: "you dont have to put the
   outline here"): the row clips anything past the name, which cut the box's edge off */
.side-item .rename-field { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
/* a phone's Home before the first run: the card in the middle of the screen under the greeting (Noel, 2026-10-28) */
.page:has(> .home-empty) { display: flex; flex-direction: column; min-height: 100dvh; }
.page > .home-empty { margin-top: auto; margin-bottom: auto; }

/* Page changes (Noel, 2026-10-28): the page area alone is animated, set apart only while a change runs */
html.vt .page, html.vt .desk { view-transition-name: pg; background: var(--bg); }
html.vt::view-transition-group(root) { animation: none; }
html.vt::view-transition-old(root), html.vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(pg), ::view-transition-new(pg) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; mix-blend-mode: normal; }
html.vt-push::view-transition-new(pg) { animation-name: vt-in-right; z-index: 2; box-shadow: -8px 0 24px rgba(0, 0, 0, .12); }
html.vt-push::view-transition-old(pg) { animation-name: vt-out-left; z-index: 1; }
html.vt-pop::view-transition-old(pg) { animation-name: vt-out-right; z-index: 2; }
html.vt-pop::view-transition-new(pg) { animation-name: vt-in-left; z-index: 1; }
/* the page area never morphs from the old page's size to the new one's: both pictures sit at the top at their own size
   (a morph stretched the two pages into each other for a frame, Noel 2026-10-28) */
::view-transition-group(pg) { animation: none; }
::view-transition-old(pg), ::view-transition-new(pg) { inset-block-start: 0; block-size: auto; object-fit: none; object-position: top; }
/* fade and rise: the old page leaves first and the new one comes in after, so the two are never seen mixed half and half */
html.vt-fade::view-transition-old(pg) { animation-name: vt-fade-out; animation-duration: .09s; animation-timing-function: ease-in; }
html.vt-fade::view-transition-new(pg) { animation-name: vt-fade-in; animation-duration: .16s; animation-delay: .09s; animation-timing-function: ease-out; }
html.vt-rise::view-transition-old(pg) { animation-name: vt-fade-out; animation-duration: .08s; animation-timing-function: ease-in; }
html.vt-rise::view-transition-new(pg) { animation-name: vt-rise-in; animation-duration: .2s; animation-delay: .08s; animation-timing-function: ease-out; }
@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-out-left { to { transform: translateX(-28%); filter: brightness(.9); } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-left { from { transform: translateX(-28%); filter: brightness(.9); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* a held section over a place it can't go (reorder.js): the pointer says no */
body.rb-dragging.rb-nope, body.rb-dragging.rb-nope * { cursor: not-allowed !important; }

.soft[data-act="rearrange"][aria-pressed="true"] { background: var(--ink); color: #fff; }   /* Rearrange is on */
.page-title .soft.fit, .topbar .soft.fit { min-height: 36px; font-size: 14px; padding: 0 14px; }   /* Home's Rearrange: as the run page's button */
.page-title .soft svg, .topbar .soft svg { width: 16px; height: 16px; }
/* Trainings' group chips (2026-10-30): a row over the discipline chips, the iPhone app's Runs chips */
.group-chips { margin-bottom: 10px; }
.group-chips .chip svg { width: 17px; height: 17px; }
.group-chips .icon-chip { padding: 0 12px; }
/* on a phone one row that scrolls sideways, as the iPhone app's, not three rows of chips */
@media (max-width: 1023px) {
  .group-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px -16px 6px; padding: 0 16px; }
  .group-chips::-webkit-scrollbar { display: none; }
  .group-chips .chip { flex: none; }
}