/* Fleap — modern, data-focused. White surfaces, Inter with tabular numbers, ColorBrewer Spectral
   accents; charts keep a light ggplot2 theme_bw panel. Hand-written, no framework.
   CHANGE the look via the variables below. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --ink: #18181b;          /* primary text */
  --ink-2: #52525b;        /* secondary text, axis labels */
  --muted: #8a8a93;
  --line: #e7e7ea;         /* borders */
  --line-strong: #d4d4d8;
  --grid: #f0f0f2;         /* table rules, chart grid */
  --soft: #f6f6f7;         /* hover, tracks */
  --bg: #fbfbfc;           /* app background (near-white) */
  --surface: #ffffff;
  --frame: #c9c9cf;        /* chart panel border (light theme_bw) */
  --accent: #3288bd;       /* Spectral blue */
  --accent-ink: #1f5f8b;
  --accent-soft: #edf5fb;
  --red: #d53e4f; --orange: #f46d43; --purple: #5e4fa2; --teal: #66c2a5; --maroon: #9e0142;
  --good: #1f8a5f; --bad: #c4314b;
  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 1px 3px rgba(24, 24, 27, .03);
  --sidebar: 232px;
  --rail: 64px;              /* collapsed sidebar: icons only; expands over the page on hover */
  --page: 1280px;            /* FIXED page width on computers: a smaller window scrolls, it never re-flows */
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 var(--sans); background: var(--bg); color: var(--ink); letter-spacing: -.003em;
       font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; } a:hover { color: var(--accent); }
h1 { margin: 0; font-size: 1.6rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
h2 { margin: 0 0 .85rem; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
h3 { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; }
p { margin: .4rem 0 .8rem; }
small, .small { font-size: .8rem; }
.muted { color: var(--muted); } .ink2 { color: var(--ink-2); } .mono { font-family: var(--mono); font-size: .92em; }
.caption { color: var(--muted); font-size: .8rem; margin: -.45rem 0 .8rem; line-height: 1.45; }
.eyebrow { font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: .2rem; }
.eyebrow a { color: var(--muted); } .eyebrow a:hover { color: var(--ink); }
[hidden] { display: none !important; }
::selection { background: #d6e8f5; }

/* ---------- app shell: sidebar + main ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); display: flex; flex-direction: column; gap: .5rem;
           padding: 1.1rem .75rem 1rem; background: var(--surface); border-right: 1px solid var(--line); z-index: 1000; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em;
         padding: .15rem .6rem .9rem; }
.brand:hover { color: var(--ink); }
.brand-mark { display: grid; grid-template-columns: repeat(5, 4px); gap: 2px; align-items: end; height: 18px; }
.brand-mark i { display: block; border-radius: 1.5px; }
.brand-mark i:nth-child(1) { height: 7px; background: #3288bd; } .brand-mark i:nth-child(2) { height: 12px; background: #66c2a5; }
.brand-mark i:nth-child(3) { height: 17px; background: #fdae61; } .brand-mark i:nth-child(4) { height: 10px; background: #f46d43; }
.brand-mark i:nth-child(5) { height: 14px; background: #d53e4f; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-bottom { margin-top: auto; border-top: 1px solid var(--line); padding-top: .6rem; }
.side-label { font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: .9rem .65rem .35rem; }
.side-nav a, .side-btn { display: flex; align-items: center; gap: .65rem; padding: .48rem .65rem; border-radius: var(--radius-s); color: var(--ink-2);
                         font-weight: 500; font-size: .9rem; background: none; border: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left; }
.side-nav a:hover, .side-btn:hover { background: var(--soft); color: var(--ink); }
.side-nav a.active { background: var(--accent-soft); color: var(--accent-ink); }
.side-nav a.active .ico { color: var(--accent); }
.side-nav a.soon { color: var(--muted); cursor: default; } .side-nav a.soon:hover { background: none; }
.side-nav .tag { margin-left: auto; font-size: .65rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }
.side-nav form { margin: 0; }
.ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.side-nav a:hover .ico, .side-btn:hover .ico { color: var(--ink-2); }
.side-user { display: flex; align-items: center; gap: .6rem; padding: .7rem .65rem .1rem; font-size: .85rem; color: var(--ink-2); min-width: 0; }
.side-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .75rem; color: #fff; flex: none;
          background: linear-gradient(135deg, #3288bd, #5e4fa2); }
body.app .main { margin-left: var(--rail); min-height: 100vh; display: flex; flex-direction: column; }

/* DESKTOP-FIRST, FIXED LAYOUT: the page is always var(--page) wide (centred in big windows, horizontal
   scroll in small ones), so a narrow browser window never moves or stacks anything. Only phones / tablets
   (touch screen AND narrow, see the block at the end of this section) get the stacked layout.
   CHANGE: --page above sets the width. */
body.app { min-width: calc(var(--page) + var(--rail)); }
body.public { min-width: var(--page); }

/* collapsed rail -> expanded on hover / keyboard focus (overlays the page, no layout shift) */
.sidebar { width: var(--rail); overflow: hidden; padding-left: .7rem; padding-right: .7rem;
           transition: width .18s ease .05s, box-shadow .18s ease; }
.sidebar:hover, .sidebar:focus-within { width: var(--sidebar); box-shadow: 0 8px 32px rgba(24,24,27,.12); transition-delay: .12s, .12s; }
.sidebar .brand-name, .side-nav a > span, .side-btn > span, .side-user-name, .side-nav .tag {
  opacity: 0; white-space: nowrap; transition: opacity .12s ease; }
.sidebar:hover .brand-name, .sidebar:hover .side-nav a > span, .sidebar:hover .side-btn > span, .sidebar:hover .side-user-name,
.sidebar:hover .side-nav .tag, .sidebar:focus-within .brand-name, .sidebar:focus-within .side-nav a > span,
.sidebar:focus-within .side-btn > span, .sidebar:focus-within .side-user-name { opacity: 1; transition-delay: .15s; }
.side-label { white-space: nowrap; color: transparent; position: relative; }
.side-label::after { content: ""; position: absolute; left: .65rem; right: .65rem; top: 50%; border-top: 1px solid var(--line); transition: opacity .12s; }
.sidebar:hover .side-label, .sidebar:focus-within .side-label { color: var(--muted); }
.sidebar:hover .side-label::after, .sidebar:focus-within .side-label::after { opacity: 0; }
.side-nav a, .side-btn { padding-left: .58rem; }
.brand { padding-left: .55rem; }
.side-user { padding-left: .45rem; }
/* the left padding is the back button's gutter (.page-back), so it never touches the sidebar in a small window */
.container { width: var(--page); margin: 0 auto; padding: 1.9rem 2.25rem 2.75rem 3.6rem; flex: 1; }
.footer { color: var(--muted); font-size: .78rem; padding: 1.25rem 2rem 2rem; text-align: center; }
.footer a { color: var(--muted); }

/* public pages (logged out) */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: .8rem 2rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .brand { padding: 0; }
.usernav { display: flex; gap: 1rem; align-items: center; font-size: .9rem; } .usernav a { color: var(--ink-2); }
.usernav a.btn { color: #fff; }

/* phones / small tablets only: a touch screen that is also narrow. A small DESKTOP window never matches. */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  body.app, body.public { min-width: 0; }
  .container { width: 100%; }
  .sidebar .brand-name, .side-nav a > span, .side-btn > span { opacity: 1; }
  .split, .grid2, .grid3, .pair, dl.metric-grid, .grid-2-1, .coach-hero { grid-template-columns: minmax(0, 1fr) !important; }
  .facts, .facts:has(> :nth-child(9)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar { position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; gap: .25rem; padding: .5rem .75rem; overflow-x: auto;
             border-right: 0; border-bottom: 1px solid var(--line); inset: auto; }
  .brand { padding: 0 .5rem 0 .25rem; }
  .side-nav { flex-direction: row; } .side-label, .side-nav .tag, .side-user-name { display: none; }
  /* account links (Connections, Settings, Log out, avatar) sit at the far right of the top bar */
  .side-bottom { margin: 0 0 0 auto; border: 0; padding: 0; align-items: center; }
  .side-user { padding: 0 .2rem 0 .4rem; flex: none; }
  .side-nav a span, .side-btn span { display: none; }
  body.app .main { margin-left: 0; }
  .container { padding: 1.25rem 1rem 2rem; }
}

/* ---------- page header, tabs ---------- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pagehead .sub { color: var(--muted); font-size: .85rem; padding-bottom: .2rem; }
.tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--line); margin: 0 0 1.25rem;
        padding: 0 .25rem; overflow-x: auto; overflow-y: hidden; }
.tabs a { padding: .55rem 0 .65rem; color: var(--muted); font-weight: 500; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- filter bar & segmented controls ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.filterbar .group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filterbar .group > .eyebrow { margin: 0; font-size: .75rem; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: #f0f0f2; border-radius: 9px; flex-wrap: wrap; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span, .seg-link { display: block; padding: .28rem .7rem; font-size: .8rem; font-weight: 500; color: var(--ink-2); border-radius: 7px; white-space: nowrap; }
.seg input:checked + span, .seg-link.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.04); }
.seg label:hover span, .seg-link:hover { color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: .26rem .7rem; font-size: .8rem; font-weight: 500; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); background: var(--surface); }
.chip span:hover { border-color: var(--line-strong); color: var(--ink); }
.chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); }
.custom-dates { display: inline-flex; gap: .35rem; align-items: center; color: var(--muted); }
.custom-dates input { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-s); font: inherit; font-size: .8rem; background: var(--surface); }
.drill { margin: -.6rem 0 1rem; gap: .4rem; } .drill .eyebrow { margin: 0; }
.drill-chip { display: inline-flex; gap: .35rem; align-items: center; padding: .2rem .65rem; font-size: .8rem; font-weight: 500; border-radius: 99px;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.drill-chip b { font-weight: 600; } .drill-chip:hover { background: #dcecf7; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .25rem 0 1rem; }

/* ---------- cards & grids ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem 1.25rem;
        margin-bottom: 1.25rem; min-width: 0; box-shadow: var(--shadow); }
.card > h2:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.card > h2 .muted, .card > h2 .small { font-weight: 400; font-size: .8rem; }
.card.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.card.flush { padding: 0; overflow: hidden; }
/* Fixed column counts (the page width is fixed). Cards in one row STRETCH to the same height, so a
   row of related cards always lines up top and bottom. */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.grid2 > .card, .grid3 > .card { margin-bottom: 0; } .grid2, .grid3 { margin-bottom: 1.25rem; }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; margin-bottom: 1.25rem; align-items: stretch; }
.split > .card { margin-bottom: 0; }
.split.records-split { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.grid-2-1 > .card { margin-bottom: 0; }
.prose { max-width: 760px; margin: 0 auto 1rem; }
.chart-box { position: relative; height: 260px; } .chart-box.tall { height: 340px; } .chart-box.short { height: 210px; }
.chart-box.xs { height: 160px; }

/* ---------- KPI tiles ---------- */
/* a row of tiles always spans the full page width with equal tiles (5 tiles = 5 equal columns);
   more than 8 tiles wrap onto a second row with the SAME column widths */
.facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.facts:has(> :nth-child(9)) { grid-auto-flow: row; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem .9rem; box-shadow: var(--shadow); min-width: 0; }
a.fact.link { color: inherit; display: block; transition: border-color .1s, box-shadow .1s; }
a.fact.link:hover { border-color: #b9d6ea; box-shadow: 0 2px 8px rgba(50,136,189,.12); }
a.fact.link .fact-sub { color: var(--accent-ink); }
.fact-label { font-size: .75rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact-value { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin-top: .3rem; white-space: nowrap;
              display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap; }
.fact-value small { font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.fact-sub { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.facts.compact .fact-value { font-size: 1.15rem; }
.delta { font-size: .7rem; font-weight: 600; padding: .05rem .4rem; border-radius: 99px; margin-left: .2rem; letter-spacing: 0; align-self: center; }
.delta.up { color: var(--good); background: #e8f6ef; } .delta.down { color: var(--bad); background: #fdecef; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.tile-label { color: var(--muted); font-size: .75rem; font-weight: 500; }
.tile-main { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; margin: .2rem 0 .1rem; } .tile-sub { color: var(--muted); font-size: .78rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .55rem .75rem; border-bottom: 1px solid var(--grid); text-align: left; white-space: nowrap; }
thead th { color: var(--muted); font-weight: 500; font-size: .75rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.card.flush thead th { background: #fafafb; padding-top: .7rem; padding-bottom: .7rem; }
thead th a { color: inherit; } thead th a:hover, thead th a.sorted { color: var(--ink); }
tbody tr { transition: background-color .08s; } tbody tr:hover { background: #f8f9fa; } tr[data-href] { cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; background: #fafafb; }
.card.flush th:first-child, .card.flush td:first-child { padding-left: 1.25rem; }
.card.flush th:last-child, .card.flush td:last-child { padding-right: 1.25rem; }
.card:not(.flush) th:first-child, .card:not(.flush) td:first-child { padding-left: .25rem; }
.card:not(.flush) th:last-child, .card:not(.flush) td:last-child { padding-right: .25rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; }
td.name { max-width: 340px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
td.name a { color: var(--ink); } td.name a:hover { color: var(--accent); }
.badge { display: inline-block; font-size: .68rem; font-weight: 500; padding: .08rem .45rem; border-radius: 99px; border: 1px solid var(--line);
         color: var(--ink-2); background: var(--surface); vertical-align: 1px; }
.badge.indoor { border-color: #dcd7ef; color: var(--purple); background: #f5f3fb; }
.badge.src { color: var(--muted); }
.badge.pr { border-color: #f9d3bf; background: #fff4ee; color: #b5461f; font-weight: 600; }
tr.me td { background: #f2f8fc; }
.zonebar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 90px; background: var(--grid); }
.zonebar i { display: block; height: 100%; }

/* ---------- buttons & forms ---------- */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .95rem;
                   background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: var(--radius-s);
                   font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); }
.btn:hover { background: #2b2b30; color: #fff; } .btn:disabled { opacity: .55; cursor: progress; }
.btn.accent { background: var(--accent); border-color: var(--accent); } .btn.accent:hover { background: var(--accent-ink); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn.ghost:hover { background: var(--soft); }
.btn.small { height: 28px; padding: 0 .7rem; font-size: .8rem; }
.btn.danger-btn, .danger-btn { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost.danger { color: var(--bad); } .danger { color: var(--bad); }
.btn.outline-danger { background: var(--surface); color: var(--bad); border-color: var(--bad); box-shadow: none; }
.btn.outline-danger:hover { background: #fdecef; color: var(--bad); }
.card.flush > .caption.card-pad, .card.flush > p.card-pad { margin: .7rem 1.25rem .9rem; }
.linkish { background: none; border: 0; color: var(--ink-2); font: inherit; cursor: pointer; padding: 0; }
.linkish:hover { color: var(--ink); text-decoration: underline; }
.field { margin-bottom: .95rem; } .field label { display: block; font-weight: 500; font-size: .82rem; margin-bottom: .3rem; color: var(--ink-2); }
.field label.check, label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--ink); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], input[type=date], select {
  width: 100%; height: 36px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); font: inherit; font-size: .88rem;
  background: var(--surface); color: var(--ink); box-shadow: inset 0 1px 1px rgba(0,0,0,.02); }
input[type=file] { padding: .3rem .4rem; height: auto; color: var(--ink-2); font-size: .82rem; cursor: pointer; }
input[type=file]::file-selector-button { font: inherit; font-size: .8rem; font-weight: 500; height: 28px; padding: 0 .8rem; margin-right: .7rem;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow); transition: background-color .1s, border-color .1s; }
input[type=file]::file-selector-button:hover { background: var(--soft); border-color: var(--ink-2); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50,136,189,.15); }
input::placeholder { color: #a1a1aa; }
select.inline { width: auto; height: 30px; padding: 0 .5rem; font-size: .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1rem; }
.err { color: var(--bad); font-size: .8rem; margin-top: .3rem; }
.flash { padding: .7rem 1rem; border-radius: var(--radius-s); margin-bottom: 1rem; font-size: .88rem; background: var(--surface);
         border: 1px solid var(--line); border-left: 3px solid var(--accent); box-shadow: var(--shadow); }
/* flash-<category>: never the bare category as a class (".info" is the (i) tooltip icon) */
.flash.flash-success { border-left-color: var(--good); } .flash.flash-error { border-left-color: var(--bad); background: #fffafa; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .row form { margin: 0; }
.between { justify-content: space-between; } .pager { margin-top: 1rem; font-size: .85rem; }
.pills { display: inline-flex; gap: 2px; padding: 3px; background: #f0f0f2; border-radius: 9px; flex-wrap: wrap; }
.pill { padding: .26rem .7rem; border-radius: 7px; color: var(--ink-2); font-size: .8rem; font-weight: 500; }
.pill:hover { color: var(--ink); }
.pill.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.toggle { display: inline-flex; gap: 2px; padding: 3px; background: #f0f0f2; border-radius: 9px; }
.toggle button { background: none; border: 0; padding: .22rem .65rem; font: inherit; font-size: .78rem; font-weight: 500; color: var(--ink-2); cursor: pointer; border-radius: 7px; }
.toggle button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.toggle button:disabled { color: #bbb; cursor: not-allowed; }
.note { border: 1px solid #cfe3f1; background: var(--accent-soft); padding: .65rem .9rem; border-radius: var(--radius-s); font-size: .86rem; margin: 0 0 1rem; }
.note.warn { border-color: #fbd5c2; background: #fff6f1; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 .75rem; font-size: .85rem; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
dl.kv dd .muted { font-weight: 400; }
/* long lists (device metrics): the first 8 rows show, the rest scroll (8 × line .85rem·1.5 + 7 gaps .4rem) */
dl.kv.kv-scroll { max-height: 13.1rem; overflow-y: auto; padding-right: .5rem; scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, #000 85%, transparent); }
dl.kv.kv-scroll:hover, dl.kv.kv-scroll:focus-within { mask-image: none; }
ol.small { padding-left: 1.2rem; color: var(--ink-2); } ol.small li { margin-bottom: .3rem; }

/* ---------- hero (logged out) ---------- */
body.public .main { min-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.hero { padding: 5rem 1rem 3rem; max-width: 780px; margin: 0 auto; }
.hero h1 { font-size: 3rem; letter-spacing: -.04em; line-height: 1.05; }
.hero p.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 600px; margin: 1.1rem 0 1.6rem; }
.hero .spectral-rule { height: 4px; width: 140px; border-radius: 2px; margin: 0 0 1.75rem;
  background: linear-gradient(90deg, #9e0142, #d53e4f, #f46d43, #fdae61, #fee08b, #e6f598, #abdda4, #66c2a5, #3288bd, #5e4fa2); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: 1000px; margin: 0 auto 3rem; padding: 0 1rem; }
.features .card h3 { margin-bottom: .3rem; font-size: .95rem; }

/* ---------- activity page ---------- */
.act-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.act-head h1 { margin: .1rem 0 .35rem; }
.act-head .meta { color: var(--muted); font-size: .82rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.act-nav { display: flex; gap: .4rem; }
#map, .segment-map { height: 440px; border-radius: var(--radius-s); border: 1px solid var(--line); background: #f2f2f2; z-index: 0; overflow: hidden; }
.segment-map { height: 380px; }
.map-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; gap: .5rem; flex-wrap: wrap; }
.map-tools h2 { margin: 0; }
.route-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--ink-2); }
.route-legend .ramp { width: 110px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #5e4fa2, #3288bd, #66c2a5, #abdda4, #e6f598, #ffffbf, #fee08b, #fdae61, #f46d43, #d53e4f, #9e0142); }
.readout { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; min-height: 2.9rem; padding: .45rem .8rem; border: 1px solid var(--line);
           border-radius: var(--radius-s); background: rgba(250,250,251,.96); margin-bottom: .6rem; font-variant-numeric: tabular-nums;
           position: sticky; top: .5rem; z-index: 5; backdrop-filter: blur(4px); }
.readout span { display: flex; flex-direction: column; line-height: 1.25; }
.readout small { font-size: .68rem; color: var(--muted); }
.readout b { font-weight: 600; font-size: .92rem; letter-spacing: -.01em; }
.stream-panel { position: relative; }
.stream-label { position: absolute; left: 72px; top: 3px; z-index: 2; font-size: .72rem; font-weight: 500; color: var(--ink-2); background: rgba(255,255,255,.9);
                padding: 0 .35rem; border-radius: 4px; display: flex; gap: .35rem; align-items: center; pointer-events: none; }
.stream-label .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.stream-box { position: relative; height: 100%; }
.stream-panel canvas { cursor: crosshair; }
.selection { border: 1px solid #cfe3f1; background: #f6fafd; border-radius: var(--radius-s); padding: .75rem .9rem; margin-top: .75rem; }
.selection .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-top: .5rem; }
.selection .fact { box-shadow: none; padding: .55rem .7rem; }
.selection .fact-value { font-size: 1.05rem; margin-top: .1rem; }
.segment-form { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #cfe3f1; }
.segment-form input[type=text] { width: auto; flex: 1; min-width: 220px; height: 30px; font-size: .82rem; }
.streams-loading { color: var(--muted); padding: 1rem 0; }
/* Every map is its own stacking context: Leaflet's panes (z-index 400) and +/- buttons (z-index 800-1000)
   then stay BELOW the sticky page header and the sidebar instead of drawing over them while scrolling. */
.leaflet-container { font: inherit; font-size: .78rem; position: relative; z-index: 0; isolation: isolate; }
/* a normal arrow on maps (Leaflet's default is a "move" cross); a grabbing hand only while dragging */
.leaflet-container.leaflet-grab { cursor: default; }
.leaflet-dragging .leaflet-container.leaflet-grab, .leaflet-dragging .leaflet-container .leaflet-grab { cursor: grabbing; }
/* the location pin (community.js): a drawn pin, no image files needed */
.pin-icon { background: none; border: 0; }
.pin-icon svg { display: block; width: 28px; height: 36px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.leaflet-control-attribution { font-size: .65rem; }
.leaflet-tile-pane { filter: grayscale(1) contrast(.82) brightness(1.08); }   /* light, neutral basemap so the route carries the colour */

/* ---------- background sync status ---------- */
.syncstatus { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .55rem .75rem; margin: .4rem 0 .9rem; font-size: .85rem; background: #fafafb; }
.syncstatus .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: .4rem; vertical-align: 1px; }
.syncstatus .dot.queued { background: var(--orange); } .syncstatus .dot.failed { background: var(--red); }
.syncstatus .dot.running { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.sync-pending { margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- activity analysis grid & laps ---------- */
dl.metric-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; margin: 0; font-size: .84rem; }
dl.metric-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .38rem 0;
                       border-bottom: 1px solid var(--grid); min-width: 0; }
dl.metric-grid dt { color: var(--muted); display: flex; align-items: center; gap: .3rem; min-width: 0; }
dl.metric-grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; flex: none; }
dl.metric-grid dd small { font-weight: 400; color: var(--muted); }
.info { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong);
        font: italic 600 9px/1 Georgia, serif; color: var(--muted); cursor: help; flex: none; }
.info:hover, .info:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.info::after { content: attr(data-tip); position: absolute; left: -8px; bottom: calc(100% + 8px); width: 260px;
               padding: .55rem .7rem; background: var(--ink); color: #fff; font: 400 .76rem/1.45 var(--sans); font-style: normal; border-radius: 8px;
               box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50; white-space: normal; text-align: left; }
.info:hover::after, .info:focus::after { opacity: 1; }
/* near the right edge of the page the tip opens to the left instead (app.js sets .tip-left) */
.info.tip-left::after { left: auto; right: -8px; }
tr.lap-row { cursor: pointer; }
tr.lap-row.selected td { background: #eaf3fa; }
a.zoom-link { display: inline-block; color: var(--accent-ink); }
a.zoom-link:hover { color: var(--accent); text-decoration: underline; }
.zoom-tools { display: inline-flex; gap: .35rem; }

/* ---------- zoomed streams ---------- */
#selection-stats { margin: 0 0 .5rem; }
.readout:empty { display: none; }
#zoom-extras { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line); display: grid; gap: .7rem; }
.zoom-segments ul { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .85rem; }
.zoom-segments li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.zoom-segments li[hidden] { display: none; }
#zoom-extras .segment-form { margin: 0; padding: 0; border: 0; }
#stream-charts.zoomed canvas { cursor: zoom-out; }

dl.metric-grid.one { grid-template-columns: 1fr; margin-bottom: .9rem; }
p.compare { padding: .55rem .75rem; border-radius: var(--radius-s); background: var(--soft); border: 1px solid var(--line); font-size: .86rem; margin: .3rem 0 1rem; }
p.compare.good { background: #edf7f2; border-color: #c4e6d4; } p.compare.bad { background: #fdf0f2; border-color: #f3c9d0; }


/* ---------- activity totals graphs side-by-side ---------- */
/* two charts side by side inside one card; stacks only on phone-sized screens */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pair > div { min-width: 0; }

/* one chart, several views (chart_switch macro) */
.chart-switch { display: flex; justify-content: flex-end; margin: -2.35rem 0 .6rem; min-height: 1.8rem; }
.compare-dates { display: inline-flex; gap: .35rem; align-items: center; color: var(--muted); }
.compare-dates input { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-s); font: inherit; font-size: .8rem; background: var(--surface); }

/* ---------- tags ---------- */
.tagbar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .55rem; }
.tagbar form { margin: 0; }
.tagchip { font: inherit; font-size: .74rem; font-weight: 500; padding: .14rem .55rem; border-radius: 99px; border: 1px dashed var(--line-strong);
           background: var(--surface); color: var(--muted); cursor: pointer; }
.tagchip:hover { color: var(--ink); border-color: var(--ink-2); }
.tagchip.on { border-style: solid; border-color: #f0b98f; background: #fff3ea; color: #a8481a; }
.tagwrap { display: inline-flex; align-items: center; }
.tagwrap form { margin: 0; }
.tagwrap.custom .tagchip { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: .4rem; }
.tag-x { font: inherit; font-size: .8rem; line-height: 1; height: 100%; padding: .17rem .45rem .2rem .35rem; margin-left: -1px; cursor: pointer;
         border: 1px dashed var(--line-strong); border-left-style: solid; border-radius: 0 99px 99px 0; background: var(--surface); color: var(--muted); }
.tag-x:hover { color: #fff; background: var(--bad); border-color: var(--bad); }
.badge.src.link { color: var(--accent-ink); border-color: #cfe3f1; }
.badge.src.link:hover { background: var(--accent-soft); color: var(--accent); }
.act-head .act-title { flex: 1; min-width: 0; }
/* activity page header (dashboard/activity.html): two columns, rows in source order
   eyebrow · h1 (full width) | meta + act-nav | stype-bar + stype-form | tagbar (full width) */
.act-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; }
.act-head-grid > .eyebrow, .act-head-grid > h1, .act-head-grid > .tagbar { grid-column: 1 / -1; }
.act-head-grid > .meta, .act-head-grid > .stype-bar { grid-column: 1; }
.act-head-grid > .act-nav, .act-head-grid > .stype-form { grid-column: 2; justify-self: end; }
.act-head-grid > .stype-form { margin-top: .6rem; }
@media (max-width: 640px) {  /* phone: one column, the right-hand items drop under their row */
  .act-head-grid { grid-template-columns: minmax(0, 1fr); }
  .act-head-grid > * { grid-column: 1 !important; justify-self: start !important; }
}
.back-arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-top: .1rem; border-radius: 50%; flex: none;
              border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1.1rem; box-shadow: var(--shadow); }
.back-arrow:hover { background: var(--soft); color: var(--ink); }
.tag-new input[type=text] { height: 24px; width: 90px; font-size: .74rem; padding: 0 .5rem; border-radius: 99px; border-style: dashed; }
.badge.tag { border-color: #f0b98f; background: #fff3ea; color: #a8481a; }
select:not(.inline) { appearance: auto; }
td.wrap { white-space: normal; min-width: 9rem; }

/* ---------- fine print: how a number was made, kept small and out of the way ---------- */
.fineprint { margin: .9rem 0 0; padding-top: .55rem; border-top: 1px dashed var(--line); color: var(--muted); font-size: .72rem; line-height: 1.45; }
.card > .fineprint:last-child { margin-bottom: -.2rem; }
b.pos { color: var(--good); } b.neg { color: #b5461f; }

/* ---------- analyzer ---------- */
.section-title { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 .8rem; font-size: 1.05rem; }
.section-title .muted { font-weight: 400; font-size: .8rem; }
.target-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.target-bar .pills b { font-weight: 700; }
.hero-card .hero-title { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; margin: .1rem 0 .2rem; }
.hero-card .row form { margin: 0; }
.hero-facts { margin: .9rem 0 .9rem; }
.hero-facts .fact { box-shadow: none; background: #fafafb; }
.hero-facts .fact-value { font-size: 1.7rem; }
.readiness { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.05rem; margin: 0 0 .7rem; }
.readiness .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.readiness.ready .dot { background: var(--good); } .readiness.normal .dot { background: var(--accent); } .readiness.easy .dot { background: var(--orange); }
dd.good { color: var(--good); } dd.low { color: #b5461f; }
.table-wrap.scroll { max-height: 330px; overflow-y: auto; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.table-wrap.scroll thead th { position: sticky; top: 0; }
.phase { font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); }
.phase.recovery { background: #eef7f3; color: var(--good); } .phase.taper { background: #fff3ea; color: #a8481a; }
tr.muted-row td { color: var(--ink-2); }
.mix { display: inline-flex; align-items: center; gap: .6rem; font-weight: 400; }
.mix .zonebar { width: 180px; }
.focus h3 { font-size: .95rem; margin: .55rem 0 .3rem; }
.focus p { margin: .25rem 0; }
.focus .do { font-size: .84rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--grid); }
.focus.p1 { border-color: #f3c9b4; }
ul.plain { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .85rem; } ul.plain li { margin-bottom: .25rem; }

/* ---------- pop-up dialog (Add target) ---------- */
.dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; width: 820px; max-width: calc(100vw - 2rem);
          box-shadow: 0 24px 64px rgba(24,24,27,.25); color: var(--ink); background: var(--surface); }
.dialog::backdrop { background: rgba(24,24,27,.35); }
.dialog form { padding: 1.2rem 1.4rem 1.2rem; margin: 0; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.dialog-head h2 { margin: 0; font-size: 1.1rem; }
.dialog-head .linkish { font-size: 1.1rem; color: var(--muted); }
.dialog h3 { margin: .3rem 0 .5rem; }
.dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--grid); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.pill.other-sport { opacity: .8; }

/* ---------- calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.cal-toolbar .cal-filters { margin: 0; flex: 1; }
.cal-nav { display: flex; align-items: center; gap: .4rem; }
.cal-month { font-weight: 600; min-width: 9.5rem; text-align: center; }
.chip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .4rem; vertical-align: 0; }
.sport-cycling { --sc: #3288bd; } .sport-running { --sc: #f46d43; } .sport-nordic { --sc: #66c2a5; } .sport-other { --sc: #9a9a9a; }
.chip .sw { background: var(--sc); }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 92px; border-bottom: 1px solid var(--line); }
.cal-row:last-child { border-bottom: 0; }
.cal-headrow { background: #fafafb; }
.cal-dow { padding: .5rem .6rem; font-size: .72rem; font-weight: 500; color: var(--muted); }
.cal-day { min-height: 118px; padding: .35rem .4rem .5rem; border-right: 1px solid var(--grid); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day.out { background: #fbfbfc; } .cal-day.out .cal-date { color: #c4c4ca; }
.cal-date { font-size: .75rem; font-weight: 600; color: var(--ink-2); padding: .05rem .2rem; align-self: flex-start; border-radius: 6px; }
.cal-day.today .cal-date { background: var(--ink); color: #fff; padding: .05rem .4rem; }
.cal-item { display: block; padding: .22rem .4rem .25rem .5rem; border-radius: 6px; font-size: .72rem; line-height: 1.3; color: var(--ink);
            background: #f6f6f7; border-left: 3px solid var(--sc, var(--muted)); min-width: 0; }
.cal-item:hover { background: var(--accent-soft); color: var(--ink); }
.cal-item .cal-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item .cal-sub { display: block; color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item.target { background: #fff3ea; border-left-color: #d53e4f; }
.cal-item.target .flag { float: right; color: #d53e4f; font-size: .75rem; }
.cal-item.target.prio-A .cal-name { font-weight: 700; }
.cal-day.has-target { background: #fffaf6; }
.cal-week { padding: .5rem .6rem; font-size: .75rem; color: var(--ink-2); background: #fafafb; display: flex; flex-direction: column; gap: .15rem; }
.flag-ev { margin-left: .35rem; font-size: .72rem; font-weight: 700; color: #d53e4f; cursor: help; white-space: nowrap; }

/* ---------- training plan (Analyzer) ---------- */
.k-recovery { --kc: #abdda4; } .k-easy { --kc: #66c2a5; } .k-endurance { --kc: #3288bd; } .k-long { --kc: #5e4fa2; }
.k-tempo { --kc: #fdae61; } .k-threshold { --kc: #f46d43; } .k-vo2 { --kc: #d53e4f; } .k-anaerobic { --kc: #9e0142; }
.k-opener { --kc: #9a9a9a; } .k-race { --kc: #18181b; }
.kdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--kc); margin-right: 3px; vertical-align: 0; }
.kdot.s-missed { background: transparent; box-shadow: inset 0 0 0 2px var(--kc); opacity: .6; }
.kdot.s-planned { opacity: .55; }
.plan-score { display: flex; gap: 1.25rem; align-items: center; margin-bottom: .6rem; }
.plan-score .big { font-size: 2.6rem; font-weight: 650; letter-spacing: -.04em; line-height: 1; min-width: 6.5rem; }
.plan-score .big small { font-size: .9rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.plan-score .big.good { color: var(--good); } .plan-score .big.warn { color: #b26b00; } .plan-score .big.bad { color: var(--bad); }
.plan-score dl { flex: 1; margin: 0; }
.week-list { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .84rem; }
.week-list li { display: grid; grid-template-columns: 2.3rem 14px 1fr auto; align-items: center; gap: .35rem; padding: .32rem .3rem; border-bottom: 1px solid var(--grid); }
.week-list li.today { background: var(--accent-soft); border-radius: 6px; }
.week-list li.s-done .wl-title { color: var(--ink-2); }
.week-list .wl-day { color: var(--muted); font-size: .75rem; }
.week-list .wl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-list .wl-st { font-size: .75rem; font-weight: 600; color: var(--good); }
.week-list li.s-missed .wl-st { color: var(--bad); }
.week-list .wl-note { grid-column: 3 / -1; font-size: .72rem; color: #a8481a; }
.plan-table tr.wk-row { cursor: pointer; }
.plan-table tr.wk-row.current td { background: #f2f8fc; }
.plan-table tr.wk-row.past td { color: var(--ink-2); }
.plan-table .caret { display: inline-block; color: var(--muted); transition: transform .12s; }
.plan-table tr.wk-row[aria-expanded="true"] .caret { transform: rotate(90deg); }
.plan-table tr.wk-detail > td { background: #fafafb; padding: .6rem .6rem .8rem; white-space: normal; }
.plan-table tr.wk-detail:hover { background: none; }
.wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.wk-day { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.wk-date { font-size: .72rem; font-weight: 600; color: var(--muted); }
.wk-day.today .wk-date { color: var(--accent-ink); }
.wo { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--kc, var(--line)); border-radius: 8px;
      padding: .4rem .5rem .45rem; font-size: .74rem; line-height: 1.35; min-width: 0; }
.wo.rest { color: var(--muted); border-top-color: var(--line); background: transparent; border-style: dashed; }
.wo.extra { display: block; border-style: dashed; color: var(--ink-2); }
.wo.s-missed { opacity: .6; }
.wo.s-done { background: #f3faf6; }
.wo-top { display: flex; justify-content: space-between; gap: .3rem; font-size: .68rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.wo-st.ok { color: var(--good); } .wo-st.miss { color: var(--bad); }
.wo-title { font-weight: 600; margin: .15rem 0 .2rem; color: var(--ink); }
.wo-desc { color: var(--ink-2); }
.wo-note { margin-top: .3rem; color: #a8481a; font-size: .7rem; }
.wo-act { display: block; margin-top: .3rem; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item.plan { background: transparent; border: 1px dashed var(--line-strong); border-left: 3px solid var(--kc); }
button.cal-item { font: inherit; text-align: left; width: 100%; cursor: pointer; }
button.cal-item.plan:hover { background: var(--accent-soft); }
.cal-item.plan.s-missed { opacity: .55; text-decoration: line-through; }
.cal-item .ok { color: var(--good); font-weight: 600; }
.cal-caption { margin: -.4rem 0 .7rem; }

/* ---------- session type + productiveness ---------- */
.stype { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .08rem .15rem .08rem .5rem;
         border-radius: 99px; background: color-mix(in srgb, var(--kc, #9a9a9a) 16%, white); color: var(--ink);
         border: 1px solid color-mix(in srgb, var(--kc, #9a9a9a) 45%, white); white-space: nowrap; }
.stype .prod { font-style: normal; font-size: .66rem; font-weight: 700; padding: 0 .38rem; border-radius: 99px; background: #fff; color: var(--ink-2); }
.stype .prod.productive { color: var(--good); } .stype .prod.partly { color: #b26b00; } .stype .prod.unproductive { color: var(--bad); }
.stype.big { font-size: .82rem; padding: .2rem .7rem; }
.stype-bar { display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: .5rem .8rem; 
  margin-top: .6rem; 
  width: 100%;
}
.prod-label { font-size: .82rem; } .prod-label.productive b { color: var(--good); } .prod-label.partly b { color: #b26b00; }
.prod-label.unproductive b { color: var(--bad); }
.stype-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 0 auto; }
.split-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.k-mixed { --kc: #c51b7d; }

/* ---------- community ---------- */
.discover-map { height: 380px; border-radius: var(--radius-s); border: 1px solid var(--line); }
.event-map { height: 300px; border-radius: var(--radius-s); border: 1px solid var(--line); }
.map-picker { height: 220px; border-radius: var(--radius-s); border: 1px solid var(--line); }
.map-pick { position: relative; }
.map-search { position: relative; display: flex; gap: .4rem; margin-bottom: .45rem; }
.map-search input[type=search] { flex: 1; height: 32px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  font: inherit; font-size: .85rem; background: var(--surface); color: var(--ink); }
.map-search input[type=search]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50,136,189,.15); }
.map-search .btn { height: 32px; }
.map-results { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; list-style: none; margin: 0; padding: .25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 10px 28px rgba(24,24,27,.16);
  max-height: 240px; overflow-y: auto; font-size: .84rem; }
.map-results li { padding: .45rem .6rem; border-radius: 6px; cursor: pointer; line-height: 1.35; }
.map-results li:hover, .map-results li:focus, .map-results li.active { background: var(--accent-soft); outline: none; }
.map-results li.muted { cursor: default; } .map-results li.muted:hover { background: none; }
.map-place { min-height: 1.2rem; margin-top: .3rem; }
input[readonly] { background: var(--soft); color: var(--ink-2); }
/* drop-down checklist (checklist_dropdown macro) */
details.dropdown { position: relative; }
details.dropdown summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: 36px;
  padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); cursor: pointer;
  font-size: .88rem; white-space: nowrap; overflow: hidden; }
details.dropdown summary::-webkit-details-marker { display: none; }
details.dropdown summary::after { content: "▾"; color: var(--muted); font-size: .8rem; flex: none; }
details.dropdown summary span { overflow: hidden; text-overflow: ellipsis; }
details.dropdown[open] summary { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(50,136,189,.15); }
.dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 180px; padding: .35rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 10px 28px rgba(24,24,27,.16); }
.dd-menu label.check { padding: .4rem .5rem; border-radius: 6px; margin: 0; align-items: center; cursor: pointer; }
.dd-menu label.check:hover { background: var(--soft); }
/* "•••" quick actions at the end of a table row: visible on row hover (always on touch screens) */
th.actions-col, td.actions-col { width: 44px; text-align: right; }
.row-menu { position: relative; display: inline-block; opacity: 0; transition: opacity .1s; }
tr:hover .row-menu, .row-menu[open], .row-menu:focus-within { opacity: 1; }
@media (hover: none) { .row-menu { opacity: 1; } }
.row-menu summary { list-style: none; cursor: pointer; padding: .1rem .45rem; border-radius: 6px; color: var(--ink-2); font-weight: 700; letter-spacing: .05em; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: var(--soft); color: var(--ink); }
.row-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 160px; display: flex; flex-direction: column; padding: .3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 10px 28px rgba(24,24,27,.16); }
.row-menu-list form { margin: 0; }
.row-menu-list button { display: block; width: 100%; text-align: left; font: inherit; font-size: .84rem; padding: .42rem .6rem; border: 0;
  border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.row-menu-list button:hover { background: var(--soft); }
.row-menu-list button.danger { color: var(--bad); } .row-menu-list button.danger:hover { background: #fdecef; }
.dialog.dialog-sm { width: 460px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a jump to #section stops below the sticky page header instead of under it */
.card[id], [id].stickyhead + * { scroll-margin-top: calc(var(--head-h, 90px) + 1rem); }
/* settings → account: the email */
.email-row { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--grid); }
.email-row .field-label { font-weight: 500; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }
.badge.verified { border-color: #c4e6d4; background: #edf7f2; color: var(--good); }
.badge.unverified { border-color: #fbd5c2; background: #fff6f1; color: #b5461f; }
.find-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: -.2rem 0 .9rem; }
.find-bar input[type=search] { width: 260px; height: 32px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); font: inherit; font-size: .85rem; }
.find-bar select { width: auto; height: 32px; font-size: .85rem; }
textarea { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); font: inherit; font-size: .88rem; resize: vertical; }
.ev-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--grid); }
.ev-row:last-child { border-bottom: 0; }
.ev-row.cancelled { opacity: .55; }
.ev-when { display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-size: .78rem; padding: .3rem; border: 1px solid var(--line); border-radius: 8px; background: #fafafb; }
.ev-when b { font-size: .82rem; }
.ev-title { font-weight: 600; color: var(--ink); }
.ev-facts { display: flex; gap: .7rem; align-items: center; font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.ev-rsvp { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; min-width: 9rem; }
.ev-rsvp form { margin: 0; }
.fit { font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; white-space: nowrap; }
.fit.easy { background: #eaf6f0; color: var(--good); } .fit.steady { background: var(--accent-soft); color: var(--accent-ink); }
.fit.hard { background: #fff3e6; color: #b26b00; } .fit.vhard { background: #fdecef; color: var(--bad); }
.club-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.club-card { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--ink); background: var(--surface); }
.club-card:hover { border-color: #b9d6ea; color: var(--ink); box-shadow: 0 2px 8px rgba(50,136,189,.12); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.member-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--grid); font-size: .86rem; }
.member-row:last-child { border-bottom: 0; }
.member-row form { margin: 0; }
.avatar.sm { width: 22px; height: 22px; font-size: .68rem; display: inline-grid; vertical-align: middle; margin-right: .3rem; }
.member-menu { position: relative; } .member-menu summary { list-style: none; cursor: pointer; } .member-menu summary::-webkit-details-marker { display: none; }
.member-actions { position: absolute; right: 0; top: 1.4rem; z-index: 10; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
                  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .4rem .7rem; display: flex; flex-direction: column; gap: .3rem; white-space: nowrap; }
.prewrap { white-space: pre-wrap; }
.seg-form { display: inline-flex; gap: .3rem; margin: 0; }
.pagehead .row form { margin: 0; }
.group-badge { font-size: .74rem; font-weight: 600; padding: .14rem .55rem; border-radius: 99px; background: #f3effa; color: var(--purple); border: 1px solid #dcd7ef; }
.cal-item.club { background: #f3effa; border-left-color: var(--purple); }
.stype-form select.inline { max-width: 230px; }
.nowrap { white-space: nowrap; }

/* ---------- club pages ---------- */
.club-hero { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: .6rem; background: var(--surface); border: 1px solid var(--line); }
.club-banner { display: block; width: 100%; height: 220px; object-fit: cover; }
.club-id { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; }
.club-hero.has-banner .club-logo { margin-top: -60px; }
.club-logo { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; border: 3px solid var(--surface); background: var(--surface);
             box-shadow: 0 2px 10px rgba(0,0,0,.12); flex: none; }
.club-logo.placeholder { display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3288bd, #5e4fa2); }
.club-logo.sm { width: 40px; height: 40px; border-radius: 10px; border-width: 0; box-shadow: none; font-size: 1rem; }
.club-title { flex: 1; min-width: 0; }
.club-title h1 { margin: 0; }
.club-tagline { margin: .15rem 0 .2rem; color: var(--ink-2); }
.club-actions { flex: none; } .club-actions form { margin: 0; }
.club-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1rem; align-items: start; }
.club-side { position: sticky; top: calc(var(--head-h, 0px) + 1rem); display: flex; flex-direction: column; gap: 1rem; }
.club-side .card { margin: 0; }
.club-feed .card { margin-bottom: 1rem; }
.post-new textarea { margin-bottom: .5rem; }
.post.pinned { border-color: #f0b98f; }
.post-head { display: flex; align-items: center; gap: .55rem; }
.post-head .post-tools { margin-left: auto; display: flex; gap: .6rem; } .post-tools form { margin: 0; }
.post-body { margin: .6rem 0 .4rem; font-size: .92rem; }
.comments { border-top: 1px solid var(--grid); margin-top: .5rem; padding-top: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.comment { display: flex; gap: .5rem; font-size: .85rem; }
.avatar.xs { width: 20px; height: 20px; font-size: .62rem; flex: none; }
.inline-form { display: inline; margin: 0; }
.comment-new { display: flex; gap: .4rem; margin: 0; } .comment-new input { height: 32px; font-size: .84rem; }
.coming-up .cu-when { font-size: .8rem; color: var(--accent-ink); font-weight: 600; }
.coming-up .cu-title { display: block; font-size: 1.1rem; font-weight: 650; color: var(--ink); margin: .15rem 0; }
.cu-facts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .85rem; margin: .5rem 0; color: var(--ink-2); }
.cu-typical { font-size: .82rem; background: var(--soft); border-radius: 8px; padding: .45rem .6rem; margin: .4rem 0 .6rem; }
.cu-list { list-style: none; margin: .3rem 0 0; padding: 0; font-size: .82rem; } .cu-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--grid); }
.cal-row.club-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-item.cancelled { opacity: .5; text-decoration: line-through; }
.club-card-top { display: flex; gap: .6rem; align-items: center; } .club-card-top > div { flex: 1; min-width: 0; }
.radio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.radio-card { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .55rem .65rem; cursor: pointer; font-weight: 400 !important; }
.radio-card span { display: flex; flex-direction: column; gap: .15rem; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.member-row.wrap { flex-wrap: wrap; }
.perm-form { display: inline-flex; gap: .25rem; margin: 0; } .perm-form .chip span { padding: .12rem .5rem; font-size: .72rem; }
.fact-value.small-value { font-size: 1.05rem; white-space: normal; }
input[type=email] { width: 100%; height: 36px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); font: inherit; font-size: .88rem; }

.cu-pace { font-size: .78rem; font-style: italic; color: var(--muted); }

/* ---------- sticky page header: the top title (and tabs) stay in view while scrolling ---------- */
.pagehead, .stickyhead { position: sticky; top: 0; z-index: 40; background: var(--bg);
  margin-top: -1.75rem; padding-top: 1.75rem; }
.stickyhead .pagehead { position: static; margin-top: 0; padding-top: 0; }
.stickyhead .tabs { margin-bottom: 0; }
.stickyhead { margin-bottom: 1.25rem; }
body.scrolled .pagehead, body.scrolled .stickyhead { box-shadow: 0 1px 0 var(--line), 0 6px 12px -10px rgba(24,24,27,.25); }
body.scrolled .pagehead { padding-bottom: .6rem; }
.stickyhead.club-sticky { margin-top: 0; padding-top: 0; }
.club-sticky .tabs { align-items: center; }
.club-mini { display: none; align-items: center; gap: .45rem; font-weight: 650; color: var(--ink); white-space: nowrap; margin-right: .4rem; }
.club-mini img, .club-mini .club-logo { width: 24px; height: 24px; border-radius: 6px; border: 0; box-shadow: none; font-size: .7rem; margin: 0 !important; }
body.past-hero .club-mini { display: inline-flex; }
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  .pagehead, .stickyhead { top: 52px; margin-top: -1.25rem; }
}

/* ---------- training types: bars inside the table, so labels always line up ---------- */
.types-table .bar-col { width: 45%; }
.hbar-cell { display: flex; align-items: center; gap: .5rem; }
.hbar-cell i { display: block; height: 14px; border-radius: 0 3px 3px 0; background: var(--kc, var(--accent)); min-width: 2px; }
.hbar-cell b { font-weight: 500; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }

/* ---------- club manage ---------- */
.members-table td { vertical-align: middle; }
.role-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
.role-form .rights { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.role-form .chip span { padding: .12rem .5rem; font-size: .72rem; }
details.confirm { display: inline-block; } details.confirm summary { list-style: none; cursor: pointer; }
details.confirm summary::-webkit-details-marker { display: none; }
details.confirm[open] summary { display: none; }
details.confirm form { margin: 0; }
.roles-help { list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--ink-2); display: flex; flex-direction: column; gap: .45rem; }
.roles-help b { color: var(--ink); } .roles-help i { font-style: normal; font-weight: 600; }
.row.wrap { flex-wrap: wrap; }

/* ---------- workout details (dialog) ---------- */
.z1 { --zc: #abdda4; } .z2 { --zc: #3288bd; } .z3 { --zc: #fdae61; } .z4 { --zc: #f46d43; } .z5 { --zc: #d53e4f; } .z6 { --zc: #9e0142; }
.zdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--zc); margin-right: .4rem; vertical-align: 0; }
.wo-open { display: block; margin-top: .35rem; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.wo-open:hover { color: var(--accent); }
.wo-dialog { width: 760px; }
.dialog-body { padding: 1.2rem 1.4rem 1.3rem; }
.wo-kind-chip { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--kc); border-radius: 4px; padding: .1rem .45rem; margin-bottom: .3rem; }
.wo-profile { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 6px 0 0; border-bottom: 1px solid var(--line-strong); margin: .6rem 0 .3rem; }
.wo-profile i { display: block; background: var(--zc); border-radius: 2px 2px 0 0; min-width: 2px; }
.wo-profile i.ramp { clip-path: polygon(0 55%, 100% 0, 100% 100%, 0 100%); border-radius: 0; }
.wo-profile i:hover { filter: brightness(.9); }
.wo-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-bottom: .8rem; }
.wo-steps td { padding-top: .35rem; padding-bottom: .35rem; }
.wo-steps tr.indent td:nth-child(2) { padding-left: 1.4rem; }
.wo-steps tr.rep td { background: var(--soft); }
/* Why / How it should feel / Tip: label above a wrapping sentence (not the right-aligned number rows of metric-grid) */
dl.metric-grid.wo-why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-top: .7rem; }
dl.metric-grid.wo-why > div { display: block; border-bottom: 0; border-top: 1px solid var(--grid); padding: .55rem 0 0; }
dl.metric-grid.wo-why dt { font-size: .75rem; font-weight: 500; margin-bottom: .2rem; }
dl.metric-grid.wo-why dd { font: 400 .84rem/1.45 var(--sans); white-space: normal; text-align: left; color: var(--ink); }
.week-list .wl-title.linkish { text-align: left; color: var(--ink); font: inherit; padding: 0; }
.week-list .wl-title.linkish:hover { color: var(--accent-ink); text-decoration: underline; }
.plan-more { margin: .6rem 0 .2rem; }

/* ---------- shared bits for the new pages ---------- */
p.lead { max-width: 860px; margin: -.3rem 0 1.1rem; }
.form-grid .field.wide { grid-column: 1 / -1; }
.card.slim { padding-top: .7rem; padding-bottom: .7rem; }
.card.slim form { margin: 0; }
input.short { width: 90px; }
ol.steps { padding-left: 1.2rem; } ol.steps li { margin: .2rem 0; }
.dialog-danger { padding: 0 1.4rem 1rem; margin: 0; }
tr.past td { opacity: .65; }

/* ---------- race pacing ---------- */
.eff-chip { display: inline-block; font-size: .7rem; font-weight: 650; letter-spacing: .02em; border-radius: 99px; padding: .1rem .55rem; color: #fff; background: var(--ec); }
.eff-chip.push { --ec: #d53e4f; } .eff-chip.firm { --ec: #f46d43; } .eff-chip.steady { --ec: #3288bd; } .eff-chip.ease { --ec: #66c2a5; }
.eff-chip.free { --ec: #abdda4; color: #1d4d2c; } .eff-chip.calm { --ec: #5e4fa2; } .eff-chip.finish { --ec: #9e0142; }
.route-map { height: 360px; border-radius: var(--radius-s); border: 1px solid var(--line); }
.moments { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .86rem; }
.moments li { line-height: 1.45; }
.pace-table td { vertical-align: top; }
.pace-table td.small { min-width: 260px; }
.fuel { font-size: .68rem; font-weight: 600; color: #1d4d2c; background: #eaf6f0; border-radius: 4px; padding: 0 .3rem; }
.plan-basis .row { align-items: center; gap: .6rem; }
.detail-range { display: inline-flex; align-items: center; gap: .4rem; }
.detail-range input[type=range] { width: 120px; accent-color: var(--ink); }
.course-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.course-choices .card { display: flex; flex-direction: column; margin: 0; }
.course-choices .card h2 { justify-content: flex-start; }
.course-choices .card .stack { margin-top: auto; }
@media (max-width: 1000px) { .course-choices { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.stack select { max-width: 100%; }
.step-no { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--soft); font-size: .78rem; margin-right: .35rem; vertical-align: 1px; }
.inline-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--ink-2); }
.pick-map { height: 380px; margin: .6rem 0 .8rem; }
.pick-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.pick-chips .pill { cursor: pointer; font: inherit; font-size: .8rem; }
.pick-form { align-items: center; gap: .8rem; }

/* ---------- Analyzer sub-pages (Coach / Training blocks / Race pacing) ---------- */
.subtabs { display: flex; gap: .35rem; padding: .55rem 0 .6rem; overflow-x: auto; }
.subtabs a { padding: .28rem .8rem; border-radius: 99px; font-size: .82rem; font-weight: 550; color: var(--muted); white-space: nowrap; }
.subtabs a:hover { color: var(--ink); background: var(--soft); }
.subtabs a.active { color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.subhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.subhead h2 { font-size: 1.35rem; margin: .1rem 0 0; }
.subhead .sub { color: var(--muted); font-size: .85rem; }
.tier-badge { display: inline-block; font-size: .72rem; font-weight: 650; border-radius: 99px; padding: .1rem .6rem; background: var(--soft); color: var(--ink); }
.tier-badge.premium { background: #fdf3e1; color: #8a5300; } .tier-badge.coach { background: #ece9f8; color: #3f3393; }
.tier-table td, .tier-table th { text-align: center; } .tier-table td:first-child, .tier-table th:first-child { text-align: left; }
.tier-table th.current { color: var(--accent-ink); }
.table-wrap + .caption { margin-top: .6rem; }

/* ---------- training blocks ---------- */
.block-hero { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; border-left: 4px solid var(--line-strong); }
.block-hero.verdict-better { border-left-color: var(--good); } .block-hero.verdict-likely { border-left-color: #66c2a5; }
.block-hero.verdict-worse, .block-hero.verdict-likely_worse { border-left-color: var(--bad); }
.bh-verdict { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; margin: .1rem 0 .2rem; }
.bh-number { font-size: 2.1rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; margin: .2rem 0; }
.bh-number .small { font-size: .85rem; font-weight: 500; }
.bh-windows { display: flex; flex-direction: column; gap: .5rem; margin: 0; min-width: 230px; }
.bh-windows dt { font-size: .75rem; color: var(--muted); } .bh-windows dd { margin: 0; font-weight: 600; } .bh-windows small { color: var(--muted); font-weight: 400; }
.wdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; vertical-align: 0; }
.wdot.a { background: #f46d43; } .wdot.b { background: #5e4fa2; }
.evidence tr.headline td { background: #f7fbfe; }
.evidence td { vertical-align: middle; }
.ekind { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); background: var(--soft); border-radius: 4px; padding: .05rem .35rem; margin-right: .25rem; }
.ekind.max { background: #fdecef; color: var(--bad); } .ekind.submax { background: var(--accent-soft); color: var(--accent-ink); } .ekind.best { background: #fff3e6; color: #b26b00; }
.ci-col { width: 170px; text-align: center; color: var(--muted); font-size: .72rem; }
.ci { position: relative; display: block; width: 150px; height: 16px; margin: 0 auto; }
.ci .zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.ci .rng, .ci .noise { position: absolute; top: 6px; height: 4px; border-radius: 2px; background: #b9b9c2; }
.ci .noise { background: repeating-linear-gradient(90deg, #e3e3e8 0 3px, transparent 3px 6px); top: 7px; height: 2px; }
.ci .rng.good { background: #8fc3e3; } .ci .rng.bad { background: #ef9aa5; }
.ci .pt { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink-2); border: 2px solid var(--surface); }
.ci .pt.good { background: var(--accent); } .ci .pt.bad { background: var(--bad); }
.vchip { font-size: .72rem; font-weight: 600; border-radius: 99px; padding: .1rem .5rem; white-space: nowrap; }
.vchip.better { background: #eaf6f0; color: var(--good); } .vchip.worse { background: #fdecef; color: var(--bad); } .vchip.unclear { background: var(--soft); color: var(--muted); }
.mixbar { display: flex; align-items: center; gap: .6rem; margin: .6rem 0; } .mixbar .zonebar { width: 200px; }
.type-chips { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; }
.patterns { width: 100%; font-size: .84rem; margin-bottom: .6rem; } .patterns td { padding: .3rem .4rem .3rem 0; border-bottom: 1px solid var(--grid); }
.assoc { font-size: .74rem; font-weight: 600; } .assoc.strong { color: var(--accent-ink); } .assoc.weak { color: var(--muted); }
.flash + .pagehead, .flash + .stickyhead { margin-top: 0; padding-top: .4rem; }

/* ---------------- question tabs (sport pages: History · Fitness · Insights · Plan) ---------------- */
.tabs.qtabs { gap: 2rem; }
.tabs.qtabs a { display: flex; flex-direction: column; line-height: 1.25; padding-top: .45rem; }
.tabs.qtabs a span { font-weight: 600; font-size: .92rem; }
.tabs.qtabs a small { font-size: .72rem; font-weight: 400; color: var(--muted); }
.tabs.qtabs a.active small { color: var(--ink-2); }

/* ---------------- insights: levels good / info / watch / act ---------------- */
.insight-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.insight-heads > .card { margin-bottom: 0; }
.card.insight { border-left: 4px solid var(--line-strong); }
.card.insight h3 { font-size: .95rem; margin: .2rem 0 .35rem; }
.card.insight p { margin: 0; }
.lvl-good.card, .card.lvl-good { border-left-color: var(--good); }
.card.lvl-info { border-left-color: var(--accent); }
.card.lvl-watch { border-left-color: #fdae61; }
.card.lvl-act { border-left-color: var(--orange); background: #fffaf7; }
.insight-verdict { border-left: 4px solid var(--line-strong); }
.insight-verdict h3 { font-size: 1rem; margin-bottom: .25rem; }
.insight-verdict p { margin: 0; }
.lvl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; margin-top: .4rem; }
.lvl-good .lvl-dot { background: var(--good); } .lvl-info .lvl-dot { background: var(--accent); }
.lvl-watch .lvl-dot { background: #fdae61; } .lvl-act .lvl-dot { background: var(--orange); }
ul.insight-list { list-style: none; margin: 0; padding: 0; }
ul.insight-list li { display: flex; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--grid); }
ul.insight-list li:first-child { border-top: 0; }
tr.sub td { padding-top: 0; border-top: 0; }
tr.sub + tr td, tbody tr.lvl-good td, tbody tr.lvl-info td, tbody tr.lvl-watch td, tbody tr.lvl-act td { vertical-align: top; }
.zonebar.big { height: 14px; border-radius: 7px; margin: .4rem 0 .6rem; }
.zone-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .84rem; margin-bottom: .7rem; }
.zone-legend small { color: var(--muted); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.sw.easy { background: #3288bd; } .sw.mid { background: #fdae61; } .sw.hard { background: #d53e4f; }
.rho { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; max-width: 60px; }
.rho.neg { background: var(--orange); }

/* ---------------- home ---------------- */
.home-head { margin-bottom: .2rem; }
p.home-status { font-size: 1.12rem; color: var(--ink-2); margin: 0 0 1.25rem; max-width: 860px; }
.home-next .card h2 { margin-bottom: .4rem; }
a.next-row { display: flex; gap: .8rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--grid); color: var(--ink); }
a.next-row:first-of-type { border-top: 0; }
a.next-row:hover { color: var(--accent-ink); }
.next-row .when { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; padding: .25rem 0; border-radius: var(--radius-s); background: var(--soft); line-height: 1.1; }
.next-row .when b { font-size: 1.05rem; } .next-row .when small { font-size: .68rem; color: var(--muted); }
a.card.sport-card { display: block; color: var(--ink); margin-bottom: 0; }
a.card.sport-card:hover { border-color: var(--line-strong); }
.sport-card h3 { font-size: 1rem; margin: 0; }
.sport-week { margin: .5rem 0 .25rem; }
.section-title a.small { margin-left: auto; font-weight: 500; }

/* ---------------- settings: sports ---------------- */
.sport-choice { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
label.check.chip { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); cursor: pointer; }
label.check.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ---------------- knowledge ---------------- */
a.card.article-card { display: block; color: var(--ink); margin-bottom: 0; }
a.card.article-card:hover { border-color: var(--line-strong); }
.article-card h3 { font-size: 1rem; margin: .3rem 0 .4rem; line-height: 1.3; }
.article-card p { margin: 0; }
.article-grid { align-items: stretch; }
.card.partner-slot { margin-bottom: 0; border-style: dashed; background: var(--soft); }
.badge.partner { background: #fff4e5; color: #8a5300; border-color: #f6d9a8; }
article.article { max-width: 720px; margin: 0 auto 2rem; }
article.article h1 { font-size: 1.7rem; line-height: 1.2; margin: .3rem 0 .6rem; }
.prose { font-size: 1rem; line-height: 1.65; color: var(--ink); }
.prose h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.prose h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 .9rem; }
.prose li { margin: .25rem 0; }
.prose blockquote { margin: 0 0 .9rem; padding: .3rem 1rem; border-left: 3px solid var(--line-strong); color: var(--ink-2); }

/* ---------------- cookie notice, legal pages, consent ---------------- */
.cookie-notice .cookie-actions { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.cookie-notice { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); transform: translateX(-50%); z-index: 1100;
  display: flex; gap: 1rem; align-items: center; max-width: min(760px, calc(100vw - 2rem)); padding: .7rem .8rem .7rem 1rem; font-size: .84rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(24,24,27,.16); }
.legal { max-width: 860px; margin: 0 auto; }
.legal-text { max-width: none; margin-top: 1rem; }
.legal-text h1 { font-size: 1.6rem; margin: .4rem 0 .8rem; }
.legal-text table { margin: .4rem 0 1rem; font-size: .88rem; } .legal-text td { white-space: normal; vertical-align: top; }
.consent-box { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid #cfe3f1;
  border-radius: var(--radius-s); background: var(--accent-soft); margin: .4rem 0; }
.consent-box label.check { font-size: .84rem; line-height: 1.45; }
.subsection { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--grid); }
.subsection h3 { font-size: .9rem; margin-bottom: .3rem; }
.btn.disabled { opacity: .45; cursor: not-allowed; }
[data-consent-gate].nudge .consent-box { border-color: var(--orange); }
/* Home: today's activities, one wide card at the top */
.today-acts { border-left: 4px solid var(--accent); }
.today-acts-head { display: flex; align-items: baseline; gap: .7rem; padding: 1rem 1.25rem .2rem; }
.today-acts-head h2 { margin: 0; }
.today-acts td { vertical-align: middle; }
.today-acts .big-num { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
/* the ••• menu of an activity: always visible (top-right of the page); items can be links too */
.act-menu { opacity: 1; }
.act-menu summary { border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); padding: .22rem .6rem; }
.row-menu-list a { display: block; font-size: .84rem; padding: .42rem .6rem; border-radius: 6px; color: var(--ink); white-space: nowrap; }
.row-menu-list a:hover { background: var(--soft); color: var(--ink); }
.act-nav { align-items: center; }
/* planned club activities: each a calm bordered, clickable row */
.ev-row.card-row { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .6rem .75rem; margin-bottom: .55rem;
  background: var(--surface); cursor: pointer; transition: border-color .1s, box-shadow .1s; }
.ev-row.card-row:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.ev-row.card-row:hover { border-color: #b9d6ea; box-shadow: 0 2px 8px rgba(50,136,189,.10); }
.club-logo.xs { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); box-shadow: none; font-size: .72rem;
  display: inline-grid; place-items: center; flex: none; }
.discover-filters { display: flex; flex-direction: column; align-items: stretch; gap: 1.0rem}
.discover-filters .filter-row { display: flex; flex-wrap: wrap; gap: 0.6rem 2.0rem; align-items: center; }
.custom-km { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .8rem; }
.custom-km input { width: 4.5rem; height: 30px; padding: 0 .5rem; font-size: .8rem; }
/* club profile chips + heat map */
.club-profile { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; margin-top: .4rem; }
.kind-chip { font-size: .7rem; font-weight: 600; padding: .08rem .5rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #cfe3f1; }
.kind-chip.dist { background: var(--soft); color: var(--ink-2); border-color: var(--line); }
.club-profile .days { font-size: .72rem; color: var(--muted); margin-left: .2rem; }
.heat-map { height: 420px; border-radius: var(--radius-s); border: 1px solid var(--line); }
/* Premium glimpse: the part is there, blurred, with a card on top (tiers.GLIMPSE, glimpse macro) */
.glimpse { position: relative; margin-bottom: 1rem; }
.glimpse-content { filter: blur(5px) saturate(.6); max-height: 560px; overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.glimpse-card { position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); width: min(460px, 92%); padding: 1.1rem 1.25rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(24,24,27,.18); }
.glimpse-card h3 { font-size: 1.05rem; margin: .5rem 0 .3rem; }
.glimpse-card ul.plain { margin-bottom: .9rem; }

/* top 5, then "Show more": ~15 rows visible in a scrolling box (segment leaderboard + my efforts) */
.show-first:not(.expanded) tr.more { display: none; }
.show-first.expanded { max-height: calc(15 * 2.35rem + 2.5rem); overflow-y: auto; }
.show-first.expanded thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.show-more { margin: .5rem 0 0; }
.card.flush .card-foot { padding: .5rem 1rem .75rem; }
.board-filter { margin-bottom: .5rem; }

/* planned activity row: the title and its badges (recurring, members, cancelled) on one line */
.ev-head { display: flex; align-items: center; gap: .4rem; min-width: 0; flex-wrap: nowrap; }
.ev-head .ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-head .badge { flex: none; white-space: nowrap; }
.club-logo.person { border-radius: 50%; }

/* Home › Your sports: width = page width / number of sports (max 3 per row) */
.sport-cards { display: grid; gap: 1rem; margin-bottom: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sport-cards.n1 { grid-template-columns: minmax(0, 1fr); }
.sport-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sport-cards > .card { margin-bottom: 0; }
@media (max-width: 760px) { .sport-cards, .sport-cards.n2 { grid-template-columns: minmax(0, 1fr); } }

/* club heat map legend: the same five-step ramp as community.js (light = rarely, dark = often) + the planned-route key */
.heat-legend { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.heat-ramp { display: inline-flex; } .heat-ramp i { width: 1.1rem; height: .7rem; display: block; }
.heat-ramp i:nth-child(1) { background: #fee08b; } .heat-ramp i:nth-child(2) { background: #fdae61; }
.heat-ramp i:nth-child(3) { background: #f46d43; } .heat-ramp i:nth-child(4) { background: #d53e4f; }
.heat-ramp i:nth-child(5) { background: #9e0142; }
.planned-key { display: inline-flex; align-items: center; gap: .35rem; margin-left: .75rem; }
.planned-key i { width: 1.6rem; border-top: 3px dashed #3288bd; display: block; }
.pagehead .sub .plan-btn { margin-left: .9rem; vertical-align: middle; }

/* planned activity types: race / drop ride are competitions (dark), no-drop is friendly (green) */
.badge.type-race { background: #18181b; color: #fff; border-color: #18181b; }
.badge.type-drop { background: #fdeaea; color: #9e0142; border-color: #f3b8bf; }
.badge.type-no_drop { background: #eaf6ec; color: #1f6b3a; border-color: #b9dfc3; }
.koc-crown { font-size: 1.1rem; }
.board-wrap { max-height: 28rem; overflow-y: auto; }
.card.flush > div.card-pad { padding: 1rem 1.25rem .25rem; } .card.flush > div.card-pad h2 { margin: 0; }
/* club statistics: activity names and what they became wrap instead of widening the table */
.stats-split td.name { white-space: normal; min-width: 11rem; }
.stats-split td.nowrap { white-space: nowrap; }
.stats-split th, .stats-split td { padding-left: .5rem; padding-right: .5rem; }

/* club calendar: a compact month next to the list of upcoming activities */
.cal-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cal.compact .cal-day { min-height: 76px; padding: .25rem .3rem .35rem; }
.cal.compact .cal-item { font-size: .68rem; padding: .15rem .3rem; }
.cal.compact .cal-item .cal-sub { display: none; }
.upcoming-card { max-height: 44rem; overflow-y: auto; }
.up-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--grid); cursor: pointer; }
.up-row:last-child { border-bottom: 0; }
.up-row .ev-rsvp { margin-top: .35rem; display: flex; align-items: center; gap: .5rem; }
@media (max-width: 900px) { .cal-split { grid-template-columns: minmax(0, 1fr); } }

/* club manage: about 5 members visible, the rest scroll; a name search above */
.members-scroll { max-height: 22rem; overflow-y: auto; border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.members-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.member-search { max-width: 14rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; }

/* rows that are links (club statistics › when the club rides) */
.metric-grid.link-rows > a { display: flex; justify-content: space-between; align-items: baseline; color: inherit; text-decoration: none;
  padding: .45rem .2rem; border-bottom: 1px solid var(--grid); }
.metric-grid.link-rows > a:hover { background: var(--soft); }
.metric-grid.link-rows dt, .metric-grid.link-rows dd { margin: 0; }
.filter-chips { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0 0 .75rem; font-size: .85rem; }
.where-group input[type=search] { min-width: 14rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; }
/* club statistics › club activities: the filter bar above the table */
.table-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.table-filter input[type=search], .table-filter select { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: .85rem; }
.table-filter input[type=search] { min-width: 12rem; }

/* on/off switch: a styled checkbox (role="switch"); club Manage › Results and leaderboards */
.switch-list { display: flex; flex-direction: column; gap: .2rem; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0;
  border-bottom: 1px solid var(--grid); cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; gap: .1rem; }
.switch { position: relative; flex: none; width: 2.6rem; height: 1.5rem; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: #d4d4d8; transition: background .15s; pointer-events: none; }
.switch-track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* club Manage › Logo and background: two small thumbnails of one size; click to change, hover for × (asks first) */
.img-tiles { display: flex; gap: 1.25rem; margin-bottom: .75rem; flex-wrap: wrap; }
.img-field .field-label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: .35rem; }
.img-tile { position: relative; width: 4.5rem; height: 4.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-s);
  background: var(--soft); }
.img-tile.changed { border: 2px solid var(--accent); }
.img-pick { display: block; width: 100%; height: 100%; cursor: pointer; border-radius: inherit; overflow: hidden; }
.img-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.img-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.3rem; }
.img-remove { position: absolute; top: -.45rem; right: -.45rem; width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: #fff; color: #9e0142; font-size: .95rem; line-height: 1; cursor: pointer; opacity: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: opacity .15s; display: grid; place-items: center; }
.img-tile:hover .img-remove, .img-tile:focus-within .img-remove { opacity: 1; }
.img-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.saved-note { color: var(--good); opacity: 0; transition: opacity .3s; } .saved-note.on { opacity: 1; }
.confirm-dialog { width: min(24rem, 92vw); } .confirm-dialog p { margin: 0 0 1rem; font-weight: 500; }

/* the page-wide back button: in the gap between the sidebar and the page (base.html, app.js) */
.container { position: relative; }
.page-back-rail { position: absolute; left: .95rem; top: 3.0rem; bottom: 0; width: 30px; z-index: 5; pointer-events: none; }
.page-back { position: sticky; top: 1rem; pointer-events: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1rem; box-shadow: var(--shadow); z-index: 5; }
.page-back:hover { background: var(--soft); color: var(--ink); }
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {     /* phones: a smaller gutter and button */
  .container { padding-left: 2.6rem; }
  .page-back-rail { left: .3rem; top: 1.45rem; }
  .page-back { width: 28px; height: 28px; }
}
.side-nav .tag.unread { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }

/* club Manage › Members: role select + a compact rights menu on one line; Save appears when something changed */
.role-form { flex-wrap: nowrap; gap: .5rem; }
.rights-menu { position: relative; }
.rights-menu > summary { list-style: none; cursor: pointer; font-size: .78rem; padding: .3rem .6rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.rights-menu > summary::-webkit-details-marker { display: none; }
.rights-menu[open] > summary { border-color: var(--accent); }
.rights-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 17rem; padding: .5rem .65rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: .35rem; }

/* Statistics: the type filter next to the year; three charts in a row; the leaderboard's sort buttons as one bar
   across the table (equal parts, however many sorts are shown) */
.stats-toolbar { justify-content: flex-start; gap: 1.5rem; }
.stats-charts .card h2 { font-size: .9rem; }
.seg-bar { display: flex; gap: 2px; padding: 3px; margin-bottom: .75rem; background: #f0f0f2; border-radius: 9px; }
.seg-bar a { flex: 1 1 auto; text-align: center; padding: .3rem .45rem; border-radius: 7px; color: var(--ink-2); font-size: .78rem;
  font-weight: 500; white-space: nowrap; }
.seg-bar a:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.seg-bar a.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* inferred from past dates (a recurring activity's usual athletes / speed / W/kg): italic */
em.inferred { font-style: italic; color: var(--ink-2); }

/* club calendar: one-off activities first, recurring ones marked with a dashed edge; member workouts lighter */
.cal-item.club.recurring { border-left-style: dashed; }
.cal-item.club.proposed { background: #eef7f3; border-left-color: var(--teal); }
.up-group { margin: .9rem 0 .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  display: flex; justify-content: space-between; align-items: baseline; }
.up-group:first-of-type { margin-top: 0; }
.up-group a { text-transform: none; letter-spacing: 0; }

/* club Training */
.training-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.training-row.paused { background: #fafafb; }
.training-row.paused .ev-title, .training-row.ended .ev-title { color: var(--ink-2); }
.training-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.training-when b { margin-right: .5rem; }
.training-tools { display: flex; gap: .4rem; align-items: flex-start; flex: none; }
.training-tools form { margin: 0; }
.badge.paused { border-color: #f6d9a8; background: #fff8ec; color: #8a5300; }
.pause-menu { position: relative; }
.pause-menu > summary { list-style: none; } .pause-menu > summary::-webkit-details-marker { display: none; }
.pause-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 17rem; padding: .7rem .8rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: .5rem; }
.pause-pop .field { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.pause-pop .caption { margin: 0; }
.btn.danger { color: #9e0142; }

/* club feed: proposing a workout, the workout inside a post, likes */
.workout-new > summary { cursor: pointer; font-weight: 500; color: var(--accent-ink); list-style: none; }
.workout-new > summary::-webkit-details-marker { display: none; }
.workout-new[open] > summary { margin-bottom: .75rem; }
.post-workout { display: flex; gap: .9rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .55rem .75rem; margin: .4rem 0 .6rem; background: #fbfdfc; cursor: pointer; }
.post-workout:hover { border-color: #b9d6ea; }
.post-workout .ev-main { flex: 1; min-width: 0; }
.like-box { margin: .35rem 0 .1rem; } .like-box form { margin: 0; }
.like-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: .12rem .6rem; font: inherit; font-size: .78rem;
  color: var(--ink-2); cursor: pointer; }
.like-btn:hover { border-color: #f3b3bd; }
.like-btn.on { color: #c4314b; border-color: #f3b3bd; background: #fff4f6; }

/* Messages: conversations left, the open conversation right */
.msg-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.msg-list { max-height: 70vh; overflow-y: auto; }
.msg-conv { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border-bottom: 1px solid var(--grid); color: var(--ink); }
.msg-conv:hover { background: var(--soft); color: var(--ink); }
.msg-conv.active { background: var(--accent-soft); }
.msg-conv-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-conv-main .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv .tag.unread { font-size: .65rem; padding: .05rem .4rem; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.msg-scroll { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0 .75rem; }
.msg { max-width: 75%; padding: .45rem .7rem; border-radius: 12px; }
.msg.theirs { align-self: flex-start; background: var(--soft); }
.msg.mine { align-self: flex-end; background: var(--accent-soft); }
.msg-meta { font-size: .68rem; margin-top: .15rem; }
.msg-new { display: flex; gap: .5rem; align-items: flex-end; border-top: 1px solid var(--line); padding-top: .75rem; }
.msg-new textarea { flex: 1; }
@media (max-width: 700px) { .msg-layout { grid-template-columns: minmax(0, 1fr); } }

.members-scroll { overflow-x: hidden; }
.members-table td, .members-table th { padding-left: .4rem; padding-right: .4rem; }
.members-table td.num { white-space: nowrap; }
.training-intro { flex: 1; margin: 0; max-width: 52rem; }

/* club activity page (community/event.html): the 📍 meeting point pop-out, the group's route, the interval table */
.meet-pop { display: inline-block; position: relative; }
.meet-pop > summary { display: inline; cursor: pointer; color: var(--accent-ink); list-style: none; }
.meet-pop > summary::-webkit-details-marker { display: none; }
.meet-pop > summary:hover { text-decoration: underline; }
.meet-pop-panel { position: absolute; z-index: 20; top: 1.6rem; left: 0; width: min(420px, 86vw); padding: .4rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.meet-pop-panel .event-map { height: 260px; }
.who-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.group-map { height: 100%; min-height: 320px; }
.iv-row { cursor: pointer; }
.iv-row:hover td { background: var(--soft); }
.iv-row[aria-expanded="true"] .iv-caret { display: inline-block; transform: rotate(90deg); }
.iv-rider td { font-size: .82rem; background: var(--soft); }
.iv-rider td.indent { padding-left: 1.6rem; }
/* a ✕ that closes an open <details> form (club feed: propose a workout) */
.workout-new { position: relative; }
.details-x { position: absolute; top: .55rem; right: .7rem; border: 0; background: none; font-size: 1.15rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: .1rem .3rem; border-radius: 6px; }
.details-x:hover { color: var(--ink); background: var(--soft); }
/* Messages: start a new conversation (top of the conversation list) */
.msg-start { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.msg-start > summary { list-style: none; display: inline-flex; }
.msg-start > summary::-webkit-details-marker { display: none; }
.msg-start form { margin-top: .5rem; flex-wrap: nowrap; }
.msg-start select { flex: 1; min-width: 0; }
/* Settings › Sharing: exceptions per club; about 5 rows show, the rest scroll */
.club-share { max-height: 15.5rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-s); margin: .3rem 0; }
.club-share thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.club-share select.inline { font-size: .8rem; }
/* club activity: Who did the work (share bar), Will I hang on? / Fresh enough? cards */
.bar-cell { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: var(--soft); vertical-align: middle; overflow: hidden; }
.bar-cell i { display: block; height: 100%; background: var(--accent); }
.prep-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.prep-split h2 .fit { vertical-align: middle; margin-left: .3rem; }
/* your own value that the others don't see (Settings › Sharing) */
.private-mark { font-size: .7rem; opacity: .7; cursor: help; }
/* segment leaderboard: about 10 rows, then it scrolls (the header stays) */
.board-scroll { max-height: calc(10 * 2.35rem + 2.5rem); overflow-y: auto; }
.board-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
/* activity header: "Visible to" (Activity.visibility) sits in the meta row */
.vis-form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.vis-form select.inline { font-size: .78rem; padding-top: .05rem; padding-bottom: .05rem; }
/* calendar: Sport / Show as drop-down checklists */
.cal-filters .group { display: flex; align-items: center; gap: .45rem; }
.cal-filters details.dropdown { min-width: 170px; }
.cal-filters details.dropdown summary { height: 32px; font-size: .84rem; }
/* segment: compare efforts (colour swatches match the chart lines) */
.cmp-form { flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.cmp-form .group { display: flex; align-items: center; gap: .4rem; }
.cmp-form details.dropdown { min-width: 220px; }
.cmp-table { margin-bottom: .8rem; }
.sw.cmp-blue { background: #3288bd; } .sw.cmp-red { background: #d53e4f; } .sw.cmp-purple { background: #5e4fa2; }
.sw.cmp-orange { background: #f46d43; } .sw.cmp-teal { background: #66c2a5; }
/* segment compare: × on row hover removes the effort; drag band for zooming; crosshair on the charts */
.row-x { visibility: hidden; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: var(--muted); font-size: 1rem; text-decoration: none; }
tr:hover .row-x, .row-x:focus { visibility: visible; }
@media (hover: none) { .row-x { visibility: visible; } }
.row-x:hover { background: var(--soft); color: var(--bad); text-decoration: none; }
.cmp-charts canvas { cursor: crosshair; }
.cmp-drag { position: absolute; background: rgba(50, 136, 189, .15); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent);
  pointer-events: none; }
/* Messages: the "To" field's suggestions */
.user-suggest { position: relative; margin-top: .5rem; }
.user-suggest input { width: 100%; }
.suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 30; margin: 0; padding: .3rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 10px 28px rgba(24,24,27,.16); }
.suggest-list li { padding: .4rem .55rem; border-radius: 6px; cursor: pointer; font-size: .86rem; }
.suggest-list li:hover, .suggest-list li.active { background: var(--soft); }