/* Family Meals: design tokens and base styles.
   Tokens: docs/design-system/design-tokens.md (the only palette; copy changes there first).
   Themes: docs/modules/theme-engine.md §3. Layout and targets: docs/design-system/ui-ux-specification.md.
   Breakpoints (custom properties cannot be used in media queries): small < 640px, medium 640px–1024px, large > 1024px. */

/* ==========================================================================
   1. Color tokens: light (default)
   ========================================================================== */
:root {
  --color-bg-canvas: #FAF7F2;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F3ECE1;
  --color-bg-overlay: rgba(42, 37, 33, 0.6);

  --color-text-main: #2A2521;
  --color-text-muted: #6E645C;
  --color-text-inverse: #FAF7F2;

  --color-primary: #2D4A3E;
  --color-primary-hover: #22382F;
  --color-primary-subtle: #E8EFEA;

  --color-accent: #C85A32;
  --color-accent-hover: #B04B26;
  --color-accent-subtle: #FAEEE8;

  --color-border: #E4DCD0;
  --color-border-focus: #2D4A3E;

  --color-success: #2E6B4A;
  --color-warning: #B8731F;
  --color-error: #B33927;

  color-scheme: light;
}

/* ==========================================================================
   1b. Color tokens: dark, chosen explicitly
   ========================================================================== */
[data-theme="dark"] {
  --color-bg-canvas: #191614;
  --color-bg-surface: #24201D;
  --color-bg-subtle: #302A25;
  --color-bg-overlay: rgba(0, 0, 0, 0.85);

  --color-text-main: #F5EFE9;
  --color-text-muted: #ABA096;
  --color-text-inverse: #191614;

  --color-primary: #6B9683;
  --color-primary-hover: #7FA996;
  --color-primary-subtle: #1F2D26;

  --color-accent: #E27952;
  --color-accent-hover: #F08E67;
  --color-accent-subtle: #3D2218;

  --color-border: #3D352F;
  --color-border-focus: #6B9683;

  --color-success: #529B72;
  --color-warning: #E0963A;
  --color-error: #E05341;

  color-scheme: dark;
}

/* ==========================================================================
   1c. Color tokens: dark, when the theme is auto (or unset) and the system prefers dark
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: #191614;
    --color-bg-surface: #24201D;
    --color-bg-subtle: #302A25;
    --color-bg-overlay: rgba(0, 0, 0, 0.85);

    --color-text-main: #F5EFE9;
    --color-text-muted: #ABA096;
    --color-text-inverse: #191614;

    --color-primary: #6B9683;
    --color-primary-hover: #7FA996;
    --color-primary-subtle: #1F2D26;

    --color-accent: #E27952;
    --color-accent-hover: #F08E67;
    --color-accent-subtle: #3D2218;

    --color-border: #3D352F;
    --color-border-focus: #6B9683;

    --color-success: #529B72;
    --color-warning: #E0963A;
    --color-error: #E05341;

    color-scheme: dark;
  }
}

/* ==========================================================================
   2. Typography tokens
   ========================================================================== */
:root {
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5625rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-timer: 3.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-base: 1.55;
  --line-height-relaxed: 1.75;
}

/* ==========================================================================
   3. Spacing and sizing tokens
   ========================================================================== */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --touch-target-min: 48px;
  --touch-target-lg: 56px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(42, 37, 33, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 37, 33, 0.08);
  --shadow-lg: 0 10px 25px rgba(42, 37, 33, 0.12);
  --shadow-focus: 0 0 0 3px rgba(45, 74, 62, 0.35);

  --transition-fast: 150ms ease-out;
  --transition-base: 220ms ease-in-out;
}

/* ==========================================================================
   4. Base elements
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-canvas);
  color: var(--color-text-main);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-main);
}

h1 {
  font-size: var(--font-size-2xl);
  margin: var(--space-8) 0 var(--space-4);
}

h2 {
  font-size: var(--font-size-xl);
  margin: var(--space-8) 0 var(--space-3);
}

h3 {
  font-size: var(--font-size-lg);
  margin: var(--space-6) 0 var(--space-2);
}

p,
ul,
ol {
  margin: 0 0 var(--space-4);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

button {
  font: inherit;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

/* Focus: a 2px solid ring plus the focus shadow (ui-ux-specification.md §4). */
:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* Quantities and timers do not jump while they change (ui-ux-specification.md §4). */
.ingredient-qty,
cook-timer {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Layout and chrome
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-6);
  }
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  color: var(--color-text-inverse);
}

.site-header {
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Header layout (information-architecture.md §2). The theme toggle has a fixed place at the end of the first row;
   the controls that can appear late live in .header-late, which takes the space between (640px and up) or a second
   row (phones), so the toggle never moves when one appears. */
.site-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name theme"
    "late late";
  align-items: center;
  column-gap: var(--space-4);
  min-height: var(--space-16);
  padding-block: var(--space-2);
}

theme-toggle {
  grid-area: theme;
}

.header-late {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  grid-area: late;
}

/* The empty offline region stays in the accessibility tree (so the pill is announced) but out of the flex flow,
   so it adds no gap before the other controls. */
offline-status:not(:has(.offline-pill)) {
  position: absolute;
}

/* On a phone the second row only takes space once a control is showing. */
.header-late:has(.offline-pill, button) {
  padding-top: var(--space-2);
}

@media (min-width: 640px) {
  .site-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name late theme";
  }

  .header-late {
    justify-content: flex-end;
  }

  .header-late:has(.offline-pill, button) {
    padding-top: 0;
  }
}

.site-name {
  grid-area: name;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-text-main);
  font-family: var(--font-family-serif);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.site-name:hover {
  color: var(--color-primary);
}

/* Header controls (information-architecture.md §2). The box is reserved before the component
   upgrades, so the header does not shift when the button appears. With JavaScript off it stays empty. */
theme-toggle {
  display: inline-flex;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-main);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle-button:hover {
  background: var(--color-bg-subtle);
  color: var(--color-primary);
}

timer-alerts:empty,
pwa-install:empty {
  display: none;
}

/* Offline pill (service-worker-pwa.md §3.3). The empty status region stays rendered (it has no width), so a
   screen reader is already watching it when the pill is added. */
.offline-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-main);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  animation: offline-pill-in var(--transition-base) both;
}

@keyframes offline-pill-in {
  from {
    opacity: 0;
  }
}

.header-button {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.header-button:hover {
  background: var(--color-primary-subtle);
}

.site-footer {
  margin-top: var(--space-12);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.site-footer p {
  margin: 0;
}

/* The page URL prints on paper only (print.css shows it). */
.print-url {
  display: none;
}

/* ==========================================================================
   6. Category and tag pills (ui-ux-specification.md §3: 48px tall, 8px wrap)
   ========================================================================== */
.term-row {
  margin-bottom: var(--space-4);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-main);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.pill:hover {
  border-color: var(--color-primary);
  color: var(--color-text-main);
}

.pill[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Search box (recipe-search.md §4, states.md §2). It exists only after upgrade. Its height is reserved only
   while scripting is on, so the pills and cards do not jump when it appears, and JS-off pages have no gap. */
recipe-search {
  display: block;
}

@media (scripting: enabled) {
  recipe-search {
    min-height: 5.5rem;
    margin-bottom: var(--space-4);
  }
}

.search-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.search-input {
  width: 100%;
  max-width: 40rem;
  min-height: 52px;
  padding: 0 var(--space-4);
  /* A field's edge needs 3:1 against the page (WCAG 1.4.11); --color-border is too faint for that. */
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-main);
  font: inherit;
  font-size: var(--font-size-lg);
}

.search-input:focus-visible {
  border-color: var(--color-border-focus);
}

.search-unavailable {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  color: var(--color-text-muted);
}

.search-status:empty {
  display: none;
}

/* ==========================================================================
   7. Catalogue grid and cards (screens/catalogue.md §2–§3)
   ========================================================================== */
.recipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .recipe-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.recipe-card {
  display: flex;
}

.recipe-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-main);
  text-decoration: none;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.recipe-card-link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: var(--color-text-main);
}

/* The 4:3 box is reserved before the image loads, so cards do not shift (CLS 0). */
.recipe-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-bg-subtle);
}

.card-placeholder {
  background: linear-gradient(135deg, var(--color-bg-subtle), var(--color-primary-subtle));
}

.recipe-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.recipe-card-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xl);
}

.recipe-card-body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.empty-state {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

/* ==========================================================================
   8. Recipe page (screens/recipe.md §1–§3)
   ========================================================================== */
/* `hidden` always wins, so the Cook buttons stay hidden until <cook-mode> upgrades. */
[hidden] {
  display: none !important;
}

cook-mode {
  display: block;
}

/* Timers are empty until the component draws its controls. */
cook-timer:not(:defined) {
  display: none;
}

.recipe-hero {
  margin: var(--space-6) 0 0;
}

.recipe-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.recipe-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.recipe-title-row h1 {
  margin-right: auto;
}

.cook-start {
  min-height: var(--touch-target-lg);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.cook-start:hover {
  background: var(--color-primary-hover);
}

.recipe-description {
  max-width: 70ch;
  font-size: var(--font-size-lg);
}

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin: 0 0 var(--space-4);
}

.recipe-meta dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.recipe-meta dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.recipe-terms {
  margin-bottom: var(--space-4);
}

.recipe-columns {
  display: block;
}

@media (min-width: 640px) {
  .recipe-columns {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    gap: var(--space-8);
    align-items: start;
  }
}

.ingredient-list,
.recipe-tools ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ingredient-item,
.recipe-tools li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.ingredient-qty {
  font-weight: var(--font-weight-semibold);
}

.scaler-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* The stepper does nothing until the component upgrades, so its buttons stay hidden until then. */
ingredient-scaler:not(:defined) .btn-stepper {
  display: none;
}

.btn-stepper {
  min-width: 52px;
  min-height: 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-main);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.btn-stepper:hover:not(:disabled) {
  background: var(--color-bg-subtle);
}

.btn-stepper:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.servings-display .count {
  font-variant-numeric: tabular-nums;
}

/* Shown only while the servings differ from the recipe's (ingredient-scaler.md §2.3). The accent's hover shade is
   used for text: plain --color-accent on the light canvas is under 4.5:1. */
.scaled-note {
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
  color: var(--color-accent-hover);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Steps are numbered cards, at least 64px tall, 16px apart (ui-ux-specification.md §3). */
.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  min-height: var(--space-16);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.step-title {
  margin: 0 0 var(--space-2);
}

.markdown > :last-child {
  margin-bottom: 0;
}

.note-body {
  margin-bottom: var(--space-4);
}

.nutrition-table {
  width: 100%;
  max-width: 28rem;
  border-collapse: collapse;
}

.nutrition-table th,
.nutrition-table td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.nutrition-table th {
  font-weight: var(--font-weight-regular);
  text-align: left;
}

.nutrition-table td {
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

.recipe-source {
  margin-top: var(--space-8);
}

/* Phone: a sticky bar with Ingredients and Cook, each at least 56px tall. */
.recipe-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: var(--space-3);
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}

.recipe-bar > * {
  flex: 1;
}

.recipe-bar-ingredients {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* Keep focused elements and anchor targets clear of the sticky bar. */
@media (max-width: 639px) {
  html {
    scroll-padding-bottom: 6rem;
  }
}

@media (min-width: 640px) {
  .recipe-bar {
    display: none;
  }
}

/* ==========================================================================
   9. Cook mode (screens/cook-mode.md, cook-mode.md §4)
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The cook bar is rendered last inside <cook-mode>; flex order puts it on top, where it sticks. */
cook-mode[active] {
  display: flex;
  flex-direction: column;
}

cook-mode[active] > .cook-bar {
  order: -1;
}

.cook-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-height: 5.25rem; /* 56px buttons plus padding; the pinned column below sits under this height */
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}

.cook-progress {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.cook-step-count {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.cook-progress-bar {
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  appearance: none;
}

.cook-progress-bar::-webkit-progress-bar {
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
}

.cook-progress-bar::-webkit-progress-value {
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.cook-progress-bar::-moz-progress-bar {
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.cook-bar-button {
  min-height: var(--touch-target-lg);
  padding: 0 var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}

.cook-exit {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.cook-exit:hover {
  background: var(--color-primary-hover);
}

:root:has(body.cook-mode-active) {
  scroll-padding-top: 7rem;
}

.cook-mode-active .site-header,
.cook-mode-active .site-footer,
.cook-mode-active .recipe-bar,
.cook-mode-active .cook-start {
  display: none;
}

.cook-mode-active .ingredient-item {
  font-size: var(--font-size-lg);
}

/* Ingredients stay reachable (screens/cook-mode.md §2, cook-mode.md §4 "Ingredients panel"). */
@media (max-width: 639px) {
  /* The step count and progress get their own row; the buttons share the next. */
  .cook-progress {
    flex-basis: 100%;
  }

  .cook-bar-button {
    flex: 1;
    padding: 0 var(--space-3);
  }

  cook-mode[ingredients-open] #ingredients {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--color-bg-canvas);
  }

  .ingredients-close {
    display: block;
    width: 100%;
    margin-bottom: var(--space-2);
  }
}

@media (min-width: 640px) {
  .cook-ingredients {
    display: none;
  }

  /* The ingredient column stays pinned below the cook bar while the steps scroll. */
  .cook-mode-active .recipe-aside {
    position: sticky;
    top: calc(5.25rem + var(--space-4));
    max-height: calc(100vh - 5.25rem - var(--space-8));
    overflow-y: auto;
  }
}

.cook-mode-active .step {
  cursor: pointer;
}

.cook-mode-active .step:focus {
  outline: none;
}

.cook-mode-active .step:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* The current step: a high-contrast border and larger text (ui-ux-specification.md §3). */
.cook-mode-active .step[aria-current="step"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.cook-mode-active .step[aria-current="step"] .step-body {
  font-size: var(--font-size-xl);
}

.cook-mode-active .step.is-done {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

.cook-mode-active .step.is-done::before {
  content: "✓";
  color: var(--color-success);
}

/* ==========================================================================
   10. Step timers (cook-timer.md §2.3, ui-ux-specification.md §3)
   ========================================================================== */
cook-timer {
  display: block;
  margin-top: var(--space-3);
}

.timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-canvas);
}

/* The readout keeps the main text color in every state, for 7:1 contrast (ui-ux-specification.md §4). */
.timer-readout {
  min-width: 5ch;
  color: var(--color-text-main);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.timer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.timer-button {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.timer-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

cook-timer[state="running"] .timer {
  border-color: var(--color-primary);
}

cook-timer[state="finished"] .timer {
  border: 2px solid var(--color-accent);
  background: var(--color-accent-subtle);
}

/* Inverse text on --color-accent is under 4.5:1 in the light theme; the hover shade passes in both themes. */
cook-timer[state="finished"] .timer-primary {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  color: var(--color-text-inverse);
}

/* In cook mode a running or finished timer reads from across the kitchen. */
.cook-mode-active cook-timer:is([state="running"], [state="finished"]) .timer-readout {
  font-size: var(--font-size-timer);
  line-height: 1;
}

/* ==========================================================================
   11. Reduced motion (ui-ux-specification.md §4)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}