/* ==========================================================================
   rides.md — editorial utilities (flat, rule-separated)
   Shared by /rides/ and /ride/.

   NOTE: colors defined here, NOT via page-level --c-* vars. /ride/ and
   /rides/ store those in different formats (OKLCH vs RGB channels).
   ========================================================================== */

:root {
  --ed-rule:       var(--color-gray-800);
  --ed-rule-soft:  var(--color-gray-700);
  --ed-ink:        var(--color-gray-200);
  --ed-ink-strong: var(--color-gray-100);
  --ed-muted:      var(--color-gray-500);
  --ed-muted-soft: var(--color-gray-600);
  --ed-accent:     var(--color-accent-ink);                                       /* aqua: primary button text/border, input focus */
  --ed-accent-wash: color-mix(in oklch, var(--color-brand-500) 12%, transparent); /* soft aqua wash: selected option / primary hover */
  --ed-danger:     var(--color-pig-rust);                                         /* real red for destructive (brand is no longer red) */
  --ed-danger-wash: color-mix(in oklch, var(--color-pig-rust) 8%, transparent);
}

/* Horizontal rules */
.rule-top    { border-top: 1px solid var(--ed-rule); }
.rule-bottom { border-bottom: 1px solid var(--ed-rule); }

/* Page header for app surfaces (/profile/, /rides/, /ride/).
   Sans title (app register, per DESIGN §3), mono uppercase kicker that speaks
   the same readout voice as the editorial .eyebrow (prose.css), so kickers read
   identically site-wide. The narrative reading column (.post, 54ch) lives in
   prose.css and is not loaded here, so it is untouched. */
.app-header { margin-bottom: 2.5rem; }

.app-header__kicker {
  margin: 0 0 0.9rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ed-muted);
  font-variant-numeric: tabular-nums;
}

.app-header__title {
  margin: 0;
  font-size: clamp(1.85rem, 1.45rem + 0.9vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ed-ink-strong);
  text-wrap: balance;
}

.app-header__lede {
  margin: 0.85rem 0 0;
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ed-ink);
}

/* Rule-separated rows (ride list, planned, sub-rows) */
.rides-row {
  display: block;
  border-top: 1px solid var(--ed-rule);
  padding: 1rem 0;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}
.rides-row:last-child { border-bottom: 1px solid var(--ed-rule); }
/* Only clickable rows (rendered as <a>) get the hover tint. Planned workouts
   render as <div class="rides-row"> and are not navigable, so no false affordance. */
a.rides-row:hover     { background-color: color-mix(in oklab, var(--ed-ink) 3%, transparent); }

.rides-row__title { font-size: 1rem; font-weight: 500; color: var(--ed-ink); }
.rides-row__meta  { margin-top: 0.2rem; font-size: 0.82rem; color: var(--ed-muted); font-variant-numeric: tabular-nums; }
.rides-row__chev  { color: var(--ed-muted-soft); }

/* Mono uppercase label — month sections, etc. */
.month-label {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
  padding: 3.5rem 0 0.5rem;
}
/* First month has no extra gap above — it sits right under the filter input */
section:first-child > .month-label { padding-top: 0.5rem; }

.mono-micro {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Flat form controls — bordered on all sides so the field clearly reads as
   editable, no rounded corners to stay on the editorial grid. */
.flat-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--ed-rule);
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  color: var(--ed-ink);
  transition: border-color 0.15s, background-color 0.15s;
}
.flat-input:hover    { border-color: var(--ed-muted-soft); }
.flat-input:focus    { outline: none; border-color: var(--ed-accent); }
.flat-input::placeholder { color: var(--ed-muted); }

/* Hide native number-input spinners on flat inputs */
.flat-input[type="number"]::-webkit-outer-spin-button,
.flat-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.flat-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.flat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ed-rule);
  background: transparent;
  color: var(--ed-ink);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.flat-btn:hover             { border-color: var(--ed-muted-soft); color: var(--ed-ink-strong); }
.flat-btn:disabled          { opacity: 0.5; cursor: not-allowed; }
.flat-btn:disabled:hover    { border-color: var(--ed-rule); color: var(--ed-ink); background: transparent; }
.flat-btn--primary          { border-color: var(--ed-accent); color: var(--ed-accent); }
.flat-btn--primary:hover    { background: var(--ed-accent-wash); color: var(--ed-accent); }
.flat-btn--danger           { border-color: var(--ed-danger); color: var(--ed-danger); }
.flat-btn--danger:hover     { background: var(--ed-danger-wash); color: var(--ed-danger); }
.flat-btn--sm               { padding: 0.32rem 0.7rem; font-size: 0.7rem; }
.flat-btn--natural          { font-family: inherit; text-transform: none; letter-spacing: 0.01em; font-size: 0.85rem; }

/* Inline toggle: "Last 20 / All rides", "Dark / Topo", "Power / HR" */
.mode-toggle {
  display: inline-flex;
  gap: 1.25rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mode-toggle button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ed-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.mode-toggle button:hover         { color: var(--ed-ink); }
.mode-toggle button.active        { color: var(--ed-ink); box-shadow: 0 1px 0 var(--ed-ink); }

/* Flat section — bordered, no rounding, no fill */
.flat-section {
  border-top: 1px solid var(--ed-rule);
  border-bottom: 1px solid var(--ed-rule);
  padding: 1.25rem 0;
}

/* Flat inline card — subtle border, no radius, no fill */
.flat-card {
  border: 1px solid var(--ed-rule);
  padding: 0.9rem 1rem;
  background: transparent;
}
.flat-card--muted { background: var(--color-gray-900); }

/* Thin divider between rows inside a flat block */
.flat-divider {
  height: 1px;
  background: var(--ed-rule);
  border: 0;
  margin: 0;
}

/* KPI row — rule-bounded grid with thin vertical dividers.
   Used by the /ride/ hero (Distance / Time / Elevation). */
.kpi-row {
  display: grid;
  gap: 0;
}
.kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .kpi-row--4 { grid-template-columns: repeat(4, 1fr); } }
.kpi-row--6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .kpi-row--6 { grid-template-columns: repeat(6, 1fr); } }

.kpi-cell {
  padding: 1.25rem 1rem;
  text-align: center;
  border-right: 1px solid var(--ed-rule);
}
.kpi-cell:last-child { border-right: 0; }
/* 2-up on mobile: drop the right rule on the 2nd column, add a top rule to row 2. */
@media (max-width: 639.98px) {
  .kpi-row--4 .kpi-cell:nth-child(2n) { border-right: 0; }
  .kpi-row--4 .kpi-cell:nth-child(n+3) { border-top: 1px solid var(--ed-rule); }
  /* 3-up on mobile: drop the right rule on the 3rd column, add a top rule to row 2. */
  .kpi-row--6 .kpi-cell:nth-child(3n) { border-right: 0; }
  .kpi-row--6 .kpi-cell:nth-child(n+4) { border-top: 1px solid var(--ed-rule); }
}

.kpi-cell--sm { padding: 0.85rem 0.75rem; }

.kpi-cell__value {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  font-weight: 400;
  color: var(--ed-ink-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-cell--sm .kpi-cell__value {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
}
.kpi-cell__unit {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7em;
  color: var(--ed-muted);
  font-weight: 400;
}
.kpi-cell__label {
  margin-top: 0.45rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

/* Workout plan graph */
.workout-plan-card {
  max-width: 42rem;
  margin-top: 0.85rem;
}

.workout-plan-card__profile {
  max-width: 42rem;
}

.workout-profile-svg {
  display: block;
  width: 100%;
  height: 38px;
  fill: var(--ed-muted);
  opacity: 0.52;
}

.workout-profile-svg--color { opacity: 1; }

.workout-profile-caption { display: none; }

/* Feedback card */
.feedback-card {
  border: 1px solid var(--ed-rule);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-gray-900); /* paper-soft */
}

.feedback-output.post-prose {
  display: grid;
  grid-template-columns: minmax(0, 45rem) minmax(13rem, 16rem);
  gap: 1.8rem;
  align-items: start;
  line-height: 1.55;
  font-size: 1rem;
  margin-top: 1.25rem;
  max-width: 64rem;
}

.feedback-output.post-prose > :first-child { margin-top: 0; }
.feedback-output.post-prose :where(h2, h3) {
  grid-column: 1 / -1;
  margin: 1.2rem 0 0.35rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ed-muted);
}
.feedback-output.post-prose :where(p) {
  grid-column: 1;
  margin: 0.65rem 0;
  max-width: 46rem;
}
.feedback-output.post-prose > p {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.3rem, 1.04rem + 0.65vw, 1.7rem);
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--ed-ink-strong);
}
.feedback-output.post-prose > p:first-of-type { margin-top: 0; }
.feedback-output.post-prose > :where(ul, ol):first-of-type {
  grid-column: 2;
  grid-row: 1 / span 6;
  margin: 0;
}
.feedback-output.post-prose :where(ul, ol) {
  grid-column: 1;
  list-style: none;
  margin: 0.8rem 0;
  padding: 0;
  border-top: 1px solid var(--ed-rule);
}
.feedback-output.post-prose :where(ul, ol) > li {
  margin: 0;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--ed-rule);
  color: var(--ed-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.feedback-output.post-prose :where(ul, ol) > li::before { content: none; }
.feedback-output.post-prose :where(ul, ol) > li > strong:first-child {
  display: block;
  margin-bottom: 0.22rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ed-muted-soft);
}

@media (max-width: 820px) {
  .feedback-output.post-prose {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .feedback-output.post-prose > :where(ul, ol):first-of-type {
    grid-column: 1;
    grid-row: auto;
  }
}

.feedback-attribution {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ed-rule);
  font-size: 0.72rem;
  color: var(--ed-muted-soft);
  letter-spacing: 0.02em;
}

/* Feedback athlete notes */
.feedback-athlete-notes {
  max-width: 42rem;
  margin-bottom: 1rem;
}

.feedback-athlete-notes__label {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

.feedback-athlete-notes__optional {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.76rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ed-muted-soft);
}

.feedback-athlete-notes__input {
  min-height: 5.3rem;
  resize: vertical;
  line-height: 1.45;
  font-size: 0.9rem;
}

.feedback-athlete-notes__hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ed-muted);
}

/* Feedback consent panel */
.feedback-consent {
  max-width: 42rem;
  margin-top: 1rem;
}

.feedback-consent__text {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ed-ink);
}

.feedback-consent__details {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ed-muted);
}

.feedback-consent__group-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ed-muted-soft);
  align-self: baseline;
}

.feedback-consent__items {
  margin: 0;
  color: var(--ed-ink);
}

.feedback-consent__remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  color: var(--ed-muted);
  cursor: pointer;
  user-select: none;
}

.feedback-consent__remember input { accent-color: var(--ed-accent); }

.feedback-consent__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Status chip — mirrors the homepage readiness pill so the chip advertised on
   the landing page and the real ride-page readiness read identically. State
   carries a label and a dot shape as well as color, never color alone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  border: 1px solid var(--ed-rule);
  padding: 0.34rem 0.7rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ed-ink);
  font-variant-numeric: tabular-nums;
}
.chip .led {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--ed-muted);
  flex-shrink: 0;
}
.chip .led--green   { background: var(--color-pig-pine); }
.chip .led--orange  { background: var(--color-pig-clay); }
.chip .led--red     { background: var(--color-pig-rust); }
.chip .led--neutral { background: var(--ed-muted); }

/* Ride-day readiness — plain line under the eyebrow, no box. */
.ride-readiness {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.35rem 0 0.95rem;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ed-ink);
  font-variant-numeric: tabular-nums;
}
.ride-readiness .led {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--ed-muted);
  flex-shrink: 0;
}
.ride-readiness .led--green   { background: var(--color-pig-pine); }
.ride-readiness .led--orange  { background: var(--color-pig-clay); }
.ride-readiness .led--red     { background: var(--color-pig-rust); }
.ride-readiness .led--neutral { background: var(--ed-muted); }