/* Oven to Air. One stylesheet, mobile first. */

/* Fonts are self-hosted, so no visitor request goes to Google before consent. Files and licences are in
   /assets/fonts, taken from Google Fonts (Anton v27, Montserrat v31). Latin-ext only downloads if a page uses those characters. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat is a variable font: one file covers both weights the site uses. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --teal: #1b998b; /* logo teal */
  --teal-strong: #12786c; /* teal darkened for AA contrast */
  --green: #115c53; /* logo dark green */
  --green-deep: #0c423c;
  --red: #d63c3e; /* the original site's red (#f05d5e), deepened slightly so white text passes AA */

  --panel: #ffffff; /* cards: input panels, selector tracks, tables */
  --panel-line: rgba(0, 0, 0, 0.05);
  --hover: #f1f1ef;
  --bar: rgba(255, 255, 255, 0.88);
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px -2px rgba(0, 0, 0, 0.07);
  --shadow:
    0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -10px rgba(0, 0, 0, 0.16);

  --bg: #f6f6f4; /* neutral off-white, no green tint */
  --surface: #ffffff;
  --line: #dcdcd4;
  --ink: #101b19;
  --text: #1c2624;
  --muted: #4f5c59;
  --faint: #8a9794;
  --link: #0d6a5f;
  --out: #0c423c; /* result numbers */
  --err: #a31d1d;
  --focus: #1d4ed8;

  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body:
    "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius-xl: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --panel: #1b1e1d;
    --panel-line: rgba(255, 255, 255, 0.06);
    --hover: #262a28;
    --bar: rgba(27, 30, 29, 0.88);
    --shadow-sm:
      0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
    --shadow:
      0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -10px rgba(0, 0, 0, 0.7);
    --bg: #111312;
    --surface: #1b1e1d;
    --line: #2a3734;
    --ink: #f1f5f4;
    --text: #e3ebe9;
    --muted: #a9b8b5;
    --faint: #6f807c;
    --link: #6fd6c9;
    --out: #8fe8da;
    --err: #ff9b9b;
    --focus: #8ab4ff;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

p {
  margin: 0 0 1rem;
}
a {
  color: var(--link);
  text-underline-offset: 2px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--bg);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip:focus {
  left: 0;
}

.wrap {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.wrap-wide {
  max-width: 56rem;
}

/* ---------- Header: centred logo, as on the original site ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar);
  border-bottom: 1px solid var(--panel-line);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.brand img {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}
.nav {
  display: flex;
  gap: 0.25rem;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .nav a:hover {
    background: var(--hover);
  }
}
.nav a[aria-current="page"] {
  background: var(--hover);
  color: var(--ink);
}
@media (max-width: 480px) {
  .nav .nav-home {
    display: none;
  }
  .nav a {
    padding: 0 0.7rem;
  }
}
/* Below 640px only the logo shows. The name stays readable to screen readers so the link keeps its label. */
@media (max-width: 639px) {
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Converter: original stacked layout, new style ---------- */

.hero {
  padding: 2.5rem 0 3rem;
  text-align: center;
}
.hero h1 {
  margin-bottom: 0.75rem;
}
.intro {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 auto 2rem;
  max-width: 32rem;
}

.converter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Selectors: a white track with segments. Units select in red, oven type in black. */
.chips {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-sm);
}
.chip {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.chips-unit .chip > span {
  min-height: 3.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
}
.chips-unit .chip input:checked + span {
  background: var(--red);
  color: #fff;
}

/* Units: one red pill slides between °C and °F. Without :has() the checked chip is simply red, as above.
   The pill's size and travel come from the track's 0.3rem padding and gap. */
@supports selector(:has(*)) {
  .chips-unit {
    position: relative;
    isolation: isolate;
  }
  .chips-unit::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0.3rem;
    width: calc((100% - 0.9rem) / 2);
    border-radius: 999px;
    background: var(--red);
    transition: transform 0.25s ease;
  }
  .chips-unit:has(input[value="f"]:checked)::before {
    transform: translateX(calc(100% + 0.3rem));
  }
  .chips-unit .chip > span {
    transition: color 0.25s ease;
  }
  .chips-unit .chip input:checked + span {
    background: none;
  }
}
/* Oven type: app.js adds a black pill and moves it to the checked option (the options differ in width).
   Without JavaScript the checked chip is simply black, as above. */
.chips-type.has-pill {
  position: relative;
  isolation: isolate;
}
.chips-pill {
  position: absolute;
  left: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--ink);
}
.chips-pill.is-ready {
  transition:
    transform 0.25s ease,
    width 0.25s ease;
}
.chips-type.has-pill .chip > span {
  transition: color 0.25s ease;
}
.chips-type.has-pill .chip input:checked + span {
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .chips-unit::before,
  .chips-unit .chip > span,
  .chips-pill.is-ready,
  .chips-type.has-pill .chip > span {
    transition: none;
  }
}

.chips-type .chip {
  flex: 1 1 auto;
}
.chips-type .chip > span {
  min-width: 3.75rem;
  min-height: 3rem;
  padding: 0 0.5rem;
  font-size: 0.85rem;
}
.chips-type .chip input:checked + span {
  background: var(--ink);
  color: var(--bg);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
@media (hover: hover) {
  .chip input:not(:checked):hover + span {
    background: var(--hover);
  }
}
@media (max-width: 480px) {
  .hero {
    padding-top: 2rem;
  } /* 32px, matching the original site */
  .hero h1 {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
  }
  .intro {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }
  .converter {
    gap: 0.6rem;
  }
  .chips-unit .chip > span {
    min-height: 3rem;
    font-size: 1.35rem;
  }
  .chips-type .chip > span {
    min-height: 2.75rem;
    font-size: 0.8rem;
  }
  .hint {
    margin-top: 0.45rem;
  }
  .field-panel {
    padding: 0.6rem 1rem 0.35rem;
  }
  .amount-input {
    font-size: 2.85rem;
  }
}
@media (max-width: 400px) {
  .chips-type {
    gap: 0.2rem;
    padding: 0.25rem;
  }
  .chips-type .chip > span {
    padding: 0 0.55rem;
  }
}
/* "Fan / convection" is the longest option, so the smallest phones get slightly smaller text to keep space
   around it inside the pill. */
@media (max-width: 350px) {
  .chips-type .chip > span {
    font-size: 0.74rem;
  }
}

.hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.6rem 0 0.25rem;
  line-height: 1.4;
}

/* Input panels: white cards with a soft shadow, centred label and a big number */
.field-panel {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
  padding: 1rem 1rem 0.75rem;
}
.amount-label,
.result-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}
.amount-label {
  color: var(--muted);
}
.arrow {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.amount-row [hidden] {
  display: none;
}
.amount-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.1rem 0;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0.75rem;
  caret-color: var(--red);
  -webkit-appearance: none;
  appearance: none;
}
.amount-input::placeholder {
  color: var(--ink);
  opacity: 0.2;
}
.amount-input:focus {
  outline: none;
}
.field-panel:focus-within {
  border-color: var(--red);
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--red);
}
/* Doubled class so the size beats the .amount-input sizes in the media queries below. */
.amount-input.amount-select {
  font-size: 2.25rem;
  text-align-last: center;
  cursor: pointer;
}
.amount-select option {
  font: 1rem var(--font-body);
  color: #000;
}
/* Where the browser allows it, style the open list too, so it doesn't inherit the big display font. */
@supports (appearance: base-select) {
  .amount-select,
  .amount-select::picker(select) {
    appearance: base-select;
  }
  .amount-select {
    justify-content: center;
  }
  .amount-select::picker-icon {
    display: none;
  }
  .amount-select::picker(select) {
    margin-top: 0.4rem;
    padding: 0.3rem;
    max-height: 18rem;
    font: 1rem var(--font-body);
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 1rem;
    box-shadow: var(--shadow);
  }
  .amount-select option {
    color: var(--text);
    padding: 0.55rem 0.9rem;
    border-radius: 0.6rem;
  }
  .amount-select option::checkmark {
    display: none;
  }
  .amount-select option:hover,
  .amount-select option:focus-visible {
    background: var(--hover);
    outline: none;
  }
  .amount-select option:checked {
    background: var(--red);
    color: #fff;
  }
}

.convert-btn {
  min-height: 4rem;
  margin-top: 0.25rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--teal-strong);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px -8px rgba(18, 120, 108, 0.6);
}
@media (hover: hover) {
  .convert-btn:hover {
    background: var(--green);
  }
}
@media (max-width: 480px) {
  .convert-btn {
    font-size: 1.6rem;
  }
}
.convert-btn:active {
  transform: translateY(1px);
}

.error {
  color: var(--err);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

/* Results: dark green, as on the original, rounded to match */
.results {
  display: grid;
  gap: 0.875rem;
  margin-top: 0.5rem;
}
.results[hidden] {
  display: none;
}
.result-block {
  background: var(--green);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 1.1rem 1rem 1.25rem;
  box-shadow: 0 12px 28px -12px rgba(12, 66, 60, 0.55);
}
.result-label {
  color: #cfe9e4;
}
.result-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 4.25rem;
  line-height: 1.1;
}
.result-unit {
  font-size: 1.75rem;
  margin-left: 0.3rem;
}
.result-check {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #e3f3f0;
}
.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.pill-outline {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font: 700 0.9rem var(--font-body);
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
  .pill-outline:hover {
    background: var(--hover);
  }
}
.copy-status {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--muted);
}

.safety {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1.25rem auto 0;
  line-height: 1.5;
  max-width: 32rem;
}

/* ---------- Content sections ---------- */

section.block {
  padding: 2.75rem 0 2.75rem 0;
}
section.block#settings {
  padding: 2rem 0 2rem 0;
}
@media (min-width: 700px) {
  section.block {
    padding: 3.5rem 0;
  }
}
section.block + section.block {
  border-top: 1px solid var(--line);
}
/* Sections are linked to directly (the safety note links to #done), so stop them under the sticky header
   rather than behind it. Their own top padding then gives the heading room. */
main section[id] {
  scroll-margin-top: 4rem;
}
section.block.tint {
  background: transparent;
}
.lede {
  color: var(--muted);
}

/* Chart tables styled as a tiled keypad */
.tables {
  display: grid;
  gap: 1.5rem;
}
.table-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 1.25rem;
  overflow-x: auto;
  box-shadow: var(--shadow);
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
  font-weight: 700;
  padding: 0.85rem 0.75rem 0.6rem;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
th,
td {
  padding: 0.55rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
th + th,
td,
th + td {
  border-left: 1px solid var(--line);
}
tbody tr:last-child > * {
  border-bottom: 0;
}
th:first-child {
  text-align: left;
}
thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  vertical-align: bottom;
}
tbody th {
  font-weight: 700;
}
tbody td:last-child,
tbody td:nth-last-child(2):not(:first-of-type) {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--out);
}
@media (max-width: 480px) {
  th,
  td {
    padding: 0.5rem 0.55rem;
    font-size: 0.875rem;
  }
  thead th {
    font-size: 0.66rem;
  }
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  margin-top: 1.25rem;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font: 700 0.95rem var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
  background: var(--hover);
}

.tips {
  padding: 0;
  list-style: none;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}
.tips li {
  padding-left: 1rem;
  border-left: 3px solid var(--red);
}
.tips strong {
  display: block;
  color: var(--ink);
}

.example {
  background: var(--panel);
  border-radius: 1rem;
  padding: 0.9rem 1.1rem;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  color: var(--ink);
}

details {
  border-bottom: 1px solid var(--line);
}
summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 700;
  color: var(--ink);
}
details p {
  color: var(--muted);
}

.marker {
  background: #fff0a8;
  color: #3d3200;
  padding: 0 0.25rem;
  border-radius: 0.2rem;
  font-weight: 700;
  font-size: 0.85em;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-bottom: 0.75rem;
}
.site-footer nav a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
}
.footer-temps {
  font-size: 0.85rem;
  align-items: center;
}
.footer-temps span {
  color: var(--muted);
}

/* ---------- Inner pages ---------- */

/* The big gap sits above the heading. The gap below the intro matches the one between a section's last
   paragraph and the line under it: the section's top padding plus a paragraph's bottom margin. */
.hero.hero-plain {
  padding: 4.5rem 0 0;
}
.hero-plain .intro {
  margin-bottom: 1rem;
}
@media (min-width: 700px) {
  .hero.hero-plain {
    padding-top: 7rem;
  }
}
@media (max-width: 480px) {
  .hero.hero-plain {
    padding-top: 2.75rem;
  }
}
/* A photo between the heading and the intro, in 4:3 and as wide as the intro. The big heading sits close to
   its baseline, so 1rem above looked tighter than 1rem below; it gets 1.5rem. The top margin collapses with
   the heading's smaller one. */
.hero-image {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
  margin: 1.5rem auto 1rem;
}
/* The "starting point" note on guides for food that's unsafe undercooked. It sits right under the settings
   rather than only in the footer, so people read it with the numbers. Its bottom margin matches a paragraph's. */
.safety-note {
  max-width: 32rem;
  margin: 0 auto 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--red);
  border-radius: 0.5rem;
  background: var(--panel);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.5;
}
/* The settings cards leave 1rem under them, but the frozen food table has no margin of its own. */
.tables + .safety-note {
  margin-top: 1rem;
}
.hero-404 {
  padding: 5rem 0 6rem;
}
.hero-404 .intro {
  margin-top: 1.5rem;
}

.note {
  font-size: 0.9rem;
  color: var(--muted);
}
.steps {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.steps li + li {
  margin-top: 0.4rem;
}
.food-list {
  columns: 2;
  column-gap: 1.5rem;
  padding-left: 1.1rem;
  margin: 0 0 1rem;
}
.food-list li {
  margin-bottom: 0.35rem;
  break-inside: avoid;
}

/* Related pages: white cards, like the input panels */
.related-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  border-radius: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--text);
}
.related-card strong {
  color: var(--ink);
  font-size: 1rem;
}
.related-card span {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
}
@media (hover: hover) {
  .related-card:hover {
    box-shadow: var(--shadow);
  }
  .related-card:hover strong {
    text-decoration: underline;
  }
}

/* Guide settings: packet on the left, air fryer (dark green, like the results) on the right */
.settings-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  /* As wide as the safety note below it, so their edges line up. */
  max-width: 32rem;
  margin: 0 auto 1rem;
}
.settings-col {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  text-align: center;
}
.settings-out {
  background: var(--green);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(12, 66, 60, 0.55);
}
.settings-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.settings-out .settings-label {
  color: #cfe9e4;
}
.settings-num {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--ink);
}
.settings-out .settings-num {
  color: #fff;
}
.settings-time {
  margin: 0;
  font-weight: 700;
}
.settings-arrow {
  font-size: 1.5rem;
  color: var(--muted);
}
/* On desktop the recipe card and the safety note sit centred, so the heading above them is centred too. */
@media (min-width: 700px) {
  #settings h2 {
    text-align: center;
  }
}
/* A recipe's card has only the air fryer side, so its one column takes the card's full width. */
.settings-card-single {
  grid-template-columns: 1fr;
}
@media (max-width: 480px) {
  .settings-card {
    grid-template-columns: 1fr;
  }
  .settings-arrow {
    justify-self: center;
    line-height: 1;
    transform: rotate(90deg);
  }
}

.packet-disclaimer {
  padding-top: 2.75rem;
  text-align: center;
}

/* Reserved space for a future "recommended kit" section on guide pages, offered to advertisers for now */
.kit-placeholder {
  border: 2px dashed var(--line);
  border-radius: 1.25rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.kit-placeholder p {
  margin: 0;
}
.kit-placeholder .kit-title {
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
/* The home page spot follows the converter rather than another block, so it gets the usual line above it
   too. That also keeps an ad visibly apart from the converter's food safety note. */
.hero + .kit-slot {
  border-top: 1px solid var(--line);
}
/* Once a sponsor books the spot */
.kit-ad {
  border-style: solid;
  border-width: 1px;
  background: var(--panel);
}
.kit-image {
  display: block;
  max-width: 24rem;
  margin: 0 auto 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--hover);
}
.kit-image img {
  display: block;
  width: 100%;
  height: auto;
}
.kit-placeholder .kit-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* The page view opt-out on the privacy page */
.opt-out {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow-sm);
}
.opt-out p {
  margin: 0;
}
.opt-out .btn-outline {
  margin: 0.75rem 0 0;
}
.opt-out .note {
  margin-top: 0.75rem;
}
/* Linked to directly (#counting, #guide-chips), so keep them clear of the sticky header */
.opt-out,
.spot-card {
  scroll-margin-top: 5rem;
}

/* The spots for sale on /advertise/ */
.spot-list {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.spot-card {
  padding: 1.1rem 1.2rem;
  border-radius: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-sm);
}
.spot-card > p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.spot-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: end;
  margin: 0;
}
.spot-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted);
}
.spot-facts dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spot-card .note {
  margin: 0.75rem 0 0;
}
.spot-card .btn-outline {
  margin-top: 1rem;
  text-decoration: none;
}
@media (max-width: 480px) {
  .spot-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 700px) {
  h2 {
    font-size: 1.9rem;
  }
  h1 {
    font-size: 2.75rem;
  }
  .hero {
    padding: 3.5rem 0 3.5rem;
  }
  .amount-input {
    font-size: 4.5rem;
  }
  .result-num {
    font-size: 5.5rem;
  }
  .tables {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
  .tables.tables-single {
    grid-template-columns: 1fr;
    max-width: 40rem;
  }
  .related-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

/* ---------- Print: the chart on one A4 page ---------- */

@media print {
  @page {
    size: A4;
    margin: 15mm;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .site-header,
  .site-footer,
  .hero,
  .skip,
  main > section:not(#chart),
  .btn-outline,
  .no-print {
    display: none !important;
  }
  #chart {
    padding: 0;
    border: 0;
    background: #fff;
  }
  #chart .wrap {
    max-width: none;
    padding: 0;
  }
  .tables {
    grid-template-columns: 1fr 1fr;
    gap: 10mm;
  }
  .table-card {
    border: 1px solid #999;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  caption {
    border-color: #999;
    color: #000;
  }
  th,
  td {
    border-color: #999;
    padding: 3pt 5pt;
    font-size: 10.5pt;
    color: #000 !important;
  }
  h2 {
    font-size: 20pt;
    color: #000;
  }
  .lede {
    color: #000;
  }
  .print-only {
    display: block !important;
    margin-top: 8mm;
  }
}
.print-only {
  display: none;
}