/* Kala — visual system v47 · phone pass v155 · system pass v279
   Principles: paper-quiet surfaces; ink for data; green ONLY for brand
   and actions; amber = needs a human; red = destructive. Money is data,
   not decoration — tabular, right-aligned, ink. */

:root {
  --paper: #faf8f2;
  --card: #ffffff;
  --ink: #20281f;
  --muted: #6d766b;
  --faint: #9aa197;
  --green: #2e5339;
  --green-deep: #24422d;
  --green-soft: #eaf0e5;
  --gold: #9a6b00;
  --gold-soft: #faf1d9;
  --amber-line: #e8c66a;
  --line: #e6e1d4;
  --hairline: #eeeae0;
  --red: #a33c2f;
  --red-soft: #f8e5e1;
  --shadow: 0 1px 2px rgba(32, 40, 31, .05);
  --cream: var(--paper);           /* legacy aliases */
}

/* ---- the system (v279): one type scale, one spacing scale, colour
   only for meaning. Everything below reads from these. */
:root {
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 27px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px;
  --focus: 0 0 0 3px rgba(46, 83, 57, .28);
  --tap: 44px;
  --status-service: #a33c2f;      /* tonight: red */
  --status-money: #9a6b00;        /* money: gold */
  --status-books: #4f7fc9;        /* the books: blue */
  --status-house: #9aa197;        /* housekeeping: faint */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Avenir Next", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  font-size: var(--fs-md);
}
/* keyboard users always see where they are; mouse users never see rings */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
a:focus-visible { border-radius: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; color: var(--green); padding: 8px 12px; border-radius: 8px; z-index: 100 }
.skip:focus { left: 12px; }
.small { font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* (v345) the whole site uses the screen the way the Wine sheet always has:
   one wide page with Wine's gutter. Prose keeps a reading measure inside
   it (below); tables take the width and scroll in their own box only when
   they must. A phone is unchanged (the 640 px rules below). */
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 24px; }
:where(.subtitle, .interp, .honest, .insight p, .todo p, .kalaread p, .verdict .vs, .card > p) { max-width: 70ch; }
/* a table of five or more columns that's wider than its box scrolls inside that box, never off the page */
:where(main, .card, details, section, form, div):has(> table :is(tr > :nth-child(5))) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
a { color: var(--green); }
a:hover { color: var(--green-deep); }

/* ---------------------------------------------------------- top bar */
.topbar { background: var(--green); box-shadow: var(--shadow); }
.topbar-inner { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand {
  font-size: 22px; font-weight: 700; color: #fff;
  text-decoration: none; letter-spacing: .4px;
}
.brand .leaf { font-size: 14px; vertical-align: top; opacity: .9; }
.brand { padding: 3px 10px; margin-left: -10px; border-radius: 999px; }
.brand.active { background: rgba(255,255,255,.2); }
.brand .attn { vertical-align: middle; }
.topbar nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  color: #d7e2d0; text-decoration: none; padding: 5px 11px;
  border-radius: 999px; font-weight: 600; font-size: 13.5px;
  position: relative;
}
.topbar nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar nav a.active { background: rgba(255,255,255,.2); color: #fff; }
.topbar nav .navdiv {
  width: 1px; height: 18px; background: rgba(255,255,255,.22);
  margin: 0 6px; display: inline-block;
}
.attn {
  display: inline-block; min-width: 17px; text-align: center;
  background: var(--gold-soft); color: var(--gold);
  border-radius: 999px; font-size: 11px; font-weight: 800;
  padding: 0 5px; margin-left: 5px; vertical-align: 1px;
}
.restaurant-name { color: #b9c9b0; font-size: 13px; }
.dropslot { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
.dropstatus { color: #d7e2d0; font-size: 12.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropstatus:empty { display: none; }
.dropslot .btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.dropslot .btn:hover { background: rgba(255,255,255,.22); }
/* (v338.4) one "+ Add": its menu — Camera and Photo library on a touch
   device only (html.touchy, set by base.html), Files everywhere */
.addmenu { position: relative; }
.addmenu > summary { list-style: none; }
.addmenu > summary::-webkit-details-marker { display: none; }
.addsheet { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; background: var(--card, #fff);
            border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.addopt { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); cursor: pointer; font-size: 15px; }
.addopt small { display: block; color: var(--muted); font-size: 12px; }
.addopt:hover { background: var(--green-soft); }
.addtouch { display: none !important; }
html.touchy .addtouch { display: block !important; }

/* ------------------------------------------------------------- type */
h1 { font-size: 27px; margin: 26px 0 4px; letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 26px 0 10px; text-transform: uppercase;
     letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.subtitle { color: var(--muted); margin: 0 0 18px; }
/* paired pages: the header doubles as the switcher — the page you're
   on in ink, its sibling a quiet link beside it. */
.pagehead .sib {
  font-size: 27px; font-weight: 600; letter-spacing: -.2px;
  color: var(--faint); text-decoration: none;
}
.pagehead .sib:hover { color: var(--muted); }
.pagehead { display: flex; align-items: baseline; gap: 14px;
            justify-content: space-between; flex-wrap: wrap; }

/* ------------------------------------------------------------ cards */
.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid-4 { grid-template-columns: repeat(2, 1fr); }
                            .grid-2 { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow);
}
.stat .big {
  font-size: 28px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.stat .label { color: var(--muted); font-size: 13px; margin-top: 1px; }

/* ----------------------------------------------------------- tables */
table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); font-size: 14.5px;
}
th, td { text-align: left; padding: 9px 13px;
         border-bottom: 1px solid var(--hairline); }
th {
  background: var(--card); color: var(--faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .7px; font-weight: 700;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td, tr:hover td { background: #fcfbf6; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cost { font-weight: 650; color: var(--ink);
        font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
small.muted { font-size: 12px; }
table table { box-shadow: none; font-size: 13.5px; }
table table tr:hover td { background: inherit; }

/* ------------------------------------------------------------ forms */
form.inline { display: inline; }
input, select, textarea {
  font: inherit; font-size: 14px; padding: 7px 10px; min-height: 36px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); max-width: 100%;
}
input[type=checkbox], input[type=radio] { min-height: 0; width: 18px; height: 18px; accent-color: var(--green); }
input:focus, select:focus, textarea:focus {
  outline: none; box-shadow: var(--focus);
  border-color: var(--green);
}
@media (pointer: coarse) { input, select { min-height: var(--tap); } }
label { font-size: 12.5px; color: var(--muted); display: block;
        margin-bottom: 2px; font-weight: 600; }
.field { display: inline-block; margin: 0 10px 10px 0; vertical-align: top; }
.btn {
  font: inherit; font-weight: 650; border: 1px solid transparent;
  border-radius: 8px; padding: 8px 16px; cursor: pointer;
  background: var(--green); color: #fff; min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.2; vertical-align: middle;
}
.btn:hover { background: var(--green-deep); }
.btn:focus-visible { box-shadow: var(--focus), 0 0 0 1px #fff inset; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn-small { padding: 4px 11px; font-size: 13px; min-height: 30px; }
@media (pointer: coarse) { .btn { min-height: var(--tap); } .btn-small { min-height: 40px; padding: 6px 13px; } }
.btn-quiet { background: transparent; color: var(--green);
             border-color: var(--line); }
.btn-quiet:hover { background: var(--green-soft); }
.btn-danger { background: transparent; color: var(--red);
              border-color: var(--line); }
.btn-danger:hover { background: var(--red-soft); }
a.btn { text-decoration: none; display: inline-block; }

/* ---------------------------------------------------------- flashes */
.flash { padding: 11px 16px; border-radius: 10px; margin: 16px 0 0;
         font-size: 14.5px; border: 1px solid transparent; }
.flash-ok { background: var(--green-soft); color: var(--green-deep);
            border-color: #d5e2cd; }
.flash-error { background: var(--red-soft); color: var(--red);
               border-color: #ecc9c2; }

/* ------------------------------------------------------------- misc */
details.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 18px; margin: 14px 0;
  box-shadow: var(--shadow);
}
details.panel summary { cursor: pointer; font-weight: 650;
                        color: var(--green); font-size: 14.5px; }
details.inline-edit summary { cursor: pointer; color: var(--muted);
                              font-size: 13px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px;
         font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.badge-recipe { background: var(--gold-soft); color: var(--gold); }
.badge-product { background: var(--green-soft); color: var(--green-deep); }
.badge-warn { background: var(--gold-soft); color: var(--gold);
              border: 1px solid var(--amber-line); }
.badge-new { background: var(--gold-soft); color: var(--gold); }
.error-text { color: var(--red); font-size: 13px; }

/* ---------------------------------------------------- Today (v279)
   Three cards, each one decision: kicker (why it ranks), headline,
   one sentence of consequence, one dominant button. Evidence folds.
   The colour dot is the only colour: red tonight, gold money, blue
   the books, faint housekeeping. */
.sechead { display: flex; align-items: baseline; gap: 12px; margin: var(--sp-6) 0 var(--sp-3); }
.sechead h2.sec { margin: 0; font-size: var(--fs-sm); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sechead .count { font-size: var(--fs-xs); font-weight: 700; color: var(--gold); background: var(--gold-soft); border-radius: 999px; padding: 1px 9px; }
.todo { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); box-shadow: var(--shadow); }
.todo.primary { padding: var(--sp-5); }
.todo-main { flex: 1 1 auto; min-width: 0; }
.todo-kicker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tierdot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-house); display: inline-block; }
.todo.t1 .tierdot { background: var(--status-service); } .todo.t2 .tierdot { background: var(--status-money); } .todo.t3 .tierdot { background: var(--status-books); }
.todo h3 { margin: 4px 0 0; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.1px; line-height: 1.3; overflow-wrap: anywhere; }
.todo.primary h3 { font-size: 20px; }
.todo p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }
.todo-ev { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.todo-ev > summary { cursor: pointer; color: var(--green); font-weight: 600; list-style: none; display: inline-block; min-height: 28px; line-height: 28px; }
.todo-ev > summary::-webkit-details-marker { display: none; }
.todo-ev > summary::before { content: "▸ "; color: var(--faint); } .todo-ev[open] > summary::before { content: "▾ "; }
.todo-ev ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink); } .todo-ev li { margin: 2px 0; overflow-wrap: anywhere; }
.todo-items { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .todo-items a { font-size: var(--fs-sm); }
.todo-act { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 46%; }
.todo-act .btn { white-space: normal; text-align: center; }
.todo:not(.primary) .todo-act .btn { background: transparent; color: var(--green); border-color: var(--line); }
.todo:not(.primary) .todo-act .btn:hover { background: var(--green-soft); }
.todo .snooze { text-align: right; }
details.viewall { margin: var(--sp-3) 0 0; }
details.viewall > summary { cursor: pointer; list-style: none; color: var(--green); font-weight: 600; font-size: var(--fs-sm); padding: 10px 4px; min-height: var(--tap); display: flex; align-items: center; }
details.viewall > summary::-webkit-details-marker { display: none; }
details.viewall > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--faint); }
details.viewall[open] > summary::before { content: "▾"; }
details.viewall > summary strong { color: var(--red); margin-left: 4px; }
.card.setup h3 { margin: 0 0 6px; font-size: var(--fs-lg); } .card.setup ol { margin: 8px 0 0; padding-left: 20px; } .card.setup li { margin: 6px 0; } .card.setup li.done { color: var(--muted, #6b6b6b); } .card.setup li.done strong { font-weight: 500; }
@media (max-width: 640px) {
  .todo { flex-direction: column; gap: var(--sp-3); }
  .todo-act { flex-direction: row; align-items: center; max-width: none; width: 100%; justify-content: space-between; }
  .todo-act .btn { flex: 1 1 auto; }
  .todo.primary h3 { font-size: 18px; }
}

/* home */
.hero {
  background: var(--green); color: #eef3e8; border-radius: 14px;
  padding: 22px 26px; margin-top: 22px;
}
.hero h1 { margin: 0 0 2px; color: #fff; font-size: 24px; }
.hero p { margin: 0; color: #c4d3ba; font-size: 14px; }
/* -------------------------------------------- the Kala insight card
   headline → one or two sentences → numbers → one action. The accent
   carries urgency: red = likely a real problem, amber = unusual but
   maybe innocent, none = context. Headlines stay the same quiet
   weight as every other card title — the words carry the voice, the
   type stays minimal. */
.grouplabel {
  margin: 22px 0 8px; font-size: 13px; font-weight: 600;
  color: var(--muted);
}
.insight {
  background: var(--card); border: 1px solid var(--hairline);
  border-left: 3px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.insight-fix { border-left-color: var(--red); }
.insight-look { border-left-color: var(--amber-line); }
.insight h3 { margin: 0; font-size: 15px; font-weight: 600; }
.insight p { margin: 6px 0 0; color: var(--muted); font-size: 14px;
  max-width: 68ch; }
.insight-stats { display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 8px; }
.istat .ibig { font-variant-numeric: tabular-nums; font-weight: 650;
  font-size: 17px; color: var(--ink); }
.istat .ilabel { color: var(--faint); font-size: 12.5px; }
.insight-act {
  display: inline-block; margin-top: 9px; font-size: 13.5px;
  font-weight: 600; text-decoration: none;
}
.interp { margin: 6px 0 0; color: var(--muted); font-size: 13.5px;
  max-width: 58ch; }
.insight-foot { display: flex; gap: 14px; align-items: baseline; }
.ictl { display: inline; }
.ictl button {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--faint);
  text-decoration: underline; text-underline-offset: 2px;
}
.ictl button:hover { color: var(--muted); }
.attention-card { border-color: var(--amber-line); background: #fffcf3; }
.attention-card ul { margin: 8px 0 0 18px; padding: 0; }
.attention-card li { margin-bottom: 5px; }
.allclear { border-color: #d5e2cd; background: #f7faf4; color: var(--green-deep); }
.homelist { list-style: none; margin: 6px 0 0; padding: 0; }
.homelist li { display: flex; justify-content: space-between; gap: 12px;
               padding: 6px 0; border-bottom: 1px solid var(--hairline);
               font-size: 14px; }
.homelist li:last-child { border-bottom: none; }
.homelist .n { font-variant-numeric: tabular-nums; font-weight: 650;
               white-space: nowrap; }
.quick { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.footer { color: var(--faint); font-size: 12.5px; padding: 44px 24px 30px;
          text-align: center; }
@media (max-width: 720px) {
  .topbar-inner { height: auto; padding: 8px 16px; flex-wrap: wrap; }
  .restaurant-name { display: none; }
}

/* ------------------------------------------------- on a phone (v155)
   The same pages, folded for a hand: a two-row header (brand and the
   drop slot, then the sections as a strip you can swipe), sibling
   pages as pills under the title instead of a second headline,
   tables that scroll sideways inside the page instead of pushing it
   wide, inputs the full width of the screen at a size iOS won't zoom
   on, and buttons a thumb can hit. */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .topbar-inner { gap: 10px; padding: 6px 16px 0; row-gap: 0; }
  .brand { margin-left: -8px; font-size: 20px; padding: 4px 8px; }
  .dropslot { margin-left: auto; order: 2; }
  .dropslot .btn-small { padding: 6px 12px; font-size: 13px; }
  .topbar nav {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto;
    margin: 0 -16px; padding: 4px 16px 8px; gap: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: 6px 12px; font-size: 14px; }
  .topbar nav .navdiv { flex: 0 0 1px; }

  h1 { font-size: 23px; margin: 18px 0 6px; }
  h2 { font-size: 14px; margin: 22px 0 8px; }
  .hero { padding: 16px 18px; margin-top: 14px; border-radius: 12px; }
  .hero h1 { font-size: 21px; }
  .subtitle { margin-bottom: 14px; }
  .pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 0; justify-content: flex-start; }
  .pagehead h1 { order: -1; flex: 1 0 100%; margin-bottom: 8px; }
  .pagehead > span, .pagehead > form, .pagehead > div, .pagehead > p { flex: 1 0 100%; margin: 2px 0 8px; }
  .pagehead .sib {
    display: inline-block; font-size: 13.5px; font-weight: 600;
    letter-spacing: 0; color: var(--green); background: var(--card);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 11px; margin: 0 6px 8px 0; line-height: 1.3;
  }
  .pagehead .btn { margin: 0 6px 8px 0; vertical-align: top; }

  .card { padding: 14px 14px; border-radius: 10px; }
  details.panel { padding: 10px 14px; }
  .insight { padding: 12px 14px; }
  .insight p { font-size: 14.5px; }

  .tscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
             border-radius: 12px; }
  table { font-size: 14px; }
  th, td { padding: 8px 10px; }
  table table { font-size: 13px; }

  input, select, textarea { font-size: 16px; padding: 9px 11px; }
  .field { display: block; flex: 1 0 100%; margin: 0 0 10px; }
  .field > label.blank { display: none; }
  .field input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .field select, .field textarea { width: 100% !important; }
  input[type=file] { width: 100%; max-width: 100%; }
  .field .btn { min-height: 44px; }
  .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
  .btn-small { min-height: 38px; padding: 7px 13px; font-size: 14px; }
  .ictl button { padding: 4px 0; }
  .flash { margin-top: 12px; }
  .footer { padding: 30px 16px 24px; }
}

/* the night as it arrives — guests per quarter hour, a box per table */
.flow { display: flex; gap: 3px; align-items: flex-start; overflow-x: auto; }
.flow .slot { flex: 1 1 0; min-width: 34px; text-align: center;
              border-top: 2px solid var(--green); padding-top: 3px; }
.flow .slot.empty { border-top-color: var(--line); }
.flow .slot.second { border-left: 2px solid var(--green); }
.flow .t { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.flow .g { font-size: 16px; font-weight: 700; line-height: 1.2; }
.flow .empty .g { color: var(--line); font-weight: 400; }
.flow .chips { display: flex; flex-direction: column; gap: 2px;
               align-items: center; margin-top: 3px; }
.flow .chip { display: inline-block; min-width: 20px; padding: 0 3px;
              border: 1px solid var(--ink); border-radius: 4px;
              font-size: 11px; font-weight: 700; line-height: 16px; }

/* folding alert cards (v145): the summary is the headline; shut, it's one line */
details.fold > summary { cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--muted); transition: transform .12s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold:not([open]) { padding-top: 10px; padding-bottom: 10px; }
.snooze { white-space: nowrap; }
.snooze .ictl button { font-size: 11.5px; opacity: .55; }
.snooze .ictl button:hover { opacity: 1; }
/* v290 — Today in the operator's order: quiet arrows on each heading */
.secctl { margin-left: 8px; display: inline-flex; gap: 2px; opacity: .35; transition: opacity .15s; }
.sechead:hover .secctl, .secctl:focus-within { opacity: 1; }
.secctl form { display: inline; margin: 0; }
.secctl button.linkish { background: none; border: 0; padding: 0 4px; min-height: 0; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1; }
.secctl button.linkish:hover { color: var(--ink, #1d1d1f); }
@media (hover: none) { .secctl { opacity: .6; } }

/* v293 — files dragged anywhere onto the page: a quiet frame says "yes, here" */
body.dropping::after { content: "Drop to file them with Kala"; position: fixed; inset: 12px; border: 3px dashed var(--green); border-radius: 16px; background: rgba(46, 83, 57, .06); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--green); font-size: 20px; pointer-events: none; z-index: 50; }

/* audit 2026-10 (sweep 7): a wide sheet scrolls inside its box, never the
   page — the Wine and Beer pages, the beer count, the wine order */
.sheetwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -8px; padding:0 8px }
/* the form's first submit, so Enter does the page's main thing — never a
   row's own button ("→ the bar", "Not in house", "Accept") */
.enter-default { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0 }

/* ---------------------------------------- the Sales page (v340)
   The table is the page; the chart and Kala's read beside it on a wide
   screen, below it on a phone. One accent for out of band: amber. */
.winpicks { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 2px 0 8px; }
.winpicks .field { margin: 0 0 0 6px; }
.coverline { margin: 0 0 16px; color: var(--muted); }
.salesgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .salesgrid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.costtable { width: 100%; border-collapse: collapse; }
.costtable th, .costtable td { padding: 10px 12px; }
.costtable tbody.costcat { border-top: 1px solid var(--hairline); }
.costtable .rowopen { border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; padding: 0; color: inherit; text-align: left; }
.costtable .rowopen .tri { display: inline-block; width: 1em; color: var(--muted); }
.costtable .costrow.oob .pctcell { color: var(--amber-ink, #9a6200); font-weight: 700; }
.costtable .trend { color: var(--muted); }
.costtable .costtotal td { border-top: 2px solid var(--line); }
.costdetail td { background: var(--paper, #faf9f6); }
.detailcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.detailcols ol { margin: 6px 0 0; padding-left: 20px; }
.detailcols li { margin: 2px 0; }
.honest { color: var(--muted); font-size: 13.5px; margin: 10px 0 18px; max-width: 70ch; }
.costchart svg { width: 100%; height: auto; margin-top: 8px; display: block; }
.costchart .cg { stroke: var(--hairline); stroke-width: 1; }
.costchart .cl { fill: var(--muted); font-size: 10px; }
.costchart .cband { fill: var(--green-soft, #e9f1ea); opacity: .35; }
.costchart .cpath { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.costchart .cdot { fill: var(--muted); }
.costchart .cname { fill: var(--muted); font-size: 10px; }
.costchart g.dim { opacity: .2; }
.costchart g.hl .cpath { stroke: var(--ink); stroke-width: 2.6; }
.costchart g.hl .cdot, .costchart g.hl .cname { fill: var(--ink); }
.costchart g.hl .cband { opacity: .8; }
.kalaread p { margin: 10px 0 0; line-height: 1.5; }
.kalaread .read-high { border-left: 3px solid var(--amber-line); padding-left: 10px; }
.kalaread .read-on, .kalaread .read-low { color: var(--muted); }

/* ---------------------------------------- Kala on iPad and phone (v325)
   Installed from Share → Add to Home Screen, held in one hand at the
   pass. Above 900px nothing here applies and the desktop is as it was.
   At 900px and under: the sections move to a bar under the thumb
   (Today, Kitchen, Counts, Add, More); every tap target is at
   least 44px; inputs are 16px so iOS never zooms on focus; a count's
   number boxes are big and bring up the number pad; tables and cards
   scroll sideways inside themselves; nothing with a fixed width can
   push the page wider than the screen. */
.tabbar { display: none; }
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .btn-small { min-height: var(--tap); }
  .topbar nav a { min-height: var(--tap); display: inline-flex; align-items: center; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
}
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
  input[inputmode="decimal"] { font-size: 20px; min-height: 48px; min-width: 4.5em; padding: 8px 10px; text-align: right; }
  .btn, .btn-small, button, select { min-height: var(--tap); }
  .card, details.panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  [style*="width:"] { max-width: 100%; box-sizing: border-box; }
  img, video, canvas, iframe, svg, pre { max-width: 100%; }
  pre { overflow-x: auto; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  .topbar nav { display: none; }
  .dropslot > .addmenu { display: none; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card, #fff); border-top: 1px solid var(--hairline);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around;
  }
  .tabbar > a, .tabbar > label, .tabmore > summary {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 54px; min-width: var(--tap); font-size: 12px; color: var(--muted);
    text-decoration: none; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  }
  .tabsheet label { display: block; min-height: var(--tap); padding: 11px 14px; font-size: 16px; color: var(--ink); border-radius: 8px; cursor: pointer; }
  .tabsheet label:active { background: var(--green-soft); }
  .tabbar .ti { font-size: 20px; line-height: 1; }
  .tabbar .on { color: var(--green); font-weight: 600; }
  .tabmore { flex: 1 1 0; display: flex; position: relative; }
  .tabmore > summary { width: 100%; }
  .tabmore > summary::-webkit-details-marker { display: none; }
  .tabmore[open] > summary { color: var(--green); }
  .tabsheet {
    position: absolute; right: 4px; bottom: calc(100% + 8px); min-width: 210px;
    background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px;
  }
  .tabsheet a, .tabsheet button {
    display: block; width: 100%; min-height: var(--tap); padding: 11px 14px; font-size: 16px;
    color: var(--ink); text-decoration: none; text-align: left; background: none; border: 0; border-radius: 8px;
  }
  .tabsheet a:active, .tabsheet button:active { background: var(--green-soft); }
  .wsbar { bottom: calc(62px + env(safe-area-inset-bottom)) !important; }
}

/* ------------------------------------------------ the phone, properly (v347)
   Under 900 px a house page is a list of rooms (.m-rooms), every table reads
   as a list (.m-list, built by static/phone.js) or — when you type into it —
   as one row a product with its box on the right (.m-form); the top bar
   stays put with the house's name; nothing scrolls sideways. A desktop sees
   none of this but the products pages' own list. */
.m-rooms, .m-house { display: none; }
/* the rows: a house's products page on any screen, a converted table on a phone */
.m-list, .hp-list { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin: 8px 0 14px; overflow: hidden; }
.m-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center;
         min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; position: relative; }
.m-row:last-child { border-bottom: none; }
.m-row[data-href], a.m-row { cursor: pointer; padding-right: 34px; }
.m-row[data-href]::after, a.m-row::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 22px; line-height: 1; }
.m-row:active { background: var(--green-soft); }
.m-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-n { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-s { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.m-a { grid-column: 2; grid-row: 2; display: flex; gap: 6px; justify-content: flex-end; }
.m-grp { padding: 14px 14px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink);
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--paper, #f7f6f2); border-bottom: 1px solid var(--hairline); }
.hp-search { position: sticky; top: 0; z-index: 30; background: var(--paper, #f7f6f2); padding: 6px 0 8px; }
.hp-search input { width: 100%; max-width: 520px; min-height: 44px; font-size: 16px; }
.hp-letter { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); background: var(--paper, #f7f6f2);
             border-bottom: 1px solid var(--hairline); scroll-margin-top: 120px; }
.hp-row { grid-template-columns: minmax(0, 1fr) auto; }
.hp-pill { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 600; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.hp-pill.hp-short { background: #fdeeed; color: #8f1d16; } .hp-pill.hp-none { background: #eee; color: #6f6c65; }
.hp-rail { display: none; }
@media (max-width: 900px) {
  /* the chrome: the top bar stays put — the house on the left, ＋ Add and Ask Kala on the right */
  .topbar { position: sticky; top: 0; z-index: 45; }
  .topbar-inner { height: 56px !important; padding: 0 12px !important; gap: 8px !important; flex-wrap: nowrap !important; }
  .brand { display: none !important; }
  .m-house { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: var(--tap); color: #fff; font-weight: 700; font-size: 19px;
             text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dropslot { margin-left: auto; order: 0 !important; }
  .dropslot > .addmenu { display: block !important; }
  .dropslot .btn-small, .askbtn { min-height: var(--tap); padding: 6px 12px; font-size: 14px; white-space: nowrap; }
  .dropstatus { display: none; }
  .askbtn { margin-left: 0; }
  .backlink { margin: 12px 0 4px !important; } .backlink a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 15px; }
  .pagehead a.sib, .pagehead .btn { display: inline-flex; align-items: center; min-height: var(--tap); }
  /* a house page: its rooms, nothing else */
  .m-rooms { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
  main:has(> .m-rooms) > :not(.m-rooms):not(.flash):not(.backlink) { display: none !important; }
  .m-room { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 12px 40px 12px 16px; position: relative;
            background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
  .m-room::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--faint); }
  .m-room.m-station { border-left: 4px solid var(--green); }
  .m-room:active { background: var(--green-soft); }
  .m-rt { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-rl { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* every table a list; a table you type into, one row a product */
  table.m-hidden { display: none !important; }
  table.m-form, table.m-form > tbody { display: block; width: 100%; border: 0; box-shadow: none; background: transparent; }
  table.m-form tr { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--hairline); }
  table.m-form tr.m-head, table.m-form td.m-hide, table.m-form tr.det { display: none !important; }
  table.m-form tr.m-grprow { background: var(--paper, #f7f6f2); }
  table.m-form tr.m-grprow td { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.m-form td { display: block; padding: 0; border: 0; }
  table.m-form tr:not(.m-grprow) > td:first-child { flex: 1 1 auto; min-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  table.m-form tr:not(.m-grprow) > td:first-child * { white-space: nowrap; }
  table.m-form tr:not(.m-grprow) > td:first-child div, table.m-form tr:not(.m-grprow) > td:first-child small { display: none; }
  table.m-form td:not(:first-child) { flex: 0 1 auto; min-width: 0; max-width: 60%; text-align: right; }
  table.m-form input[inputmode="decimal"], table.m-form input[type=number] { width: 5.5em !important; }
  table.m-form tr.m-multi { flex-wrap: wrap; }
  table.m-form tr.m-multi > td:first-child { flex: 1 0 100%; }
  table.m-form tr.m-multi > td:not(:first-child) { flex: 1 1 0; min-width: 0; text-align: left; }
  table.m-form tr.m-multi > td[data-h]::before { content: attr(data-h); display: block; font-size: 12px; color: var(--muted, #777); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.m-form tr.m-multi input[inputmode="decimal"], table.m-form tr.m-multi input[type=number] { width: 100% !important; }
  /* a row whose first cell is itself a box (Add by hand) takes two lines: the box, then the rest */
  table.m-form tr:has(> td:first-child input:not([type=checkbox]):not([type=radio]):not([type=hidden])) { flex-wrap: wrap; }
  table.m-form tr:has(> td:first-child input:not([type=checkbox]):not([type=radio]):not([type=hidden])) > td:first-child { flex: 1 0 100%; }
  table.m-form tr:has(> td:first-child input:not([type=checkbox]):not([type=radio]):not([type=hidden])) > td:not(:first-child) { flex: 1 1 0; }
  .m-pinned { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 20; width: 100%; min-height: 52px; box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
  .sheetwrap.m-more, .tscroll.m-more { box-shadow: inset -14px 0 12px -12px rgba(0,0,0,.28); }
  /* tap targets: 44 px every way; a long label ends in … rather than wrapping */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, summary.btn { min-height: var(--tap); }
  main button, main .btn { min-width: var(--tap); }
  main input[type=checkbox], main input[type=radio] { min-width: var(--tap); min-height: var(--tap); margin: 0; }
  .m-pinned { white-space: normal; flex: 1 0 100%; }
  main label select { max-width: 9em; }
  main .btn { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main details > summary { min-height: var(--tap); padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }
  main summary, .backlink a { min-width: var(--tap); }
  main .badge { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .secctl { display: none !important; }          /* Today's order is set on a desktop (or Settings) */
  table.m-form tr:not(.m-grprow) > td:first-child .sub, table.m-form tr:not(.m-grprow) > td:first-child form,
  table.m-form tr:not(.m-grprow) > td:first-child button { display: none !important; }
  .hp-rail { display: flex; flex-direction: column; position: fixed; right: 2px; top: 50%; transform: translateY(-50%); z-index: 35;
             background: rgba(255,255,255,.85); border-radius: 10px; padding: 4px 0; }
  .hp-rail a { display: block; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; color: var(--green); text-decoration: none; text-align: center; }
  .hp-list { margin-right: 22px; }
}

/* (v349) the product page's Sold rows the gap opened in */
tr.in-gap > td { background: #fbf3df; }
.m-row.in-gap { background: #fbf3df; }

/* (v350) a loss's reason: one tap on a pill, never a dropdown */
.loss-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.loss-pills legend { width: 100%; }
.loss-pill { display: inline-flex; cursor: pointer; margin: 0; font-weight: 400; }
.loss-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.loss-pill span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--hairline, #ddd); border-radius: 999px; background: var(--card, #fff); font-size: 14px; }
.loss-pill input:checked + span { background: #2e5339; border-color: #2e5339; color: #fff; }
.loss-pill input:focus-visible + span { outline: 2px solid #2e5339; outline-offset: 2px; }
.loss-word { display: none; width: 12em; }
.loss-pills:has(input[value="other"]:checked) .loss-word { display: inline-block; }
.loss-lines { list-style: none; margin: 10px 0 12px; padding: 0; max-width: 640px; }
.loss-lines li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hairline, #eee); }
.loss-lines .ll-v { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .loss-pill span { min-height: 44px; } }
/* (v347.1) a choice with its own boxes ("in [delis], a full one [ ] g"): it
   wraps between its parts, never inside a phrase — two lines on any font */
.how-opt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-weight: 400; white-space: nowrap; }
/* (v352) a long list on a phone, sent by the server 60 at a time */
.pl-pages { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 18px; }
.pl-pages .muted { font-size: 13px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
@media (max-width: 900px) {
  .pl-pages .btn, .pl-chips .btn { min-height: var(--tap); display: inline-flex; align-items: center; }
  .hp-rail.pl-words a { font-size: 10px; padding: 4px 5px; }
}

/* ---- (v354) Today's This week: a quiet bar a day, two lines, what Kala sees */
.wk .wk-row + .wk-row { border-top: 1px solid var(--hairline); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.wk .wk-h { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.wk-bars { display: flex; gap: var(--sp-2); align-items: flex-end; }
.wk-slot { flex: 1 1 0; min-width: 0; text-align: center; }
.wk-n { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.wk-out .wk-n { color: var(--faint); }
.wk-bar { position: relative; height: 64px; background: var(--hairline); border-radius: 4px; margin: 3px 0; overflow: hidden; }
.wk-bar span { position: absolute; left: 0; right: 0; bottom: 0; background: var(--green-soft); border-top: 2px solid var(--green); }
.wk-bar i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--muted); }
.wk-ahead .wk-bar { background: transparent; border: 1px dashed var(--line); }
.wk-d { font-size: var(--fs-xs); color: var(--muted); }
.wk-line { margin: var(--sp-2) 0 0; font-variant-numeric: tabular-nums; }
.wk-says { margin: 0; padding-left: 18px; }
.wk-says li { margin: 0 0 6px; max-width: 70ch; }
.wk-says a { color: var(--ink); text-decoration-color: var(--line); }
@media (max-width: 900px) {
  .wk-bars { gap: 4px; }
  .wk-n { font-size: 11px; }
  .wk-says a { display: block; min-height: var(--tap); padding: 4px 0; }
}

/* ---- (v354.1) counts waiting: the house tables' mark */
a.waiting { font-size: var(--fs-xs); color: var(--gold); white-space: nowrap; }
.weeknav { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.weeknav a { min-height: var(--tap); display: inline-flex; align-items: center; }
table.wk-past td.num, table.wk-past th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.wk-past tr.head td { background: none; padding-top: 14px; }

/* (v358) a house's rooms: the same row on every page of the house */
/* (v358.1) it can never widen the page: the rooms wrap, and a room too long
   for a line shrinks with an ellipsis — the current one included, never hidden */
.house-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding-bottom: 8px;
             border-bottom: 1px solid var(--line, #e6e2da); max-width: 100%; min-width: 0; box-sizing: border-box; }
.house-row a { font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 0;
               min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.house-row a:hover { color: var(--ink, #222); }
.house-row a.on { color: var(--ink, #222); box-shadow: inset 0 -2px 0 currentColor; }
@media (max-width: 900px) { .house-row { gap: 0 16px; margin-top: 10px; }
                            .house-row a { min-height: 44px; display: inline-flex; align-items: center; } }

/* (v362) A Products row is one line, a spreadsheet's: nothing wraps; a long
   name or "sold through" ends in an ellipsis; the "as of" line is a hover or
   a tap on In house (.said-tip), never a second line. */
table.oneline td { white-space: nowrap; vertical-align: middle; }
table.oneline td.nm, table.oneline td.thru { overflow: hidden; text-overflow: ellipsis; }
table.oneline td.nm { max-width: 340px; }
table.oneline td.thru { max-width: 380px; font-size: 12.5px; }
table.oneline .waiting { color: var(--gold); }
.said-tip { position: relative; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--faint); outline: none; cursor: help; }
.said-tip[data-said]:hover::after, .said-tip[data-said]:focus::after {
  content: attr(data-said); position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 4px;
  width: max-content; max-width: min(280px, 78vw); white-space: normal; text-align: left;
  padding: 6px 8px; font-size: 12px; font-weight: 400; line-height: 1.35;
  color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
/* (v362) a station line's "which stock" — asked once on the line, then a mark */
.whole-ask { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 6px; font-size: 12.5px; color: var(--gold); }
.whole-ask label { font-weight: 400; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.whole-mark { margin-left: 6px; padding: 0 7px; font-size: 11px; line-height: 18px; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer; vertical-align: middle; }
.whole-mark.all { color: var(--green); border-color: var(--green-soft); background: var(--green-soft); }
@media (max-width: 900px) {
  .whole-ask label { min-height: var(--tap); }
  .whole-mark { min-height: var(--tap); min-width: var(--tap); padding: 0 12px; font-size: 12px; }
}
/* (v362) the Recipes list: one line a recipe */
.said-tip.look { color: var(--gold); font-size: 12px; margin-left: 6px; }
table.recipes-list td.used-by { font-size: 13px; }
/* (v363) a page's name for the screen reader where the room row says it */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* (v365) ↑ ↓ on a menu row, a section, a course */
.mv { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.mv-b { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; padding: 0 6px; font-size: 12px; line-height: 20px; cursor: pointer; }
.mv-b:hover { color: var(--ink); border-color: var(--faint); }
@media (max-width: 900px) { .mv-b { min-width: var(--tap); min-height: var(--tap); font-size: 15px; } }