/* Blobalong — light + dark.
   System: 4/8 px spacing scale, one type scale, neutral paper base, one action colour (blue).
   Red / yellow / blue appear in the logo; elsewhere red means danger and blue means action.
   Fonts are self-hosted (OFL, see /fonts/): Fredoka for the wordmark + h1/h2, Inter for everything else. */

@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional; } /* preloaded; optional = no swap shift */
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
/* Contrast (WCAG AA): text, muted, accent and danger are >= 4.5:1 on bg, bg-alt and surface in both schemes. */
:root {
  color-scheme: light;
  --bg: #faf9f6;
  --bg-alt: #f2f0ea;
  --surface: #ffffff;
  --text: #16181d;
  --muted: #555b66;
  --accent: #1f4fd1;
  --accent-hover: #173ea6;
  --accent-text: #ffffff;
  --accent-soft: #e9eefc;
  --danger: #b42318;
  --danger-hover: #8f1b12;
  --danger-text: #ffffff;
  --danger-soft: #fdeceb;
  --border: #e2dfd8;
  --border-strong: #8a8f99;
  --ok: #1f7a3a;
  --warn-bg: #fdf5dc;
  --warn-border: #d9a514;
  --warn-text: #5a4200;
  --err-bg: #fdeceb;
  --err-border: #e3867e;
  --err-text: #8f1b12;
  --info-bg: #eff2f9;
  --info-border: #c3cde6;
  --crop-bg: #16181d;
  --shadow: 0 1px 2px rgb(22 24 29 / .05), 0 4px 12px rgb(22 24 29 / .06);

  /* spacing (4/8 px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* type scale */
  --t-xs: .8125rem;  /* 13 */
  --t-sm: .875rem;   /* 14 */
  --t-base: 1rem;    /* 16 */
  --t-md: 1.125rem;  /* 18 */
  --t-lg: 1.25rem;   /* 20 */
  --t-xl: 1.5rem;    /* 24 */
  --t-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);  /* 28-36 */
  --t-3xl: clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem); /* 34-52 */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --focus: 2px solid var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121317;
    --bg-alt: #17191e;
    --surface: #1c1e24;
    --text: #ecedf0;
    --muted: #a5aab4;
    --accent: #8cadff;
    --accent-hover: #b3c8ff;
    --accent-text: #0d1220;
    --accent-soft: #1f2944;
    --danger: #ff9b8f;
    --danger-hover: #ffbdb4;
    --danger-text: #1c0b09;
    --danger-soft: #3a1714;
    --border: #2c2f37;
    --border-strong: #6c717c;
    --ok: #6fd28a;
    --warn-bg: #2f270e;
    --warn-border: #a88a2a;
    --warn-text: #ffe08a;
    --err-bg: #331513;
    --err-border: #9c4a42;
    --err-text: #ffb3ac;
    --info-bg: #182033;
    --info-border: #34446b;
    --crop-bg: #08090b;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .3);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; margin: 0 0 var(--s3); overflow-wrap: break-word; }
h1, h2 { font-family: var(--font-head); letter-spacing: -.005em; }
h3, h4 { font-family: var(--font-body); letter-spacing: -.01em; }
h1 { font-size: var(--t-3xl); line-height: 1.08; max-width: 18ch; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-md); line-height: 1.3; }
p { margin: 0 0 var(--s4); }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
img, svg, canvas { max-width: 100%; display: block; }
img { height: auto; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

.container { width: min(1120px, 100% - 2 * var(--s4)); margin-inline: auto; }
@media (min-width: 600px) { .container { width: min(1120px, 100% - 2 * var(--s5)); } }
.narrow { max-width: 720px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: var(--s2); }
.skip:focus { left: var(--s2); background: var(--accent); color: var(--accent-text); padding: var(--s2) var(--s4); z-index: 50; border-radius: var(--radius); }

/* ---------- Header / footer ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); /* browsers without color-mix() would otherwise get a see-through header */
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); /* Safari before 18 */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; flex-wrap: wrap; }
.logo { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1; text-decoration: none; color: var(--text); display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; }
.logo svg { width: 40px; height: 30px; flex: none; } /* viewBox is cropped to the blobs */
.logo:hover { color: var(--text); }
.nav nav { display: flex; gap: var(--s5); align-items: center; }
.nav nav a:not(.btn) { text-decoration: none; color: var(--muted); font-size: var(--t-sm); font-weight: 600; padding-block: var(--s3); }
.nav nav a:not(.btn):hover { color: var(--text); }
@media (max-width: 560px) { .nav nav .nav-secondary { display: none; } }

.site-footer { border-top: 1px solid var(--border); padding: 10px 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin-top: var(--s8); }
/* A page that already ends in a padded section doesn't need the extra gap. */
main:has(> .section:last-child) + .site-footer, main.section + .site-footer { margin-top: 0; }
/* One row on desktop (copyright left, links right); at most two short rows on phones. */
.footer-grid { display: flex; flex-wrap: wrap; gap: 0 var(--s5); justify-content: space-between; align-items: center; }
.footer-grid > p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); list-style: none; padding: 0; margin: 0; }
.footer-links a { display: inline-block; padding-block: 5px; color: var(--muted); }
.footer-links a:hover { color: var(--text); }
/* Phones: one line instead of two. "Support us on" is hidden visually only, so screen readers still
   hear the full link name. */
@media (max-width: 599px) {
  .footer-grid, .footer-links { flex-wrap: nowrap; gap: 0 var(--s3); white-space: nowrap; }
  .footer-links .wide-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  /* The address is too long for one line at 320px: show "Email" (the address stays in the name). */
  .footer-links a[data-contact-email] { font-size: 0; }
  .footer-links a[data-contact-email]::before { content: "Email"; font-size: var(--t-sm); }
}

/* ---------- Buttons ----------
   One primary (.btn), one secondary (.btn-ghost), one danger (.btn-danger / .btn-danger-outline). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s5);
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  text-align: center;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); text-decoration: none; }
.btn:active { background: var(--accent-hover); }
.btn:focus-visible { outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover, .btn-ghost:active { background: var(--bg-alt); color: var(--text); border-color: var(--text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--danger-text); }
.btn-danger:hover, .btn-danger:active { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--danger-text); }
.btn-danger-outline { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover, .btn-danger-outline:active { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-small { min-height: 40px; padding: 0 var(--s4); font-size: .9375rem; }
@media (pointer: coarse) { .btn-small { min-height: 44px; } }
/* One size for every secondary action on the results page; no wrapping, same width when stacked. */
.btn-uniform { min-height: 44px; font-size: .9375rem; padding: 0 var(--s4); white-space: nowrap; min-width: 15rem; }
.btn-wide { min-width: 12rem; }
.other-photo { margin: var(--s4) 0 0; font-size: var(--t-sm); }
.other-photo .btn-link { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 480px) { .btn-uniform { width: 100%; min-width: 0; } }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: auto; font-weight: 600; }
.btn-link:hover { color: var(--accent-hover); }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); align-items: center; }

/* ---------- Landing: hero = headline + live example ---------- */
.hero { padding: var(--s6) 0 var(--s7); }
@media (min-width: 900px) { .hero { padding: var(--s6) 0 var(--s8); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
.hero-copy > :last-child { margin-bottom: 0; }
.lead { font-size: clamp(1rem, .95rem + .35vw, var(--t-md)); color: var(--muted); max-width: 46ch; }
.hero h1 { margin-bottom: var(--s4); text-wrap: balance; }
.hero .lead { margin-bottom: 0; }
.hero .actions { margin-top: var(--s5); }
@media (max-width: 479px) { .hero .actions { flex-wrap: nowrap; } .hero .actions .btn { flex: 1 1 0; padding-inline: var(--s3); } }
.hero-meta { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--muted); }
#engine-status { margin: var(--s4) 0 0; }
/* The example's parts are laid out directly in the hero grid. */
.hero-demo { display: contents; }
.hero-demo > .ba { order: 2; }
.hero-demo > .ba-picks { order: 3; }
.hero-demo > .ba-info { order: 4; }
.hero-demo > .ba-more { order: 5; }
/* Tablet: headline on top, slider left, controls right (compact version buttons). */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy ba" "info ba" "picks ba" "more more"; grid-template-rows: auto auto auto 1fr; column-gap: var(--s5); row-gap: var(--s4); }
  .hero-copy { grid-area: copy; }
  .hero h1 { font-size: 2rem; }
  .hero-demo > .ba { grid-area: ba; }
  .hero-demo > .ba-info { grid-area: info; }
  .hero-demo > .ba-picks { grid-area: picks; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .hero-demo > .ba-more { grid-area: more; }
  .hero-demo .pick-img { display: none; }
  .hero-demo .pick { padding: var(--s2) var(--s3); }
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "copy ba" "info ba" "picks ba" "more ba";
    column-gap: var(--s8); row-gap: var(--s5);
  }
  .hero-copy { grid-area: copy; }
  .hero-demo > .ba { grid-area: ba; }
  .hero-demo > .ba-info { grid-area: info; border-top: 1px solid var(--border); padding-top: var(--s5); margin-top: var(--s3); }
  .hero-demo > .ba-picks { grid-area: picks; }
  .hero-demo > .ba-more { grid-area: more; }
  .hero-demo .pick-img { display: none; }
  .hero-demo .pick { padding: var(--s2) var(--s3); }
}
/* Small laptops: a narrower example keeps the copy column wide enough for a two-line headline. */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: var(--s6); }
  .hero h1 { font-size: 2.5rem; }
}

.section { padding: var(--s8) 0; }
@media (min-width: 900px) { .section { padding: var(--s9) 0; } }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section-intro { max-width: 60ch; color: var(--muted); }

/* How it works: three plain columns, numbered, no cards. */
.steps { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.steps li { counter-increment: step; border-top: 1px solid var(--border-strong); padding-top: var(--s4); }
.steps li::before { content: counter(step); display: block; font-family: var(--font-head); font-size: var(--t-xl); line-height: 1; color: var(--accent); margin-bottom: var(--s3); }
.steps h3 { margin-bottom: var(--s2); }
.steps p { color: var(--muted); margin: 0; }

/* Heading above the list, one readable column (a side-by-side heading left a dead column on desktop). */
.faq-grid { display: grid; gap: var(--s5); }
.faq { border-top: 1px solid var(--border); max-width: 48rem; }
.faq-grid > h2 { margin-bottom: 0; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; padding: var(--s3) var(--s7) var(--s3) 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
/* Chevron drawn with borders (no glyphs). */
.faq summary::after { content: ""; position: absolute; right: var(--s2); top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--accent); }
.faq details > div { padding: 0 0 var(--s4); color: var(--muted); max-width: 65ch; }
.faq details > div > :last-child { margin-bottom: 0; }
.faq details ol { padding-left: 1.25em; margin: 0 0 var(--s3); }
.faq details li + li { margin-top: var(--s2); }
.print-help { margin-top: var(--s5); max-width: 48rem; }


/* ---------- Prose ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--font-body); font-size: var(--t-lg); letter-spacing: -.01em; margin-top: var(--s6); }
.prose h3 { margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: var(--s5); }
.prose li { margin-bottom: var(--s1); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); margin: var(--s4) 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }
.prose th { background: var(--bg-alt); }
/* Native checkbox (role="switch") so it keeps keyboard, forced-colours and screen-reader behaviour for free. */
.switch { display: flex; align-items: center; gap: var(--s2); min-height: 44px; margin-bottom: 0; }
.switch input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); }
.switch label { font-weight: 600; }
.draft-banner { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); padding: var(--s3) var(--s4); margin: 0 0 var(--s6); border-radius: var(--radius); }
.placeholder { background: var(--warn-bg); padding: 0 .2em; }
.error-code { font-size: var(--t-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--s2); }

/* ---------- Notices ---------- */
.notice { border: 1px solid var(--border); padding: var(--s3) var(--s4); margin: var(--s4) 0; background: var(--surface); border-radius: var(--radius); font-size: .9375rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.notice-error { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.notice-info { background: var(--info-bg); border-color: var(--info-border); }
.notice h2, .notice h3 { font-family: var(--font-body); font-size: var(--t-base); margin: 0 0 var(--s1); }
.notice ul { margin: var(--s1) 0 0; padding-left: var(--s5); }
.notice .actions { margin-top: var(--s3); }

/* ---------- Create flow ---------- */
.flow { padding: var(--s5) 0 0; }
@media (min-width: 900px) { .flow { padding-top: var(--s6); } }
.stepper { list-style: none; display: flex; gap: var(--s1); padding: 0; margin: 0 0 var(--s6); font-size: var(--t-sm); }
.stepper li { flex: 1 1 0; min-width: 0; border-top: 2px solid var(--border); padding-top: var(--s2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper li[aria-current="step"] { border-color: var(--accent); color: var(--text); font-weight: 600; }
.stepper li.done { border-color: var(--accent); color: var(--text); }
.step-panel:focus { outline: none; }
.step-panel > h1:focus, h1[tabindex="-1"]:focus, #analysing-title:focus { outline: none; }
.step-panel > h1 { font-size: var(--t-2xl); max-width: none; }
.step-panel > .lead { margin-bottom: var(--s5); }

.dropzone {
  border: 1.5px dashed var(--border-strong);
  background: var(--surface);
  padding: var(--s7) var(--s4);
  text-align: center;
  border-radius: var(--radius-lg);
  transition: background-color .15s, border-color .15s;
}
@media (min-width: 600px) { .dropzone { padding: var(--s8) var(--s5); } }
.dropzone.dragover { background: var(--accent-soft); border-color: var(--accent); }
.dropzone p { margin: var(--s2) 0; }
.dropzone .btn { margin-top: var(--s2); }
.dropzone .hint { margin-top: var(--s3); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-input:focus-visible + label { outline: var(--focus); outline-offset: 3px; }

.turnstile-box { margin: var(--s4) 0; min-height: 65px; }
.turnstile-placeholder { display: inline-flex; align-items: center; gap: var(--s3); border: 1px solid var(--border-strong); background: var(--surface); padding: var(--s3) var(--s4); font-size: var(--t-sm); max-width: 300px; border-radius: var(--radius-sm); }
.turnstile-placeholder .tick { width: 22px; height: 22px; flex: none; border: 2px solid var(--ok); border-radius: 50%; display: inline-grid; place-items: center; color: var(--ok); font-weight: 700; font-size: .75rem; }

.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto var(--s4); }
@keyframes spin { to { transform: rotate(360deg); } }
#analysing { padding: var(--s7) 0; }

.editor { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .editor { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--s7); align-items: start; } }
.crop-stage { background: var(--crop-bg); padding: var(--s2); border-radius: var(--radius); width: fit-content; max-width: 100%; }
.crop-canvas { width: 100%; height: auto; touch-action: none; cursor: move; user-select: none; -webkit-user-select: none; border-radius: 2px; }
.crop-canvas:focus-visible { outline: 3px solid #ffc21a; outline-offset: 2px; }
.crop-tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.crop-help { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s3); max-width: 60ch; }
.edit-actions { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); }
.edit-actions .hint { margin: 0; }
.edit-actions .actions { margin-top: var(--s3); }
@media (max-width: 959px) {
  /* Fixed action bar on small screens so Make my kit is always in thumb reach. */
  #step-edit { padding-bottom: 7.5rem; }
  .edit-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgb(0 0 0 / .08);
    padding: var(--s2) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  }
  .edit-actions .hint { font-size: var(--t-xs); }
  .edit-actions .actions { margin-top: var(--s2); flex-wrap: nowrap; }
  .edit-actions .btn { flex: 1 1 auto; padding-inline: var(--s3); }
  /* WCAG 2.4.11: keep focused fields clear of the fixed bar. */
  html.editing { scroll-padding-bottom: 9rem; }
  /* Room at the end of the page so the footer can scroll clear of the bar. */
  html.editing body { padding-bottom: 8rem; }
  /* While typing (on-screen keyboard open) the bar becomes part of the flow. */
  #edit-form.typing .edit-actions { position: static; box-shadow: none; border-top: 0; padding-inline: 0; }
}
.private-link { margin: var(--s6) 0 var(--s4); }
.private-link h2 { font-family: var(--font-body); font-size: var(--t-lg); letter-spacing: -.01em; }
.private-link .actions { margin-top: var(--s3); }
.private-link .text-input { margin-top: var(--s2); font-size: var(--t-sm); }
.card-heading { font-family: var(--font-body); font-size: var(--t-base); letter-spacing: -.01em; margin-bottom: var(--s1); }
.house-card .shopping h2 { font-size: var(--t-md); margin-top: var(--s4); }
@media (hover: none) and (pointer: coarse) { .drag-only { display: none; } }
@media (max-width: 420px) { .stepper { font-size: var(--t-xs); gap: var(--s1); } .stepper li { flex: 1 1 auto; overflow: visible; } }

.form-col > * + * { margin-top: var(--s5); }
.form-col > [role="alert"]:empty + * { margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, .label { font-weight: 600; display: block; margin-bottom: var(--s2); padding: 0; }
.hint { font-size: var(--t-sm); color: var(--muted); margin: var(--s1) 0 var(--s2); }
.choice-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer;
}
.choice label:hover { border-color: var(--text); }
.choice input:checked + label { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.choice input:focus-visible + label { outline: var(--focus); outline-offset: 2px; }
.choice input:disabled + label { opacity: .5; cursor: not-allowed; }
.text-input, select {
  width: 100%; min-height: 48px; padding: 0 var(--s3);
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
}
select { padding-right: var(--s2); }
.text-input:focus-visible, select:focus-visible { outline: var(--focus); outline-offset: 0; border-color: var(--accent); }
.text-input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--err-text); font-size: var(--t-sm); margin: var(--s1) 0 0; font-weight: 600; }
.counter { font-size: var(--t-sm); color: var(--muted); float: right; font-weight: 400; }

.progress-wrap { display: grid; gap: var(--s6); }
@media (min-width: 860px) { .progress-wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s7); align-items: start; } }
.progress { height: 8px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; margin: var(--s4) 0 var(--s2); }
.progress-bar { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width 1.8s linear; }
.stages { list-style: none; padding: 0; margin: var(--s5) 0; }
.stages li { padding: var(--s1) 0 var(--s1) var(--s6); position: relative; color: var(--muted); }
.stages li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--border-strong); border-radius: 50%; }
.stages li.active { color: var(--text); font-weight: 600; }
.stages li.active::before { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 6px var(--accent); }
.stages li.done { color: var(--text); }
.stages li.done::before { background: var(--ok); border-color: var(--ok); }

.step-panel > h2 { font-size: var(--t-xl); margin-top: var(--s6); }
/* Two equal download cards: side by side on wider screens, stacked full width on phones. */
.downloads { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .downloads { grid-template-columns: 1fr 1fr; } }
.downloads li { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.downloads .file-desc { flex: 1 1 auto; }
.downloads .btn-download { width: 100%; }
@media (min-width: 600px) { .downloads li { padding: var(--s5); } }
.downloads .file-desc strong { display: block; font-size: var(--t-md); margin-bottom: var(--s1); }
.downloads .file-desc span { font-size: var(--t-sm); color: var(--muted); }
.results-end { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); }
.results-end > .actions { margin-top: 0; }
.edit-kit { display: grid; gap: var(--s2); justify-items: start; margin: 0; }
.edit-kit p { margin: 0; }
/* Results: the compare frame, with what to do next beside it on wider screens. */
.results-compare { display: grid; gap: var(--s4); margin: var(--s5) 0 var(--s6); }
.results-side { display: grid; gap: var(--s3); align-content: start; }
.results-side > p { margin: 0; }
.ba.ba-results { max-width: 30rem; }
.ba.ba-results.ba-landscape { max-width: 40rem; }
.ba-no-photo .ba-tag-photo, .ba-no-photo .ba-vline { display: none; }
.ba-results .ba-template img, .ba-results .ba-kit img { background: #fff; }
@media (min-width: 860px) { .results-compare { grid-template-columns: auto minmax(14rem, 1fr); gap: var(--s6); align-items: center; } .ba.ba-results { width: 30rem; } .ba.ba-results.ba-landscape { width: 36rem; } }
/* Edit Kit: the one tinted button (between the primary downloads and the plain outlines), with its count as a pill. */
.btn-soft { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn-soft:hover, .btn-soft:active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.edit-left { display: inline-block; padding: 1px var(--s2); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: var(--t-xs); font-weight: 600; line-height: 1.6; }
.edit-left:empty { display: none; }
.confirm-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s2); padding: var(--s4); border: 1px solid var(--err-border); background: var(--err-bg); border-radius: var(--radius); }
.confirm-row p { margin: 0 0 var(--s2); flex-basis: 100%; color: var(--err-text); }

/* ---------- Ad / affiliate slots (docs/ads.md) ---------- */
.ad-slot { margin: var(--s7) auto; max-width: 100%; }
.ad-slot[data-slot="landing-incontent"] { min-height: 268px; max-width: 728px; }
.ad-slot[data-slot="results-incontent"] { min-height: 0; max-width: 728px; margin-top: var(--s7); }
/* docs/ads.md: ≥ 150 px from download/delete buttons only when a display ad is mounted. */
.ad-slot[data-slot="results-incontent"].has-display { min-height: 268px; margin-top: 150px; }
.ad-slot[data-slot="progress-aside"] { min-height: 0; margin: 0; }
/* Next to the stage list on desktop, centred on it rather than hanging from the top. */
@media (min-width: 860px) { .ad-slot[data-slot="progress-aside"] { align-self: center; } }
@media (min-width: 768px) {
  .ad-slot[data-slot="landing-incontent"] { min-height: 108px; }
  .ad-slot[data-slot="progress-aside"] { width: 320px; max-width: 100%; }
}
.ad-label { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); line-height: 18px; }
.ad-display { border: 1px dashed var(--border-strong); display: grid; place-items: center; color: var(--muted); font-size: var(--t-sm); width: 300px; height: 250px; max-width: 100%; margin-inline: auto; }
@media (min-width: 768px) { .ad-slot[data-slot="landing-incontent"] .ad-display { width: 728px; height: 90px; } }
.house-card { border: 1px solid var(--border); background: var(--surface); padding: var(--s4) var(--s5); height: 100%; border-radius: var(--radius-lg); }
.house-card h3 { font-size: var(--t-base); margin-bottom: var(--s1); }
.house-card p { font-size: .9375rem; margin-bottom: var(--s2); }
.house-card .disclosure { font-size: var(--t-xs); color: var(--muted); }

.shopping h3 { margin-bottom: var(--s1); }
.shopping .disclosure { font-size: var(--t-xs); color: var(--muted); margin: 0 0 2px; }
.shopping-groups { display: grid; gap: var(--s4) var(--s6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--s4); }
.shopping-groups h3, .shopping-groups h4 { font-family: var(--font-body); font-size: var(--t-sm); margin: 0 0 var(--s1); color: var(--muted); }
.shopping-groups ul { list-style: none; padding: 0; margin: 0; }
.shopping-groups li { padding: var(--s1) 0; border-bottom: 1px solid var(--border); font-size: .9375rem; }
.shopping-groups li .item-note { display: block; font-size: var(--t-xs); color: var(--muted); }
.swatch { display: inline-block; width: .9em; height: .9em; border: 1px solid var(--border-strong); border-radius: 2px; vertical-align: -.1em; margin-right: .35em; }

.tips { margin: 0; display: grid; gap: var(--s2); justify-items: start; }
/* Waiting screen: one tip at a time on a soft blue card; the text keeps its height so "Next tip" stays put. */
.tip-card { background: var(--accent-soft); border-color: transparent; padding: var(--s5); }
.tip-eyebrow { font-family: var(--font-body); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0; }
.tips p { min-height: 6.4em; margin: 0; font-size: var(--t-base); line-height: 1.6; }
.tip-next { min-height: 44px; display: inline-flex; align-items: center; }
.tip-next::after { content: " →"; white-space: pre; }
.gen-hint { margin-top: calc(-1 * var(--s2)); }
/* Results page: the shopping list right under the downloads, as a card. */
.ad-slot-prominent { margin: var(--s5) 0 var(--s6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--s4) var(--s5); }
.ad-slot-prominent .shopping > h2 { margin-top: 0; }

/* Consent banner stub (dormant at launch) */
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  padding: var(--s4); box-shadow: 0 -6px 20px rgb(0 0 0 / .08);
}
.consent-banner .container { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; }
.consent-banner p { margin: 0; max-width: 60ch; font-size: .9375rem; }
.consent-banner .actions { margin-top: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .spinner { border-top-color: var(--accent); }
}

/* ---------- Forced colours / print ---------- */
@media (forced-colors: active) {
  .choice input:checked + label, .segmented button[aria-pressed="true"], .pick[aria-pressed="true"] { outline: 2px solid CanvasText; }
  .progress-bar { background: Highlight; }
}
@media print {
  .site-header, .site-footer, .ad-slot, .consent-banner { display: none; }
}
.dropzone.disabled { opacity: .55; }
.dropzone.disabled label { cursor: not-allowed; pointer-events: none; }
.palette-grid { list-style: none; padding: 0; margin: var(--s1) 0 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.shopping-groups .palette-grid li { border: 0; padding: 0; }
.chip { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%; font-size: .75rem; font-weight: 600; }
.chip.light { color: #2a2420; }
.chip.dark { color: #ffffff; }
.short-label { display: none; }
@media (max-width: 480px) {
  #step-edit { padding-bottom: 5rem; }
  .edit-actions .hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .edit-actions .actions { margin-top: 0; }
  .edit-actions .btn { white-space: nowrap; }
}

/* ---------- Three-way example (landing hero) ---------- */
/* Template underneath; painted kit clipped to the top --y; photo clipped to the top-left --x × --y.
   Fixed 4:5 box (no layout shift). */
.ba { --x: 50%; --y: 80%; position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 32rem; background: var(--bg-alt); border-radius: var(--radius-lg); overflow: hidden; user-select: none; -webkit-user-select: none; box-shadow: var(--shadow); cursor: move; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-layer { position: absolute; inset: 0; }
.ba-kit { clip-path: inset(0 0 calc(100% - var(--y)) 0); }
/* Clipped to the strip it shows (the rest is covered anyway), so it isn't measured as the largest paint. */
.ba-template { clip-path: inset(var(--y) 0 0 0); }
.ba-photo { clip-path: inset(0 calc(100% - var(--x)) calc(100% - var(--y)) 0); }
.ba-vline, .ba-hline { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .25); pointer-events: none; }
.ba-vline { top: 0; height: var(--y); left: var(--x); width: 2px; margin-left: -1px; }
.ba-hline { left: 0; right: 0; top: var(--y); height: 2px; margin-top: -1px; }
/* The knob is the only touch drag target, so swiping the picture still scrolls the page on phones. */
.ba-knob { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .2); touch-action: none; }
.ba-knob::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.ba-knob::after { content: ""; position: absolute; inset: 0; background: no-repeat center / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316181d'%3E%3Cpath d='M12 2l3 3.5H9zM12 22l-3-3.5h6zM2 12l3.5-3v6zM22 12l-3.5 3V9z'/%3E%3C/svg%3E"); }
.ba.snapping .ba-layer { transition: clip-path .35s ease; }
.ba.snapping .ba-vline { transition: left .35s ease, height .35s ease; }
.ba.snapping .ba-hline { transition: top .35s ease; }
.ba.snapping .ba-knob { transition: left .35s ease, top .35s ease; }
.ba-tag { position: absolute; padding: 2px var(--s2); font-size: var(--t-xs); font-weight: 600; background: rgb(22 24 29 / .78); color: #fff; border-radius: var(--radius-sm); pointer-events: none; transition: opacity .2s ease; }
.ba-tag-photo { top: var(--s3); left: var(--s3); }
.ba-tag-kit { top: var(--s3); right: var(--s3); }
.ba-tag-tpl { bottom: var(--s3); left: var(--s3); }
.ba.no-photo .ba-tag-photo, .ba.no-kit .ba-tag-kit, .ba.no-tpl .ba-tag-tpl { opacity: 0; }
.ba-ranges { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ba:has(.ba-range:focus-visible) { outline: var(--focus); outline-offset: 3px; }
/* Two sliders share one knob: colour the divider the focused one moves, so keyboard users can tell them apart. */
.ba:has(.ba-range-x:focus-visible) .ba-vline, .ba:has(.ba-range-y:focus-visible) .ba-hline { background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.ba:has(.ba-range:focus-visible) .ba-knob { outline: var(--focus); outline-offset: 2px; }
#cmp-stack img, #cmp-tpl img { transition: opacity .25s ease; }
#cmp-stack img.incoming, #cmp-tpl img.incoming { opacity: 0; }
.ba-info, .ba-more { display: grid; gap: var(--s3); align-content: start; }
.ba-info > *, .ba-more > * { margin: 0; }
.cmp-stats { font-size: var(--t-sm); color: var(--muted); }
.cmp-stats strong { color: var(--text); }
.cmp-full { font-size: var(--t-sm); color: var(--muted); }
.cmp-full a { display: inline-block; padding-block: var(--s2); }
.ex-picker-wrap { display: flex; align-items: center; gap: var(--s3); }
.ex-picker-wrap > p { margin: 0; }
.ex-picker { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ex-picker button { padding: 2px; border: 1px solid transparent; border-radius: var(--radius); background: none; cursor: pointer; line-height: 0; }
.ex-picker button img { width: 40px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.ex-picker button:hover { border-color: var(--border-strong); }
.ex-picker button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Four version buttons: compact text buttons 2 x 2 on small phones, thumbnails 4-up from 480 px. */
.ba-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
@media (min-width: 480px) { .ba-picks { gap: var(--s3); } }
.pick { display: grid; align-content: start; gap: 2px; min-height: 56px; padding: var(--s2) var(--s3); text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; }
@media (min-width: 480px) { .pick { padding: var(--s1) var(--s1) var(--s2); } .pick-label, .pick-meta { padding-inline: var(--s1); } }
.pick:hover { border-color: var(--text); }
.pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.pick-img { position: relative; display: none; aspect-ratio: 4 / 5; background: var(--bg-alt); overflow: hidden; margin-bottom: var(--s1); border-radius: var(--radius-sm); }
@media (min-width: 480px) { .pick-img { display: block; } }
.pick-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-label { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-meta { font-size: .75rem; color: var(--muted); min-height: 1.2em; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .ba.snapping *, #cmp-stack img, #cmp-tpl img, .ba-tag { transition: none; } }
.error-page { margin-inline: auto; }
.error-page h1, .error-page .lead { margin-inline: auto; }
.error-page .actions { justify-content: center; }

/* Hints that only matter on small touch screens (e.g. how to handle the ZIP). */
.phone-only { display: none; }
@media (max-width: 599px), (pointer: coarse) and (max-width: 899px) { .phone-only { display: block; margin-top: var(--s1); } }

/* Upload step: photo tips with tiny good/bad illustrations (inline SVG, no photos). */
.photo-tips { margin-top: var(--s5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.photo-tips > summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 600; }
.photo-tips-body { padding: 0 var(--s4) var(--s4); }
.photo-tips ul { margin: var(--s4) 0 0; padding-left: 1.25em; color: var(--muted); }
.photo-tips li + li { margin-top: var(--s1); }
.photo-tips li strong { color: var(--text); }
.tip-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s4) var(--s3); }
.tip-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.tip-tile { margin: 0; text-align: center; font-size: var(--t-xs); }
.tip-tile svg { display: block; margin: 0 auto var(--s1); }
.tip-mark { font-weight: 700; margin-right: 3px; }
.tip-good { color: var(--ok); }
.tip-bad { color: var(--danger); }
.ill-bg { fill: var(--bg-alt); stroke: var(--border); }
.ill-dark { fill: #2a2c33; }
.ill-subject { fill: #c7853a; }
.ill-dim { fill: #4a3a28; }
.ill-clutter { fill: var(--border-strong); opacity: .5; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }