/* Holiday menu planner (task 823.17): /holidays, /holidays/<slug> and its print view (?print=1). */
.hp-cards { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hp-card h2 { margin: 0 0 4px; font-size: 1.3rem; }
.hp-card { display: flex; flex-direction: column; }
.hp-card p { margin: 6px 0; }
.hp-card p:last-child { margin-top: auto; padding-top: 6px; }

.hplan { display: grid; gap: 22px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.hplan > * { min-width: 0; } /* a wide table scrolls in its own box instead of widening the page */
@media (min-width: 960px) { .hplan { grid-template-columns: minmax(330px, 400px) 1fr; } .hp-form { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; } }
.hp-form { padding: 16px 18px; }
.hp-form fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.hp-form legend { font: 700 1.1rem var(--serif); padding: 0; margin-bottom: 6px; }
.hp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.hp-grid p { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* one column on the narrowest phones: a date field won't shrink below ~160 px (task 823.46, 320 px reflow) */
@media (max-width: 380px) { .hp-grid { grid-template-columns: minmax(0, 1fr); } }
.hp-grid label, .hp-add label { font-weight: 600; font-size: .9rem; }
.hp-form input, .hp-form select { width: 100%; min-height: 40px; box-sizing: border-box; }
.hp-dishes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hp-dish { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--bg); }
.hp-dish-row { display: flex; gap: 8px; align-items: center; }
.hp-dish-row select { flex: 1; min-width: 0; }
.hp-dish-row a { white-space: nowrap; }
.hp-meta { margin: 4px 0 2px; }
.hp-dish label.check { font-weight: 500; margin-top: 4px; }
.hp-dish label.check input, .hp-shop label.check input { width: 20px; height: 20px; min-height: 0; flex: none; }
.hp-add { margin: 8px 0 0; display: flex; flex-direction: column; gap: 3px; }
.hp-form-foot { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.hp-out { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.hp-out h2 { margin: 0 0 8px; }
.hp-summary { padding: 14px 18px; }
.hp-sum { margin: 0 0 8px; font-size: 1.05rem; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.hp-summary .small { margin: 4px 0 0; }
.hp-alerts { background: var(--warn-soft); border-left: 5px solid var(--honey); border-radius: 12px; padding: 12px 16px; }
.hp-alerts ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.hp-ok { margin: 0; background: var(--herb-soft); border-radius: 12px; padding: 10px 14px; }
.hp-thaw { background: var(--surface-2); border-left: 5px solid var(--accent); border-radius: 12px; padding: 12px 16px; }
.hp-thaw h2 { font-size: 1.15rem; }
.hp-thaw p { margin: 4px 0; }

.tl-sec h3 { font: 700 1.05rem var(--serif); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.tl-sec h4 { margin: 10px 0 4px; }
.tl { list-style: none; padding: 0; margin: 0; }
.tl-ev { display: grid; grid-template-columns: 5.6em minmax(7em, 11em) 1fr; gap: 2px 12px; padding: 6px 0 6px 10px; border-left: 4px solid var(--line); }
.tl-ev + .tl-ev { border-top: 1px dashed var(--line); }
.tl-ev time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tl-dish a { font-weight: 600; }
.tl-ev.k-oven { border-left-color: var(--accent); }
.tl-ev.k-stove { border-left-color: var(--honey); }
.tl-ev.k-passive, .tl-ev.k-cold { border-left-color: var(--star-empty); color: var(--muted); }
.tl-ev.k-done { border-left-color: var(--herb); }
.tl-ev.k-serve { border-left-color: var(--herb); background: var(--herb-soft); font-weight: 700; }
.tl-ev.k-safety { color: var(--muted); }
.tl-hour { font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 12px 0 2px; }
.hp-ahead { margin: 0 0 6px; padding-left: 1.2em; display: grid; gap: 4px; }
.hp-ahead .thaw { font-weight: 600; }
@media (max-width: 600px) {
  .tl-ev { grid-template-columns: 5.2em 1fr; }
  .tl-what { grid-column: 2; }
  .hp-grid { grid-template-columns: 1fr 1fr; }
}
.hp-kitchen ul, .hp-safety ul { margin: 4px 0 8px; padding-left: 1.2em; display: grid; gap: 4px; }
.hp-kitchen h3 { margin: 8px 0 2px; }
.hp-notes { color: var(--muted); }

.hp-aisles { columns: 2 260px; column-gap: 28px; }
.hp-aisles section { break-inside: avoid; margin-bottom: 10px; }
.hp-aisles h3 { font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 8px 0 4px; }
.hp-list { list-style: none; padding: 0; margin: 0; }
.hp-list li { padding: 4px 0; }
.hp-list label.check { align-items: flex-start; }
.hp-from { display: block; margin-left: 28px; }
.hp-list input:checked + span { text-decoration: line-through; color: var(--muted); }
.hp-shop .staples { margin-top: 10px; }
.hp-how summary { cursor: pointer; font-weight: 600; }
.hp-how ul { padding-left: 1.2em; }
.hp-status:empty { display: none; }

/* ---- the print view (?print=1): a paper preview on screen, then the real thing ---- */
.hpp { padding: 16px 12px 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hpp-page { width: 8.5in; max-width: 100%; box-sizing: border-box; padding: .5in; background: #fff; color: #000; box-shadow: 0 2px 10px rgba(40, 25, 10, .18); font: 10pt/1.35 var(--sans); }
.hpp-page h1 { font: 700 18pt/1.1 var(--serif); margin: 0; color: #000; }
.hpp-page h2 { font: 700 11.5pt var(--serif); margin: 10pt 0 3pt; color: #000; border-bottom: 1px solid #999; padding-bottom: 2pt; }
.hpp-page p { margin: 3pt 0; }
.hpp-page ul { margin: 0; padding-left: 14pt; }
.hpp-page li { margin: 1pt 0; break-inside: avoid; }
.hpp-head { display: flex; gap: 10pt; align-items: center; margin-bottom: 4pt; }
.hpp-head svg { width: 30pt; height: 30pt; flex: none; }
.hpp-head p { color: #333; }
.hpp-menu { columns: 2; column-gap: 18pt; }
.hpp-menu span { color: #444; }
.hpp-tl { width: 100%; border-collapse: collapse; }
.hpp-tl th, .hpp-tl td { text-align: left; vertical-align: top; padding: 1.5pt 6pt 1.5pt 0; border-bottom: 1px solid #ddd; font-weight: 400; }
.hpp-tl th { white-space: nowrap; font-weight: 700; width: 5.2em; }
.hpp-tl td:nth-child(3) { width: 12em; font-weight: 600; } /* fits "Green Bean Casserole" on one line (823.22) */
.hpp-tl tr { break-inside: avoid; }
.hpp-box { width: 1.2em; color: #555; }
.hpp-thaw { border: 1px solid #000; padding: 4pt 6pt; }
.hpp-aisles { columns: 2; column-gap: 20pt; }
.hpp-aisles section { break-inside: avoid; }
.hpp-aisles ul { list-style: none; padding: 0; }
.hpp-foot { display: flex; justify-content: space-between; margin-top: 12pt; padding-top: 4pt; border-top: 1px solid #999; font-size: 8pt; color: #333; }
/* v2 (task 823.44): how much to make, the make-ahead day plan, the oven schedule. */
.hp-serv h2, .hp-kitchen h2 { margin-top: 0; }
.hp-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.hp-table th, .hp-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hp-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hp-table tbody th { font-weight: 600; }
.hp-course { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
.hp-daylist { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 10px; }
.hp-day { border: 1px solid var(--line); border-left: 4px solid var(--honey); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.hp-day h4 { margin: 0 0 4px; font-size: .95rem; }
.hp-day ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hp-kind { display: inline-block; min-width: 3.6em; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hp-day .k-thaw .hp-kind { color: var(--bad); }
.hp-said { margin: 4px 0 8px; }
.hp-said summary { cursor: pointer; font-size: .9rem; }
.oc-svg { display: block; max-width: 760px; margin: 4px 0 6px; font: 12px var(--sans); }
.oc-grid { stroke: var(--line); stroke-width: 1; }
.oc-serve { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.oc-hour { fill: var(--muted); font-size: 11px; }
.oc-name { fill: var(--ink); font-size: 12px; }
.oc-temp { fill: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.oc-bar.oc-ok { fill: #6b8f4e; }
.oc-bar.oc-shared { fill: #b7791f; }
.oc-bar.oc-clash { fill: #b42318; }
.oc-bad { color: var(--bad); }
.oc-row-clash td, .oc-row-clash th { background: color-mix(in srgb, var(--bad) 8%, transparent); }
@media (max-width: 560px) { .oc-svg { display: none; } .hp-table { font-size: .84rem; } .hp-table th, .hp-table td { padding: 5px 4px; } }

@media print {
  .print-bar { display: none !important; }
  html, body, .print-view { background: #fff !important; }
  .hpp { display: block; padding: 0; }
  .hpp-page { width: auto; padding: 0; box-shadow: none; }
  .hpp-list { break-before: page; }
}