/* GoFishGo's local Material 3-inspired design system. */
:root {
  --md-primary: #006a63; --md-on-primary: #fff; --md-primary-container: #9ef2e8; --md-on-primary-container: #00201d;
  --md-secondary-container: #cde8e3; --md-on-secondary-container: #061f1d; --md-error: #ba1a1a; --md-on-error: #fff;
  --md-error-container: #ffdad6; --md-on-error-container: #410002; --md-background: #f8faf8; --md-surface: #f8faf8;
  --md-surface-low: #f2f5f2; --md-surface-container: #ecefed; --md-surface-high: #e6e9e7; --md-on-surface: #191c1b;
  --md-on-surface-variant: #3f4947; --md-outline: #707a77; --md-outline-variant: #bfc9c6; --md-inverse-surface: #2e3130;
  --md-inverse-on-surface: #eff1ef; --md-hover: rgb(0 106 99 / 8%); --md-pressed: rgb(0 106 99 / 12%);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-xs: .5rem; --radius-sm: .75rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-full: 999px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s8: 3rem;
  --elevation-1: 0 1px 2px rgb(25 28 27 / 18%), 0 1px 3px 1px rgb(25 28 27 / 8%);
  --elevation-2: 0 2px 6px 2px rgb(25 28 27 / 12%), 0 1px 2px rgb(25 28 27 / 14%);
  --chart-primary: #006a63; --chart-heart: #b3261e; --chart-elevation: #707a77; --chart-axis: #707a77;
  background: var(--md-background); color: var(--md-on-surface); color-scheme: light; font-family: var(--font); line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #83d6cc; --md-on-primary: #003733; --md-primary-container: #005049; --md-on-primary-container: #9ef2e8;
    --md-secondary-container: #324b47; --md-on-secondary-container: #cde8e3; --md-error: #ffb4ab; --md-on-error: #690005;
    --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-background: #101413; --md-surface: #101413;
    --md-surface-low: #181c1b; --md-surface-container: #1c201f; --md-surface-high: #272b29; --md-on-surface: #e0e3e1;
    --md-on-surface-variant: #bfc9c6; --md-outline: #89938f; --md-outline-variant: #3f4947; --md-inverse-surface: #e0e3e1;
    --md-inverse-on-surface: #2e3130; --md-hover: rgb(131 214 204 / 9%); --md-pressed: rgb(131 214 204 / 14%);
    --chart-primary: #83d6cc; --chart-heart: #ffb4ab; --chart-elevation: #bfc9c6; --chart-axis: #bfc9c6; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { background: var(--md-background); }
body { color: var(--md-on-surface); margin: 0; min-width: 20rem; }
button, input, select, textarea { font: inherit; }
a { color: var(--md-primary); text-underline-offset: .18em; }
a:hover { color: var(--md-on-primary-container); }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 3px; }

.app-header { align-items: center; background: color-mix(in srgb, var(--md-surface) 92%, transparent); border-bottom: 1px solid var(--md-outline-variant); display: flex; gap: var(--s4); justify-content: space-between; min-height: 4.5rem; padding: var(--s3) clamp(1rem, 4vw, 3rem); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); }
.app-header nav { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; }
.app-header nav::-webkit-scrollbar { display: none; }
.app-header nav a { border-radius: var(--radius-full); color: var(--md-on-surface-variant); flex: 0 0 auto; font-size: .9rem; font-weight: 700; padding: .65rem .9rem; text-decoration: none; }
.app-header nav a:hover, .app-header nav a.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.brand { color: var(--md-on-surface); font-size: 1.2rem; font-weight: 850; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; }
.public-header { position: relative; }

.page-shell { margin: 0 auto; max-width: 76rem; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 5rem; }
.narrow { max-width: 48rem; }
.app-main { min-height: calc(100vh - 4.5rem); }
.hero { max-width: 62rem; min-height: calc(100vh - 4.5rem); padding-top: clamp(5rem, 14vh, 10rem); }
.auth-shell { margin-top: clamp(1rem, 5vw, 4rem); max-width: 32rem; }
.page-intro, section { margin-block: var(--s6); }
.eyebrow { color: var(--md-primary); font-size: .78rem; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
h1, h2, h3 { color: var(--md-on-surface); letter-spacing: -.035em; line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); margin: var(--s2) 0 var(--s3); }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 var(--s4); }
h3 { font-size: 1.1rem; margin: 0; }
.intro { font-size: clamp(1.2rem, 3vw, 1.5rem); max-width: 42rem; }
.lede, .status, .hint, .muted { color: var(--md-on-surface-variant); }
.lede { font-size: 1.08rem; max-width: 46rem; }.status, .hint { line-height: 1.6; max-width: 48rem; }.hint { font-size: .9rem; }
.back-link { margin: 0 0 var(--s4); }.heading-row, .action-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; }

.summary-grid, .choice-grid, .chart-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.summary-card, .choice-card, .weekly-chart, .analysis, .route-map, .splits, .account-email, .google-health-import-form, .danger-zone, .activity-list li, table { background: var(--md-surface-low); border: 1px solid var(--md-outline-variant); border-radius: var(--radius-lg); box-shadow: var(--elevation-1); }
.summary-card { padding: var(--s5); }.summary-card h2, .summary-card p { margin: 0 0 var(--s2); }.summary-detail { border-top: 1px solid var(--md-outline-variant); font-size: .92rem; margin-top: var(--s3) !important; padding-top: var(--s3); }
.metric { color: var(--md-on-surface); font-size: clamp(1.65rem, 4vw, 2.4rem); font-weight: 850; letter-spacing: -.04em; }
.weekly-chart, .analysis, .route-map, .splits { padding: var(--s5); }.analysis, .route-map, .splits { margin-top: var(--s6); }
.choice-card { color: var(--md-on-surface); display: grid; gap: var(--s2); min-height: 8rem; padding: var(--s5); text-decoration: none; }.choice-card:hover { background: var(--md-hover); border-color: var(--md-primary); box-shadow: var(--elevation-2); }

form { display: grid; gap: var(--s4); margin: var(--s5) 0; }
label { color: var(--md-on-surface); display: grid; font-size: .94rem; font-weight: 750; gap: var(--s2); }
input, select, textarea { background: var(--md-surface-low); border: 1px solid var(--md-outline); border-radius: var(--radius-xs); color: var(--md-on-surface); min-height: 3.25rem; padding: .75rem .9rem; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; width: 100%; }
textarea { min-height: 7rem; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: var(--md-on-surface); }
input:focus, select:focus, textarea:focus { border: 2px solid var(--md-primary); box-shadow: 0 0 0 3px var(--md-hover); outline: 0; padding: calc(.75rem - 1px) calc(.9rem - 1px); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--md-primary); min-height: 1.25rem; min-width: 1.25rem; padding: 0; width: 1.25rem; }
fieldset { border: 1px solid var(--md-outline); border-radius: var(--radius-md); margin: 0; padding: var(--s4); } legend { color: var(--md-on-surface); font-weight: 800; padding-inline: var(--s2); }
.unit-options, .duration-options { display: flex; flex-wrap: wrap; gap: var(--s3); }.duration-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unit-options label, .analysis-toggles label { align-items: center; background: var(--md-surface-container); border-radius: var(--radius-full); display: flex; flex-direction: row; font-weight: 700; gap: var(--s2); min-height: 2.75rem; padding: .45rem .75rem; }

button, .button, .secondary-button { align-items: center; border: 1px solid transparent; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; font-weight: 800; justify-content: center; min-height: 2.85rem; padding: .65rem 1.2rem; text-decoration: none; transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease; width: fit-content; }
button, .button { background: var(--md-primary); color: var(--md-on-primary); } button:hover, .button:hover { background: color-mix(in srgb, var(--md-primary) 88%, #000); box-shadow: var(--elevation-1); color: var(--md-on-primary); } button:active, .button:active { background: var(--md-pressed); transform: translateY(1px); }
.secondary-button, button.secondary, .button.secondary { background: transparent; border-color: var(--md-outline); color: var(--md-primary); }.secondary-button:hover, button.secondary:hover, .button.secondary:hover { background: var(--md-hover); color: var(--md-primary); }
.danger { background: var(--md-error); color: var(--md-on-error); }.danger:hover { background: color-mix(in srgb, var(--md-error) 88%, #000); color: var(--md-on-error); } button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.confirm-dialog { background: var(--md-surface-low); border: 1px solid var(--md-outline-variant); border-radius: var(--radius-lg); box-shadow: var(--elevation-2); color: var(--md-on-surface); max-width: min(28rem, calc(100vw - 2rem)); padding: var(--s5); }.confirm-dialog::backdrop { background: rgb(0 0 0 / 45%); }.confirm-dialog form { margin: 0; }.confirm-dialog p { color: var(--md-on-surface-variant); margin: 0; }

.error { background: var(--md-error-container); border-left: 4px solid var(--md-error); border-radius: var(--radius-xs); color: var(--md-on-error-container); font-weight: 750; margin: var(--s3) 0; padding: var(--s3) var(--s4); }
.badge { background: var(--md-secondary-container); border-radius: var(--radius-full); color: var(--md-on-secondary-container); display: inline-block; font-size: .84rem; font-weight: 800; padding: .35rem .75rem; }.account-email { font-weight: 750; padding: var(--s4); }.danger-zone { border-color: color-mix(in srgb, var(--md-error) 45%, var(--md-outline-variant)); padding: var(--s5); }

.activity-list { display: grid; gap: var(--s3); list-style: none; padding: 0; }.activity-list li { overflow: hidden; }.activity-list a { align-items: center; color: var(--md-on-surface); display: flex; justify-content: space-between; min-height: 4.8rem; padding: var(--s4); text-decoration: none; }.activity-list a:hover { background: var(--md-hover); }.activity-list small { color: var(--md-on-surface-variant); display: block; margin-top: var(--s1); }
.analysis-toggles { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
#analysis-graph, #weekly-mileage-chart { background: var(--md-surface-low); border: 1px solid var(--md-outline-variant); border-radius: var(--radius-md); display: block; min-height: 15rem; width: 100%; }#analysis-graph { min-height: 19rem; }
#analysis-graph text, #weekly-mileage-chart text { fill: var(--md-on-surface-variant); font: 14px var(--font); }.graph-axis { stroke: var(--chart-axis); stroke-width: 1.2; }
.analysis-hover { background: var(--md-inverse-surface); border-radius: var(--radius-sm); box-shadow: var(--elevation-2); color: var(--md-inverse-on-surface); font-size: .85rem; padding: var(--s3); pointer-events: none; position: absolute; right: var(--s4); top: 4.5rem; z-index: 2; }
table { border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; }th, td { border-bottom: 1px solid var(--md-outline-variant); padding: var(--s3) var(--s4); text-align: left; }th { background: var(--md-surface-container); color: var(--md-on-surface-variant); font-size: .8rem; text-transform: uppercase; }tbody tr:last-child td { border-bottom: 0; }
#route-map { border: 1px solid var(--md-outline-variant); border-radius: var(--radius-md); height: min(60vw, 26rem); min-height: 18rem; overflow: hidden; width: 100%; }.maplibregl-ctrl-group { box-shadow: var(--elevation-2) !important; }
.import-activity-grid { border: 1px solid var(--md-outline-variant); border-radius: var(--radius-md); overflow-x: auto; }.import-activity-heading, .import-activity-row { align-items: center; display: grid; gap: var(--s4); grid-template-columns: 2rem 8rem minmax(10rem, 2fr) 5rem 4.5rem; min-width: 34rem; padding: var(--s3) var(--s4); white-space: nowrap; }.import-activity-heading { background: var(--md-surface-container); color: var(--md-on-surface-variant); font-size: .8rem; font-weight: 800; text-transform: uppercase; }.import-activity-row { background: var(--md-surface-low); border-top: 1px solid var(--md-outline-variant); cursor: pointer; font-weight: 550; }.import-activity-row:hover { background: var(--md-hover); }.import-activity-row input { min-height: auto; padding: 0; width: 1.15rem; }
@media (max-width: 42rem) { .app-header { align-items: flex-start; flex-direction: column; gap: var(--s2); padding-inline: var(--s4); }.app-header nav { max-width: 100%; width: 100%; }.app-header nav a { padding: .55rem .75rem; }.page-shell { padding-inline: var(--s4); }.heading-row { align-items: stretch; flex-direction: column; }.heading-row .button { width: 100%; }.summary-grid { grid-template-columns: 1fr; }.weekly-chart, .analysis, .route-map, .splits { padding: var(--s4); }th, td { padding: var(--s3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }