/* pizzacalculator.nl - base and retro style. css/modern.css adds the modern style. */
/* ===== Theme tokens ===== */
:root {
  --red: #D7262E;
  --orange: #F26B21;
  --yellow: #FDB913;
  --teal: #3a9e9a;

  /* Dark (default) */
  --bg: #1a1411;
  --bg-alt: #241b16;
  --panel: #2b211b;
  --text: #f6ead2;
  --muted: #bfae94;
  --border: #4a3a2f;
  --shadow: #000;
  --accent-text: var(--yellow);

  /* Width of the page content, header and footer. */
  --page-width: 1320px;
}

:root[data-theme="light"] {
  --bg: #f6ead2;
  --bg-alt: #efdfc0;
  --panel: #fff7e8;
  --text: #2a1c14;
  --muted: #6e5a48;
  --border: #2a1c14;
  --shadow: #2a1c14;
  --accent-text: var(--red);
}

/* ===== Base ===== */
* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Space Mono", ui-monospace, monospace;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .25s, color .25s;
}

a { color: var(--orange); }

h1, h2, h3, .logo, .btn, nav a, legend, caption {
  font-family: "Bungee", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
}

.container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 2rem 16px 4rem;
  flex: 1;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===== Retro triple stripe ===== */
.stripes { display: flex; flex-direction: column; }
.stripes span { height: 6px; }
.stripes span:nth-child(1) { background: var(--red); }
.stripes span:nth-child(2) { background: var(--orange); }
.stripes span:nth-child(3) { background: var(--yellow); }

/* ===== Header ===== */
.site-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  max-width: var(--page-width);
  margin: 0 auto;
  width: 100%;
  padding: 1.25rem 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.logo-mark { width: 56px; height: 56px; flex: none; transition: transform .2s; }
.logo:hover .logo-mark { transform: rotate(-8deg); }
.logo-word {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--red);
}
.logo-word span { color: var(--orange); }
.logo-word .logo-tld { color: inherit; }
.logo-tag {
  display: block;
  margin-top: .35rem;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: none;
}
:root[data-theme="light"] .logo-word { color: var(--red); text-shadow: 3px 3px 0 var(--yellow); }
@media (max-width: 520px) {
  .logo-mark { width: 44px; height: 44px; }
  .logo-word { font-size: 1.45rem; }
  .logo-tag { display: none; }
}

/* Weergave menu: a button that opens a small panel with style and colour options. */
.header-tools { display: flex; align-items: center; }
.display-menu { position: relative; }
.display-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 38px;
  padding: 0 .7rem 0 .8rem;
  background: var(--panel);
  color: var(--yellow);
  border: 2px solid var(--border);
  border-radius: 999px;
  font-family: "Bungee", Impact, sans-serif;
  font-size: .72rem;
  letter-spacing: .03em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  white-space: nowrap;
}
.display-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.display-button svg { width: 18px; height: 18px; flex: none; display: block; }
.display-button .display-chevron { width: 14px; height: 14px; transition: transform .15s; }
.display-button[aria-expanded="true"] .display-chevron { transform: rotate(180deg); }
:root[data-theme="light"] .display-button { color: var(--red); }

.display-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  width: 14rem;
  display: grid;
  gap: .75rem;
  padding: .85rem;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.display-panel[hidden] { display: none; }
.display-panel legend {
  margin: 0 0 .35rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.display-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
}
.display-option:hover { background: var(--bg); }
.display-option input { accent-color: var(--red); margin: 0; }
.display-option small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.display-option:has(input:checked) { background: var(--bg); }

/* ===== Nav and panels ===== */
nav { display: flex; align-items: center; justify-content: center; gap: .4rem 1.1rem; flex-wrap: wrap; }
nav a {
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  padding-bottom: 2px;
  border-bottom: 3px solid transparent;
}
nav a:hover, nav a.active { border-bottom-color: var(--orange); }

.panel {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 6px 6px 0 var(--shadow);
}
.panel h2 { margin-top: 0; color: var(--orange); font-size: 1.2rem; }

/* ===== Headings ===== */
.section-title, .page-title { color: var(--text); }
.section-title {
  font-size: 1.5rem;
  border-left: 8px solid var(--orange);
  padding-left: .75rem;
}
.page-title { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; margin: .5rem 0; }
.page-title span { color: var(--orange); }
.lead { color: var(--muted); margin-top: 0; }
.hint { color: var(--muted); font-size: .85rem; }
.eyebrow { margin: 0; color: var(--muted); text-transform: uppercase; font-size: .8rem; }

/* ===== Forms ===== */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="datetime-local"], select, textarea {
  font: inherit;
  width: 100%;
  padding: .55rem .7rem;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 6px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 1px;
}

.form { display: grid; gap: 1rem; }
.form > .btn { justify-self: start; }
fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
fieldset.panel { padding: 1.5rem; display: grid; gap: 1rem; }
legend { color: var(--orange); font-size: 1.1rem; padding: 0; margin-bottom: .5rem; }
fieldset.panel legend { float: left; width: 100%; margin-bottom: 0; }

/* ===== Calculator intro (hero) =====
   Wide: explanation on the left, the three steps stacked on the right.
   Narrower: the steps in a row below; phones: everything stacked. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin: .5rem 0 .5rem;
  padding: 2rem 2.25rem;
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--shadow);
}
.hero-badge {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #2a1c14;
  font-family: "Bungee", Impact, sans-serif;
  font-size: .72rem;
  letter-spacing: .04em;
}
.hero-title { font-size: clamp(2.3rem, 5.5vw, 3.8rem); margin: 0 0 .9rem; }
.hero-lead { margin: 0 0 .75rem; color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 62ch; }
.hero-points {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border: 2px dashed var(--border);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.hero-points li::before { content: "✓"; color: var(--orange); font-weight: 700; }
.hero-steps {
  list-style: none;
  counter-reset: hero-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.hero-steps li {
  counter-increment: hero-step;
  position: relative;
  display: grid;
  gap: .15rem;
  padding: .85rem 1rem .85rem 3.4rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
}
.hero-steps li::before {
  content: counter(hero-step);
  position: absolute;
  left: .9rem;
  top: .85rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: "Bungee", Impact, sans-serif;
  font-size: .85rem;
  box-shadow: 2px 2px 0 var(--orange);
}
.hero-steps strong { font-size: .95rem; }
.hero-steps span { color: var(--muted); font-size: .85rem; line-height: 1.5; }
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hero { padding: 1.4rem 1.2rem; gap: 1.1rem; }
  .hero-steps { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: keep the intro short so the calculator comes into view sooner. The
   second paragraph and the step details repeat what the steps' titles say. */
@media (max-width: 520px) {
  .hero-lead { font-size: .92rem; line-height: 1.55; }
  .hero-lead + .hero-lead { display: none; }
  .hero-points { gap: .35rem; margin-top: .8rem; }
  .hero-points li { padding: .2rem .55rem; font-size: .72rem; }
  .hero-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .hero-steps li { padding: .6rem .4rem; text-align: center; justify-items: center; gap: .35rem; }
  .hero-steps li::before { position: static; }
  .hero-steps strong { font-size: .78rem; line-height: 1.25; }
  .hero-steps span { display: none; }
}

/* ===== Recipe and guide pages ===== */
.breadcrumbs { display: block; margin: 0 0 1rem; font-size: .82rem; color: var(--muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .45rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .45rem; }
.breadcrumbs a {
  font-family: inherit;
  font-size: inherit;
  color: var(--muted);
  border-bottom: none;
  padding: 0;
  text-decoration: underline;
}
.guide { max-width: 860px; }
.guide > section { margin-top: 2rem; }
.guide .section-title { margin: 0 0 .75rem; }
.guide p { line-height: 1.7; }
.guide-list { margin: 0; padding-left: 1.2rem; }
.guide-list li { margin-bottom: .4rem; line-height: 1.6; }
.guide-table-wrap { overflow-x: auto; }
.guide-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--panel); }
.guide-table th, .guide-table td { padding: .55rem .8rem; text-align: left; border: 2px solid var(--border); }
.guide-table th { font-weight: 700; background: var(--bg-alt); }
.guide-link { display: block; color: var(--text); text-decoration: none; }
.guide-link:hover h3 { text-decoration: underline; }

.recipe-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.recipe-intro .style-pic { width: 7.5rem; height: 7.5rem; grid-row: auto; }
.recipe-intro .lead { margin-bottom: 0; }
@media (max-width: 560px) {
  .recipe-intro { grid-template-columns: minmax(0, 1fr); }
  .recipe-intro .style-pic { width: 5.5rem; height: 5.5rem; }
}
.recipe-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.recipe-facts li { padding: .6rem .85rem; background: var(--panel); border: 2px solid var(--border); border-radius: 10px; }
.recipe-facts span { display: block; font-size: .75rem; color: var(--muted); }
.recipe-facts strong { font-size: .95rem; }
.recipe-ingredients { list-style: none; margin: 0; display: grid; gap: .4rem; }
.recipe-ingredients strong { display: inline-block; min-width: 4.5rem; color: var(--accent-text); }
.recipe-ingredients small { color: var(--muted); }
.recipe-steps { margin: 0; padding-left: 1.4rem; }
.recipe-steps li { margin-bottom: .75rem; }
.recipe-steps p { margin: .1rem 0 0; color: var(--muted); }

.recipe-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.recipe-card-link {
  display: flex;
  align-items: center;
  gap: .85rem;
  height: 100%;
  padding: .75rem 1rem;
  color: var(--text);
  text-decoration: none;
}
.recipe-card-link .style-pic { flex: none; width: 3.5rem; height: 3.5rem; }
.recipe-card-link strong { display: block; line-height: 1.3; }
.recipe-card-link small { color: var(--muted); }
.recipe-card-link:hover strong { text-decoration: underline; }

.footer-columns {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 1.5rem 16px .25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem 2rem;
}
.footer-title { margin: 0 0 .35rem; font-weight: 700; color: var(--text); }
.footer-columns ul { list-style: none; margin: 0; padding: 0; }
.footer-columns li { margin-bottom: .2rem; }
.footer-columns a { color: var(--muted); }
.footer-columns a:hover { color: var(--orange); }

/* ===== Calculator ===== */
/* Room for the tiles calculator.js adds, so the page doesn't jump when they appear. */
#style-list:empty, #method-list:empty { min-height: 15rem; }
/* Layout: rows of two equal columns on wide screens, one column on small ones. */
.calc-section { margin-top: 1.75rem; min-width: 0; }
.calc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  align-items: start;
}
.calc-row > .calc-section { margin-top: 0; }
.calc-pickers, .calc-results { margin-top: 1.75rem; }
@media (max-width: 900px) { .calc-row { grid-template-columns: minmax(0, 1fr); } }

.calc-step {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.1rem;
  margin: 0 0 .75rem;
  color: var(--text);
}
.calc-step span {
  display: inline-grid;
  place-items: center;
  font-size: .95rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 3px 3px 0 var(--orange);
  flex: none;
}

/* Steps 1-2: compact option rows (number | name + label | description) */
.tile-list { display: grid; gap: .6rem; }
.method-tile {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  row-gap: .15rem;
  padding: .7rem 1rem;
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .2s;
}
.method-tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.method-tile input { position: absolute; opacity: 0; pointer-events: none; }
.method-number {
  grid-row: span 2;
  font-family: "Bungee", Impact, sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--orange);
}
.method-name { font-family: "Bungee", Impact, sans-serif; font-size: .95rem; }
.method-time {
  justify-self: end;
  white-space: nowrap;
  padding: .05rem .55rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #2a1c14;
  font-weight: 700;
  font-size: .75rem;
}
.method-desc { grid-column: 2 / 4; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.method-tile:has(input:checked) {
  background: linear-gradient(160deg, var(--yellow), var(--orange));
  border-color: var(--red);
  color: #2a1c14;
}
.method-tile:has(input:checked) .method-number { -webkit-text-stroke-color: var(--red); }
.method-tile:has(input:checked) .method-desc { color: #4a3426; }
.method-tile:has(input:checked) .method-time { background: var(--red); color: #fff; }
.method-tile:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Step 1: pizza style tiles show a picture of the pizza instead of a number.
   Each picture comes in a retro and a modern version; the matching one shows. */
.method-tile.has-pic { grid-template-columns: 4rem minmax(0, 1fr) auto; }
.style-pic {
  grid-row: span 2;
  width: 4rem;
  height: 4rem;
  display: block;
  transition: transform .2s;
}
.pic-retro { filter: drop-shadow(3px 3px 0 var(--shadow)); }
.pic-modern { display: none; }
.method-tile.has-pic:hover .style-pic { transform: rotate(-6deg); }
.method-tile.has-pic:has(input:checked) .pic-retro { filter: drop-shadow(3px 3px 0 #2a1c14); }
@media (max-width: 420px) {
  .method-tile.has-pic { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
  .style-pic { width: 3.2rem; height: 3.2rem; }
}

/* Step 2: fridge time for the cold rise method */
.cold-hours {
  margin-top: .6rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem 1rem;
  padding: .8rem 1rem;
}
.cold-hours[hidden] { display: none; }
.cold-hours-label { font-weight: 700; }
.cold-hours .hint { grid-column: 1 / -1; margin: 0; font-size: .8rem; }
@media (max-width: 420px) { .cold-hours { grid-template-columns: minmax(0, 1fr); } }

/* Step 3: dough controls */
.settings-bar {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 1rem 1.25rem;
}
.setting-control input[type="datetime-local"] { font-size: .9rem; padding-right: .4rem; }
/* The four dough settings only fit on one row from about 1050px. */
@media (max-width: 1050px) { .settings-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .settings-bar { grid-template-columns: minmax(0, 1fr); } }
/* Same two rows in every setting, so labels and controls line up across the bar. */
.setting {
  display: grid;
  grid-template-rows: 1.9rem 2.75rem;
  row-gap: .4rem;
  min-width: 0;
}
.setting-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 700;
  white-space: nowrap;
}
.setting-control { display: flex; align-items: center; min-width: 0; }
.setting-control > input, .setting-control > .segmented { width: 100%; }
.setting-control .segmented span { padding: .5rem .3rem; }
.dough-grid { margin-top: 1.25rem; align-items: stretch; }
.dough-sliders, .pref-block { display: grid; gap: 1rem; align-content: start; }
.panel-label {
  margin: 0;
  padding: 0;
  font-family: "Bungee", Impact, sans-serif;
  font-size: .95rem;
  color: var(--orange);
}

.pizza-counter { gap: .75rem; }
.pizza-counter output {
  font-family: "Bungee", Impact, sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  color: var(--accent-text);
}
.pizza-counter button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
}
.pizza-counter button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 3px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  text-align: center;
  padding: .45rem .3rem;
  font-size: .8rem;
  font-weight: 700;
}
.segmented label + label span { border-left: 2px solid var(--border); }
.segmented input:checked + span { background: var(--orange); color: #2a1c14; }
.segmented input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: -3px; }

.slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1rem;
  align-items: center;
  font-weight: 700;
}
.slider input { grid-column: 1 / -1; }
.slider-label small { font-weight: 400; color: var(--muted); }
.slider output, .extra output, .setting-label output {
  min-width: 4.5rem;
  text-align: center;
  padding: .1rem .5rem;
  border-radius: 6px;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--accent-text);
  font-weight: 700;
}
.slider.disabled { opacity: .4; }

.segmented-2 { grid-template-columns: repeat(2, 1fr); }
.segmented-4 { grid-template-columns: repeat(4, 1fr); }
.segmented-4 span { padding-left: .15rem; padding-right: .15rem; }
.starter-block[hidden] { display: none; }
.starter-block { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--border); }
.level-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .62rem;
  vertical-align: middle;
}
.pref-block .panel-label { float: left; width: 100%; }
.pref-block .hint { margin: 0; }
.pref-block.disabled .segmented,
.pref-block.disabled .slider,
.pref-block.disabled .pref-summary { opacity: .4; }
.pref-summary { margin: -.35rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }

.pref-info { margin-top: 1rem; padding-top: .9rem; border-top: 2px dashed var(--border); font-size: .85rem; }
.pref-info summary { cursor: pointer; font-weight: 700; }
.pref-info summary::marker { color: var(--orange); }
.pref-info > p { color: var(--muted); }
.pref-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
}
.pref-compare > div { padding: .75rem 1rem; border: 2px dashed var(--border); border-radius: 10px; }
.pref-compare h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--accent-text); }
.pref-compare ul { margin: 0; padding-left: 1.1rem; }
.pref-compare li { margin-bottom: .3rem; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--red), var(--orange), var(--yellow));
  border: 2px solid var(--border);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--red);
  box-shadow: 2px 2px 0 var(--shadow);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--red);
  box-shadow: 2px 2px 0 var(--shadow);
}
input[type="range"]:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }

.extra { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.switch { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; }
.switch input {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background .2s;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform .2s;
}
.switch input:checked { background: var(--red); }
.switch input:checked::after { transform: translateX(18px); background: #fff; }

/* Step 3: recipe index card (cream paper in light mode, dark paper in dark mode) */
.recipe-card {
  --card-paper: #fbf3e2;
  --card-line: #e3d5bb;
  --card-ink: #2a1c14;
  --card-muted: #6e5a48;
  --card-body: #4a3426;
  --card-number: var(--red);
  --card-tile: rgba(255, 255, 255, .55);
  --card-tile-border: #b9a47f;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 2.6rem;
  color: var(--card-ink);
  border-radius: 12px;
  background:
    linear-gradient(to right, transparent 1.6rem, rgba(215, 38, 46, .55) 1.6rem 1.75rem, transparent 1.75rem),
    repeating-linear-gradient(to bottom, var(--card-paper) 0 31px, var(--card-line) 31px 32px),
    var(--card-paper);
  box-shadow: 6px 6px 0 var(--orange);
}
:root:not([data-theme="light"]) .recipe-card {
  --card-paper: #2b211b;
  --card-line: #352920;
  --card-ink: #f6ead2;
  --card-muted: #bfae94;
  --card-body: #d9c9ad;
  --card-number: var(--yellow);
  --card-tile: rgba(0, 0, 0, .22);
  --card-tile-border: #5a4636;
  outline: 2px solid var(--border);
  outline-offset: -2px;
}
.recipe-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 3px double var(--card-ink);
  margin-bottom: 1rem;
}
.recipe-kicker { margin: 0; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; color: var(--card-muted); }
.recipe-title { margin: 0; font-family: "Bungee", Impact, sans-serif; font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--card-number); }
.recipe-total { text-align: right; }
.recipe-total span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--card-muted); }
.recipe-total strong { font-family: "Bungee", Impact, sans-serif; font-size: 1.4rem; }
.ing-group h3 { margin: .75rem 0 .5rem; font-size: .85rem; color: var(--card-ink); }
.ing-group:first-child h3 { margin-top: 0; }
.ing-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: .5rem;
}
.ing-tile {
  display: grid;
  padding: .45rem .6rem;
  border: 2px dashed var(--card-tile-border);
  border-radius: 8px;
  background: var(--card-tile);
}
.ing-tile strong { font-family: "Bungee", Impact, sans-serif; font-size: 1.15rem; color: var(--card-number); line-height: 1.2; }
.ing-tile span { font-size: .78rem; color: var(--card-body); line-height: 1.3; }
.recipe-meta {
  margin: 1rem 0 0;
  padding-top: .85rem;
  border-top: 2px dashed var(--card-tile-border);
  display: grid;
  gap: .4rem;
}
.recipe-meta div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; font-size: .85rem; line-height: 1.45; }
.recipe-meta dt { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: var(--card-muted); padding-top: .2rem; }
.recipe-meta dd { margin: 0; color: var(--card-ink); }
.recipe-meta .recipe-oven dd { font-family: "Bungee", Impact, sans-serif; font-size: 1.25rem; color: var(--card-number); line-height: 1.2; }
.recipe-meta .recipe-oven dt { padding-top: .35rem; }
@media (max-width: 520px) { .recipe-meta div { grid-template-columns: 1fr; gap: .1rem; } }
.recipe-note { margin: .85rem 0 0; font-size: .82rem; font-style: italic; color: var(--card-body); }
.recipe-warning { margin: .75rem 0 0; font-weight: 700; color: var(--red); }
:root:not([data-theme="light"]) .recipe-warning { color: #ff6b70; }

/* Step 4: task list board (always dark) */
.board {
  background: #120d0b;
  color: var(--yellow);
  border: 3px solid #3a2c22;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 6px 6px 0 var(--red);
}
.board-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.board-top div { background: #1f1712; border-radius: 8px; padding: .5rem .75rem; }
.board-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #a8977e; }
.board-top strong { font-family: "Bungee", Impact, sans-serif; font-size: 1rem; letter-spacing: .03em; }
.board-note { margin: .75rem 0 .5rem; color: #f6ead2; font-size: .85rem; }
.board-note.late { color: #ff6b70; font-weight: 700; }
.board-rows { list-style: none; padding: 0; margin: 0; }
.board-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: start;
  padding: .6rem .1rem;
  border-top: 1px dashed #4a3a2f;
}
.board-when strong { display: block; font-family: "Bungee", Impact, sans-serif; font-size: 1.05rem; }
.board-when span { font-size: .75rem; color: #a8977e; }
.board-title { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.board-title strong { color: #f6ead2; }
.board-tag {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: .05rem .45rem;
  border-radius: 4px;
  color: #120d0b;
}
.board-tag.hands { background: var(--red); color: #fff; }
.board-tag.room { background: var(--orange); }
.board-tag.fridge { background: var(--teal); color: #fff; }
.board-tag.oven { background: var(--yellow); }
.board-duration { font-size: .75rem; color: #a8977e; }
.board-details { margin: .2rem 0 0; font-size: .78rem; line-height: 1.45; color: #cbbba1; }
.board-stamp {
  font-family: "Bungee", Impact, sans-serif;
  font-size: .75rem;
  padding: .3rem .6rem;
  border: 2px solid #6e5a48;
  border-radius: 6px;
  background: transparent;
  color: #a8977e;
  cursor: pointer;
}
.board-stamp:hover { border-color: var(--yellow); color: var(--yellow); }
.board-stamp[aria-pressed="true"] {
  border-color: var(--teal);
  color: var(--teal);
  transform: rotate(-6deg);
}
.board-row.done .board-what, .board-row.done .board-when { opacity: .45; }
.board-row.done .board-title strong { text-decoration: line-through; }
.board-row.bake { grid-template-columns: 4.75rem minmax(0, 1fr); }
.board-row.bake .board-title strong { color: var(--yellow); }
.board-foot { display: flex; justify-content: flex-end; margin-top: .75rem; }
.board-button {
  font: inherit;
  font-size: .8rem;
  background: transparent;
  color: #a8977e;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.board-button:hover { color: var(--yellow); }
@media (max-width: 520px) {
  .board-row { grid-template-columns: 1fr auto; }
  .board-when { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; }
  .board-row.bake { grid-template-columns: 1fr; }
  .recipe-card { padding-left: 2.6rem; transform: none; }
  .extra { grid-template-columns: 1fr auto; }
  .extra input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}

/* ===== Footer ===== */
.site-footer { color: var(--muted); font-size: .85rem; background: var(--bg-alt); }
.copyright { text-align: center; margin: 0; padding: .75rem 16px 1rem; }

/* ===== pizzacalculator.nl additions ===== */
.logo-word { font-size: 1.6rem; }
@media (max-width: 520px) { .logo-word { font-size: 1.1rem; } }

.explain { margin-top: 3.5rem; }
.page-title + .lead + .explain-grid,
.page-title + .lead + .faq { margin-top: 1.5rem; }
.page-cta { margin: 2.5rem 0 0; }
.more-links { margin: 2.5rem 0 0; text-align: center; color: var(--muted); }
.explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.explain-grid .panel h3 { margin: 0 0 .5rem; color: var(--accent-text); font-size: 1rem; }
.explain-grid .panel p { margin: 0; color: var(--muted); font-size: .9rem; }

.faq { display: grid; gap: .75rem; max-width: 820px; }
.faq details { padding: 1rem 1.25rem; box-shadow: 4px 4px 0 var(--shadow); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary::marker { color: var(--orange); }
.faq p { margin: .75rem 0 0; color: var(--muted); }

.footer-note a { color: var(--muted); }

/* ===== Buttons, alerts, form fields and text pages ===== */
.btn {
  display: inline-block;
  padding: .75rem 1.4rem;
  border: 3px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-outline { background: transparent; color: var(--yellow); border-color: var(--yellow); }
:root[data-theme="light"] .btn-outline { color: var(--text); border-color: var(--text); }
.btn-small { padding: .4rem .8rem; font-size: .8rem; box-shadow: 3px 3px 0 var(--shadow); }

.alert {
  padding: .75rem 1rem;
  border-radius: 8px;
  border: 2px solid;
  margin: 0 0 1.5rem;
}
.alert-success { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 15%, transparent); }
.alert-info { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.alert-error { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }

.field { display: grid; gap: .35rem; font-weight: 700; }
.field > span small { font-weight: 400; color: var(--muted); }
.field.disabled { opacity: .45; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--red); }
.error { color: var(--red); font-weight: 700; }
:root:not([data-theme="light"]) .error { color: #ff6b70; }

.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.check input { margin-top: .35rem; accent-color: var(--red); }

.post { max-width: 720px; margin: 0 auto; }
.post p { font-size: 1.05rem; }
.legal h2 { color: var(--orange); font-size: 1.1rem; margin: 1.75rem 0 .25rem; }
.legal p { font-size: .95rem; }

/* ===== Sticky top menu ===== */
/* The stripes and menu stay at the top while scrolling; main.js keeps
   --topbar-h up to date so anchor links land just below the menu. */
html { scroll-padding-top: calc(var(--topbar-h, 7rem) + .75rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: box-shadow .2s;
}
.topbar.scrolled { box-shadow: 0 4px 0 var(--shadow); }
/* The menu never wraps onto a second line. When logo, menu and buttons fit,
   they share one row; otherwise (main.js measures this and adds .stacked) the
   logo and buttons share the first row and the menu gets its own row below.
   Should the menu still not fit there (small phones), it scrolls sideways,
   with a fade at the edge (.overflowing). How much fits depends on the style's
   font and on being logged in, so it is measured rather than guessed. */
.topbar .site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo nav theme";
  align-items: center;
  gap: .4rem 1.5rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.topbar .logo { grid-area: logo; }
/* Pushed right with an auto margin rather than justify-content: an overflowing
   menu then sticks out on the right, where it can be measured and scrolled to,
   instead of being cut off on the left. */
.topbar nav {
  grid-area: nav;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: .4rem 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .2rem 0;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav > * { flex: none; white-space: nowrap; }
.topbar nav > :first-child { margin-left: auto; }
.topbar .header-tools { grid-area: theme; }
.topbar .logo-mark { width: 44px; height: 44px; }

.topbar .site-header.stacked {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "logo theme" "nav nav";
  padding-top: .45rem;
  padding-bottom: .35rem;
}
/* Centred while it fits; when it overflows it starts at the left, so nothing is cut off. */
.topbar .stacked nav { gap: .2rem 1.1rem; }
.topbar .stacked nav > :last-child { margin-right: auto; }
/* Phones: when the menu doesn't fit on its own row either, it becomes a grid of
   buttons (main.js sets .compact and --nav-cols), with a short last row centred. */
.nav-short { display: none; }
.topbar nav.compact {
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  overflow: visible;
  padding: .1rem 0 .3rem;
}
.topbar nav.compact > *,
.topbar nav.compact > :first-child,
.topbar nav.compact > :last-child {
  flex: 0 0 calc((100% - (var(--nav-cols, 3) - 1) * .4rem) / var(--nav-cols, 3));
  margin: 0;
}
.topbar nav.compact a,
.topbar nav.compact .nav-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: .3rem .4rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font-size: .74rem;
}
.topbar nav.compact a.active,
.topbar nav.compact a:hover,
.topbar nav.compact .nav-button:hover { border-color: var(--orange); }
.topbar nav.compact .nav-form { display: block; }
.topbar nav.compact .nav-long { display: none; }
.topbar nav.compact .nav-short { display: inline; }

.topbar nav.overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  padding-right: 2rem;
}
@media (max-width: 760px) {
  .topbar .logo-mark { width: 34px; height: 34px; }
  .topbar .logo-tag { display: none; }
  .topbar nav a, .topbar .nav-button { font-size: .8rem; }
  .display-button { height: 32px; padding: 0 .55rem 0 .65rem; font-size: .66rem; box-shadow: 2px 2px 0 var(--shadow); }
  .display-button svg { width: 15px; height: 15px; }
}
/* Small phones: the button shows only its icons (the word "Weergave" stays
   readable for screen readers), so the full logo fits next to it. */
@media (max-width: 440px) {
  .display-button { height: 34px; padding: 0 .5rem; gap: .25rem; }
  .display-button .display-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .topbar .logo { gap: .45rem; }
  .topbar .logo-mark { width: 30px; height: 30px; }
  .topbar .logo-word { font-size: .85rem; text-shadow: 2px 2px 0 var(--red); }
  :root[data-theme="light"] .topbar .logo-word { text-shadow: 2px 2px 0 var(--yellow); }
}

.nav-form { margin: 0; display: inline-flex; }
.nav-button {
  font-family: "Bungee", Impact, sans-serif;
  font-size: .9rem;
  letter-spacing: .02em;
  /* Same box as the menu links, so its underline lines up with theirs. */
  line-height: inherit;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
}
.nav-button:hover { border-bottom-color: var(--orange); }

/* ===== Accounts and saved recipes ===== */
.narrow { max-width: 560px; margin: 0 auto; }
.form .btn { justify-self: start; }
.panel > p:first-child { margin-top: 0; }

/* Step 6: save the recipe. Wide: label, then name field and buttons on one row,
   then a hint. Narrow: everything stacked, buttons full width. */
.save-panel { padding: 1.25rem 1.5rem; border-left: 8px solid var(--orange); }
.save-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "name actions" "hint hint";
  gap: .55rem 1rem;
  align-items: center;
}
.save-label {
  grid-area: label;
  margin: 0;
  font-family: "Bungee", Impact, sans-serif;
  font-size: .95rem;
  color: var(--orange);
}
.save-form input[type="text"] { grid-area: name; font-size: 1rem; padding: .7rem .85rem; }
.save-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: .75rem; }
.save-hint { grid-area: hint; margin: .15rem 0 0; }
.save-login { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.save-login .hint { margin: .3rem 0 0; max-width: 62ch; }
@media (max-width: 700px) {
  .save-panel { padding: 1.1rem 1.1rem; border-left-width: 6px; }
  .save-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "name" "actions" "hint"; }
  .save-actions .btn, .save-login .btn { flex: 1 1 auto; text-align: center; }
}

.recipe-list { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: grid; gap: 1rem; }
.recipe-item { padding: 1rem 1.25rem; }
.recipe-item-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.recipe-item-name {
  font-family: "Bungee", Impact, sans-serif;
  font-size: 1.15rem;
  color: var(--accent-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.recipe-item-name:hover { text-decoration: underline; }
.recipe-item-summary { margin: .4rem 0 0; font-size: .85rem; }
.recipe-item .hint { margin: .2rem 0 0; }
.recipe-item-edit { margin-top: .6rem; font-size: .85rem; }
.recipe-item-edit summary { cursor: pointer; color: var(--muted); }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.inline-form input[type="text"] { flex: 1 1 14rem; width: auto; }
.link-danger {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: #ff6b70;
  text-decoration: underline;
  cursor: pointer;
}
:root[data-theme="light"] .link-danger { color: var(--red); }