/**
 * cadence.css -- Surface styles for the Today view.
 * @build_phase surface
 *
 * Imports cadence-tokens.css for all custom properties and voice classes.
 * Imports block CSS for sovereign blocks.
 * This file contains ONLY surface composition -- layout, not block internals.
 *
 * Typography: consume voice classes. Override only size or colour where
 * the element needs a different scale of the same character.
 * Every value from tokens. Zero hardcoding.
 */

@import url('cadence-tokens.css');
@import url('blocks/session/session-block.css');
@import url('blocks/forms.css');
@import url('blocks/signal/signal-block.css');
@import url('blocks/constraint/constraint-block.css');

/* ── Reset ── */

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

/* ── Page ── */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--ground);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Utility: uppercase label treatment ── */

.uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* ── Icon base ── */

.icon {
  display: inline-block;
  vertical-align: middle;
}

/* ── App shell ── */

.app {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-4);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Header ── */

.today-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}

/* voice-display at 2xl scale (greeting is the largest display text) */
.today-greeting {
  font-size: var(--text-2xl);
}

.today-context {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* voice-label, colour override */
.today-context-item {
  color: var(--text-muted);
}

/* voice-data-lg at 3xl scale (the hero number) */
.today-countdown {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
}

/* voice-label, colour override */
.today-countdown-label {
  color: var(--text-muted);
}

/* ── Sections ── */

.today-section {
  margin-bottom: var(--space-6);
}

/* voice-label + uppercase treatment + colour override */
.today-section-title {
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* ── Check-in form ──
 * Form input treatment is in blocks/forms.css (shared across all blocks).
 * This section only carries the check-in-specific layout.
 */

.form-checkin {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Supplementation checklist ── */

.supplement-group {
  margin-bottom: var(--space-3);
}

/* voice-meta + semibold override + uppercase treatment + colour override
   Uses text-muted NOT text-subtle: these are functional section headers (WCAG 4.5:1 required) */
.supplement-group-title {
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.supplement-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  min-height: var(--layout-touch-target);
}

.supplement-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--signal-green);
}

.supplement-dose {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.supplement-item.checked .supplement-name {
  color: var(--text-subtle);
  text-decoration: line-through;
}

/* ── Milestone countdown ── */

.milestone-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* voice-data-lg at 2xl scale + signal-amber colour */
.milestone-days {
  font-size: var(--text-2xl);
  color: var(--signal-amber);
  flex-shrink: 0;
  min-width: 3ch;
  text-align: center;
}

/* voice-meta, colour override */
.milestone-days-unit {
  color: var(--text-muted);
  text-align: center;
  display: block;
}

.milestone-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* voice-body, weight override */
.milestone-event {
  font-weight: var(--weight-medium);
}

/* voice-label, colour override */
.milestone-purpose {
  color: var(--text-muted);
}

/* ── Nav (bottom) ── */

.today-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-6);
}

/* voice-label, colour override */
.today-nav-item {
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--timing-fast) var(--ease);
}

.today-nav-item:hover {
  color: var(--text);
}

.today-nav-item.active {
  color: var(--text);
  background: var(--surface-raised);
}

/* ── Week view ── */

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.week-nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  min-height: var(--layout-touch-target);
  min-width: var(--layout-touch-target);
  cursor: pointer;
  transition: color var(--timing-fast) var(--ease);
}

.week-nav-btn:hover {
  color: var(--text);
}

.week-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.week-title-group {
  text-align: center;
}

.week-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.week-meta-item {
  color: var(--text-muted);
}

.week-warning {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-left: var(--layout-accent-bar) solid var(--signal-amber);
  border-radius: var(--radius-sm);
  color: var(--signal-amber);
  margin-bottom: var(--space-4);
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.week-day-header {
  text-align: center;
  color: var(--text-subtle);
  padding-bottom: var(--space-1);
}

.week-day-cell {
  min-height: var(--layout-cell-min);
}

/*
 * Mobile week grid: icon-only cells.
 * The rhythm IS the information -- hard (green) vs recovery (blue) vs rest (muted).
 * Labels unnecessary when the athlete knows their schedule.
 * Icon shape distinguishes modality.
 */
.week-day-cell .session-compact {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  min-height: var(--layout-cell-min);
  gap: var(--space-1);
}

.week-day-cell .session-compact-info {
  display: none;
}

.week-day-cell .session-compact .session-icon {
  width: var(--space-5);
  height: var(--space-5);
}

/* On larger screens, show the labels */
@media (min-width: 600px) {
  .week-day-cell .session-compact {
    flex-direction: row;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .week-day-cell .session-compact-info {
    display: flex;
    gap: 0;
  }

  .week-day-cell .session-compact-info .voice-label {
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
  }

  .week-day-cell .session-duration {
    font-size: var(--text-xs);
  }
}

/* Today cell highlight */
.week-day-cell.is-today {
  outline: 2px solid var(--signal-rest);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Empty cell (no session) */
.week-day-empty {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  min-height: calc(var(--layout-cell-min) * 1.5);
  opacity: 0.4;
}

/* Completion states on past session cells */
.week-day-completed .session-compact {
  opacity: 0.85;
}

.week-day-completed::after {
  content: '\2713';
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  font-size: var(--text-xs);
  color: var(--signal-green);
  line-height: 1;
}

.week-day-completed,
.week-day-partial,
.week-day-missed,
.week-day-unlogged {
  position: relative;
}

.week-day-partial::after {
  content: '\00BD';
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  font-size: var(--text-xs);
  color: var(--signal-amber);
  line-height: 1;
}

.week-day-missed .session-compact {
  opacity: 0.4;
}

.week-day-missed::after {
  content: '\2717';
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  font-size: var(--text-xs);
  color: var(--signal-red);
  line-height: 1;
}

.week-day-unlogged .session-compact {
  opacity: 0.6;
}

/* Tappable cells (past/today, non-rest) */
.week-day-tappable {
  cursor: pointer;
}

.week-day-tappable:hover .session-compact {
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

/* Confirmation panel below grid */
.week-confirmation-panel {
  margin-bottom: var(--space-4);
}

.week-confirmation-panel:empty {
  display: none;
}

.week-totals {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.week-total-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.week-total-value {
  color: var(--text);
}

.week-total-label {
  color: var(--text-muted);
}

/* ── Arc view ── */

/* Arc micro-measurements: local custom properties.
   Derived from the design system's scale but specific to the arc's
   compact visual rhythm. Named locally to avoid polluting the global token space. */
.arc-phases,
.arc-progress,
.arc-longrun {
  --arc-dot-size: 6px;
  --arc-dot-gap: 2px;
  --arc-marker-width: 2px;
  --arc-marker-dot: 8px;
  --arc-completion-ring: 1.5px;
}

@media (min-width: 600px) {
  .arc-phases,
  .arc-progress,
  .arc-longrun {
    --arc-dot-size: 8px;
    --arc-dot-gap: 3px;
  }
}

/* Phase progress bar: the macro shape. Always visible. */
.arc-progress {
  margin-bottom: var(--space-5);
}

.arc-progress-track {
  display: flex;
  position: relative;
  height: 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
}

.arc-progress-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--surface);
  border-right: 1px solid var(--border-subtle);
  transition: background var(--timing-normal) var(--ease);
}

.arc-progress-segment:last-child {
  border-right: none;
}

.arc-progress-current {
  background: var(--surface-raised);
}

.arc-progress-label {
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
}

.arc-progress-current .arc-progress-label {
  color: var(--text-muted);
}

/* At narrow widths, hide labels for compressed phases */
@media (max-width: 599px) {
  .arc-progress-segment {
    min-width: 0;
  }
}

/* Now marker: vertical line on the progress bar */
.arc-now-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--arc-marker-width);
  background: var(--text);
  transform: translateX(calc(var(--arc-marker-width) / -2));
  z-index: 1;
}

.arc-now-marker::after {
  content: '';
  position: absolute;
  top: calc(var(--arc-marker-dot) / -2 + 1px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--arc-marker-dot);
  height: var(--arc-marker-dot);
  border-radius: var(--radius-full);
  background: var(--text);
}

/* Phase detail bands */
.arc-phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.arc-phase-band {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: opacity var(--timing-normal) var(--ease);
}

.arc-phase-current {
  border-color: var(--border);
}

.arc-phase-past {
  opacity: 0.6;
}

.arc-phase-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.arc-phase-name {
  /* voice-heading carries the character */
}

.arc-phase-weeks {
  color: var(--text-muted);
}

.arc-phase-purpose {
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.arc-phase-constraints {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.arc-constraint-item {
  color: var(--signal-amber);
  background: var(--surface-raised);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* Week strip within a phase band */
.arc-week-strip {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.arc-week-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.arc-week-current {
  outline: 2px solid var(--signal-rest);
  outline-offset: 1px;
}

.arc-week-number {
  color: var(--text-muted);
}

.arc-week-km {
  font-size: var(--text-xs);
}

.arc-week-tappable {
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease);
}

.arc-week-tappable:hover {
  background: var(--surface);
}

/* Session rhythm dots within a week slot */
.arc-session-icons {
  display: flex;
  gap: var(--arc-dot-gap);
}

.arc-session-dot {
  width: var(--arc-dot-size);
  height: var(--arc-dot-size);
  border-radius: var(--radius-full);
  background: var(--text-subtle);
  flex-shrink: 0;
}

.arc-dot-hard {
  background: var(--signal-green);
}

.arc-dot-recovery {
  background: var(--signal-rest);
}

.arc-dot-moderate {
  background: var(--text-muted);
}

.arc-dot-rest {
  background: var(--border);
}

.arc-dot-race {
  background: var(--signal-amber);
}

.arc-dot-assessment {
  background: var(--signal-amber);
}

/* Milestones within a phase band */
.arc-milestones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.arc-milestone {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.arc-milestone-date {
  flex-shrink: 0;
  min-width: 4ch;
}

.arc-milestone-event {
  /* voice-label carries the treatment */
}

.arc-milestone-purpose {
  color: var(--text-muted);
  width: 100%;
}

/* Milestone type colours */
.arc-milestone-race .arc-milestone-date,
.arc-milestone-race .arc-milestone-event {
  color: var(--text);
  font-weight: var(--weight-bold);
}

.arc-milestone-decision .arc-milestone-date {
  color: var(--signal-amber);
}

.arc-milestone-test .arc-milestone-date {
  color: var(--signal-green);
}

.arc-milestone-calibration .arc-milestone-date {
  color: var(--signal-rest);
}

.arc-milestone-nutrition .arc-milestone-date {
  color: var(--text-muted);
}

.arc-milestone-event .arc-milestone-date {
  color: var(--text-muted);
}

/* Completion overlay on session dots */
.arc-dot-done {
  box-shadow: 0 0 0 var(--arc-completion-ring) var(--signal-green);
}

.arc-dot-partial {
  opacity: 0.7;
  box-shadow: 0 0 0 var(--arc-completion-ring) var(--signal-amber);
}

.arc-dot-missed {
  opacity: 0.3;
}

.arc-dot-unlogged {
  opacity: 0.5;
}

/* Adherence summary per week */
.arc-week-adherence {
  color: var(--text-subtle);
}

.arc-week-adherence.adherence-good {
  color: var(--signal-green);
}

.arc-week-adherence.adherence-partial {
  color: var(--signal-amber);
}

.arc-week-adherence.adherence-none {
  color: var(--signal-red);
}

/* Long run progression chart */
.arc-longrun {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.arc-longrun-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.arc-longrun-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 1.5rem;
}

.arc-longrun-current {
  /* Subtle highlight for current week */
}

.arc-longrun-current .arc-longrun-week {
  color: var(--text);
}

.arc-longrun-week {
  width: 2.5ch;
  text-align: right;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.arc-longrun-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  height: 100%;
}

.arc-longrun-bar {
  height: 60%;
  background: var(--signal-rest);
  border-radius: var(--radius-sm);
  min-width: 0;
  transition: width var(--timing-normal) var(--ease);
}

.arc-longrun-peak {
  background: var(--signal-green);
}

.arc-longrun-taper {
  background: var(--text-muted);
}

.arc-longrun-label {
  flex-shrink: 0;
  font-size: var(--text-xs);
}

.arc-longrun-fuel {
  flex-shrink: 0;
  color: var(--signal-amber);
  min-width: 5ch;
  text-align: right;
}