:root {
  --ink:#0f0f0e; --body:#3a3a37; --mute:#7a7770; --faint:#bababa;
  --hair:#ececea; --hair2:#e0ddd2; --paper:#ffffff;
  --page:#fafaf7; --page-warm:#f4f2ed;
  --accent:#34b233; --accent-soft:rgba(52,178,51,0.10);
  --heat:#E8633A; --heat-soft:rgba(232,99,58,0.10);
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:Geist, system-ui, sans-serif;
}
html,body{margin:0;padding:0;background:var(--page);font-family:var(--font-body);color:var(--ink);}
*{box-sizing:border-box;} a{color:inherit;}

.bk-topnav{height:76px;background:var(--paper);border-bottom:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;padding:0 36px;
  font-family:var(--font-display);position:sticky;top:0;z-index:50;}
.bk-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.bk-logo{display:block;flex-shrink:0;}
.bk-brand-name{display:flex;flex-direction:column;line-height:1;}
.bk-brand-name strong{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.bk-brand-name span{font-size:10px;font-weight:500;letter-spacing:0.18em;color:var(--mute);margin-top:4px;}
.bk-nav{display:flex;align-items:stretch;gap:36px;align-self:stretch;}
.bk-nav a{display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--mute);
  text-decoration:none;text-transform:uppercase;letter-spacing:0.1em;
  border-bottom:2px solid transparent;margin-bottom:-1px;}
.bk-nav a.is-active{color:var(--ink);border-bottom-color:var(--accent);}
.bk-topnav-right{display:flex;align-items:center;gap:16px;}
.bk-week-pill{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;white-space:nowrap;}
.bk-week-pill .kicker{font-size:10px;font-weight:600;color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;}
.bk-week-pill .value{font-size:13px;font-weight:700;color:var(--ink);}
.bk-avatar{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.bk-add-ride{margin:0;}
.bk-add-ride-btn{display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;background:var(--accent);color:var(--paper);
  font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0.02em;
  cursor:pointer;user-select:none;transition:filter .15s;}
.bk-add-ride-btn:hover,.bk-add-ride-btn:focus{filter:brightness(1.05);outline:none;}
.bk-add-ride-btn svg{display:block;}
.bk-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Sequential-uploader progress toast (web/assets/upload.js).
   Centred modal-style during the batch — dimmed backdrop + warning
   row so the user notices and doesn't accidentally close the tab. */
.bk-upload-backdrop{position:fixed;inset:0;z-index:99;
  background:rgba(15,15,14,0.45);backdrop-filter:blur(2px);}
.bk-upload-toast{position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:100;
  background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  box-shadow:0 12px 40px rgba(15,15,14,0.28);
  padding:22px 26px;min-width:360px;max-width:480px;
  font-family:var(--font-display);color:var(--ink);}
.bk-upload-toast-warn{display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin:-8px -10px 14px;border-radius:8px;
  background:var(--heat-soft);color:var(--heat);
  font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1.35;}
.bk-upload-toast-warn .material-symbols-outlined{font-size:22px;
  font-variation-settings:'FILL' 1, 'wght' 600;flex-shrink:0;}
.bk-upload-toast-title{font-size:15px;font-weight:700;letter-spacing:0.02em;
  margin-bottom:10px;}
.bk-upload-toast-progress{height:6px;background:var(--hair);border-radius:3px;
  overflow:hidden;margin-bottom:10px;}
.bk-upload-toast-progress .bar{height:100%;width:0;background:var(--accent);
  transition:width 0.2s ease;}
.bk-upload-toast-counts{font-size:12px;font-weight:600;color:var(--mute);
  letter-spacing:0.04em;}
.bk-upload-toast-file{font-size:11px;color:var(--mute);margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-body);}
.bk-upload-toast.is-done{border-color:var(--accent-soft);}
.bk-upload-toast.is-done .bk-upload-toast-title{color:var(--accent);}

.bk-main{max-width:1280px;margin:0 auto;padding:28px 36px 80px;}

.bk-week-strip{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:20px 24px;margin-bottom:24px;display:grid;
  grid-template-columns:auto 1fr auto auto auto auto auto;
  align-items:center;gap:28px;}
.bk-week-label{display:flex;flex-direction:column;gap:4px;}
.bk-week-label .kicker{font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;}
.bk-week-label .value{font-family:var(--font-display);font-size:16px;font-weight:700;
  color:var(--ink);letter-spacing:-0.01em;}
.bk-week-bars{display:flex;align-items:flex-end;gap:8px;height:44px;padding-left:8px;}
.bk-week-day{display:flex;flex-direction:column;align-items:center;gap:5px;}
.bk-week-day .bar{width:18px;min-height:2px;background:var(--hair2);border-radius:3px;}
.bk-week-day.today .bar{background:var(--accent);}
.bk-week-day .label{font-family:var(--font-display);font-size:9px;font-weight:600;
  color:var(--mute);letter-spacing:0.06em;}
.bk-week-day.today .label{color:var(--ink);}
.bk-week-divider{height:40px;width:1px;background:var(--hair);}
.bk-week-vs{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
.bk-week-vs .kicker{font-family:var(--font-display);font-size:10px;font-weight:600;
  color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;}
.bk-week-vs .pill{display:inline-flex;align-items:center;gap:4px;
  background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:999px;
  font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:-0.01em;}
.bk-week-vs .pill.neg{background:var(--heat-soft);color:var(--heat);}

.bk-metric{display:flex;flex-direction:column;min-width:0;}
.bk-metric .lab{font-family:var(--font-display);font-weight:600;color:var(--mute);
  text-transform:uppercase;letter-spacing:0.12em;margin-bottom:4px;}
.bk-metric .val{display:flex;align-items:baseline;gap:4px;line-height:1;white-space:nowrap;}
.bk-metric .val .v{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.bk-metric .val .u{font-family:var(--font-display);font-weight:500;color:var(--mute);}
.bk-metric.sm .val .v{font-size:16px;} .bk-metric.sm .val .u{font-size:10px;}
.bk-metric.sm .lab{font-size:9px;margin-bottom:3px;}
.bk-metric.md .val .v{font-size:22px;} .bk-metric.md .val .u{font-size:10px;} .bk-metric.md .lab{font-size:9px;}
.bk-metric.lg .val .v{font-size:30px;} .bk-metric.lg .val .u{font-size:12px;} .bk-metric.lg .lab{font-size:10px;}
.bk-metric.heat .val .v{color:var(--heat);}
.bk-metric.accent .val .v{color:var(--accent);}
.bk-metric .sub{font-family:var(--font-body);font-size:11px;color:var(--mute);margin-top:2px;}

.bk-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:36px 0 16px;}
.bk-section-head .titles{display:flex;align-items:baseline;gap:14px;}
.bk-section-head .kicker{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;}
.bk-section-head h2{margin:0;font-family:var(--font-display);font-size:22px;font-weight:700;
  letter-spacing:-0.02em;color:var(--ink);}
.bk-section-head .count{font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--faint);}
.bk-filters{display:flex;gap:6px;}
.bk-filters button{border:none;background:transparent;color:var(--mute);
  font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;cursor:pointer;}
.bk-filters button.is-active{background:var(--ink);color:var(--paper);}

.bk-hero{background:var(--paper);border:1px solid var(--hair);border-radius:16px;overflow:hidden;}
.bk-hero-meta-row{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 0;gap:12px;}
.bk-hero-meta-row .left{display:flex;align-items:center;gap:14px;}
.bk-latest-pill{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:0.14em;text-transform:uppercase;background:var(--accent-soft);
  padding:4px 10px;border-radius:999px;}
.bk-meta-text{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--mute);
  letter-spacing:0.08em;text-transform:uppercase;}
.bk-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.bk-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  font-family:var(--font-display);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;}
.bk-badge.accent{background:var(--accent-soft);color:var(--accent);}
.bk-badge.heat{background:var(--heat-soft);color:var(--heat);}
.bk-badge.cool{background:rgba(47,110,168,0.10);color:#2F6EA8;}
.bk-badge.ink{background:#f0efea;color:var(--ink);}

.bk-hero-title-wrap{padding:14px 28px 18px;}
.bk-hero-title{margin:0;font-family:var(--font-display);font-size:34px;font-weight:700;
  letter-spacing:-0.025em;color:var(--ink);line-height:1.05;}
.bk-hero-title a{text-decoration:none;color:inherit;}
.bk-hero-title a:hover{color:var(--accent);}

.bk-hero-mid{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border-top:1px solid var(--hair);}
.bk-hero-map{min-height:360px;border-right:1px solid var(--hair);background:var(--page-warm);
  display:block;color:inherit;text-decoration:none;cursor:pointer;}
.bk-hero-map .bk-map-svg{width:100%;height:100%;min-height:360px;display:block;}
.bk-hero-map .bk-map-empty{width:100%;height:100%;min-height:360px;background:var(--page-warm);}
.bk-hero-map .bk-tile-map{width:100%;height:100%;min-height:360px;display:block;background:var(--page-warm);cursor:pointer;}
.bk-hero-metrics{padding:24px 28px;display:grid;grid-template-columns:1fr 1fr;
  row-gap:22px;column-gap:24px;align-content:flex-start;}
.bk-hero-metrics .div{grid-column:1 / -1;height:1px;background:var(--hair);margin:4px 0;}

.bk-hero-elev{border-top:1px solid var(--hair);padding:14px 28px 18px;}
.bk-hero-elev-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
.bk-hero-elev-head .kicker{font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;}
.bk-hero-elev-head .range{font-family:var(--font-display);font-size:10px;font-weight:600;
  color:var(--mute);letter-spacing:0.06em;}
.bk-hero-footer{border-top:1px solid var(--hair);padding:16px 28px;display:flex;justify-content:flex-end;}
.bk-hero-footer a{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:2px;}

/* Shared placeholder when a ride has no route — shows a trainer icon. */
.bk-map-empty{display:flex;align-items:center;justify-content:center;color:var(--mute);}
/* Material Symbol used as the no-route placeholder. Sized per host:
   smaller in row thumbs, larger in the hero / detail map area. */
.bk-indoor-icon{font-size:48px;color:var(--mute);opacity:0.55;line-height:1;}
.bk-hero-map .bk-indoor-icon{font-size:96px;}
.rd-map .bk-indoor-icon{font-size:112px;}
.bk-row-map .bk-indoor-icon{font-size:40px;}

/* Gap between the hero card and the rows below it. */
.bk-hero + .bk-rows{margin-top:24px;}

.bk-rows{display:flex;flex-direction:column;gap:14px;}
.bk-row{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  display:grid;grid-template-columns:180px 1fr auto;gap:0;overflow:hidden;
  text-decoration:none;color:inherit;transition:border-color 0.15s, transform 0.15s;}
.bk-row:hover{border-color:var(--hair2);}
.bk-row-map{border-right:1px solid var(--hair);height:160px;background:var(--page-warm);}
.bk-row-map .bk-map-svg{width:100%;height:100%;display:block;}
.bk-row-map .bk-map-empty{width:100%;height:100%;background:var(--page-warm);}
.bk-row-map .bk-tile-map{width:100%;height:100%;display:block;background:var(--page-warm);}
.bk-row-content{padding:16px 22px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.bk-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.bk-row-top .left{display:flex;align-items:center;gap:10px;min-width:0;}
.bk-row-date{font-family:var(--font-display);font-size:11px;font-weight:600;
  color:var(--mute);letter-spacing:0.1em;text-transform:uppercase;}
.bk-row-title-wrap{min-width:0;}
.bk-row-title{margin:0;font-family:var(--font-display);font-size:19px;font-weight:700;
  letter-spacing:-0.015em;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-row-loc{margin:3px 0 0;font-size:12px;color:var(--mute);}
.bk-row-metrics{display:flex;gap:28px;align-items:flex-end;margin-top:auto;flex-wrap:wrap;}

/* Photo strip on each rides-list row — single horizontal row, no wrap.
   Whole row is already an <a href="ride.php?id=N">, so the thumbs
   inherit the click target (clicking a thumb opens the ride detail
   page, not the bigger photo). Overflow clipped so we never produce
   a second visual row. */
.bk-row-photos{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px;
  overflow:hidden;}
.bk-row-photos img{width:56px;height:56px;flex:0 0 56px;
  object-fit:cover;border-radius:6px;display:block;background:var(--page);}

/* Hero-card variant — same single-row strip, slightly bigger thumbs
   since the hero card has more visual weight. Wrapped in its own
   anchor (the hero isn't a single all-row link the way rows are),
   linking to ride.php. */
.bk-hero-photos{display:flex;flex-wrap:nowrap;gap:8px;margin-top:14px;
  overflow:hidden;text-decoration:none;}
.bk-hero-photos img{width:80px;height:80px;flex:0 0 80px;
  object-fit:cover;border-radius:8px;display:block;background:var(--page);}
.bk-row-right{padding:16px 18px 16px 0;display:flex;flex-direction:column;gap:12px;
  justify-content:center;align-items:flex-end;min-width:90px;}

.bk-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:36px;}
.bk-pagination a, .bk-pagination .meta{font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;}
.bk-pagination a{border:1px solid var(--hair2);color:var(--ink);text-decoration:none;
  padding:10px 22px;border-radius:999px;}
.bk-pagination a:hover{border-color:var(--ink);}
.bk-pagination .meta{color:var(--mute);}

/* Bottom-of-page monthly navigation: horizontally-scrolling dot-calendars,
   newest month first. Each month is a clickable link that jumps to the
   page containing that month's newest ride. */
/* Monthly stats bar at the top of the content column. */
.bk-month-strip{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:16px 22px;margin-bottom:18px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;}
.bk-month-strip-label{display:flex;flex-direction:column;gap:3px;}
.bk-month-strip-label .kicker{font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;}
.bk-month-strip-label .value{font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--ink);letter-spacing:-0.01em;}
.bk-month-strip-stats{display:flex;align-items:center;gap:28px;}
.bk-month-stat{display:flex;flex-direction:column;gap:3px;align-items:flex-end;}
.bk-month-stat .kicker{font-family:var(--font-display);font-size:10px;font-weight:600;
  color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;}
.bk-month-stat .value{font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--ink);}

/* List page layout: left rail (monthly nav) + main content. */
.bk-main-with-sidebar{display:grid;grid-template-columns:180px 1fr;gap:24px;}
.bk-monthnav-sidebar{align-self:start;}
.bk-main-content{min-width:0;}

.bk-monthnav{display:flex;flex-direction:column;gap:10px;
  background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:14px 16px;}
.bk-monthnav-month{flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 6px;border-radius:8px;
  text-decoration:none;color:inherit;
  transition:background 0.12s;}
.bk-monthnav-month:hover{background:var(--page);}
.bk-monthnav-month.is-active{background:var(--accent-soft);}
.bk-monthnav-label{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.04em;white-space:nowrap;}
.bk-monthnav-month.is-active .bk-monthnav-label{color:var(--accent);}
.bk-monthcal-dows{display:grid;grid-template-columns:repeat(7, 8px);gap:3px;margin-bottom:2px;}
.bk-monthcal-dows span{font-family:var(--font-display);font-size:7px;font-weight:700;
  color:var(--mute);text-align:center;line-height:1;}
.bk-monthcal{display:grid;grid-template-columns:repeat(7, 8px);gap:3px;}
.bk-monthcal-cell{width:7px;height:7px;border-radius:50%;background:var(--hair);}
.bk-monthcal-cell.has{background:var(--accent);}
.bk-monthcal-cell.empty{visibility:hidden;}
.bk-monthnav-year-jump{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--mute);
  font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:0.08em;
  transition:background 0.12s,color 0.12s;}
.bk-monthnav-year-jump:hover{background:var(--page);color:var(--ink);}
.bk-monthnav-year-jump .arrow{font-size:13px;line-height:1;}
.bk-monthnav-year-jump.up{border-bottom:1px dashed var(--hair);margin-bottom:4px;}
.bk-monthnav-year-jump.down{border-top:1px dashed var(--hair);margin-top:4px;}

/* ── Profile page ──────────────────────────────────────────────── */
.bk-profile-header{margin-bottom:36px;}
.bk-profile-username{font-family:var(--font-display);font-size:32px;font-weight:700;
  letter-spacing:-0.02em;margin:0 0 6px;color:var(--ink);}
.bk-profile-meta{margin:0;color:var(--mute);font-size:14px;}
.bk-profile-section{margin-bottom:32px;}

.bk-yeargrid{display:flex;flex-direction:column;gap:14px;
  background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:18px 22px;}
.bk-yeargrid-row{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;}
.bk-yeargrid-year{font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--ink);letter-spacing:-0.01em;}
.bk-yeargrid-months{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:6px;}
.bk-yeargrid-month{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 4px;border-radius:8px;
  text-decoration:none;color:inherit;
  transition:background 0.12s;}
.bk-yeargrid-month:hover{background:var(--page);}
.bk-yeargrid-month.has-rides .bk-yeargrid-month-label{color:var(--ink);}
.bk-yeargrid-month-label{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.04em;text-transform:uppercase;}

/* ── Stats page ────────────────────────────────────────────────── */
.bk-stats-header{margin-bottom:32px;}
.bk-stats-title{font-family:var(--font-display);font-size:32px;font-weight:700;
  letter-spacing:-0.02em;margin:0 0 6px;color:var(--ink);}
.bk-stats-meta{margin:0;color:var(--mute);font-size:14px;}
.bk-stats-section{margin-bottom:32px;}
.bk-stats-card{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:18px 22px;}
.bk-stats-coverage{margin:0 0 12px;color:var(--mute);font-size:12px;
  font-family:var(--font-body);}

/* Year card on the stats page. */
.bk-year-card{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:20px 24px;margin-bottom:18px;}
.bk-year-card-head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:20px;margin-bottom:14px;}
.bk-year-card-title{font-family:var(--font-display);font-size:24px;font-weight:700;
  color:var(--ink);letter-spacing:-0.01em;}
.bk-year-card-stats{display:flex;flex-wrap:wrap;gap:24px;}
.bk-year-card-stats .bk-stat{display:flex;flex-direction:column;gap:3px;}
.bk-year-card-stats .bk-stat .kicker{font-family:var(--font-display);font-size:10px;
  font-weight:600;color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;}
.bk-year-card-stats .bk-stat .value{font-family:var(--font-display);font-size:16px;
  font-weight:700;color:var(--ink);}
.bk-year-card-chart{margin-top:8px;}

/* ── "Today" advice card (rides.php top) ───────────────────────── */
.bk-today-card{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:14px 18px 14px 22px;margin-bottom:18px;
  border-left:4px solid var(--mute);}
.bk-today-head{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:6px;}
.bk-today-status{display:flex;flex-direction:column;gap:3px;}
.bk-today-status .kicker{font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;}
.bk-today-status .value{font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--ink);letter-spacing:-0.01em;}
.bk-today-numbers{display:flex;align-items:center;gap:24px;}
.bk-today-stat{display:flex;flex-direction:column;gap:2px;align-items:flex-end;}
.bk-today-stat .kicker{font-family:var(--font-display);font-size:10px;font-weight:600;
  color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;}
.bk-today-stat .value{font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--ink);}
.bk-today-advice-row{display:flex;align-items:center;justify-content:space-between;
  gap:24px;}
.bk-today-advice{font-family:var(--font-body);font-size:14px;color:var(--body);
  line-height:1.45;flex:1 1 auto;}
.bk-today-mini{flex:0 0 auto;line-height:0;}
.bk-today-caveat{margin-top:6px;font-family:var(--font-body);font-size:12px;
  color:var(--mute);font-style:italic;}

.bk-today-fresh     {border-left-color:var(--accent);}
.bk-today-fresh      .bk-today-status .value{color:var(--accent);}
.bk-today-productive{border-left-color:var(--ink);}
.bk-today-building  {border-left-color:#2F6EA8;}     /* same as cool */
.bk-today-building   .bk-today-status .value{color:#2F6EA8;}
.bk-today-fatigued  {border-left-color:var(--heat);}
.bk-today-fatigued   .bk-today-status .value{color:var(--heat);}
.bk-today-rest      {border-left-color:var(--heat);}
.bk-today-rest       .bk-today-status .value{color:var(--heat);}
.bk-today-warn      {border-left-color:var(--accent);}
.bk-today-warn       .bk-today-status .value{color:var(--accent);}

/* ── Follow lifecycle UI ───────────────────────────────────────── */
.bk-profile-actions{margin-top:12px;display:flex;gap:10px;}
.bk-profile-state{margin-top:8px;color:var(--mute);font-size:13px;}
.bk-follow-form{margin:0;}
.bk-follow-form .bk-btn{width:auto;padding:10px 18px;}

/* Pending follow requests block (top of rides.php). */
.bk-follow-requests{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:16px 20px;margin-bottom:18px;border-left:4px solid var(--accent);}
.bk-follow-requests-head{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:10px;}
.bk-follow-request{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:8px 0;border-top:1px solid var(--hair);}
.bk-follow-request:first-of-type{border-top:0;}
.bk-follow-request-text{font-size:14px;color:var(--ink);}
.bk-follow-request-text a{color:var(--accent);text-decoration:none;}
.bk-follow-request-actions{display:flex;gap:8px;}
.bk-follow-request-actions .bk-btn{padding:8px 14px;font-size:13px;width:auto;}

/* "Follow back?" nudge after acceptance. */
.bk-nudge{background:var(--accent-soft);border:1px solid var(--accent-soft);border-radius:12px;
  padding:14px 18px;margin-bottom:18px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;}
.bk-nudge-text{font-size:14px;color:var(--ink);}
.bk-nudge-actions{display:flex;align-items:center;gap:12px;}
.bk-nudge-actions .bk-btn{padding:8px 14px;font-size:13px;width:auto;}
.bk-nudge-dismiss{font-size:13px;color:var(--mute);text-decoration:none;}

/* Owner-attribution pill — combined-feed byline that sits directly
   above the ride title so it's instantly obvious whose ride this is.
   Reused on both hero and row. Big enough to read at a glance,
   accent-coloured to stand out against the muted title-block. */
.bk-owner-pill{display:inline-flex;align-items:center;padding:4px 12px;
  margin-bottom:6px;border-radius:999px;
  background:var(--accent);color:var(--paper);
  font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:0.02em;text-decoration:none;line-height:1.2;}
.bk-owner-pill:hover{filter:brightness(1.05);}
/* On the ride detail header (rd-title-meta is the small chip row, not
   a title block), shrink back so the pill matches the other chips. */
.rd-title-meta .bk-owner-pill{font-size:10px;padding:2px 10px;margin:0;}

/* ── Settings page form ────────────────────────────────────────── */
.bk-settings-card{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:24px 28px;max-width:520px;}
.bk-settings-form{display:flex;flex-direction:column;gap:24px;}
.bk-settings-form .bk-field input{font-family:var(--font-body);font-size:15px;
  color:var(--ink);background:var(--page);border:1px solid var(--hair2);
  border-radius:8px;padding:10px 12px;outline:none;width:140px;
  transition:border-color .15s, background .15s;}
.bk-settings-form .bk-field input:focus{border-color:var(--ink);background:var(--paper);}
.bk-settings-form .bk-field-help{font-family:var(--font-body);font-size:12px;
  color:var(--mute);margin:6px 0 0;line-height:1.45;}
.bk-settings-form .bk-btn{width:auto;align-self:flex-start;padding:10px 20px;}
.bk-field-check .bk-check{display:flex;align-items:center;gap:10px;cursor:pointer;}
.bk-field-check .bk-check input[type="checkbox"]{width:18px;height:18px;margin:0;
  accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.bk-field-check .bk-field-label{margin:0;}
.bk-field-check .bk-field-help{margin-top:4px;margin-left:28px;}

/* ── Site-wide meta footer (web/lib/footer.php) ────────────────── */
.bk-footer{border-top:1px solid var(--hair);background:var(--paper);
  margin-top:48px;}
.bk-footer-inner{max-width:1280px;margin:0 auto;padding:18px 36px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;}
.bk-footer-brand{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;}
.bk-footer-brand:hover{color:var(--ink);}
.bk-footer-nav{display:flex;gap:18px;}
.bk-footer-link{font-family:var(--font-display);font-size:12px;font-weight:600;
  color:var(--mute);text-decoration:none;letter-spacing:0.04em;}
.bk-footer-link:hover{color:var(--ink);}
@media (max-width:880px) {
  .bk-footer-inner{padding:16px 16px;}
}

/* Simple document pages (impressum / help). */
.bk-doc{max-width:760px;}
.bk-doc-title{font-family:var(--font-display);font-size:32px;font-weight:700;
  letter-spacing:-0.02em;margin:0 0 24px;color:var(--ink);}
.bk-doc-lead{font-size:15px;color:var(--mute);margin:0 0 24px;}
.bk-doc-section{margin-bottom:28px;}
.bk-doc-section h2{font-family:var(--font-display);font-size:16px;font-weight:700;
  letter-spacing:-0.01em;color:var(--ink);margin:0 0 8px;}
.bk-doc-section h3{font-family:var(--font-display);font-size:14px;font-weight:700;
  letter-spacing:0;color:var(--ink);margin:18px 0 8px;}
.bk-doc-section p{margin:0 0 10px;color:var(--body);font-size:14px;line-height:1.55;}
.bk-doc-section p:last-child{margin-bottom:0;}
.bk-doc-section ul{margin:0 0 10px;padding-left:22px;color:var(--body);font-size:14px;line-height:1.55;}
.bk-doc-section li{margin-bottom:6px;}
.bk-doc-section code{font-family:JetBrains Mono, ui-monospace, monospace;
  font-size:12.5px;background:var(--page);border:1px solid var(--hair);
  border-radius:4px;padding:1px 5px;}
.bk-doc-section pre{margin:8px 0 14px;padding:12px 14px;
  background:var(--page);border:1px solid var(--hair);border-radius:8px;
  overflow-x:auto;font-size:13px;line-height:1.5;}
.bk-doc-section pre code{background:none;border:0;padding:0;font-size:inherit;}
.bk-doc-section a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--hair2);text-underline-offset:2px;}
.bk-doc-section a:hover{text-decoration-color:var(--ink);}
.bk-doc-table{width:100%;margin:8px 0 14px;border-collapse:collapse;
  font-size:13px;line-height:1.45;}
.bk-doc-table th, .bk-doc-table td{text-align:left;vertical-align:top;
  padding:8px 10px;border-bottom:1px solid var(--hair);}
.bk-doc-table th{font-family:var(--font-display);font-weight:700;
  font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--mute);border-bottom:1.5px solid var(--hair2);}
.bk-doc-table td{color:var(--body);}
.bk-settings-account{margin-top:36px;}
.bk-settings-account-label{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:8px;}
.bk-settings-account-line{margin:0 0 14px;color:var(--body);font-size:14px;}
.bk-logout-form{margin:0;}
.bk-logout-form .bk-btn{width:auto;padding:8px 18px;}

/* Soft-launch invite-codes card (settings.php) — sits at the top of
   the page during the gated rollout so users can grab a code at a
   glance. Accent border to make it stand out from the regular
   settings cards. */
.bk-invite-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;
  margin-bottom:24px;}
.bk-invite-list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px;}
.bk-invite-row{display:flex;align-items:center;gap:8px;
  padding:6px 4px;border-top:1px solid var(--hair);}
.bk-invite-row:first-child{border-top:0;}
.bk-invite-code{font-family:JetBrains Mono, monospace;font-size:14px;font-weight:700;
  letter-spacing:0.06em;color:var(--ink);background:var(--page);
  border:1px solid var(--hair2);border-radius:6px;padding:4px 8px;
  user-select:all;margin-right:auto;}
.bk-btn.bk-invite-copy{flex:0 0 auto;width:auto;padding:4px 8px;font-size:11px;
  line-height:1.4;border-radius:6px;white-space:nowrap;}

/* Profile-URL card (settings.php). */
.bk-profile-url-row{display:flex;gap:8px;align-items:stretch;}
.bk-profile-url-input{flex:1 1 auto;min-width:0;
  font-family:JetBrains Mono, monospace;font-size:13px;
  color:var(--ink);background:var(--page);border:1px solid var(--hair2);
  border-radius:8px;padding:9px 12px;outline:none;cursor:text;}
.bk-profile-url-input:focus{border-color:var(--ink);background:var(--paper);}
.bk-profile-url-row .bk-btn{flex:0 0 auto;width:auto;padding:9px 18px;}

/* Follow-graph section on settings.php — section header + spacing
   between the per-list cards. */
.bk-settings-follow-section{margin-top:36px;}
.bk-settings-follow-section .rd-section-head{margin-bottom:16px;}
.bk-follow-card{margin-bottom:16px;}
.bk-follow-card:last-child{margin-bottom:0;}

/* Follower / following lists on settings.php. */
.bk-follow-list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;}
.bk-follow-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 4px;border-top:1px solid var(--hair);}
.bk-follow-row:first-child{border-top:0;}
.bk-follow-row-link{display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;flex:1 1 auto;min-width:0;}
.bk-follow-row-avatar{width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:13px;font-weight:700;
  flex-shrink:0;}
.bk-follow-row-name{font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bk-follow-row-link:hover .bk-follow-row-name{color:var(--accent);}
.bk-follow-row-action{margin:0;}
.bk-follow-row-action .bk-btn{width:auto;padding:6px 12px;font-size:12px;}
.bk-follow-empty{margin:0;color:var(--mute);font-size:13px;font-family:var(--font-body);}

.bk-empty{background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:48px 28px;text-align:center;color:var(--mute);font-family:var(--font-display);}
.bk-empty p{margin:0 0 8px;}
.bk-empty p:last-child{margin-bottom:0;}
.bk-empty-sub{font-size:13px;font-weight:400;font-family:var(--font-body);
  max-width:520px;margin-left:auto;margin-right:auto;line-height:1.5;}
.bk-empty-sub code{font-family:JetBrains Mono, monospace;font-size:12px;
  background:var(--page);padding:1px 5px;border-radius:4px;color:var(--ink);}

/* List page: horizontal week navigation bar */
.bk-weekbar{display:flex;gap:6px;overflow-x:auto;
  background:var(--paper);border:1px solid var(--hair);border-radius:14px;
  padding:12px 14px;margin-bottom:16px;}
.bk-weekbar-week{flex:1 1 80px;min-width:70px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:inherit;padding:6px 4px;border-radius:8px;
  transition:background 0.12s;}
.bk-weekbar-week:hover{background:var(--page);}
.bk-weekbar-week.is-active{background:var(--accent-soft);}
.bk-weekbar-num{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.06em;}
.bk-weekbar-week.is-active .bk-weekbar-num{color:var(--accent);}
.bk-weekbar-dots{display:flex;gap:3px;justify-content:center;}
.bk-weekbar-dot{width:6px;height:6px;border-radius:50%;background:var(--hair);}
.bk-weekbar-dot.has{background:var(--accent);}
.bk-weekbar-week.is-active .bk-weekbar-dot{background:var(--hair2);}
.bk-weekbar-week.is-active .bk-weekbar-dot.has{background:var(--accent);}

/* Ride detail */
.rd-breadcrumb-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.rd-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-size:11px;font-weight:700;color:var(--mute);text-decoration:none;
  letter-spacing:0.1em;text-transform:uppercase;}
.rd-back:hover{color:var(--ink);}
.rd-back .arrow{font-size:14px;}

.rd-title-block{margin-bottom:22px;}
.rd-title-meta{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.rd-type-pill{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:0.14em;text-transform:uppercase;background:var(--accent-soft);
  padding:4px 10px;border-radius:999px;}
.rd-title-meta-text{font-family:var(--font-display);font-size:12px;font-weight:600;
  color:var(--mute);letter-spacing:0.08em;text-transform:uppercase;}
.rd-title{margin:0;font-family:var(--font-display);font-size:48px;font-weight:700;
  letter-spacing:-0.025em;color:var(--ink);line-height:1.04;}

/* Inline title edit. Pencil button sits next to the h1 at rest; click
   hides them both and reveals the form. Form input mimics the heading
   typography so the swap doesn't reflow the page. */
.rd-title-row{display:flex;align-items:flex-start;gap:10px;}
.rd-title-edit-btn{background:transparent;border:0;padding:6px;margin:6px 0 0;
  color:var(--mute);cursor:pointer;border-radius:6px;line-height:0;
  transition:color .15s, background .15s;}
.rd-title-edit-btn:hover{color:var(--ink);background:var(--hair);}
.rd-title-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;}
.rd-title-form[hidden]{display:none;}
.rd-title-input{flex:1 1 320px;min-width:0;
  font-family:var(--font-display);font-size:36px;font-weight:700;
  letter-spacing:-0.02em;color:var(--ink);background:var(--paper);
  border:1px solid var(--hair2);border-radius:8px;padding:6px 10px;
  line-height:1.1;outline:none;}
.rd-title-input:focus{border-color:var(--ink);}
.rd-title-form .bk-btn.rd-title-save,
.rd-title-form .bk-btn.rd-title-cancel{width:auto;padding:8px 16px;font-size:13px;}

/* Ride photos — grid + dropzone. Sits between the map section and
   the data graphs. Grid is responsive square thumbnails; dropzone
   below acts as both click-target (label-for-input) and drop area. */
.rd-photos-section{margin:32px 0 0;}
.rd-photos-grid{list-style:none;margin:12px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:8px;}
.rd-photo-cell{position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:10px;background:var(--page);}
.rd-photo-cell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s;}
.rd-photo-cell:hover img{transform:scale(1.03);}
.rd-photo-delete{position:absolute;top:6px;right:6px;margin:0;}
.rd-photo-delete button{background:rgba(0,0,0,0.55);color:#fff;
  border:0;border-radius:50%;width:24px;height:24px;font-size:18px;
  line-height:24px;cursor:pointer;padding:0;opacity:0;
  transition:opacity .15s, background .15s;}
.rd-photo-cell:hover .rd-photo-delete button,
.rd-photo-delete button:focus-visible{opacity:1;}
.rd-photo-delete button:hover{background:var(--heat);}

/* Photos section header lays out the title block on the left and the
   compact dropzone on the right. The dropzone still works as a drop
   target across its whole area (JS attaches to the form). */
.rd-photos-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;}
.rd-photo-dropzone{display:block;margin:0;}
.rd-photo-dropzone-label{display:inline-flex;gap:8px;align-items:center;
  padding:8px 14px;border:1.5px dashed var(--hair2);border-radius:10px;
  background:var(--page);cursor:pointer;color:var(--body);
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:0.02em;
  transition:border-color .15s, background .15s, color .15s;}
.rd-photo-dropzone-label:hover,
.rd-photo-dropzone.is-dragover .rd-photo-dropzone-label{
  border-color:var(--ink);background:var(--paper);color:var(--ink);}
.rd-photo-dropzone-plus{font-family:var(--font-display);font-size:18px;
  font-weight:400;color:var(--mute);line-height:1;}
.rd-photo-dropzone-text{color:inherit;}

.rd-map-section{background:var(--paper);border:1px solid var(--hair);border-radius:16px;
  overflow:hidden;display:grid;grid-template-columns:1.6fr 1fr;}
.rd-map{height:460px;border-right:1px solid var(--hair);position:relative;background:var(--page-warm);}
.rd-map .bk-map-svg{width:100%;height:100%;display:block;}
.rd-map .bk-map-empty{width:100%;height:100%;background:var(--page-warm);}
.rd-map-canvas, .rd-map .bk-tile-map{width:100%;height:100%;display:block;background:var(--page-warm);}
.rd-metrics{padding:28px 30px;display:grid;grid-template-columns:1fr 1fr;
  row-gap:26px;column-gap:28px;align-content:flex-start;}
.rd-metrics .div{grid-column:1 / -1;height:1px;background:var(--hair);margin:4px 0;}

.rd-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:36px 0 14px;}
.rd-section-head .titles{display:flex;align-items:baseline;gap:14px;}
.rd-section-head .kicker{font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;}
.rd-section-head h2{margin:0;font-family:var(--font-display);font-size:22px;font-weight:700;
  letter-spacing:-0.02em;color:var(--ink);}
.rd-section-head .count{font-family:var(--font-display);font-size:13px;font-weight:500;color:var(--faint);margin-left:6px;}

.rd-graphs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rd-graph{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:16px 18px 12px;}
.rd-graph-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.rd-graph-head .left{display:flex;align-items:center;gap:10px;}
.rd-graph-head .swatch{width:8px;height:8px;border-radius:2px;display:inline-block;}
.rd-graph-head .title{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:0.1em;}
.rd-graph-head .unit{font-family:var(--font-display);font-size:11px;color:var(--mute);}
.rd-graph-head .avg{font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--mute);
  letter-spacing:0.06em;text-transform:uppercase;}
.rd-graph-head .avg .val{color:var(--ink);font-weight:700;margin-left:4px;}
.rd-graph-svg{display:block;width:100%;}
.rd-x-ticks{margin-top:8px;padding:0 18px;display:flex;justify-content:space-between;}
.rd-x-ticks span{font-family:"JetBrains Mono", ui-monospace, monospace;font-size:10px;
  color:var(--mute);font-weight:500;}

.rd-zones-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rd-zones{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:20px 24px;}
.rd-zones-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;}
.rd-zones-head .title{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:0.1em;}
.rd-zones-head .total{font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--mute);letter-spacing:0.06em;}
.rd-zone-rows{display:flex;flex-direction:column;gap:12px;}
.rd-zone-row{display:grid;grid-template-columns:70px 1fr 80px 64px;align-items:center;gap:12px;}
.rd-zone-row .zone-label{display:flex;align-items:center;gap:6px;}
.rd-zone-row .dot{width:10px;height:10px;border-radius:2px;}
.rd-zone-row .lbl{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--ink);}
.rd-zone-row .zone-bar{height:14px;background:var(--page-warm);border-radius:3px;overflow:hidden;}
.rd-zone-row .zone-bar-fill{height:100%;border-radius:3px;}
.rd-zone-row .zone-range{font-family:"JetBrains Mono", ui-monospace, monospace;font-size:11px;color:var(--mute);text-align:right;white-space:nowrap;}
.rd-zone-row .zone-time{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--ink);text-align:right;}

.rd-similar-table-wrap{background:var(--paper);border:1px solid var(--hair);border-radius:12px;overflow:hidden;}
.rd-similar-table{width:100%;border-collapse:collapse;}
.rd-similar-table thead th{font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--mute);letter-spacing:0.12em;text-transform:uppercase;text-align:left;
  padding:14px 20px;background:var(--page);border-bottom:1px solid var(--hair);}
.rd-similar-table thead th.num{text-align:right;}
.rd-similar-table tbody td{font-family:var(--font-display);font-size:13px;color:var(--ink);
  padding:14px 20px;border-top:1px solid var(--hair);vertical-align:middle;}
.rd-similar-table tbody tr:first-child td{border-top:none;}
.rd-similar-table tbody td.num{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.rd-similar-table tbody td.ride a{color:inherit;text-decoration:none;font-weight:700;}
.rd-similar-table tbody td.ride a:hover{color:var(--accent);}
.rd-similar-table tbody td.date{color:var(--mute);font-weight:500;text-transform:uppercase;
  font-size:11px;letter-spacing:0.08em;}
.rd-similar-table tbody td.shared{color:var(--accent);}
.rd-similar-table tbody tr.is-current td{background:var(--accent-soft);}
.rd-similar-table tbody tr.is-current td.ride{color:var(--accent);font-weight:700;}
.rd-similar-table tbody tr.is-current td.ride span::before{content:"● ";color:var(--accent);}

@media (max-width:880px) {
  .bk-hero-mid{grid-template-columns:1fr;}
  .bk-hero-map{border-right:none;border-bottom:1px solid var(--hair);min-height:240px;}
  .bk-hero-map .bk-map-svg{min-height:240px;}
  .bk-hero-map .bk-tile-map{min-height:240px;}
  .bk-row{grid-template-columns:120px 1fr;}
  .bk-row-right{display:none;}
  .bk-topnav{padding:0 16px;}
  .bk-main{padding:20px 16px 60px;}
  /* Collapse the sidebar back into a horizontal strip below the
     content on small screens. Window is still 12 months, but at this
     width 12 tiles overflow; allow horizontal scroll just to make
     them reachable. */
  .bk-main-with-sidebar{grid-template-columns:1fr;}
  .bk-monthnav-sidebar{position:static;order:2;margin-top:24px;}
  .bk-monthnav-sidebar > .bk-monthnav{flex-direction:row;overflow-x:auto;}
  .bk-main-content{order:1;}

  /* Year grid: the 12-tile months row is fixed-width per tile and
     overflows narrow viewports — scroll it horizontally rather than
     reflowing to a cramped multi-row block. */
  .bk-yeargrid-row{grid-template-columns:56px 1fr;gap:12px;}
  .bk-yeargrid-months{display:flex;overflow-x:auto;grid-template-columns:none;}
  .bk-yeargrid-month{flex:0 0 auto;}
  .bk-week-strip{grid-template-columns:1fr;gap:16px;}
  .rd-map-section{grid-template-columns:1fr;}
  .rd-map{height:280px;border-right:none;border-bottom:1px solid var(--hair);}
  .rd-zones-grid{grid-template-columns:1fr;}
  .rd-graphs{grid-template-columns:1fr;}
  .rd-title{font-size:32px;}
}

/* ── Public landing (login/signup placeholder) ─────────────────── */
.bk-landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:40px;padding:40px 24px;background:var(--page);}
.bk-landing-card{background:var(--paper);border:1px solid var(--hair);border-radius:18px;
  padding:48px 40px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);position:relative;}
.bk-landing-intro{max-width:640px;width:100%;color:var(--ink);line-height:1.6;}
.bk-landing-intro h2{font-family:var(--font-display);font-size:22px;font-weight:600;
  margin:0 0 16px;text-align:center;color:var(--ink);}
.bk-landing-intro p{margin:0 0 14px;font-size:15px;color:var(--mute);}
.bk-landing-bullets{list-style:none;padding:0;margin:18px 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;
  font-size:14px;color:var(--mute);}
.bk-landing-bullets li{padding-left:14px;position:relative;}
.bk-landing-bullets li::before{content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--heat);}
.bk-landing-bullets strong{color:var(--ink);font-weight:500;}
@media (max-width:560px){.bk-landing-bullets{grid-template-columns:1fr;}}

/* Rubber-stamp BETA badge on the not-logged-in landing card.
   Floats partly across the top-right of the card, steeply tilted,
   so it reads as ink stamped on paper rather than a UI badge. SVG
   inside uses currentColor; text gets BOTH fill and stroke for an
   extra-heavy presence (the loaded Geist family caps at weight 700,
   so we add a stroke-pass on top to push past that ceiling). */
.bk-beta-stamp{position:absolute;top:0px;right:200px;
  width:260px;height:120px;color:var(--heat);opacity:0.92;
  transform:rotate(-18deg);transform-origin:center;
  pointer-events:none;user-select:none;z-index:5;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.14));}
.bk-beta-stamp text{font-family:var(--font-display);
  paint-order:stroke fill;}
.bk-landing-logo{margin:0 auto 20px;display:block;}
.bk-landing-title{font-family:var(--font-display);font-size:32px;font-weight:700;
  letter-spacing:-0.02em;margin:0 0 6px;color:var(--ink);}
.bk-landing-tag{font-size:14px;color:var(--mute);margin:0 0 32px;}
.bk-login-form{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;text-align:left;}
.bk-field{display:flex;flex-direction:column;gap:6px;}
.bk-field-label{font-size:12px;font-weight:600;color:var(--mute);letter-spacing:0.04em;
  text-transform:uppercase;}
.bk-field input{font-family:var(--font-body);font-size:14px;color:var(--ink);
  background:var(--page);border:1px solid var(--hair2);border-radius:8px;
  padding:10px 12px;outline:none;transition:border-color .15s, background .15s;}
.bk-field input:focus{border-color:var(--ink);background:var(--paper);}
.bk-field-error{margin:4px 0 0;font-size:12px;color:var(--heat);}
.bk-form-error{margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:13px;
  color:var(--heat);background:var(--heat-soft);border:1px solid var(--heat-soft);}
.bk-form-ok{margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:13px;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft);}
.bk-btn{display:block;width:100%;padding:12px 20px;border:0;border-radius:10px;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  text-decoration:none;text-align:center;letter-spacing:0.02em;cursor:pointer;
  transition:opacity .15s, filter .15s;}
.bk-btn:hover{filter:brightness(1.05);}
.bk-btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed;}
.bk-btn-primary{background:var(--ink);color:var(--paper);}
.bk-btn-accent{background:var(--accent);color:var(--paper);}
.bk-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair2);}
.bk-landing-divider{display:flex;align-items:center;gap:12px;color:var(--mute);
  font-size:12px;letter-spacing:0.06em;text-transform:uppercase;margin:18px 0;}
.bk-landing-divider::before,.bk-landing-divider::after{content:"";flex:1;
  height:1px;background:var(--hair);}
.bk-landing-note{font-size:13px;color:var(--mute);margin:20px 0 0;}
.bk-landing-note a{color:var(--ink);font-weight:500;}

/* Ride detail page — "Imported from <app>" footer line. Sits below
   the similar-rides block, deliberately quiet (small + mute) so it
   reads as provenance, not content. */
.rd-source{margin:24px 0 0;font-size:11px;color:var(--mute);
  letter-spacing:0.02em;}

/* Admin sub-nav — small horizontal strip linking the admin pages.
   Active page gets the ink colour + underline. */
.bk-admin-subnav{display:flex;gap:18px;margin:0 0 24px;
  border-bottom:1px solid var(--hair);padding-bottom:10px;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:0.02em;}
.bk-admin-subnav a{color:var(--mute);text-decoration:none;
  padding-bottom:6px;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;}
.bk-admin-subnav a:hover{color:var(--ink);}
.bk-admin-subnav a.is-active{color:var(--ink);border-bottom-color:var(--ink);}

/* KPI strip on the analytics page. Auto-fits 3-5 cards per row. */
.bk-kpi-grid{display:grid;gap:14px;margin-bottom:24px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));}
.bk-kpi{background:var(--paper);border:1px solid var(--hair);
  border-radius:12px;padding:14px 16px;}
.bk-kpi-label{font-family:var(--font-display);font-size:11px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--mute);}
.bk-kpi-value{font-family:var(--font-display);font-size:32px;font-weight:700;
  letter-spacing:-0.02em;color:var(--ink);line-height:1.1;margin-top:4px;}
.bk-kpi-sub{font-size:11px;color:var(--mute);margin-top:4px;}

/* SVG chart wrapper. The inline `color:` style on the wrapper drives
   currentColor inside the SVG (bars + axis labels). */
.bk-chart-wrap{margin-top:8px;}
.bk-mini-chart{width:100%;height:auto;display:block;}

/* Settings → Connected apps card: one row per OAuth client with
   live tokens for the current user. Right-aligned Revoke button.
   Same 36px top margin as the Account/Logout card so it doesn't
   abut the FTP form above it. */
.bk-connected-apps-card{margin-top:36px;}
.bk-connected-apps-list{list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;}
.bk-connected-app-row{display:flex;align-items:center;gap:12px;
  padding:10px 0;border-top:1px solid var(--hair);}
.bk-connected-app-row:first-child{border-top:0;}
.bk-connected-app-info{flex:1 1 auto;min-width:0;}
.bk-connected-app-info strong{display:block;color:var(--ink);}
.bk-connected-app-meta{font-size:11px;color:var(--mute);
  letter-spacing:0.02em;margin-top:2px;font-family:JetBrains Mono, monospace;}
.bk-connected-app-revoke{flex:0 0 auto;margin:0;}
.bk-connected-app-revoke .bk-btn{width:auto;padding:6px 12px;font-size:12px;}