/* The console's shell: the rail down the left, the sign-in gate, and the parts
   every page shares.
 *
 * ⚠️ THE PALETTE BLOCK BELOW IS THE SAME ONE AS `service.html`'s, CHARACTER FOR
 * CHARACTER, AND `test/shell.test.ts` FAILS THE BUILD IF THEY DRIFT. The
 * service page carries its own copy because it is a single self-contained
 * document that predates this file — moved here whole rather than rewritten,
 * because rewriting two thousand lines of working floor-plan code to save one
 * duplicated CSS block is a trade nobody should take. The test is what keeps
 * the duplication honest.
 *
 * ⚠️ THE LOOK IS NOT INVENTED HERE. It is the Stitch design system the owner
 * picked on 2026-09-13 — `assets/4b656ed54ad246b0b6738c11dde00b4c` in project
 * 15023219144815001286, the one the "Wine List" screen is drawn in: Newsreader
 * over Manrope, terracotta `#903f00` on warm parchment `#fff8f5`, a 256px
 * left rail, and content as white cards on the parchment. Every token below is
 * copied from that system's own Tailwind config rather than eyeballed from the
 * screenshot. Change it there first, not here.
 *
 * ⚠️ WHAT WAS DELIBERATELY NOT COPIED: the rail in those mockups also lists
 * Inventory, Staff and "POS Linked v4.8", and the product has none of those.
 * Six of the nine generated screens invented a point of sale
 * (`verticals/restaurant/design/ADMIN-RESULTS.md`), and `test/home.test.ts`
 * fails the build if that language reaches a page. The look is theirs; the
 * list of places is the product's.
 *
 * This is the CONSOLE's look, not the website's: see docs/TWO-VIEWS.md for why
 * the two disagree about almost every decision.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root{
  --ink:#1f1b17; --primary:#903f00; --primary-hi:#b45309; --amber:#a95b00; --amber-dark:#854600;
  --bg:#fff8f5; --card:#fff; --slate:#1f1b17; --muted:#564338; --faint:#897267;
  --line:#eae1da; --line-soft:#ddc1b3; --good:#2e6d4f; --good-bg:#e9f2ec; --bad:#93000a; --bad-bg:#ffdad6;
  --bad-line:#f0b9b2; --wait:#854600; --wait-bg:#ffdcc3; --sunk:#fcf2eb; --sunk-2:#f6ece6; --sunk-3:#f0e6e0;
  --rail:256px; --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --shadow:0 1px 2px rgba(31,27,23,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--slate);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:'tnum' 1}
a{color:var(--primary)}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ── the rail ─────────────────────────────────────────────────────────────
   256px, white, docked left, with the restaurant's own identity at the top
   and the places under it. Below 1000px it becomes the horizontal bar this
   console shipped with, scrolling sideways rather than wrapping — a console
   opened mid-service on a phone must never reflow its own navigation under
   the thumb that is reaching for it.

   ⚠️ IT NEVER COLLAPSES TO ICONS. The design system says a rail drops to
   64px icon-only on a narrow screen. This one does not: see `nav.tabs`. */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .in{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;text-decoration:none;flex:none}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--primary)}
.tabs{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{font:inherit;font-size:.875rem;font-weight:500;padding:.45em .8em;border-radius:6px;
  border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.tabs a:hover,.tabs button:hover{background:var(--sunk-2);color:var(--ink)}
.tabs a[aria-current="page"],.tabs button[aria-selected="true"]{background:var(--sunk-3);color:var(--primary);font-weight:600}

main{max-width:1180px;margin:0 auto;padding:26px 20px 80px}
h1{color:var(--ink);font-family:var(--serif);font-size:1.75rem;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.sub{color:var(--muted);font-size:.9rem}
.msg{border-radius:8px;padding:11px 14px;font-size:.9rem;margin-bottom:16px;border:1px solid transparent}
.msg.err{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.msg.ok{background:var(--good-bg);color:var(--good);border-color:#c6ddcd}

/* ── the pieces the editors are built from ───────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{color:var(--ink);font-family:var(--serif);font-size:1.2rem;font-weight:500;letter-spacing:-.01em;margin-bottom:2px}
.card .hint{color:var(--muted);font-size:.84rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row>div{flex:1 1 8rem;min-width:0}
label{display:block;color:var(--muted);font-size:.78rem;font-weight:600;margin-bottom:4px}
input,select,textarea{font:inherit;font-size:.9rem;color:var(--slate);background:var(--card);
  border:1px solid var(--line-soft);border-radius:8px;padding:.5em .65em;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
textarea{resize:vertical;min-height:4.5em}
input[type=checkbox]{width:auto;accent-color:var(--primary)}
.btn{font:inherit;font-size:.9rem;font-weight:600;padding:.55em 1.2em;border-radius:8px;
  border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--primary-hi);border-color:var(--primary-hi)}
.btn.sm{font-size:.82rem;padding:.4em .9em}
.btn.quiet{background:var(--sunk);color:var(--primary);border-color:var(--line-soft)}
.btn.quiet:hover{background:var(--sunk-2)}
.btn.danger{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}
.bar .grow{flex:1}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.2em .6em;border-radius:5px;background:var(--wait-bg);color:var(--wait)}
.tag.live{background:var(--good-bg);color:var(--good)}
.empty{color:var(--muted);font-size:.92rem;padding:28px 0;text-align:center}
.drag{cursor:grab;color:var(--faint);padding:0 2px;touch-action:none}
.sortrow{display:flex;align-items:center;gap:8px}
.sortrow .up,.sortrow .down{font:inherit;font-size:.9rem;line-height:1;padding:.25em .5em;
  border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:6px;cursor:pointer}

/* ── the gate ─────────────────────────────────────────────────────────────
   Copied in spirit from the account app's, not in code: this one appears over
   whatever page the owner was on, so that signing back in mid-service returns
   them to the room rather than to a home page. */
.gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;padding:24px;overflow:auto}
.gate .box{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:30px 28px;width:100%;max-width:26rem;box-shadow:var(--shadow)}
.gate h1{margin:10px 0 4px}
.gate .lede{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.gate .field{margin-bottom:12px}
.gate .btn{width:100%;margin-top:4px}
.gate .foot{color:var(--muted);font-size:.85rem;margin-top:14px}

/* ── the identity bar ───────────────────────────────────────────────────────
   Whose restaurant this is. The logo and the name are theirs; everything
   around them stays Kwipps. See console.js `identityHtml` for why. */
.who1{display:flex;align-items:center;gap:.6rem;min-width:0}
.who1 .mark{width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  object-fit:contain;background:#fff;border:1px solid var(--line-soft);display:block}
.who1 .initials{display:grid;place-items:center;font-family:var(--serif);font-size:1rem;font-weight:500;
  letter-spacing:.01em;color:var(--primary);background:var(--sunk-3)}
.who1 .who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.who1 .who strong{font-family:var(--serif);font-weight:500;font-size:1.02rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who1 .where{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The name is a button: it opens the list of businesses and the way out. */
.who1{position:relative}
.whoBtn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.6rem;min-width:0;width:100%;
  cursor:pointer;border-radius:10px;padding:.2rem .3rem;margin:-.2rem -.3rem}
.whoBtn:hover{background:var(--sunk-3)}
.whoBtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.whoBtn .chev{width:16px;height:16px;flex:0 0 16px;margin-left:auto;fill:none;stroke:var(--muted);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.whoBtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.whoMenu{position:absolute;z-index:45;top:calc(100% + 6px);left:0;min-width:16rem;max-width:calc(100vw - 24px);
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.whoMenu[hidden]{display:none}
.whoMenu .hd{margin:.5rem .6rem .3rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.whoMenu .site,.whoMenu .item{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.5rem;width:100%;
  box-sizing:border-box;padding:.55rem .6rem;border-radius:8px;color:var(--ink);text-decoration:none;
  font:inherit;font-size:.92rem;background:none;border:0;text-align:left;cursor:pointer}
.whoMenu .site:hover,.whoMenu .item:hover,.whoMenu .site:focus-visible,.whoMenu .item:focus-visible{background:var(--sunk-3);outline:none}
.whoMenu .site .nm{font-family:var(--serif);font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoMenu .site .sub{grid-column:1;font-size:.75rem;color:var(--muted)}
.whoMenu .site .tick{grid-column:2;grid-row:1 / -1;color:var(--primary);font-weight:700}
.whoMenu .site[aria-current="true"]{background:var(--sunk-3)}
.whoMenu .sep{height:1px;background:var(--line);margin:6px 2px}
.whoMenu .acct{margin:.35rem .6rem .25rem;font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoMenu .acct b{color:var(--ink);font-weight:600}
/* The way out at the foot of the rail; on a narrow screen the name's menu has it. */
.railFoot{display:none}
.railFoot button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.55rem;width:100%;cursor:pointer;
  padding:.5em .7em;border-radius:6px;color:var(--muted);font-size:.95rem}
.railFoot button:hover{background:var(--sunk-3);color:var(--ink)}
.railFoot button:focus-visible{outline:2px solid var(--primary)}
.railFoot .ic{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1000px){
  .railFoot{display:block;flex-shrink:0;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line)}
  /* A short window scrolls the whole rail rather than squeezing the places. */
  .top nav.tabs,.top .who1,.top .brand{flex-shrink:0}
  .whoMenu{left:0;right:0;min-width:0}
}

/* ── the icon navigation ────────────────────────────────────────────────────
   ⚠️ THE LABEL IS NEVER HIDDEN, AT ANY WIDTH. There is deliberately no
   media query below that drops `nav.tabs a span`, and `shell.test.ts` fails
   if one appears. An icon-only rail is a second language the reader did not
   agree to learn, and on the screen after signing up the first-timers are
   everybody. Narrow screens scroll the bar instead. */
nav.tabs{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
nav.tabs a{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
nav.tabs a .ic{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
nav.tabs a[aria-current="page"] .ic{opacity:1}
/* The two shapes that read better filled than stroked. */
nav.tabs a .ic circle[cx="7"],nav.tabs a .ic circle[cx="14"]{fill:currentColor;stroke:none}

/* The bar, on a narrow screen: brand, then whose restaurant, then the places.
   The navigation wraps to its own line and SCROLLS — it never drops its
   labels, which is the one thing this layout is not allowed to do.
   ⚠️ From 760px down, on every page console.js has drawn a tab bar on, the
   places move to that bar at the foot of the screen instead (see "the
   phone's tab bar" below); this row stays for a page without one. */
.top .in{flex-wrap:wrap}
.who1{margin-right:auto}
@media (max-width:760px){
  nav.tabs{flex:1 1 100%;order:3;padding-bottom:2px}
  .who1{margin-right:0}
}

/* ── the rail proper ────────────────────────────────────────────────────────
   From 1000px up the bar becomes the design system's left rail: the Kwipps
   mark, then the restaurant's identity, then the places as rows with the
   active one tinted and edged in terracotta. The canvas keeps the parchment
   and the content sits on it as white cards. */
@media (min-width:1000px){
  .top{position:fixed;left:0;top:0;bottom:0;width:var(--rail);overflow-y:auto;
    border-right:1px solid var(--line);border-bottom:none}
  .top .in{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:1rem;
    height:100%;max-width:none;padding:20px 14px}
  .brand{font-size:1rem;padding:0 .45rem}
  .who1{margin:0;padding:.85rem .45rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  nav.tabs{margin-left:0;flex-direction:column;gap:2px;overflow-x:visible;overflow-y:auto}
  nav.tabs a{display:flex;border-left:2px solid transparent;border-radius:0 6px 6px 0;padding:.5em .7em}
  nav.tabs a[aria-current="page"]{background:var(--sunk-3);border-left-color:var(--primary);color:var(--primary)}
  main{margin-left:var(--rail);max-width:1080px;padding:34px 34px 90px}
}

/* ── sheets ─────────────────────────────────────────────────────────────────
   The reset above zeroes every margin, and a <dialog> centres itself with
   margin:auto — so without this line every sheet opens in the top-left
   corner. Seen on the wine editor's lookup, 2026-09-12. */
dialog{margin:auto}

/* ── unsaved changes ────────────────────────────────────────────────────────
   Drawn by `makeGuard` in console.js. Bottom-docked so it never covers the
   thing being edited, and named ("Unsaved changes to the menu.") so the owner
   knows which change it means. */
.unsaved{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;display:flex;align-items:center;gap:12px;
  width:min(720px,calc(100vw - 32px));background:var(--ink);color:#fff;border-radius:12px;padding:10px 12px 10px 18px;
  box-shadow:0 8px 24px rgba(31,27,23,.22)}
.unsaved .txt{font-size:.92rem;font-weight:600}
.unsaved .grow{flex:1}
.unsaved .btn.quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.unsaved[hidden]{display:none}
@media (min-width:1000px){.unsaved{left:calc(var(--rail) + (100vw - var(--rail)) / 2)}}
dialog.leave{border:1px solid var(--line);border-radius:14px;padding:24px 26px;max-width:30rem;width:calc(100vw - 32px);
  box-shadow:0 18px 48px rgba(31,27,23,.25);color:var(--ink);background:var(--card)}
dialog.leave::backdrop{background:rgba(31,27,23,.35)}
dialog.leave h2{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0 0 .4em}
dialog.leave .txt{color:var(--muted);margin:0 0 18px}
dialog.leave .err{color:var(--bad);font-size:.9rem;margin:-8px 0 14px}
dialog.leave .acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── the phone's tab bar ────────────────────────────────────────────────────
   Drawn by `paintTabbar` in console.js on every page with a bar. Hidden from
   761px up, where the bar at the top (and from 1000px the rail) is unchanged.
   Below it, the trade's four most-used places sit at the foot of the screen
   with "More" beside them, and the scrolling row at the top goes: two ways
   to the same places is one too many on a phone.

   ⚠️ EVERY TAB CARRIES ITS WORD UNDER ITS ICON, as `nav.tabs` does. Targets
   are at least 44px on both axes, and the bar pads itself by the phone's
   safe-area insets (console.js asks for `viewport-fit=cover`, which is what
   makes a notch or a home bar report them). */
.tabbar{display:none}
.tabbar .ic,dialog.kwSheet .ic{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tabbar .ic circle[cx="7"],.tabbar .ic circle[cx="14"],dialog.kwSheet .ic circle[cx="7"],dialog.kwSheet .ic circle[cx="14"]{fill:currentColor;stroke:none}
@media (max-width:760px){
  body.kwTabbed .top nav.tabs{display:none}
  /* The row the places left is the business's name's to use. */
  body.kwTabbed .top .who1{flex:1 1 auto}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(31,27,23,.06);
    padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .tabbar a,.tabbar button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:54px;min-width:44px;padding:6px 2px 5px;border-radius:10px;color:var(--muted);cursor:pointer;
    font:600 .7rem/1.15 'Manrope',system-ui,sans-serif;text-align:center;-webkit-tap-highlight-color:transparent}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a:hover,.tabbar button:hover{color:var(--ink)}
  .tabbar [aria-current="page"],.tabbar [data-current="true"]{color:var(--primary);background:var(--sunk-3)}
  .tabbar [aria-current="page"]::before,.tabbar [data-current="true"]::before{content:"";position:absolute;top:0;width:22px;height:2px;
    border-radius:0 0 2px 2px;background:var(--primary)}
  .tabbar a,.tabbar button{position:relative}
  .tabbar a:focus-visible,.tabbar button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
  body.kwTabbed main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body.kwTabbed .unsaved{bottom:calc(74px + env(safe-area-inset-bottom))}
}
/* Landscape phones are wider than the tab bar's breakpoint; with the page
   reaching the edges, the bar and the content keep clear of a notch. */
@media (max-width:999px){
  .top .in{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}

/* The sheet "More" opens: the rest of the places, Settings, the account, help
   and the way out. A modal <dialog>, so it holds the focus and Escape closes it. */
dialog.kwSheet{margin:auto auto 0;width:100%;max-width:560px;max-height:86vh;overflow:auto;border:1px solid var(--line);
  border-bottom:0;border-radius:18px 18px 0 0;background:var(--card);color:var(--ink);
  padding:8px max(12px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  box-shadow:0 -12px 40px rgba(31,27,23,.2)}
dialog.kwSheet::backdrop{background:rgba(31,27,23,.35)}
dialog.kwSheet .kwSheetHead{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 4px 10px}
dialog.kwSheet h2{font-family:var(--serif);font-weight:500;font-size:1.25rem}
dialog.kwSheet .kwX{all:unset;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;
  font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer}
dialog.kwSheet .kwX:hover{background:var(--sunk-3);color:var(--ink)}
dialog.kwSheet .kwRow{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.8rem;width:100%;min-height:48px;
  padding:.55rem .7rem;border-radius:10px;color:var(--ink);font:500 .98rem/1.3 'Manrope',system-ui,sans-serif;cursor:pointer}
dialog.kwSheet .kwRow:hover,dialog.kwSheet .kwRow:focus-visible{background:var(--sunk-3)}
dialog.kwSheet .kwRow:focus-visible,dialog.kwSheet .kwX:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
dialog.kwSheet .kwRow[aria-current="page"],dialog.kwSheet .kwRow[aria-current="true"]{background:var(--sunk-3);color:var(--primary);font-weight:600}
dialog.kwSheet .kwRow .kwTick{margin-left:auto;color:var(--primary);font-weight:700}
dialog.kwSheet .kwRow.kwSite span:first-child{font-family:var(--serif);font-size:1.02rem}
dialog.kwSheet .kwHd{margin:.7rem .7rem .2rem;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
dialog.kwSheet .kwSep{height:1px;background:var(--line);margin:8px 4px}
dialog.kwSheet .kwAcct{margin:.3rem .7rem .2rem;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.kwSheet .kwAcct b{color:var(--ink);font-weight:600}

/* ── the empty state ────────────────────────────────────────────────────────
   Drawn by `KW.empty` (console.js): where the rows will come from, in one
   sentence, and one thing to do about it. */
.kwEmpty{border:1px dashed var(--line-soft);border-radius:12px;background:var(--card);padding:28px 24px;text-align:center;color:var(--muted)}
.kwEmpty p{max-width:52ch;margin:0 auto;font-size:.92rem}
.kwEmpty .t{color:var(--ink);font-family:var(--serif);font-size:1.15rem;margin-bottom:.35rem}
.kwEmpty .act{margin-top:14px}

/* ── "Need a hand?" ─────────────────────────────────────────────────────────
   Drawn by `KW.help` on the home page and in Settings: a person first, then
   the help centre. */
.kwHelp{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px 20px}
.kwHelp h2{font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--ink);margin:0 0 6px}
.kwHelp ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kwHelp li{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;padding:6px 0}
.kwHelp a{font-weight:600;text-decoration:none}
.kwHelp a:hover{text-decoration:underline}
.kwHelp span{color:var(--muted);font-size:.85rem}

/* ── the public demo's band (console.kwipps.com/demo/hotel, 2026-10-03) ───
   At the top of the page, above the bar on a phone and beside the rail on a
   desktop. Not a warning: the visitor did nothing wrong by being here. */
.kw-demo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 20px;
  background:var(--wait-bg);color:var(--ink);font-size:.875rem;line-height:1.45;border-bottom:1px solid var(--line-soft)}
.kw-demo a{font-weight:600;white-space:nowrap}
@media (min-width:1000px){ .kw-demo{margin-left:var(--rail);padding:10px 34px} }