/* STC design system (design-brief.md): Georgia serif for display/headlines only,
   Inter sans for everything else (body, labels, UI, form inputs, numbers); black &
   white base with a single warm gold/mustard accent reserved for the primary CTA,
   focus states, and key highlights; sharp/square edges everywhere (no
   border-radius, no drop shadows) - this is the single biggest lever for reading as
   bespoke rather than templated, per the brief's own "what not-AI-generated means"
   section. Functional status colors (warning/danger/ok tags) are kept as real
   semantic signals, not folded into the black/gold brand palette - those are UI
   state, not brand identity, and the brief doesn't ask for them to be removed. */
:root {
  color-scheme: light;
  --font-display: Georgia, "Times New Roman", Times, serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-quiet: #f6f6f3;
  --surface-strong: #efefe9;
  --text: #111111;
  --muted: #5c5c56;
  --line: #dcdcd4;
  --line-strong: #b8b8ad;
  --accent: #b8872c;
  --accent-dark: #8a6520;
  --accent-soft: #f6ecd6;
  --warning: #8a5a00;
  --warning-soft: #fbf0dc;
  --danger: #9c2b22;
  --danger-soft: #f8e6e2;
  --ok: #1f6b3d;
  --ok-soft: #e7f2ea;
  --shadow: none;
  --header-height: 68px;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}

/* Sharp/square edges everywhere (design-brief.md "Shape language") - a single
   blanket reset rather than removing border-radius from every individual rule
   below, so nothing can accidentally reintroduce rounding later. Anything that
   still declares its own border-radius further down is legacy and gets overridden
   here; box-shadow is reset the same way (--shadow is "none" above, but some rules
   used to hardcode shadow values directly). */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* General safety net: any text-bearing card/note that gets a long dynamic string
   (injury notes, risk flags, workout descriptions) should wrap inside its container
   rather than forcing the layout wider - this is what let text "extend into the
   other format" on narrower/split-screen browser widths. */
.review-card,
.form-note,
.field-hint,
.summary-metric,
.delivery-log,
.workout-description {
  overflow-wrap: break-word;
  word-break: break-word;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* Display/headlines use Georgia (serif) - large, confident, used sparingly for
   page titles and section headers (design-brief.md typography). h3 stays sans -
   it's used for card titles and small in-panel headers throughout the app, closer
   to UI chrome than an editorial headline. */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1.08;
}

h2 {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

h3 {
  margin-bottom: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
}

p,
li {
  line-height: 1.55;
}

.app-shell {
  min-height: 100vh;
}

/* Minimal fixed header (design-brief.md "Navigation"): wordmark + 2-3 links, no
   mega-menu, no icons. Replaces the old always-present left sidebar rail - the
   sidebar's nav items and brand mark move in here unchanged in function (still the
   same data-view buttons app.js already wires up), just laid out horizontally in a
   slim fixed bar instead of a tall vertical column. Black background, white text -
   the one deliberately "full black" surface in the system, everything else stays
   on the white/off-white base. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--header-height);
  padding: 0 28px;
  background: #0a0a0a;
  color: #f5f5f2;
  border-bottom: 1px solid #000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: var(--accent);
  color: #0a0a0a;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.5px;
}

.brand strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.brand span {
  display: block;
  color: #a8a8a0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  min-height: 36px;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  background: transparent;
  color: #d8d8d0;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  /* Motion: only a conventional, near-invisible hover transition
     (design-brief.md "Motion") - the underline fading in/out, nothing else. */
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-item.active,
.nav-item:hover {
  border-bottom-color: var(--accent);
  color: #fff;
  background: transparent;
}

.nav-item.hidden {
  display: none;
}

/* Task #118: small pending-count badge on the Feedback nav item, same idea as a
   notification badge - a plain number is easy to miss next to plain nav text. */
.nav-badge {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #111111;
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

.nav-badge.hidden {
  display: none;
}

/* Athlete Monitoring / Feedback tab (task #118): a heavier top border than a plain
   .panel so this reads as a distinct kind of view, not just another list - Sam was
   explicit that check-in feedback needed a clearly different home, not something
   folded quietly into the existing per-athlete Review tab. */
.feedback-inbox {
  border-top: 4px solid var(--accent);
}

.checkin-feed-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  padding: 12px 14px;
  background: var(--surface-quiet);
  margin-bottom: 10px;
}

.checkin-feed-card.pending {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.checkin-feed-card.effort-hard {
  border-left-color: var(--danger);
}

.checkin-feed-card.effort-easy {
  border-left-color: var(--ok);
}

.checkin-feed-card .checkin-feed-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Contextual note that used to live in the sidebar's bottom panel ("Data first" /
   "Coach only" etc.) - now a slim banner at the top of the page content instead of
   inside the fixed header (the header itself stays wordmark + links only, per the
   brief's "no mega-menu" instruction). */
.sidebar-panel {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface-quiet);
  margin-bottom: 20px;
}

.sidebar-panel p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

main {
  min-width: 0;
  padding: 28px;
  padding-top: calc(var(--header-height) + 28px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.muted,
.form-note,
.thanks-copy,
.provider-card p,
.setup-panel p,
.capability-list span,
.quality-list span,
.session-card p,
.delivery-log,
.review-card p {
  color: var(--muted);
}

.status-strip,
.button-row,
.tag-row,
.form-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.status-strip {
  justify-content: flex-end;
}

.status-strip span,
.live-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  max-width: 100%;
  padding: 6px 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 800;
  /* Was white-space: nowrap, which was fine for short pills ("Signed out") but made
     longer dynamic risk-flag/injury-note text run straight off the edge of the panel
     instead of wrapping - short text still won't wrap here since it fits on one
     line, but long text now wraps inside the pill instead of overflowing it. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Typographic step indicator ("02 / 04", design-brief.md "Form") - deliberately
   NOT styled like the filled status/tag pills above. Plain numerals, generous
   letter-spacing, no background fill - reads as typography carrying the progress
   information, not a graphical progress-bar substitute. */
.step-pill {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.tag.warning,
.status-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.tag.danger,
.status-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.tag.ok,
.status-ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.banner-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  margin-bottom: 16px;
}

.banner-note.success {
  background: var(--ok-soft);
  color: var(--ok);
}

.banner-note .icon-button {
  font-size: 1.1rem;
  padding: 0 4px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.login-grid,
.intake-layout,
.coach-grid,
.plan-layout {
  display: grid;
  gap: 20px;
}

.login-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.intake-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.coach-grid {
  grid-template-columns: 320px minmax(0, 1fr);
}

/* Coach notes: saved automatically per athlete, reachable from any coach tab via the
   "Coach notes" button in the panel header - not a persistent sidebar. Earlier
   versions tried a Review-tab-only placement (disappeared on tab switch) and then an
   always-present sticky sidebar (could grow tall enough via textarea resize to feel
   like it was "stuck on top of" content while scrolling, and couldn't be dismissed).
   This version is an explicit slide-out drawer: closed by default, opened only via
   the toggle button, and always dismissible (close button / backdrop click / Escape)
   - it can never overlap page content unless the coach has deliberately opened it. */
.coach-body {
  display: grid;
  gap: 20px;
  align-items: start;
}

.coach-main {
  min-width: 0;
}

.coach-notes-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 12, 0.45);
  z-index: 40;
}

.coach-notes-backdrop[hidden] {
  display: none;
}

.coach-notes-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(380px, 100vw);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  background: var(--surface-quiet);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(10, 14, 12, 0.25);
  z-index: 41;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.coach-notes-drawer.open {
  transform: translateX(0);
}

.coach-notes-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coach-notes-drawer textarea {
  min-height: 50vh;
}

.icon-button {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 4px 8px;
}

.plan-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
}

body[data-app="athlete"] #start-view.active {
  display: block;
}

body[data-app="athlete"] #plan-view.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
}

.athlete-shell main > .view {
  max-width: 1220px;
}

.role-cards,
.provider-grid,
.quality-list,
.capability-list,
.week-list,
.full-block {
  display: grid;
  gap: 12px;
}

.role-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.role-card {
  display: grid;
  gap: 10px;
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-quiet);
  color: var(--text);
  text-align: left;
}

.role-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.coach-login {
  min-height: 0;
}

.capability-list div,
.quality-list div,
.review-card,
.summary-box,
.adjustment-box,
.awaiting-box,
.delivery-log {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-quiet);
}

.capability-list div,
.quality-list div {
  display: grid;
  gap: 4px;
}

label {
  display: grid;
  gap: 7px;
  color: #2d2d28;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Minimal underlined form inputs (design-brief.md "Form") - no boxed/card fields,
   no drop shadows. A single bottom border on a transparent field reads as an
   underline rather than a boxed input; checkboxes/radios/range sliders are their
   own native controls and are excluded below, they don't get an underline. */
input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 10px 2px;
  background: transparent;
  color: var(--text);
}

textarea {
  min-height: 100px;
  border: 1px solid var(--line-strong);
  padding: 10px 12px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  min-height: 18px;
  border: 1px solid var(--line-strong);
}

input[type="range"] {
  border: none;
  padding: 0;
  background: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}

input.invalid,
select.invalid,
textarea.invalid {
  border-color: var(--danger);
  outline: none;
}

.field-grid,
.coach-summary,
.review-grid,
.pace-grid,
.zone-grid,
.dashboard-metrics,
.delivery-grid,
.plan-toolbar,
.slider-grid {
  display: grid;
  gap: 12px;
}

.field-grid,
.coach-summary,
.review-grid,
.dashboard-metrics,
.delivery-grid,
.slider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pace-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.zone-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 16px;
}

.plan-toolbar {
  /* Adaptive rather than a fixed 3-column template - the v4 engine controls added
     progressionMode/phaseIMode/mileageGuardrailOverrideKm alongside the original 3
     fields (5 total), so a fixed-width template sized for 3 would misalign once
     items wrap to a second row. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 16px;
}

.form-step {
  display: none;
}

.form-step.active {
  display: grid;
  gap: 16px;
}

.form-actions {
  justify-content: space-between;
  margin-top: 20px;
}

.form-error {
  min-height: 22px;
  margin-top: 12px;
  color: var(--danger);
  font-weight: 800;
}

.slider-grid label strong {
  color: var(--accent-dark);
  font-size: 1.05rem;
}

input[type="range"] {
  accent-color: var(--accent);
  padding-left: 0;
  padding-right: 0;
}

/* Solid filled, high-contrast, unambiguously clickable (design-brief.md "CTA") -
   .primary is black-filled rather than gold, reserving the gold accent for the
   handful of truly singular calls to action (see .cta-gold) rather than every
   primary button across the app; .secondary stays a plain outlined button, quieter
   than primary but still a real clickable control (the brief's "plain text link"
   guidance is written for a marketing page's one CTA + secondary link, not for an
   app with many distinct in-context actions like this one). */
.primary,
.secondary {
  min-height: 42px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.primary {
  border: 1px solid #0a0a0a;
  background: #0a0a0a;
  color: #fff;
}

.primary:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

.cta-gold {
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  color: #1a1200 !important;
}

.cta-gold:hover {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

.secondary {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
}

.secondary:hover {
  border-color: #0a0a0a;
  background: var(--surface-quiet);
}

.secondary.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.secondary.danger:hover {
  background: var(--danger);
  color: #fff;
}

.full-width {
  width: 100%;
}

.hidden {
  display: none !important;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.provider-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.provider-card {
  display: grid;
  gap: 10px;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-quiet);
}

.provider-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.provider-card.connected {
  border-color: #91cda9;
  background: var(--ok-soft);
}

.provider-card.blocked {
  border-color: #f0c37b;
  background: var(--warning-soft);
}

.provider-card.failed {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.provider-card p {
  margin-bottom: 0;
  font-size: 0.86rem;
}

.provider-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: auto;
}

.error-detail {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
}

.setup-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #f8fbfa;
}

.setup-panel ol {
  margin: 10px 0 0;
  padding-left: 20px;
}

.setup-panel li + li {
  margin-top: 6px;
}

/* intervals.icu onboarding steps (Batch D) */
.setup-steps {
  margin: 12px 0 0;
  padding-left: 22px;
}

.setup-steps li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.setup-steps li strong {
  color: var(--ink);
}

/* Athletes monitoring hub cards (Batch C) */
.athlete-monitor-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}

.athlete-monitor-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 8px 0;
  font-size: 0.9rem;
}

.athlete-monitor-metrics strong {
  color: var(--ink);
}

/* Review-tab prose summary (Batch A) */
.coach-summary-prose p {
  margin: 0 0 10px;
  line-height: 1.55;
}

/* Zone split vs target table (Batch B) */
.zone-out-of-range {
  color: var(--danger, #b23b3b);
  font-weight: 600;
}

.zone-total-row td {
  border-top: 2px solid var(--line);
  font-weight: 600;
}

.syncing-headline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sync-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  /* Exempted from the sharp-corners reset - a loading spinner is a functional
     circular control, not a card/panel/input the "no rounding" rule is aimed at. */
  border-radius: 50% !important;
  display: inline-block;
  animation: sync-spin 0.8s linear infinite;
}

@keyframes sync-spin {
  to { transform: rotate(360deg); }
}

.upload-zone {
  min-height: 112px;
  place-items: center;
  border: 1px dashed #9eb2aa;
  border-radius: 8px;
  padding: 18px;
  background: #f8fbf9;
  text-align: center;
}

.upload-zone input {
  display: none;
}

.upload-zone span {
  font-size: 1rem;
}

.delivery-impact,
.submit-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-quiet);
  color: var(--muted);
  line-height: 1.5;
}

.submit-box h3 {
  color: var(--text);
}

.coach-login-form {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
}

.coach-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.tab-button {
  min-height: 40px;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 9px 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.tab-button.active {
  border-bottom-color: var(--accent);
  color: var(--accent-dark);
}

.coach-tab {
  display: none;
}

.coach-tab.active {
  display: block;
}

.athlete-card {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-quiet);
  color: var(--text);
  text-align: left;
}

.athlete-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Item 10: the two roster groups (Active / Awaiting plan approval) in the
   Athletes nav - see renderCoach()'s athleteCard grouping in app.js. */
.athlete-group-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  margin: 12px 0 6px;
}

.athlete-group-label:first-child {
  margin-top: 0;
}

.athlete-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.82rem;
}

.summary-metric,
.pace-card,
.zone-card,
.dashboard-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-quiet);
}

.summary-metric span,
.pace-card span,
.zone-card span,
.dashboard-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.summary-metric strong,
.pace-card strong,
.zone-card strong,
.dashboard-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.08rem;
}

.week-card,
.block-week {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-quiet);
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.analysis-table th,
.analysis-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.analysis-table th {
  color: var(--muted);
  font-weight: 700;
}

.injury-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.injury-row:last-child {
  border-bottom: none;
}

.week-card summary,
.block-week summary {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  font-weight: 900;
}

.week-card[open] summary,
.block-week[open] summary {
  border-bottom: 1px solid var(--line);
}

/* Rule 9.2/9.3 coach-flagging checkboxes (recovery week / back-to-back weekend) -
   sits between the week summary and the day list, only visible once a week card
   is expanded. */
.week-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 14px 12px;
}

.week-flags .checkbox-row {
  margin: 0;
}

.week-days,
.block-days {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.workout-row {
  display: grid;
  grid-template-columns: 78px minmax(170px, 1fr) 90px 130px 42px;
  gap: 9px;
  align-items: center;
}

.workout-row input,
.workout-row select {
  min-height: 38px;
}

.workout-row-header {
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.download-fit-btn {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  margin: -2px 0 6px;
  cursor: pointer;
}

.estimate-readout {
  font-size: 13px;
  color: var(--muted);
  padding: 0 4px;
}

.redelivery-warning {
  font-size: 12px;
  color: var(--danger, #b3261e);
  background: var(--danger-soft, #fdecea);
  border-radius: 6px;
  padding: 6px 10px;
  margin: -4px 0 8px;
}

.add-session-btn {
  justify-self: start;
  font-size: 12px;
  padding: 6px 12px;
  margin-top: 4px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.workout-description {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 8px 12px;
  margin: -2px 0 6px;
}

.field-hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  margin-top: 2px;
}

.delete-workout {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
}

.session-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.session-card.complete {
  border-color: #91cda9;
  background: var(--ok-soft);
}

.session-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.feedback-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

/* Item 8 (Sam's fix): while no session this week has a real linked activity,
   hide the actual feedback form (the "Completed workout" picker would otherwise
   show an empty/misleading dropdown) and show only #feedbackGateNote explaining
   why. #feedbackGateNote is empty (and so collapses) once at least one session
   is linked, so this rule never hides the form once feedback is actually usable. */
.feedback-panel.no-linked-sessions label,
.feedback-panel.no-linked-sessions #submitFeedback,
.feedback-panel.no-linked-sessions #adjustmentBox {
  display: none;
}

.workout-link-select {
  margin-top: 8px;
  width: 100%;
}

/* Task #118: the athlete-facing quality-session check-in prompt - deliberately
   styled to stand out from the plain dashboard-metrics cards below it (accent
   border + tinted background, same family as .role-card:hover) since this is a
   time-sensitive ask (Sam wants feedback on a specific just-completed session),
   not just another static metric. */
.checkin-prompt {
  display: grid;
  gap: 12px;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 16px;
  background: var(--accent-soft);
  margin-bottom: 18px;
}

.checkin-prompt h3 {
  margin: 0;
}

.adjustment-box.warning {
  border-color: #f0c37b;
  background: var(--warning-soft);
  color: #684000;
}

.adjustment-box.danger {
  border-color: #ffb4aa;
  background: var(--danger-soft);
  color: var(--danger);
}

.locked-panel {
  display: none;
}

.locked-panel.active {
  display: block;
}

#coachWorkspace.locked {
  display: none;
}

@media (max-width: 1180px) {
  .login-grid,
  .intake-layout,
  .coach-grid,
  .plan-layout,
  body[data-app="athlete"] #plan-view.active {
    grid-template-columns: 1fr;
  }

  .provider-grid,
  .pace-grid,
  .zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fixed header goes from wordmark-left/nav-right to a wrapped two-row layout once
   there isn't room for both on one line, rather than letting nav links collide
   with the wordmark or run off-screen. */
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-height);
    padding: 12px 16px;
  }

  .nav-list {
    flex-wrap: wrap;
  }

  main {
    padding-top: calc(var(--header-height) + 64px);
  }
}

/* This width band (roughly "browser window split in half" on a normal laptop/
   monitor) fell between the two breakpoints above and below, so the multi-column
   grids (review cards, pace cards, plan-editor toolbar, etc.) kept trying to lay out
   2-3 columns in not enough space and visibly broke. Collapsing them to a single
   column here, and stacking the coach-notes side panel under the main content
   instead of squeezing it into a sliver on the side. */
@media (max-width: 980px) {
  .coach-notes-drawer {
    width: 100vw;
  }

  .coach-summary,
  .review-grid,
  .pace-grid,
  .zone-grid,
  .dashboard-metrics,
  .delivery-grid,
  .plan-toolbar,
  .field-grid,
  .slider-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  main {
    padding: 16px;
    padding-top: calc(var(--header-height) + 76px);
  }

  .topbar,
  .panel-header,
  .session-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-list,
  .role-cards,
  .field-grid,
  .slider-grid,
  .provider-grid,
  .coach-summary,
  .review-grid,
  .pace-grid,
  .zone-grid,
  .dashboard-metrics,
  .delivery-grid,
  .plan-toolbar,
  .week-card summary,
  .block-week summary,
  .workout-row,
  .coach-login-form {
    grid-template-columns: 1fr;
  }
}

/* G10 (Sam): dated coach-note entries, newest first, inside the notes drawer. */
.coach-note-log {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  overflow-y: auto;
  max-height: 55vh;
}

.coach-note-entry {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.coach-note-entry p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

/* G2 (Sam): day-move controls - on the coach Athletes cards and on the athlete's
   own Current plan session cards. */
.day-move-panel {
  margin-top: 8px;
}

.day-move-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  flex-wrap: wrap;
}

.day-move-label {
  flex: 1 1 auto;
  min-width: 0;
}

.athlete-day-move {
  margin-top: 8px;
}