/* Product UI pass loaded after page-specific CSS. */
:root {
  --ui-bg: #f7f8fa;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f9fafb;
  --ui-line: #e3e7ed;
  --ui-line-strong: #cfd6df;
  --ui-text: #101318;
  --ui-muted: #687385;
  --ui-radius: 8px;
  --ui-radius-sm: 6px;
  --ui-shadow: none;
  --ui-shadow-pop: 0 18px 48px rgba(16, 24, 40, .16);
  --ui-accent-wash: #dff7ef;
  --ui-accent: #0f766e;
  --ui-accent-soft: #b9ebdb;
  --ui-accent-strong: #075e52;
  --ui-accent-ink: #052f2a;
  --ui-action: #0f4f43;
  --ui-action-hover: #0b3f36;
  --ui-action-disabled: #d7e1dd;
  --ui-panel-tint: #edf4f1;
  --ui-dark: #081311;
  --ui-dark-soft: #10201d;
}

body {
  background: var(--ui-bg);
}

main {
  background: var(--ui-bg);
}

.card,
.dashboard-card,
.events-hero,
.events-filter,
.event-card,
.events-summary-card,
.events-notes,
.weather-hero,
.weather-summary-card,
.weather-table-card,
.weather-recommendation-card,
.brevet-hero,
.brevet-summary-card,
.brevet-table-card,
.routes-hero,
.routes-summary-card,
.routes-profile-card,
.zwift-hero,
.zwift-card,
.settings-nav-accordion,
.settings-main,
.ftp-card,
.weight-card,
.profile-card,
.account-card,
.intervals-card,
.strava-card,
.activity-ttt-analysis,
.activity-ttt-card,
.gc-popover {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

.events-hero,
.weather-hero,
.brevet-hero,
.routes-hero,
.zwift-hero,
.fitness-card,
.dashboard-card {
  background: var(--ui-surface);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-save,
.btn-cancel,
.brevet-remove-row,
.gc-icon-btn,
.sidebar-toggle,
.activity-rpe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-line-strong);
  background: #fff;
  color: var(--ui-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-save:hover,
.btn-cancel:hover,
.gc-icon-btn:hover,
.sidebar-toggle:hover {
  background: #fff;
  border-color: #aeb8c6;
  color: #0f172a;
  box-shadow: none;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-save:active,
.btn-cancel:active {
  transform: translateY(1px);
}

.btn.primary,
.btn.cta,
.cta,
.btn-primary,
.btn-save {
  border-color: transparent;
  background: var(--ui-action, #0f4f43);
  color: #fff;
}

.btn.primary:hover,
.btn.cta:hover,
.cta:hover,
.btn-primary:hover,
.btn-save:hover {
  background: var(--ui-action-hover, #0b3f36);
  color: #fff;
}

.btn-danger,
.brevet-remove-row {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}

.btn-danger:hover,
.brevet-remove-row:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.btn.ghost,
.btn-cancel,
.btn-secondary {
  background: #fff;
  color: #4b5563;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.gc-input,
.gc-textarea,
.gc-select {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background: #fff;
  color: var(--ui-text);
  font: inherit;
  box-shadow: none;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
.gc-input:focus,
.gc-textarea:focus,
.gc-select:focus {
  outline: 3px solid rgba(15, 118, 110, .15);
  border-color: rgba(15, 118, 110, .6);
  box-shadow: none;
}

.field label,
.field span,
.gc-label,
dt,
.dashboard-stat-label,
.events-summary-card span,
.weather-summary-card span,
.brevet-summary-card span,
.routes-summary-card span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.dashboard-header h1,
.dashboard-card-head h2,
.events-section-heading h2,
.events-list-header h2,
.weather-section-heading h2,
.weather-section-heading h3,
.brevet-section-heading h2,
.brevet-section-heading h3,
.routes-section-heading h2,
.activity-title,
.settings-title {
  color: var(--ui-text);
  letter-spacing: 0;
}

.dashboard-stats-grid.summary,
.dashboard-stats-grid.metrics,
.dashboard-stats-grid.ftp {
  border-color: var(--ui-line);
}

.dashboard-stats-grid.summary .dashboard-stat,
.dashboard-stats-grid.metrics .dashboard-stat,
.dashboard-stats-grid.ftp .dashboard-stat,
.events-summary-card,
.weather-summary-card,
.brevet-summary-card,
.routes-summary-card,
.event-meta div,
.weather-stats,
.brevet-stats,
.routes-metrics div,
.activity-ttt-card {
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
}

.dashboard-stat-value,
.events-summary-card strong,
.weather-summary-card strong,
.brevet-summary-card strong,
.routes-summary-card strong,
.activity-ttt-card strong {
  color: var(--ui-text);
  font-weight: 760;
}

.event-tag,
.i-badge,
.brevet-risk-pill,
.weather-risk-list span,
.routes-flags span,
.entry-type-badge,
.gc-metrics .badge {
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: none;
}

.calendar-workspace {
  background: var(--ui-bg);
}

.calendar-mode-switch {
  border-color: var(--ui-line);
  background: #eef1f5;
  border-radius: var(--ui-radius);
}

.calendar-mode-switch a {
  border-radius: var(--ui-radius-sm);
  color: #536073;
}

.calendar-mode-switch a.is-active {
  background: #fff;
  color: #111827;
  box-shadow: none;
}

.calendar--rix .calendar-table {
  border-color: var(--ui-line);
  background: var(--ui-line);
}

.calendar--rix .calendar-table thead th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.calendar--rix .calendar-day {
  background: #fff;
}

.calendar--rix .calendar-day:hover {
  background: #fbfdff;
}

.calendar--rix .entry-link {
  min-height: 18px;
  padding: 2px 5px;
  border-radius: 5px;
  color: #0f766e;
}

.calendar--rix .entry-link:hover {
  background: rgba(15, 118, 110, .08);
}

.gc-popover {
  border-radius: 10px;
  box-shadow: var(--ui-shadow-pop);
}

.gc-popover-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-line);
}

.gc-metrics .m {
  border-color: var(--ui-line);
}

.settings-layout {
  max-width: 1180px;
}

details.settings-nav-accordion {
  border-radius: var(--ui-radius);
  background: #fff;
  box-shadow: var(--ui-shadow);
}

.settings-nav-item {
  min-height: 38px;
  display: flex;
  align-items: center;
  border-bottom-color: var(--ui-line);
}

.settings-nav-item:hover,
.settings-nav-item.is-active {
  background: #f8fafc;
}

.weather-table,
.brevet-table {
  border-collapse: separate;
  border-spacing: 0;
}

.weather-table th,
.brevet-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.weather-table td,
.brevet-table td {
  border-bottom-color: var(--ui-line);
}

@media (max-width: 860px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-save,
  .btn-cancel {
    min-height: 38px;
  }
}

/* === Full product UI reset: keep the color system, replace page posture. === */
.container {
  max-width: 1280px;
}

.topbar {
  box-shadow: none;
}

.topbar-inner {
  padding-inline: 20px;
}

.topbar-right,
.topbar-left {
  min-width: 0;
}

.hint {
  color: #687385;
  font-size: 12px;
  font-weight: 600;
}

.card,
.dashboard-panel,
.dashboard-kpi-strip,
.training-records-shell,
.activity-chart-panel,
.events-hero,
.events-filter,
.events-summary-card,
.events-notes,
.weather-hero,
.weather-summary-card,
.weather-table-card,
.weather-recommendation-card,
.brevet-hero,
.brevet-summary-card,
.brevet-table-card,
.routes-hero,
.routes-summary-card,
.routes-profile-card,
.zwift-hero,
.zwift-card,
.fitness-card,
.settings-main,
.settings-nav-accordion {
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.dashboard-commandbar,
.training-records-commandbar,
.activity-detail-header,
.events-hero,
.weather-hero,
.brevet-hero,
.routes-hero,
.zwift-hero,
.fitness-header,
.settings-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
}

.events-hero,
.weather-hero,
.brevet-hero,
.routes-hero,
.zwift-hero {
  border-radius: 0;
}

.events-hero h1,
.weather-hero h1,
.brevet-hero h1,
.routes-hero h1,
.zwift-hero h1,
.dashboard-commandbar h1,
.training-records-title h2,
.activity-title,
.fitness-heading h2,
.settings-title {
  margin: 0;
  color: #101318;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.events-hero p,
.weather-hero p,
.brevet-hero p,
.routes-hero p,
.zwift-hero p,
.fitness-subtitle,
.training-records-title p,
.activity-date {
  max-width: 680px;
  margin: 4px 0 0;
  color: #687385;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.events-hero *,
.weather-hero *,
.brevet-hero *,
.routes-hero *,
.zwift-hero * {
  text-shadow: none !important;
}

.events-page,
.weather-page,
.brevet-page,
.routes-page,
.zwift-page,
.statistics-page,
.settings-layout {
  display: grid;
  gap: 14px;
  max-width: 1280px;
}

.events-summary,
.weather-summary,
.brevet-summary,
.routes-summary,
.fitness-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #fff;
}

.statistics-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  min-height: 34px;
  padding: 7px 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.statistics-summary-row div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.statistics-summary-row div + div::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-right: 12px;
  background: var(--ui-line);
}

.statistics-summary-row span {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
}

.statistics-summary-row strong {
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
}

.events-summary-card,
.weather-summary-card,
.brevet-summary-card,
.routes-summary-card,
.fitness-metrics .metric-item {
  min-height: 78px;
  padding: 13px 15px;
  border: 0;
  border-right: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: #fff;
}

.events-summary-card strong,
.weather-summary-card strong,
.brevet-summary-card strong,
.routes-summary-card strong,
.fitness-metrics strong {
  font-size: 24px;
  line-height: 1;
}

.events-filter,
.weather-table-card,
.brevet-table-card,
.routes-profile-card,
.zwift-card,
.fitness-chart-shell,
.settings-main {
  padding: 16px;
}

.events-list,
.weather-content-grid,
.brevet-content-grid,
.routes-content-grid,
.zwift-grid {
  gap: 14px;
}

.event-card {
  padding: 14px 16px;
}

.event-card,
.weather-recommendation-card,
.routes-profile-card {
  border-radius: 8px;
}

.event-meta,
.routes-metrics,
.weather-stats,
.brevet-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #fff;
}

.event-meta div,
.routes-metrics div,
.weather-stats > *,
.brevet-stats > * {
  border: 0;
  border-right: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: #fff;
}

.weather-table,
.brevet-table,
.settings-table {
  width: 100%;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  overflow: hidden;
}

.weather-table th,
.weather-table td,
.brevet-table th,
.brevet-table td,
.settings-table th,
.settings-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-line);
}

.calendar--rix .calendar-table {
  height: calc(100dvh - 190px);
  min-height: 580px;
  border-radius: 8px;
  background: var(--ui-line);
}

.calendar--rix .calendar-table thead th {
  height: 34px;
  font-size: 12px;
  text-align: left;
  padding: 0 8px;
}

.calendar--rix .calendar-day {
  background: #fff;
}

.calendar--rix .calendar-day .day-box {
  padding: 7px;
}

.calendar--rix .entry-link {
  min-height: 20px;
  padding: 2px 4px;
  border-radius: 5px;
  background: transparent;
}

.calendar--rix .entry-link:hover {
  background: #f3f7f6;
}

.calendar-nav {
  min-height: 54px;
}

.calendar-mode-switch {
  border-radius: 6px;
}

.calendar-mode-switch a {
  min-height: 30px;
  border-radius: 4px;
}

.dashboard-kpi:nth-child(5n),
.events-summary-card:last-child,
.weather-summary-card:last-child,
.brevet-summary-card:last-child,
.routes-summary-card:last-child,
.fitness-metrics .metric-item:last-child {
  border-right: 0;
}

.activity-chart-wrap {
  height: 150px;
}

.activity-ttt-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #fff;
}

.activity-ttt-card {
  border: 0;
  border-right: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
}

@media (max-width: 900px) {
  .dashboard-commandbar,
  .training-records-commandbar,
  .activity-detail-header,
  .events-hero,
  .weather-hero,
  .brevet-hero,
  .routes-hero,
  .zwift-hero,
  .fitness-header,
  .settings-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar--rix .calendar-table {
    height: 70vh;
    min-height: 520px;
  }
}

/* Summary rows should read as metadata, not billboard KPI cards. */
.dashboard-kpi-strip,
.events-summary-grid,
.weather-summary-grid,
.brevet-summary-grid,
.routes-summary-grid,
.fitness-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  min-height: 34px;
  padding: 7px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.dashboard-kpi,
.events-summary-card,
.weather-summary-card,
.brevet-summary-card,
.routes-summary-card,
.fitness-metrics .metric-item {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-kpi + .dashboard-kpi::before,
.events-summary-card + .events-summary-card::before,
.weather-summary-card + .weather-summary-card::before,
.brevet-summary-card + .brevet-summary-card::before,
.routes-summary-card + .routes-summary-card::before,
.fitness-metrics .metric-item + .metric-item::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-right: 12px;
  background: var(--ui-line);
}

.dashboard-label,
.events-summary-card span,
.weather-summary-card span,
.brevet-summary-card span,
.routes-summary-card span,
.fitness-metrics .metric-label {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.dashboard-value,
.events-summary-card strong,
.weather-summary-card strong,
.brevet-summary-card strong,
.routes-summary-card strong,
.fitness-metrics strong {
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.brevet-summary-card small,
.routes-summary-card small {
  color: var(--ui-muted);
  font-size: 11px;
}

.dashboard-metric-table,
.dashboard-metric-table.two {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 0;
}

.dashboard-metric,
.activity-ttt-card {
  min-height: 0;
}

.dashboard-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px;
  border-right: 0;
  border-bottom: 1px solid var(--ui-line);
}

.dashboard-metric:last-child {
  border-bottom: 0;
}

.dashboard-metric .dashboard-value {
  font-size: 14px;
}

@media (max-width: 640px) {
  .dashboard-kpi-strip,
  .events-summary-grid,
  .weather-summary-grid,
  .brevet-summary-grid,
  .routes-summary-grid,
  .fitness-metrics,
  .statistics-summary-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dashboard-kpi,
  .events-summary-card,
  .weather-summary-card,
  .brevet-summary-card,
  .routes-summary-card,
  .fitness-metrics .metric-item,
  .statistics-summary-row div {
    justify-content: space-between;
  }

  .dashboard-kpi + .dashboard-kpi::before,
  .events-summary-card + .events-summary-card::before,
  .weather-summary-card + .weather-summary-card::before,
  .brevet-summary-card + .brevet-summary-card::before,
  .routes-summary-card + .routes-summary-card::before,
  .fitness-metrics .metric-item + .metric-item::before,
  .statistics-summary-row div + div::before {
    content: none;
  }
}

/* Apply the same non-card summary treatment to every remaining product page. */
.weather-score,
.brevet-risk-badge,
.routes-difficulty-badge,
.events-sample-badge,
.source-activity-card {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
  text-align: left;
  box-shadow: none;
}

.weather-score span,
.brevet-risk-badge span,
.routes-difficulty-badge span,
.events-sample-badge span,
.source-activity-card span {
  display: inline;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.weather-score strong,
.brevet-risk-badge strong,
.routes-difficulty-badge strong,
.events-sample-badge strong,
.source-activity-card strong {
  display: inline;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.weather-score em,
.routes-difficulty-badge em,
.events-sample-badge em,
.source-activity-card small {
  display: inline;
  margin: 0;
  color: var(--ui-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.summary-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  min-height: 34px;
  padding: 7px 0;
  overflow: visible;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  background: transparent;
}

.mini-card,
.power-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mini-card + .mini-card::before,
.power-summary-item + .power-summary-item::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-right: 12px;
  background: var(--ui-line);
}

.mini-card span,
.mini-card em,
.power-summary-item span,
.power-summary-item em {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.mini-card strong,
.power-summary-item strong {
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.activity-ttt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  min-height: 34px;
  padding: 7px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.activity-ttt-card {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.activity-ttt-card + .activity-ttt-card::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-right: 12px;
  background: var(--ui-line);
}

.activity-ttt-card strong {
  display: inline;
  margin: 0;
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.2;
}

.activity-ttt-card span {
  display: inline;
  color: var(--ui-muted);
  font-size: 11px;
}

@media (max-width: 640px) {
  .weather-score,
  .brevet-risk-badge,
  .routes-difficulty-badge,
  .events-sample-badge,
  .source-activity-card,
  .summary-grid,
  .activity-ttt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .mini-card,
  .power-summary-item,
  .activity-ttt-card {
    justify-content: space-between;
  }

  .mini-card + .mini-card::before,
  .power-summary-item + .power-summary-item::before,
  .activity-ttt-card + .activity-ttt-card::before {
    content: none;
  }
}

/* Dense metric treatment: keep one-value summaries readable without tall cards. */
.dashboard-kpi-strip,
.events-summary-grid,
.weather-summary-grid,
.brevet-summary-grid,
.routes-summary-grid,
.fitness-metrics,
.statistics-summary-row,
.summary-grid,
.activity-ttt-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 0;
  padding: 6px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
}

.dashboard-kpi,
.events-summary-card,
.weather-summary-card,
.brevet-summary-card,
.routes-summary-card,
.fitness-metrics .metric-item,
.statistics-summary-row div,
.mini-card,
.power-summary-item,
.activity-ttt-card {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.dashboard-kpi + .dashboard-kpi::before,
.events-summary-card + .events-summary-card::before,
.weather-summary-card + .weather-summary-card::before,
.brevet-summary-card + .brevet-summary-card::before,
.routes-summary-card + .routes-summary-card::before,
.fitness-metrics .metric-item + .metric-item::before,
.statistics-summary-row div + div::before,
.mini-card + .mini-card::before,
.power-summary-item + .power-summary-item::before,
.activity-ttt-card + .activity-ttt-card::before {
  content: "";
  flex: 0 0 1px;
  width: 1px;
  height: 11px;
  margin-right: 11px;
  background: var(--ui-line);
}

.dashboard-label,
.events-summary-card span,
.weather-summary-card span,
.brevet-summary-card span,
.routes-summary-card span,
.fitness-metrics .metric-label,
.statistics-summary-row span,
.mini-card span,
.mini-card em,
.power-summary-item span,
.power-summary-item em,
.activity-ttt-card span {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.dashboard-value,
.events-summary-card strong,
.weather-summary-card strong,
.brevet-summary-card strong,
.routes-summary-card strong,
.fitness-metrics strong,
.statistics-summary-row strong,
.mini-card strong,
.power-summary-item strong,
.activity-ttt-card strong {
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-metric {
  min-height: 0;
  padding: 8px 14px;
}

@media (max-width: 640px) {
  .dashboard-kpi-strip,
  .events-summary-grid,
  .weather-summary-grid,
  .brevet-summary-grid,
  .routes-summary-grid,
  .fitness-metrics,
  .statistics-summary-row,
  .summary-grid,
  .activity-ttt-grid {
    display: flex;
    gap: 5px 12px;
    padding: 6px 0;
  }

  .dashboard-kpi,
  .events-summary-card,
  .weather-summary-card,
  .brevet-summary-card,
  .routes-summary-card,
  .fitness-metrics .metric-item,
  .statistics-summary-row div,
  .mini-card,
  .power-summary-item,
  .activity-ttt-card {
    justify-content: flex-start;
  }

  .dashboard-kpi + .dashboard-kpi::before,
  .events-summary-card + .events-summary-card::before,
  .weather-summary-card + .weather-summary-card::before,
  .brevet-summary-card + .brevet-summary-card::before,
  .routes-summary-card + .routes-summary-card::before,
  .fitness-metrics .metric-item + .metric-item::before,
  .statistics-summary-row div + div::before,
  .mini-card + .mini-card::before,
  .power-summary-item + .power-summary-item::before,
  .activity-ttt-card + .activity-ttt-card::before {
    content: "";
  }
}

/* Calendar pages should use the available viewport instead of a card frame. */
body.training-calendar-page main {
  max-width: none;
  padding: calc(var(--topbar-h) + 12px) 16px 16px;
}

body.training-calendar-page .container {
  max-width: none;
  margin: 0;
}

body.training-calendar-page .training-records-shell {
  min-height: calc(100dvh - var(--topbar-h) - 28px);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.training-calendar-page .training-records-commandbar,
body.training-calendar-page .calendar-nav {
  flex: 0 0 auto;
}

body.training-calendar-page .calendar-workspace {
  min-height: 0;
  padding: 0;
  background: transparent;
}

body.training-calendar-page .calendar--rix,
body.training-calendar-page .calendar--rix .calendar-table {
  height: 100%;
}

body.training-calendar-page .calendar--rix .calendar-table {
  min-height: 0;
  border-radius: 0;
}

body.training-calendar-page .calendar--rix .calendar-table thead th {
  text-align: center;
}

@media (max-width: 900px) {
  body.training-calendar-page main {
    padding: calc(var(--topbar-h) + 8px) 8px 8px;
  }

  body.training-calendar-page .training-records-shell {
    min-height: calc(100dvh - var(--topbar-h) - 16px);
  }
}

/* Activity detail metric layout is defined in training_record_detail.css (PR90 keeps two columns on mobile). */

/* RideRIX workbench layer: training-first platform chrome. */
.riderix-shell main > .container {
  min-width: 0;
}

.riderix-shell .sidebar-toggle {
  display: none;
}

.dashboard-page,
.events-page,
.weather-page,
.brevet-page,
.routes-page,
.zwift-page,
.statistics-page,
.usage-workbench,
.settings-layout,
.activity-detail-shell {
  max-width: 1320px;
}

.dashboard-commandbar,
.training-records-commandbar,
.activity-detail-header,
.events-hero,
.weather-hero,
.brevet-hero,
.routes-hero,
.zwift-hero,
.fitness-header,
.settings-header {
  position: static;
  align-items: flex-end;
  min-height: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ui-line-strong);
  border-radius: 0;
  background: transparent;
}

.dashboard-commandbar h1,
.training-records-title h2,
.activity-title,
.events-hero h1,
.weather-hero h1,
.brevet-hero h1,
.routes-hero h1,
.zwift-hero h1,
.fitness-heading h2,
.settings-title,
.statistics-page h1 {
  color: var(--ui-accent-ink);
  font-weight: 820;
}

.usage-workbench {
  display: grid;
  gap: 18px;
  margin: 0 auto;
}

.usage-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ui-line-strong);
}

.usage-header h1 {
  margin: 0 0 8px;
  color: var(--ui-accent-ink);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 840;
  letter-spacing: 0;
  line-height: 1.05;
}

.usage-header p {
  max-width: 760px;
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}

.usage-kicker {
  margin: 0 0 7px;
  color: var(--ui-accent-strong);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
}

.usage-header-actions,
.usage-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.usage-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.usage-index {
  position: sticky;
  top: calc(var(--topbar-h, 56px) + 16px);
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.usage-index a {
  border-radius: var(--ui-radius-sm);
  padding: 9px 10px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 680;
  text-decoration: none;
}

.usage-index a:hover {
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.usage-sections {
  display: grid;
  gap: 12px;
}

.usage-section {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.usage-step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ui-accent-wash);
  color: var(--ui-accent-ink);
  font-size: 14px;
  font-weight: 840;
}

.usage-section h2 {
  margin: 0 0 8px;
  color: var(--ui-text);
  font-size: 19px;
  font-weight: 820;
  line-height: 1.3;
}

.usage-section p {
  margin: 0 0 10px;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}

.usage-section ul {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding-left: 1.1rem;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.6;
}

.usage-examples {
  display: grid;
  gap: 8px;
}

.usage-examples p {
  margin: 0;
  border-left: 3px solid var(--ui-accent-strong);
  padding: 9px 12px;
  background: var(--ui-surface-muted);
  color: var(--ui-text);
}

.dashboard-panel,
.card,
.training-records-shell,
.activity-chart-panel,
.event-card,
.weather-recommendation-card,
.routes-profile-card,
.zwift-card,
.settings-main,
.settings-nav-accordion {
  border-color: var(--ui-line-strong);
}

.card,
.dashboard-panel,
.events-filter,
.event-card,
.weather-table-card,
.weather-recommendation-card,
.brevet-table-card,
.routes-profile-card,
.zwift-card,
.activity-chart-panel {
  border-radius: var(--ui-radius-sm);
}

.card {
  padding: 14px 16px;
}

.card.narrow {
  padding: 18px 0 0;
  border: 0;
  border-top: 2px solid var(--ui-dark);
  border-radius: 0;
  background: transparent;
}

.dashboard-panel-header,
.dashboard-chart-body,
.events-filter,
.weather-table-card,
.brevet-table-card,
.routes-profile-card,
.zwift-card,
.fitness-chart-shell,
.settings-main {
  background: var(--ui-surface);
}

.dashboard-panel-header {
  min-height: 50px;
  background: var(--ui-panel-tint);
}

.dashboard-workbench {
  grid-template-columns: minmax(0,1.8fr) minmax(320px,.75fr);
}

.dashboard-kpi-strip,
.statistics-summary-row,
.events-summary-grid,
.weather-summary-grid,
.brevet-summary-grid,
.routes-summary-grid,
.fitness-metrics {
  padding: 9px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.btn.primary,
.btn.cta,
.cta,
.btn-primary,
.btn-save {
  background: var(--ui-action);
}

.btn.primary:hover,
.btn.cta:hover,
.cta:hover,
.btn-primary:hover,
.btn-save:hover {
  background: var(--ui-action-hover);
}

.calendar-nav {
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.training-handoff {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
}

.training-handoff a {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.training-handoff a:hover,
.training-handoff a:focus-visible {
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.calendar-mode-switch {
  background: var(--ui-panel-tint);
}

.calendar-mode-switch a.is-active {
  background: var(--ui-dark);
  color: var(--ui-surface);
}

.calendar--rix .calendar-table {
  border-color: var(--ui-line-strong);
  background: var(--ui-line-strong);
}

.calendar--rix .calendar-table thead th {
  background: var(--ui-dark);
  color: var(--ui-surface);
}

.calendar--rix .entry-link:hover,
.calendar--rix .entry-link:focus-visible {
  background: var(--ui-accent-wash);
}

.activity-metrics-grid {
  border-color: var(--ui-line-strong);
}

.activity-metrics-grid .m {
  background: var(--ui-surface);
}

.statistics-page {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dev-auth-code {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-accent-soft);
  border-radius: var(--ui-radius);
  background: var(--ui-accent-wash);
  color: var(--ui-accent-ink);
}

.dev-auth-code span,
.dev-auth-code small {
  color: var(--ui-accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.dev-auth-code strong {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
}

/* App pages use operational panels, not showcase cards. */
.settings-layout {
  grid-template-columns: 180px minmax(0, 1fr);
  max-width: 1120px;
  gap: 14px;
}

.settings-main {
  padding: 0;
  border: 0;
  background: transparent;
}

.settings-title {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--ui-line-strong);
  font-size: 17px;
  font-weight: 800;
}

.ftp-card,
.ftp-history-card,
.weight-card,
.weight-history-card,
.profile-card,
.account-card,
.intervals-card,
.strava-card,
.training-card,
.ai-card,
.account-editor-card {
  border: 0;
  border-top: 1px solid var(--ui-line-strong);
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ftp-card,
.weight-card,
.profile-card,
.intervals-card,
.strava-card,
.training-card,
.ai-card,
.account-editor-card {
  padding: 12px 14px;
}

.ftp-history-card,
.weight-history-card {
  margin-top: 10px;
  padding: 10px 14px 0;
}

.ftp-card h3,
.ftp-history-card h3,
.weight-card h3,
.weight-history-card h3,
.profile-card h3,
.intervals-card h3,
.strava-card h3,
.training-card h3,
.ai-card h3,
.account-editor-card h3 {
  margin: 0 0 8px;
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 800;
}

.ftp-note,
.weight-note,
.intervals-note,
.intervals-help,
.profile-note,
.strava-note {
  margin-bottom: 10px;
  color: var(--ui-muted);
  line-height: 1.45;
}

.ftp-current,
.weight-current {
  gap: 8px;
  min-height: 34px;
  margin-bottom: 10px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--ui-line);
}

.ftp-current .value,
.weight-current .value {
  font-size: 18px;
  font-weight: 800;
}

.settings-main .form-grid {
  gap: 8px 10px;
}

.settings-main .form-row,
.settings-main .field {
  gap: 4px;
}

.settings-main .form-row label,
.settings-main .field label,
.settings-main label {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.settings-main .input {
  min-height: 36px;
  padding: 7px 9px;
  border-color: var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  font-size: 13px;
}

.settings-main textarea {
  min-height: 84px;
}

.settings-main .form-actions,
.settings-main .actions {
  gap: 6px;
}

.settings-main .history-row {
  min-height: 42px;
  padding: 8px 0;
}

.settings-main .history-row-edit {
  background: transparent;
}

.settings-main .btn-primary,
.settings-main .btn-secondary,
.settings-main .btn-danger {
  min-height: 32px;
  border-radius: var(--ui-radius-sm);
  padding-inline: 10px;
}

.settings-main .btn-primary,
.settings-main .btn-save,
.gc-editor-footer .btn.primary,
.zwo-btn.cta,
.oauth-consent-actions .btn-primary {
  border-color: var(--ui-action, #0f4f43);
  background: var(--ui-action, #0f4f43);
  color: #fff;
}

.settings-main .btn-primary:hover,
.settings-main .btn-save:hover,
.settings-main .btn-primary:focus-visible,
.settings-main .btn-save:focus-visible,
.gc-editor-footer .btn.primary:hover,
.gc-editor-footer .btn.primary:focus-visible,
.zwo-btn.cta:hover,
.oauth-consent-actions .btn-primary:hover {
  border-color: var(--ui-action-hover, #0b3f36);
  background: var(--ui-action-hover, #0b3f36);
  color: #fff;
}

.settings-main .account-card-list {
  gap: 8px;
}

.settings-main .account-card {
  min-height: 0;
  padding: 11px 12px;
  border-radius: var(--ui-radius-sm);
}

.events-filter {
  background: transparent;
}

.events-filter.card {
  border-radius: 0;
}

.rix-date-field {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.rix-date-input {
  min-width: 0;
  padding-right: 40px !important;
  font-variant-numeric: tabular-nums;
}

.rix-date-trigger {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: grid;
  width: 36px;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--ui-line);
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
  background: var(--ui-panel-tint);
  color: var(--ui-accent-ink);
  cursor: pointer;
}

.rix-date-trigger span {
  position: relative;
  width: 15px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.rix-date-trigger span::before,
.rix-date-trigger span::after {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.rix-date-trigger span::before {
  left: 3px;
}

.rix-date-trigger span::after {
  right: 3px;
}

.rix-date-trigger:hover,
.rix-date-trigger:focus-visible {
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.rix-date-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  width: min(316px, calc(100vw - 28px));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  box-shadow: 0 18px 36px rgba(7, 28, 24, .16);
}

.rix-date-panel[hidden] {
  display: none;
}

.rix-date-head {
  display: grid;
  grid-template-columns: 30px minmax(88px, 1fr) minmax(74px, .8fr) 30px;
  gap: 5px;
  align-items: stretch;
}

.rix-date-head label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rix-date-head label span {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.rix-date-head select,
.rix-date-step {
  min-height: 30px;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-text);
  font: inherit;
}

.rix-date-head select {
  min-width: 0;
  padding: 4px 7px;
  font-size: 12px;
}

.rix-date-step,
.rix-date-foot button {
  cursor: pointer;
  font-weight: 800;
}

.rix-date-step:hover,
.rix-date-step:focus-visible,
.rix-date-foot button:hover,
.rix-date-foot button:focus-visible {
  border-color: var(--ui-accent-soft);
  background: var(--ui-accent-wash);
  color: var(--ui-accent-strong);
}

.rix-date-weekdays,
.rix-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.rix-date-weekdays span {
  min-height: 22px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.rix-date-weekdays span:first-child {
  color: #b42318;
}

.rix-date-weekdays span:last-child {
  color: #175cd3;
}

.rix-date-day {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.rix-date-day:hover,
.rix-date-day:focus-visible {
  border-color: var(--ui-accent-soft);
  background: var(--ui-accent-wash);
}

.rix-date-day.is-outside {
  color: var(--ui-muted);
}

.rix-date-day.is-today {
  border-color: var(--ui-line-strong);
}

.rix-date-day.is-selected {
  border-color: var(--ui-dark);
  background: var(--ui-dark);
  color: var(--ui-surface);
}

.rix-date-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-line);
}

.rix-date-foot button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-muted);
  font: inherit;
  font-size: 12px;
}

.profile-edit .rix-date-field {
  width: min(220px, 100%);
}

.profile-edit .rix-date-input {
  width: 100%;
}

@media (max-width: 900px) {
  .riderix-shell .sidebar-toggle {
    display: inline-flex;
  }

  .riderix-shell .topbar-right .cta {
    display: none;
  }

  .dashboard-commandbar,
  .training-records-commandbar,
  .activity-detail-header,
  .events-hero,
  .weather-hero,
  .brevet-hero,
  .routes-hero,
  .zwift-hero,
  .fitness-header,
  .settings-header,
  .usage-header {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    padding: 0 0 10px;
  }

  .dashboard-commandbar > *,
  .training-records-commandbar > *,
  .activity-detail-header > *,
  .events-hero > *,
  .weather-hero > *,
  .brevet-hero > *,
  .routes-hero > *,
  .zwift-hero > *,
  .fitness-header > *,
  .settings-header > *,
  .usage-header > * {
    align-self: stretch;
    text-align: left;
  }

  .dashboard-workbench {
    grid-template-columns: 1fr;
  }

  .usage-layout {
    grid-template-columns: 1fr;
  }

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

  .usage-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .usage-index {
    grid-template-columns: 1fr;
  }

  .usage-header-actions .btn,
  .usage-actions-row .btn {
    width: 100%;
  }
}