/* Every page's frame and the light brand look: the shared header (app icon, Slate, Try it), the short
   footer, the white page with flat grey cards, and the home demo's layout. Loads after
   assets/demo/demo.css (the tokens) and, on every page but the home, after assets/style.css, whose dark
   mode it switches off.

   One column for everything: the header, the page text, the home demo row and the footer all start at
   the same left edge (a 710px column, the width of the demo row, with a 20px gutter), and the header
   sits at the same height on every page, so the icon and "Slate" never move between pages. */

:root { --page-col:710px; --page-gutter:20px; --page-top:40px; }

/* ---------- Light only, white page ---------- */
:root, :root[data-theme] { color-scheme: light; }
:root { --bg:#FFFFFF; --surface:#F7F7F5; --fill:#EFEFEC; --ink:#111214; --ink-mute:#6E6F74; --hairline:#E3E3DF; --accent:#3E5C9E; --card-shadow:none; }
@media (prefers-color-scheme: dark) { :root { --bg:#FFFFFF; --surface:#F7F7F5; --fill:#EFEFEC; --ink:#111214; --ink-mute:#6E6F74; --hairline:#E3E3DF; --accent:#3E5C9E; --card-shadow:none; } }
html, body { background:#FFFFFF; color:#111214; }

/* ---------- Header: app icon, Slate, Try it (identical on every page) ---------- */
.page-header { max-width:calc(var(--page-col) + 2 * var(--page-gutter)); margin:0 auto; padding:var(--page-top) var(--page-gutter) 0; box-sizing:border-box; display:flex; justify-content:flex-start; }
.page-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--slate-ink); padding:8px 0; margin:-8px 0; line-height:1; }
.page-brand-icon { display:block; width:28px; height:28px; border-radius:7px; flex:none; }
.page-brand-name { font:700 20px/1 var(--font-sans); letter-spacing:-0.3px; }
.page-brand-label { font:400 13px/1 var(--font-sans); color:var(--ink-mute); }

/* ---------- Page text: privacy, terms, support, food, /for/, /compare/, /blog/, hubs, 404 ---------- */
main { max-width:calc(var(--page-col) + 2 * var(--page-gutter)); margin:0 auto; padding:0 var(--page-gutter); box-sizing:border-box; }
main.legal, main.notfound { padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
main > * { max-width:var(--page-col); margin-left:auto; margin-right:auto; }
main .wrap, main .wrap-reading { max-width:var(--page-col); padding-left:0; padding-right:0; }
main h1 { font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1.08; }
/* Cards: flat grey with a hairline, no shadow. */
main .card, main aside, main .summary { background:#F7F7F5; border:1px solid #E3E3DF; box-shadow:none; border-radius:16px; }
main .card *, main aside *, main .summary * { border:0; background:transparent; }
/* Hub lists and FAQs sit on the page, not on raised white tiles. */
main .hub-list a, main .faq details { background:transparent; box-shadow:none; }
main .table-wrap { max-width:100%; }
/* Source links in a list get a 44px tap height; links inside sentences keep the line height. */
main ol.sources a { display:inline-block; padding:12px 0; margin:-12px 0; }
main ol.sources li + li { margin-top:14px; }
/* A dish page's image card (assets/cards/<slug>.png, 1200x630, from scripts/build-cards.mjs) under the answer: the
   reading column wide, the card radius, a hairline. The img's width and height attributes reserve its height. */
main .dish-card { margin:20px auto 0; max-width:var(--page-col); border:1px solid var(--hairline); border-radius:var(--radius-card, 16px); overflow:hidden; background:#F7F7F5; }
main .dish-card img { display:block; width:100%; height:auto; }
/* Hub rows on /for/, /compare/ and /blog/: the title, then one line on what the page answers. */
.hub-list .hub-text { display:flex; flex-direction:column; gap:4px; padding:12px 0; }
.hub-list .hub-desc { font:400 15px/1.45 var(--font-sans); color:var(--ink-mute); }

/* ---------- Footer: page links, legal links, company line, copyright ---------- */
.legal-footer { max-width:var(--page-col); width:calc(100% - 2 * var(--page-gutter)); margin:0 auto; padding:32px 0 48px; display:grid; gap:14px; border-top:1px solid var(--slate-hairline); font:400 13px/1.6 var(--font-sans); color:var(--ink-mute); }
.legal-footer nav { display:flex; flex-wrap:wrap; gap:8px 24px; font-size:14px; }
.legal-footer a { color:var(--slate-ink); text-decoration:none; padding:11px 0; margin:-11px 0; }

/* ---------- Home: the demo ---------- */
body.home { background:#FFFFFF; min-height:100vh; }
.demo-root { min-height:949px; }
/* The home headline sits outside the React root, so it stays in the page whether or not the demo runs.
   main.home-main opts out of the reading-column rules above; the intro and the demo row set their own. */
main.home-main { max-width:none; padding:0; }
main.home-main > .demo-root { max-width:none; }
/* One rectangle across the demo: on wide screens the intro runs from the sidebar card's left edge (9px into the
   710px row) to the phone frame's right edge (1px past it), 702px; the headline is sized to fill that width on one
   line and the paragraph is justified. On narrow screens it takes the stacked demo's 422px column. */
.home-intro { max-width:702px; margin:24px auto 0; padding:0 calc(var(--page-gutter) - 1px) 0 calc(var(--page-gutter) + 9px); box-sizing:content-box; }
.home-intro h1 { font:800 37.25px/1.12 var(--font-sans); letter-spacing:-0.019em; color:var(--slate-ink); margin:0 0 10px; }
.home-intro p { font:400 17px/1.5 var(--font-sans); color:var(--ink-mute); margin:0; text-align:justify; text-align-last:left; }
.home-intro p.home-dishes { margin-top:12px; font-size:15px; text-align:left; }
.home-dishes a { color:var(--slate-ink); text-decoration:underline; text-decoration-color:var(--hairline); text-underline-offset:3px; display:inline-block; padding:10px 0; margin:-10px 0; }
/* The demo sidebar is site chrome, not app UI: its small grey labels use the darker grey that passes contrast. */
.demo-aside { --slate-ink-mute:#636469; }
.demo-noscript { max-width:var(--page-col); margin:0 auto; padding:32px var(--page-gutter); box-sizing:content-box; font:400 17px/1.5 var(--font-sans); color:var(--ink-mute); }
/* The demo row (sidebar 232 + gap 56 + phone frame 422 = 710) starts 32px under the headline, at the
   column's left edge. The inline styles are the design; this only sets the outer spacing. */
.demo-app { padding:32px var(--page-gutter) 40px !important; }

/* Narrow screens: the sidebar's parts stack under the phone frame, and the frame scales to fit.
   app.js sets --demo-scale to min(1, (width - 40px) / 422px). */
@media (max-width: 799px) {
  .home-intro { max-width:422px; padding:0 var(--page-gutter); }
  .home-intro h1 { font-size:26px; }
  .demo-app { flex-direction:column !important; align-items:center !important; gap:24px !important; padding:24px var(--page-gutter) 32px !important; }
  .demo-aside { display:contents !important; }
  .demo-phone-fit { order:1; width:calc(422px * var(--demo-scale, 1)); height:calc(894px * var(--demo-scale, 1)); }
  .demo-phone { transform-origin:0 0; transform:translate(calc(10px * var(--demo-scale, 1)), calc(10px * var(--demo-scale, 1))) scale(var(--demo-scale, 1)); }
  .demo-nav { order:2; width:100%; max-width:422px; }
  .demo-nav-group { display:flex !important; flex-wrap:wrap; gap:4px !important; }
  .demo-nav-label { flex-basis:100%; }
  .demo-nav-button { min-height:44px; }
  .demo-appearance { order:3; width:100%; max-width:422px; }
  /* Room for the mounted demo, so the footer doesn't move when React replaces the fallback. */
  .demo-root { min-height:calc(894px + 687px); }
}
@media (max-width: 461px) {
  .demo-root { min-height:calc((100vw - 40px) * 2.1185 + 735px); }
}

/* ---------- App Store badge and the dish pages' log link (nothing until the app has an id) ---------- */
.app-badge { display:inline-flex; align-items:center; min-height:44px; min-width:44px; text-decoration:none; }
.app-badge img { display:block; width:auto; height:40px; }
.home-intro p.home-badge { margin-top:16px; text-align:left; }
main .table-link { margin-top:12px; font-size:15px; }
main .table-link a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-decoration:none; text-decoration-color:var(--hairline); }
main .table-link a:hover { text-decoration:underline; }

/* ---------- Meal calculator (/calories/calculator/) ---------- */
.calc { margin-top:28px; }
.calc-label { display:block; font:500 var(--fs-line)/1.3 var(--font-sans); color:var(--ink); margin-bottom:10px; }
.calc-input { display:block; width:100%; box-sizing:border-box; min-height:96px; padding:14px 16px; border:1px solid var(--hairline); border-radius:16px; background:var(--surface); color:var(--ink); font:400 var(--fs-line)/1.5 var(--font-sans); resize:vertical; caret-color:var(--ink); }
.calc-input::placeholder { color:var(--ink-mute); opacity:1; }
.calc-input:focus { outline:2px solid var(--ink); outline-offset:2px; }
.calc-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.calc-actions .btn { min-height:48px; padding:0 22px; }
.calc-examples { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.calc-examples .chip, .calc-suggest .chip { font:400 var(--fs-small)/1.2 var(--font-sans); }
.calc-results { margin-top:8px; }
.calc-empty { margin-top:16px; font-size:var(--fs-small); }
.calc-table th, .calc-table td { vertical-align:top; }
.calc-what .calc-sub { display:block; margin-top:2px; }
/* The dish link in a row gets a 44px tap height without moving the row. */
.calc-what > a { display:inline-block; padding:12px 0; margin:-12px 0; }
.calc-unmatched td { color:var(--ink-mute); }
.calc-suggest { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.calc-suggest .chip { min-height:var(--tap); }
.calc-total th, .calc-total td { font-weight:700; border-bottom:0; padding-top:14px; text-align:left; }
.calc-total td.n { text-align:right; }
main .hub-calc { margin-top:4px; }
@media (max-width:559.98px) {
  .legal table.calc-table th:nth-child(4), .legal table.calc-table td:nth-child(4),
  .legal table.calc-table th:nth-child(5), .legal table.calc-table td:nth-child(5),
  .legal table.calc-table th:nth-child(6), .legal table.calc-table td:nth-child(6) { display:none; }
  /* The total row's label spans two columns, so its protein, carbs and fat cells are its 3rd to 5th children. */
  .legal table.calc-table .calc-total th { display:table-cell; }
  .legal table.calc-table .calc-total td:nth-child(n+3) { display:none; }
}