/* Menu import — the review screen.

   Some colours here are existing theme-aware custom properties —
   --charcoal-soft, --concrete, --glass-border, --glass-white, --bone, --muted
   and --sand DO redefine themselves under body.light-theme in index.html's
   inline stylesheet, so rules using those need no counterpart.

   --amber and --reef DO NOT. This header used to claim they did, and --reef is
   not defined anywhere in index.html at all — so every `var(--reef)`
   below fell through to the literal in both themes, and #1FA39E is 3.09:1 on
   the white light-theme card, under AA. It was carrying .mnu-cost-total-strong
   and .mnu-headline-strong: the margin total. Both are now defined here, in
   both themes, so `var(--reef)` is a real token rather than a fallback nobody
   noticed was always in use.

   HANDOFF rule 6. The convention for flat accents holds for FILLS and BORDERS
   only, not for text: raw --amber reads about 2:1 on a light card and #E05A4A
   about 3.2:1, both under AA. Every flat accent used as TEXT below therefore
   carries a body.light-theme counterpart, reusing the pair established
   everywhere else in this codebase — #9C5C08 for amber, #B03A2E for red.

   --reef takes the same treatment. Dark: #1FA39E (--teal-bright, 5.50:1 on the
   --charcoal-soft card). Light: #0E5F66 — the brand's own Deep Ocean, not an
   invented colour — 7.38:1 on the white card and 7.07:1 on the glass panel the
   totals actually sit on (rgba(0,0,0,0.02) over white, ~#FAFAFA). Ratios
   computed, not eyeballed; see the fix report.

   Defined on :root and body.light-theme HERE rather than in index.html, which
   is off-limits. HANDOFF rule 7: this file loads after the inline <style>, and
   body.light-theme (0,1,1) outranks :root (0,1,0), so both land the right way
   round in both themes. */

:root { --reef: #1FA39E; }
body.light-theme { --reef: #0E5F66; }

.mnu-wrap { padding: 0 1.5rem 2rem; }

/* What this module is, said first, because "it reads a folder by itself" is not
   something the screen would otherwise make obvious. */
.mnu-note {
  font-size: .78rem; line-height: 1.6; color: var(--muted);
  background: var(--glass-white); border-left: 2px solid var(--glass-border);
  border-radius: 0 8px 8px 0; padding: .7rem 1rem; margin-bottom: 1.1rem;
}
.mnu-note strong { color: var(--bone); font-weight: 600; }

.mnu-note-quiet {
  font-size: .74rem; line-height: 1.55; color: var(--muted);
  margin: .3rem 0 .8rem;
}

/* ---------- The bar ---------- */

.mnu-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; margin-bottom: .8rem;
}

.mnu-summary { font-size: .76rem; color: var(--muted); }
.mnu-summary-ok { color: var(--reef); font-weight: 600; }
.mnu-summary-bad { color: #E05A4A; font-weight: 600; }
body.light-theme .mnu-summary-bad { color: #B03A2E; }
.mnu-summary-quiet { color: var(--muted); }

/* Amber fill with dark text, in both themes — a fill, so no light-theme
   counterpart. Matches .soc-generate and .tasks-add-btn. */
.mnu-check {
  background: var(--amber); color: #1A1410; border: 0; border-radius: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .8rem;
  padding: .5rem 1.05rem; cursor: pointer;
}
.mnu-check:disabled { opacity: .45; cursor: not-allowed; }

.mnu-status { font-size: .78rem; line-height: 1.5; min-height: 1.2rem; margin-bottom: .8rem; }
.mnu-status-working { color: var(--sand); }
.mnu-status-ok { color: var(--reef); }
.mnu-status-error { color: #E05A4A; }
body.light-theme .mnu-status-error { color: #B03A2E; }

/* ---------- Whether the nightly read is actually running ---------- */

/* One line, always present when there is anything to say. It replaces a
   sentence that promised "tomorrow morning" with no evidence behind it. */
.mnu-health { margin: -.4rem 0 1rem; }
.mnu-health-line {
  font-size: .72rem; line-height: 1.55; color: var(--muted);
  background: var(--glass-white); border-left: 2px solid var(--glass-border);
  border-radius: 0 6px 6px 0; padding: .45rem .7rem;
}
.mnu-health-line strong { color: var(--bone); font-weight: 600; }
/* Red as TEXT and as a border, so both sides need the light counterpart —
   HANDOFF rule 6. */
.mnu-health-bad { color: #E05A4A; border-left-color: #E05A4A; }
body.light-theme .mnu-health-bad { color: #B03A2E; border-left-color: #B03A2E; }
.mnu-health-bad strong { color: inherit; }

/* ---------- Sections ---------- */

.mnu-section { margin-bottom: 1.6rem; }

.mnu-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  border-bottom: 1px solid var(--glass-border); padding-bottom: .4rem; margin-bottom: .5rem;
}

.mnu-section-title {
  font-family: 'Fraunces', serif; font-size: 1rem; color: var(--bone);
}

/* ---------- Cards ---------- */

.mnu-card {
  background: var(--charcoal-soft); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: .7rem;
}

/* A held menu is the one thing on this screen that wants doing. Amber as a
   BORDER is a fill-side use and needs no light-theme counterpart. */
.mnu-card-held { border-left: 3px solid var(--amber); }
.mnu-card-problem { border-left: 3px solid #E05A4A; }

.mnu-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}

.mnu-file {
  font-weight: 600; font-size: .88rem; color: var(--bone);
  word-break: break-word;
}

.mnu-file-link { font-size: .72rem; color: var(--reef); text-decoration: none; }
.mnu-file-link:hover { text-decoration: underline; }

.mnu-declared { font-size: .78rem; line-height: 1.55; color: var(--sand); margin-top: .35rem; }
.mnu-declared strong { color: var(--bone); font-weight: 600; }
.mnu-declared-empty { color: var(--muted); font-style: italic; }

/* The reason, always shown, for a match as well as a miss. A decision with no
   stated reason is as unreviewable as a silent skip. */
.mnu-reason { font-size: .76rem; line-height: 1.55; color: var(--muted); margin-top: .4rem; }

.mnu-candidates {
  font-size: .72rem; color: var(--muted); margin-top: .4rem;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
}
.mnu-candidate {
  background: var(--glass-white); border-radius: 999px; padding: .15rem .55rem;
  white-space: nowrap;
}
.mnu-candidate-score { color: var(--sand); font-weight: 600; }

.mnu-attached { margin-top: .45rem; }

.mnu-event-open {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: 'Archivo', sans-serif; font-size: .82rem; font-weight: 600;
  color: var(--amber);
}
/* Amber as text — see the file header. */
body.light-theme .mnu-event-open { color: #9C5C08; }
.mnu-event-open:hover { text-decoration: underline; }

.mnu-event-gone { font-size: .8rem; color: #E05A4A; }
body.light-theme .mnu-event-gone { color: #B03A2E; }

.mnu-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .71rem; color: var(--muted); margin-top: .35rem;
}
.mnu-byhand { color: var(--sand); font-weight: 600; }

/* ---------- Warnings ---------- */

.mnu-warnings {
  margin-top: .55rem; padding: .5rem .7rem;
  background: var(--glass-white); border-radius: 8px;
}
.mnu-warnings-title {
  font-size: .62rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; color: var(--amber); margin-bottom: .3rem;
}
body.light-theme .mnu-warnings-title { color: #9C5C08; }
.mnu-warning { font-size: .74rem; line-height: 1.55; color: var(--sand); margin-bottom: .25rem; }
.mnu-warning:last-child { margin-bottom: 0; }

/* ---------- Assigning ---------- */

.mnu-assign {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem;
}

.mnu-select {
  flex: 1 1 220px; min-width: 0; box-sizing: border-box;
  background: var(--concrete, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border); border-radius: 8px;
  color: var(--bone); font-family: 'Archivo', sans-serif; font-size: .78rem;
  padding: .4rem .55rem;
}
.mnu-select:focus { outline: none; border-color: var(--amber); }

.mnu-assign-btn {
  background: var(--amber); color: #1A1410; border: 0; border-radius: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: .76rem;
  padding: .42rem .9rem; cursor: pointer; flex: 0 0 auto;
}
.mnu-assign-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Moving an already-attached menu is the rarer, more consequential action, so
   it does not wear the primary button's weight. */
.mnu-assign-btn-quiet {
  background: transparent; color: var(--sand);
  border: 1px solid var(--glass-border);
}

.mnu-toggle {
  background: none; border: 0; padding: .4rem 0 0; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: .73rem; color: var(--muted);
  text-decoration: underline;
}

/* ---------- Drinks ---------- */

.mnu-items { margin-top: .5rem; border-top: 1px solid var(--glass-border); }

.mnu-item {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem;
  padding: .45rem 0; border-bottom: 1px solid var(--glass-border);
}
.mnu-item:last-child { border-bottom: 0; }

.mnu-item-main { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mnu-item-name { font-size: .82rem; color: var(--bone); font-weight: 600; }
.mnu-item-cat {
  font-size: .62rem; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted);
}
.mnu-item-desc {
  grid-column: 1 / 2; font-size: .73rem; line-height: 1.45; color: var(--muted);
}
.mnu-item-price {
  grid-row: 1 / 2; grid-column: 2 / 3; text-align: right; white-space: nowrap;
  font-size: .82rem; font-weight: 600; color: var(--sand);
}
/* A drink with no price is not a neutral fact — the costing work reads this
   column next, and a blank there is a hole nobody will notice. */
.mnu-item-price-missing { color: #E05A4A; font-weight: 500; font-size: .72rem; }
body.light-theme .mnu-item-price-missing { color: #B03A2E; }

.mnu-item-src {
  display: block; font-size: .6rem; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}

/* ---------- Empty states ---------- */

.mnu-empty {
  font-size: .78rem; line-height: 1.6; color: var(--muted);
  padding: .8rem 0;
}
/* An empty section that is empty because something FAILED never gets to look
   like an empty section that is empty because there is nothing in it.
   HANDOFF rule 4. */
.mnu-empty-bad {
  color: #E05A4A; background: var(--glass-white);
  border-left: 2px solid #E05A4A; border-radius: 0 8px 8px 0;
  padding: .7rem 1rem;
}
body.light-theme .mnu-empty-bad { color: #B03A2E; border-left-color: #B03A2E; }
.mnu-empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}

/* ---------- The last check ---------- */

.mnu-run-note {
  font-size: .74rem; line-height: 1.55; color: var(--sand);
  background: var(--glass-white); border-radius: 8px;
  padding: .5rem .7rem; margin-bottom: .5rem;
}

.mnu-run-row {
  padding: .5rem 0; border-bottom: 1px solid var(--glass-border);
}
.mnu-run-row:last-child { border-bottom: 0; }

.mnu-run-file {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--bone); font-weight: 600;
}
.mnu-run-decision {
  font-size: .62rem; letter-spacing: .8px; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.mnu-run-held .mnu-run-decision { color: var(--amber); }
body.light-theme .mnu-run-held .mnu-run-decision { color: #9C5C08; }
.mnu-run-failed .mnu-run-decision { color: #E05A4A; }
body.light-theme .mnu-run-failed .mnu-run-decision { color: #B03A2E; }
.mnu-run-imported .mnu-run-decision,
.mnu-run-updated .mnu-run-decision { color: var(--reef); }

.mnu-run-event { font-size: .76rem; color: var(--sand); margin-top: .15rem; }
.mnu-run-reason { font-size: .73rem; line-height: 1.5; color: var(--muted); margin-top: .15rem; }

/* ========================================================================= */
/* Build cards: the costing, what to buy, and the method                     */
/* ========================================================================= */

/* The same theme-aware properties as above. --amber and --reef are defined by
   this file (see the header); everything else here comes from index.html's
   inline stylesheet, which does redefine them under body.light-theme. */

/* ---------- Several toggles, on one line ---------- */

.mnu-toggles {
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
  padding-top: .4rem;
}
.mnu-toggles .mnu-toggle { padding-top: 0; }

/* "What to buy" is the thing he has never had, so it is the one that reads as
   a link worth pressing rather than as a disclosure arrow. */
.mnu-toggle-lead { color: var(--amber); font-weight: 600; }
body.light-theme .mnu-toggle-lead { color: #9C5C08; }

/* ---------- The headline, on the card ---------- */

.mnu-headline {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  margin: .55rem 0 .1rem; padding: .55rem .75rem;
  background: var(--glass-white); border-radius: 8px;
  font-size: .72rem; color: var(--muted);
}
.mnu-headline strong {
  display: block; font-family: 'Fraunces', serif; font-weight: 600;
  font-size: .95rem; color: var(--bone); line-height: 1.25;
}
.mnu-headline-strong strong { color: var(--reef); }

/* The forecast's own scope, on the card face rather than inside the collapsed
   costing panel. Full width so it sits under the four figures it qualifies. */
.mnu-headline-partial, .mnu-headline-whole {
  flex: 1 1 100%; font-size: .68rem; line-height: 1.5; margin-top: .1rem;
}
.mnu-headline-whole { color: var(--muted); }
/* Amber as text: the light counterpart is required. HANDOFF rule 6. */
.mnu-headline-partial { color: var(--amber); font-weight: 600; }
body.light-theme .mnu-headline-partial { color: #9C5C08; }
/* A headline that covers only part of the menu is bordered, so the difference
   is visible before the sentence is read. A BORDER, so no counterpart. */
.mnu-headline-part { border-left: 2px solid var(--amber); }

/* ---------- What kind of document this was ---------- */

/* menu_imports.document_kind, which supabase/0022_drink_builds.sql adds and
   nothing used to read. A build card and a customer menu look identical on this
   screen otherwise. */
.mnu-kind {
  font-size: .6rem; letter-spacing: .5px; text-transform: uppercase;
  font-weight: 700; border-radius: 999px; padding: .1rem .45rem;
}
/* A teal FILL with dark text, in both themes — the same treatment as
   .mnu-hero-pill and .mnu-check. Deliberately NOT var(--reef): --reef is the
   text token and flips between themes, and a fill that flips needs its text to
   flip with it. A fixed fill is 6.01:1 against #1A1410 in both themes and needs
   no counterpart (HANDOFF rule 6). */
.mnu-kind-build { background: #1FA39E; color: #1A1410; }
.mnu-kind-menu { background: var(--glass-white); color: var(--muted); }

/* ---------- Chips on a drink ---------- */

.mnu-chips {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .25rem;
}
.mnu-chip {
  font-size: .65rem; letter-spacing: .3px; color: var(--sand);
  background: var(--glass-white); border-radius: 999px; padding: .12rem .5rem;
}
.mnu-chip-quiet { color: var(--muted); }

/* An amber FILL with dark text — a fill-side use, so no counterpart needed. */
.mnu-hero-pill {
  font-size: .58rem; letter-spacing: .8px; text-transform: uppercase;
  font-weight: 700; background: var(--amber); color: #1A1410;
  border-radius: 999px; padding: .08rem .42rem;
}

/* ---------- The build card ---------- */

.mnu-build {
  grid-column: 1 / -1; margin: .45rem 0 .2rem;
  border-left: 2px solid var(--glass-border); padding: .1rem 0 .1rem .75rem;
}

.mnu-build-title {
  font-size: .6rem; letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: .5rem 0 .25rem;
}
.mnu-build-title:first-child { margin-top: .1rem; }

/* The one line on a build card that changes what the drink is if it is missed —
   "never pre-mix the acid", "steam to 50 degrees only". */
.mnu-build-note {
  font-size: .73rem; line-height: 1.5; color: var(--amber);
  margin-bottom: .2rem;
}
body.light-theme .mnu-build-note { color: #9C5C08; }

.mnu-percup { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.mnu-percup-item {
  font-size: .7rem; color: var(--muted);
  background: var(--glass-white); border-radius: 6px; padding: .15rem .45rem;
}
.mnu-percup-qty { color: var(--bone); font-weight: 600; margin-left: .35rem; }

.mnu-steps, .mnu-batched {
  margin: 0; padding-left: 1.1rem;
  font-size: .74rem; line-height: 1.55; color: var(--muted);
}
.mnu-steps li, .mnu-batched li { margin-bottom: .18rem; }
.mnu-steps li::marker { color: var(--sand); font-weight: 600; }

/* ---------- The costing ---------- */

.mnu-cost { margin-top: .55rem; border-top: 1px solid var(--glass-border); }

.mnu-cost-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--glass-border);
}
.mnu-cost-name {
  flex: 1 1 11rem; display: flex; align-items: baseline; gap: .4rem;
  font-size: .8rem; color: var(--bone); font-weight: 600;
}

.mnu-cost-cell {
  font-size: .78rem; color: var(--sand); font-variant-numeric: tabular-nums;
  min-width: 4.2rem; text-align: right;
}
.mnu-cost-cell span {
  display: block; font-size: .56rem; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.mnu-cost-cell-strong { color: var(--reef); font-weight: 600; }

/* His price, his cost and his margin, where the three do not agree. Nothing is
   corrected — this says so and leaves all three standing. */
.mnu-cost-row-off { background: var(--glass-white); }
.mnu-cost-off {
  flex: 1 1 100%; font-size: .71rem; line-height: 1.5; color: #E05A4A;
}
body.light-theme .mnu-cost-off { color: #B03A2E; }

.mnu-cost-total {
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  padding: .6rem .75rem; margin-top: .4rem;
  background: var(--glass-white); border-radius: 8px;
  font-size: .84rem; color: var(--bone); font-variant-numeric: tabular-nums;
}
.mnu-cost-total-cell span {
  display: block; font-size: .56rem; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.mnu-cost-total-strong { color: var(--reef); font-weight: 700; }

/* Whether these totals stand for the whole menu or only part of it, said every
   time rather than only when they do not. HANDOFF rule 4. */
.mnu-cost-partial {
  font-size: .7rem; line-height: 1.5; color: var(--muted); margin-top: .35rem;
}

/* ---------- What to buy ---------- */

.mnu-buy { margin-top: .55rem; border-top: 1px solid var(--glass-border); }

.mnu-buy-head {
  font-size: .7rem; line-height: 1.5; color: var(--muted); padding: .4rem 0 .25rem;
}

.mnu-buy-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .38rem 0; border-bottom: 1px solid var(--glass-border);
}
.mnu-buy-row:last-of-type { border-bottom: 0; }

.mnu-buy-name {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--bone);
}
.mnu-buy-drinks {
  font-size: .6rem; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}

.mnu-buy-total {
  text-align: right; white-space: nowrap;
  font-size: .84rem; font-weight: 600; color: var(--amber);
  font-variant-numeric: tabular-nums;
}
body.light-theme .mnu-buy-total { color: #9C5C08; }

/* The figure the document itself used, kept beside the readable one. */
.mnu-buy-raw {
  display: block; font-size: .62rem; font-weight: 400; color: var(--muted);
}

.mnu-buy-partial {
  display: block; font-size: .6rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: #E05A4A;
}
body.light-theme .mnu-buy-partial { color: #B03A2E; }

.mnu-buy-note {
  font-size: .7rem; line-height: 1.5; color: var(--muted); margin-top: .45rem;
}

/* A held build card shows its costing before it is placed, because that is most
   of what there is to check. */
.mnu-held-costing { margin-top: .3rem; }