/* Station 91 Meal Cost — "Signal" editorial system.
   Display/UI: Bricolage Grotesque · Data: IBM Plex Mono · one red accent, hairline rules, no cards. */
:root {
  --bg: #0c0c0e; --bg-2: #141417; --surf: #161619; --surf-2: #1c1c20;
  --ink: #f6f6f7; --mut: #83838d; --faint: #4d4d56; --line: #222227; --line-2: #2c2c33;
  --red: #ff4438; --red-deep: #d92b20; --red-soft: rgba(255,68,56,0.14);
  --lime: #c8f63e; --lime-deep: #9bc91f; --lime-soft: rgba(200,246,62,0.14);
  --green: #45d483; --r: 12px;
  --header-h: 150px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 15px; line-height: 1.4; letter-spacing: -0.005em; padding-bottom: 128px;
}
.mono, body .mono { font-family: "IBM Plex Mono", monospace; font-feature-settings: "tnum" 1; letter-spacing: 0; }

/* ---------- Header ---------- */
header { position: sticky; top: 0; z-index: 30; padding: 18px 20px 0; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 13px; }
.badge { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px; width: 42px; height: 42px;
  border-radius: 11px; line-height: 1; display: grid; place-items: center; color: #fff; background: var(--red); }
.brand h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 30px; line-height: 0.92;
  letter-spacing: -0.03em; margin: 0; }
.brand h1 small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--mut);
  letter-spacing: 0.24em; font-weight: 400; text-transform: uppercase; margin-top: 5px; }
.monthbar { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.monthbar input[type=month] { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 100px; padding: 8px 13px; font-size: 13px; font-family: "IBM Plex Mono", monospace; color-scheme: dark; }
.monthbar .muted { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }

/* ---------- Tabs (pill nav) ---------- */
.tabs { display: flex; gap: 6px; margin-top: 16px; padding: 13px 0 11px; border-top: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; color: var(--mut); cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  padding: 7px 16px; border-radius: 100px; transition: all 0.16s; }
.tabs button.active { background: var(--ink); color: var(--bg); }

main { padding: 16px 20px 0; max-width: 820px; margin: 0 auto; }

/* ---------- Sub-toggle ---------- */
.sub { display: inline-flex; gap: 4px; margin-bottom: 16px; background: var(--bg-2); padding: 4px; border-radius: 100px; border: 1px solid var(--line); }
.sub button { border: 0; background: transparent; color: var(--mut); cursor: pointer; font-weight: 600; font-size: 13px;
  padding: 7px 16px; border-radius: 100px; transition: all 0.15s; }
.sub button.active { background: var(--ink); color: var(--bg); }

.daypick { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 2px; }
.daypick .d { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.daypick .d .muted { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.daypick button { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 50%;
  width: 40px; height: 40px; font-size: 19px; cursor: pointer; transition: all 0.12s; }
.daypick button:active { background: var(--red); border-color: var(--red); color: #fff; }

.btn { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 100px;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all 0.14s; font-family: "Bricolage Grotesque", sans-serif; }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.red:active { background: var(--red-deep); }
.btn.ghost { background: transparent; color: var(--mut); border-color: transparent; }

/* ---------- Person rows (day view) — hairline, big name ---------- */
.person { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line); }
.person:first-of-type { border-top: 0; }
.person .nm { flex: 1; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.person .nm small { font-family: "IBM Plex Mono", monospace; color: var(--faint); margin-left: 9px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.steps { display: flex; gap: 7px; }
.steps button { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--mut); font-size: 14px; font-weight: 600; cursor: pointer; font-family: "IBM Plex Mono", monospace; transition: all 0.12s; }
.steps button.on { background: var(--lime); border-color: var(--lime); color: #11150a; }
.steps button.on.zero { background: var(--surf-2); border-color: var(--line-2); color: var(--ink); }
.steps button:active { transform: scale(0.92); }

/* ---------- Full grid ---------- */
.gridwrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); -webkit-overflow-scrolling: touch;
  /* Height is set by sizeGrid() in app.js: the grid fills the viewport down
     to the FAB, making it the ONLY scroll region on this tab (day header
     stays pinned; no page+grid double-scroll). */
  overscroll-behavior: contain; }
table.grid { border-collapse: collapse; font-size: 12px; min-width: 100%; font-family: "IBM Plex Mono", monospace; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; white-space: nowrap; }
table.grid th.nm, table.grid td.nm { position: sticky; left: 0; z-index: 2; text-align: left; background: var(--surf);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; }
table.grid thead th { background: var(--surf-2); position: sticky; top: 0; color: var(--mut); font-weight: 500; z-index: 3; }
table.grid thead th.nm { z-index: 4; } /* corner cell beats both sticky axes */
table.grid td.c { cursor: pointer; min-width: 26px; color: var(--ink); }
table.grid td.c.v { background: var(--lime-soft); color: var(--lime); font-weight: 700; }
table.grid td.tot { font-weight: 700; color: var(--ink); }
table.grid tr.hl td { background: rgba(255,68,56,0.12) !important; }
table.grid tr.hl td.nm { background: rgba(255,68,56,0.16) !important; box-shadow: inset 3px 0 0 var(--red); }

/* ---------- Entry forms — hairline blocks (no card box) ---------- */
.card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 6px; margin-bottom: 0; }
.rows .card:first-child { border-top: 0; }
.card .del { margin-top: 2px; }
.card .f { display: flex; gap: 9px; margin-bottom: 9px; }
.card label { flex: 1 1 0; min-width: 0; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; color: var(--mut);
  display: flex; flex-direction: column; gap: 5px; letter-spacing: 0.1em; text-transform: uppercase; }
.card input, .card select { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 9px;
  padding: 10px; font-size: 14px; width: 100%; min-width: 0; box-sizing: border-box; color-scheme: dark; transition: border-color 0.15s, box-shadow 0.15s; }
.card input:focus, .card select:focus, .monthbar input:focus, .inp-inline:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.card input[type=date] { -webkit-appearance: none; appearance: none; }
.paynp { display: flex; gap: 8px; align-items: center; }
.tag { font-family: "IBM Plex Mono", monospace; font-size: 9px; color: var(--lime); border: 1px solid var(--lime-deep);
  border-radius: 100px; padding: 2px 7px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- AO51 sections — eyebrow + hairline ledger (no cards) ---------- */
.section { margin-bottom: 26px; }
.section-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); padding: 0 0 10px; margin: 0 0 4px; border-bottom: 1px solid var(--line); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--mut); font-size: 13.5px; }
.kv .v { font-family: "IBM Plex Mono", monospace; font-weight: 500; }
.kv.big { padding: 14px 0 4px; border-bottom: 0; align-items: baseline; }
.kv.big .k { color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.kv.big .v { color: var(--red); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.03em; }
.kv.big.count .v { color: var(--lime); }
.inp-inline { width: 116px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 9px;
  padding: 8px 10px; font-size: 14px; text-align: right; font-family: "IBM Plex Mono", monospace; }

/* The AO51 is a form to fill in, not a board to scan, so it keeps a form's
   measure while the visitor and grid tabs still use the full 1180px. */
@media (min-width: 760px) { .ao51 { max-width: 780px; } }

/* ---------- AO51 Section 1 — the arithmetic, made visible ----------
   The form is a sum: A + B + C − D − E − F. As nine identical rows that was
   invisible, so the operator moves into a left gutter and the running subtotals
   step forward in weight. Values sit in one fixed right-hand column rather than
   flung to the far edge of a 1180px page, so the eye tracks label -> number in
   one move. */
.led { display: grid; grid-template-columns: 26px minmax(0, 1fr) 148px;
  align-items: center; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.led-op { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--faint); }
.led-k { color: var(--mut); font-size: 13.5px; }
/* Padded to the input's inner text edge, so a typed number and a derived one
   land on the same right margin instead of a hair apart. */
.led-v { font-family: "IBM Plex Mono", monospace; font-weight: 500; text-align: right;
  font-feature-settings: "tnum" 1; padding-right: 11px; }
.led .inp-inline { width: 100%; }
/* A subtotal is a claim about the rows above it — brighter, and its operator
   carries the accent so the three "=" steps read as the spine of the section. */
.led.sum { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.022)); }
.led.sum .led-k, .led.sum .led-v { color: var(--ink); font-weight: 600; }
.led.sum .led-op { color: var(--red); }
.led-tag { font-family: "IBM Plex Mono", monospace; font-size: 9px; color: var(--faint);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 2px 7px;
  letter-spacing: 0.12em; text-transform: uppercase; margin-left: 8px; white-space: nowrap; }

/* ---------- AO51 Meals Furnished — a table that admits it's a table ----------
   Pay and Non-Pay were two unlabelled boxes, and the auto rows printed their
   numbers as text so nothing lined up. Same two columns for every row, headed
   once. */
.mf-head, .mf-row, .mf-tot { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px;
  align-items: center; gap: 0 10px; }
.mf-head { padding: 0 0 7px; border-bottom: 1px solid var(--line-2); }
.mf-head span { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); text-align: right; }
.mf-head span:first-child { text-align: left; }
.mf-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.mf-k { color: var(--mut); font-size: 13.5px; }
.mf-v { font-family: "IBM Plex Mono", monospace; font-weight: 500; text-align: right;
  font-feature-settings: "tnum" 1; padding-right: 11px; }
.mf-v.zero { color: var(--faint); }
.mf-row .inp-inline { width: 100%; }
/* The group name belongs to its rows, not repeated inside each one. */
.mf-grp { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mut); padding: 15px 0 5px; }
.mf-tot { padding: 12px 0 0; margin-top: 2px; border-top: 1px solid var(--line-2); }
.mf-tot .mf-k { color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  text-transform: uppercase; }
.mf-tot .mf-v { color: var(--lime); font-weight: 700; font-size: 16px; }

/* A total is the end of its section, not the start of the next one. */
.kv.big + .section-title, .mf-tot + .section-title { margin-top: 30px; }
.kv.big .k small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px;
  font-weight: 400; letter-spacing: 0.06em; color: var(--faint); text-transform: none; margin-top: 3px; }

@media (max-width: 480px) {
  .mf-head, .mf-row, .mf-tot { grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 0 7px; }
  .led { grid-template-columns: 20px minmax(0, 1fr) 116px; gap: 0 9px; }
}

.muted { color: var(--mut); font-size: 12.5px; }
.addrow { width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--mut); border-radius: 100px;
  padding: 12px; font-size: 13px; cursor: pointer; transition: all 0.15s; margin-top: 2px; }
.addrow:hover { border-color: var(--red); color: var(--red); }

/* ---------- FAB + toast + clear ---------- */
.fab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-width: 820px; margin: 0 auto;
  padding: 14px 20px calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--bg) 72%, transparent); display: flex; gap: 10px; }
.fab .btn { flex: 1; justify-content: center; padding: 15px; font-size: 15px; font-weight: 700; }
.clearbtn { width: 100%; border: 0; background: transparent; color: var(--faint); border-radius: 100px; padding: 12px;
  font-size: 12.5px; cursor: pointer; margin-top: 24px; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.15s; }
.clearbtn:hover { color: var(--red); }
.toast { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink);
  color: var(--bg); padding: 11px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 0.22s, transform 0.22s; pointer-events: none; z-index: 40; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Choreographed reveal (navigation only) ---------- */
@keyframes navrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#app.navin > * { animation: navrise 0.42s cubic-bezier(.2,.7,.2,1) both; }
#app.navin > *:nth-child(1){animation-delay:.02s} #app.navin > *:nth-child(2){animation-delay:.06s}
#app.navin > *:nth-child(3){animation-delay:.10s} #app.navin > *:nth-child(4){animation-delay:.14s}
#app.navin > *:nth-child(5){animation-delay:.17s} #app.navin > *:nth-child(6){animation-delay:.20s}
#app.navin > *:nth-child(n+7){animation-delay:.22s}

/* ---------- Micro-interactions + empty states ---------- */
.btn, .tabs button, .sub button, .addrow, .editbtn { transition: transform 0.1s ease, background 0.16s, color 0.16s, border-color 0.16s; }
.btn:active, .addrow:active { transform: scale(0.97); }
.tabs button:active, .sub button:active { transform: scale(0.96); }
.person { transition: opacity 0.12s; }
.kv .v, .kv.big .v { transition: color 0.2s; }
.emptyrow { text-align: center; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: 0.04em; padding: 22px 0; border-top: 1px solid var(--line); }
.emptyrow b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 22px;
  color: var(--faint); letter-spacing: -0.02em; margin-bottom: 4px; text-transform: none; }

@media print { body > header, body > main, body > .fab, body > .toast { display: none !important; } }


/* ---------- Submission-readiness panel ---------- */
.subcheck { border: 1px solid var(--line); border-left-width: 3px; padding: 12px 14px; margin-bottom: 16px; }
.subcheck.ok   { border-left-color: var(--lime); }
.subcheck.warn { border-left-color: #e5b04a; }
.subcheck.bad  { border-left-color: var(--red); }
.subcheck-title { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; font-weight: 600; }
.subcheck.ok  .subcheck-title { color: var(--lime); }
.subcheck.warn .subcheck-title { color: #e5b04a; }
.subcheck.bad .subcheck-title { color: var(--red); }
.subcheck-sub { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--mut); margin-top: 5px; letter-spacing: 0.04em; }
.subcheck-item { font-family: "IBM Plex Mono", monospace; font-size: 11px; margin-top: 6px; letter-spacing: 0.02em; }
.subcheck-item.err  { color: var(--red); }
.subcheck-item.warn { color: #e5b04a; }

/* ---------- FAB share ---------- */
.btn.share { background: transparent; border-color: var(--lime); color: var(--lime); flex: 0 0 auto; }
.btn.share:active { background: var(--lime-soft); }
.fab .btn.red { flex: 1; }
.lockscroll { overflow: hidden; }


/* ---- Fill-from-staffing ---- */
.fillbtn{margin-left:auto}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:200;padding:16px}
.modal{background:var(--panel,#14161b);border-radius:14px;padding:18px;max-width:460px;width:100%;
  max-height:84vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal h3{margin:0 0 6px}
.sf-body{overflow-y:auto;flex:1;min-height:0;margin:10px 0}
.sf-meals{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sf-meals button{min-width:38px;padding:6px 10px;border-radius:8px}
.sf-meals button.on{background:var(--accent,#f5a623);color:#111;font-weight:700}
.sf-stats{margin-bottom:12px;line-height:1.6}
.sf-write{color:var(--accent,#f5a623);font-size:1.05em}
.sf-list{border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.sf-row{display:flex;justify-content:space-between;padding:4px 0;font-size:.94em}
.sf-err{color:#ec5b52}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.modal-actions .primary{background:var(--accent,#f5a623);color:#111;font-weight:700}

.sf-vis{display:flex;align-items:center;gap:7px;margin-top:8px;cursor:pointer}
.sf-vis input{width:16px;height:16px;accent-color:var(--accent,#f5a623)}

/* ---------- Visitor list (AO53) — day rules + one line per person ---------- */
.vday { position: sticky; top: var(--header-h); z-index: 5;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 22px 0 0; padding: 7px 0 6px; background: var(--bg);
  border-bottom: 1px solid var(--line-2); }
.vlist .vday:first-child { margin-top: 4px; }
.vday-d { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink); }
.vday-n { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); }

.vitem { border-bottom: 1px solid var(--line); }
.vrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif; }
.vrow-id { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.vrow-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow-title { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); flex: none; }
.vrow-meals { flex: none; font-size: 13px; display: flex; align-items: baseline; gap: 7px; }
.vrow-meals b { color: var(--lime); font-weight: 600; }
.vrow-meals .np { font-style: normal; font-size: 9.5px; letter-spacing: 0.1em; color: var(--red);
  border: 1px solid var(--red-soft); border-radius: 100px; padding: 2px 6px; }
.vrow-meals .zero { font-style: normal; color: var(--faint); }
.vrow-chev { flex: none; color: var(--faint); font-size: 17px; line-height: 1;
  transition: transform 0.16s ease, color 0.16s ease; }
.vitem.open .vrow-chev { transform: rotate(90deg); color: var(--red); }
.vitem.open .vrow-name { color: var(--red); }

.vdetail { display: none; }
.vitem.open .vdetail { display: block; }
.vlist .vdetail.card { border-top: 0; padding-top: 2px; padding-bottom: 10px; }

/* Location + reason only appear where there's width for them (see wide tier). */
.vrow-loc, .vrow-reason { display: none; }

/* ---------- Wide tier: iPad portrait and up ---------- */
@media (min-width: 760px) {
  /* Centre header and main on the same 1180px measure so the brand, the tabs,
     the content and the actions all share one left edge. */
  header { padding: 20px max(32px, calc((100% - 1180px) / 2)) 0; }
  main { max-width: 1180px; padding: 24px 32px 0; }
  body { padding-bottom: 64px; }

  /* The action bar stops being a phone dock and sits up with the brand. */
  .fab { position: fixed; top: 20px; bottom: auto; left: auto; z-index: 31;
    right: max(32px, calc((100vw - 1180px) / 2));
    width: auto; max-width: none; margin: 0; padding: 0; background: none; gap: 9px; }
  .fab .btn { flex: 0 0 auto; padding: 11px 21px; font-size: 13.5px; }
  .toast { bottom: 34px; }

  /* Visitor rows become the AO53 row itself rather than a phone summary. */
  .vrow { gap: 16px; padding: 11px 4px; }
  .vrow-id { flex: 0 0 262px; }
  .vrow-loc { display: block; flex: 0 0 140px; font-size: 11px; color: var(--mut);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vrow-reason { display: block; flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vday { padding: 8px 4px 7px; }

  /* Two form fields per line is a phone compromise; give them real columns. */
  .card .f { gap: 14px; }
  .vlist .vdetail.card { padding: 4px 4px 14px; }
}

/* Mouse/trackpad affordances — touch targets don't need them. */
@media (hover: hover) {
  .vrow:hover { background: var(--bg-2); }
  .vitem.open .vrow { background: var(--bg-2); }
  .tabs button:hover { color: var(--ink); }
  .tabs button.active:hover { color: var(--bg); }
}

.sf-src { font-size: 12px; color: var(--mut); line-height: 1.45; margin-bottom: 12px; }
.sf-src b { color: var(--ink); font-weight: 700; }

.sf-upd { color: var(--lime); font-size: 12.5px; }
.sf-upd b { color: var(--lime); }

/* Excel export sits between the PDF and Share — same weight as Share, since
   it's the "I need to change something" path, not the primary one. */
.btn.xls { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn.xls:hover { border-color: var(--ink); }
@media (min-width: 760px) { .fab .btn.xls { padding: 11px 16px; } }

.btn.to0900 { color: var(--lime); }
.btn.to0900:hover { color: var(--lime-deep); }

/* Visitor pay-mode toggle — the meals move column, the number doesn't change. */
.vpay { display: flex; gap: 8px; margin: 4px 0 10px; }
.vpay-b { flex: 1; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--mut); border-radius: 9px; padding: 9px 10px; font-size: 13px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; cursor: pointer;
  transition: all 0.14s; }
.vpay-b.on { background: var(--lime-soft); border-color: var(--lime); color: var(--lime); }
.vpay-b.on.non { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* Per-day add — sits in the day rule, quiet until you go for it. */
.vday-add { margin-left: 10px; background: transparent; border: 1px solid var(--line-2);
  color: var(--mut); border-radius: 6px; width: 22px; height: 20px; line-height: 1;
  font-size: 13px; cursor: pointer; padding: 0; vertical-align: middle;
  transition: all 0.14s; }
.vday-add:hover { border-color: var(--red); color: var(--red); }