/* Public chart surface: the Pantry palette, with the printable as the working proof. */
.chart-page { background-image: none; }
.chart-page [hidden] { display: none !important; }
.chart-page .btn { box-shadow: none; border: 1px solid var(--brand); border-radius: 6px; }
.chart-page .btn:hover { transform: none; }
.chart-page a { text-underline-offset: .2em; }
.chart-page .site-header { border-bottom: 1px solid var(--line); }
.chart-skip { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--surface); padding: 12px; }
.chart-skip:focus { top: 12px; }
.chart-intro { display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; align-items: center; padding: 64px 0 48px; }
.chart-intro h1 { margin: 0 0 24px; font-size: clamp(2.6rem, 4.2vw, 3.4rem); letter-spacing: -.035em; line-height: 1.07; text-wrap: balance; }
.chart-intro h1 em { color: var(--brand); font-style: normal; }
.chart-lead { max-width: 54ch; color: var(--ink-soft); font-size: 1.08rem; margin: 0; }
.chart-promise { margin: 20px 0 0; font-size: .88rem; font-weight: 650; color: var(--brand); }
.chart-online { background: var(--brand-tint); padding: 28px 32px; border-radius: 12px; color: var(--ink); }
.chart-online h2 { margin: 0 0 12px; font-size: 1.65rem; }
.chart-online p { margin: 0 0 20px; font-size: .94rem; line-height: 1.65; }
.chart-online .btn { width: 100%; min-height: 48px; }
.chart-online .chart-online-note { margin: 12px 0 0; font-size: .8rem; }
.chart-workbench { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; padding: 36px 0 44px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.chart-settings h2 { margin: 0 0 16px; font-size: 1.8rem; letter-spacing: -.02em; }
.chart-settings > p { color: var(--ink-soft); font-size: .9rem; margin: 0 0 24px; }
.chart-settings fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.chart-settings legend { padding: 0; margin: 0 0 12px; font-size: .88rem; font-weight: 700; }
.chart-option { display: flex; align-items: center; gap: 12px; padding: 16px 12px; border: 1px solid var(--line); border-bottom: 0; cursor: pointer; background: var(--surface); }
.chart-option:first-of-type { border-radius: 8px 8px 0 0; }
.chart-option:last-of-type { border-bottom: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.chart-option:has(input:checked) { background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.chart-option:hover { background: #edf0e4; }
.chart-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.chart-option strong, .chart-option small { display: block; }
.chart-option strong { font-size: .93rem; line-height: 1.3; }
.chart-option small { color: var(--ink-soft); font-size: .74rem; margin-top: 4px; }
.chart-option-sheet { width: 38px; flex: 0 0 38px; margin-left: auto; }
.chart-option-sheet svg { display: block; width: 100%; fill: #fff; stroke: var(--brand); stroke-width: 1; }
.chart-option-sheet .mini-header { fill: var(--brand); }
.chart-option-sheet.ink svg { stroke: var(--ink); }
.chart-matrix-action, #chart-download, #chart-print { width: 100%; min-height: 48px; }
#chart-download { margin-top: 10px; }
#chart-print { margin-top: 10px; background: transparent; color: var(--brand); }
.chart-credit { margin: 12px 0 0; font: 10px/1.4 Arial, sans-serif; color: #555; text-align: center; }
.chart-settings .chart-print-help { font-size: .76rem; line-height: 1.65; margin: 12px 0 0; }
.chart-proof { min-width: 0; align-self: start; }
.chart-proof-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 12px; min-height: 44px; }
.chart-proof-heading p { margin: 0; font-size: .8rem; font-weight: 650; }
#chart-zoom { background: transparent; border: 0; padding: 8px 0 8px 8px; min-height: 44px; color: var(--brand); font-size: .8rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; flex-shrink: 0; }
.chart-preview { background: #fff; overflow: auto; box-shadow: 0 12px 32px -18px rgba(39,48,31,.4); scrollbar-color: var(--brand) var(--paper-deep); }
.chart-sheet { width: 1000px; padding: 32px; color: #17211c; background: #fff; font-family: Arial, sans-serif; }
.chart-preview.is-fitted { height: var(--preview-height); overflow: hidden; }
.chart-preview.is-fitted .chart-sheet { transform: scale(var(--preview-scale, 1)); transform-origin: top left; }
.chart-preview.is-expanded { max-height: 640px; }
.chart-sheet-title { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #8a928a; color: #17211c; font: 700 22px/1.2 Arial, sans-serif; }
.chart-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 24px; margin-bottom: 20px; font-size: 13px; }
.chart-meta span { display: flex; align-items: end; gap: 8px; min-width: 0; white-space: nowrap; }
.chart-meta i { flex: 1; height: 1.1em; border-bottom: 1px solid #788078; }
table.blank-chart { border-collapse: collapse; table-layout: fixed; width: 100%; }
table.blank-chart col.item-width { width: 19%; }
table.blank-chart col.allergen-width { width: 5.7857%; }
table.blank-chart th, table.blank-chart td { border: 1px solid #8a928a; }
table.blank-chart thead th { background: var(--brand); color: #fff; height: 48px; font-size: 10px; font-weight: 700; padding: 6px 3px; text-align: center; vertical-align: middle; line-height: 1.2; overflow-wrap: anywhere; }
table.blank-chart thead th.long-allergen { overflow-wrap: normal; hyphens: manual; }
table.blank-chart thead th.item-col { text-align: left; padding-left: 10px; font-size: 13px; }
table.blank-chart td { height: 28px; }
.chart-sheet:is([data-format="spacious"], [data-format="spacious-ink"]) td { height: 49px; }
.chart-sheet:is([data-format="ink"], [data-format="spacious-ink"]) thead th { background: #fff; color: #000; }
.chart-key { font-size: 12px; color: #384038; margin: 12px 0 0; line-height: 1.45; }
.chart-proof-note { color: var(--ink-soft); font-size: .76rem; margin: 16px 0 0; max-width: 60ch; }
.chart-next { display: flex; justify-content: space-between; align-items: center; gap: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 0; }
.chart-next h2 { font-size: 1.65rem; margin: 0 0 12px; }
.chart-next p { max-width: 58ch; margin: 0; color: var(--ink-soft); font-size: .94rem; }
.chart-next .btn { flex-shrink: 0; }
.chart-guide { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px 64px; padding: 56px 0 40px; }
.chart-guide h2 { font-size: 1.65rem; margin: 0 0 20px; }
.chart-guide p, .chart-guide li { color: var(--ink-soft); font-size: .94rem; }
.chart-guide ol { margin: 0; padding-left: 24px; }
.chart-guide li { padding-left: 8px; margin-bottom: 16px; }
.chart-guide li::marker { color: var(--brand); font-weight: 700; }
.chart-guide-aside { border-top: 3px solid var(--brand); padding-top: 24px; }
.chart-guide-aside h2 { font-size: 1.4rem; }
.chart-guide-wide { grid-column: 1 / -1; max-width: 72ch; }
.chart-guide-wide h2:not(:first-child) { margin-top: 36px; }
.chart-page .tool-bridge { margin: 0 0 48px; padding: 24px 0; border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; box-shadow: none; }
.chart-page .tool-bridge-copy { max-width: 76ch; }
.chart-page .tool-bridge h2 { font-size: 1.25rem; }
.chart-page .tool-bridge p { font-size: .88rem; }
@media (max-width: 900px) {
  .chart-intro { gap: 32px; }
  .chart-workbench { grid-template-columns: 270px minmax(0,1fr); gap: 24px; }
  .chart-next { gap: 24px; }
  .chart-guide { gap: 32px; }
}
@media (max-width: 680px) {
  .chart-page .site-header .wrap { height: 60px; gap: 8px; }
  .chart-page .site-header .nav > a:not(.btn) { display: none; }
  .chart-page .site-header .btn { min-height: 44px; }
  .chart-intro { grid-template-columns: 1fr; gap: 8px; padding: 24px 0 16px; }
  .chart-intro h1 { font-size: 2rem; margin-bottom: 12px; }
  .chart-lead { font-size: .94rem; line-height: 1.5; }
  .chart-promise { margin-top: 8px; font-size: .8rem; }
  .chart-online { padding: 20px; margin-top: 12px; }
  .chart-online h2 { font-size: 1.3rem; margin-bottom: 8px; }
  .chart-online p { margin-bottom: 12px; font-size: .88rem; line-height: 1.5; }
  .chart-online .chart-online-note { margin-bottom: 0; font-size: .8rem; }
  .chart-workbench { grid-template-columns: 1fr; gap: 24px; padding: 12px 0 32px; }
  .chart-proof { order: -1; }
  .chart-proof-heading { margin-bottom: 8px; }
  .chart-proof-note { margin-top: 8px; }
  .chart-settings h2 { font-size: 1.7rem; }
  .chart-settings h2 br { display: none; }
  .chart-settings h2 br::after { content: ' '; }
  .chart-settings > p { margin-bottom: 20px; }
  .chart-option { padding: 16px; }
  .chart-option small { font-size: .8rem; }
  .chart-next { flex-direction: column; align-items: start; gap: 20px; }
  .chart-next .btn { width: 100%; }
  .chart-guide { grid-template-columns: 1fr; padding: 36px 0 24px; gap: 32px; }
  .chart-guide-wide { grid-column: auto; }
}
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  html { font-size: 12pt; }
  body.chart-page { background: #fff; }
  .chart-page .wrap { max-width: none; padding: 0; }
  .chart-workbench { display: block; border: 0; padding: 0; margin: 0; }
  .chart-preview, .chart-preview.is-fitted, .chart-preview.is-expanded { height: auto; max-height: none; overflow: visible; border: 0; box-shadow: none; margin: 0; }
  .chart-preview .chart-sheet, .chart-preview.is-fitted .chart-sheet { transform: none; width: 100%; padding: 6mm 0 0; break-inside: avoid; }
  .chart-sheet-title { font-size: 14pt; margin: 0 0 3mm; padding-bottom: 2mm; }
  .chart-meta { gap: 3mm 7mm; margin-bottom: 4mm; font-size: 9pt; }
  table.blank-chart th, table.blank-chart td { border-color: #666; }
  table.blank-chart thead th { background: #2d5c40 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 6.5pt; height: 12mm; padding: 3px 2px; }
  table.blank-chart thead th.item-col { font-size: 8pt; }
  table.blank-chart td { height: 8mm; }
  .chart-sheet:is([data-format="spacious"], [data-format="spacious-ink"]) td { height: 14mm; }
  .chart-sheet:is([data-format="ink"], [data-format="spacious-ink"]) thead th { background: #fff !important; color: #000 !important; }
  .chart-credit { font-size: 6pt; margin-top: 2mm; }
  .chart-key { font-size: 7.5pt; margin: 2mm 0 0; color: #222; }
}