:root {
  --text: #1b1f23;
  --muted: #5b5146;
  --accent: #9c4a1a;
  --accent-strong: #7d3a13;
  --border: #8a7a66;
  --error: #a4161a;
  --panel: #fffcf5;
  --panel-edge: rgba(156, 74, 26, 0.16);
  --sans: 'Avenir Next', Avenir, 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  line-height: 1.5;
  background:
    radial-gradient(circle at top left, rgba(244, 162, 97, 0.35), transparent 28%),
    radial-gradient(circle at top right, rgba(98, 182, 203, 0.22), transparent 24%),
    linear-gradient(180deg, #fefae0 0%, #faedcd 50%, #f8f4ec 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* Hero */

.hero {
  padding: 16px 0 24px;
}

.kicker {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 700;
}

.hero-title {
  max-width: 20ch;
  text-wrap: balance;
  margin: 8px 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
}

.hero-copy {
  max-width: 44rem;
  color: var(--muted);
  text-wrap: pretty; /* no single-word last line */
}

/* Layout */

.layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 32px;
  }

  /* Both panels end on the same line. */
  .form-panel {
    align-self: stretch;
  }

  .results {
    position: sticky;
    top: 24px;
  }
}

.panel {
  border-radius: 24px;
  border: 1px solid var(--panel-edge);
  box-shadow: 0 20px 40px rgba(27, 73, 101, 0.08);
  background: var(--panel);
  padding: 28px;
}

@media (max-width: 599px) {
  .panel {
    padding: 20px 16px;
  }

  .fields {
    gap: 16px;
  }

  .slider {
    height: 28px;
    margin-top: 2px;
  }
}

.panel-title,
.result-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
}

.panel-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.units-shortcut {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.link-button {
  min-height: 24px;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}

.link-button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

/* Form */

.fields {
  display: grid;
  gap: 20px;
  margin: 24px 0;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.input-wrap:hover {
  border-color: var(--text);
}

.input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  /* Invisible normally; becomes the focus ring in forced-colors (High Contrast) mode. */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.field input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  border: none;
  border-radius: 8px;
  background: transparent;
}

.field input:focus {
  outline: none;
}

.unit {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--muted);
  border-left: 1px solid rgba(138, 122, 102, 0.35);
}

.hint {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--muted);
}

.hint-extra {
  color: var(--text);
}

.field-error {
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--error);
}

.field-invalid .input-wrap {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.field-invalid .input-wrap:focus-within {
  box-shadow: 0 0 0 3px var(--error);
}

.button-secondary {
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-strong);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
}

.button-secondary:hover {
  background: rgba(156, 74, 26, 0.08);
}

.button-secondary:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

/* Segmented controls (mode, units): real radio buttons styled as pills */

.segmented {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.segmented-legend {
  padding: 0;
  margin: 0 0 6px;
  font-weight: 600;
}

.segmented-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
}

.segmented-option {
  position: relative;
}

.segmented-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  color: var(--muted);
}

.segmented-option:hover span {
  color: var(--text);
  background: rgba(156, 74, 26, 0.08);
}

.segmented-option input:checked + span {
  color: #fff;
  background: var(--accent-strong);
}

.segmented-option input:focus-visible + span {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .segmented-option input:checked + span {
    border-color: CanvasText;
  }
}

/* Presets (loaf mode) */

.presets {
  margin-top: 20px;
}

.preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preset {
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-strong);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.preset:hover {
  background: rgba(156, 74, 26, 0.08);
}

.preset[aria-pressed='true'] {
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* A visible mark that doesn't rely on colour (and survives High Contrast mode).
   Every chip reserves its space so pressing one doesn't change its width. The
   empty alt text keeps screen readers from reading it; aria-pressed says it. */
.preset::before {
  content: '\2713  ';
  content: '\2713  ' / '';
  visibility: hidden;
}

.preset[aria-pressed='true']::before {
  visibility: visible;
}

.preset:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .preset[aria-pressed='true'] {
    border: 3px solid CanvasText;
  }

  .preset:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 3px;
  }
}

.preset-note {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Phones: one swipeable row of presets instead of three rows of chips. */
@media (max-width: 599px) {
  .preset-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }

  .preset {
    flex: none;
    scroll-snap-align: start;
  }
}

.grams-note {
  font-size: 0.875rem;
  color: var(--muted);
}

.flour-callout .grams-note {
  color: inherit;
}

@media (max-width: 359px) {
  .segmented-option span {
    font-size: 0.9375rem;
  }

  /* "Metric" / "US" fit on one line; the legend already says these are units. */
  .segmented-detail {
    display: none;
  }
}

/* Phones: hide the explanatory hint text to shorten the form. It stays in the
   accessibility tree (aria-describedby), and the live extras stay visible. */
@media (max-width: 599px) {
  .hint-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Sliders: drag-only extras for the percentages (the text box is the precise control) */

.slider {
  display: block;
  width: 100%;
  height: 32px;
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Vertical swipes scroll the page instead of moving the thumb. */
  touch-action: pan-y;
}

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #d9cbb8;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #d9cbb8;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

@media (forced-colors: active) {
  .slider {
    -webkit-appearance: auto;
    appearance: auto;
  }
}

/* Results */

.result-title {
  margin-top: 4px;
}

.summary {
  margin-top: 4px;
  font-size: 1.125rem;
  color: var(--muted);
}

.flour-callout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 16px;
  color: #fff;
  background: var(--accent-strong);
}

.flour-callout-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.flour-callout .num {
  font-size: 2rem;
}

.flour-callout-note {
  flex-basis: 100%;
  font-size: 0.9375rem;
}

.steps {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  align-items: start; /* each card only as tall as its contents */
}

@media (min-width: 600px) {
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.step,
.totals {
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(250, 237, 205, 0.55);
}

.totals {
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--panel-edge);
}

.step h3,
.totals h3 {
  margin: 0 0 8px;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.measures {
  display: grid;
  gap: 4px;
}

.totals .measures {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.measure {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.totals .measure {
  flex-direction: column;
  gap: 0;
}

.measure dt {
  color: var(--muted);
}

.measure dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.num {
  font-size: 1.5rem;
  font-weight: 700;
}

.stale-note {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fdeded;
  color: var(--text);
}

.stale-note a {
  color: var(--error);
  font-weight: 600;
}

.is-stale .recipe-body {
  opacity: 0.5;
}

/* Phones: keep the result in view while typing. */
.mobile-summary {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #fff;
  background: var(--accent-strong);
  text-decoration: none;
  box-shadow: 0 -4px 16px rgba(27, 31, 35, 0.15);
}

.mobile-summary.is-stale {
  background: var(--muted);
}

.mobile-summary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

@media (max-width: 899px) {
  .page {
    padding-bottom: 96px;
  }

  /* Keep focused fields clear of the fixed summary bar. */
  html {
    scroll-padding-bottom: 128px;
  }
}

@media (min-width: 900px) {
  .mobile-summary {
    display: none;
  }
}

/* Chart */

.chart {
  margin-top: 24px;
}

.chart svg {
  display: block;
  width: 100%;
  max-width: 420px;
  max-height: 300px;
  margin: 0 auto;
}

.chart text {
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
}

/* Labels would render below ~11px here; the legend carries the values. */
@media (max-width: 599px) {
  .chart text {
    display: none;
  }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 0.9375rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .button-secondary,
  .input-wrap {
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  }

  .recipe-body {
    transition: opacity 0.2s;
  }
}