/* The club page's styles (public/club.html; split out 07/10/2026, #00136). Served as /club/club.css?v=, cached for a year. */
/* ---------- Tokens ---------- */
:root {
--ground: #EEF1EC;
--panel: #FBFCFA;
--panel-2: #E3E8E1;
--ink: #17211B;
--ink-2: #4E5A52;
--ink-3: #6B766E;
--line: #D2D9D0;
--route: #2F55D4; /* all routes */
--route-hi: #FF5A0A; /* selected route and the club's colour */
--act: #C2410C;
--bar: rgba(251, 252, 250, .58); /* frosted glass over the map: the bar, the map's buttons, the tab bar */
--bar-line: rgba(23, 33, 27, .10);
--glass: rgba(255, 255, 255, .62);
--glass-on: rgba(23, 33, 27, .10);
--glass-ink: #17211B;
--glass-blur: blur(16px) saturate(1.6); /* the club's colour for buttons with white text (readable(), below) */
--route-case: #FFFFFF;
--chip: #DDE4DA;
--star: #E8A317;
--shadow: 0 8px 28px rgba(23, 33, 27, .16);
--radius: 12px;
--tabs-h: 64px;
--font-display: "Archivo Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
--font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ground: #0F1411; --panel: #161D19; --panel-2: #1F2823; --ink: #E6ECE7; --ink-2: #A9B5AD; --ink-3: #8A968E;
--line: #2B3630; --route: #7D9BFF; --route-hi: #FF7A33; --route-case: #0F1411; --chip: #25302A;
--shadow: 0 8px 28px rgba(0, 0, 0, .5); color-scheme: dark;
}
}
:root[data-theme="dark"] {
--ground: #0F1411; --panel: #161D19; --panel-2: #1F2823; --ink: #E6ECE7; --ink-2: #A9B5AD; --ink-3: #8A968E;
--line: #2B3630; --route: #7D9BFF; --route-hi: #FF7A33; --route-case: #0F1411; --chip: #25302A;
--shadow: 0 8px 28px rgba(0, 0, 0, .5); color-scheme: dark;
}
/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { overflow-x: clip; } /* nothing may make the page wider than the screen (it slid the tab bar sideways) */
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--route-hi); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- Layout: sidebar + map on computers ---------- */
.app { height: 100%; display: grid; grid-template-columns: minmax(340px, 400px) 1fr; grid-template-rows: 100%; }
.side { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.mapwrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--panel-2); }
/* ---------- Header ---------- */
.top { padding: 16px 18px 12px; display: grid; gap: 10px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand h1 { margin: 0; font: 700 28px/1 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.brand h1 span { color: var(--route-hi); }
.brand-side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 1.5px solid var(--route-hi); background: transparent; color: var(--route-hi); border-radius: 999px; padding: 4px 12px; font: 600 13px/1.2 var(--font-body); white-space: nowrap; text-decoration: none; }
.a2hs { border-color: var(--line); color: var(--ink); padding-left: 6px; }
.a2hs img { width: 20px; height: 20px; border-radius: 5px; }
.a2hs-tip { display: grid; gap: 8px; background: var(--ground); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2); }
.a2hs-tip p { margin: 0; }
.a2hs-tip .share { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; }
.a2hs-tip .row { display: flex; gap: 8px; }
/* ---------- Tabs ---------- */
.tabs { display: grid; grid-template-columns: repeat(var(--ntabs, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; border: 0; background: transparent; color: var(--ink-3); font: 600 12px/1.1 var(--font-body); padding: 6px 2px; position: relative; }
.tab svg { width: 24px; height: 24px; }
.tab[aria-selected="true"] { color: var(--act); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--route-hi); }
/* ---------- Views ---------- */
.views { overflow-y: auto; min-height: 0; }
/* Offline and weak signal (#00047) */
.netbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 18px 0; padding: 9px 12px; border-radius: 10px; background: var(--chip); color: var(--ink); font-size: 14px; line-height: 1.35; }
.netbar b { font-weight: 700; }
.netbar button { margin-left: auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 5px 10px; font: 600 13px/1.2 var(--font-body); }
.view { padding: 16px 18px 24px; display: grid; gap: 14px; align-content: start; }
.eyebrow { margin: 0; font: 600 12.5px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--act); }
.view h2 { margin: 0; font: 700 32px/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.view h3 { margin: 0; font: 700 12px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sub { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.muted { color: var(--ink-3); font-size: 14px; margin: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; }
.view > .card { background: var(--ground); border-color: transparent; }
/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 8px 14px; font: 600 15px/1.2 var(--font-body); text-decoration: none; }
.btn.primary { background: var(--act); border-color: var(--act); color: #fff; min-height: 52px; font-size: 17px; border-radius: 12px; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: default; }
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; color: inherit; }
#f-code .chips .linkish { min-height: 44px; padding: 0 6px; } /* easy to tap on a phone */
.more { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 14px; text-align: left; font-weight: 600; }
.chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
/* segmented choices (Standard / Long, All / Favourites) */
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; background: var(--panel-2); border-radius: 10px; padding: 4px; }
.seg2 button { min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 15px/1.2 var(--font-body); }
.seg2 button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 6px 10px; font: 600 13px/1.2 var(--font-body); color: var(--ink-3); }
.seg button[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { min-height: 36px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 14px; font: 500 14px/1.2 var(--font-body); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); font-weight: 600; }
.select { min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 14px; }
.search { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 16px; }
.search::placeholder { color: var(--ink-3); }
/* stats and elevation */
.stats { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.stat { display: grid; }
.stat .k { font: 600 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font: 700 22px/1.1 var(--font-display); }
.pace-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; font-weight: 600; }
.stat.shoes .v { display: inline-flex; align-items: center; gap: 5px; }
.stat .shoe { width: 26px; height: 26px; flex: none; color: var(--route-hi); }
.stat .k2 { font-size: 12px; color: var(--ink-3); }
button.stat.tap { font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
button.stat.tap .k2 { color: var(--route-hi); font-weight: 600; }
.stat .v small { font-size: 14px; color: var(--ink-2); margin-left: 2px; font-weight: 600; }
.groups h3 { margin: 0 0 6px; font: 600 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.groups li { display: grid; grid-template-columns: minmax(2.5em, auto) 1fr auto; gap: 10px; align-items: baseline; font-size: 15px; }
.groups li span:not(.num) { color: var(--ink-2); }
.groups li .num { color: var(--ink-2); font-size: 14px; }
.profile { position: relative; height: 96px; }
.profile svg { width: 100%; height: 100%; display: block; overflow: visible; }
.profile .area { fill: var(--route-hi); opacity: .16; }
.profile .lineel { fill: none; stroke: var(--route-hi); stroke-width: 2; }
.profile .grid { stroke: var(--line); stroke-width: 1; }
.profile text { fill: var(--ink-3); font: 500 11px var(--font-body); font-variant-numeric: tabular-nums; }
.profile .cursor { stroke: var(--ink); stroke-width: 1; }
.profile .dot { fill: var(--route-hi); stroke: var(--panel); stroke-width: 2; }
.noele-p { margin: 0; font-size: 13px; color: var(--ink-3); }
.ptip { position: absolute; top: -4px; transform: translate(-50%, -100%); background: var(--ink); color: var(--panel); font: 600 12px/1.2 var(--font-body); padding: 4px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.sched { margin: 0; font-size: 14px; color: var(--ink-2); display: grid; gap: 2px; }
.sched b { color: var(--ink); }
.warn { color: var(--ink-3); font-size: 13px; }
/* rows: Upcoming and Routes */
.rows { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
button.row:hover, button.row.hover { border-color: var(--ink-3); }
.row.next { border: 1.5px solid var(--route-hi); }
.row.past { opacity: .6; }
/* "I'm going" (#00014): the row opens the route (stretched button), the pill says you're going */
.row { position: relative; }
.row-hit { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.row-hit::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.row-hit:focus-visible { outline: none; } .row:has(.row-hit:focus-visible) { outline: 2px solid var(--route-hi); outline-offset: 2px; }
div.row:has(.row-hit:hover) { border-color: var(--ink-3); }
.going { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font: 600 14px/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.going svg { width: 16px; height: 16px; }
.going:hover { border-color: var(--ink-3); }
.going[aria-pressed="true"] { background: var(--act); border-color: var(--act); color: #fff; }
.going.big { min-height: 44px; padding: 10px 18px; font-size: 16px; }
/* In Upcoming the pill sits on its own line under the title, so long route names keep the full width */
.row.g { flex-wrap: wrap; row-gap: 8px; }
.row.g .row-hit { flex: 1 1 calc(100% - 34px); }
.row.g > .rm { flex: 1 1 calc(100% - 60px); }
.row.g > .going { order: 3; margin-left: 56px; min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.going-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Welcome and joining (#00041) */
.wl { display: grid; gap: 14px; }
.wl-head { display: flex; align-items: center; gap: 12px; }
.wl-mark { width: 52px; height: 52px; border-radius: 12px; background: #17211B; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wl-q { font-weight: 600; color: var(--ink) !important; }
.wl-btns { display: grid; gap: 10px; }
.wl-btns .btn { min-height: 52px; font-size: 16px; border-radius: 12px; }
.btn.outline { background: transparent; border: 2px solid var(--ink); color: var(--ink); }
.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl-steps li { display: flex; gap: 12px; }
.wl-steps .wl-step-link { display: inline-flex; margin-top: 8px; min-height: 40px; }
.wl-steps li > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
.wl-steps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--panel); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.wl-steps b { display: block; font-size: 16px; }
.wl-steps span span { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.wl-note { background: var(--ground); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
.wl-small { font-size: 13.5px !important; }
.wl-center { justify-self: center; min-height: 44px; }
/* First run at a club (Jeff 30/10): are you a member, which runs, reminders */
.fr-opts, .fr-runs { display: grid; gap: 10px; }
.fr-opt { display: grid; gap: 2px; text-align: left; padding: 14px 16px; min-height: 64px; border-radius: 14px; border: 2px solid var(--line, #D6CFBE); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.fr-opt b { font-size: 16.5px; }
.fr-opt span { font-size: 14px; color: var(--ink-2); }
.fr-opt:focus-visible { border-color: var(--ink); }
@media (hover: hover) { .fr-opt:hover { border-color: var(--ink); } } /* a tap leaves no stuck outline on a phone */
.fr-run { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; min-height: 60px; border-radius: 14px; border: 2px solid var(--line, #D6CFBE); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.fr-run .bar { width: 6px; align-self: stretch; border-radius: 3px; background: var(--gc, var(--ink)); flex-shrink: 0; }
.fr-run .grow { display: grid; gap: 2px; flex: 1; }
.fr-run b { font-size: 16px; }
.fr-run small { font-size: 13.5px; color: var(--ink-2); }
.fr-run .tick { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--ink); display: grid; place-items: center; flex-shrink: 0; color: transparent; }
.fr-run .tick svg { width: 18px; height: 18px; }
.fr-run[aria-pressed="true"] { border-color: var(--ink); }
.fr-run[aria-pressed="true"] .tick { background: var(--ink); color: var(--panel); }
.sheet:has(.fr-remind) { background: #14233A; }
.sheet .fr-remind { color: #EFEBDF; padding-top: 8px; }
.sheet .fr-remind h2 { color: #EFEBDF; }
.sheet .fr-remind p { color: #C9D0DA; }
.sheet .fr-remind p b { color: #EFEBDF; }
.fr-bell { width: 64px; height: 64px; border-radius: 18px; background: #F2C230; color: #14233A; display: grid; place-items: center; }
.fr-bell svg { width: 34px; height: 34px; }
.fr-remind .btn.dark { background: #F2C230; color: #14233A; border-color: #F2C230; }
.fr-remind .btn.outline { border-color: #EFEBDF; color: #EFEBDF; }
.guest-strip { background: #17211B; color: #FBFCFA; border-radius: 12px; padding: 10px 12px 2px; display: grid; gap: 0; }
.guest-strip p { margin: 0; font-size: 14.5px; line-height: 1.4; display: flex; gap: 10px; align-items: flex-start; }
.guest-strip p svg { flex-shrink: 0; color: #FF7A33; margin-top: 1px; }
.guest-strip .acts { display: flex; gap: 18px; flex-wrap: wrap; padding-left: 30px; }
.guest-strip .linkish { color: #FBFCFA; font-weight: 600; min-height: 44px; text-decoration: none; }
.guest-strip .linkish.hi { color: #FF9A66; }
.welcome-card { position: relative; }
.welcome-card .x { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.going-n { font-size: 14px; color: var(--ink-2); }
.dt { width: 44px; flex: none; text-align: center; }
.dt small { display: block; font: 600 11px/1.2 var(--font-body); color: var(--ink-3); text-transform: uppercase; }
.row.next .dt small { color: var(--route-hi); }
.dt b { display: block; font: 700 26px/1 var(--font-display); }
.rm { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rm b { font-weight: 600; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.rm small { font-size: 13px; color: var(--ink-2); }
.rm small.grpnote { display: block; color: var(--ink-3); margin-top: 2px; }
.chips { overflow-x: auto; }
.badge { display: inline-block; font: 700 10px/1.7 var(--font-body); letter-spacing: .08em; text-transform: uppercase; background: var(--route-hi); color: #fff; border-radius: 4px; padding: 0 6px; margin-right: 4px; vertical-align: 1px; }
.list { display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.item { display: flex; align-items: center; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item.hover, .item:hover { background: var(--ground); }
.item-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; border: 0; background: transparent; padding: 10px 4px 10px 12px; text-align: left; }
/* Routes as cards */
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rcard { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rcard:hover { border-color: var(--ink-3); }
.rcard-main { display: flex; flex-direction: column; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rcard-map { position: relative; display: block; height: 100px; background: var(--panel-2); }
.rcard-map svg, .rcard-map .rc-tile { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-line polyline { fill: none; stroke: var(--route-hi); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rc-line circle { fill: var(--ink); }
.rc-tile { object-fit: cover; opacity: 0; transition: opacity .2s; }
.rc-tile.in { opacity: 1; }
.rcard-body { display: grid; gap: 3px; padding: 9px 10px 11px; min-width: 0; }
.rcard-body .name { font-weight: 600; font-size: 14.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard-body .code { color: var(--route-hi); font-weight: 700; }
.rcard-s { font-size: 12.5px; color: var(--ink-2); }
.rcard .star { position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; border-radius: 999px; background: var(--bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.rcard .star svg { width: 19px; height: 19px; }
.routes-tools .seg2.look { flex: none; min-width: 0; width: auto; margin-left: auto; }
.seg2.look button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 36px; padding: 0; }
.seg2.look svg { width: 18px; height: 18px; }
.mapcredit { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }
.mapcredit a { color: inherit; }
.thumb { width: 52px; height: 52px; border-radius: 8px; background: var(--panel-2); display: block; }
.thumb polyline { fill: none; stroke: var(--route-hi); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.thumb circle { fill: var(--ink); }
.meta { min-width: 0; }
.meta .name { display: block; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.meta .sub2 { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.code { font: 700 12px/1.5 var(--font-body); letter-spacing: .04em; color: var(--route-hi); }
.dist { text-align: right; }
.dist b { display: block; font: 700 22px/1 var(--font-display); }
.dist small { font: 600 11px/1 var(--font-body); color: var(--ink-3); letter-spacing: .04em; }
.star { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-3); }
.star svg { width: 22px; height: 22px; }
.star[aria-pressed="true"] { color: var(--star); }
.star[aria-pressed="true"] svg { fill: var(--star); }
.routes-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.routes-tools .seg2 { flex: 1; min-width: 180px; }
.empty { padding: 20px 4px; color: var(--ink-2); display: grid; gap: 8px; }
.empty h2 { font-size: 24px; }
.empty p { margin: 0; }
/* route page */
.route-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); padding: 4px 14px 4px 8px; font-weight: 600; }
.route-top .star { border: 1px solid var(--line); border-radius: 999px; width: 44px; height: 44px; background: var(--panel); }
details.howto { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
details.howto summary { min-height: 48px; display: flex; align-items: center; padding: 10px 14px; font-weight: 600; cursor: pointer; list-style: none; }
details.howto summary::-webkit-details-marker { display: none; }
details.howto summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--ink-3); }
details.howto[open] summary::after { content: "–"; }
.howto-in { padding: 0 14px 14px; display: grid; gap: 10px; }
.howto .seg { background: var(--panel); }
.howto .seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.howto-body { font-size: 14px; color: var(--ink-2); }
.howto-body p { margin: 0 0 6px; }
.howto-body ol { margin: 0 0 6px; padding-left: 20px; }
.howto-body li { margin: 3px 0; }
/* Me */
.cr-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--ink); font: 700 21px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.cr-brand svg { width: 26px; height: 26px; flex: none; border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.cr-brand .hi { color: #FF5A0A; }
.form { display: grid; gap: 10px; }
.form label { font-weight: 600; font-size: 14px; }
.form input[type=email], .form input.code-in { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); font-size: 17px; }
.form input.code-in { font: 700 26px/1 var(--font-body); letter-spacing: 10px; text-align: center; }
/* Six boxes for the code (Jeff 30/10): the real input lies over them, see-through (club.js otpDraw) */
.otp6 { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp6 span { height: 58px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card, var(--panel)); font: 800 26px/1 var(--font-display); color: var(--ink); }
.otp6 span.on { border: 2.5px solid var(--ink); }
.form .otp6 input.code-in { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; outline: none; box-shadow: none; }
.otp6 input::selection { background: transparent; }
.msg { margin: 0; font-size: 14px; font-weight: 600; color: #B3261E; }
.msg.good { color: #1F7A4C; }
.msg:empty { display: none; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--route-hi); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--font-body); flex: none; }
.line-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.line-item:first-of-type { border-top: 0; }
.line-item .grow { flex: 1; min-width: 0; }
.line-item .grow b { display: block; font-weight: 600; }
.line-item .grow small { color: var(--ink-3); font-size: 13px; }
.club-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.club-ic svg { width: 22px; height: 22px; }
/* Notifications (#00003): an on/off switch */
.switch-row { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; }
.switch-row > .grow { flex: 1; min-width: 0; } /* the words take the room, so every switch sits at the right edge */
.switch-row > .switch { margin-left: auto; }
.switch-row b { display: block; font-size: 16px; }
.switch-row small { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.switch { appearance: none; -webkit-appearance: none; margin: 0; width: 50px; height: 30px; border-radius: 999px; background: var(--line); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch:checked { background: var(--route-hi); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--route-hi); outline-offset: 2px; }
.switch:disabled { opacity: .5; }
.torch-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
.check { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 15px; }
.check input { width: 22px; height: 22px; accent-color: var(--route-hi); flex: none; }
.news-check { align-items: flex-start; font-size: 14px; font-weight: 400; color: var(--ink-2); line-height: 1.4; min-height: 0; text-transform: none; letter-spacing: 0; }
.news-check input { margin-top: 1px; }
/* ---------- Map overlays ---------- */
.maptools { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; gap: 6px; }
/* The map's own controls are light in both themes (like MapLibre's + / − / location buttons), so they read on any map */
.maptools .seg { background: #fff; border-color: transparent; box-shadow: 0 0 0 2px rgba(0,0,0,.1); border-radius: 4px; }
.maptools .seg button { color: #555; }
.maptools .seg button[aria-pressed="true"] { background: #DFE5E1; color: #17211B; }
.maptools .seg button:hover { background: #F2F4F2; color: #17211B; }
/* Full-screen map on phones (05/10/2026): the expand button beside the style switch */
.mapbig { display: none; width: 34px; height: 34px; border: 0; border-radius: 4px; background: #fff; color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,.1); align-items: center; justify-content: center; padding: 0; cursor: pointer; }
@media (hover: hover) { .mapbig:hover { background: #F2F4F2; } }
.mapbig svg { width: 18px; height: 18px; }
.kmpin { font: 700 11px/18px var(--font-display); background: var(--panel); color: var(--ink); border: 2px solid var(--route-hi); border-radius: 999px; min-width: 22px; height: 22px; text-align: center; padding: 0 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pop { animation: pinpop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pinpop { from { transform: scale(0); opacity: 0; } }
/* Scrubbing along the graph with a finger moves the dot on the map; up-and-down still scrolls the page */
.profile svg { touch-action: pan-y; }
.hnote { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); } .hnote a { color: inherit; }
.sfpin { width: 16px; height: 16px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.sfpin.start { background: #1FA35A; }
.sfpin.finish { background: #17211B; }
/* Route tags and notes (#00060) */
.chip.static { cursor: default; }
.sm-route { display: grid; gap: 6px; }
.sm-row, .sm-hill summary { display: flex; align-items: center; gap: 10px; }
.sm-row > svg, .sm-hill summary > svg { width: 22px; height: 22px; color: var(--act); flex: none; }
.sm-row .grow, .sm-hill .grow { flex: 1; display: grid; gap: 1px; min-width: 0; } .sm-row small, .sm-hill small { color: var(--ink-2); font-size: 13.5px; }
.sm-how { margin: 0; font-size: 13.5px; }
.sm-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--act) 14%, var(--panel)); color: var(--act); flex: none; } .sm-ic svg { width: 24px; height: 24px; }
.sm-medal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #C99A12; color: #fff; flex: none; } .sm-medal svg { width: 28px; height: 28px; }
.sm-sheet { display: grid; gap: 12px; }
.sm-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sm-tot > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; } .sm-tot span { color: var(--ink-2); font-size: 13.5px; } .sm-tot .num { font-size: 30px; line-height: 1.1; }
.sm-h { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.sm-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sm-board li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.sm-board li.you { border-color: var(--act); } .sm-board .pos { width: 1.6em; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sm-board .grow { flex: 1; }
.sm-empty { margin: 0; }
.sm-hill { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--panel); } .sm-hill summary { cursor: pointer; list-style: none; } .sm-hill summary::-webkit-details-marker { display: none; }
.sm-hill[open] { display: grid; gap: 8px; } .sm-hill p { margin: 0; }
.sm-king { font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #C99A12 18%, var(--panel)); white-space: nowrap; } .sm-king.you { background: var(--act); color: #fff; }
.tabs.naming #tab-groups-label, .tabs.naming #tab-next-label { visibility: hidden; }
.wxout { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 18px; }
.wxout .wxi { width: 32px; height: 32px; flex: none; }
.segn { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--act); color: #fff; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.of-sec { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.of { display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.of-bwrap { position: relative; }
.of-bwrap > .ad-wrap { position: absolute; top: 8px; right: 8px; }
.ad-wrap { position: relative; display: inline-block; margin-left: 6px; vertical-align: 1px; }
.ad-badge { font: 700 11.5px/1 var(--font-body); letter-spacing: .03em; padding: 4px 7px; border-radius: 6px; border: 0; background: rgba(20,20,20,.72); color: #fff; cursor: pointer; }
.of-biz .ad-badge, .fk .ad-badge { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.ad-tip { position: absolute; z-index: 5; right: 0; top: calc(100% + 6px); width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--panel); font: 400 13px/1.4 var(--font-body); box-shadow: 0 6px 18px rgba(0,0,0,.2); text-align: left; }
.of-biz .ad-tip, .fk .ad-tip { left: 0; right: auto; }
.of-banner { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; background: var(--panel-2); }
.of.has-banner { padding-top: 12px; }
.of-top { display: flex; gap: 12px; align-items: center; } .of-top .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.of-logo { border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex: none; }
.of-letter { display: grid; place-items: center; background: color-mix(in srgb, var(--act) 14%, var(--panel)); color: var(--act); font: 700 20px/1 var(--font-display, inherit); border: 0; }
.of-biz { margin: 0; color: var(--ink-2); font-size: 13.5px; } .of-h { font-size: 17px; line-height: 1.25; }
.of-d, .of-meta, .of-terms p { margin: 0; font-size: 14px; } .of-meta { color: var(--ink-2); font-size: 13px; }
.of-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.of-code { display: inline-flex; gap: 8px; align-items: center; } .of-code code { font: 700 16px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.of-used { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); font-weight: 600; } .of-used svg { width: 16px; height: 16px; }
.of-terms summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.of-note { margin: 0; font-size: 13px; }
.mcard-wrap { display: grid; gap: 12px; }
.mc-check { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.25); font-size: 14px; line-height: 1.35; }
.mc-qr { flex: none; width: 104px; height: 104px; background: #fff; border-radius: 10px; padding: 4px; }
.mc-qr svg { display: block; width: 100%; height: 100%; }
.mc-tick { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.mc-tick i { display: block; height: 100%; background: #fff; transition: width 1s linear; }
/* A slow sheen across the card: a screen recording looks alive, a screenshot doesn't (#00144) */
.mcard { position: relative; overflow: hidden; }
.mcard::after { content: ""; position: absolute; inset: -50% auto -50% -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-12deg); animation: mc-sheen 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes mc-sheen { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .mcard::after { animation: none; display: none; } }
.mc-mini { flex: none; width: 44px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, var(--act), color-mix(in srgb, var(--act) 55%, #000)); position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.mc-mini span { position: absolute; left: 6px; bottom: 6px; width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.8); box-shadow: 0 -6px 0 rgba(255,255,255,.5); }
/* Google's own "Add to Google Wallet" button (public/brand/google-wallet): used as it comes, at least 48 px tall and no
smaller than the buttons beside it, with 8 px clear space; only a focus ring and a press are ours */
.gwallet { display: block; margin: 8px auto; padding: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; line-height: 0; }
.gwallet img { display: block; height: 52px; width: auto; max-width: 100%; }
.gwallet:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
.gwallet:active { transform: scale(.98); }
.gwallet:disabled { opacity: .6; cursor: progress; }
.mc-saved { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; color: var(--ink); font-weight: 600; } /* the card is already in Apple Wallet (Jeff 29/10) */
.mc-saved svg { width: 20px; height: 20px; flex: none; }
.mc-saved .linkish { font-weight: 500; min-height: 44px; }
.mcard { display: grid; gap: 6px; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--act), color-mix(in srgb, var(--act) 55%, #000)); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.mc-top { display: flex; justify-content: space-between; align-items: center; } .mc-club { font: 700 18px/1.1 var(--font-display, inherit); text-transform: uppercase; letter-spacing: .02em; }
.mc-tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.22); }
.mc-name { font-size: 26px; line-height: 1.15; margin-top: 8px; } .mc-since { opacity: .85; font-size: 14px; }
.mc-offer { display: grid; gap: 2px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.16); } .mc-offer span { opacity: .85; font-size: 13px; }
.mc-live { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 14px; } .mc-live .num { font-weight: 700; font-size: 18px; }
.mc-dot { width: 10px; height: 10px; border-radius: 50%; background: #7CFF9B; animation: mcpulse 1.2s ease-in-out infinite; }
@keyframes mcpulse { 50% { opacity: .3; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .mc-dot { animation: none; } }
.rnotes:empty { display: none; }
#note-err { color: #B3261E; font-size: 14px; margin: 6px 0 0; min-height: 0; }
.rnotes { display: grid; gap: 8px; }
.rn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rn-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rn { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; }
.rn.temp { box-shadow: inset 3px 0 0 #E0A21B; }
.rn p { margin: 3px 0 0; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rn-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.rn-meta b { color: var(--ink); font-size: 13.5px; }
.rn-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B4A00; background: #FBE7B5; border-radius: 6px; padding: 1px 6px; }
.rn-del { margin-left: auto; font-size: 13px; }
.rn-none, .rn-signin { margin: 0; font-size: 14px; }
.note-body { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); resize: vertical; }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--act); }
.check-row span { display: grid; gap: 2px; } .check-row small { color: var(--ink-2); font-size: 13px; }
.friend-form { display: flex; gap: 8px; margin-top: 12px; } .friend-form input { flex: 1; min-width: 0; }
#friend-err { color: #B3261E; font-size: 14px; margin: 6px 0 0; }
.goodtoknow { display: grid; gap: 2px; background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }
.goodtoknow span { color: var(--ink-2); white-space: pre-wrap; }
/* Announcements (#00057) */
.ann { position: relative; display: grid; gap: 3px; padding: 12px 40px 12px 14px; border-radius: 12px; background: var(--panel-2); border-left: 4px solid var(--route-hi); font-size: 14.5px; }
.ann b { font-size: 15.5px; }
.ann span { color: var(--ink-2); white-space: pre-wrap; }
.ann-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; }
/* Run-day changes (#00056) */
#sheet-title:focus { outline: none; }
.sheet { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ms-list { display: grid; gap: 4px; }
.ms-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ms-ic.on { background: var(--act); border-color: var(--act); color: #fff; }
.ms-last { opacity: .9; }
.cabinet { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.cabinet .grow { flex: 1; display: grid; gap: 2px; min-width: 0; } .cabinet small { color: var(--ink-2); font-size: 13.5px; }
.cabinet .shelf { display: flex; gap: 0; } .cabinet .shelf svg { margin-left: -8px; }
.cabinet > svg:last-child { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.medal-art { object-fit: contain; flex: none; } .medal-art.m-off { filter: grayscale(1); opacity: .45; }
.medal .disc { fill: #D9DED7; } .medal .rim { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.medal { color: #fff; flex: none; } .medal.m-off { color: #9AA59D; } .medal.m-off .rim { stroke: rgba(255,255,255,.7); }
.medal .rb { fill: #2F55D4; } .medal .rb.r2 { fill: #C8102E; }
.medal.t-start .disc { fill: var(--act); } .medal.t-bronze .disc { fill: #B4682B; } .medal.t-silver .disc { fill: #8E99A0; }
.medal.t-gold .disc { fill: #C99A12; } .medal.t-sponsored .disc { fill: #17211B; } .medal.t-sponsored .rb { fill: #C99A12; } .medal.t-sponsored .rb.r2 { fill: #8A6A00; }
.tc .tc-sp { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .medal.t-platinum .disc { fill: #4F7F96; } .medal.t-special .disc { fill: #6B3FA8; }
:root[data-theme="dark"] .medal.m-off .disc { fill: #2E3933; } :root[data-theme="dark"] .medal.m-off { color: #6E7A72; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .medal.m-off .disc { fill: #2E3933; } :root:not([data-theme="light"]) .medal.m-off { color: #6E7A72; } }
.tc-set h3 { margin: 8px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tc { display: grid; justify-items: center; gap: 2px; text-align: center; font: inherit; color: var(--ink); background: none; border: 1px solid transparent; border-radius: 12px; padding: 8px 4px; cursor: pointer; }
.tc b { font-size: 13px; font-weight: 600; line-height: 1.2; } .tc small { font-size: 12px; color: var(--ink-2); }
.tc:not(.won) b { color: var(--ink-2); font-weight: 500; }
.tc.sel { border-color: var(--line); background: var(--ground); }
.tc-how { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ground); font-size: 14.5px; position: sticky; bottom: 0; }
.clubseg { margin-bottom: 2px; }
.feed { display: grid; gap: 12px; }
.fi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.fi.ann { background: color-mix(in srgb, var(--route-hi) 8%, var(--panel)); }
.fi.ann.pin { border-color: color-mix(in srgb, var(--route-hi) 45%, transparent); }
.fi .fk { margin: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.fi .fh { font-size: 17px; line-height: 1.3; }
.fi .ff, .fi .fb, .fi .fn { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.fi .fn { color: var(--ink); border-left: 3px solid var(--act); padding-left: 10px; }
.fi .fa { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.fi .fw { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.fphotos { display: grid; gap: 4px; border-radius: 10px; overflow: hidden; }
.fphotos.n1 { grid-template-columns: 1fr; } .fphotos.n2 { grid-template-columns: 1fr 1fr; } .fphotos.n3 { grid-template-columns: repeat(3, 1fr); }
.fph { position: relative; padding: 0; border: 0; background: var(--ground); aspect-ratio: 1; cursor: pointer; overflow: hidden; }
.fphotos.n1 .fph { aspect-ratio: 4 / 3; }
.fph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fph .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font: 700 22px var(--font-display); }
.fph .flag { position: absolute; left: 6px; top: 6px; background: #B3261E; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.phview { margin: -4px -4px 0; border-radius: 12px; overflow: hidden; background: #000; display: grid; place-items: center; max-height: 70dvh; }
.phview img { max-width: 100%; max-height: 70dvh; display: block; }
.phacts { display: flex; gap: 8px; flex-wrap: wrap; } .phacts .btn { flex: 1; }
.cele-row { display: flex; gap: 12px; align-items: center; } .cele-row > div { display: grid; gap: 3px; min-width: 0; }
.fi.cele { background: color-mix(in srgb, #C99A12 8%, var(--panel)); }
.fi.race .ff b { color: var(--ink); font-weight: 600; }
.share-row { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.tc-share { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--ground); font-size: 14px; }
.cheer { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 13.5px var(--font-body); cursor: pointer; }
.cheer svg { width: 17px; height: 17px; }
.cheer[aria-pressed="true"] { border-color: var(--act); background: color-mix(in srgb, var(--act) 10%, var(--panel)); color: var(--act); }
.rec-season { background: var(--act); color: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.rec-season .lbl { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.rec-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rec-stats b { display: block; font: 700 36px/1 var(--font-display); }
.rec-stats span { font-size: 13px; opacity: .88; }
.rec-weeks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.rec-weeks i { height: 14px; border-radius: 3px; background: rgba(255,255,255,.22); }
.rec-weeks i.on { background: #fff; }
.rec-line { margin: 0; font-size: 14px; opacity: .95; }
.rec-share { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--act); font: 700 14px/1 var(--font-body); cursor: pointer; }
.rec-share svg { width: 16px; height: 16px; }
.goal { display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.goal-h { display: flex; align-items: baseline; gap: 8px; }
.goal-h .lbl { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.goal-h b { font: 700 20px/1 var(--font-display); }
.goal-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: var(--act); border-radius: 5px; }
.goal small { color: var(--ink-2); font-size: 13.5px; }
.rec-next { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; }
.rec-next .grow { flex: 1; display: grid; gap: 2px; }
.rec-next small { color: var(--ink-2); font-size: 13.5px; }
.rec-next > svg { width: 18px; height: 18px; color: var(--ink-2); }
.ring { --p: 0; width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--act) calc(var(--p) * 1%), var(--line) 0); }
.ring > span { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 700 15px/1 var(--font-display); }
.ms { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.ms .grow { flex: 1; display: grid; gap: 3px; } .ms small { color: var(--ink-2); font-size: 13px; }
.ms-ic { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.ms.done .ms-ic { background: var(--act); border-color: var(--act); color: #fff; } .ms-ic svg { width: 14px; height: 14px; }
.ms:not(.done) b { font-weight: 500; }
.ms-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .ms-bar i { display: block; height: 100%; background: var(--act); }
.daystrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.daystrip > :only-child { grid-column: 1 / -1; }
.dtile { align-content: start; min-height: 88px; }
.dtile .v.sm { font-size: 20px; line-height: 1.1; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wxtile .wxi { width: 22px; height: 22px; flex: none; }
.wxtile .wxw { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.wxtile.warn { border-color: transparent; }
.wxtile.warn .k, .wxtile.warn .k2 { color: inherit; opacity: .85; }
.wxtile.yellow { background: #FFE14D; color: #2B2400; }
.wxtile.amber { background: #FF9A1F; color: #2B1600; }
.wxtile.red { background: #C8102E; color: #fff; }
.nx-head { display: flex; align-items: flex-start; gap: 12px; }
.nx-head .grow { flex: 1; min-width: 0; }
.shoebadge { flex: none; display: grid; justify-items: center; gap: 2px; margin-top: 18px; padding: 8px 8px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 58px; }
.shoebadge .shoe { width: 30px; height: 30px; color: var(--route-hi); }
.shoebadge small { font: 600 11px/1.15 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.seg2.two button { display: grid; gap: 1px; padding: 6px 4px; min-height: 52px; }
.seg2.two button b { font-weight: 600; } .seg2.two button small { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.dtile { display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dtile .k { font: 600 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dtile .v { font: 700 24px/1.05 var(--font-display); }
.dtile .k2 { font-size: 13px; color: var(--ink-2); }
button.dtile { font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.dtile.act { background: var(--act); border-color: var(--act); color: #fff; }
.dtile.act .k { color: #fff; opacity: .85; }
.dtile.act .v, .dtile.done .v { display: inline-flex; align-items: center; gap: 6px; }
.dtile.ask { border: 1.5px dashed var(--ink-3); }
.dtile.ask .v { color: var(--route-hi); }
.dtile .v svg { width: 20px; height: 20px; }
.dtile.done { border: 1.5px solid #2E8B57; } .dtile.done .v svg { color: #2E8B57; }
.dtile .k2.linkish { justify-self: start; font-size: 13px; }
.dtile.dark { background: #2A2112; border-color: #2A2112; color: #F5D9A8; }
.dtile.dark .k { color: #F5D9A8; opacity: .85; }
.dtile.dark .v { color: #F5B54A; }
.dtile.act .k2, .dtile.dark .k2 { color: inherit; opacity: .85; }
/* Take water (14/10/2026): the head torch tile's summer counterpart, the same fixed colours in light and dark */
.dtile.water { background: #0F2E4A; border-color: #0F2E4A; color: #CFE6FA; }
.dtile.water .k, .dtile.water .k2 { color: inherit; opacity: .85; }
.dtile.water .v { color: #6EC1FF; }
.pace { display: grid; gap: 6px; }
.pace-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pace-h span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pace-h small { font-size: 13px; color: var(--ink-2); }
.pg { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 6px 12px; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pg.on { border: 1.5px solid var(--act); background: color-mix(in srgb, var(--act) 8%, var(--panel)); }
.pg-p { flex: none; min-width: 64px; font: 700 20px/1 var(--font-display); }
.pg-m { flex: 1; display: grid; gap: 1px; min-width: 0; }
.pg-m b { font-size: 15px; } .pg-m small { font-size: 13px; color: var(--ink-2); }
.pg-c { flex: none; font-weight: 700; font-size: 13.5px; color: var(--route-hi); }
.wx.warn { border-color: transparent; }
.wx.warn small { color: inherit; opacity: .85; }
.wx.yellow { background: #FFE14D; color: #2B2400; }
.wx.amber { background: #FF9A1F; color: #2B1600; }
.wx.red { background: #C8102E; color: #fff; }
.wxtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.wxtable th, .wxtable td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wxtable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 600; }
.wxtable .wxi { width: 22px; height: 22px; display: block; }
.wxtable small { color: var(--ink-2); }
.wxwarn { border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.wxwarn .lbl { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.wxwarn .wxw { width: 20px; height: 20px; }
.wxwarn p, .wxwarn ul { margin: 0; } .wxwarn ul { padding-left: 18px; }
.wxwarn a { color: inherit; font-weight: 600; }
.wxwarn .muted { color: inherit; opacity: .85; }
.wxwarn.yellow { background: #FFE14D; color: #2B2400; } .wxwarn.amber { background: #FF9A1F; color: #2B1600; } .wxwarn.red { background: #C8102E; color: #fff; }
.wxfoot { margin: 0; font-size: 13px; }
.checkin { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 12px 12px 14px; background: color-mix(in srgb, var(--act) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--act) 40%, transparent); }
.checkin > span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.checkin b { font-weight: 700; font-size: 16px; }
.checkin small { color: var(--ink-2, inherit); font-size: 13.5px; }
.checkin .btn.primary { min-height: 46px; padding: 0 18px; font-size: 16px; flex: none; }
.checkin.done { color: var(--ink); }
.checkin.done > svg { width: 24px; height: 24px; color: var(--act); flex: none; }
.checkin .linkish { font-size: inherit; padding: 0; }
.daynote { display: grid; gap: 2px; border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--route-hi) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--route-hi) 35%, transparent); font-size: 14.5px; }
.daynote b { font-weight: 700; }
.daynote.off { background: color-mix(in srgb, #C0392B 12%, var(--panel)); border-color: color-mix(in srgb, #C0392B 45%, transparent); }
.daynote.off b { color: #B3261E; text-transform: uppercase; letter-spacing: .04em; }
.row.cancelled .rm b { text-decoration: line-through; opacity: .7; }
.row .rm em { font-style: normal; font-weight: 700; color: var(--route-hi); }
.row.cancelled .rm em { color: #B3261E; }
/* Release number at the bottom of the Me tab (#00052) */
.relline { display: none; margin: -8px 0 0; padding: 0 18px 16px; font-size: 12px; color: var(--ink-3); }
.app[data-view="me"] .relline:not(:empty) { display: block; }
/* Show my location (#00051) */
.locate a { display: flex; align-items: center; justify-content: center; }
.leaflet-bar.locate a.on, .maplibregl-ctrl.locate button.on { color: #1A73E8; }
.maplibregl-ctrl.locate button { display: flex; align-items: center; justify-content: center; color: #333; }
.locate button.finding svg { animation: locspin 1.2s linear infinite; }
.cr-tip .maplibregl-popup-content { padding: 5px 9px; border-radius: 8px; font: 600 12.5px/1.3 var(--font-body); color: #17211B; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.maplibregl-ctrl-attrib a { color: inherit; }
.locate a.finding svg { animation: locspin 1.2s linear infinite; }
@keyframes locspin { to { transform: rotate(360deg); } }
.locdot { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #1A73E8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); box-sizing: border-box; }
.locdot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(26,115,232,.45); animation: locpulse 2s ease-out infinite; z-index: -1; }
@keyframes locpulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.locring { fill: #1A73E8; fill-opacity: .12; stroke: #1A73E8; stroke-opacity: .35; }
@media (prefers-reduced-motion: reduce) { .locdot::after, .locate a.finding svg, .locate button.finding svg { animation: none; } }
/* ---------- Footer, toast, pop-ups ---------- */
.foot { border-top: 1px solid var(--line); padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.foot a, .foot button { color: var(--ink-3); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; }
.foot a:hover, .foot button:hover { text-decoration: underline; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2100; background: var(--ink); color: var(--panel); padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.modal { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 20, 17, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet { width: min(440px, 100%); background: var(--panel); border-radius: 18px; padding: 20px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.sheet .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--ground); display: flex; align-items: center; justify-content: center; color: var(--route-hi); }
.sheet h2 { margin: 0; font: 700 28px/1 var(--font-display); text-transform: uppercase; }
.sheet p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
/* Leaflet theming */
.leaflet-container { font-family: var(--font-body); background: var(--panel-2); }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-control-attribution.cr-credit.min { font-size: 0; width: 24px; height: 24px; padding: 0; margin: 0 6px 6px 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.88); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.leaflet-control-attribution.cr-credit.min * { display: none; }
.leaflet-control-attribution.cr-credit.min::before { content: "i"; display: block; font: italic 700 14px/24px Georgia, serif; text-align: center; color: #333; }
.tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85) saturate(.6); }
.leaflet-bar a { background: #fff; color: #333; border-bottom-color: #ddd; }
.leaflet-bar a:hover { background: #F2F4F2; }
/* ---------- Phones: one column, map above the Next run and route pages, tabs along the bottom ---------- */
@media (max-width: 760px) {
html, body { height: auto; }
.app { display: flex; flex-direction: column; min-height: 100%; height: auto; padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); }
.side { display: contents; }
.top { order: 1; background: var(--panel); padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.mapwrap { order: 2; height: 40vh; min-height: 240px; display: none; }
.app[data-view="next"] .mapwrap, .app[data-view="route"] .mapwrap { display: block; }
.views { order: 3; overflow: visible; background: var(--panel); flex: 1; }
.foot { order: 4; background: var(--panel); padding-bottom: 14px; }
.app:not([data-view="me"]) .foot { display: none; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
.tab[aria-selected="true"]::after { top: -1px; bottom: auto; border-radius: 0 0 3px 3px; }
.view { padding: 16px 16px 24px; }
.maptools { top: 8px; right: 8px; }
.mapbig { display: inline-flex; }
/* Full screen: the map fills everything above the tab bar; a tab, the button, Back or Escape shrink it again */
.app.mapfull .mapwrap { position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); height: auto; z-index: 1400; }
.app.mapfull .maptools { top: calc(8px + env(safe-area-inset-top, 0px)); }
.app.mapfull .maplibregl-ctrl-top-left, .app.mapfull .leaflet-top.leaflet-left { margin-top: env(safe-area-inset-top, 0px); }
.toast { bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom, 0px)); }
.modal { align-items: flex-end; padding: 0; }
.sheet { width: 100%; border-radius: 20px 20px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
/* ---------- The new club page (release 0.5, #00114) ---------- */
:root[data-theme="dark"] { --bar: rgba(22, 29, 25, .68); --bar-line: rgba(255, 255, 255, .08); --glass: rgba(22, 29, 25, .66); --glass-on: rgba(255, 255, 255, .14); --glass-ink: #E6ECE7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar: rgba(22, 29, 25, .68); --bar-line: rgba(255, 255, 255, .08); --glass: rgba(22, 29, 25, .66); --glass-on: rgba(255, 255, 255, .14); --glass-ink: #E6ECE7; } }
/* Frosted glass: the map is a layer behind everything on it */
.mapwrap .maptools .seg, .mapwrap .mapbig, .mapwrap .maplibregl-ctrl-group, .mapwrap .leaflet-bar {
background: var(--glass) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
box-shadow: 0 0 0 1px var(--bar-line), 0 2px 10px rgba(0, 0, 0, .10) !important; border: 0 !important; border-radius: 10px !important; overflow: hidden; }
.mapwrap .maptools .seg button, .mapwrap .maplibregl-ctrl-group button, .mapwrap .leaflet-bar a { background: transparent !important; color: var(--glass-ink) !important; }
.mapwrap .mapbig { color: var(--glass-ink) !important; } /* the full-screen button is its own glass pane (it lost its background here, so its icon all but vanished on a pale map) */
.mapwrap .maptools .seg button[aria-pressed="true"] { background: var(--glass-on) !important; }
/* Hover only where there's a mouse: on a touch screen it stuck on after a tap (Jeff 09/10, iPad mini) */
@media (hover: hover) { .mapwrap .maptools .seg button:hover, .mapwrap .maplibregl-ctrl-group button:hover, .mapwrap .leaflet-bar a:hover { background: var(--glass-on) !important; }
.mapwrap .mapbig:hover { background: linear-gradient(var(--glass-on), var(--glass-on)), var(--glass) !important; } }
.mapwrap .mapbig:active { background: linear-gradient(var(--glass-on), var(--glass-on)), var(--glass) !important; }
.mapwrap .maplibregl-ctrl-group button + button { border-top: 1px solid var(--bar-line) !important; }
.mapwrap .leaflet-bar a { border-bottom-color: var(--bar-line) !important; }
.mapwrap .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: var(--icon-filter, none); }
:root[data-theme="dark"] { --icon-filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --icon-filter: invert(1); } }
.mapwrap .maplibregl-ctrl.locate button.on, .mapwrap .leaflet-bar.locate a.on { color: #1A73E8 !important; }
/* The tab bar is glass too: on a full-screen map the map carries on underneath it */
.tabs { background: var(--bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
:root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .tab[aria-selected="true"] { color: var(--route-hi); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow, :root:not([data-theme="light"]) .tab[aria-selected="true"] { color: var(--route-hi); } }
.kind { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font: 600 12px/1 var(--font-body); white-space: nowrap; }
.kind.club { background: #DCE3FA; color: #1F3FA8; }
.kind.member { background: #FBEBD2; color: #7A3E00; }
.kind.posted { background: #E9E1F7; color: #4B2A85; }
.kind.race { background: #F3DCE6; color: #7A1F45; }
:root[data-theme="dark"] .kind.club { background: #22305A; color: #C9D4FF; } :root[data-theme="dark"] .kind.member { background: #4A3415; color: #F6D6A8; } :root[data-theme="dark"] .kind.posted { background: #352A4D; color: #DCCBFA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind.club { background: #22305A; color: #C9D4FF; } :root:not([data-theme="light"]) .kind.member { background: #4A3415; color: #F6D6A8; } :root:not([data-theme="light"]) .kind.posted { background: #352A4D; color: #DCCBFA; } }
.kline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.rm .kline { margin-bottom: 3px; }
.going.no { background: var(--panel-2); border-color: var(--panel-2); color: var(--ink-2); }
.answer { display: grid; gap: 8px; }
.answer .btn { min-height: 52px; font-size: 16px; }
.answer .btn[aria-pressed="true"] { border: 2px solid var(--route-hi); }
.nx-actions { display: flex; gap: 8px; }
.nx-actions .going.big { flex: 1; justify-content: center; border-radius: 12px; min-height: 48px; }
.nx-send { width: 100%; }
.nx-actions .nx-send { flex: 1; width: auto; } /* run day: "I'm going" is up top, so Send sits beside the download */
.iconbtn { flex: none; width: 48px; min-height: 48px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); padding: 0; text-decoration: none; }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn.wa { background: #E5F5EA; border-color: #BFE3CB; color: #0E5A2B; }
.cantmake { justify-self: start; font-size: 14px; color: var(--ink-2); }
.alsoup { display: grid; gap: 8px; }
.alsoup .head { display: flex; align-items: baseline; justify-content: space-between; }
.mini { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.mini .t { display: flex; align-items: center; gap: 8px; } .mini .t b { flex: 1; min-width: 0; font-size: 15px; }
.mini .t button.open { all: unset; cursor: pointer; flex: 1; min-width: 0; font-weight: 700; font-size: 15px; }
.fab { position: fixed; right: 18px; bottom: calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 1450; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 25px; border: 0; background: var(--act); color: #fff; font: 700 15px/1 var(--font-body); box-shadow: 0 6px 18px rgba(0,0,0,.2); text-decoration: none; cursor: pointer; }
.fab svg { width: 20px; height: 20px; }
@media (min-width: 761px) { .fab { position: static; justify-self: start; box-shadow: none; } }
.gcard { gap: 8px; }
.gcard .gtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.gcard .gmid { display: flex; align-items: center; gap: 10px; }
.gcard .gmid > div { flex: 1; min-width: 0; } .gcard b { font-size: 16px; display: block; }
.gcard p { margin: 0; }
.btn.following { background: #DDF0E3; border-color: #BEE0C8; color: #14532D; }
.btn.following svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .btn.following { background: #173A24; border-color: #24563A; color: #BFEAD0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.following { background: #173A24; border-color: #24563A; color: #BFEAD0; } }
.locked { border-style: dashed; background: transparent !important; }
.ghost { height: 12px; border-radius: 6px; background: var(--panel-2); }
.form2 { display: grid; gap: 12px; }
.form2 label { font: 600 13px/1.3 var(--font-body); color: var(--ink-2); display: grid; gap: 5px; min-width: 0; }
.form2 input, .form2 select, .form2 textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 400 16px/1.3 var(--font-body); }
.form2 .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* iPhone draws date and time boxes at their own minimum width, which pushed Post a run's When/Time row past the screen
edge so the sheet slid sideways (Jeff's video 06/11): they shrink to their column like the other boxes */
.form2 input, .form2 select, .form2 textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
.form2 input[type="date"], .form2 input[type="time"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
.form2 input[type="date"]::-webkit-date-and-time-value, .form2 input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.note { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2); margin: 0; }
.set { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); padding: 8px 0; text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.set:first-of-type { border-top: 0; }
.set b { flex: 1; font-size: 15px; } .set .v { color: var(--ink-3); font-size: 14px; text-align: right; }
.seg3 { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.seg3 button { border: 0; background: transparent; padding: 7px 11px; font: 600 13px/1.2 var(--font-body); color: var(--ink-3); }
.seg3 button[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.me-top { display: flex; align-items: center; gap: 12px; }
.me-top .avatar { width: 52px; height: 52px; font-size: 20px; }
.me-top h2 { font-size: 30px; }
.perk { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .perk svg { width: 20px; height: 20px; flex: none; color: var(--route-hi); margin-top: 1px; }
.radio-list { display: grid; gap: 6px; } .radio-list label { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .radio-list input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--route-hi); }
.mapbrand { display: none; }
/* Upcoming rows: the answer on the right, as in the mock-ups */
.row.g { flex-wrap: nowrap; }
.row.g .row-hit { flex: 1 1 auto; }
.row.g > .rm { flex: 1 1 auto; }
.row.g > .going { order: 0; margin-left: 0; align-self: center; }
.row.g > .chev { display: none; }
.row .rm b { display: block; }
.answer .btn svg { width: 18px; height: 18px; }
#v-upcoming { padding-bottom: 96px; }
@media (max-width: 760px) { .view > .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; } .view > .chips .chip { flex: none; } }
/* ---------- Map buttons: all the same square of frosted glass (release 0.5) ---------- */
.mapwrap .maptools { top: 10px; right: 10px; flex-direction: column; align-items: flex-end; gap: 8px; }
.mapwrap .mapbtn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.mapwrap .mapbtn svg { width: 20px; height: 20px; }
.mapwrap .mapbtn, .mapwrap .stylemenu, .mapwrap .maplibregl-ctrl-group, .mapwrap .leaflet-bar {
background: var(--glass) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--glass-ink) !important;
border: 0 !important; border-radius: 12px !important; box-shadow: 0 0 0 1px var(--bar-line), 0 2px 10px rgba(0, 0, 0, .12) !important; overflow: hidden; }
.mapwrap .mapbtn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--act), 0 2px 10px rgba(0, 0, 0, .12) !important; }
.mapwrap .maplibregl-ctrl-group button, .mapwrap .leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
.mapwrap .maplibregl-ctrl-top-left .maplibregl-ctrl, .mapwrap .leaflet-top.leaflet-left .leaflet-control { margin: 10px 0 0 10px; }
.mapwrap .maplibregl-ctrl-top-left .maplibregl-ctrl + .maplibregl-ctrl, .mapwrap .leaflet-top.leaflet-left .leaflet-control + .leaflet-control { margin-top: 8px; }
.mapwrap .stylemenu { position: absolute; top: 48px; right: 48px; display: grid; min-width: 132px; padding: 4px; }
.mapwrap .stylemenu[hidden] { display: none; }
.mapwrap .stylemenu button { border: 0; background: transparent; color: var(--glass-ink); text-align: left; padding: 10px 12px; border-radius: 8px; font: 600 14px/1.2 var(--font-body); }
.mapwrap .stylemenu button[aria-pressed="true"] { background: var(--glass-on); }
.mapwrap .stylemenu button[aria-pressed="true"]::after { content: "✓"; float: right; }
@media (min-width: 761px) { .mapwrap .mapbig { display: none; } }
@media (max-width: 760px) {
:root { --barh: calc(56px + env(safe-area-inset-top, 0px)); }
.mapbrand { display: none !important; }
/* The club's name: a frosted bar fixed across the top of every tab; on Next run and route pages the map runs under it */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 1300; min-height: var(--barh); padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; align-content: center;
background: var(--bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--bar-line); }
.brand h1 { font-size: 24px; }
.app { padding-top: var(--barh); }
.app[data-view="next"], .app[data-view="route"] { padding-top: 0; }
.app[data-view="next"] .mapwrap, .app[data-view="route"] .mapwrap { height: 40vh; height: 40svh; transition: height .25s ease; }
.app.dragging .mapwrap { transition: none; }
.app.maptall[data-view="next"] .mapwrap, .app.maptall[data-view="route"] .mapwrap { height: var(--map-tall); }
/* No redrawing while the handle moves: the map is always its tall size and the box shows more or less of it */
:root { --map-tall: max(40vh, calc(100vh - 250px)); }
@supports (height: 100svh) { :root { --map-tall: max(40svh, calc(100svh - 250px)); } }
.app[data-view="next"] .mapwrap, .app[data-view="route"] .mapwrap { overflow: hidden; }
.app[data-view="next"] #map, .app[data-view="route"] #map { bottom: auto; height: var(--map-tall); }
.app.mapfull[data-view] #map { bottom: 0; height: auto; }
/* the map's credits stay on screen at the bottom of the part that shows, above the details' rounded top */
.app[data-view="next"] .maplibregl-ctrl-bottom-right, .app[data-view="next"] .maplibregl-ctrl-bottom-left, .app[data-view="next"] .leaflet-bottom,
.app[data-view="route"] .maplibregl-ctrl-bottom-right, .app[data-view="route"] .maplibregl-ctrl-bottom-left, .app[data-view="route"] .leaflet-bottom { transform: translateY(calc(-1 * (var(--map-hidden, 0px) + var(--sheet-lap, 22px)))); transition: transform .25s ease; } /* + clear of the details, which overlap the map by 16px */
.app.dragging .maplibregl-ctrl-bottom-right, .app.dragging .maplibregl-ctrl-bottom-left, .app.dragging .leaflet-bottom { transition: none; }
.app.mapfull .maplibregl-ctrl-bottom-right, .app.mapfull .maplibregl-ctrl-bottom-left, .app.mapfull .leaflet-bottom { transform: none; }
.app[data-view="next"] .maptools, .app[data-view="route"] .maptools { top: calc(var(--barh) + 10px); right: 10px; } /* under the club's bar, like the zoom buttons */
.app[data-view="next"] .maplibregl-ctrl-top-left, .app[data-view="route"] .maplibregl-ctrl-top-left, .app[data-view="next"] .leaflet-top.leaflet-left, .app[data-view="route"] .leaflet-top.leaflet-left { margin-top: var(--barh); }
.app.mapfull[data-view] .maptools { top: calc(8px + env(safe-area-inset-top, 0px)); }
.app.mapfull[data-view] .maplibregl-ctrl-top-left, .app.mapfull[data-view] .leaflet-top.leaflet-left { margin-top: env(safe-area-inset-top, 0px); }
.app[data-view="next"] .views, .app[data-view="route"] .views { position: relative; z-index: 2; margin-top: -16px; border-radius: 18px 18px 0 0; }
/* The handle: drag (or tap) to make the map bigger or smaller */
.grab { display: none; }
.app[data-view="next"] .grab, .app[data-view="route"] .grab { display: block; height: 26px; margin-bottom: -10px; touch-action: none; cursor: grab; position: relative; }
.grab::after { content: ""; position: absolute; left: 50%; top: 9px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line); transition: background .15s, width .15s; }
.app.dragging .grab::after, .grab:active::after { background: var(--ink-3); }
.grab:focus-visible { outline: none; } .grab:focus-visible::after { background: var(--act); }
.app.mapfull[data-view] .mapwrap { height: auto; bottom: 0; }
.app.mapfull .maplibregl-ctrl-bottom-right, .app.mapfull .maplibregl-ctrl-bottom-left, .app.mapfull .leaflet-bottom { margin-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); }
.app.mapfull[data-view] .views { z-index: auto; }
/* Post a run: a sheet over the screen it came from */
.app[data-view="post"] #v-post { position: fixed; left: 0; right: 0; bottom: 0; top: calc(44px + env(safe-area-inset-top, 0px)); z-index: 1600; background: var(--panel); border-radius: 20px 20px 0 0;
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: 6px 18px calc(28px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); animation: sheetup .3s cubic-bezier(.2, .8, .2, 1); }
.scrim { position: fixed; inset: 0; z-index: 1550; background: rgba(15, 20, 17, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fadein .2s ease; }
body:has(.app[data-view="post"]) { overflow: hidden; }
}
@media (min-width: 761px) { .scrim { display: none !important; } .grab { display: none; } }
/* Short or narrow phones (iPhone mini and SE, or Safari with its toolbars showing): less map, tighter text, so the run's
details start above the tab bar */
@media (max-width: 760px) and (max-height: 720px), (max-width: 380px) {
.app[data-view="next"] .mapwrap, .app[data-view="route"] .mapwrap { height: 33vh; height: 33svh; }
:root { --map-tall: max(33svh, calc(100svh - 230px)); }
.view { gap: 11px; padding-top: 12px; }
.view h2 { font-size: 26px; }
.eyebrow { font-size: 11.5px; }
.sub { font-size: 14px; margin-top: 2px; }
.seg2 button { min-height: 36px; font-size: 14px; }
.profile { height: 80px; }
.btn.primary { min-height: 48px; font-size: 16px; }
.brand h1 { font-size: 22px; }
.pill { min-height: 30px; font-size: 12px; padding: 3px 10px; }
}
.post-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.post-head .sheet-grab { grid-column: 1 / -1; justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 2px 0 6px; }
.post-head h2 { margin: 0; }
@keyframes sheetup { from { transform: translateY(100%); } }
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .app[data-view="post"] #v-post, .scrim { animation: none; } .app[data-view] .mapwrap { transition: none; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* First-time hints (#00149): a small bubble pointing at the thing it explains */
.hint { position: fixed; z-index: 60; display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 15px; line-height: 1.4; animation: hint-in .2s ease-out; }
.hint p { margin: 0; }
.hint .btn { justify-self: end; background: var(--panel); color: var(--ink); border-color: var(--panel); }
.hint-arrow { position: absolute; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.hint.above .hint-arrow { top: auto; bottom: -7px; }
.hint-target { outline: 3px solid var(--act); outline-offset: 3px; border-radius: 12px; }
.tips-again { display: block; margin-top: 10px; font-size: 14px; }
@keyframes hint-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } }
/* Who's going (#00150) */
.who-n { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.who-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.who-list li { padding: 8px 12px; border-radius: 10px; background: var(--ground); }
button.dtile[data-who] { cursor: pointer; text-align: left; font: inherit; }
/* Add a friend by name (#00151) */
.friend-find { display: grid; gap: 6px; }
.friend-hits { display: grid; gap: 4px; }
.friend-hit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.friend-hit svg { width: 20px; height: 20px; flex: none; color: var(--act); }
.friend-hit:hover, .friend-hit:focus-visible { border-color: var(--act); }
/* Photos on a route (Jeff 08/10/2026): a strip on the route page, little pictures on the map where they were taken */
.rphotos:empty { display: none; }
.rphotos-strip { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.rph { position: relative; flex: 0 0 auto; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--ground); cursor: pointer; scroll-snap-align: start; }
.rph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rph .rph-pin { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); color: var(--route-hi); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.rph .rph-pin svg { width: 14px; height: 14px; }
.rph .flag { position: absolute; left: 5px; top: 5px; background: #B3261E; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.phpin { position: relative; display: block; width: 42px; height: 42px; margin-bottom: 7px; padding: 0; border: 3px solid #fff; border-radius: 10px; background: var(--panel); box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; }
.phpin::after { content: ""; position: absolute; left: 50%; bottom: -10px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.phpin img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; }
.phpin.set { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--route-hi); }
.phpin.set svg { width: 18px; height: 18px; }
.rp-map { height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.rp-prev img { display: block; max-width: 100%; max-height: 200px; border-radius: 10px; margin: 0 auto; }
.rp-q { margin: 0 0 6px; font-size: 15px; }
.rp-spot { display: grid; gap: 0; }
/* A recap's photos, then a map of the route: swipe across (Jeff 08/10/2026) */
.fcar { display: grid; gap: 6px; }
.fcar-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.fcar-track::-webkit-scrollbar { display: none; }
.fcar-slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--ground); scroll-snap-align: start; scroll-snap-stop: always; cursor: pointer; overflow: hidden; }
.fcar-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcar-slide .flag { position: absolute; left: 8px; top: 8px; background: #B3261E; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.fcar-map { background: var(--panel-2); text-align: left; }
.fcar .fcar-mapbox { position: absolute; inset: 0; display: block; } /* beats MapLibre's own position: relative */
.fcar-mapbox svg { width: 100%; height: 100%; display: block; }
.fcar-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; background: var(--panel); color: var(--ink); border-radius: 10px; padding: 7px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); font-size: 13.5px; }
.fcar-cap b { font-family: var(--font-display); }
.fcar-cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.fcar-cap em { font-style: normal; font-weight: 700; color: var(--route-hi); white-space: nowrap; }
.fcar-dots { display: flex; justify-content: center; align-items: center; gap: 6px; }
.fcar-dots i { cursor: pointer; }
.fcar-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.fcar-dots i.on { background: var(--ink-2); transform: scale(1.2); }
.fcar-dots i.map { width: 14px; height: 14px; background: none; color: var(--line); display: grid; place-items: center; }
.fcar-dots i.map svg { width: 14px; height: 14px; }
.fcar-dots i.map.on { color: var(--route-hi); background: none; }
.phpin.mini { width: 30px; height: 30px; border-width: 2px; border-radius: 7px; margin-bottom: 6px; }
.phpin.mini::after { bottom: -9px; border-width: 5px; margin-left: -5px; }
.phpin.mini img { border-radius: 5px; }
.rp-acts { display: inline-flex; align-items: center; gap: 12px; }
.pinsw { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); border-radius: 999px; padding: 4px 10px 4px 7px; font: 600 13px/1.2 inherit; cursor: pointer; }
.pinsw svg { width: 15px; height: 15px; }
.pinsw[aria-pressed="true"] { background: var(--route-hi); border-color: var(--route-hi); color: #fff; }
/* Tablets and computers: the map's corner controls clear of the home indicator and rounded screen corners (iPad) */
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left, .leaflet-bottom { margin-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 760px) { .app:not(.mapfull) .maplibregl-ctrl-bottom-right, .app:not(.mapfull) .maplibregl-ctrl-bottom-left, .app:not(.mapfull) .leaflet-bottom { margin-bottom: 0; } }
/* ---------- Pilot testers (#00160): welcome, the Me tab checklist, the Feedback tab ---------- */
.pl-pill { justify-self: start; display: inline-block; font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--act); padding: 5px 8px; border-radius: 6px; }
.pl-wel { display: grid; gap: 12px; }
.pl-wel p { margin: 0; }
.pl-wel .btn { justify-self: start; }
.pl-note { gap: 8px; }
.card.pilot { border: 2px solid var(--act); }
.view > .card.pilot { background: var(--panel); border-color: var(--act); }
.pl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-head .muted { margin-left: auto; font-size: 14px; }
.pl-bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--act); border-radius: 3px; transition: width .3s; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: 15px; }
.pl-list li.done { color: var(--ink-3); }
.pl-list li.done span:nth-child(2) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.pl-tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.pl-list li.done .pl-tick { background: var(--act); border-color: var(--act); }
.pl-tick svg { width: 14px; height: 14px; }
.card.pilot .btn { justify-self: start; }
.pl-form { display: grid; gap: 10px; }
.pl-form textarea { width: 100%; min-height: 140px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 400 16px/1.4 var(--font-body); resize: vertical; }
.pl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* The Feedback tab: a small tab on the right edge, halfway down, above the map and the sheet */
.pl-fb { position: fixed; right: 0; top: 42%; z-index: 1450; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 7px; border: 0; border-radius: 0 10px 10px 0;
background: var(--act); color: #fff; font: 700 13px/1 var(--font-body); letter-spacing: .04em; cursor: pointer; box-shadow: var(--shadow); }
.pl-fb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media print { .pl-fb { display: none; } }
/* ---------- Their name, after signing up ---------- */
.nm { display: grid; gap: 12px; }
.nm h2, .nm p { margin: 0; }
.nm-form { display: grid; gap: 8px; }
.nm-form label { font-weight: 600; font-size: 15px; }
.nm-form input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 400 17px/1.3 var(--font-body); }
.nm-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.nm-fr .nm-btns .btn { width: 100%; min-height: 52px; font-size: 16px; border-radius: 12px; } /* the welcome steps' Continue */
/* ---------- Add to home screen: the guide and the card (13/10/2026) ---------- */
.a2 { display: grid; gap: 14px; }
.a2-head { display: flex; gap: 12px; align-items: center; }
.a2-head img { width: 48px; height: 48px; border-radius: 11px; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.a2-head h2 { margin: 0; } .a2-head p { margin: 2px 0 0; }
.a2-steps { margin: 0; padding: 0; list-style: none; counter-reset: a2; display: grid; gap: 12px; }
.a2-steps li { counter-increment: a2; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.45; }
.a2-steps li::before { content: counter(a2); width: 28px; height: 28px; border-radius: 50%; background: var(--act); color: #fff; display: grid; place-items: center; font: 700 15px/1 var(--font-body); }
.a2-ic { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; color: var(--route); }
.a2-key { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-weight: 700; line-height: 1; vertical-align: 1px; }
/* Points at where the browser's button is: bottom right (iOS 26 Safari's ⋯), bottom centre, or top right */
.a2-point { position: fixed; z-index: 2100; font: 700 34px/1 var(--font-body); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); animation: a2bob 1s ease-in-out infinite; pointer-events: none; }
.a2-br { right: 22px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.a2-bc { left: 50%; translate: -50% 0; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.a2-tr { right: 22px; top: calc(6px + env(safe-area-inset-top, 0px)); }
@keyframes a2bob { 50% { transform: translateY(6px); } }
.a2-tr { animation-name: a2bobup; } @keyframes a2bobup { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .a2-point { animation: none; } }
.a2-card { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.a2-card img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.a2-card .grow { flex: 1; min-width: 0; display: grid; gap: 2px; } .a2-card b { font-size: 15px; } .a2-card small { color: var(--ink-2); font-size: 13.5px; }
.a2-x { border: 0; background: none; color: var(--ink-3); font-size: 22px; line-height: 1; padding: 4px; cursor: pointer; }
/* Printable route sheet (walking groups, 15/10/2026): only the sheet prints; on screen it's built off to the side */
#printsheet { position: fixed; left: -10000px; top: 0; width: 180mm; background: #fff; color: #111; font-family: var(--font-body); }
#printsheet header p { margin: 0; font-size: 11pt; color: #555; }
#printsheet h1 { margin: 2mm 0 1mm; font: 700 22pt/1.1 var(--font-display); text-transform: uppercase; color: #111; }
#printsheet .ps-when { font-size: 12pt; color: #111; }
#printsheet .ps-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 5mm 0; }
#printsheet .ps-facts div { border: 1px solid #bbb; border-radius: 2mm; padding: 2mm 3mm; display: grid; }
#printsheet .ps-facts span { font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #555; }
#printsheet .ps-facts b { font-size: 12pt; }
#printsheet .ps-map { width: 180mm; height: 130mm; border: 1px solid #999; }
#printsheet .ps-profile { margin-top: 4mm; height: 30mm; }
#printsheet .ps-notes { font-size: 10.5pt; margin: 3mm 0 0; }
#printsheet footer { margin-top: 5mm; font-size: 8pt; color: #555; }
@media print {
body.printing > *:not(#printsheet) { display: none !important; }
body.printing { background: #fff !important; }
body.printing #printsheet { position: static; left: auto; }
@page { size: A4; margin: 12mm; }
}
/* One club calendar (#00166): groups in their colours, a nudge to follow one, and something new to try */
.row.grp { box-shadow: inset 4px 0 0 var(--gc); }
.chip .gdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.gnudge { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--gc); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--gc) 9%, var(--panel)); }
.gnudge p { margin: 0; flex: 1; font-size: 13.5px; }
.gnudge .btn, .trynew .tfollow { background: var(--gc); border-color: var(--gc); color: #fff; }
.tx { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; }
.trynew { margin-top: 18px; display: grid; gap: 8px; }
.trynew h3 { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.trycard { border: 1.5px dashed var(--gc); border-radius: 12px; padding: 12px; background: color-mix(in srgb, var(--gc) 9%, var(--panel)); display: grid; gap: 6px; }
.trycard p { margin: 0; }
.trycard .tk { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: color-mix(in srgb, var(--gc) 75%, var(--ink)); text-transform: uppercase; }
.trycard .tt { font-weight: 600; font-size: 15px; }
.trycard .tf { font-size: 13px; color: var(--ink-2); }
.trycard .ta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trycard .ta .tx { margin-left: auto; }
.rec-group { border: 1.5px solid var(--gc); border-radius: 16px; padding: 12px 16px; display: grid; gap: 2px; margin-top: 12px; }
.rec-group .lbl { margin: 0; color: color-mix(in srgb, var(--gc) 75%, var(--ink)); }
.rec-group .num { font-family: var(--font-display, inherit); font-size: 34px; line-height: 1; color: color-mix(in srgb, var(--gc) 75%, var(--ink)); }
.rec-group small { color: var(--ink-2); font-size: 13px; }
/* Share a recap as a picture (#00251) */
.rs-prev { display: flex; justify-content: center; background: var(--chip); border-radius: 12px; padding: 10px; margin: 6px 0 10px; }
.rs-prev canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 42vh; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); touch-action: none; cursor: grab; }
.rs-prev canvas:active { cursor: grabbing; }
.rs-hint { margin: -4px 0 8px; font-size: .85rem; text-align: center; }
.rs-hint:empty { display: none; }
.rs-zoom { flex: 1; min-width: 0; accent-color: var(--accent, #5EA43F); }
.rs-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rs-row > span:first-child { font-weight: 700; font-size: 14px; }
.rs-thumbs { display: flex; gap: 6px; }
.rs-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; width: 44px; height: 44px; background: none; }
.rs-thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.rs-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* On my way (#00250): a quiet "Running late?", and who's on their way, on Next run */
.omw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--chip); }
.omw > span:first-child { flex: 1 1 180px; min-width: 0; }
.omw b { display: block; }
.omw small { display: block; color: var(--ink-2); margin-top: 2px; }
.omw.mine { border: 2px solid var(--act); }
.omw-acts { display: flex; gap: 14px; }
.omw-reply { display: flex; gap: 8px; }
.omw-ask { margin: 8px 0 0; text-align: center; }
.omw-mins { display: grid; gap: 8px; margin-bottom: 10px; }
.omw-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 12.5px/1 var(--font-body); letter-spacing: .04em; color: var(--ink-2); }
.omw-live.on { color: var(--ink); text-transform: uppercase; }
.omw-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--act); box-shadow: 0 0 0 0 var(--act); animation: omw-pulse 1.6s ease-out infinite; }
@keyframes omw-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--act) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .omw-live i { animation: none; } }
/* Share a run: Adjust the picture, full screen (Jeff 06/11) */
.rs-adj { display: flex; justify-content: center; margin: 2px 0 6px; }
.rs-adj .btn { display: inline-flex; align-items: center; gap: 6px; }
.rs-edit { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; gap: 10px; background: var(--panel);
padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px)); animation: fadein .15s ease; }
.rs-ebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs-ebar h2 { margin: 0; font-size: 20px; }
.rs-estage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--chip); border-radius: 14px; padding: 8px; overflow: hidden; }
.rs-estage canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.2); touch-action: none; cursor: grab; }
.rs-estage canvas:active { cursor: grabbing; }
.rs-ehint { margin: 0; text-align: center; color: var(--ink-2); font-size: 15px; }
.rs-ezoom { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rs-ezoom .rs-zoom, .rs-ezoom .grow { flex: 1; }
/* No magnifier or "Save image" menu on a long press while dragging (iPhone, Jeff 06/11) */
.rs-edit, .rs-prev { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }