/*
 * Preslab — the status window (DESIGN.md).
 *
 * One azure ground, flat navy windows with a white outline and a gold diamond in the title
 * bar, gold as the only accent. Chakra Petch speaks for the system (names, numbers, labels,
 * buttons); Zen Kaku Gothic New speaks in sentences. Square corners everywhere except the card
 * and the shutter. No shadows except the card's. Sentence case, nothing tracked wide.
 *
 * This one file styles the public page (preslab/web) and the share pages the Worker renders
 * (preslab/worker), so it lives in public/ under a fixed name.
 */

@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/zen-kaku-gothic-new-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/zen-kaku-gothic-new-latin-700-normal.woff2") format("woff2"); }

:root {
  --azure: #1b5fd9;
  --gold: #ffe14a;
  --ink: #0b1f5c;
  --white: #ffffff;
  --soft: #e2ebff;
  --window: rgba(6, 22, 70, 0.45);
  --window-camera: rgba(6, 22, 70, 0.8);
  --line: rgba(255, 255, 255, 0.9);
  --row-line: rgba(255, 255, 255, 0.35);
  --rule: rgba(255, 255, 255, 0.5);
  --dashed: rgba(255, 255, 255, 0.7);
  --track: rgba(255, 255, 255, 0.2);
  --hatch-gap: rgba(255, 225, 74, 0.35);
  --well: #0a1a4a;
  --viewfinder: #08153c;
  --display: "Chakra Petch", sans-serif;
  --body: "Zen Kaku Gothic New", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --stroke: 1.5px;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--azure);
  color: var(--white);
  font-family: var(--body);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: var(--white); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
button { font: inherit; color: inherit; cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { cursor: not-allowed; opacity: 0.55; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ink); }
h1, h2, h3, p { margin: 0; }

.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-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--gold); color: var(--ink); font: 700 15px var(--display); }
.skip-link:focus { top: 12px; color: var(--ink); }

/* ── Layout ─────────────────────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.section { padding-bottom: 72px; }
.gold { color: var(--gold); }
.nowrap { white-space: nowrap; }
.soft { color: var(--soft); }

/* ── Type ───────────────────────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 0.98;
  font-size: clamp(37px, 6.5vw, 94px); text-wrap: balance;
}
.headline {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.04;
  font-size: clamp(36px, 4.4vw, 60px); text-wrap: balance;
}
.headline--section { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; }
.title { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; }
.lede { font-size: 20px; line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.body { font-size: 16.5px; line-height: 1.5; }
.note { font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.fine-print { font-size: 13px; line-height: 1.45; color: var(--soft); }
.measure-66 { max-width: 66ch; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--body); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: 0; color: var(--white);
}
.text-link:hover { color: var(--gold); filter: none; }
.text-link--center { justify-content: center; width: 100%; }

@media (max-width: 640px) {
  body { font-size: 15.5px; line-height: 1.45; }
  .body { font-size: 15.5px; line-height: 1.45; }
}

/* ── Header and footer ──────────────────────────────────────────────────────────────────── */

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 32px; padding-top: 14px; padding-bottom: 6px; min-height: 64px;
}
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 38px);
  line-height: 1; letter-spacing: 0.01em; color: var(--white); text-decoration: none;
}
.wordmark:hover { color: var(--white); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 30px; font-family: var(--display); font-size: 17px; font-weight: 600; }
.nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: var(--stroke) solid var(--gold); background: var(--window); color: var(--gold);
  font-family: var(--display); font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.nav-cta:hover { color: var(--gold); filter: brightness(1.12); }
@media (max-width: 640px) {
  .nav .nav-link { display: none; }
  .site-header { padding-top: 12px; min-height: 60px; }
  .nav-cta--quiet-phone { border: 0; background: none; padding: 0; color: var(--white); font: 700 15px var(--body); text-decoration: underline; text-underline-offset: 3px; }
}

.site-footer { border-top: var(--stroke) solid var(--rule); margin-top: 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 48px; padding-top: 32px; padding-bottom: 48px; }
.site-footer__brand { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand .wordmark { font-size: 26px; }
.site-footer__brand p { max-width: 58ch; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
/* The camera and retake screens carry neither the disclaimer nor the not-affiliated line (PRODUCT.md). */
body:has(.camera, .retake) .site-footer { display: none; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15.5px; font-weight: 700; }
.legal-nav a, .legal-nav button { display: flex; align-items: center; min-height: 44px; }

/* ── Window ─────────────────────────────────────────────────────────────────────────────── */

.window { border: var(--stroke) solid var(--line); background: var(--window); min-width: 0; }
.window__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 0 0 0 14px; border-bottom: var(--stroke) solid var(--line);
  font-family: var(--display); font-size: 15px; font-weight: 600;
}
.window__name { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 0; margin: 0; font: inherit; }
.window__value { padding-right: 14px; color: var(--gold); }
.diamond { flex: none; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
/* The wide title bar of a full-width desktop window; on a phone it is the standard bar. */
@media (min-width: 760px) {
  .window__bar--wide { padding-left: 20px; }
  .window__bar--wide .window__name { padding: 10px 20px 10px 0; gap: 12px; font-family: var(--display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.2; }
  .window__bar--wide .diamond { width: 10px; height: 10px; }
  .window__bar--wide.window__bar--quiet .window__name { font-size: 17px; font-weight: 600; }
}
.window__bar-control {
  min-width: 72px; min-height: 44px; padding: 0 14px; border: 0; border-left: var(--stroke) solid var(--line);
  background: transparent; color: var(--white); font: 600 15px var(--display);
}
.window__body { padding: 14px 16px 16px; }
.window__body--compact { padding: 12px 14px 14px; }
.window__body--wide { padding: 16px 20px 20px; }
.window__footer-action {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px;
  border: 0; border-top: var(--stroke) solid var(--line); background: transparent; color: var(--white);
  font: 600 15px var(--display);
}
.window__footer { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px 14px; border-top: var(--stroke) solid var(--line); }
.window--camera { background: var(--window-camera); }
.window--viewfinder { background: var(--viewfinder); }

/* The System message: the only window with a gold border. */
.window--system { border-color: var(--gold); }
.window--system > .window__bar { border-bottom-color: var(--gold); color: var(--gold); }
.system-message__text { padding: 14px 16px 16px; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.system-message__lead { font-weight: 700; color: var(--gold); }
@media (min-width: 760px) {
  .system-message--display .system-message__text { font-size: 16px; }
  .system-message--display .system-message__lead {
    display: block; margin-bottom: 4px; font-family: var(--display); font-size: 21px; line-height: 1.25;
  }
}
.system-message__heading { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; margin-bottom: 6px; }

/* ── Buttons ────────────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border: var(--stroke) solid var(--line);
  background: var(--window); color: var(--white); text-decoration: none; text-align: center;
  font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.15;
}
.btn:hover { color: var(--white); }
.btn--primary { min-height: 58px; padding: 0 28px; border: 0; background: var(--gold); color: var(--ink); font-size: 19px; font-weight: 700; }
.btn--primary:hover { color: var(--ink); }
.btn--hero { min-height: 62px; padding: 0 38px; font-size: 21px; }
.btn--in-window { min-height: 48px; background: transparent; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.btn--tall { min-height: 52px; }
.btn[aria-busy="true"] { cursor: progress; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── Segmented control ──────────────────────────────────────────────────────────────────── */

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--stroke) solid var(--line); }
.segmented button {
  min-height: 44px; padding: 0 6px; border: 0; border-left: var(--stroke) solid var(--line);
  background: transparent; color: var(--white); font: 600 13.5px var(--display);
}
.segmented button:first-child { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--gold); color: var(--ink); font-weight: 700; }
.segmented--bar { border: 0; display: flex; }
.segmented--bar button { min-width: 72px; font-size: 14px; border-left: var(--stroke) solid var(--line); }
.segmented--bar button:first-child { border-left: var(--stroke) solid var(--line); }
.field-label { font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--soft); margin-bottom: 6px; display: block; }

/* ── Chips ──────────────────────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; padding: 1px 10px; border: var(--stroke) solid transparent;
  font: 700 14px var(--display); line-height: 1.5; white-space: nowrap;
}
.chip--clear { background: var(--gold); color: var(--ink); }
.chip--line { border-style: dashed; border-color: var(--gold); color: var(--gold); }
.chip--out { border-color: rgba(255, 255, 255, 0.85); color: var(--white); }
.chip--muted { border-color: var(--dashed); color: var(--soft); }

/* ── Gauge ──────────────────────────────────────────────────────────────────────────────── */

.gauge { position: relative; height: 46px; }
.gauge__track, .gauge__band { position: absolute; top: 8px; height: 10px; }
.gauge__track { left: 0; right: 0; background: var(--track); }
.gauge__band { background: var(--gold); }
.gauge__band--hatched { background: repeating-linear-gradient(90deg, var(--gold) 0 5px, var(--hatch-gap) 5px 9px); }
.gauge__tick { position: absolute; top: 0; width: 2px; height: 26px; margin-left: -1px; background: var(--white); }
.gauge__label { position: absolute; top: 30px; font: 600 12px var(--display); white-space: nowrap; color: var(--white); }
.gauge__label--start { left: 0; color: var(--soft); }
.gauge__label--limit { transform: translateX(-50%); }
.gauge__label--limit-start { transform: none; }
.gauge--compact { height: 42px; }
.gauge--compact .gauge__track, .gauge--compact .gauge__band { top: 7px; height: 8px; }
.gauge--compact .gauge__tick { height: 22px; }
.gauge--compact .gauge__label { top: 26px; font-size: 12px; }
.gauge--level { height: 26px; }

/* ── Status ─────────────────────────────────────────────────────────────────────────────── */

.status-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-bottom: var(--stroke) solid var(--row-line); }
.status-row:last-child { border-bottom: 0; }
.status-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.status-row__grade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.status-row__name { font: 700 30px var(--display); line-height: 1; }
.status-row__value { font: 600 21px var(--display); color: var(--gold); }
.status-row__sentence { font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.status-row--compact { padding: 12px 14px; gap: 6px; }
.status-row--compact .status-row__head { flex-wrap: wrap; gap: 0 10px; }
.status-row--compact .status-row__name { font-size: 24px; }
.status-row--compact .status-row__value { font-size: 17px; }
@media (max-width: 640px) {
  .status-row__name { font-size: 28px; }
  .status-row__value { font-size: 20px; }
}

/* ── Target ─────────────────────────────────────────────────────────────────────────────── */

.target__stage {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; grid-template-rows: 56px auto 56px;
  align-items: center; justify-items: center; padding: 0 0 4px;
}
.target__reading { font: 700 30px var(--display); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.target__reading--top { grid-area: 1 / 2; }
.target__reading--left { grid-area: 2 / 1; }
.target__reading--right { grid-area: 2 / 3; }
.target__reading--bottom { grid-area: 3 / 2; }
.target__card {
  grid-area: 2 / 2; position: relative; width: 100%; max-width: 300px; aspect-ratio: 750 / 1050;
  border-radius: 4.2% / 3%; box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35); background: var(--well);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.target__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; border-radius: inherit; }
.target__outline { position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: inherit; pointer-events: none; }
.target__inner { position: absolute; border: 2px dashed var(--gold); pointer-events: none; }
.target__handle {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; touch-action: none;
}
.target__handle::after { content: ""; display: block; width: 14px; height: 14px; background: var(--gold); border: 2px solid var(--ink); }
.target__handle--v { top: 0; bottom: 0; width: 32px; margin-left: -16px; cursor: ew-resize; }
.target__handle--h { left: 0; right: 0; height: 32px; margin-top: -16px; cursor: ns-resize; }
.target__note { padding: 0 16px 12px; text-align: center; }
.target__empty { grid-area: 2 / 2; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; aspect-ratio: 750/1050; border: var(--stroke) dashed var(--gold); background: rgba(6, 22, 70, 0.5); text-align: center; padding: 16px; }
.target--compact .target__stage { grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: 60px auto 60px; }
.target--compact .target__reading { font-size: 26px; }
.target--compact .target__card { max-width: 196px; }

/* ── Result layout ──────────────────────────────────────────────────────────────────────── */

.result-head { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; padding-bottom: 16px; }
@media (min-width: 760px) { .result-head { padding-top: 16px; padding-bottom: 20px; } }
.result {
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "system" "target" "status" "crops" "share" "feedback" "supplies" "fine";
  padding-bottom: 28px;
}
.result > .area-system { grid-area: system; }
.result > .area-target { grid-area: target; }
.result > .area-status { grid-area: status; }
.result > .area-share { grid-area: share; }
.result > .area-crops { grid-area: crops; }
.result > .area-feedback { grid-area: feedback; }
.result > .area-supplies { grid-area: supplies; }
.result > .area-fine { grid-area: fine; }
@media (min-width: 760px) {
  .result {
    gap: 20px 36px; align-items: start;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    /* Five graders stand taller than the card: sharing and feedback sit under the card, beside them. */
    grid-template-rows: auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
      "system system" "target status" "share status" "feedback status" ". status"
      "crops crops" "supplies supplies" "fine fine";
  }
  .result > .area-crops { margin-top: 24px; }
}
@media (min-width: 1000px) {
  .result {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr) 300px;
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas:
      "system system ." "target status supplies" "share status supplies" "feedback status supplies" ". status supplies"
      "crops crops crops" "fine fine fine";
  }
  /* In the 300 px side column the links read as a list. */
  .result:not(.result--two) > .area-supplies .supplies__links { flex-direction: column; }
}
/* A front and a back. A phone shows one card at a time, switched in the window's bar. */
.result--two { grid-template-areas: "system" "front" "back" "status" "crops" "share" "feedback" "supplies" "fine"; }
.result--two > .area-target--front { grid-area: front; }
.result--two > .area-target--back { grid-area: back; }
@media (max-width: 759.98px) { .result--two > .area-target.is-other-side { display: none; } }
/* From a tablet up, both cards show, side by side, and the switch goes. */
@media (min-width: 760px) {
  .side-switch { display: none; }
  .result--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "system system" "front back" "status status" "share share"
      "crops crops" "feedback feedback" "supplies supplies" "fine fine";
  }
}
/* On a desktop the gauges sit beside the two cards, with sharing and feedback under the cards,
   and the crops below take the full width, the front's beside the back's as the cards are above. */
@media (min-width: 1100px) {
  .result--two {
    grid-template-columns: minmax(0, 380px) minmax(0, 380px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto auto;
    grid-template-areas:
      "system system system" "front back status" "share share status" "feedback feedback status" ". . status"
      "crops crops crops" "supplies supplies supplies" "fine fine fine";
  }
  .result--two .look-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 36px; align-items: start; }
}
.share-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 760px) { .share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.share-note { margin-top: 6px; }

/* Corner crops */
.crop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .crop-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.crop-tile {
  position: relative; aspect-ratio: 1 / 1; padding: 0; border: var(--stroke) solid var(--line);
  background: var(--well); color: var(--white); overflow: hidden; display: block; width: 100%;
}
.crop-tile img { width: 100%; height: 100%; object-fit: cover; }
.crop-tile__label {
  position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: rgba(6, 22, 70, 0.8);
  font: 600 13px var(--display); text-align: left;
}

/* One side's corners, then its four edge strips. */
.look-sides { display: flex; flex-direction: column; gap: 28px; }
.look-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.look-side__name { margin: 0; font: 700 20px var(--display); }
@media (min-width: 760px) { .look-side .crop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip-list { display: flex; flex-direction: column; gap: 10px; }
.strip { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.strip__name { font: 600 13px var(--display); color: var(--soft); }
/* The whole edge at a glance; on a phone it keeps a legible height and scrolls sideways. */
.strip__view {
  display: block; width: 100%; padding: 0; overflow-x: auto; border: var(--stroke) solid var(--line);
  background: var(--well); cursor: zoom-in; line-height: 0; text-align: left;
}
.strip__view img { width: 100%; height: auto; max-width: none; }
@media (max-width: 759.98px) { .strip__view img { min-width: 640px; } }
.zoom-strip { overflow-x: auto; background: var(--well); line-height: 0; }
.zoom-strip img { height: auto; width: auto; max-width: none; }

/* Feedback: a window on the phone, a plain row on the desktop. */
.feedback-window__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 6px; }
.feedback-window__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feedback-row__title { display: none; font: 700 20px var(--display); }
@media (min-width: 760px) {
  .feedback-window { border: 0; background: none; }
  .feedback-window > .window__bar { display: none; }
  .feedback-window__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 0; }
  .feedback-window__buttons { display: flex; gap: 10px; }
  .feedback-window__buttons .btn { background: var(--window); }
  .feedback-row__title { display: block; }
}

/* ── Supplies: affiliate links ──────────────────────────────────────────────────────────── */

/* Not part of the reading: the dashed outline, on the bare ground, never inside a window. */
.supplies { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: var(--stroke) dashed var(--dashed); min-width: 0; }
.supplies__title { margin: 0; font: 700 17px var(--display); }
.supplies__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }

/* ── Home, camera, retake ───────────────────────────────────────────────────────────────── */

.photo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo-slot {
  position: relative; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: var(--stroke) dashed var(--gold); background: rgba(6, 22, 70, 0.5); color: var(--white); padding: 0;
  font: 700 17px var(--display); overflow: hidden;
}
.photo-slot__hint { font: 500 14px var(--body); color: var(--soft); }
.photo-slot__caption { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.drop-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .drop-hint { display: inline; } }
/* A photo being dragged over the slot. */
.photo-slot--over { border-style: solid; background: rgba(255, 225, 74, 0.16); }
/* Filled: the whole photo, uncropped, above its caption. Both slots take the taller one's height. */
.photo-slot--filled { border-style: solid; min-height: 300px; justify-content: flex-end; background: var(--well); }
.photo-slot--filled img { position: absolute; left: 8px; top: 8px; width: calc(100% - 16px); height: calc(100% - 60px); object-fit: contain; }
.photo-slot--filled .photo-slot__caption { position: relative; flex-direction: row; align-items: baseline; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; }
.rules-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.4; color: var(--soft); }
.before-you-shoot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: var(--stroke) solid var(--rule); }
.before-you-shoot__title { font: 600 15px var(--display); }

.checks-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; font-size: 15.5px; }
.checks-list__row { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.checks-list__row--failed { font-weight: 700; }

.retake-preview { position: relative; height: 206px; background: var(--well); display: flex; align-items: center; justify-content: center; }
.retake-preview img { max-height: 180px; width: auto; }

.camera {
  position: fixed; inset: 0; z-index: 20; background: var(--viewfinder); overflow: hidden;
  display: flex; flex-direction: column;
}
.camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera__top { position: relative; margin: 12px 16px 0; display: flex; align-items: center; justify-content: space-between; }
.camera__guide { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(65vw, 46vh); aspect-ratio: 63 / 88; }
.camera__card-outline { position: absolute; inset: 0; border: 2px solid var(--gold); border-radius: 4.7% / 3.4%; }
.camera__safe { position: absolute; inset: -9.5%; border: var(--stroke) dashed rgba(255, 255, 255, 0.6); }
.camera__bottom { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.shutter { align-self: center; display: flex; padding: 4px; border: 2px solid var(--gold); border-radius: 50%; }
.shutter button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--gold); }
.shutter button.is-unlit, .shutter button:disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); opacity: 1; }
.camera__top .window { flex: 1; }
.camera__top .window__bar { border-bottom: 0; }
.camera__hint { text-align: center; font-size: 13px; color: var(--soft); }

.progress-window .window__body { display: flex; flex-direction: column; gap: 10px; }
.progress-bar { position: relative; height: 10px; background: var(--track); overflow: hidden; }
.progress-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); transition: width 0.4s ease-out; }
.progress-bar--busy .progress-bar__fill { width: 30%; animation: pl-scan 1.4s linear infinite; }
@keyframes pl-scan { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .progress-bar--busy .progress-bar__fill { animation: none; width: 100%; opacity: 0.6; }
  .progress-bar__fill { transition: none; }
}

/* Dialogs */
.dialog { border: var(--stroke) solid var(--line); background: #0d2a74; color: var(--white); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; }
.dialog::backdrop { background: rgba(6, 22, 70, 0.7); }
.dialog .window__body { display: flex; flex-direction: column; gap: 12px; }
.input, .textarea, .select {
  width: 100%; min-height: 44px; padding: 10px 12px; border: var(--stroke) solid var(--line); border-radius: 0;
  background: var(--well); color: var(--white); font: 500 16px var(--body);
}
.textarea { min-height: 110px; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font: 600 14px var(--display); color: var(--soft); }
.copy-field { display: flex; gap: 8px; }
.copy-field .input { font-family: var(--display); font-size: 15px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14.5px; line-height: 1.45; }
.check-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); flex: none; }

/* ── Landing ────────────────────────────────────────────────────────────────────────────── */

.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 44px 56px; padding-top: 28px; padding-bottom: 72px; }
.hero__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero__windows { flex: 1 1 520px; max-width: 600px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hero__target { flex: 1 1 280px; min-width: 0; }
.hero__stack { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 640px) { .hero { padding-top: 12px; gap: 28px; } .lede { font-size: 17px; } }

.limits-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.limits-table thead th { padding: 12px 20px 8px; text-align: left; font: 500 14.5px var(--body); color: var(--soft); }
.limits-table tbody tr { border-top: var(--stroke) solid var(--row-line); }
.limits-table tbody th { padding: 14px 20px; text-align: left; font: 700 34px var(--display); }
.limits-table td { padding: 14px 20px; line-height: 1.45; color: var(--soft); }
.limits-table td.limits-table__value { font: 600 28px var(--display); color: var(--gold); white-space: nowrap; }
@media (max-width: 640px) {
  .limits-table thead { display: none; }
  .limits-table tbody tr { display: grid; grid-template-columns: auto 1fr 1fr; align-items: baseline; gap: 4px 16px; padding: 14px 16px; }
  .limits-table tbody th, .limits-table td { padding: 0; }
  .limits-table tbody th { font-size: 28px; }
  .limits-table td.limits-table__value { font-size: 22px; }
  .limits-table td:last-child { grid-column: 1 / 4; }
  .limits-table td.limits-table__value::before { display: block; font: 500 12px var(--body); color: var(--soft); }
  .limits-table td.limits-table__front::before { content: "Front"; }
  .limits-table td.limits-table__back::before { content: "Back"; }
}

.checked-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.checked-grid > div { padding: 18px 20px; border-bottom: var(--stroke) solid var(--row-line); }
.checked-grid > div:nth-child(even) { padding: 16px 20px 18px 0; font-size: 17px; line-height: 1.5; }
.checked-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
.checked-grid strong { font: 700 20px var(--display); }
@media (max-width: 640px) {
  .checked-grid { grid-template-columns: 1fr; }
  .checked-grid > div:nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
  .checked-grid > div:nth-child(even) { padding-left: 20px; }
  .checked-grid > div:nth-last-child(2) { border-bottom: 0; }
}

.rules-section { display: flex; flex-wrap: wrap; gap: 36px 48px; align-items: flex-start; }
.rules-section__guide { flex: 0 1 360px; min-width: 0; }
.rules-section__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px 40px; font-size: 16.5px; line-height: 1.5; }
.guide-art { position: relative; height: 400px; }
.guide-art__card { position: absolute; left: 50%; top: 44px; width: 190px; height: 265px; margin-left: -95px; border: 2px solid var(--gold); border-radius: 10px; }
.guide-art__safe { position: absolute; left: 50%; top: 26px; width: 226px; height: 301px; margin-left: -113px; border: var(--stroke) dashed rgba(255, 255, 255, 0.6); }
.guide-art__level { position: absolute; left: 24px; right: 24px; top: 350px; }

.guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.guide-link {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 20px; border-bottom: var(--stroke) solid var(--row-line);
  font: 600 20px var(--display); text-decoration: none;
}
.guide-link::before { content: ""; width: 0; height: 0; border-left: 10px solid var(--gold); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* ── Prose pages (guides, terms, privacy) ───────────────────────────────────────────────── */

.prose { display: flex; flex-direction: column; gap: 16px; max-width: 70ch; font-size: 16.5px; line-height: 1.6; }
.prose h2 { font: 700 clamp(22px, 2.3vw, 28px) var(--display); line-height: 1.2; margin-top: 16px; }
.prose h3 { font: 700 19px var(--display); margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: var(--stroke) solid var(--row-line); }
.prose th { font: 600 15px var(--display); }
.prose td.gold { font-family: var(--display); font-weight: 600; }
.page-title-block { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; padding-bottom: 32px; }

/* ── Share page (the Worker) ────────────────────────────────────────────────────────────── */

.shared { display: grid; gap: 20px 36px; grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
@media (min-width: 900px) { .shared { grid-template-columns: repeat(2, minmax(0, 460px)) minmax(0, 1fr); align-items: start; } }
.shared__meta { display: flex; flex-direction: column; gap: 8px; }
.report-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
details > summary::-webkit-details-marker { display: none; }