/* Shared appearance tokens. This file is last on every public page. */
html {
  --page-bg: #fbfaf7;
  --page-surface: #fff;
  --page-surface2: #edf3f1;
  --page-text: #172b32;
  --page-muted: #4b626c;
  --page-line: #becbd0;
  --page-link: #206678;
  --page-accent: #805600;
  color-scheme: light;
  background: var(--page-bg);
}
html[data-theme="dark"] {
  --page-bg: #10191c;
  --page-surface: #17272c;
  --page-surface2: #21363e;
  --page-text: #f0f5f6;
  --page-muted: #b1c3ca;
  --page-line: #526b74;
  --page-link: #89d2de;
  --page-accent: #f7bd3d;
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme] {
  background: var(--page-bg);
  color: var(--page-text);
}
body:not(.homepage) {
  --bg: var(--page-bg);
  --surface: var(--page-surface);
  --surface2: var(--page-surface2);
  --text: var(--page-text);
  --muted: var(--page-muted);
  --muted2: var(--page-muted);
  --line: var(--page-line);
  --accent: var(--page-accent);
  --accent-dim: var(--page-surface2);
  background: var(--page-bg);
  color: var(--page-text);
}
.site-preferences {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 9px max(18px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid var(--page-line);
  background: var(--page-surface);
  color: var(--page-text);
  font: 500 12px/1.5 var(--brand-font, system-ui, sans-serif);
}
.site-preferences label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.site-preferences select {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 6px 24px 6px 8px;
  background: var(--page-bg);
  color: var(--page-text);
  border: 1px solid var(--page-line);
  border-radius: 6px;
  font: inherit;
}
.preferences-notice:empty {
  display: none;
}
.preferences-notice {
  flex-basis: 100%;
}
.site-preferences :focus-visible {
  outline: 3px solid var(--page-link);
  outline-offset: 3px;
}
body.homepage {
  background: var(--page-bg);
}
html[data-theme="dark"] body.homepage {
  color: var(--page-text);
}
html[data-theme="dark"]
  .homepage
  :is(
    .journey-strip,
    .feature-panel,
    .mockup,
    .mockup-header,
    .route-profile,
    .week-row,
    .chat-message,
    .roadmap-card,
    .faq-item,
    .faq-section,
    .week-session,
    .diary-message
  ) {
  background-color: var(--page-surface);
  border-color: var(--page-line);
}
/* The light areas of the homepage use these variables; photo/teal sections keep brand contrast. */
.homepage {
  --home-paper: var(--page-surface);
  --home-tint: var(--page-surface2);
  --home-muted: var(--page-muted);
}
.tool-page :is(section, article),
body:not(.homepage) .available {
  background: var(--page-surface);
  border-color: var(--page-line);
}
.tool-page :is(textarea, select, input),
.tool-page button {
  color: var(--page-text);
  background: var(--page-bg);
  border-color: var(--page-line);
}
.tool-page button {
  border: 2px solid var(--page-link);
}
.tool-page button:disabled {
  opacity: 0.55;
  cursor: default;
}
.tool-page a,
.calculator-page a:not(.wordmark),
.brand-home {
  color: var(--page-link);
}
.tool-page .muted {
  color: var(--page-muted);
}
.tool-page #message {
  color: var(--page-text);
}
html[data-theme="light"] .calculator-page .wordmark {
  color: #172b32;
}
html[data-theme="light"] .calculator-page .wordmark span {
  color: #206678;
}
html[data-theme="light"] .calculator-page .wordmark small {
  color: #4b626c;
}
html[data-theme="light"] .calculator-page {
  --g-up2: #a83924;
  --g-down: #236b52;
}
html[data-theme="light"]
  .calculator-page
  :is(.wheel, .wheel-item, .result-hero, .pace, .ts, .wk, .rec, .wkcal-day) {
  background-color: var(--page-surface);
  color: var(--page-text);
}
html[data-theme="light"] .calculator-page .wheel::before,
html[data-theme="light"] .calculator-page .wheel::after {
  background: none;
}
.tool-page .step-guide {
  border-left: 4px solid var(--page-link);
  padding-left: 16px;
}
.tool-page .help {
  color: var(--page-muted);
  font-size: 0.92rem;
  margin: 4px 0 18px;
}
.tool-page .steps {
  padding-left: 24px;
}
.tool-page .steps li {
  margin: 8px 0;
}
.tool-page .sample-plan {
  padding: 12px;
  background: var(--page-surface2);
  border-radius: 8px;
}
.tool-page button.primary {
  background: var(--page-link);
  color: var(--page-bg);
}
.tool-page input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--page-link);
  vertical-align: middle;
}
#trace polyline {
  stroke: var(--page-link);
}
#trace text {
  fill: var(--page-text);
}
#trace circle {
  stroke: var(--page-link);
}
html[data-theme="light"]
  .calculator-page
  #viewFeedback
  :is(.scale-btn.selected, .choice-pill.selected, .submit-btn) {
  color: var(--page-bg);
}
@media (max-width: 600px) {
  .site-preferences {
    justify-content: space-between;
    gap: 8px;
  }
  .tool-page {
    padding-inline: 14px;
  }
}
#proposals select {
  display: block;
  width: 100%;
}
html[data-theme="dark"]
  .homepage
  :is(
    .product-tabs button[aria-selected="true"],
    .eyebrow,
    .direction-grid a,
    .direction-grid .status-live,
    .roadmap-bottom a,
    .faq-items summary::after,
    .athlete-steps strong
  ) {
  color: var(--page-link);
}