/* Settings and Profile (design C sections 3.6 and 3.7, #190). Loaded LAST in
   index.html's head, so the few rules that override css/style.css do it by
   cascade order, never with !important. The components this page needs and
   components.css lacks (switch, avatar, field, badge-accent) are scoped
   under .set-page / .prof-page. */

/* Pre-paint guard for the livery chrome: index.html ships
   <html class="pre-scheme">, and js/lib/scheme_boot.js -- a classic script in
   the <head>, before the module graph exists (WEB-O2) -- removes it as soon
   as the cached palette is on :root. js/lib/scheme.js removes it again when
   the modules land. The class is on <html>, not <body>, because a head script
   runs before <body> exists. The delayed 0s animation is the failsafe: if
   neither script runs, the page reveals itself after 1.2s instead of staying
   blank forever. */
html.pre-scheme { visibility: hidden; animation: scheme-reveal 0s linear 1.2s forwards; }
@keyframes scheme-reveal { to { visibility: visible; } }

/* ---------- shared bits (settings, profile, friend) ---------- */

.avatar { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--on-accent); font: 800 17px/1 var(--font-display); flex: none; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: 28px; }
.avatar-xl { width: 72px; height: 72px; font-size: 32px; }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin-left: -6px; padding-right: 8px; border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; font: 650 var(--fs-14)/1 var(--font-display); }
.back-link:hover { color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.switch { appearance: none; box-sizing: content-box; width: 48px; height: 28px; margin: 0 -8px; border: 8px solid transparent; background-clip: padding-box; border-radius: 999px; background-color: var(--line-strong); position: relative; flex: none; cursor: pointer; transition: background .15s var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px var(--knob-shadow); transition: translate .15s var(--ease); }
.switch:checked { background-color: var(--accent); }
.switch:checked::after { translate: 20px 0; background: var(--knob-on); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: -5px; }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- settings: rail + one section ---------- */

#view-settings .set-page { max-width: 1120px; }
.set-head { display: grid; gap: 2px; margin-bottom: var(--s-5); }
.set-h1 { margin: 0; font: 800 var(--fs-32, 32px)/1.1 var(--font-display); letter-spacing: -0.02em; }

.set-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.set-rail { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); display: grid; gap: var(--s-5); }
.rail-h { margin: 0 0 var(--s-2); font: 600 var(--fs-12)/1 var(--font-mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-3); }
.rail-list { margin: 0; padding: 0; list-style: none; }
.rail-list > li + li { border-top: 0; }
.rail-item { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 8px 10px; border-radius: var(--r-2); color: var(--text); text-decoration: none; }
.rail-item:hover { background: var(--surface-2); }
.rail-item[aria-current='page'] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.rail-item .grow { flex: 1 1 auto; min-width: 0; }
.rail-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-2); background: var(--surface-2); color: var(--text-2); flex: none; }
.rail-item[aria-current='page'] .rail-ic { background: var(--accent); color: var(--on-accent); }
.rail-t { display: block; font: 650 var(--fs-16)/1.2 var(--font-display); }
.rail-d { display: none; font-size: var(--fs-13); color: var(--text-2); overflow-wrap: break-word; }
.rail-chev { display: none; color: var(--text-3); }

.set-body { min-width: 0; max-width: 720px; display: grid; gap: var(--s-5); }
.set-title { margin: 0; font: 800 var(--fs-28)/1 var(--font-display); letter-spacing: -0.02em; }
.set-sec, .set-stack { display: grid; gap: var(--s-5); }
.set-block { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.set-block.hidden, .set-sec.hidden, .set-stack.hidden { display: none; }
.set-h { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: 700 var(--fs-18)/1.2 var(--font-display); }
.set-h .info-btn { margin-block: -10px; }
.set-subhead { margin: 0; font: 650 var(--fs-14)/1.3 var(--font-display); color: var(--text-2); }
.set-block p, .set-block .status { margin: 0; }
.set-block .list { margin: 0; padding: 0; list-style: none; }
.set-row { gap: var(--s-3); padding-block: 6px; }
.set-row .grow { display: grid; min-width: 0; }
.set-row .list-row-title, .set-row .list-row-sub { overflow-wrap: break-word; }
/* A row's action keeps its one line; the text beside it wraps instead. */
.set-row > .btn { flex: none; white-space: nowrap; }
.set-page label.switch-row { margin: 0; color: var(--text); font-size: inherit; font-weight: inherit; cursor: pointer; }
.set-signed-out { justify-items: start; }
.link-row { justify-content: space-between; color: var(--text); text-decoration: none; }
.link-row:hover { color: var(--accent-ink); }

/* Form fields inside the settings page. */
.set-page .set-label { display: block; margin: 0; font: 650 var(--fs-13)/1.3 var(--font-display); color: var(--text-2); }
.set-page input[type='text'], .set-page input[type='email'] { width: 100%; min-height: var(--tap); box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--text); font: inherit; }
.set-page input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.set-field { display: grid; gap: 6px; }

/* Profile section. */
.pset-id { display: grid; gap: 6px; }
.pset-id input, .pset-id .handle-in { max-width: 520px; }
.pset-pic { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-3); }
.pset-id .set-label { margin-top: var(--s-2); }
.pset-id .btn-row { margin-top: var(--s-3); }
.handle-in { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); padding-left: 12px; color: var(--text-2); }
.handle-in:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.set-page .handle-in input[type='text'] { border: 0; padding-left: 2px; outline: none; background: transparent; }
.pub-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3); border-radius: var(--r-2); background: var(--surface-2); }
.pub-link.hidden { display: none; }
.mono-link { flex: 1 1 200px; min-width: 0; display: inline-flex; align-items: center; min-height: var(--tap); font: 500 var(--fs-14)/1.3 var(--font-mono); color: var(--accent-ink); overflow-wrap: anywhere; }

/* Account section. */
.acct-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.acct-id.hidden { display: none; }
.acct-id .grow { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.acct-name { font: 800 var(--fs-22)/1.2 var(--font-display); overflow-wrap: anywhere; }
.acct-name .list-row-sub { font: 500 var(--fs-14)/1 var(--font-mono); }
.acct-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.signin { max-width: 440px; }
.sso, .otp, .otp-step { display: grid; gap: var(--s-2); }
.sso .btn { justify-content: center; }
.otp { margin-top: var(--s-2); }
.otp-step.hidden, .otp.hidden { display: none; }
.plan-line { font: 700 var(--fs-16)/1.3 var(--font-display); }
.storage-block { display: grid; gap: var(--s-2); }
.storage-block.hidden { display: none; }
.meter { height: 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.meter > span.warn { background: var(--danger); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.danger-zone .set-h { color: var(--danger); }
.devices-more { justify-self: start; }
.devices-more.hidden { display: none; }
.delete-preview { margin: 0; padding-left: 1.2em; }
.delete-preview.hidden { display: none; }

/* General + Appearance. */
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.rcard-opt { display: grid; gap: 4px; min-height: var(--tap); padding: var(--s-4); text-align: start; border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.rcard-opt b { font: 700 var(--fs-16)/1.2 var(--font-display); }
.rcard-opt[aria-checked='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.seg-block { display: flex; width: 100%; }
.seg-block > * { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }
/* The language picks are links (js/lang.js owns the click), styled as seg options. */
.seg > a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--r-pill); color: var(--text-2); font: 650 var(--fs-13)/1.1 var(--font-display); text-decoration: none; }
.seg > a[aria-current='page'] { background: var(--text); color: var(--bg); box-shadow: 0 1px 2px var(--seg-shadow); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.theme-tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 var(--fs-14)/1.2 var(--font-body); text-align: start; cursor: pointer; }
.theme-tile[aria-checked='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sw2 { display: grid; grid-template-columns: 1fr 1fr; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--line-strong); }
.tt-name { flex: 1; min-width: 0; }

/* Privacy + Friends. */
.home-line { font-weight: 600; }
.home-line.hidden { display: none; }
/* #268 Home zone: a small editable map. Handles are MapLibre markers, so
   their boxes are the hit areas; the midpoint handle is smaller and hollow. */
.zone-map { position: relative; width: 100%; height: 320px; border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--line); }
.zone-map.hidden, .zone-tools.hidden, .zone-card .btn.hidden { display: none; }
.zone-vx, .zone-mid, .zone-home { box-sizing: border-box; border-radius: 50%; cursor: pointer; }
.zone-vx { width: 18px; height: 18px; background: var(--surface); border: 3px solid var(--accent); }
.zone-vx.is-sel { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.zone-mid { width: 12px; height: 12px; background: var(--surface); border: 2px dashed var(--accent); opacity: 0.85; }
.zone-home { width: 16px; height: 16px; background: var(--text); border: 3px solid var(--surface); cursor: default; }
@media (max-width: 420px) { .zone-map { height: 260px; } }
.friend-list .set-row { padding-block: 8px; }

/* Routing: riding profiles (design-rider-profile-editor.md 3.2). */
.profiles > li { display: grid; }
.prof-row { gap: var(--s-2); }
.profile-star { width: var(--tap); height: var(--tap); flex: none; font-size: 20px; color: var(--text-3); }
.profile-star[aria-pressed='true'] { color: var(--accent-ink); }
.prof-row .list-row-title .badge { margin-left: 4px; vertical-align: 1px; }
.prof-editor { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); padding: var(--s-4); border-radius: var(--r-2); background: var(--surface-2); }
.prof-advanced { display: grid; gap: var(--s-3); }
.prof-advanced > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 650; }
.prof-advanced[open] > * + * { margin-top: var(--s-3); }
.prof-slider-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.prof-slider input[type='range'] { width: 100%; min-height: var(--tap); margin: 0; accent-color: var(--accent); }

/* About: version, links, release notes, browser id. */
.about-v { font-weight: 700; }
.release-list { display: grid; }
.release { border-top: 1px solid var(--line); }
.release:first-child { border-top: 0; }
.release > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); min-height: var(--tap); padding-block: 10px; cursor: pointer; list-style: none; }
.release > summary::-webkit-details-marker { display: none; }
.release > summary::before { content: ''; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); rotate: -45deg; align-self: center; transition: rotate .15s var(--ease); }
.release[open] > summary::before { rotate: 45deg; }
.release-v { font: 700 var(--fs-16)/1.2 var(--font-mono); }
.release-name { font-weight: 700; }
.release-lines { margin: 0 0 var(--s-3); padding-left: 1.4em; display: grid; gap: 6px; }
.set-page code.mono { font-size: var(--fs-13); overflow-wrap: anywhere; }

@media (max-width: 899px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .set-page.has-sec .set-rail { display: none; }
  .set-rail { position: static; }
  .rail-list { padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
  .rail-list > li + li { border-top: 1px solid var(--line); }
  .rail-item { padding: 10px; }
  .rail-item[aria-current='page'] { background: none; box-shadow: none; }
  .rail-item[aria-current='page'] .rail-ic { background: var(--surface-2); color: var(--text-2); }
  .rail-d, .rail-chev { display: block; }
  .set-block { padding: var(--s-4); }
  .signin { max-width: none; }
}
@media (max-width: 420px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acct-actions { width: 100%; }
  .acct-actions .btn { flex: 1; }
}
@media (max-width: 360px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .devices .set-row { flex-wrap: wrap; }
  .devices .set-row > .grow { flex-basis: 100%; }
  .set-h1 { font-size: var(--fs-28); }
}

/* ---------- profile: identity + Year in review (design C 3.6, #190) ---------- */

.prof-page { display: grid; gap: var(--s-6); max-width: 1120px; }
.prof-body { display: grid; gap: var(--s-6); }
.prof-id { display: flex; align-items: center; gap: var(--s-4); }
.prof-id > .grow { flex: 1 1 auto; min-width: 0; }
.prof-id .ic-lg { width: 32px; height: 32px; }
.prof-edit { gap: var(--s-2); }
.prof-edit .ic { width: 16px; height: 16px; }
.prof-name { margin: 0; font: 800 var(--fs-28)/1.15 var(--font-display); overflow-wrap: anywhere; }
.prof-handle { margin: var(--s-1) 0 0; color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-14); }
.prof-out { display: grid; gap: var(--s-5); justify-items: start; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.prof-out .prof-handle { font-family: var(--font-body); }
.prof-page .eyebrow { margin: 0; font: 600 var(--fs-12)/1 var(--font-mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-3); }
.yr { display: grid; gap: var(--s-4); }
.yr-stats { display: grid; gap: var(--s-5); }
.yr-h { margin: var(--s-2) 0 0; font: 700 var(--fs-18)/1.2 var(--font-display); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.tile { display: grid; gap: var(--s-2); padding: var(--s-5); border-left: 1px dashed var(--line-strong); }
.tile:first-child { border-left: 0; }
.tile-l { font: 600 var(--fs-12)/1 var(--font-mono); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-3); }
.tile-v { font: 800 var(--fs-40)/1 var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile-v small { margin-left: 4px; font-size: var(--fs-14); font-weight: 600; color: var(--text-2); }
.yr-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.busiest { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin: 0; }
.busiest .eyebrow { flex-basis: 100%; }
.busiest b { font: 700 var(--fs-18)/1.2 var(--font-display); }
.busiest span:last-child { color: var(--text-2); font-size: var(--fs-14); }
.yr-svg svg { display: block; width: 100%; height: auto; }
.yr-bar { fill: var(--accent); opacity: .45; }
.yr-bar.is-best { opacity: 1; }
.yr-hit { fill: transparent; }
.yr-bar-group:hover .yr-bar { opacity: 1; }
.yr-base { stroke: var(--line); }
.yr-axis { fill: var(--text-3); font: 500 11px var(--font-mono); }
.src-bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2); }
.src-bar > span { min-width: 3px; }
.src-app { background: var(--accent); }
.src-gpx { background: var(--text-2); }
.src-unknown { background: var(--line-strong); }
.src-row { gap: var(--s-3); }
.src-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.src-pct { min-width: 4ch; text-align: right; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-12); }
.recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.rec { display: grid; gap: var(--s-1); padding: var(--s-4); min-height: var(--tap); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); color: inherit; text-decoration: none; }
.rec:hover { border-color: var(--line-strong); }
.rec:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rec-l { color: var(--text-2); font-size: var(--fs-13); }
.rec-v { font: 800 var(--fs-22)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.rec-d { color: var(--text-3); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) {
  .prof-page { gap: var(--s-5); }
  .yr-pair { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: var(--s-4); }
  .tile:nth-child(odd) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px dashed var(--line-strong); }
  .tile-v { font-size: var(--fs-28); }
  .yr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--s-4)); padding: 2px var(--s-4); }
  .yr-chips::-webkit-scrollbar { display: none; }
  .yr-chips .chip { flex: none; }
  .prof-id { flex-wrap: wrap; }
  .prof-id .grow { min-width: 0; flex: 1 1 160px; }
  .prof-edit { min-height: var(--tap); }
  .seg > a { min-height: var(--tap); }
  .recs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .rec { padding: var(--s-3); }
  .rec-v { font-size: var(--fs-18); }
}
@media (max-width: 360px) {
  .prof-name { font-size: var(--fs-22); }
  .avatar-xl { width: 56px; height: 56px; font-size: 24px; }
}

/* ---------- friend link (#/f/<code>): one centred card ---------- */

.friend-page { display: grid; place-items: start center; }
.friend-card { display: grid; gap: var(--s-4); width: min(100%, 440px); margin-top: var(--s-6); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.friend-card p { margin: 0; }
.friend-h { margin: 0; font: 800 var(--fs-28)/1.15 var(--font-display); }
.friend-stack { display: grid; gap: var(--s-3); }
.friend-stack .btn { width: 100%; justify-content: center; }
@media (max-width: 420px) {
  .friend-card { margin-top: var(--s-2); padding: var(--s-5); }
  .friend-h { font-size: var(--fs-22); }
}