:root {

  color-scheme: dark;

  --bg-app: #161616;

  --bg-shell: #161616;

  --bg-surface: #242424;

  --bg-raised: #202020;

  --bg-subtle: #1c1c1c;

  --bg-hover: #2b2b2b;

  --bg-active: #333333;

  --border-subtle: #343434;

  --border-default: #424242;

  --border-strong: #555555;

  --divider: rgba(255,255,255,.08);

  --text-primary: #f2f2f2;

  --text-secondary: #bcbcbc;

  --text-muted: #929292;

  --text-disabled: #707070;

  --blue: #4ca8ff;

  --blue-strong: #2993f1;

  --blue-muted: rgba(41,147,241,.15);

  --orange: #f58220;

  --orange-bright: #ff9a42;

  --orange-muted: rgba(245,130,32,.14);

  --run-pending: #778491;

  --run-easy: #35c86f;

  --run-steady: #3d9bf2;

  --run-interval: #f58220;

  --success: #62d58d;

  --error: #f06464;

  --radius-card: 12px;

  --radius-dialog: 14px;

  --radius-control: 8px;

  --radius-pill: 999px;

  --nav-width: 92px;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-synthesis: none;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  background: var(--bg-app);

  color: var(--text-primary);

}



*, *::before, *::after { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }

body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg-app); }

button, input, select, textarea { color: inherit; font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: var(--blue); text-underline-offset: .18em; }

a:hover { color: #84c3ff; }

button { cursor: pointer; }

button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .52; }

[hidden] { display: none !important; }



.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; transform: translateY(-150%); border-radius: var(--radius-control); background: var(--bg-raised); color: var(--text-primary); }

.skip-link:focus { transform: none; }

.app-header { position: sticky; z-index: 20; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--border-subtle); background: var(--bg-shell); }

.brand { display: inline-flex; flex-direction: column; gap: .08rem; color: var(--text-primary); text-decoration: none; }

.brand-name { font-size: 1.25rem; font-weight: 680; letter-spacing: -.025em; }

.brand-tagline { color: var(--text-muted); font-size: .78rem; }

.status-pill { display: flex; max-width: min(60vw, 30rem); min-height: 36px; align-items: center; gap: .55rem; overflow: hidden; padding: .4rem .75rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-raised); color: var(--text-secondary); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }

.status-pill[data-state="working"]::before { width: .75rem; height: .75rem; flex: 0 0 auto; border: 2px solid var(--border-strong); border-top-color: var(--blue); border-radius: 50%; animation: spin .9s linear infinite; content: ""; }

.status-pill[data-state="success"] { border-color: rgba(98,213,141,.28); background: rgba(98,213,141,.08); color: #8dDba9; }

.status-pill[data-state="attention"], .status-pill[data-state="error"] { border-color: rgba(245,130,32,.42); background: rgba(245,130,32,.1); color: #ffae63; }



.primary-nav { position: fixed; z-index: 30; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); background: var(--bg-shell); }

.nav-item { display: flex; min-width: 44px; min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .4rem .25rem; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); font-size: .72rem; font-weight: 550; }

.nav-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }

.nav-item.is-current, .nav-item[aria-current="page"] { position: relative; color: var(--blue); }

.nav-item.is-current::before, .nav-item[aria-current="page"]::before { position: absolute; inset: 0 12% auto; height: 2px; border-radius: 0 0 2px 2px; background: var(--blue); content: ""; }



.main-content { width: min(100% - 2rem, 1000px); min-height: calc(100vh - 145px); margin-inline: auto; padding: clamp(1rem, 3vw, 2rem) 0 2rem; }

.page-loading { display: grid; min-height: 45vh; place-items: center; color: var(--text-muted); }

.app-footer { display: flex; min-height: 64px; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem; padding: 1rem 1rem calc(5.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--divider); color: var(--text-muted); font-size: .82rem; }

.app-footer a { color: var(--text-muted); }

.app-footer a:hover { color: var(--text-primary); }

.app-extras { display: grid; gap: 1rem; width: min(100% - 2rem, 1000px); margin: 0 auto 2rem; }
.app-extras button[hidden] { display: none; }
.install-app-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--bg-subtle); }
.install-app-card[hidden], .support-strip[hidden] { display: none; }
.install-app-icon { display: block; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.install-app-copy { display: grid; gap: 3px; min-width: 0; }
.install-app-copy strong { color: var(--text-primary); font-size: 1rem; }
.install-app-copy > span { color: var(--text-muted); font-size: .88rem; line-height: 1.4; }
.install-app-actions { display: flex; align-items: center; gap: 8px; }
.install-app-actions button { white-space: nowrap; }
.install-dismiss-icon { display: none; }
#install-app-help { grid-column: 1 / -1; color: var(--text-muted); font-size: .88rem; line-height: 1.4; }
@media (max-width: 800px) {
  .install-app-card { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 10px 12px; gap: 8px; }
  .install-app-icon { width: 32px; height: 32px; border-radius: 8px; }
  .install-app-copy strong { font-size: .85rem; }
  .install-app-description, .install-dismiss-label { display: none; }
  .install-app-actions { gap: 2px; }
  #install-app-button { padding: .5rem .55rem; font-size: .8rem; }
  #install-app-dismiss { width: 44px; height: 44px; padding: 0; }
  .install-dismiss-icon { display: inline; font-size: 1.4rem; }
}
.support-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 14px 16px; background: var(--bg-subtle); color: var(--text-muted); }
.support-strip > div { display: grid; gap: 2px; }
.support-strip strong { color: var(--text-primary); font-size: .9rem; }
.support-strip span { font-size: .82rem; line-height: 1.4; }
.support-link { flex: 0 0 auto; }
.support-link img { display: block; width: 165px; max-width: 100%; height: auto; aspect-ratio: 980 / 198; }
@media (max-width: 599px) {
  .support-strip { gap: 10px; padding: 10px 12px; }
  .support-strip strong { font-size: .8rem; }
  .support-strip span { font-size: .75rem; }
  .support-link img { width: 112px; }
}
@media (min-width: 900px) {
  .app-extras { width: min(100% - var(--nav-width) - 4rem, 1000px); margin-left: calc(var(--nav-width) + max(2rem, (100vw - var(--nav-width) - 1000px) / 2)); }
}

.copyright { color: var(--text-muted); }

.text-button { min-height: 44px; padding: .45rem .25rem; border: 0; background: transparent; color: var(--text-muted); text-decoration: underline; text-underline-offset: .18em; }

.text-button:hover { color: var(--text-primary); }



/* Runtime content primitives */

.page { display: grid; gap: .8rem; }

.page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; }

.page-title, h1, h2, h3, h4 { margin: 0; color: var(--text-primary); line-height: 1.2; }

h1, .page-title { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.025em; }

h2 { font-size: 1.15rem; letter-spacing: -.01em; }

h3 { font-size: 1rem; }

p { margin: .55rem 0; color: var(--text-secondary); line-height: 1.45; }

.muted, .help-text, .caption { color: var(--text-muted); font-size: .875rem; }

.stack { display: grid; gap: .65rem; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }

.spread { justify-content: space-between; }

.grid { display: grid; gap: .8rem; }

.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.card, .panel { min-width: 0; padding: clamp(.9rem, 2.2vw, 1.2rem); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--bg-surface); }

.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }

.card-title { font-size: 1rem; font-weight: 620; }

.metric { display: grid; gap: .25rem; }

.metric-value, .number { color: var(--text-primary); font-size: clamp(1.45rem, 4vw, 2rem); font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.035em; }

.metric-label { color: var(--text-muted); font-size: .8rem; }

.divider { height: 1px; border: 0; background: var(--divider); }



.button, .btn, button.primary, button.secondary, button.ghost, button.attention, button[class*="button-"] { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: var(--radius-control); font-weight: 600; text-decoration: none; transition: background-color .14s ease, border-color .14s ease, color .14s ease; }

.button-primary, .btn-primary, button.primary { background: var(--blue-strong); color: #071421; }

.button-primary:hover, .btn-primary:hover, button.primary:hover { background: #55aaff; color: #071421; }

.button-secondary, .btn-secondary, button.secondary { border-color: var(--border-strong); background: var(--bg-raised); color: var(--text-primary); }

.button-secondary:hover, .btn-secondary:hover, button.secondary:hover { background: var(--bg-hover); }

.button-ghost, .btn-ghost, button.ghost { border-color: var(--border-default); background: transparent; color: var(--text-secondary); }

.button-ghost:hover, .btn-ghost:hover, button.ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.button-attention, .btn-attention, button.attention { border-color: rgba(245,130,32,.38); background: var(--orange-muted); color: var(--orange-bright); }

.icon-button { display: inline-grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); }

.icon-button:hover { background: var(--bg-hover); color: var(--text-primary); }

.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }



label, .field-label { display: grid; gap: .4rem; color: var(--text-secondary); font-size: .875rem; font-weight: 550; }

input, select, textarea, .input, .select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--border-default); border-radius: var(--radius-control); outline: none; background: var(--bg-subtle); color: var(--text-primary); }

textarea { min-height: 96px; resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--text-muted); }

input:focus-visible, select:focus-visible, textarea:focus-visible, .input:focus-visible, .select:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76,168,255,.2); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }

.field-error, .error-text { color: #ff8585; font-size: .82rem; }

input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; accent-color: var(--blue); }

fieldset { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-control); }

legend { padding: 0 .35rem; color: var(--text-secondary); font-weight: 600; }



.tabs, .segmented-control { display: flex; gap: .2rem; padding: .2rem; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-subtle); }

.tabs button, .segmented-control button { min-width: 44px; min-height: 44px; flex: 1; padding: .5rem .65rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: .86rem; }

.tabs button[aria-selected="true"], .segmented-control button[aria-pressed="true"] { background: var(--bg-active); color: var(--text-primary); }

.chip, .tag, .badge { display: inline-flex; min-height: 28px; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: #292929; color: #d0d0d0; font-size: .78rem; line-height: 1.2; }

.chip-easy, .tag-easy { border-color: rgba(53,200,111,.3); background: rgba(53,200,111,.14); color: #73df9d; }

.chip-steady, .tag-steady { border-color: rgba(61,155,242,.3); background: rgba(61,155,242,.14); color: #83c4ff; }

.chip-intervals, .tag-intervals { border-color: rgba(245,130,32,.3); background: rgba(245,130,32,.14); color: #ffae63; }

.chip-interval { border-color: rgba(245,130,32,.3); background: rgba(245,130,32,.14); color: #ffae63; }

.chip-warning, .attention-text { color: #ffae63; }

.form-error { color: #ff8585; }

.run-name { margin: 0; font-size: 1rem; font-weight: 600; }

.run-grid strong, .detail-grid strong { display: block; margin-top: .25rem; font-size: 1rem; }

.timeline { margin: 1rem 0 0; }

.timeline svg { display: block; width: 100%; }

.timeline figcaption { font-size: .8rem; }

.strava-button { min-height: 44px; padding: 0; border: 0; background: transparent; }

.strava-button img { display: block; height: 40px; max-width: 100%; }


.metric-value { margin: 1rem 0; font-size: 3rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.metric-value span { font-size: 1rem; color: var(--text-muted); }

.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; margin-block: 1.25rem 1.5rem; padding: .25rem; list-style: none; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-subtle); color: var(--text-muted); font-size: .82rem; }
.setup-steps li { padding: .65rem .3rem; text-align: center; border: 1px solid transparent; border-radius: calc(var(--radius-control) - 2px); }

.setup-steps .is-active { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-primary); font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,.2); }

fieldset { border: 0; margin: 0 0 12px; padding: 0; }

legend { color: var(--text-muted); margin-bottom: 6px; }

.filter-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 10px; }

.filter-chip:has(input:checked) { background: #303030; border-color: var(--blue); }

.chart-wrap svg { touch-action: manipulation; }

.chip-pending, .tag-pending { border-color: rgba(119,132,145,.3); background: rgba(119,132,145,.14); color: #acb6bf; }



.chart-card { overflow: hidden; }

.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.chart-toolbar .tabs, .chart-toolbar .segmented-control { flex: 1 1 220px; }

.chart-toolbar button { min-height: 44px; }

.chart-wrap, .chart-container { position: relative; min-height: 0; overflow: hidden; border-radius: 8px; background: #202020; }

.chart-wrap svg, .chart-container svg { display: block; width: 100%; max-width: 100%; }

.chart-wrap canvas, .chart-container canvas { display: block; width: 100%; max-width: 100%; }

.chart-grid { stroke: rgba(220,220,220,.12); }

.chart-axis, .chart-label { fill: #999999; color: #999999; font-size: 12px; }

.chart-trend { stroke: #b5b5b5; stroke-width: 2; fill: none; }

.point-pending { fill: var(--run-pending); }

.point-easy { fill: var(--run-easy); }

.point-steady { fill: var(--run-steady); }

.point-intervals { fill: var(--run-interval); }

.point-selected { stroke: var(--orange); stroke-width: 3; }

.goal-line { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 6 5; }

.empty-state { display: grid; min-height: 220px; align-content: center; justify-items: center; gap: .65rem; padding: 1.2rem; border: 1px dashed #484848; border-radius: var(--radius-card); background: rgba(255,255,255,.015); text-align: center; }

.empty-state p { max-width: 34rem; margin: 0; }

.legend { display: flex; flex-wrap: wrap; gap: .5rem; }

.run-grid, .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .65rem; }

.run-card { display: grid; gap: .45rem; padding: .8rem .9rem; }

.run-card .run-name { line-height: 1.3; }

.run-card .run-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem .6rem; }

.run-card .run-grid > * { min-width: 0; }

.run-card .run-grid .field-label { display: block; overflow: hidden; margin: 0; font-size: .68rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.run-card .run-grid strong { margin-top: .12rem; font-size: .92rem; line-height: 1.25; }

.run-ratings { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; }

.run-ratings > * { margin: 0; }

.run-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }

.chart-meta, .chart-caption { margin: .2rem 0; color: var(--text-muted); font-size: .78rem; line-height: 1.35; }

.chart-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: .35rem 0; }

.chart-summary > * { margin: 0; }

.detail-cell { min-width: 0; padding: .7rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--bg-subtle); }

.detail-label { display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: .75rem; }

.detail-value { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.table-wrap { max-width: 100%; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; text-align: left; }

th, td { padding: .7rem .75rem; border-bottom: 1px solid rgba(255,255,255,.07); }

th { color: #8d9ba6; font-size: .875rem; font-weight: 550; }

td { color: #e3e9ee; }



.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.72); }

.modal-panel { position: relative; width: min(100%, 560px); max-height: min(88vh, 900px); max-height: min(88dvh, 900px); overflow: auto; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid #454545; border-radius: var(--radius-dialog); background: #242424; }

.modal-close { position: sticky; z-index: 2; float: right; top: 0; margin: -.55rem -.55rem .35rem .75rem; background: #242424; }

[data-form^="onboarding-"] > button[type="submit"] { margin-top: 1.25rem; }
.setup-connect { display: flex; justify-content: center; margin-block: .5rem; }
.setup-run-actions { margin-block: .75rem 1rem; }
.setup-alternatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.setup-alternatives > button { min-width: 0; }
.setup-privacy { margin-top: 1rem; font-size: .82rem; line-height: 1.5; }
.strava-troubleshooting { margin-top: 1rem; }
.strava-troubleshooting > summary { cursor: pointer; color: var(--text-secondary); font-size: .875rem; }
.strava-recovery { margin-top: .75rem; }
.setup-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.setup-footer button.ghost { border-color: transparent; font-size: .875rem; font-weight: 400; }
.goal-fields > .field { grid-row: span 2; grid-template-rows: subgrid; }
.goal-custom-distance:not([hidden]) { margin-top: 1rem; }

.toast { position: fixed; z-index: 90; right: 1rem; bottom: calc(5.8rem + env(safe-area-inset-bottom)); max-width: min(90vw, 420px); padding: .85rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-raised); color: var(--text-primary); }

.toast[data-state="error"] { border-color: var(--error); }

.toast[data-state="success"] { border-color: var(--success); }



:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 900px) {

  .app-header { padding-left: calc(var(--nav-width) + clamp(1.25rem, 3vw, 2.25rem)); }

  .primary-nav { inset: 72px auto 0 0; width: var(--nav-width); grid-template-columns: 1fr; grid-auto-rows: 74px; align-content: start; padding: 1rem .45rem; border-top: 0; border-right: 1px solid var(--border-subtle); }

  .nav-item { min-height: 64px; }

  .nav-item.is-current::before, .nav-item[aria-current="page"]::before { inset: 12% auto 12% 0; width: 2px; height: auto; border-radius: 0 2px 2px 0; }

  .main-content { width: min(100% - var(--nav-width) - 4rem, 1000px); min-height: calc(100vh - 136px); margin-left: calc(var(--nav-width) + max(2rem, (100vw - var(--nav-width) - 1000px) / 2)); }

  .app-footer { margin-left: var(--nav-width); padding: 1rem 1.5rem; }

  .toast { bottom: 1rem; }

}

@media (max-width: 699px) {

  .app-header { min-height: 64px; }

  .status-pill { max-width: 58vw; min-height: 34px; font-size: .75rem; }

  .main-content { width: min(100% - 1rem, 1000px); padding-top: .75rem; }

  .page { gap: .65rem; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  .card, .panel { padding: .8rem; }

  .card-header { margin-bottom: .55rem; }

  .run-card { gap: .35rem; padding: .7rem .75rem; }

  .run-card .run-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .45rem; }

  .run-card .run-grid .field-label { font-size: .65rem; }

  .run-card .run-grid strong { font-size: .85rem; }

  .run-ratings, .run-tags { gap: .3rem .6rem; }

  .modal-backdrop { align-items: end; padding: 0; height: 100vh; height: 100dvh; bottom: auto; }

  .modal-panel { width: 100%; max-height: 88vh; max-height: 88dvh; padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; }

}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

}



/* Keep the plot prominent; compact the information around it. */

.run-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }

.run-ratings > div { display: flex; align-items: baseline; gap: .35rem; }

.run-ratings .field-label { font-size: .75rem; }

.run-ratings strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.run-note { margin: 0; font-size: .72rem; line-height: 1.3; }

.run-card .empty-state { min-height: 44px; padding: .5rem; border: 0; }

.legend { margin-top: .35rem; font-size: .72rem; color: var(--text-muted); }

.legend-item { display: inline-flex; align-items: center; gap: .3rem; }

.legend-item::before { width: .45rem; height: .45rem; border-radius: 50%; background: var(--run-pending); content: ''; }

.legend-item.easy::before { background: var(--run-easy); }

.legend-item.steady::before { background: var(--run-steady); }

.legend-item.intervals::before { background: var(--run-interval); }

@media (max-width: 699px) {

  .chart-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; gap: .25rem; }

  .chart-toolbar .tabs { min-width: 0; padding: .1rem; }

  .chart-toolbar .tabs button { min-width: 0; padding: .35rem .25rem; font-size: .72rem; }

  .chart-toolbar > button { padding: .35rem .5rem; font-size: .75rem; }

  .run-card .card-header h1, .run-card .card-header h2 { font-size: 1.1rem; }

  .run-card .card-header button { padding: .4rem .65rem; font-size: .78rem; }

}


.chart-tab-extra { display: inline; }
.age-legend { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); font-size: .72rem; margin-left: .4rem; }
.age-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #b5b5b5; }
.age-dot.old { opacity: .2; }
.age-dot.middle { opacity: .6; }
.age-dot.new { opacity: 1; }
@media (max-width: 499px) { .chart-tab-extra { display: none; } }

.chart-meta { margin: .6rem 0 .7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.8; }
.chart-meta strong { font-weight: 550; color: var(--text-secondary); }

.chart-legend-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .6rem 0 0; }
.chart-legend-row .legend { margin: 0; gap: .4rem; }
.chart-legend-row .age-legend { flex-shrink: 0; margin-left: auto; white-space: nowrap; }
@media (max-width: 399px) {
  .chart-legend-row { gap: .3rem; }
  .chart-legend-row .legend, .chart-legend-row .age-legend { font-size: .65rem; gap: .25rem; }
}

.chart-card { padding-bottom: .6rem; }

.latest-details summary { display: grid; gap: .5rem; cursor: pointer; list-style: none; padding: .25rem 0; }
.latest-details summary::-webkit-details-marker { display: none; }
.latest-identity { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; font-size: .8rem; color: var(--text-muted); }
.latest-identity strong { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.latest-chevron { width: .5rem; height: .5rem; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); margin-left: auto; margin-right: .25rem; }
.latest-details[open] .latest-chevron { transform: rotate(225deg); }
.latest-body { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--divider); }
.run-card .latest-body .run-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.latest-body .timeline { margin-top: .6rem; }
.latest-body .timeline figcaption { font-size: .7rem; line-height: 1.35; margin-top: .25rem; }
.latest-body > .muted { margin: .4rem 0 0; font-size: .75rem; }

.selected-summary { display: grid; gap: .5rem; }
.selected-summary .run-name { margin: 0; color: var(--text-secondary); font-size: .85rem; }
.selected-run-card .selected-measurements { margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--divider); grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: .7rem; }
.selected-run-card .run-ratings strong { font-size: 1.35rem; }
.selected-run-card .timeline { margin-top: .6rem; }
.selected-run-card .timeline figcaption { line-height: 1.4; margin-top: .4rem; }
.run-provenance { margin: .4rem 0 0; font-size: .75rem; }

.selected-run-card { scroll-margin-top: 85px; }
.selected-measurements { display: grid; gap: .8rem; }
.measurement-group h3 { font-size: .75rem; color: var(--text-muted); font-weight: 500; margin-bottom: .5rem; }
.long-run-context { position: relative; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--divider); }
.distance-info { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; margin: -.25rem 0; padding: .15rem; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; vertical-align: middle; }
.distance-info:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; }
.mileage-info-copy { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.long-run-context .run-grid .field-label { white-space: normal; overflow: visible; text-overflow: clip; }
.run-card .latest-body .long-run-context .run-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.selected-run-card .measurement-group .run-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .6rem; }

.strava-activity-link { text-decoration: underline; text-underline-offset: .18em; }
.workout-info { position: relative; display: flex; justify-content: flex-end; }
.workout-info-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: help; }
.workout-tooltip { display: none; position: absolute; z-index: 5; right: 0; bottom: 100%; width: min(22rem, 80vw); padding: .75rem; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-surface); color: var(--text-secondary); box-shadow: 0 4px 16px #0008; font-size: .8rem; line-height: 1.5; }
.workout-info:hover .workout-tooltip, .workout-info:focus-within .workout-tooltip { display: block; }

/* Keep the chart help beside its source without an extra caption row. */
.selected-run-card .timeline { position: relative; margin-bottom: 0; padding-bottom: .1rem; }
.selected-run-card .workout-info { position: absolute; right: 0; bottom: -2.35rem; z-index: 2; }
.selected-run-card .run-provenance { min-height: 44px; display: flex; align-items: center; gap: .3rem; padding-right: 44px; margin: 0; }

[data-form="filters"] { display: grid; gap: 1.1rem; margin-top: 1.1rem; margin-bottom: 1rem; }
[data-form="filters"] .field { gap: .5rem; }
[data-form="filters"] .stack { gap: .75rem; }
[data-form="filters"] .stack > label { display: flex; align-items: center; gap: .6rem; }
.chart-help { display: grid; gap: .85rem; padding-left: 1.2rem; color: var(--text-secondary); line-height: 1.45; }

[data-form="filters"] .filter-date-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-date-range input { min-width: 0; }

.tag-choice-group { margin: 0; }
.tag-choice-group legend { margin-bottom: .5rem; }
.tag-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .2rem; gap: .2rem; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 8px; }
.tag-choices label { position: relative; cursor: pointer; }
.tag-choices input[type="radio"] { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.tag-choices span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .35rem .25rem; border-radius: 5px; color: var(--text-muted); font-size: .8rem; }
.tag-choices label:has(input:checked) span { background: var(--bg-active); color: var(--text-primary); }
.tag-choices label:has(input:focus-visible) span { outline: 2px solid var(--blue); outline-offset: 1px; }
.filter-reset-row { display: flex; justify-content: flex-end; padding-top: .5rem; }

[data-tag-match] .tag-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.selected-actions, .run-delete-row { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.selected-actions { justify-content: flex-end; }
.run-delete-row { justify-content: flex-end; width: 100%; padding-top: .65rem; margin-top: .4rem; border-top: 1px solid var(--divider); }
.control-info { position: relative; display: inline-flex; }
.control-info .icon-button { border: 0; }
.control-tooltip { display: none; position: absolute; z-index: 10; bottom: 100%; right: 0; width: min(17rem, 75vw); padding: .65rem; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-surface); color: var(--text-secondary); font-size: .8rem; line-height: 1.4; }
.control-info:hover .control-tooltip, .control-info:focus-within .control-tooltip { display: block; }

.subtle-delete-row { display: flex; justify-content: flex-end; align-items: center; gap: .15rem; margin-top: 1.25rem; }
.subtle-delete { display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; background: transparent; color: var(--text-muted); opacity: .65; }
.subtle-delete:hover, .subtle-delete:focus-visible { opacity: 1; color: var(--text-secondary); }
.subtle-delete svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.tag-filter-status { margin: 0; font-size: .75rem; }

[data-tag-match]:disabled .tag-choices { opacity: .45; }
[data-tag-match]:disabled label { cursor: default; }

.tag-filter-fields { display: grid; gap: 1rem; }

.hr-profile-notice { border-color: var(--orange); }
.hr-profile-notice p { margin: 0 0 .5rem; }

[data-form="hr"] { display: grid; gap: 1rem; margin-top: 1rem; }
[data-form="hr"] > button[type="submit"] { justify-self: start; margin-top: .5rem; }
[data-form="hr"] > p { margin: 0; }

[data-form="hr"] > .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-easy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .8rem; align-items: end; }
.settings-toggle .tag-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.settings-history [data-history-dates]:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .7rem; }
.settings-profile-history summary { cursor: pointer; min-height: 44px; }
.settings-profile-history summary span { display: block; margin-top: .4rem; font-size: .8rem; }
.settings-profile-history .table-wrap { margin-top: .8rem; }
.settings-display-row { display: flex; align-items: center; gap: .75rem; }
.settings-display-row .settings-toggle { flex: 1; max-width: 20rem; }

.hr-notice-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hr-notice-heading .icon-button { flex-shrink: 0; border: 0; font-size: 1.3rem; }

[data-form="manual"] { display: grid; gap: .8rem; }
[data-form="manual"] .manual-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-form="manual"] p { margin: 0; font-size: .8rem; }
.manual-tag-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .8rem; align-items: end; }
.manual-tag-row .row { gap: .7rem; }
.manual-save-row { display: flex; align-items: center; gap: .6rem; }
.manual-preview { padding: .6rem; background: var(--bg-subtle); border-radius: 6px; }
.import-history { margin-top: 1rem; }
.import-history summary { cursor: pointer; min-height: 44px; }
.import-history ul { padding-left: 1rem; }
.import-history li { margin: .6rem 0; overflow-wrap: anywhere; }
.import-history li span { display: block; font-size: .8rem; }

.manual-entry-card > [data-action="manual"] { margin-top: .75rem; }

.history-delete-divider { margin-top: 1.5rem; margin-bottom: 1.25rem; }

.disconnect-options { display: grid; gap: .75rem; margin: 1rem 0; }
.disconnect-options label { display: flex; align-items: start; gap: .7rem; padding: .7rem; border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; }
.disconnect-options label:has(input:checked) { border-color: var(--blue); background: var(--bg-active); }
.disconnect-options small { display: block; margin-top: .3rem; color: var(--text-muted); font-weight: normal; }
.disconnect-options input { flex-shrink: 0; }

.run-card .latest-empty { justify-items: start; text-align: left; gap: .75rem; padding: .5rem 0; }
.latest-empty h3 { margin: 0; }
.editable-segment { cursor: pointer; }
.editable-segment:hover, .editable-segment:focus-visible { stroke: var(--text-primary); stroke-width: 2; outline: none; }
[data-form="run-tags"] { display: grid; gap: 1rem; margin: 1.25rem 0; }
[data-form="segment"] .settings-toggle .tag-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-form="segment"] .manual-save-row { margin-top: 1.25rem; }
.time-of-day-filter input[type="checkbox"] { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.time-of-day-filter label:has(input:checked) span { background: var(--bg-active); color: var(--text-primary); }
.time-of-day-filter label:has(input:focus-visible) span { outline: 2px solid var(--blue); outline-offset: 1px; }
.time-filter-help { font-size: .75rem; line-height: 1.5; margin: .6rem 0 0; }
.manual-inputs .field:has([name="name"]) { grid-column: 1 / -1; }

.pace-comparison { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .85rem; }
.pace-comparison caption { text-align: left; padding: 0 0 1rem; }
.pace-comparison th, .pace-comparison td { padding: .75rem .35rem; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; text-align: right; }
.pace-comparison th:first-child { text-align: left; }
.pace-comparison thead th { color: var(--text-muted); font-size: .75rem; font-weight: 500; }
.pace-comparison tbody th { font-weight: 600; }
.pace-comparison tbody tr:last-child th, .pace-comparison tbody tr:last-child td { color: #f2d66d; }