/* ============ Tokens ============ */
:root{
  --accent:#792F49; --accent-strong:#5f2238; --accent-tint:rgba(121,47,73,.09);
  --ink:#1c1c1e; --ink-2:#55555c; --ink-3:#6c6c74;
  --on-accent:#fff;   /* text on an accent-coloured fill */
  --brand-bg:#fbf7f9; --brand-fg:#792F49;   /* the logo tile */
  --bg-1:#f5f5f7; --bg-2:#f5f5f7;
  --glass:rgba(255,255,255,.82); --glass-strong:rgba(255,255,255,.94); --glass-thin:rgba(118,118,128,.06);
  --glass-edge:rgba(255,255,255,.9); --glass-edge-2:rgba(0,0,0,.05);
  --hairline:rgba(0,0,0,.08);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.14);
  --shadow-float:0 2px 6px rgba(0,0,0,.06),0 18px 40px -16px rgba(0,0,0,.25);
  --team-A:#C2415D; --team-B:#D9822B; --team-X:#23929E; --team-Y:#5B5BD6;
  --good:#1f9d63; --warn:#c7811a; --bad:#c43d3d;
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --blur:blur(26px) saturate(185%);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --accent:#e58aab; --accent-strong:#f0a3bf; --accent-tint:rgba(229,138,171,.14);
  --ink:#f5f5f7; --ink-2:#bdbdc4; --ink-3:#8b8b93;
  --on-accent:#1c1c1e;   /* dark text on the light pink accent (white was 2.4:1) */
  --brand-bg:#2a2a2e; --brand-fg:#e58aab;
  --bg-1:#0c0c0e; --bg-2:#0c0c0e;
  --glass:rgba(28,28,31,.9); --glass-strong:rgba(40,40,44,.95); --glass-thin:rgba(255,255,255,.055);
  --glass-edge:rgba(255,255,255,.07); --glass-edge-2:rgba(255,255,255,.07);
  --hairline:rgba(255,255,255,.1);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-float:0 2px 6px rgba(0,0,0,.4),0 20px 44px -16px rgba(0,0,0,.8);
  --team-A:#ef6f8b; --team-B:#f0a24f; --team-X:#4cc3cf; --team-Y:#8d8df2;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --accent:#e58aab; --accent-strong:#f0a3bf; --accent-tint:rgba(229,138,171,.14);
  --ink:#f5f5f7; --ink-2:#bdbdc4; --ink-3:#8b8b93;
  --on-accent:#1c1c1e;   /* dark text on the light pink accent (white was 2.4:1) */
  --brand-bg:#2a2a2e; --brand-fg:#e58aab;
  --bg-1:#0c0c0e; --bg-2:#0c0c0e;
  --glass:rgba(28,28,31,.9); --glass-strong:rgba(40,40,44,.95); --glass-thin:rgba(255,255,255,.055);
  --glass-edge:rgba(255,255,255,.07); --glass-edge-2:rgba(255,255,255,.07);
  --hairline:rgba(255,255,255,.1);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-float:0 2px 6px rgba(0,0,0,.4),0 20px 44px -16px rgba(0,0,0,.8);
  --team-A:#ef6f8b; --team-B:#f0a24f; --team-X:#4cc3cf; --team-Y:#8d8df2;
  color-scheme:dark;
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--bg-1);color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:10px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ============ Backdrop (vibrant field for glass to refract) ============ */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,var(--bg-1),var(--bg-2))}
.backdrop i{display:none;position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:drift 28s ease-in-out infinite alternate}
.backdrop i:nth-child(1){width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:var(--blob-1)}
.backdrop i:nth-child(2){width:40vmax;height:40vmax;right:-12vmax;top:10vh;background:var(--blob-2);animation-duration:34s}
.backdrop i:nth-child(3){width:46vmax;height:46vmax;left:10vw;bottom:-24vmax;background:var(--blob-3);animation-duration:40s}
.backdrop i:nth-child(4){width:30vmax;height:30vmax;right:8vw;bottom:6vh;background:var(--blob-4);opacity:.5;animation-duration:30s}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.backdrop i{animation:none}}

/* ============ Glass material ============ */
.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge-2);box-shadow:var(--shadow),inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px var(--glass-edge-2);border-radius:var(--r-lg)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.12));mix-blend-mode:soft-light;opacity:.5}
.glass-strong{background:var(--glass-strong)}
.glass-thin{background:var(--glass-thin)}

/* ============ Layout ============ */
.app{max-width:1080px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(104px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;gap:12px;padding:6px 2px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em}
.brand-mark{width:32px;height:32px;border-radius:10px;overflow:hidden;flex:none;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 3px 8px -3px rgba(60,20,35,.35)}
.brand-mark .brand-icon{display:block;width:100%;height:100%}
.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ink-3);margin-top:-2px}
.topbar .spacer{flex:1}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 4px 18px}
.page-title h1{font-size:30px;line-height:1.1;font-weight:750;letter-spacing:-.035em}
.page-title p{color:var(--ink-2);margin-top:4px;font-size:15px}
.grid{display:grid;gap:16px}
@media (min-width:900px){.grid-home{grid-template-columns:1.55fr 1fr;align-items:start}.stick{grid-column:2;grid-row:1}.feed-col{grid-column:1;grid-row:1}}

/* ============ Controls ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;transition:transform .15s,background .2s}
.btn:active{transform:scale(.95)}
.btn-primary:active{filter:brightness(.88)}
.btn-glass:active{filter:brightness(.94)}
/* Every tap gets an instant pressed look, so it's always clear a button registered. */
html{-webkit-tap-highlight-color:transparent}
.icon-btn,.act,.send,.segmented button,button.list-row,a.list-row,.chip-btn{transition:transform .12s,background .15s,opacity .15s,color .2s}
.icon-btn:active{transform:scale(.88);background:var(--accent-tint);color:var(--accent)}
.act:active{transform:scale(.93);background:var(--accent-tint)}
.send:active{transform:scale(.88)}
.segmented button:active{transform:scale(.95);opacity:.75}
button.list-row:active,a.list-row:active{background:var(--accent-tint);border-radius:14px}
button:disabled,.btn:disabled{cursor:default}
.btn:disabled:not(.is-busy){opacity:.55}
/* While a sheet is saving, its other buttons pause so nothing gets pressed twice. */
.sheet.is-saving .btn:not(.is-busy),.sheet.is-saving [data-close]{opacity:.45;pointer-events:none}
.btn.is-busy{cursor:progress;transform:none;filter:none;opacity:.92}
.btn.is-busy::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.shake{animation:shake .38s ease}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy::before{animation-duration:1.8s}.shake{animation:none}}
.btn-primary{color:#fff;background:linear-gradient(180deg,#8f3a58,var(--accent-strong));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px -6px rgba(121,47,73,.7)}
:root[data-theme="dark"] .btn-primary{background:linear-gradient(180deg,#b24d71,#7d2e4a)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{background:linear-gradient(180deg,#b24d71,#7d2e4a)}}
.btn-glass{background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 1px var(--hairline)}
.btn-plain{color:var(--accent);padding:0 10px}
.btn-danger{color:var(--bad)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
.theme-btn{background:var(--glass);box-shadow:var(--shadow),inset 0 0 0 1px var(--glass-edge-2);color:var(--ink)}
@media (hover:hover){.icon-btn:hover{background:var(--accent-tint);color:var(--accent)}}   /* phones: no tinted circle left behind after a tap */
.segmented{display:inline-flex;padding:3px;border-radius:999px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);position:relative}
.segmented button{position:relative;z-index:1;min-height:34px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);transition:color .2s}
.segmented button[aria-pressed="true"]{color:var(--ink);background:var(--glass-strong);box-shadow:0 2px 8px -2px rgba(0,0,0,.18),inset 0 1px 0 var(--glass-edge)}
.field{display:grid;gap:6px;margin-bottom:14px}
.field>span{font-size:13px;font-weight:600;color:var(--ink-2);padding-left:4px}
.input{width:100%;min-height:48px;padding:0 16px;border-radius:14px;border:0;background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--hairline),inset 0 1px 2px rgba(0,0,0,.04);font-size:16px}
textarea.input{padding:12px 16px;min-height:88px;resize:vertical}
.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.hint{font-size:13px;color:var(--ink-3);padding-left:4px}
.input:disabled{background:var(--glass-thin);color:var(--ink-3);-webkit-text-fill-color:var(--ink-3);opacity:1}
.owner-note{display:flex;gap:6px;align-items:flex-start;margin:0 0 12px}
.owner-note .i{width:14px;height:14px;flex:none;margin-top:2px}
.danger-zone .owner-note{margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink-2);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip-good{color:var(--good)} .chip-warn{color:var(--warn)} .chip-bad{color:var(--bad)} .chip-muted{color:var(--ink-3)}
.team-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px -2px rgba(0,0,0,.25)}
.avatar.lg{width:84px;height:84px;font-size:30px}
.avatar.sm{width:30px;height:30px;font-size:12px}

/* ============ Floating tab bar ============ */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(6px,calc(env(safe-area-inset-bottom) - 8px));z-index:30;display:flex;align-items:center;gap:6px;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tabs{display:flex;padding:5px;border-radius:999px;position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.05);backdrop-filter:blur(14px) saturate(190%) brightness(1.05);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.45),inset 0 0 14px rgba(255,255,255,.35),
    0 0 0 .5px rgba(0,0,0,.1),0 10px 28px -10px rgba(0,0,0,.3),0 2px 6px -2px rgba(0,0,0,.12)}
.tabs::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.14) 100%)}
.tabs::after{content:"";position:absolute;left:14%;right:14%;top:1px;height:1px;border-radius:9px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent)}
.tabs>*{position:relative;z-index:1}
:root[data-theme="dark"] .tabs{background:linear-gradient(180deg,rgba(78,78,86,.42),rgba(34,34,38,.36));border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(255,255,255,.06),inset 0 0 14px rgba(255,255,255,.05),0 0 0 .5px rgba(0,0,0,.6),0 12px 30px -10px rgba(0,0,0,.8)}
:root[data-theme="dark"] .tabs::before{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 100%)}
:root[data-theme="dark"] .tabs::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabs{background:linear-gradient(180deg,rgba(78,78,86,.42),rgba(34,34,38,.36));border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(255,255,255,.06),inset 0 0 14px rgba(255,255,255,.05),0 0 0 .5px rgba(0,0,0,.6),0 12px 30px -10px rgba(0,0,0,.8)}
 :root:not([data-theme="light"]) .tabs::before{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 100%)}
 :root:not([data-theme="light"]) .tabs::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}}
.tabs a{position:relative;z-index:2!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:68px;height:54px;border-radius:999px;font-size:11px;font-weight:600;color:var(--ink-2);-webkit-user-drag:none;will-change:opacity}
.tabs a svg,.lc svg{width:22px;height:22px}
/* The highlight: a resting pill that lifts into a lens while pressed or moving (app.js moves it).
   Fill + tinted icons are clipped to the lens shape; the rim, colour fringe and shadow sit on top. */
.lens{position:absolute!important;left:0;top:0;z-index:3!important;pointer-events:none;transition:opacity .2s}
.lens-glass,.lens-view{position:absolute;left:0;border-radius:999px;will-change:transform}
.lens-glass i,.lens-view i{position:absolute;inset:0;border-radius:inherit;will-change:opacity}
.lens-view{overflow:hidden}
.fill-rest{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.8))}
.rim-rest{box-shadow:inset 0 1px 1px rgba(255,255,255,1),inset 0 -1px 2px rgba(121,47,73,.08),0 0 0 .5px rgba(0,0,0,.08),0 4px 12px -4px rgba(0,0,0,.22)}
.fill-lift{opacity:0;background:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.98),rgba(247,247,250,.93) 60%,rgba(238,238,243,.92))}
.rim-lift{opacity:0;background:radial-gradient(38% 26% at 30% 13%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 2px 1px rgba(255,255,255,1),inset 0 -2px 2px rgba(255,255,255,.85),
  inset 9px 0 10px -6px rgba(255,60,170,.5),inset -9px 0 10px -6px rgba(0,160,255,.55),
  inset 0 11px 12px -11px rgba(110,110,135,.22),inset 0 -13px 13px -12px rgba(110,110,135,.28),
  inset 0 0 0 .5px rgba(0,0,0,.12),0 12px 26px -8px rgba(0,0,0,.34),0 2px 5px -2px rgba(0,0,0,.14)}
.lens-copy{position:absolute;left:0;width:1px;height:1px;transform-origin:0 0;will-change:transform}
.lc{position:absolute;transform:scale(1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}
.fab{align-self:center;margin:0 3px 0 6px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#9b4063,#6d2842);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px -4px rgba(121,47,73,.6);transition:transform .15s}
.fab{position:relative;overflow:hidden;z-index:2!important}.fab::after{content:"";position:absolute;inset:1px 3px 50% 3px;border-radius:40px 40px 20px 20px;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
:root[data-theme="dark"] .fill-rest{background:linear-gradient(180deg,rgba(92,92,100,.72),rgba(64,64,70,.66))}
:root[data-theme="dark"] .rim-rest{box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 0 0 .5px rgba(255,255,255,.08),0 4px 12px -4px rgba(0,0,0,.5)}
:root[data-theme="dark"] .fill-lift{background:radial-gradient(130% 100% at 50% 0%,rgba(96,96,106,.96),rgba(52,52,58,.94) 62%,rgba(44,44,50,.94))}
:root[data-theme="dark"] .rim-lift{background:radial-gradient(38% 26% at 30% 13%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 2px 1px rgba(255,255,255,.62),inset 0 -2px 2px rgba(255,255,255,.24),inset 9px 0 10px -6px rgba(255,60,170,.68),inset -9px 0 10px -6px rgba(0,160,255,.68),inset 0 11px 12px -11px rgba(0,0,0,.35),inset 0 -13px 13px -12px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.16),0 12px 28px -8px rgba(0,0,0,.72)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fill-rest{background:linear-gradient(180deg,rgba(92,92,100,.72),rgba(64,64,70,.66))}
 :root:not([data-theme="light"]) .rim-rest{box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 0 0 .5px rgba(255,255,255,.08),0 4px 12px -4px rgba(0,0,0,.5)}
 :root:not([data-theme="light"]) .fill-lift{background:radial-gradient(130% 100% at 50% 0%,rgba(96,96,106,.96),rgba(52,52,58,.94) 62%,rgba(44,44,50,.94))}
 :root:not([data-theme="light"]) .rim-lift{background:radial-gradient(38% 26% at 30% 13%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 2px 1px rgba(255,255,255,.62),inset 0 -2px 2px rgba(255,255,255,.24),inset 9px 0 10px -6px rgba(255,60,170,.68),inset -9px 0 10px -6px rgba(0,160,255,.68),inset 0 11px 12px -11px rgba(0,0,0,.35),inset 0 -13px 13px -12px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.16),0 12px 28px -8px rgba(0,0,0,.72)}}
.fab:active{transform:scale(.94)}
.fab svg{width:22px;height:22px;stroke-width:2.4}
@media (max-width:420px){.tabs a{min-width:60px}}

/* ============ Cards ============ */
.card{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h2{font-size:17px;font-weight:700;letter-spacing:-.02em}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.divider{height:1px;background:var(--hairline);margin:14px 0}

/* Hero */
.hero{padding:22px;overflow:hidden;border-radius:var(--r-xl)}
.hero .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.hero h2{font-size:26px;font-weight:750;letter-spacing:-.03em;margin:6px 0 14px}
.timeline{margin-top:18px}
.hero h2+.timeline{margin-top:8px}
.progress{position:relative;height:10px;border-radius:99px;background:var(--hairline)}
.progress .fill{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:inherit;background:linear-gradient(90deg,#b24d71,var(--accent));min-width:0}
.progress .tick{position:absolute;top:2px;bottom:2px;width:1.5px;margin-left:-.75px;background:var(--glass-strong);opacity:.9;z-index:1;border-radius:1px}
.progress .now{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--glass-strong);box-shadow:0 0 0 3px var(--accent),0 2px 6px rgba(0,0,0,.25);z-index:2}
.hero-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-3);margin-top:8px;font-weight:600}
.hero-foot strong{color:var(--ink-2)}
.hero-foot .mid{color:var(--accent)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:14px 8px;text-align:center;border-radius:var(--r-md);background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.stat span{font-size:12px;font-weight:600;color:var(--ink-3)}
.stat strong{display:block;font-size:24px;font-weight:750;letter-spacing:-.03em;margin-top:2px}
.stat small{font-size:13px;color:var(--ink-3);font-weight:600}

/* Team standings */
.standing{display:grid;grid-template-columns:14px auto minmax(24px,1fr) auto;align-items:center;gap:10px;padding:6px 0;font-size:14px}
.standing>.faint{font-weight:700;font-size:13px}
.st-name{display:flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.standing .bar{margin-top:0;height:5px}
.standing strong{font-size:14px}
.standings-card .card-head{margin-bottom:6px}
.standing+.standing{border-top:1px solid var(--hairline)}
.bar{height:6px;border-radius:99px;background:var(--hairline);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit}

/* Feed */
.composer{display:flex;gap:10px;align-items:flex-end;padding:10px 10px 10px 12px;border-radius:30px;margin-bottom:14px}   /* pill at one line, rounded box when it grows */
.composer>.avatar,.composer>.send{flex:none;margin-bottom:5px}
.composer>.send{margin-bottom:0}
.composer textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;overflow-y:hidden;font:inherit;font-size:16px;line-height:22px;padding:9px 0;min-height:40px;color:inherit}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--ink-3)}
.send{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent);background:var(--accent)}
.send:disabled{opacity:.35}
.feed{display:grid;gap:12px}
.post{padding:16px}
.post-head{display:flex;gap:12px;align-items:center}
.post-head strong{font-size:15px;display:block}
.post-head>div>span{font-size:13px;color:var(--ink-3)}
.post-body{margin:12px 0 4px;font-size:15.5px;white-space:pre-wrap}
.run-body{display:flex;align-items:center;gap:14px;margin:12px 0 4px;padding:14px;border-radius:var(--r-md);background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.run-body .km{font-size:30px;font-weight:750;letter-spacing:-.035em;line-height:1}
.run-body .km small{font-size:15px;font-weight:600;color:var(--ink-3);margin-left:3px}
.run-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff}
.post-actions{display:flex;align-items:center;gap:4px;margin-top:8px;margin-left:-8px}
.act{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2)}
@media (hover:hover){.act:hover{background:var(--accent-tint)}}   /* phones: no tinted pill left behind after a tap */
.act.liked{color:#e0245e}
.act.liked svg{fill:#e0245e;stroke:#e0245e}
.act.pop svg{animation:like-pop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes like-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.act:disabled{opacity:.45}
.post.sending,.post-head.sending{opacity:.6;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){.act.pop svg{animation:none}}
.likers-link{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 8px 0 4px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
@media (hover:hover){.likers-link:hover{background:var(--accent-tint)}}
.faces{display:inline-flex}
.faces .avatar{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px var(--glass-strong),inset 0 1px 0 rgba(255,255,255,.35)}
.faces .avatar+.avatar{margin-left:-6px}
.faces .avatar:nth-child(1){z-index:3}.faces .avatar:nth-child(2){z-index:2}.faces .avatar:nth-child(3){z-index:1}
.replies{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}   /* the column may shrink: a reply box never widens the card */
.post-head.reply{align-items:flex-start;gap:8px}
.post-head.reply>.avatar{margin-top:3px}
.bubble{flex:1;min-width:0;padding:7px 12px 8px;border-radius:18px;border-top-left-radius:6px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.bubble>div{margin-top:1px;line-height:1.4}
.replies>.post-head{align-items:flex-start}   /* avatar and ⋯ stay at the top of a long reply */
.more-replies{justify-self:start;padding:2px 0;font-size:13.5px;font-weight:600;color:var(--ink-3)}
@media (hover:hover){.more-replies:hover{color:var(--accent);text-decoration:underline}}

/* Rankings */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.weekpick{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.weekpick button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.weekpick button:disabled{opacity:.3}
.weekpick span{min-width:128px;text-align:center;font-size:14px;font-weight:600}
.rank-list{display:grid}
.rank-row{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 4px}
.rank-row+.rank-row{border-top:1px solid var(--hairline)}
.rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--ink-2);background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.rank.gold{background:linear-gradient(145deg,#ffe08a,#e2a93b);color:#5a3b00;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.rank.silver{background:linear-gradient(145deg,#f1f1f4,#b9bcc6);color:#3b3d45;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.rank.bronze{background:linear-gradient(145deg,#f3c3a0,#c47c4a);color:#4a230a;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rank-name{font-weight:600}
.rank-sub{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.rank-val{text-align:right}
.rank-val strong{font-size:18px;font-weight:700;letter-spacing:-.02em}
.rank-val small{font-size:13px;color:var(--ink-3);margin-left:3px}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;margin-bottom:16px}
.pod{padding:14px 10px 12px;text-align:center;border-radius:var(--r-lg)}
.pod .avatar{margin:0 auto 8px}
.pod strong{display:block;font-size:14px}
.pod .v{font-size:20px;font-weight:750;letter-spacing:-.03em}
.pod.first{padding-top:22px}

/* Teams */
.teams{display:grid;gap:16px}
@media (min-width:760px){.teams{grid-template-columns:1fr 1fr}}
.team-card{padding:0;overflow:hidden}
.team-top{padding:18px 18px 14px;position:relative}
.team-top::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--tc),transparent 75%);opacity:.22;pointer-events:none}
.team-top h2{font-size:20px;font-weight:750;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.team-top p{font-size:13px;color:var(--ink-2);margin-top:4px}
.team-kpis{display:flex;gap:18px;margin-top:12px}
.team-kpis div span{font-size:12px;color:var(--ink-3);font-weight:600;display:block}
.team-kpis div strong{font-size:20px;font-weight:750;letter-spacing:-.02em}
.member{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:11px 18px;border-top:1px solid var(--hairline)}
.member .t{font-size:14px;color:var(--ink-2);text-align:right}
.member .t small{display:block;font-size:11px;color:var(--ink-3)}

/* Awards */
.award{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:16px}
.award-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#e7b45a,#b9772a);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.award-icon.special{background:linear-gradient(145deg,#a58af0,#6a4fd0)}
.award h3{font-size:16px;font-weight:700}
.award p{font-size:14px;color:var(--ink-2);margin-top:2px}
.award .winners{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.slots{display:grid;gap:6px;margin-top:10px}.slots.multi{grid-template-columns:1fr 1fr}.slot{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);font-size:13.5px;min-width:0}.slot-label{color:var(--ink-3);font-weight:600;white-space:nowrap}.slot-name{margin-left:auto;font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot-name.tba{font-weight:500;color:var(--ink-3);font-style:italic}@media (max-width:480px){.slots.multi{grid-template-columns:1fr}}
.section-label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:22px 4px 10px}

/* Sheets (modals) */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(20,10,15,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{background:color-mix(in srgb,var(--bg-1) 82%,transparent)!important;-webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%);width:100%;max-width:520px;max-height:92svh;overflow:auto;border-radius:30px 30px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));animation:up .32s cubic-bezier(.2,.9,.3,1.05)}
.grabber{width:40px;height:5px;border-radius:9px;background:var(--hairline);margin:0 auto 12px;background:rgba(128,128,128,.35)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet-head h2{font-size:20px;font-weight:750;letter-spacing:-.03em}
.sheet-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
/* Sheet buttons stay pinned to the bottom, so Approve/Save is always in reach even with tall screenshots. */
.sheet-foot{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));z-index:2;margin:8px -20px calc(-24px - env(safe-area-inset-bottom));padding:12px 20px calc(24px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg-1) 90%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 -1px 0 var(--hairline)}
/* Phones: forms open as their own full page (see sheet() in app.js). Nothing is pinned to the screen here on purpose:
   iPhones (especially iOS 26) misplace pinned elements when the keyboard opens, while a normal scrolling page always works. */
@media (max-width:639px){
  html.sheet-page #root{display:none}
  html.sheet-page .scrim{position:static;display:block;height:auto;min-height:100svh;background:var(--bg-1);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  html.sheet-page .sheet{max-width:none;max-height:none;min-height:100svh;overflow:visible;border-radius:0;box-shadow:none!important;background:var(--bg-1)!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding:calc(10px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));animation:page-in .25s ease-out}
  html.sheet-page .grabber{display:none}
  html.sheet-page .sheet-head{position:static;margin:0 -8px 16px 0}
  html.sheet-page .sheet-foot{position:static;margin:20px 0 0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0}
  html.sheet-page .sheet-foot .btn{flex:1;min-height:50px}
  html.sheet-page .shots img,html.sheet-page .shot-img{max-height:44svh;object-fit:contain}
}
@keyframes page-in{from{transform:translateY(16px);opacity:0}}
@media (min-width:640px){.sheet-foot{bottom:-22px;margin-bottom:-22px;padding-bottom:22px;border-radius:0 0 30px 30px}}
@media (min-width:640px){.scrim{align-items:center}.sheet{border-radius:30px;padding-bottom:22px}.grabber{display:none}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}
.drop{display:grid;place-items:center;gap:4px;padding:22px;border-radius:var(--r-md);border:1.5px dashed var(--hairline);background:var(--glass-thin);text-align:center;cursor:pointer;color:var(--ink-2)}
.drop strong{color:var(--ink)}
.datebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.datebtn{display:flex;align-items:center;gap:10px;flex:1;min-width:170px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--hairline);font-weight:600;font-size:15px}.datebtn svg{color:var(--accent)}.chip.quick{height:36px;padding:0 14px;cursor:pointer;font-size:13.5px}.chip.quick.on{background:var(--accent);color:#fff;box-shadow:none}.calpop{margin-top:8px;padding:8px 10px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hairline);max-width:300px}.calpop .icon-btn{width:34px;height:34px}.calpop strong{font-size:14px}
.drop{position:relative}.drop.has{border-style:solid;border-color:var(--good);color:var(--good)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:14px}
.cal b{font-size:11px;color:var(--ink-3);font-weight:600;padding:4px 0}
.cal button{height:30px;width:30px;margin:0 auto;border-radius:50%;font-weight:500;font-size:13px}
.cal button:disabled{opacity:.25}
.cal button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:700}
.cal button.today{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* Admin tables */
.list-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 4px}
.list-row+.list-row{border-top:1px solid var(--hairline)}
.list-row .sub{font-size:13px;color:var(--ink-3);overflow-wrap:anywhere}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){.list-row{grid-template-columns:auto 1fr}.row-actions{grid-column:1/-1;justify-content:flex-start;padding-left:52px}}
.review-shot{border-radius:var(--r-md);aspect-ratio:9/12;max-height:320px;width:100%;background:linear-gradient(160deg,#fc5c2c,#f7a33b);display:grid;place-items:center;color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
.review-shot .fake{text-align:center}
.review-shot .fake strong{font-size:44px;font-weight:800;letter-spacing:-.04em;display:block}

/* Login */
.login{min-height:100svh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:100%;max-width:400px;padding:28px 24px;border-radius:32px}
.login-card .brand{justify-content:center;flex-direction:column;text-align:center;gap:12px;margin-bottom:22px}
.login-card .brand-mark{width:60px;height:60px;border-radius:14px}
.login-card h1{font-size:26px;font-weight:750;letter-spacing:-.03em;text-align:center}
.login-card .lead{color:var(--ink-2);text-align:center;font-size:15px;margin:6px 0 22px}
.login-card .btn{width:100%;min-height:50px}
.note{padding:12px 14px;border-radius:var(--r-sm);background:var(--accent-tint);color:var(--ink);font-size:14px;margin-bottom:14px}
.err{color:var(--bad);font-size:14px;min-height:20px;margin:-4px 0 8px 4px}
.strength{display:flex;gap:4px;margin:-6px 4px 12px}
.strength i{flex:1;height:4px;border-radius:9px;background:var(--hairline)}
.strength i.on{background:var(--good)}

/* Toast + proto bar */
.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translate(-50%,-200%);visibility:hidden;z-index:60;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;transition:transform .35s cubic-bezier(.2,.9,.3,1.2);display:flex;gap:8px;align-items:center}
.toast.show{transform:translate(-50%,0);visibility:visible}
.empty{padding:28px;text-align:center;color:var(--ink-3)}

.boot{min-height:100svh;display:grid;place-items:center}
/* Photos always fill a perfect circle, whatever shape the original picture is. */
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:50%}
/* Circular crop for profile photos */
.crop-stage{position:relative;width:min(100%,320px);aspect-ratio:1;margin:4px auto 16px;overflow:hidden;border-radius:26px;background:#1c1c1e;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform;pointer-events:none;-webkit-user-drag:none}
.crop-ring{position:absolute;inset:0;box-sizing:border-box;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 999px rgba(0,0,0,.55);pointer-events:none}
.crop-zoom{display:flex;align-items:center;gap:12px;max-width:320px;margin:0 auto;color:var(--ink-3)}
.crop-zoom input{flex:1;accent-color:var(--accent);min-height:32px}
.crop-zoom svg{width:16px;height:16px}.crop-zoom svg:last-child{width:22px;height:22px}
.shot-img{width:100%;max-height:360px;object-fit:contain;border-radius:var(--r-md);background:var(--glass-thin);margin-bottom:14px;display:block}
.drop img{max-height:140px;border-radius:10px}
.more{display:flex;justify-content:center;margin-top:14px}
/* ⋯ menu on posts and replies (Delete lives inside it) */
.pm-wrap{position:relative;margin-left:auto;flex:none;align-self:flex-start}
.pm-btn{width:36px;height:36px;color:var(--ink-3);transition:background .15s,color .15s}
.pm-btn.sm{width:32px;height:32px}
.pm-btn[aria-expanded=true]{background:var(--glass-thin);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline)}
.pm-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:184px;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--bg-1) 90%,transparent);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 14px 34px rgba(0,0,0,.16),inset 0 0 0 1px var(--hairline);transform-origin:top right;animation:pm-in .16s ease-out}
.pm-menu[hidden]{display:none}
.pm-item{width:100%;justify-content:flex-start;gap:10px;min-height:44px;padding:0 12px;border-radius:11px}
.pm-item:hover,.pm-item:active{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pm-item svg{width:18px;height:18px}
.post.pm-open{z-index:5}
@keyframes pm-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pm-menu{animation:none}}
.refresh{margin-left:auto}

.brand{min-width:0}.brand>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:430px){.topbar{gap:8px}}

/* Teams: race results */
.member{grid-template-columns:auto 1fr auto}
.member.with-edit{grid-template-columns:auto 1fr auto auto}
.member.with-race{grid-template-columns:auto 1fr 84px 96px}
.member.with-race.with-edit{grid-template-columns:auto 1fr 84px 96px auto}
.member-head{font-size:12px;font-weight:600;color:var(--ink-3);padding-top:8px;padding-bottom:8px;grid-template-columns:auto 1fr 84px 96px}
.member-head span:first-child{width:30px}
.member .race strong{font-size:16px;color:var(--ink)}
/* Awards: bigger, multi-winner, prizes */
.award{display:block;padding:18px}
.award-top{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.award-icon{width:52px;height:52px}
.award h3{font-size:19px;font-weight:750;letter-spacing:-.02em}
.award p{font-size:15px}
.prize-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.prize{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap;max-width:100%}
.prize.gift,.prize.voucher{white-space:normal;border-radius:14px}
.prize.big{font-size:15px;padding:8px 14px}
.prize.cash{background:rgba(31,157,99,.12);color:var(--good)}
.prize.gift{background:rgba(199,129,26,.13);color:var(--warn)}
.prize.voucher{background:rgba(91,91,214,.12);color:var(--team-Y)}
.winners-list{margin-top:14px;display:grid;gap:8px}
.winner-group{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.winner{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.winner .avatar{width:44px;height:44px;font-size:16px}
.winner-main strong{display:block;font-size:17px;font-weight:700}
.winner-main span{font-size:13px;color:var(--ink-3)}
.winner-prizes{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.winner.tba{display:block;color:var(--ink-3);font-style:italic;font-size:14px}
@media (max-width:420px){.winner{grid-template-columns:auto 1fr}.winner-prizes{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start}}
/* Award editor */
.prize-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.with-icon{position:relative;display:block}.with-icon em{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;pointer-events:none}
.with-icon .input{padding-left:38px}
.winner-rows{display:grid;gap:8px}
.winner-edit{display:grid;gap:8px;padding:10px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.winner-edit-top{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.add-winner{justify-self:start;padding-left:4px}
@media (max-width:420px){.prize-inputs{grid-template-columns:1fr}}
.member-head.with-edit{grid-template-columns:auto 1fr 84px 96px 36px}

.post.just-added{animation:justAdded 2.4s ease-out}
@keyframes justAdded{0%,40%{box-shadow:var(--shadow),0 0 0 3px var(--accent)}100%{box-shadow:var(--shadow),0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.post.just-added{animation:none;box-shadow:var(--shadow),0 0 0 2px var(--accent)}}

/* Screenshots: several per run */
.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.shot-tile{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.shot-tile img{width:100%;height:100%;object-fit:cover;display:block}
.shot-remove{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff}
.drop.drop-small{aspect-ratio:3/4;padding:8px;gap:2px;font-size:13px}
.shots.many{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-bottom:14px;padding-bottom:4px}
.shots.many a{flex:0 0 78%;scroll-snap-align:start}
.shots.many .shot-img{margin-bottom:0;height:320px}
/* Page titles: large on phones (app style), calmer on wider screens so they don't overpower the brand */
.brand{font-size:17px}
@media (min-width:720px){
  .page-title h1{font-size:26px;letter-spacing:-.025em}
  .page-title p{font-size:14.5px}
  .brand{font-size:18px}
  .brand-mark{width:36px;height:36px;border-radius:11px}
  .topbar{margin-bottom:18px}
}

/* Practice mode banner + Start fresh */
.practice-banner{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:-4px 0 16px;border-radius:14px;background:rgba(199,129,26,.12);color:var(--ink);font-size:13.5px;line-height:1.4}
.practice-banner svg{color:var(--warn);width:18px;height:18px;margin-top:1px}
.danger-zone{margin-top:22px}
.check-list{display:grid;gap:6px;max-height:220px;overflow:auto;padding:2px}
.check-row{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);font-weight:600;font-size:14.5px;cursor:pointer}
.check-row input{width:18px;height:18px;accent-color:var(--bad)}
.check-row small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3)}

/* ============ Race route map ============ */
:root{--map-land:#e8e6ea;--map-road:#ffffff;--map-coast:#9fd3e0;--map-label:#8a8390;--map-park:#cfe7d3;--map-track:#e8a18c;--water:#2b8fd6;--water-bg:#e3f1fb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--map-land:#211f24;--map-road:#35323a;--map-coast:#1f4f5c;--map-label:#8b8591;--map-park:#1d3326;--map-track:#8f4f3f;--water:#5cb3f0;--water-bg:#17334a}}
:root[data-theme="dark"]{--map-land:#211f24;--map-road:#35323a;--map-coast:#1f4f5c;--map-label:#8b8591;--map-park:#1d3326;--map-track:#8f4f3f;--water:#5cb3f0;--water-bg:#17334a}
.route-map{display:block;width:100%;height:auto;overflow:visible}
.rm-land{fill:var(--map-land);stroke:var(--map-coast);stroke-width:3}
.rm-roads path,.rm-roads circle{stroke:var(--map-road);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;fill:none}
.rm-park,.rm-green{fill:var(--map-park)}
.rm-green.track{stroke:var(--map-track);stroke-width:5}

.rm-casing{fill:none;stroke:var(--map-road);stroke-width:17;stroke-linecap:round;stroke-linejoin:round}
.rm-route{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.rm-chevrons path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.rm-runner{fill:#fff;stroke:var(--accent);stroke-width:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.rm-tap{cursor:pointer;outline:none}
.rm-tap:focus-visible circle,.rm-tap:focus-visible rect{stroke:var(--ink);stroke-width:3}
.rm-water circle{fill:var(--water-bg);stroke:var(--water);stroke-width:2.5}
.rm-water path{fill:var(--water)}
.rm-uturn circle{fill:var(--glass-strong);stroke:var(--accent);stroke-width:2.5}
.rm-uturn path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rm-km rect{fill:var(--ink);opacity:.88}
.rm-km text{font:800 11.5px -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;fill:var(--bg-1);text-anchor:middle;letter-spacing:.02em}
.rm-start circle{fill:var(--good);stroke:#fff;stroke-width:3.5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.rm-start path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rm-start-label text{font:800 14px -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:.05em;fill:var(--ink);paint-order:stroke;stroke:var(--map-land);stroke-width:5px}
.rm-start-label.below text{text-anchor:middle}
.rm-tap.on circle,.rm-tap.on rect{stroke:var(--ink);stroke-width:3}
@media (prefers-reduced-motion:reduce){.rm-runner,.rmm-runner{display:none}}
.map-frame{position:relative;overflow:auto;border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.map-frame .route-map{transition:width .25s}
.rm-tip{position:absolute;z-index:5;max-width:240px;padding:8px 12px;border-radius:12px;background:var(--ink);color:var(--bg-1);font-size:13px;font-weight:600;line-height:1.3;pointer-events:none;box-shadow:var(--shadow-float)}
.map-tools{position:absolute;top:10px;right:10px;z-index:4;display:flex;flex-direction:column;gap:6px}
.map-tools button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--glass-strong);box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline);color:var(--ink);font-size:18px;font-weight:600}
.route-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.route-facts .chip{height:32px;padding:0 12px;font-size:13.5px}
.route-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13px;color:var(--ink-2);align-items:center}
.route-legend span{display:inline-flex;align-items:center;gap:7px}
.lg-line{width:22px;height:5px;border-radius:9px;background:var(--accent)}
.lg-dot{width:14px;height:14px;border-radius:50%}
.lg-km{height:16px;padding:0 6px;border-radius:8px;background:var(--ink);color:var(--bg-1);font-size:10px;font-weight:800;display:inline-grid;place-items:center}
.rotate-note{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);margin:0 2px 10px}
.rmm-casing{fill:none;stroke:var(--glass-strong);stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.rmm-route{fill:none;stroke:var(--accent);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.rmm-start{fill:var(--good);stroke:#fff;stroke-width:8}
.rmm-runner{fill:#fff;stroke:var(--accent);stroke-width:8}
.course-meta strong{display:block;font-size:14.5px}
.course-meta span{font-size:12.5px;color:var(--ink-3);font-weight:600}

/* Home: compact race-route row inside the race-day card */
.course-row{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;width:100%;margin-top:16px;padding:10px 12px 10px 14px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);text-align:left;color:var(--ink);transition:background .2s}
.course-row:hover{background:var(--accent-tint)}
.course-row>svg{color:var(--ink-3)}
.course-thumb{display:flex;align-items:center;justify-content:center;height:46px;padding:3px 2px}
.course-thumb .route-mini{display:block;width:100%;height:100%}
.route-mini.intro .rmm-base{opacity:.28}
.route-mini .rmm-draw{stroke-linecap:round}
.course-meta strong{display:block;font-size:14.5px;font-weight:700}
.course-meta span{font-size:12.5px;color:var(--ink-3);font-weight:600}
.back-link{margin:0 0 4px -10px}
.back-link svg{width:18px;height:18px}

.hero-foot>span:last-child{text-align:right}
.hero-foot .mid{text-align:center}
/* Page switching (see go() in app.js): a quick cross-fade of the page; the menu bar stays put while its highlight slides. */
#main{scroll-margin-top:calc(env(safe-area-inset-top) + 10px)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.2,0,0,1)}
.tabbar{view-transition-name:tabbar}
::view-transition-group(tabbar),::view-transition-new(tabbar){animation:none}
::view-transition-old(tabbar){display:none}
/* On phones every page is at least a screen tall, so a new page can open part-way down (keeping Safari's bar tucked away) even when it's short. */
@media (hover:none){#main{min-height:100lvh}}
/* Reload and other round buttons spin while working */
.icon-btn.is-busy{background:var(--accent-tint);color:var(--accent)}
.icon-btn.is-busy svg{animation:btn-spin .8s linear infinite}
/* Home refresh: just the arrow, no circle behind it. It turns smoothly while loading (see data-reload in app.js). */
.refresh-btn,.refresh-btn:hover,.refresh-btn:active,.refresh-btn.is-busy{background:none!important}
.refresh-btn:active{transform:scale(.9);color:var(--ink-2)}
.refresh-btn.is-busy{color:var(--accent)}
.refresh-btn.is-busy svg{animation:btn-spin .9s linear infinite;animation-delay:var(--spin-from,0ms)}
/* Pull to refresh (home-screen app): a round arrow that follows the finger down from the top */
.ptr{position:fixed;left:50%;top:env(safe-area-inset-top,0px);z-index:70;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  color:var(--ink-3);background:var(--glass-strong);box-shadow:0 0 0 .5px var(--hairline),0 6px 18px -6px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  opacity:0;transform:translate(-50%,-52px);transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s,color .15s}
.ptr svg{width:19px;height:19px;stroke-width:2.3}
.ptr.dragging{transition:color .15s}
.ptr.ready,.ptr.busy{color:var(--accent)}
.ptr.busy{opacity:1}
.ptr.busy svg{animation:btn-spin .9s linear infinite}
/* File pickers stay tappable on every phone (a truly hidden one can be ignored by iPhones) */
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
label:has(.file-hidden){position:relative}
.title-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.today-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.today-chip svg{width:15px;height:15px;color:var(--accent)}
@media (max-width:380px){.today-chip>span{font-size:12px}.today-chip{padding:0 10px}}
/* Profile settings rows keep the arrow on the same line on phones */
.list-row.settings-row{grid-template-columns:auto 1fr auto}
.settings-row>svg{color:var(--ink-3)}

/* Log a run: gentle date picker */
.day-strip{display:flex;gap:6px;padding:2px 0}
.day-chip{flex:1 1 0;min-width:0;height:54px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink);transition:background .15s,transform .15s}
.day-chip:active{transform:scale(.96)}
.day-chip small{font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.day-chip strong{font-size:17px;font-weight:700;line-height:1.1}
.day-chip[aria-pressed="true"]{background:var(--accent);box-shadow:none}
.day-chip[aria-pressed="true"] small,.day-chip[aria-pressed="true"] strong,.day-chip[aria-pressed="true"] svg{color:var(--on-accent)}
.day-chip.other{flex:1.25 1 0}
.day-chip.other svg{width:18px;height:18px;color:var(--accent)}
.date-picked{font-size:13px;color:var(--ink-3);font-weight:600;margin:6px 4px 0}
.calpop{margin-top:8px;padding:6px 8px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hairline);max-width:300px;animation:calIn .2s ease-out}
.calpop .icon-btn{width:30px;height:30px}
.calpop strong{font-size:13.5px}
.calpop .cal{gap:2px}
.calpop .cal b{font-size:10px;padding:2px 0}
@keyframes calIn{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.calpop{animation:none}}

/* Home date: chip beside refresh on wider screens, inline in the subtitle on phones */
.today-inline{display:none}
@media (max-width:520px){.today-chip{display:none}.today-inline{display:inline;color:var(--accent);font-weight:600}}
/* Teams: tidy columns on phones once race times appear */
.member .runner-nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){
  .member{gap:10px;padding-left:14px;padding-right:14px}
  .member.with-race,.member-head{grid-template-columns:30px minmax(0,1fr) 58px 62px}
  .member.with-race.with-edit,.member-head.with-edit{grid-template-columns:30px minmax(0,1fr) 58px 62px 32px}
  .member .icon-btn{width:32px!important;height:32px!important}
}
.member-head span{white-space:nowrap}
.member-head .t{font-size:inherit;color:inherit}   /* column headings stay small, so "Benchmark" fits its column */
@media (max-width:520px){.member-head{font-size:11.5px}.member.with-race,.member-head{grid-template-columns:30px minmax(0,1fr) 58px 66px}.member.with-race.with-edit,.member-head.with-edit{grid-template-columns:30px minmax(0,1fr) 58px 66px 32px}}

/* On/off switch (Profile → Admin tools), iPhone style */
.switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;border-radius:999px;background:rgba(120,120,128,.2);cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .25s cubic-bezier(.3,1.3,.5,1)}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root[data-theme="dark"] .switch:not(:checked){background:rgba(120,120,128,.36)}
label.settings-row{cursor:pointer}

/* Race day banner (Home, 20 November only): replaces the countdown */
.raceday-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:20px 20px 20px 22px;border-radius:22px;color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),linear-gradient(135deg,#b4577a 0%,#792F49 55%,#4a1729 100%);
  box-shadow:0 12px 28px -12px rgba(90,25,50,.65),inset 0 1px 0 rgba(255,255,255,.3);animation:rd-in .6s cubic-bezier(.2,.9,.3,1.1) both}
.raceday-banner::after{content:"";position:absolute;top:0;right:0;bottom:0;width:46px;opacity:.16;
  background:repeating-conic-gradient(#fff 0 25%,transparent 0 50%) 0 0/16px 16px;-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
.rd-text{position:relative;z-index:1;flex:1;min-width:0}
.rd-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.raceday-banner h2{margin:4px 0 6px;font-size:30px;line-height:1.05;letter-spacing:-.035em;color:#fff}
.raceday-banner p{margin:0;font-size:14px;line-height:1.4;opacity:.92}
.rd-flag{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.rd-flag svg{width:28px;height:28px;stroke:#fff;stroke-width:2}
@keyframes rd-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.raceday-banner{animation:none}}

/* Home-screen app on iPhone (iOS 26): the page runs under the clock, and iOS softly blurs the top of the screen
   a little way below it. Leave extra room so the header, form titles and messages sit below that blur. */
.home-app .app{padding-top:calc(env(safe-area-inset-top) + 30px)}
.home-app .toast{top:calc(env(safe-area-inset-top) + 26px)}
@media (max-width:639px){.home-app.sheet-page .sheet{padding-top:calc(env(safe-area-inset-top) + 28px)}}

/* Profile picture in the header: no shadow and no tinted circle when tapped, just a small press */
.profile-btn{width:auto;height:auto;padding:2px}
.profile-btn,.profile-btn:hover,.profile-btn:active{background:none!important}
.profile-btn:active{transform:scale(.92)}
.profile-btn .avatar{box-shadow:0 0 0 .5px var(--hairline)}

/* Reply box under a post: a slim pill, not the full-size "Share an update" box.
   The text stays 16px so iPhones don't zoom in when you tap it. */
.reply-box{margin:0;padding:3px 3px 3px 14px;gap:6px;border-radius:999px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.reply-box{border-radius:20px}
.reply-box textarea{min-height:34px;line-height:20px;padding:7px 0}
.reply-box .send{width:32px;height:32px}
.reply-box .send svg{width:17px;height:17px}

/* Long words (a pasted link, "hahahahaha…") break onto the next line instead of pushing the page wider than the
   screen. Applies to everything people type: posts, replies, names, prizes, notes. */
body{overflow-wrap:anywhere}
/* Safety net: nothing inside the page can ever make it scroll sideways. */
.app,#sheet-host{overflow-x:clip}

/* Profile photos: no iOS long-press Save/Copy/Share menu; a clean tap opens the circular viewer (app.js). */
.avatar{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.avatar img{pointer-events:none;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}
.avatar[data-photo]{cursor:pointer;touch-action:manipulation}   /* a double tap opens the photo instead of zooming the page */
.photo-view{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
.pv-scrim{position:absolute;inset:0;background:rgba(12,8,11,.58);-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%)}
.pv-fig{position:relative;margin:0;display:grid;justify-items:center;gap:18px;pointer-events:none}
.pv-photo{width:min(68vw,300px);aspect-ratio:1;border-radius:50%;background:#6b7180 center/cover no-repeat;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 26px 60px -18px rgba(0,0,0,.65);will-change:transform}
.pv-fig figcaption{text-align:center;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35);max-width:80vw;overflow-wrap:anywhere}
.pv-fig strong{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em}
.pv-fig span{font-size:14.5px;opacity:.78}
.pv-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pv-close:hover{background:rgba(255,255,255,.26);color:#fff}

/* ============ Notifications ============ */
.bell-btn{position:relative}
.topbar .icon-btn{flex-shrink:0}   /* round buttons stay round on narrow phones; the name truncates instead */
.bell-btn.on{color:var(--accent)}
.bell-badge{position:absolute;top:-2px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:#e0245e;color:#fff;font-size:11px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg-1);pointer-events:none}
.switch:disabled{opacity:.45}
.push-card{margin-bottom:6px}
.notif-list{padding:2px 14px}
.notif+.notif{border-top:1px solid var(--hairline)}
.notif-row{display:grid;grid-template-columns:46px minmax(0,1fr) 10px;gap:12px;align-items:start;width:100%;text-align:left;padding:14px 0;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:opacity .15s}
button.notif-row{cursor:pointer}
button.notif-row:active{opacity:.6}
.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px}
.notif-faces{position:relative;width:46px;height:46px}
.notif-faces .avatar{position:absolute;width:34px;height:34px;font-size:12px;box-shadow:0 0 0 2px var(--glass-strong)}
.notif-faces .avatar:nth-child(1){left:0;bottom:0;z-index:2}
.notif-faces .avatar:nth-child(2){right:0;top:0;z-index:1}
.notif-faces .avatar:nth-child(3){display:none}
.notif-faces.one .avatar{width:42px;height:42px;font-size:14px;left:0;top:0;bottom:auto}
.notif-kind{position:absolute;right:-3px;bottom:-3px;z-index:3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px var(--glass-strong)}
.notif-kind svg{width:12px;height:12px;stroke-width:2.6}
.notif-kind.is-likes{background:#e0245e}.notif-kind.is-likes svg{fill:#fff}
.notif-kind.is-replies{background:var(--accent)}.notif-kind.is-replies svg{fill:#fff;stroke:none}
.notif-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:2px 0 0 2px}
.notif-icon svg{width:21px;height:21px}
.notif-icon.good{background:rgba(31,157,99,.13);color:var(--good)}
.notif-icon.warn{background:rgba(199,129,26,.14);color:var(--warn)}
.notif-icon.accent{background:var(--accent-tint);color:var(--accent)}
.notif-icon.gold{background:rgba(226,169,59,.18);color:#b9772a}
.notif-body{display:grid;gap:3px;min-width:0;padding-top:1px}
.notif-text{font-size:15px;line-height:1.38}
.notif-text strong{font-weight:650}
.notif-quote{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-quote.notif-wrap{white-space:normal}   /* explanations (not quotes) can wrap */
.notif-time{font-size:12.5px;color:var(--ink-3);font-weight:500}
.notif-from{display:block;font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:1px}
.notif-msg{font-size:15px;line-height:1.4;color:var(--ink-2);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-msg.open{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.notif-admin{display:flex;justify-content:flex-end;padding:0 6px 8px}

/* ============ Home feed: runs as a quiet timeline between post cards ============ */
/* Runs logged one after another share a light lane: lighter than a post card, no shadow, the rail running through it.
   Faces sit under the post avatars (centre 36px in) and the text lines up with post names (68px in). */
:root{--lane:color-mix(in srgb,var(--glass) 55%,var(--bg-1))}
.tl-lane{padding:4px 0;border-radius:24px;background:var(--lane);box-shadow:inset 0 0 0 1px var(--hairline)}
.tl-day{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 18px 2px 22px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.tl-day strong{font-size:13.5px;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
.tl-day span{overflow:hidden;text-overflow:ellipsis}
.tl{position:relative;padding:12px 8px 12px 21px}
.tl.up::before,.tl.down::after{content:"";position:absolute;left:35px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--ink-3) 26%,transparent)}
.tl.up::before{top:0;height:15px}
.tl.down::after{top:42px;bottom:-1px}
.tl-line{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto auto;align-items:start;column-gap:2px}   /* face and ♥ line up with the name, so a status line below never moves them off the rail */
.tl-line>.tl-node{margin-top:5px}.tl-line>.tl-act,.tl-line>.tl-faces{margin-top:2px}
.tl-node{position:relative;width:30px;height:30px;margin-right:15px;z-index:1}
.tl-node .avatar{box-shadow:0 0 0 3px var(--lane)}
.tl-main{display:grid;gap:1px;text-align:left;min-width:0;min-height:40px;align-content:center;margin-left:15px;-webkit-tap-highlight-color:transparent}
.tl-main:active{opacity:.6}
.tl-text{font-size:14.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-text strong{color:var(--ink);font-weight:650}
.tl-text b{color:var(--ink);font-weight:700;letter-spacing:-.01em}
.tl-sub{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Your run's "Awaiting review": beside the km when it fits, otherwise wrapped just under it (never cut off) */
.tl-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:7px;row-gap:3px;min-width:0}
.tl-head>.tl-text{flex:0 1 auto;min-width:0}
.tl-status{flex:none;height:20px;padding:0 8px;gap:4px;font-size:11px;background:color-mix(in srgb,var(--warn) 12%,transparent);box-shadow:none}
.tl-status .dot{width:5px;height:5px}
.tl-act{min-height:36px;min-width:34px;padding:0 6px;gap:3px;justify-content:center;font-size:13px;color:var(--ink-3)}
.tl-act svg{width:17px;height:17px}
.tl-act .num:empty{display:none}
.tl-thread{padding:4px 4px 4px 47px}
.tl-thread .replies{margin-top:4px}
/* Who liked an opened run: their faces just left of ♥ (tap for everyone) */
.tl-faces{margin:0;padding:0 2px;min-height:36px}
.tl-faces .faces .avatar{width:22px;height:22px;font-size:9.5px;box-shadow:0 0 0 2px var(--lane)}
@media (max-width:359px){.tl-faces .faces .avatar:nth-child(3){display:none}.tl-act{min-width:30px;padding:0 4px}}   /* small phones: room for the name */
.tl.just-added{animation:tlFlash 2.4s ease-out}
@keyframes tlFlash{0%,40%{background:var(--accent-tint)}100%{background:transparent}}
.tl-lane>.tl:first-child{border-radius:24px 24px 0 0}.tl-lane>.tl:last-child{border-radius:0 0 24px 24px}.tl-lane>.tl:only-child{border-radius:24px}
@media (prefers-reduced-motion:reduce){.tl.just-added{animation:none;background:var(--accent-tint)}}
/* The folded end of a long lane: a dotted rail into a soft "+" node, "12 more runs", who ran, and their faces */
.tl-more{display:block;width:100%;text-align:left;color:inherit;-webkit-tap-highlight-color:transparent}
.tl-more:active .tl-main{opacity:.6}
.tl-more.up::before{height:17px;background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ink-3) 45%,transparent) 0 3px,transparent 3px 6px)}
.tl-plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--lane));box-shadow:0 0 0 3px var(--lane)}
.tl-plus svg{width:16px;height:16px;stroke-width:2.4}
.tl-more .tl-text strong{color:var(--accent)}
.tl-more .faces{margin:0 8px 0 6px}
.tl-more .faces .avatar{width:24px;height:24px;font-size:10px;box-shadow:0 0 0 2px var(--lane)}

/* ============ Training plan (suggested runs) ============ */
/* Home: the way in, inside "Your training" */
.plan-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;margin-top:14px;padding:10px 12px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:background .2s,transform .12s}
.plan-row:active{transform:scale(.985);background:var(--accent-tint)}
.plan-row>svg{color:var(--ink-3)}
.plan-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:var(--accent-tint)}
.plan-meta{min-width:0}.plan-meta strong{display:block;font-size:14.5px;font-weight:700}
.plan-meta span{display:block;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Progress ring */
.ring{position:relative;display:inline-grid;place-items:center;width:var(--ring);height:var(--ring);flex:none;color:var(--good)}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.ring-bg{stroke:var(--hairline)}.ring-fg{stroke:var(--good);transition:stroke-dasharray .4s ease}
.ring>svg.i{position:static;transform:none;width:45%;height:45%;stroke-width:2.6}
/* Questions: one per screen, big tappable answers */
.tp-steps{display:flex;gap:6px;margin:6px 4px 18px}
.tp-steps i{flex:1;height:4px;border-radius:9px;background:var(--hairline);transition:background .3s}
.tp-steps i.on{background:var(--accent)}
.tp-q{font-size:26px;line-height:1.15;font-weight:750;letter-spacing:-.03em;margin:0 4px}
.tp-sub{margin:8px 4px 18px;font-size:15px}
.tp-options{display:grid;gap:10px}
.tp-opt{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;padding:15px 16px;border-radius:18px;text-align:left;color:var(--ink);background:var(--glass);box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline);transition:transform .12s,box-shadow .2s,background .2s;-webkit-tap-highlight-color:transparent}
.tp-opt:active{transform:scale(.985)}
.tp-opt strong{display:block;font-size:16px;font-weight:700}
.tp-opt span span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.tp-radio{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--hairline);transition:box-shadow .2s}
.tp-opt[aria-checked=true]{background:color-mix(in srgb,var(--accent) 8%,var(--glass));box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}
.tp-opt[aria-checked=true] .tp-radio{box-shadow:inset 0 0 0 7px var(--accent)}
.tp-keep{margin:14px auto 0;display:flex}
/* Suggested plan */
.tp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:6px 4px 8px}
.tp-hero{padding:20px;border-radius:var(--r-xl);overflow:hidden}
.tp-hero h1{font-size:28px;line-height:1.1;font-weight:750;letter-spacing:-.035em}
.tp-hero>p{color:var(--ink-2);margin-top:6px;font-size:15px}
.tp-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tp-bars{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;align-items:end;height:96px;margin-top:18px}
.tp-bars>span{display:grid;grid-template-rows:1fr auto;gap:5px;height:100%;align-items:end;text-align:center}
.tp-bars i{display:block;width:100%;border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.tp-bars .past i{background:var(--hairline)}
.tp-bars .now i{background:var(--accent)}
.tp-bars b{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.tp-bars .now b{color:var(--accent);font-weight:700}
.tp-bars .race i{height:26px;background:none;display:grid;place-items:center;color:var(--accent)}
.tp-bars .race svg{width:18px;height:18px}
.tp-kinds{margin-top:12px;font-size:13px;color:var(--ink-3)}
.tp-note{display:flex;gap:8px;align-items:flex-start;margin:12px 4px 14px;font-size:14px;color:var(--ink-2)}
.tp-note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--accent)}
.tp-how{margin-top:14px}
.tp-how h2{font-size:17px;font-weight:700;margin-bottom:10px}
.tp-how div{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:7px 0}
.tp-how svg{color:var(--accent);margin-top:2px}
.tp-how p{font-size:14.5px;color:var(--ink-2)}.tp-how strong{color:var(--ink)}
.tp-actions{display:grid;gap:6px;margin-top:16px}
.tp-actions .btn-primary{min-height:50px}
.tp-list{display:grid;gap:10px}
.tp-plan{display:grid;gap:6px;text-align:left;padding:16px;color:var(--ink)}
.tp-plan>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-plan strong{font-size:17px}.tp-plan .muted{font-size:14px}
/* The plan page */
.tp-summary{display:flex;gap:16px;align-items:center}
.tp-summary strong{display:block;font-size:18px;font-weight:750;letter-spacing:-.02em}
.tp-summary>div>span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.tp-summary>div>.faint{color:var(--ink-3);font-size:12.5px}
.tp-strip{display:flex;gap:6px;overflow-x:auto;margin:14px -16px 14px;padding:2px 16px 4px;scroll-snap-type:x proximity;scrollbar-width:none}
.tp-strip::-webkit-scrollbar{display:none}
.tp-wk{flex:none;display:grid;justify-items:center;gap:2px;min-width:58px;padding:8px 6px 7px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);scroll-snap-align:center;color:var(--ink-2)}
.tp-wk b{font-size:13px;font-weight:700;color:var(--ink)}
.tp-wk span{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.tp-wk em{display:flex;gap:3px;height:6px;margin-top:2px}
.tp-wk em i{width:6px;height:6px;border-radius:50%;background:var(--hairline)}
.tp-wk em i.on{background:var(--good)}
.tp-wk.now b{color:var(--accent)}
.tp-wk.sel{background:var(--glass-strong);box-shadow:inset 0 0 0 2px var(--accent),0 4px 12px -6px rgba(0,0,0,.25)}
.tp-wk.before{opacity:.55}
.tp-wk.race b{color:var(--accent)}.tp-wk.race svg{width:16px;height:16px}
.tp-week .card-head h2 small{font-size:13px;font-weight:600;margin-left:4px}
.tp-empty{font-size:14.5px;padding:4px 2px 6px}
.tp-sess{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:6px 0}
.tp-sess+.tp-sess{border-top:1px solid var(--hairline)}
.tp-tick{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:transparent;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink-3) 55%,transparent);transition:background .2s,box-shadow .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.tp-tick svg{width:17px;height:17px;stroke-width:3}
.tp-tick:active{transform:scale(.88)}
.tp-tick.future{box-shadow:inset 0 0 0 2px var(--hairline);opacity:.6}
.tp-sess.done .tp-tick{background:var(--good);color:#fff;box-shadow:none}
.tp-sess-main{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;min-height:52px;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
.tp-sess-main>svg{color:var(--ink-3);width:18px;height:18px;transition:transform .2s}
.tp-sess.open .tp-sess-main>svg{transform:rotate(180deg)}
.tp-type{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent)}
.tp-type svg{width:19px;height:19px}
.tone-good{--tc:var(--good)}.tone-teal{--tc:var(--team-X)}.tone-blue{--tc:var(--team-Y)}.tone-warm{--tc:var(--warn)}.tone-muted{--tc:var(--ink-3)}
.tp-sess-text{min-width:0}.tp-sess-text strong{display:block;font-size:15px;font-weight:700}
.tp-sess-text strong small{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:2px}
.tp-sess-text>span{display:block;font-size:13.5px;color:var(--ink-2)}
.tp-sess.done .tp-sess-text strong,.tp-sess.done .tp-sess-text>span{color:var(--ink-3)}
.tp-more{grid-column:2;padding:2px 0 8px 46px;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.tp-more b{color:var(--ink)}
.tp-race{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;margin-top:8px;padding:12px;border-radius:16px;background:var(--accent-tint);color:var(--accent)}
.tp-race svg{width:22px;height:22px;margin:0 auto}
.tp-race strong{display:block;color:var(--ink);font-size:15px}.tp-race span{font-size:13.5px;color:var(--ink-2)}
.tp-tip{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin-top:14px;padding:14px 16px}
.tp-tip-ico{color:var(--accent);margin-top:1px}
.tp-tip p{font-size:14.5px;color:var(--ink-2)}.tp-tip b{color:var(--ink)}
.tp-safe{margin:12px 4px 0}
.tp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:14px}

/* ---- Training plan: the ladder version ---- */
.plan-row .ring{--ring:38px}
.mileage-plan{margin:0 0 14px}.mileage-plan .plan-row{margin-top:0;background:var(--glass);box-shadow:var(--shadow),inset 0 0 0 1px var(--hairline)}
.tp-home .card-head{margin-bottom:2px}
.tp-home .card-head .chip{gap:6px;padding-left:6px}.tp-home .card-head .chip .ring{color:var(--good)}
.tp-home .card-head .chip .ring svg.i{display:none}
.tp-home-sub{font-size:13.5px;color:var(--ink-3);margin:0 0 8px}
.tp-home .tp-start-row{margin-top:0;background:none;box-shadow:none;padding:0}
.tp-home-list{margin-top:4px}
.tp-open{margin:8px 0 -4px auto;display:flex}
.tp-open svg{width:16px;height:16px}
.tp-sess.compact{padding:3px 0}
.tp-sess.compact .tp-sess-main{grid-template-columns:30px 1fr;min-height:44px;gap:10px}
.tp-sess.compact .tp-type{width:30px;height:30px;border-radius:9px}.tp-sess.compact .tp-type svg{width:16px;height:16px}
.tp-sess.compact .tp-sess-text strong{font-size:14px}.tp-sess.compact .tp-sess-text>span{font-size:13px}
.tp-sess-text strong small.pb{color:var(--warn)}
.tp-tick.on{background:var(--good);color:#fff;box-shadow:none}
.tp-tick.future.on{opacity:1}
.tp-checkin{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;margin:6px 0 10px;padding:10px 12px;border-radius:16px;text-align:left;color:var(--ink);background:var(--accent-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);-webkit-tap-highlight-color:transparent;transition:transform .12s}
.tp-checkin:active{transform:scale(.985)}
.tp-checkin .plan-ico{background:var(--accent);color:var(--on-accent,#fff)}
.tp-checkin>svg{color:var(--accent)}
section+.tp-checkin,.page-title+.tp-checkin{margin-top:0}
.tp-why{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin:4px 0 12px;padding:10px 12px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);font-size:14px;color:var(--ink-2)}
.tp-why>svg{width:18px;height:18px;color:var(--accent);margin-top:1px}
.tp-why.soft>svg{color:var(--warn)}
.tp-why .btn{margin:6px 0 -4px -10px}
.tp-note-card{margin:0 0 8px;padding:12px 14px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);font-size:14px;color:var(--ink-2);display:grid;gap:6px}
.tp-note-card strong{color:var(--ink);font-size:14.5px}
.tp-note-card.rest{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.tp-note-card .faint{font-size:13px}
.tp-future{margin:-4px 0 8px}
.prog-first{margin:-2px 2px 8px}
.tp-ahead .hint{margin:-6px 0 6px}
.tp-ahead-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:baseline;padding:8px 2px;border-top:1px solid var(--hairline)}
.tp-ahead-row:first-of-type{border-top:0}
.tp-ahead-row b{font-size:13px;color:var(--accent)}
.tp-ahead-row span{font-size:14px;line-height:1.35}
.tp-ahead-row em{font-style:normal;font-size:13px;color:var(--ink-3);white-space:nowrap}
.tp-run-note{color:var(--ink)}
.tp-hurt-row{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:12px 16px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);text-align:left;font-size:14.5px;font-weight:600;color:var(--ink-2);-webkit-tap-highlight-color:transparent}
.tp-hurt-row>svg:first-child{color:var(--warn)}.tp-hurt-row span{flex:1}.tp-hurt-row>svg:last-child{color:var(--ink-3)}
.tp-admin-note{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;margin-bottom:12px}
.tp-admin-note>svg{color:var(--accent);margin-top:2px}.tp-admin-note strong{display:block;font-size:14.5px}.tp-admin-note p{font-size:14.5px;color:var(--ink-2);margin-top:2px}
.tp-fold{margin-top:14px;padding:0}
.tp-fold summary{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.tp-fold summary::-webkit-details-marker{display:none}
.tp-fold summary strong{display:block;font-size:15px}.tp-fold summary span span{display:block;font-size:13px;color:var(--ink-3)}
.tp-fold summary>svg{color:var(--ink-3);transition:transform .2s}.tp-fold[open] summary>svg{transform:rotate(180deg)}
.tp-fold-sub{padding:0 16px 8px;font-size:14px;color:var(--ink-2)}
.tp-strength{margin:0;padding:0 16px 14px 36px;display:grid;gap:10px}
.tp-strength li{font-size:14px;color:var(--ink-2)}.tp-strength strong{display:block;color:var(--ink)}.tp-strength span{display:block}.tp-strength em{display:block;font-style:normal;color:var(--ink-3);font-size:13px}
.tp-safety{margin:0;padding:0 16px 14px 34px;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.tp-race.big{align-items:start}.tp-race.big svg{margin-top:2px}
.tp-race ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.tp-ladder{display:flex;gap:4px;align-items:end;height:64px;margin-top:16px}
.tp-ladder i{flex:1;border-radius:5px 5px 2px 2px;background:var(--hairline)}
.tp-ladder i.below{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.tp-ladder i.on{background:var(--accent)}
.tp-first .hint{margin:-6px 0 6px}
.tp-feel{gap:8px}.tp-feel .tp-opt{padding:12px 16px}
.tp-stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 12px 10px 16px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);font-weight:600}
.tp-stepper small{display:block;font-weight:500}
.tp-stepper div{display:flex;align-items:center;gap:10px}
.tp-stepper strong{min-width:22px;text-align:center;font-size:18px}
.tp-stepper .icon-btn{font-size:20px;font-weight:600}
.tp-hurt{display:grid;gap:10px;font-size:14.5px}
.tp-settings-more{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:4px}
.field>.hint{font-weight:400}
.field .segmented{display:flex;width:100%}.field .segmented button{flex:1;padding:0 8px}
.segmented button:disabled{opacity:.45}
.tp-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tp-admin-sum{display:grid;gap:3px;margin-bottom:12px;font-size:13.5px;color:var(--ink-2)}
.tp-admin-sum strong{font-size:16px;color:var(--ink)}
.tp-admin-week{padding:8px 12px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.tp-admin-week .label{font-size:13px;font-weight:600;color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-run-edit{padding:12px 12px 2px;margin-bottom:14px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.tp-run-edit .grid2{grid-template-columns:1fr 92px}
.check-row+.field,.field+.check-row{margin-top:0}
.sheet .check-row{margin-bottom:14px}
.admin-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs button{white-space:nowrap;flex:none}
@media (max-width:420px){.admin-tabs button{padding:0 11px;font-size:13.5px}}
.tp-first .tp-tick{display:none}.tp-first .tp-sess{grid-template-columns:1fr}
.list-row.tp-person{width:100%;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent;grid-template-columns:auto 1fr auto}
.tp-person .sub{display:block}.tp-person>svg{color:var(--ink-3);width:18px;height:18px}
.tp-person:active{background:var(--accent-tint);border-radius:14px}

/* ---- Training plan, round 2: theme colours (maroon, not green), the plan inside "Your training", programs ---- */
.ring{color:var(--accent)}.ring-fg{stroke:var(--accent)}
.tp-sess.done .tp-tick,.tp-tick.on{background:var(--accent);color:var(--on-accent,#fff)}
.tp-wk em i.on{background:var(--accent)}
.tone-accent{--tc:var(--accent)}.tone-deep{--tc:var(--accent-strong)}
.tp-sess-text strong small.pb{color:var(--accent)}
.chip-accent{color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.tp-home .card-head .chip .ring{color:var(--accent)}
.tp-in{display:grid}
.tp-toggle{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;padding:2px 0;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
.tp-toggle>svg{color:var(--ink-3);width:18px;height:18px;transition:transform .2s}
.tp-in.open .tp-toggle>svg{transform:rotate(180deg)}
.tp-toggle:active{opacity:.7}
.tp-in .tp-checkin{margin:10px 0 0}
.tp-in-body{margin-top:8px}
.tp-in-body .tp-why{margin:4px 0 6px}
.card .tp-start-row{margin-top:0;background:none;box-shadow:none;padding:2px 0}
#plan-pick:empty{display:none}
#plan-pick .label{font-size:13px;font-weight:600;color:var(--ink-2);padding-left:4px}
.tp-pick{display:grid;gap:8px}
.tp-pick-opt{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;width:100%;padding:9px 12px;border-radius:14px;text-align:left;color:var(--ink);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--hairline);-webkit-tap-highlight-color:transparent}
.tp-pick-opt .tp-type{width:30px;height:30px;border-radius:9px}.tp-pick-opt .tp-type svg{width:16px;height:16px}
.tp-pick-opt strong{display:block;font-size:14px}.tp-pick-opt span span{display:block;font-size:13px;color:var(--ink-2)}
.tp-pick-opt[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--glass-strong))}
.tp-pick-opt[aria-checked=true] .tp-radio{box-shadow:inset 0 0 0 7px var(--accent)}
.tp-subtabs{margin:0 0 12px}
.tp-admin-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 4px 12px}
.tp-admin-bar .hint{margin:0;flex:1 1 220px}
.tp-weektabs{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}.tp-weektabs::-webkit-scrollbar{display:none}
.tp-weektabs button{flex:1 0 auto;padding:0 10px;display:flex;align-items:baseline;gap:3px}
.tp-weektabs button small{font-size:10.5px;color:var(--ink-3);font-weight:600}
.prog-run{display:grid;gap:8px;padding:10px;margin-bottom:10px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.prog-run-top{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.prog-run-row{display:grid;grid-template-columns:1fr 74px;gap:8px}
.prog-run .input{min-height:44px}
.prog-run .icon-btn{color:var(--bad)}
.prog-opt{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);padding-left:4px}
.prog-opt input{width:18px;height:18px;accent-color:var(--accent)}
.prog-actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.profile-btn{padding:0}.profile-btn .avatar{width:44px;height:44px;font-size:16px}

/* ---- Round 3 ---- */
/* No accidental text highlighting in the app (typing boxes still select normally). */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* Admin tabs fit the bar: they share the width, Plans sits next to Review. */
.admin-tabs{display:flex;width:100%}
.admin-tabs button{flex:1 1 auto;padding:0 10px}
@media (max-width:420px){.admin-tabs button{padding:0 6px;font-size:13px}}
@media (max-width:340px){.admin-tabs button{padding:0 4px;font-size:12px}}
/* "See teams": a plain link, lined up with the card title */
.card-link{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;padding:4px 0;margin-right:-4px}
.card-link svg{width:16px;height:16px}
/* Reply box: your avatar beside it, lined up with the replies above */
.reply-row{align-items:center}.reply-row .reply-box{flex:1;min-width:0}
/* Weekly streak */
.streak{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.streak-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--ink-3);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.streak-ico svg{width:19px;height:19px}
.streak.lit .streak-ico{color:var(--on-accent);background:var(--accent)}
.streak-text{min-width:0}.streak-text strong{display:block;font-size:14.5px}.streak-text span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.3}
.streak-weeks{display:flex;gap:3px}
.streak-weeks i{width:8px;height:8px;border-radius:50%;background:var(--hairline)}
.streak-weeks i.on{background:var(--accent)}
.streak-weeks i.now:not(.on){box-shadow:inset 0 0 0 1.5px var(--accent);background:none}
.streak-weeks i.later{opacity:.5}

/* ---- Round 4 ---- */
/* Streak: a small 🔥 chip beside the team label; tap it for the weeks */
.head-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.streak-chip{gap:4px;font-variant-numeric:tabular-nums;color:var(--ink-3);-webkit-tap-highlight-color:transparent}
.streak-chip span{font-size:13px;line-height:1;filter:grayscale(1);opacity:.6}
.streak-chip.lit{color:var(--accent);background:var(--accent-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}
.streak-chip.lit span{filter:none;opacity:1}
.streak-chip[aria-expanded=true]{box-shadow:inset 0 0 0 1.5px var(--accent)}
.card-head+.streak{margin:-2px 0 12px}
/* Week tabs in the plan editors: labels centred */
.tp-weektabs button{justify-content:center}
/* Dropdowns: our own arrow, a comfortable distance from the edge */
select.input{-webkit-appearance:none;appearance:none;padding-right:44px;background-repeat:no-repeat;background-position:right 16px center;background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
/* The logo tile follows the theme (no bright white square in dark mode) */
.brand-icon .bi-bg{fill:var(--brand-bg)}.brand-icon .bi-fg{fill:var(--brand-fg)}

/* ---- Round 5 ---- */
/* Posts: likers on the left, Like and Reply on the right (like run lines) */
.post-actions{justify-content:space-between;margin-right:-8px}
.post-actions .likers-link{margin-left:0}
.post-acts{display:flex;align-items:center;gap:4px;margin-left:auto}
/* Week tabs in the plan editors: equal, centred columns */
.tp-weektabs{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:3px;padding:3px;margin:0 0 4px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);overflow:visible}
.tp-weektabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:42px;padding:0;border-radius:11px;color:var(--ink-2);-webkit-tap-highlight-color:transparent}
.tp-weektabs button b{font-size:13px;font-weight:700;line-height:1}
.tp-weektabs .wk-dots{display:flex;gap:2px;height:4px}
.tp-weektabs .wk-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.tp-weektabs button[aria-pressed=true]{color:var(--ink);background:var(--glass-strong);box-shadow:0 2px 8px -2px rgba(0,0,0,.18),inset 0 1px 0 var(--glass-edge)}
.tp-weektabs button[aria-pressed=true] .wk-dots i{background:var(--accent);opacity:1}
.prog-head{margin:8px 2px}
.prog-view{padding:2px 10px;margin-bottom:10px;border-radius:14px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.prog-live{margin:0 0 10px;font-size:13.5px}
.plan-kind{display:flex;width:100%;margin-bottom:8px}.plan-kind button{flex:1}
#manual-pick{margin-bottom:8px}
/* Onboarding: Next under the answers */
.tp-next{display:grid;gap:6px;margin-top:16px}
.tp-next .btn-primary{min-height:50px;gap:4px}.tp-next .btn-primary svg{width:18px;height:18px}
.tp-next .btn-primary:disabled{opacity:.45}

/* ---- Round 6 ---- */
/* The tick inside a full ring sits in the middle, in the accent colour */
.ring>svg.i{color:var(--accent);stroke:currentColor}
/* Phones: the top bar's round buttons are a little smaller and closer, so "CTL Runs · DMRR 2026" always has room */
@media (max-width:430px){
  .topbar{gap:6px}
  .topbar .brand{flex-shrink:0}
  .topbar .icon-btn{width:40px;height:40px;min-height:40px}
  .profile-btn .avatar{width:40px;height:40px;font-size:15px}
}

/* ---- Round 7 ---- */
/* Top bar: Admin is a round icon button like the bell and the moon, so "CTL Runs" keeps its room. On the narrowest
   phones (360 px Androids, 320 px iPhones) the round buttons shrink a little rather than hiding the name. */
.admin-btn.on{color:var(--accent)}
@media (max-width:374px){
  .topbar{gap:4px}
  .topbar .brand{flex-shrink:1;gap:8px}
  .topbar .icon-btn{width:37px;height:37px;min-height:37px}
  .topbar .icon-btn svg{width:19px;height:19px}
  .profile-btn .avatar{width:37px;height:37px;font-size:14px}
}
@media (max-width:340px){.brand-mark{width:30px;height:30px;border-radius:9px}.topbar .icon-btn{width:35px;height:35px;min-height:35px}.profile-btn .avatar{width:35px;height:35px}}

/* Liquid glass: the menu bar's material (clear, lightly tinted, with a bright top edge and a soft rim), shared by the
   round buttons in the top bar (Admin, Notifications, Appearance) and every glass button, such as Plan settings. */
:root{
  --lg-fill:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.14) 100%),linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.2));
  --lg-rim:rgba(255,255,255,.7);
  --lg-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.45),inset 0 0 12px rgba(255,255,255,.35),0 0 0 .5px rgba(0,0,0,.1),0 6px 16px -8px rgba(0,0,0,.3),0 2px 5px -2px rgba(0,0,0,.12);
  --lg-blur:blur(14px) saturate(190%) brightness(1.05);
}
:root[data-theme="dark"]{
  --lg-fill:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 100%),linear-gradient(180deg,rgba(78,78,86,.42),rgba(34,34,38,.36));
  --lg-rim:rgba(255,255,255,.14);
  --lg-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(255,255,255,.06),inset 0 0 12px rgba(255,255,255,.05),0 0 0 .5px rgba(0,0,0,.6),0 6px 16px -8px rgba(0,0,0,.8);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --lg-fill:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 100%),linear-gradient(180deg,rgba(78,78,86,.42),rgba(34,34,38,.36));
  --lg-rim:rgba(255,255,255,.14);
  --lg-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(255,255,255,.06),inset 0 0 12px rgba(255,255,255,.05),0 0 0 .5px rgba(0,0,0,.6),0 6px 16px -8px rgba(0,0,0,.8);
}}
.theme-btn,.btn-glass{background:var(--lg-fill);border:1px solid var(--lg-rim);box-shadow:var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);color:var(--ink)}
.btn-glass.btn-danger{color:var(--bad)}
/* Pressed and hovered, the glass stays: the icon takes the accent colour, as it does in the menu bar. */
.theme-btn:active{background:var(--lg-fill);color:var(--accent)}
@media (hover:hover){.theme-btn:hover{background:var(--lg-fill);color:var(--accent)}}
/* Training plan: once "something hurt" is told, the row says so (tap it for the advice again). */
.tp-hurt-row.told{background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--ink)}
.tp-week .tp-why{margin:0 0 10px}
/* Tags: the "@" list under (or over) the box you're typing in, and tags in posts and replies */
.composer{position:relative}
.tag-open{position:relative;z-index:30}
.tag-pick{position:absolute;left:6px;right:6px;top:calc(100% + 6px);z-index:40;max-height:236px;overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:18px;text-align:left;
  background:linear-gradient(var(--glass-strong),var(--glass-strong)),var(--bg-1);   /* solid: a blur can't reach through the glass card it sits in */
  box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 0 0 1px var(--hairline);transform-origin:top center;animation:pm-in .14s ease-out}
.tag-pick.up{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center}
.tag-opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:44px;padding:6px 10px;border-radius:12px;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
.tag-opt strong{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-opt small{display:block;font-size:12px;color:var(--ink-3)}
.tag-opt[aria-selected=true]{background:var(--accent-tint)}
@media (hover:hover){.tag-opt:hover{background:var(--accent-tint)}}
@media (prefers-reduced-motion:reduce){.tag-pick{animation:none}}
/* A tag in a post or reply: bold, in the accent colour */
.mention{color:var(--accent);font-weight:700}
.notif-kind.is-mention{background:var(--accent)}

/* ---- Round 8 ---- */
/* Week strip: race day is a marker at the end, not a week you can open, so it has no card of its own. */
.tp-wk.race{background:none;box-shadow:none;gap:1px;padding-left:2px;padding-right:2px;cursor:default}
.tp-wk.race b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-tint)}
.tp-wk.race span{color:var(--accent);font-weight:600}
.tp-wk.race span+span{color:var(--ink-3);font-weight:500}
/* The check-in under this week's runs, and once answered ("Checked in: About right", tap to change) */
.tp-week .tp-checkin{margin:12px 0 2px}
.tp-checkin.done{background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline)}
.tp-checkin.done .plan-ico{background:var(--good);color:#fff}
.tp-checkin.done>svg{color:var(--ink-3)}
/* "Easy runs while it settles" with "I'm feeling better" beside it (below it on narrow phones) */
.tp-hurt-row.told{flex-wrap:wrap;gap:8px 12px;padding:10px 12px 10px 16px}
.tp-hurt-main{display:flex;align-items:center;gap:10px;flex:1 1 210px;min-width:0;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
.tp-hurt-main>svg{color:var(--warn);flex:none}
.tp-hurt-main strong{display:block;font-size:14.5px}
.tp-hurt-main small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.tp-hurt-row.told .btn{flex:none;margin-left:auto}
/* Posts with no likes: Like and Reply at the end of the last line of text (the spacer keeps room for them there; if the
   line is full, the spacer wraps and they sit on a line of their own). Centred on the last line of text. */
.post-line{position:relative;margin:12px 0 8px}
.post-line .post-body{margin:0}
.acts-room{display:inline-block;width:var(--acts-w,128px);height:1px}
.post-line .post-acts{position:absolute;right:-8px;bottom:calc((1.45em - 36px) / 2);font-size:15.5px}
.post-line .post-acts .act{font-size:14px}
/* Top bar: the profile photo, no glass ring round it, a touch smaller than the round buttons so it reads the same size
   (a photo fills its whole circle; the pale glass ones don't). A soft shadow like theirs. Ringed while Profile is open. */
.topbar .profile-btn,.topbar .profile-btn:hover,.topbar .profile-btn:active{display:grid;place-items:center;padding:0;background:none!important;border:0;box-shadow:none}
.topbar .profile-btn{width:44px;height:44px}
.topbar .profile-btn .avatar{width:40px;height:40px;font-size:15px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 6px 16px -8px rgba(0,0,0,.3),0 2px 5px -2px rgba(0,0,0,.12)}
.topbar .profile-btn.on .avatar{box-shadow:0 0 0 2px var(--bg-1),0 0 0 3.5px var(--accent)}
@media (max-width:430px){.topbar .profile-btn{width:40px;height:40px}.topbar .profile-btn .avatar{width:36px;height:36px;font-size:13px}}
@media (max-width:374px){.topbar .profile-btn{width:37px;height:37px}.topbar .profile-btn .avatar{width:33px;height:33px;font-size:12px}}
@media (max-width:340px){.topbar .profile-btn{width:35px;height:35px}.topbar .profile-btn .avatar{width:31px;height:31px}}

/* Writing a post or reply: the text is drawn on a layer exactly behind the box (it can't colour part of its own text).
   Both share font, size, line height, padding and wrapping, so every letter sits where the box would put it. */
.tag-field{position:relative;display:flex;flex:1;min-width:0}
.composer .tag-field>textarea{position:relative;z-index:1;width:100%;-webkit-appearance:none;appearance:none;letter-spacing:normal;word-spacing:normal;caret-color:var(--accent)}
.tag-hl{position:absolute;inset:0 -6px;padding-left:6px!important;z-index:0;overflow:hidden;pointer-events:none;color:transparent;font:inherit;font-size:16px;line-height:22px;padding:9px 0;
  letter-spacing:normal;word-spacing:normal;text-align:start;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
/* The layer shows the text itself (the box's own text is see-through, the cursor and selection stay the box's), with
   names that will be tagged in the accent colour. Same weight as the rest, so the cursor always sits on the text. */
.tag-hl{color:var(--ink)}
.tag-hl mark{color:var(--accent);background:none}
.composer .tag-field>textarea{color:transparent;-webkit-text-fill-color:transparent}
.composer .tag-field>textarea::placeholder{color:var(--ink-3);-webkit-text-fill-color:var(--ink-3)}
.reply-box .tag-hl{line-height:20px;padding:7px 0}   /* the reply box is a little tighter */

/* ============ Round 9 ============ */
/* Your 5 km time: minutes : seconds, two number boxes (a phone's number pad has no colon). */
.bench-fields{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.bench-fields .field{margin-bottom:14px}
.bench-colon{font-size:22px;font-weight:700;color:var(--ink-3);padding-bottom:24px}
.bench-proposed{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 0 14px;border-radius:var(--r-sm);background:var(--accent-tint);font-size:14px}
.bench-proposed svg{width:18px;height:18px;color:var(--accent);flex:none}
.bench-proposed span{flex:1}
.bench-tag{color:var(--accent);font-weight:600}
/* Add to Home Screen */
.ins-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.ins-head p{margin:0;font-size:15px;color:var(--ink-2)}
.ins-icon{flex:none;width:56px;height:56px;border-radius:13px;overflow:hidden;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 6px 16px -8px rgba(60,20,35,.35)}
.ins-icon svg{width:100%;height:100%;display:block}
.ins-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.ins-steps li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--glass-thin);font-size:15px}
.ins-steps li svg{width:19px;height:19px;vertical-align:-4px;color:var(--accent)}
.ins-n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13px}
#install-sheet .note{margin-bottom:12px}

/* ============ Motion (CTL Runs Motion, revision 3) ============
   Every component's base style is its finished state; movement is only added inside prefers-reduced-motion:
   no-preference. Only transform, opacity and stroke-dashoffset animate. Everything pauses while the app is hidden. */
:root[data-hidden] *,:root[data-hidden] *::before,:root[data-hidden] *::after{animation-play-state:paused!important}

/* Opening: the app's own logo tile (light tile, maroon runner; dark tile, pink runner), once per visit, 0.9 s. */
.ctl-launch-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg-1);pointer-events:none}
.ctl-launch-screen.is-done{display:none}
.ctl-launch{display:grid;justify-items:center;gap:12px}
.ctl-launch-tile{width:96px;height:96px;border-radius:24px;background:var(--brand-bg);color:var(--brand-fg);display:grid;place-items:center;box-shadow:0 0 0 .5px var(--hairline),var(--shadow)}
.ctl-launch-mark{width:96px;height:96px;display:block;transform-origin:50% 70%}   /* the icon's own geometry: the runner fills the tile as on the home screen */
.ctl-launch-mark svg{width:100%;height:100%;display:block}
.ctl-launch-name{font-size:16px;font-weight:600;letter-spacing:.2px;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .ctl-launch-screen.is-opening .ctl-launch-tile{animation:ctl-launch-tile 320ms cubic-bezier(.2,.8,.2,1) both}
  .ctl-launch-screen.is-opening .ctl-launch-mark{animation:ctl-launch-settle 520ms 80ms cubic-bezier(.2,.8,.2,1) both}
  .ctl-launch-screen.is-opening .ctl-launch-name{animation:ctl-launch-name 320ms 200ms cubic-bezier(.2,.8,.2,1) both}
}
@keyframes ctl-launch-tile{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes ctl-launch-settle{from{transform:translate(-6px,4px) rotate(-4deg)}to{transform:none}}
@keyframes ctl-launch-name{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Full-page loading: a route drawing itself (only if loading takes over 0.15 s). */
.ctl-route{display:grid;justify-items:center;gap:10px;max-width:100%}
.ctl-route[hidden]{display:none}
.ctl-route svg{width:160px;max-width:100%;height:auto;display:block;overflow:visible}
.ctl-route-base{fill:none;stroke:var(--accent);stroke-opacity:.18;stroke-width:3;stroke-linecap:round}
.ctl-route-trace{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.65}
.ctl-route-label{font-size:13px;color:var(--ink-3);text-align:center}
@media (prefers-reduced-motion:no-preference){.ctl-route.is-loading .ctl-route-trace{animation:ctl-route-draw 2.8s linear infinite}}
@keyframes ctl-route-draw{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}

/* Small waits (a button that's saving): three dots in the button's own text colour, beside its busy wording. */
.ctl-dots{display:inline-flex;gap:5px;width:28px;height:6px;vertical-align:middle;flex:none}
.ctl-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55}
.btn .ctl-dots i,.icon-btn .ctl-dots i{background:currentColor}
@media (prefers-reduced-motion:no-preference){
  .ctl-dots i{animation:ctl-dots-pulse 1.4s ease-in-out infinite}
  .ctl-dots i:nth-child(2){animation-delay:150ms}
  .ctl-dots i:nth-child(3){animation-delay:300ms}
}
@keyframes ctl-dots-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.btn.is-busy:has(.ctl-dots)::before{content:none}

/* Confirmed: the ring fills and the tick draws, once the server has said yes (in the "saved" message). */
.ctl-tick{width:28px;height:28px;display:inline-block;vertical-align:middle;flex:none}
.ctl-tick.is-large{width:40px;height:40px}
.ctl-tick svg{width:100%;height:100%;display:block;overflow:visible}
.ctl-tick-bg{fill:none;stroke:var(--accent);stroke-opacity:.18;stroke-width:4}
.ctl-tick-ring{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%}
.ctl-tick-mark{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ctl-tick:not(.is-done) .ctl-tick-ring,.ctl-tick:not(.is-done) .ctl-tick-mark{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ctl-tick.is-done .ctl-tick-ring{animation:ctl-tick-ring 360ms cubic-bezier(.2,.8,.2,1) both}
  .ctl-tick.is-done .ctl-tick-mark{animation:ctl-tick-mark 240ms 180ms cubic-bezier(.2,.8,.2,1) both}
}
@keyframes ctl-tick-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ctl-tick-mark{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.toast .ctl-tick{margin:-6px 0 -6px -6px}

/* Days to race day: rolls down one when the app was last opened yesterday (Malé time). The number stays ordinary text
   on the line (so it sits on the same baseline as "days to go"); yesterday's number waits just above it, clipped away. */
.ctl-count-num{display:inline-block;clip-path:inset(0 -.2em);font-variant-numeric:tabular-nums}
.ctl-count-roll{position:relative;display:inline-block}
.ctl-count-prev{position:absolute;right:0;bottom:100%}
@media (prefers-reduced-motion:no-preference){.ctl-count.is-rolling .ctl-count-roll{animation:ctl-count-roll 360ms cubic-bezier(.2,.8,.2,1) both}}
@keyframes ctl-count-roll{from{transform:translateY(100%)}to{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Home: a reminder to propose your 5 km benchmark (until you do, or tap Not now) */
.bench-card-top{display:flex;gap:12px;align-items:flex-start}
.bench-card-top .icon-btn{flex:none}
.bench-card-top p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.bench-card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
/* Plan tick circle: ticked is a soft tint with an accent ring and tick (not a solid disc). Ticking one draws the ring
   round the circle (360 ms) and then the tick (240 ms, from 180 ms), like the saved message. Reduce Motion: shown at once. */
.tp-tick .tp-tick-art{width:100%;height:100%;display:block;overflow:visible;stroke-width:2.4}
.tp-tick-ring{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%;opacity:0}
.tp-tick-mark{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:0}
.tp-sess.done .tp-tick,.tp-tick.on,.tp-tick[aria-checked="true"]{background:var(--accent-tint);color:var(--accent);box-shadow:none}
.tp-sess.done .tp-tick .tp-tick-ring,.tp-sess.done .tp-tick .tp-tick-mark,.tp-tick.on .tp-tick-ring,.tp-tick.on .tp-tick-mark,
.tp-tick[aria-checked="true"] .tp-tick-ring,.tp-tick[aria-checked="true"] .tp-tick-mark{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .tp-tick.is-new .tp-tick-ring{animation:ctl-tick-ring 360ms cubic-bezier(.2,.8,.2,1) both}
  .tp-tick.is-new .tp-tick-mark{animation:ctl-tick-mark 240ms 180ms cubic-bezier(.2,.8,.2,1) both}
}
/* The plan's progress ring fills round to its new value (stroke-dashoffset only); the tick fades in once it's full. */
.ring-fg{transition:none}
@media (prefers-reduced-motion:no-preference){
  .ring-fg.is-growing{animation:ring-grow 600ms cubic-bezier(.2,.8,.2,1) both}
  .ring:has(.is-growing)>svg.i{animation:ctl-fade-in 200ms 450ms ease-out both}
}
@keyframes ring-grow{from{stroke-dashoffset:var(--ring-from)}}
@keyframes ctl-fade-in{from{opacity:0}}
/* Posts with likes: a quiet footer row under a hairline. "Liked by …" with the faces on the left (it shortens with "…"
   rather than pushing Like and Reply off the row), Like and Reply on the right. */
.post>.post-actions{margin:12px -8px 0;padding-top:6px;border-top:1px solid var(--hairline)}
.post>.post-actions .likers-link{min-width:0;flex:1 1 0;gap:6px;padding-left:8px}
.post>.post-actions .post-acts{flex:none}
.likers-link .faces .avatar{width:24px;height:24px;font-size:10px}
.likers-text{display:block;flex:1 1 0;min-width:0;contain:inline-size;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-weight:500;color:var(--ink-2)}
.likers-text strong{font-weight:650;color:var(--ink)}
/* Streak up: the flame gives one pulse (the number rolls up, like the countdown). */
.streak-flame{display:inline-block}
@media (prefers-reduced-motion:no-preference){.streak-chip.is-up .streak-flame{animation:streak-pulse 520ms cubic-bezier(.3,1.5,.5,1) both}}
@keyframes streak-pulse{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(-6deg)}100%{transform:none}}

/* Race day card: Route and Playlist side by side (once admins add a playlist). */
.race-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.race-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;padding:9px 10px 9px 9px;border-radius:16px;background:var(--glass-thin);box-shadow:inset 0 0 0 1px var(--hairline);color:var(--ink);text-align:left;text-decoration:none;transition:background .2s;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.race-link:hover{background:var(--accent-tint)}}
.race-link:active{background:var(--accent-tint)}
.rl-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none}
.rl-route{background:var(--accent-tint)}.rl-route .route-mini{width:30px;height:auto}
.rl-ico .spotify{width:32px;height:32px;display:block}
.rl-text strong{display:block;font-size:14px;font-weight:700;line-height:1.2}
.rl-text>span{display:block;font-size:12px;font-weight:600;line-height:1.3;color:var(--ink-3);white-space:nowrap}
.rl-text .rl-spotify{color:#15883d}
:root[data-theme="dark"] .rl-text .rl-spotify{color:#1ed760}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rl-text .rl-spotify{color:#1ed760}}
.race-link>svg.i{width:16px;height:16px;color:var(--ink-3)}
@media (max-width:359px){.race-links{gap:8px}.race-link{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:8px}.race-link>svg.i{display:none}.rl-ico{width:32px;height:32px}.rl-ico .spotify{width:28px;height:28px}.rl-route .route-mini{width:27px}}
/* Admin: the playlist link */
.playlist-row{display:flex;gap:8px;align-items:center}
.playlist-row .input{flex:1;min-width:0}

/* Your training: this week's km, total and rank, and km per week across the eight weeks (one line, accent colour). */
.wk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:4px}
.wk-hero span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.wk-hero strong{font-size:30px;font-weight:750;letter-spacing:-.035em;line-height:1.1}
.wk-hero small{font-size:15px;font-weight:650;color:var(--ink-3);margin-left:3px}
.wk-side{text-align:right;font-size:13px;font-weight:600;color:var(--ink-3);line-height:1.5;white-space:nowrap}
.wk-side b{color:var(--ink);font-weight:700}
.wk-plot{position:relative}
.wk-chart{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.wc-grid{stroke:var(--hairline);stroke-width:1}
.wc-ytxt,.wc-lbl{font-size:10.5px;font-weight:600;fill:var(--ink-3)}
.wc-lbl.on{fill:var(--accent);font-weight:750}
.wc-area{fill:url(#wc-fill)}
.wc-line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.wc-dot{fill:var(--glass-strong);stroke:var(--accent);stroke-width:1.6}
.wc-now{fill:var(--accent);stroke:var(--glass-strong);stroke-width:2}
.wc-halo{fill:var(--accent);opacity:.18}
.wc-future{fill:none;stroke:var(--hairline);stroke-width:1.4}
.wc-lbl.sel{fill:var(--ink);font-weight:750}
/* Scrubbing the week chart: sideways drags pick weeks, up and down still scroll the page (touch-action: pan-y). */
.wk-plot[data-weeks]{touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:10px;outline:none}
.wk-plot[data-weeks]:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.wc-guide{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:2 3;opacity:.55}
.wc-pick-halo{fill:var(--accent);opacity:.18}
.wc-pick-dot{fill:var(--accent);stroke:var(--glass-strong);stroke-width:2.5}
.wc-pick{transition:opacity 180ms ease-out}
.wc-pick.off{opacity:0;pointer-events:none}
.wc-pick-dot,.wc-pick-halo{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .wc-guide,.wc-pick-pt{transition:transform 200ms cubic-bezier(.25,.8,.25,1)}
  .wc-pick-dot,.wc-pick-halo{transition:transform 200ms cubic-bezier(.25,.8,.25,1)}
  .wc-pick.off .wc-pick-dot,.wc-pick.off .wc-pick-halo{transform:scale(.6)}   /* it shrinks a little as it fades, and grows back as it appears */
}
.wc-pick.snap,.wc-pick.snap *{transition:none!important}
/* Nothing logged yet: a small note in the empty chart (it goes with the first run). */
.wk-empty{position:absolute;left:2.5%;right:12.5%;top:18%;height:44%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wk-empty span{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font-size:12.5px;font-weight:650;white-space:nowrap}
.wk-empty svg.i{width:14px;height:14px;stroke-width:2.2}

/* Guided tour: everything dims except the feature being explained; a card with an arrow points at it. */
.tour{position:fixed;inset:0;z-index:1000;transition:opacity 180ms ease-out}
.tour.moving .tour-hole,.tour.moving .tour-tip{opacity:0}
.tour-block{position:absolute;inset:0}
.tour-hole{position:fixed;border-radius:18px;box-shadow:0 0 0 200vmax rgba(12,8,10,.6);pointer-events:none;transition:opacity 180ms ease-out}
.tour-hole::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(255,255,255,.9)}
.tour-tip{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;padding:16px 16px 12px;border-radius:20px;background:var(--glass-strong);color:var(--ink);box-shadow:var(--shadow-float);transition:opacity 180ms ease-out}
.tour-tip h3{margin:0 0 4px;font-size:17px;font-weight:750}
.tour-tip p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.tour-arrow{position:absolute;top:-7px;width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:3px}
.tour-tip.above .tour-arrow{top:auto;bottom:-7px}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.tour-dots{display:flex;gap:6px}
.tour-dots i{width:7px;height:7px;border-radius:4px;background:var(--hairline)}
.tour-dots i.on{background:var(--accent);width:18px}
.tour-btns{display:flex;gap:6px;align-items:center}
.tour-skip{font:inherit;font-size:14px;font-weight:600;color:var(--ink-3);padding:9px 10px;border-radius:999px}
.tour-skip[hidden]{display:none}
.tour-next{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 14px 0 18px;border-radius:999px;background:linear-gradient(180deg,#8f3a58,#6b2640);color:#fff;font:inherit;font-weight:700;font-size:14.5px}
.tour-next svg.i{width:17px;height:17px;stroke-width:2.2}
.tour-next:focus-visible,.tour-skip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tour,.tour-hole,.tour-tip,.tour-dots i{transition:none}}
/* Turn on notifications */
.push-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.push-list li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:var(--glass-thin);font-size:15px}
.push-list li span{font-size:18px;width:24px;text-align:center}