/* Official Potato: the printable allergen sheet, /menu (owner: PRINTABLE MENU BUILDER, round 8).
   Screen: the builder form and a phone-width preview of the sheet. Paper (and the "Paper preview"
   on screen): letterhead, two-column course lists, a footer that repeats on every page.
   Site tokens only; no colour is defined here except paper white and black for print. */

/* ---------------------------------------------------------------- builder */
.menu-intro { display: flex; flex-direction: column; gap: var(--s2); }
.menu-build { display: flex; flex-direction: column; gap: var(--s5); }
.menu-build fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.mb-step { display: flex; flex-direction: column; gap: var(--s3); border-top: 3px double var(--line-strong); padding-top: var(--s4); }
.menu-build legend, .mb-title-l { font: 600 1.1875rem/1.25 var(--font-display); color: var(--ink); padding: 0; display: flex; align-items: center; gap: 10px; }
.step-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line-strong); font: 600 .875rem/1 var(--font-mono); color: var(--ink);
}
.mb-title-l .opt { font: 400 .875rem/1.2 var(--font-body); color: var(--ink-2); }
.mc-group { display: flex; flex-direction: column; gap: 6px; }
.mc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 340px) { .mc-list { grid-template-columns: 1fr; } }
.chip.mchain { min-height: 52px; padding-block: 6px; }
.mc-words { display: flex; flex-direction: column; min-width: 0; }
.mc-name { font-size: 1rem; line-height: 1.2; }
.mc-note { font-size: .75rem; line-height: 1.3; color: var(--ink-2); }
.chip.mchain:has(input:checked) .mc-note { color: var(--on-soil); }
.chip.mchain:has(input:checked) .mc-name { font-weight: 600; }
.mb-title {
  width: 100%; min-height: 48px; padding: 0 12px; font: 400 1rem/1.2 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-chip);
}
.mb-title::placeholder { color: var(--ink-2); opacity: 1; }
.mb-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-build .btn-1 { align-self: flex-start; }
.menu-change { border-top: 3px double var(--line-strong); padding-top: var(--s2); }
.menu-change > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px;
  cursor: pointer; list-style: none; color: var(--soil); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.menu-change > summary::-webkit-details-marker { display: none; }
.menu-change[open] > summary .chev { transform: rotate(180deg); }
.menu-change[open] > .menu-build { margin-top: var(--s3); }

/* ---------------------------------------------------------------- tools above the preview */
.menu-tools { display: flex; flex-direction: column; gap: var(--s3); }
.mt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-share { display: flex; flex-direction: column; gap: 6px; }
.mt-link-row { display: flex; gap: 8px; min-width: 0; }
.mt-link {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; font: 400 .8125rem/1.2 var(--font-mono); color: var(--ink);
  background: var(--sunk); border: 1px solid var(--line-strong); border-radius: var(--r-chip);
}
.mt-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn[aria-pressed="true"] { border-color: var(--ink); font-weight: 700; }
.mt-share .hint a { display: inline-block; padding-block: 12.5px; margin-block: -12.5px; }
/* Round 8: "Copy link" writes here, never over the help sentence and its link. */
.mt-status:empty { display: none; }

/* ---------------------------------------------------------------- the sheet (screen = phone preview) */
.sheet-frame { min-width: 0; }
.sheet {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  padding: 16px 14px; display: flex; flex-direction: column; gap: var(--s4); min-width: 0;
}
/* The layout table (role="presentation") is plain blocks on screen; paper uses it as a table so
   its <tfoot> repeats on every page. */
@media screen {
  .sheet-t, .sheet-t > tbody, .sheet-t > tfoot, .sheet-t > * > tr, .sheet-t > * > tr > td { display: block; }
}
.sheet-t { width: 100%; border-collapse: collapse; }
.sheet-t td { padding: 0; vertical-align: top; }
.sheet-t .sheet-main { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.sheet-foot-cell { margin-top: var(--s4); }
.sheet-head { display: flex; flex-direction: column; gap: var(--s2); border-bottom: 3px double var(--line-strong); padding-bottom: var(--s3); }
.sheet-logo { margin: 0; }
.sheet-logo img { width: 271px; height: 64px; max-width: none; }
.sheet-logo .brand-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet-logo .brand-light { display: none; }
  :root:not([data-theme="light"]) .sheet-logo .brand-dark { display: block; }
}
:root[data-theme="dark"] .sheet-logo .brand-light { display: none; }
:root[data-theme="dark"] .sheet-logo .brand-dark { display: block; }
.sheet-title { font: 600 .875rem/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--ink); }
.sheet-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: .9375rem; }
.sheet-facts > div { display: contents; }
.sheet-facts dt { font: 600 .75rem/1.9 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.sheet-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; overflow: hidden; }
/* Round 8: the sheet-maker's own words, in quotes, never our statement. */
.sheet-name { quotes: "“" "”" "‘" "’"; font-style: italic; }
.sheet-wide { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }

.sheet-chain { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
/* Round 8: each chain sits in its own layout table (role="presentation"), so on paper its <thead>
   (the running head) repeats on every page the chain runs onto. Plain blocks on screen. */
.sc-t { width: 100%; border-collapse: collapse; }
.sc-t td { padding: 0; vertical-align: top; }
@media screen {
  .sc-t, .sc-t > tbody, .sc-t > * > tr, .sc-t > * > tr > td { display: block; }
  .sc-t > thead { display: none; }
}
.sc-t + .sc-t { border-top: 3px double var(--line-strong); padding-top: var(--s4); }
.sc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.sc-head h2 { font-size: 1.375rem; }
.sc-filed { font: italic 400 .875rem/1.3 var(--font-display); color: var(--ink-2); }
.sc-dates { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; font: 400 .75rem/1.6 var(--font-mono); color: var(--ink-2); }
.sc-dates > div { display: contents; }
.sc-dates dt { font-weight: 600; }
.sc-dates dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.sc-dates a { display: inline-block; padding-block: 12.5px; margin-block: -12.5px; }
.sc-url { display: none; }
.sc-xc, .sc-np, .sc-not { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; line-height: 1.45; padding: 8px 10px; border-radius: var(--r-chip); background: var(--stone-tint); }
.sc-xc .i, .sc-np .i, .sc-not .i { margin-top: 2px; color: var(--stone); }
.sc-not { background: var(--slate-tint); border: 1.5px dashed var(--line-strong); }
.sc-h { display: flex; align-items: center; gap: 6px; font: 600 1.0625rem/1.25 var(--font-display); }
.sc-h .n { margin-left: auto; font: 400 .8125rem/1.2 var(--font-body); }
.sc-free .sc-h .i { color: var(--leaf); }
.sc-ask .sc-h .i { color: var(--beet); }
.sc-note { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.sc-free, .sc-ask { display: flex; flex-direction: column; gap: var(--s2); }
.sc-courses { display: flex; flex-direction: column; gap: var(--s3); }
.sc-course-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0;
  font: 600 .75rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
}
.sc-items, .sc-asks { list-style: none; padding: 0; margin: 0; }
.sc-items li { padding: 4px 0; border-bottom: 1px dotted var(--line-strong); font-size: .9375rem; line-height: 1.35; }
.sc-items .mi-where, .sc-asks .mi-where, .sc-asks .mi-why { display: block; }
.sc-items li:last-child { border-bottom: 0; }
.mi-name .variant { color: var(--ink-2); }
.mi-where { font-size: .75rem; color: var(--ink-2); }
.mi-why { font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }
.mi-fn { font: 600 .75rem/1 var(--font-mono); color: var(--ink-2); margin-left: 4px; white-space: nowrap; }
.sc-fns ol { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; line-height: 1.4; color: var(--ink); }
.sc-fns { display: flex; flex-direction: column; gap: 2px; }
.fn-n { font: 600 .75rem/1 var(--font-mono); color: var(--ink-2); }
.sc-asks li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dotted var(--line-strong); font-size: .9375rem; line-height: 1.35; }
.sc-asks li:last-child { border-bottom: 0; }
.sc-asks li > .i { margin-top: 2px; }
.sc-asks .mi-body { display: flex; flex-direction: column; min-width: 0; }
.sc-asks .s-conflict .mi-why, .sc-asks .s-may .mi-why { color: var(--ink); }
.sc-none { font-size: .9375rem; }
.sc-left { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.sc-left a, .sc-np a { display: inline-block; padding-block: 12.5px; margin-block: -12.5px; }
.sc-asks .s-gfmenu > .i { color: var(--stone); }
.sc-venue { display: flex; flex-direction: column; gap: 6px; }
.sc-venue ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-venue li { font-size: .8125rem; line-height: 1.45; }
.sc-venue q { font: italic 400 .875rem/1.45 var(--font-display); quotes: "“" "”"; }
.vk { font-weight: 600; }
.vsrc { color: var(--ink-2); overflow-wrap: anywhere; }
.sheet-credit { font-size: .75rem; color: var(--ink-2); }

.sheet-foot { border-top: 3px double var(--line-strong); padding-top: var(--s3); display: flex; flex-direction: column; gap: 4px; font-size: .75rem; line-height: 1.45; color: var(--ink-2); }
.sheet-disc { padding-left: 1.25em; margin: 0; color: var(--ink); }
.sheet-cert b { color: var(--ink); }
.sheet-url { font-family: var(--font-mono); overflow-wrap: anywhere; }
.sheet-sign { display: flex; align-items: center; gap: 8px; font: italic 400 .875rem/1.3 var(--font-display); color: var(--ink); }
.sheet-sign img { width: 24px; height: 24px; flex: none; }
.sheet-sign .who { font-style: normal; color: var(--ink-2); font-family: var(--font-body); font-size: .75rem; }

/* ---------------------------------------------------------------- "Paper preview" (screen, js) */
/* The sheet laid out at Letter width with the paper rules below, scaled by menu.js to fit. */
.sheet-frame.as-paper { overflow: hidden; }
.sheet-frame.as-paper .sheet {
  width: 816px; max-width: none; border-radius: 2px; padding: 46px 46px 40px; transform-origin: 0 0;
  background: #FFFFFF; color: #000000; box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  --ink: #000000; --ink-2: #333333; --line-strong: #666666; --surface: #FFFFFF; --sunk: #FFFFFF; --bg: #FFFFFF;
  --stone-tint: #F2F2F2; --slate-tint: #F2F2F2; --leaf: #1F4D28; --beet: #5E1E3E; --stone: #333333; --soil: #000000;
}
.sheet-frame.as-paper .sheet-logo .brand-light { display: block; }
.sheet-frame.as-paper .sheet-logo .brand-dark { display: none; }
.sheet-frame.as-paper .sc-courses { display: block; columns: 2; column-gap: 28px; }
.sheet-frame.as-paper .sc-course { break-inside: auto; margin-bottom: 10px; }
.sheet-frame.as-paper .sc-items li { font-size: .8125rem; padding: 2px 0; }
.sheet-frame.as-paper .sc-asks li { font-size: .8125rem; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .menu-change[open] > summary .chev { transition: none; }
}

/* ---------------------------------------------------------------- paper (Letter and A4) */
@media print {
  @page { margin: 11mm 12mm; }
  body[data-page="menu"] .site-head, body[data-page="menu"] .site-foot, body[data-page="menu"] .skip,
  .menu-tools, .menu-change, .menu-build, body[data-page="menu"] main > .callout { display: none !important; }
  body[data-page="menu"] { font-size: 9.5pt; }
  body[data-page="menu"] main.wrap { padding: 0; }
  .sheet-frame, .sheet-frame.as-paper { overflow: visible; height: auto !important; }
  .sheet, .sheet-frame.as-paper .sheet {
    width: 100% !important; transform: none !important; border: 0; border-radius: 0; padding: 0; box-shadow: none;
    background: #FFFFFF; color: #000000; display: block;
  }
  /* The real <tfoot> repeats at the foot of every printed page (a CSS table-footer-group does not). */
  .sheet-t { display: table; width: 100%; table-layout: fixed; }
  .sheet-t > tfoot { display: table-footer-group; }
  .sheet-t .sheet-main { display: table-cell; }
  .sheet-main > * { display: block; }
  .sheet-foot-cell { padding-top: 6pt; }
  /* Round 8: the disclaimers at 8pt (they were 7pt); "Page n of N" in the page margin. */
  @page { @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt sans-serif; } }
  .sheet-foot { display: block; border-top: 0; padding-top: 0; font-size: 8pt; line-height: 1.3; color: #000000; }
  .sheet-disc { display: block; padding: 4pt 0 0 1.4em; border-top: 1px solid #000000; margin: 0; }
  .sheet-disc li { display: list-item; }
  .sheet-sign { display: flex !important; font-size: 8pt; }
  .sheet-sign img { width: 16pt; height: 16pt; }
  .sheet-url { font-size: 7.5pt; }
  .sheet-logo .brand-light { display: block !important; }
  .sheet-logo .brand-dark { display: none !important; }
  .sheet-head { break-inside: avoid; border-bottom: 2.5pt double #000000; padding-bottom: 6pt; margin-bottom: 8pt; }
  .sheet-facts { font-size: 10pt; }
  .sheet-wide { font-size: 8pt; color: #333333; }
  .sheet-chain { display: block; margin-top: 4pt; }
  /* The running head: a real <thead> repeats at the top of each page this chain runs onto. */
  .sc-t { display: table; width: 100%; table-layout: fixed; margin-top: 8pt; }
  .sc-t > thead { display: table-header-group; }
  .sc-t > tbody { display: table-row-group; }
  .sc-t > * > tr { display: table-row; }
  .sc-t > * > tr > td { display: table-cell; }
  .sc-run { margin: 0 0 3pt; padding-bottom: 2pt; border-bottom: .75pt solid #000000; font: 600 8pt/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: #000000; }
  .sc-t + .sc-t { border-top: 2.5pt double #000000; padding-top: 0; }
  .sheet-chain > * + * { margin-top: 5pt; }
  .sc-head { break-after: avoid; }
  .sc-head h2 { font-size: 15pt; }
  .sc-dates { font-size: 7.5pt; break-after: avoid; }
  .sc-dates a { padding: 0; margin: 0; }
  .sc-url { display: inline; font-size: 7pt; color: #333333; }
  .sc-url::before { content: "("; }
  .sc-url::after { content: ")"; }
  .sc-xc, .sc-np, .sc-not { background: none; border: 1px solid #666666; padding: 3pt 5pt; font-size: 8.5pt; break-inside: avoid; }
  .sc-h { font-size: 11pt; break-after: avoid; }
  .sc-note { font-size: 8pt; break-after: avoid; }
  .sc-free, .sc-ask { display: block; }
  .sc-free > * + *, .sc-ask > * + * { margin-top: 3pt; }
  .sc-courses { display: block; columns: 2; column-gap: 8mm; }
  .sc-course { margin-bottom: 6pt; break-inside: auto; }
  .sc-course-h { font-size: 7.5pt; break-after: avoid; break-inside: avoid; }
  /* The heading never ends a page or column alone: its first item stays with it. */
  .sc-items li:first-child { break-before: avoid; }
  .sc-items li { font-size: 8.5pt; padding: 1.5pt 0; break-inside: avoid; }
  /* Round 8: why a dish needs a question is read across a counter: never under 8pt. */
  .mi-where { font-size: 8pt; }
  .mi-why { font-size: 8.5pt; }
  .mi-fn { font-size: 7.5pt; }
  .sc-fns { display: block; break-inside: auto; }
  .sc-fns ol { display: block; font-size: 7.5pt; }
  .sc-fns li { break-inside: avoid; }
  .sc-asks { columns: 1; }
  .sc-asks li { font-size: 8.5pt; padding: 2pt 0; break-inside: avoid; }
  .sc-asks li > .i { width: 10pt; height: 10pt; }
  .sc-left { font-size: 7.5pt; }
  .sc-none { font-size: 9pt; }
  /* Drinks are many and plain: one flowing line each on paper, not one row each. */
  .sc-course.c-drink .sc-items li { display: inline; border: 0; padding: 0; }
  .sc-course.c-drink .sc-items li + li::before { content: " · "; }
  .sc-course.c-drink .mi-where { display: inline; }
  .sc-course.c-drink .mi-where::before { content: " ("; }
  .sc-course.c-drink .mi-where::after { content: ")"; }
  .sc-left a, .sc-np a { padding: 0; margin: 0; }
  .sc-venue { display: block; break-inside: auto; }
  .sc-venue li { font-size: 7.5pt; break-inside: avoid; }
  .sc-venue q { font-size: 8pt; }
  .vbadge { padding: 0 3pt; font-size: 7pt; border-color: #000000; background: none; }
  .sheet-credit { font-size: 7pt; margin-top: 8pt; }
  .sheet .i { stroke: #000000; }
  .sheet a { color: #000000; text-decoration: none; }
}