/* Styles for the generated dish pages.
   ------------------------------------------------------------------------
   A shared file rather than inlined like the hand-built pages: there are 68 of
   these and the stylesheet is identical on every one, so inlining would send
   the same bytes 68 times and defeat caching on the exact pages a search
   engine crawls most.

   Tokens are the v2 design system, transcribed from
   docs/design_handoff_kitchen_sense_core_loop/v2/. */

/* Self-hosted so the site makes no third-party request. A privacy policy that
   promises no tracking should not fetch its typeface from Google, and a font
   from another origin is the slowest thing on the page for anyone on a poor
   connection. SIL OFL; the licence ships alongside. Subset to Latin plus the
   punctuation the copy uses — 643KB to 195KB, both variable axes kept. */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --board:#0d0d0c; --tile:#232320; --text:#fff6ec; --soft:#c9c5bd;
  --mute:#8d8a84; --hair:#2e2e2a;
  --plate:#fff6ec; --onplate:#0d0d0c;
  --mar:#f5b32b; --onmar:#1a1200;
  --lime:#b6d43c; --onlime:#161a04;
  --cherry:#e33d2e; --oncherry:#fff1ec;
}
@media (prefers-color-scheme: light) {
  :root {
    --board:#e6e1d5; --tile:#fbf8f2; --text:#16150f; --soft:#3c3a32;
    --mute:#6f6a5f; --hair:#d3cdbe;
    --plate:#16150f; --onplate:#f6f3ea;
    --mar:#e8a218; --cherry:#cf3524;
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--board);
  color: var(--text);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, li, table, figure { margin: 0; padding: 0 }
img { display: block; max-width: 100%; height: auto }

a { color: var(--mar); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 2px }
a:hover { color: var(--cherry) }
a:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px;
                  border-radius: 6px }

.wrap { max-width: 760px; margin: 0 auto; padding: 10px 10px 64px;
        display: flex; flex-direction: column; gap: 8px }

.bar { display: flex; align-items: center; justify-content: space-between;
       gap: 16px; padding: 14px 12px }
.brand { font: 800 17px/1 'Archivo', sans-serif; font-stretch: 112%;
         letter-spacing: -.02em; color: var(--text); text-decoration: none }
.crumb { font: 500 14px/1.4 'Archivo', sans-serif; color: var(--mute);
         padding: 0 12px 6px }

/* Every surface is a filled tile on the board. Size is the hierarchy —
   no borders and no shadows. */
.tile { background: var(--tile); border-radius: 20px; padding: 22px }
.tile.hero { background: var(--mar); color: var(--onmar) }
.tile.plate { background: var(--plate); color: var(--onplate) }
.tile.warn { background: var(--cherry); color: var(--oncherry) }

.eyebrow { font: 800 12px/1 'Archivo', sans-serif; letter-spacing: .12em;
           text-transform: uppercase; opacity: .62 }

h1 { font: 800 clamp(30px, 6vw, 46px)/1.02 'Archivo', sans-serif;
     font-stretch: 112%; letter-spacing: -.045em; text-wrap: balance;
     margin-top: 10px }
h2 { font: 800 clamp(21px, 3.4vw, 27px)/1.15 'Archivo', sans-serif;
     letter-spacing: -.03em; margin-bottom: 12px }
h3 { font: 800 18px/1.25 'Archivo', sans-serif; letter-spacing: -.02em;
     margin-bottom: 4px }

.time { font: 800 clamp(52px, 12vw, 78px)/.92 'Archivo', sans-serif;
        font-stretch: 105%; letter-spacing: -.05em;
        font-variant-numeric: tabular-nums }
.under { font: 600 15px/1.4 'Archivo', sans-serif; opacity: .8; margin-top: 6px }

p { font: 400 17px/1.55 'Archivo', sans-serif; color: var(--soft);
    text-wrap: pretty }
.tile.hero p, .tile.plate p, .tile.warn p { color: inherit; opacity: .9 }
p + p, p + ul, p + ol, h3 + p { margin-top: 10px }
li + li { margin-top: 6px }

ul, ol { padding-left: 22px }
li { font: 400 16px/1.5 'Archivo', sans-serif; color: var(--soft) }
.opts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;
        margin-top: 8px }
.opts li { background: var(--board); border-radius: 12px; padding: 7px 12px;
           font: 500 14px/1.3 'Archivo', sans-serif; color: var(--text) }
.q + .q { margin-top: 20px }

/* Wide content scrolls in its own container so the page never does. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
          margin: 0 -6px; padding: 0 6px }
table { border-collapse: collapse; width: 100%; min-width: 380px }
th, td { text-align: left; padding: 10px 12px;
         border-bottom: 1px solid var(--hair);
         font: 400 15px/1.35 'Archivo', sans-serif; color: var(--soft);
         white-space: nowrap }
th { font-weight: 700; color: var(--text); font-size: 13px;
     letter-spacing: .02em; text-transform: uppercase }
td.t { font-weight: 800; color: var(--text);
       font-variant-numeric: tabular-nums }
tr:last-child td { border-bottom: 0 }

.foot { display: flex; flex-wrap: wrap; gap: 18px; padding: 20px 12px;
        font: 500 15px/1 'Archivo', sans-serif }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color .12s ease }
}

/* --- the clock and the picker -------------------------------------------- */

.tile.hero .lede { font: 500 clamp(17px,2.1vw,20px)/1.45 'Archivo', sans-serif;
                   opacity: .8; margin-top: 12px; max-width: 46ch }
.clock { display: flex; flex-wrap: wrap; gap: clamp(18px,3.4vw,36px);
         align-items: flex-end; border-top: 2px solid rgba(26,18,0,.18);
         padding-top: 24px; margin-top: 26px }
.readout { display: flex; flex-direction: column; gap: 6px;
           min-width: min(100%, 210px) }
.readout .time { font-size: clamp(58px, 14vw, 112px) }
.summary { font: 600 16px/1.35 'Archivo', sans-serif; opacity: .7 }
.acts { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 220px }

button { font-family: 'Archivo', sans-serif; cursor: pointer }
.go { background: var(--onmar); color: var(--mar); border: 0;
      border-radius: 999px; min-height: 56px; padding: 0 28px;
      font: 800 18px/1 'Archivo', sans-serif; letter-spacing: -.02em }
.ghost { background: transparent; color: var(--onmar);
         border: 2px solid rgba(26,18,0,.3); border-radius: 999px;
         min-height: 56px; padding: 0 24px;
         font: 700 17px/1 'Archivo', sans-serif; letter-spacing: -.02em }
.go:focus-visible, .ghost:focus-visible, .pills button:focus-visible {
  outline: 3px solid var(--onmar); outline-offset: 3px }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
/* 52px because a wet finger on a phone is the whole design constraint. */
.pills button { background: var(--board); color: var(--text);
                border: 2px solid var(--hair); border-radius: 999px;
                min-height: 52px; padding: 0 18px; text-align: left;
                font: 600 15px/1.2 'Archivo', sans-serif;
                display: flex; align-items: center }
.pills button.on { background: var(--mar); color: var(--onmar);
                   border-color: var(--mar) }
.pills button:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px }
@media (prefers-reduced-motion: no-preference) {
  .pills button { transition: background .12s linear, color .12s linear }
}

summary { cursor: pointer; font: 800 17px/1.2 'Archivo', sans-serif;
          letter-spacing: -.02em; color: var(--text) }
summary:focus-visible { outline: 3px solid var(--mar); outline-offset: 4px;
                        border-radius: 6px }
details[open] summary { margin-bottom: 16px }

.near { display: flex; flex-wrap: wrap; gap: 8px }
.near a { background: var(--board); border-radius: 12px; padding: 11px 15px;
          font: 600 15px/1.2 'Archivo', sans-serif; color: var(--text);
          text-decoration: none }
.near a:hover { color: var(--mar) }