/* ═══════════════════════════════════════════════════════════
   1718pos — back office, third look (UI v3, calmer pass).

   Loaded after views.css by index.html only. Everything is scoped to
   body.bo, so the guest page is untouched — and the café sign-in screen
   (.login) is handed its original palette back below, so it looks exactly
   as it did before this file existed.

   The idea, kept quiet on purpose:
   - a deep green-black room with one soft teal glow and the café photo
     blurred to a faint wash behind everything (.bo-art);
   - a green rail: a rounded glass strip of icons when closed, a flat
     full-height column with labels when open — no overlap, no curved tab;
   - the work on one rounded panel beside it;
   - one bright lead card in the first row of figures, everything else calm.

   Restore point before this file existed: `snapshot.php restore before-ui-v3`.
   ═══════════════════════════════════════════════════════════ */

/* ── the back office's palette ───────────────────────────────────── */
:root[data-theme="dark"] body.bo,
:root:not([data-theme]) body.bo{
  /* Rich, neutral blacks. Green lives in the room behind and the rail — the
     boxes themselves carry no tint, only a fine edge. */
  --bg:#08090A;
  --panel:#0C0E0F;
  --surface:#131516;
  --surface-2:#191C1D;
  --surface-3:#222627;
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.11);
  --fg:#EEF0EF;
  --fg-2:#A3A9A7;
  --fg-3:#737A78;
  --accent:#6AB3A4;               /* a muted sage-teal, not a neon mint */
  --accent-soft:rgba(106,179,164,.10);
  --accent-line:rgba(106,179,164,.30);
  --accent-fill:#1A6F62;
  --accent-grad:linear-gradient(135deg,#1A6F62 0%,#145A50 100%);
  --glass-line:rgba(255,255,255,.07);
  --card-bg:#121415;
  --hero-card:#EDEFEE;
  --hero-ink:#101314;
  --rail-bg:linear-gradient(180deg,#0F4943 0%,#0C3B36 50%,#0A2E2A 100%);
  --shadow:0 14px 36px rgba(0,0,0,.4);
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
  --art-opacity:.07;
}:root[data-theme="light"] body.bo{
  --bg:#ECF0EE;
  --panel:#F8F9F7;
  --surface:#FFFFFF;
  --surface-2:#F2F4F2;
  --surface-3:#E6EAE8;
  --line:rgba(12,30,27,.09);
  --line-2:rgba(12,30,27,.16);
  --accent:#0F5F55;
  --accent-soft:rgba(15,95,85,.08);
  --accent-line:rgba(15,95,85,.28);
  --accent-fill:#11695E;
  --accent-grad:linear-gradient(135deg,#167E6C 0%,#11695E 55%,#0C4D45 100%);
  --glass-line:rgba(12,20,18,.08);
  --card-bg:#FFFFFF;
  --hero-card:#11574E;
  --hero-ink:#F3F7F6;
  --rail-bg:linear-gradient(180deg,#0F4943 0%,#0C3B36 50%,#0A2E2A 100%);
  --shadow:0 16px 40px rgba(14,40,36,.10);
  --shadow-sm:0 3px 12px rgba(14,40,36,.06);
  --art-opacity:.06;
}

/* The café sign-in keeps the look it had before UI v3: its original tokens. */
:root[data-theme="dark"] body.bo .login,
:root:not([data-theme]) body.bo .login{
  --bg:#141416;--surface:#232327;--surface-2:#2B2B30;--surface-3:#35353B;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);
  --fg:#F4F4F3;--fg-2:#ADADA9;--fg-3:#7E7E82;
  --accent:#5DBFB2;--accent-soft:rgba(93,191,178,.15);--accent-line:rgba(93,191,178,.45);--accent-fill:#1F7A72;
  --accent-grad:linear-gradient(140deg,#1F6964 0%,#11504B 52%,#093532 100%);
}
:root[data-theme="light"] body.bo .login{
  --bg:#F7F7F5;--surface:#FFFFFF;--surface-2:#F2F2EF;--surface-3:#E7E7E3;
  --line:rgba(16,16,14,.10);--line-2:rgba(16,16,14,.20);
  --fg:#16160F;--fg-2:#55554E;--fg-3:#7C7C74;
  --accent:#11504B;--accent-soft:rgba(17,80,75,.10);--accent-line:rgba(17,80,75,.34);--accent-fill:#11504B;
  --accent-grad:linear-gradient(140deg,#1F6964 0%,#11504B 52%,#093532 100%);
}

/* ── the room: one soft glow, the photo as a faint wash ──────────── */
body.bo{background:var(--bg);}
body.bo::after{
  background-image:
    radial-gradient(1000px 620px at 88% -14%, rgba(26,111,98,.10), transparent 64%),
    radial-gradient(760px 520px at -10% 112%, rgba(26,111,98,.06), transparent 64%),
    linear-gradient(180deg, #16191C 0%, #0E1012 40%, #08090A 78%, #050506 100%);
}
:root[data-theme="light"] body.bo::after{
  background-image:
    radial-gradient(900px 560px at 85% -12%, rgba(23,131,113,.08), transparent 62%),
    linear-gradient(180deg, #E8EDEB 0%, #EFF2F0 100%);
}
body.bo::before{opacity:.025;}
:root[data-theme="light"] body.bo::before{opacity:0;}

.bo-art{
  position:fixed;inset:-8%;z-index:-1;pointer-events:none;
  background:url("../img/cafe.jpg") center/cover no-repeat;
  filter:blur(56px) saturate(.9);
  opacity:var(--art-opacity);transform:translateZ(0);
}
.bo-art::after{content:'';position:absolute;inset:0;background:rgba(14,90,79,.55);mix-blend-mode:color;}

/* ── shell ───────────────────────────────────────────────────────── */
body.bo .shell{background:transparent;padding:12px;gap:12px;}

/* the rail, closed: a rounded strip of round icons */
body.bo .rail{
  width:76px;flex:none;
  padding:14px 0 12px;
  border:1px solid rgba(255,255,255,.08);border-radius:24px;
  background:var(--rail-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#E4F1EE;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
}
body.bo .rail-top{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 0 10px;margin-bottom:4px;}
body.bo .rail-logo{border:none;padding:0;margin:0;width:auto;}
body.bo .rail-logo img{width:42px;height:42px;border-radius:12px;object-fit:contain;padding:5px;box-sizing:border-box;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);}
body.bo .rail-mono{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.95rem;box-shadow:none;}
body.bo .rail-cafe{display:none;}
body.bo .rail-toggle{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:background .2s;
}
body.bo .rail-toggle:hover{background:rgba(255,255,255,.16);color:#fff;}
body.bo .rail-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(180deg);transition:transform .3s var(--ease);}
body.bo .rail-group{display:none;}
body.bo .rail-sep{display:block;width:24px;height:1px;margin:6px 0;background:rgba(255,255,255,.12);flex:none;}

body.bo .rail-btn{
  width:46px;height:46px;padding:0;border-radius:50%;flex:none;
  flex-direction:row;justify-content:center;gap:12px;
  background:transparent;border:1px solid transparent;color:rgba(228,241,238,.78);
  transition:background .18s var(--ease),color .18s var(--ease);
}
body.bo .rail-btn svg{width:20px;height:20px;stroke-width:1.7;flex:none;}
body.bo .rail-btn:hover svg{transform:none;}
body.bo .rail-btn span{display:none;}
body.bo .rail-btn::before{display:none;}
body.bo .rail-btn:hover{background:rgba(255,255,255,.09);color:#fff;}
body.bo .rail-btn.on{background:#fff;color:#0E3F39;box-shadow:0 6px 16px rgba(0,0,0,.18);}
body.bo .rail-btn.on svg{color:#0E3F39;}
body.bo .rail-badge{top:-2px;right:-2px;border:2px solid #0D4640;}
body.bo .rail-spacer{flex:1;min-height:10px;}
body.bo .rail-pos{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 0 4px;opacity:.6;}
body.bo .rail-pos svg{width:24px;height:24px;}
body.bo .rail-pos b{display:none;font-family:var(--display);font-size:.9rem;font-weight:600;color:#fff;}
body.bo .rail-pos b i{font-style:normal;font-family:var(--mono);font-size:.78em;color:#D8B988;}

/* the rail, open: the same floating green strip as when closed, only wider —
   icons with their names, group headings, and the active screen a white
   pill (the closed rail's white disc, stretched). */
body.bo .shell.rail-open .rail{
  width:232px;padding:16px 12px 12px;align-items:stretch;gap:3px;
}
body.bo .shell.rail-open .rail-top{flex-direction:row;gap:11px;padding:2px 4px 14px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.08);}
body.bo .shell.rail-open .rail-cafe{display:block;flex:1;min-width:0;}
body.bo .rail-cafe b{display:block;font-family:var(--display);font-size:.98rem;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
body.bo .rail-cafe span{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(228,241,238,.55);}
body.bo .shell.rail-open .rail-toggle svg{transform:none;}
body.bo .shell.rail-open .rail-group{
  display:block;margin:12px 0 3px 14px;font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(228,241,238,.42);
}
body.bo .shell.rail-open .rail-sep{display:none;}
body.bo .shell.rail-open .rail-btn{
  position:relative;width:100%;height:42px;border-radius:14px;justify-content:flex-start;padding:0 8px;gap:11px;
}
body.bo .shell.rail-open .rail-btn svg{width:30px;height:30px;padding:6px;border-radius:9px;
  background:rgba(255,255,255,.07);box-sizing:border-box;}
body.bo .shell.rail-open .rail-btn span{
  display:block;font-family:var(--sans);font-size:.88rem;font-weight:500;letter-spacing:0;text-transform:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.bo .shell.rail-open .rail-btn:hover{background:rgba(255,255,255,.08);}
body.bo .shell.rail-open .rail-btn.on{background:#fff;color:#0E3F39;box-shadow:0 8px 20px rgba(0,0,0,.2);}
body.bo .shell.rail-open .rail-btn.on svg{background:#E3F2EE;color:#0E5A50;}
body.bo .shell.rail-open .rail-btn.on span{font-weight:700;}
body.bo .shell.rail-open .rail-badge{top:50%;right:10px;transform:translateY(-50%);border:none;}
body.bo .shell.rail-open .rail-pos{justify-content:flex-start;padding:12px 8px 2px;border-top:1px solid rgba(255,255,255,.08);margin-top:6px;}
body.bo .shell.rail-open .rail-pos b{display:block;}
/* ── the panel ───────────────────────────────────────────────────── */
body.bo .main{
  background:var(--panel);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;
}
body.bo .topbar{
  height:68px;padding:0 24px;gap:14px;background:transparent;border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.bo .topbar h2{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;}
body.bo .topbar .crumb{background:var(--surface-2);border-color:var(--line);color:var(--fg-3);}
body.bo .topbar-right{gap:10px;}
body.bo .clock{font-family:var(--mono);font-size:.7rem;padding:8px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);}

body.bo .kbar-btn{
  min-width:250px;justify-content:flex-start;padding:9px 12px 9px 14px;gap:10px;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3);
}
body.bo .kbar-btn::after{content:'Search anywhere…';flex:1;text-align:left;}
body.bo .kbar-btn kbd{order:2;}
body.bo .kbar-btn:hover{border-color:var(--line-2);color:var(--fg-2);}
body.bo .who-dot{background:var(--accent-fill);width:34px;height:34px;font-size:.76rem;}
body.bo .who-btn{border-color:var(--line);background:var(--surface-2);padding:3px 12px 3px 3px;}
body.bo .who-menu{border-radius:16px;}

body.bo .plan-banner,body.bo .setup-bar{margin:12px 24px 0;border:1px solid var(--line);border-radius:14px;}
body.bo .setup-bar{background:var(--surface-2);}

/* ── page furniture ──────────────────────────────────────────────── */
body.bo .page-head h3{font-size:clamp(1.5rem,2vw,1.9rem);letter-spacing:-.03em;font-weight:600;}
body.bo .panel{border-radius:18px;border:1px solid var(--glass-line);background:var(--card-bg);box-shadow:none;}

body.bo .stat{border-radius:18px;border:1px solid var(--glass-line);padding:18px 20px;background:var(--card-bg);box-shadow:none;
  transition:border-color .25s var(--ease),transform .25s var(--ease);}
body.bo .stat:hover{border-color:var(--line-2);transform:translateY(-1px);}
body.bo .stat b{font-family:var(--display);letter-spacing:-.03em;}
/* one lead card: the first figure of the first row on a screen */
body.bo .cards .stat:first-child{background:var(--hero-card);border-color:transparent;color:var(--hero-ink);}
body.bo .cards .stat:first-child b{color:var(--hero-ink);}
body.bo .cards .stat:first-child .mono,body.bo .cards .stat:first-child i{color:color-mix(in srgb,var(--hero-ink) 60%,transparent);}
body.bo .cards ~ .cards .stat:first-child{background:var(--card-bg);border-color:var(--glass-line);color:var(--fg);}
body.bo .cards ~ .cards .stat:first-child b{color:var(--fg);}
body.bo .cards ~ .cards .stat:first-child .mono,body.bo .cards ~ .cards .stat:first-child i{color:var(--fg-3);}

body.bo .btn-accent{background:var(--accent-fill);border-color:transparent;color:#fff;box-shadow:none;}
body.bo .btn-accent:hover{filter:brightness(1.08);}
body.bo .btn-ghost{background:var(--surface-2);border-color:var(--line);}
body.bo .btn-ghost:hover{border-color:var(--line-2);}

body.bo .modal{border-radius:22px;}
body.bo .modal-back{background:color-mix(in srgb,#020504 58%,transparent);}
body.bo .field input,body.bo .field select,body.bo .field textarea{border-radius:12px;}

body.bo .ob-bar,body.bo .lanes{background:transparent;}
body.bo .lane{border-radius:18px;background:var(--card-bg);border-color:var(--glass-line);}
body.bo .ocard{border-radius:14px;}
body.bo .tile{border-radius:14px;}

body.bo .boot{background:#080C0B;}
:root[data-theme="light"] body.bo .boot{background:#ECF0EE;}

/* ── phone: the rail becomes a dock at the bottom ────────────────── */
@media (max-width:760px){
  body.bo .shell,body.bo .shell.rail-open{padding:0;gap:0;}
  body.bo .shell.rail-open .rail-btn svg{width:19px;height:19px;padding:0;background:none;}
  body.bo .main{border-radius:0;border:none;box-shadow:none;}
  body.bo .rail,body.bo .shell.rail-open .rail{
    width:auto;margin:0 10px calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:20px;border:1px solid rgba(255,255,255,.08);
    flex-direction:row;align-items:center;gap:4px;
  }
  body.bo .rail-top,body.bo .rail-group,body.bo .rail-sep,body.bo .rail-pos,body.bo .rail-toggle,
  body.bo .shell.rail-open .rail-top,body.bo .shell.rail-open .rail-group,body.bo .shell.rail-open .rail-pos{display:none !important;}
  body.bo .rail-btn,body.bo .shell.rail-open .rail-btn{
    width:auto;height:auto;min-width:64px;flex:1 0 64px;padding:8px 4px 6px;border-radius:14px;
    flex-direction:column;gap:4px;
  }
  body.bo .rail-btn span,body.bo .shell.rail-open .rail-btn span{display:block;font-family:var(--mono);font-size:.48rem;
    letter-spacing:.05em;text-transform:uppercase;font-weight:500;}
  body.bo .rail-btn.on,body.bo .shell.rail-open .rail-btn.on{background:#fff;color:#0E3F39;}
  body.bo .shell.rail-open .rail-btn.on::before{display:none;}
  body.bo .rail-badge,body.bo .shell.rail-open .rail-badge{top:2px;right:calc(50% - 20px);transform:none;}
  body.bo .topbar{height:auto;padding:10px 14px;}
  body.bo .topbar h2{font-size:1.15rem;}
  body.bo .kbar-btn{display:none;}
  body.bo .plan-banner,body.bo .setup-bar{margin:10px 12px 0;}
}

/* ── quieter accents ─────────────────────────────────────────────── */
body.bo .lane-n.hot{animation:none;box-shadow:0 0 0 3px var(--accent-soft);}
body.bo .live-dot{animation-duration:3s;}
body.bo .ocard.late::before{animation-duration:2.6s;opacity:.7;}
body.bo .rail-btn.on{box-shadow:0 4px 12px rgba(0,0,0,.16);}
body.bo .shell.rail-open .rail-btn.on{box-shadow:0 4px 12px rgba(0,0,0,.16);}

/* ── motion: a screen settles in, piece by piece, then stays still ── */
@keyframes bo-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
body.bo .view .page > *{animation:bo-rise .5s var(--ease) both;}
body.bo .view .page > *:nth-child(2){animation-delay:.04s;}
body.bo .view .page > *:nth-child(3){animation-delay:.08s;}
body.bo .view .page > *:nth-child(4){animation-delay:.12s;}
body.bo .view .page > *:nth-child(n+5){animation-delay:.16s;}
body.bo .rail-btn{transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease);}
body.bo .btn{transition:background .2s var(--ease),border-color .2s var(--ease),filter .2s var(--ease),transform .12s var(--ease);}
body.bo .btn:active{transform:scale(.97);}
@media (prefers-reduced-motion:reduce){ body.bo .view .page > *{animation:none;} }

/* ═══════════════════════════════════════════════════════════
   UI v4 — bento. Restore point before it: `snapshot.php restore before-bento`.

   Expressive minimalism on glass:
   - the panel and every card are frosted glass over the room (the blurred
     café photo and one teal glow), edged by a single hairline;
   - figures are large and light (Clash Display 300) with the decimals
     dimmed, so the eye reads the whole number first;
   - a grid of mixed sizes — one lead tile, a wide chart, small facts —
     instead of rows of identical boxes (`.bento`, and `.cards` by count);
   - colour is spent sparingly, in pill bars: teal, sand, white and a
     hatched "rest" — the same four everywhere.
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] body.bo,
:root:not([data-theme]) body.bo{
  --hair:rgba(255,255,255,.075);
  --hair-2:rgba(255,255,255,.14);
  --glass-bg:rgba(13,15,16,.66);
  --tile-bg:linear-gradient(180deg,rgba(255,255,255,.034) 0%,rgba(255,255,255,.012) 100%);
  --tile-solid:rgba(20,22,23,.72);
  --hatch:repeating-linear-gradient(-45deg,rgba(255,255,255,.11) 0 1.5px,transparent 1.5px 7px);
  --sand:#D9BF93;
  --seg-solid:#2E9C88;
  --seg-ink:#04110F;
  --art-opacity:.13;
  --hero-card:#F1F2EF;
  --hero-ink:#0D1011;
}
:root[data-theme="light"] body.bo{
  --hair:rgba(12,30,27,.09);
  --hair-2:rgba(12,30,27,.16);
  --glass-bg:rgba(250,251,249,.70);
  --tile-bg:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 100%);
  --tile-solid:rgba(255,255,255,.8);
  --hatch:repeating-linear-gradient(-45deg,rgba(12,40,36,.13) 0 1.5px,transparent 1.5px 7px);
  --sand:#C9A66B;
  --seg-solid:#14705F;
  --seg-ink:#fff;
  --art-opacity:.10;
  --hero-card:#0F1513;
  --hero-ink:#F2F5F3;
}

/* the panel: frosted glass over the room */
body.bo .main{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(34px) saturate(1.2);backdrop-filter:blur(34px) saturate(1.2);
  border:1px solid var(--hair);border-radius:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="light"] body.bo .main{box-shadow:0 24px 60px rgba(14,40,36,.10), inset 0 1px 0 #fff;}
body.bo .topbar{height:72px;padding:0 28px;border-bottom:1px solid var(--hair);}
body.bo .topbar h2{font-weight:500;font-size:1.5rem;letter-spacing:-.03em;}
body.bo .topbar .btn-ghost,body.bo .clock,body.bo .kbar-btn,body.bo .who-btn{
  background:rgba(255,255,255,.035);border-color:var(--hair);}
:root[data-theme="light"] body.bo .topbar .btn-ghost,
:root[data-theme="light"] body.bo .clock,
:root[data-theme="light"] body.bo .kbar-btn,
:root[data-theme="light"] body.bo .who-btn{background:rgba(255,255,255,.7);}

/* page heading: big, light, quiet */
body.bo .page-head h3{font-size:clamp(1.9rem,2.6vw,2.5rem);font-weight:400;letter-spacing:-.045em;line-height:1.02;}
body.bo .page-head > div > .mono{display:block;margin-top:8px;letter-spacing:.14em;}

/* tiles: every box is a pane of glass with a hairline edge */
body.bo .panel,body.bo .stat,body.bo .lane,body.bo .lp-panel{
  background:var(--tile-bg),var(--tile-solid);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--hair);border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.bo .panel{padding:22px 24px;}
body.bo .panel > h4,body.bo .panel-head h4{font-weight:500;font-size:1.05rem;letter-spacing:-.02em;}

/* figures: large, light, decimals dimmed (see dimFigures() in app.js) */
body.bo .stat{padding:20px 22px;display:flex;flex-direction:column;min-height:132px;}
body.bo .stat > .mono,body.bo .b-head > .mono{font-size:.56rem;letter-spacing:.16em;color:var(--fg-3);display:flex;align-items:center;gap:7px;}
body.bo .stat > .mono::before,body.bo .b-head > .mono::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none;}
body.bo .stat > b{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,2.5vw,2.45rem);
  letter-spacing:-.045em;line-height:1;margin-top:auto;padding-top:18px;font-variant-numeric:tabular-nums;}
body.bo .stat > b small{font-size:.42em;letter-spacing:0;color:var(--fg-3);font-weight:400;}
body.bo .stat .dec{opacity:.36;}
body.bo .stat i{font-size:.76rem;margin-top:8px;color:var(--fg-3);}
body.bo .stat.accent b{color:var(--fg);}
body.bo .stat:hover{transform:none;border-color:var(--hair-2);}

/* the lead tile: the one bright pane on a screen */
body.bo .stat.hero,
body.bo .cards:not(.cards ~ .cards) > .stat:first-child{
  background:var(--hero-card);color:var(--hero-ink);border-color:transparent;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
body.bo .stat.hero b,
body.bo .cards:not(.cards ~ .cards) > .stat:first-child b{color:var(--hero-ink);}
body.bo .stat.hero .mono,body.bo .stat.hero i,
body.bo .cards:not(.cards ~ .cards) > .stat:first-child .mono,
body.bo .cards:not(.cards ~ .cards) > .stat:first-child i{color:color-mix(in srgb,var(--hero-ink) 55%,transparent);}
body.bo .stat.hero b.big{font-size:clamp(3rem,5.2vw,4.6rem);padding-top:26px;}

/* ── bento: a twelve-column grid of mixed tiles ──────────────────── */
body.bo .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;grid-auto-flow:dense;}
body.bo .bento > *{grid-column:span 3;min-width:0;}
body.bo .bento > .b-2{grid-column:span 2;}
body.bo .bento > .b-3{grid-column:span 3;}
body.bo .bento > .b-4{grid-column:span 4;}
body.bo .bento > .b-5{grid-column:span 5;}
body.bo .bento > .b-6{grid-column:span 6;}
body.bo .bento > .b-7{grid-column:span 7;}
body.bo .bento > .b-12{grid-column:1 / -1;}
body.bo .bento > .b-tall{grid-row:span 2;}
body.bo .bento .b-soft{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-style:dashed;box-shadow:none;}
body.bo .b-foot{margin-top:22px;padding-top:18px;border-top:1px dashed color-mix(in srgb,currentColor 22%,transparent);}
body.bo .b-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
body.bo .b-head i{margin:0;}
body.bo .b-chart{min-height:0;}
body.bo .bento-hours{height:auto;flex:1;min-height:120px;margin-top:14px;justify-content:flex-start;}
body.bo .bento-hours .hour{max-width:72px;}
body.bo .bento-empty{flex:1;min-height:110px;margin-top:14px;border-radius:16px;background:var(--hatch);
  display:grid;place-items:center;}
body.bo .bento-empty .mono::before{display:none;}
body.bo .hour-bar{border-radius:7px 7px 3px 3px;background:var(--hatch),rgba(255,255,255,.05);}
body.bo .hour.peak .hour-bar{background:var(--seg-solid);}

/* .cards elsewhere: the lead row becomes a small bento by how many it holds */
@media (min-width:1100px){
  body.bo .cards{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;}
  body.bo .cards > .stat{grid-column:span 3;}
  body.bo .cards:has(> .stat:nth-child(2):last-child) > .stat:first-child{grid-column:span 7;}
  body.bo .cards:has(> .stat:nth-child(2):last-child) > .stat:last-child{grid-column:span 5;}
  body.bo .cards:has(> .stat:nth-child(3):last-child) > .stat{grid-column:span 3;}
  body.bo .cards:has(> .stat:nth-child(3):last-child) > .stat:first-child{grid-column:span 6;}
  body.bo .cards:has(> .stat:nth-child(4):last-child) > .stat{grid-column:span 2;}
  body.bo .cards:has(> .stat:nth-child(4):last-child) > .stat:first-child{grid-column:span 6;}
  body.bo .cards:has(> .stat:nth-child(5):last-child) > .stat{grid-column:span 2;}
  body.bo .cards:has(> .stat:nth-child(5):last-child) > .stat:first-child{grid-column:span 4;}
  body.bo .cards:has(> .stat:nth-child(6):last-child) > .stat{grid-column:span 2;}
  body.bo .cards:has(> .stat:nth-child(7)) > .stat{grid-column:span 3;}
  body.bo .cards:has(> .stat:nth-child(4):last-child) > .stat:not(:first-child) b,
  body.bo .cards:has(> .stat:nth-child(5):last-child) > .stat:not(:first-child) b,
  body.bo .cards:has(> .stat:nth-child(6):last-child) > .stat b{font-size:clamp(1.6rem,2vw,2rem);}
  /* a row after the lead one: plain, evenly set */
  body.bo .cards ~ .cards > .stat,
  body.bo .cards ~ .cards:has(> .stat:nth-child(n)) > .stat{grid-column:span 3;}
  body.bo .cards ~ .cards:has(> .stat:nth-child(3):last-child) > .stat{grid-column:span 4;}
  body.bo .cards ~ .cards:has(> .stat:nth-child(2):last-child) > .stat{grid-column:span 6;}
  body.bo .cards:not(.cards ~ .cards) > .stat:first-child b{font-size:clamp(2.6rem,3.6vw,3.4rem);}
}

/* ── pill bars: proportions as rounded segments ──────────────────── */
body.bo .pillbar{display:flex;gap:6px;align-items:stretch;min-height:44px;}
body.bo .pill-seg{min-width:0;border-radius:999px;padding:7px 14px;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;white-space:nowrap;}
body.bo .pill-seg em{font-style:normal;font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;
  overflow:hidden;text-overflow:ellipsis;}
body.bo .pill-seg b{font-family:var(--mono);font-weight:500;font-size:.8rem;margin:2px 0 0;padding:0;letter-spacing:0;line-height:1.2;}
body.bo .pill-seg.solid{background:var(--seg-solid);color:var(--seg-ink);}
body.bo .pill-seg.sand{background:var(--sand);color:#1A1408;}
body.bo .pill-seg.white{background:#F1F2EF;color:#0D1011;}
body.bo .pill-seg.hatch{background:var(--hatch);border:1px solid var(--hair-2);color:var(--fg-2);}
body.bo .pill-seg.ghost{background:transparent;border:1px solid var(--hair-2);color:var(--fg-2);}
body.bo .stat.hero .pill-seg.hatch{
  background:repeating-linear-gradient(-45deg,rgba(0,0,0,.14) 0 1.5px,transparent 1.5px 7px);
  border-color:rgba(0,0,0,.14);color:color-mix(in srgb,var(--hero-ink) 70%,transparent);}
:root[data-theme="light"] body.bo .stat.hero .pill-seg.hatch{
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 1.5px,transparent 1.5px 7px);border-color:rgba(255,255,255,.2);}
body.bo .pillbar-lg{min-height:52px;margin:4px 0 18px;}

/* ── segmented controls: tabs and presets sit in one track ───────── */
body.bo .rtabs,body.bo .range-presets,body.bo .ob-filter{
  display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid var(--hair);
  width:max-content;max-width:100%;flex-wrap:wrap;
}
:root[data-theme="light"] body.bo .rtabs,:root[data-theme="light"] body.bo .range-presets,:root[data-theme="light"] body.bo .ob-filter{background:rgba(12,40,36,.04);}
body.bo .rtabs button,body.bo .range-presets button,body.bo .ob-filter button{border:0;background:transparent;border-radius:999px;padding:8px 16px;}
body.bo .rtabs button.on,body.bo .range-presets button.on,body.bo .ob-filter button.on{background:var(--fg);color:var(--bg);border:0;box-shadow:0 4px 14px rgba(0,0,0,.25);}
body.bo .rangebar{background:transparent;border:0;padding:0;margin-bottom:14px;}
body.bo .livestrip{border-radius:999px;background:var(--tile-bg),var(--tile-solid);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}

/* ── the order board ─────────────────────────────────────────────── */
body.bo .lane{border-radius:26px;}
body.bo .lane-head{border-bottom:1px dashed var(--hair-2);}
body.bo .lane-head b{font-weight:500;font-size:1.15rem;letter-spacing:-.02em;}
body.bo .lane-n{min-width:40px;height:40px;border-radius:50%;font-family:var(--display);font-weight:400;font-size:1.05rem;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);}
body.bo .lane-n.hot{background:var(--fg);color:var(--bg);box-shadow:none;}
body.bo .lane-empty{margin:4px;border-radius:18px;background:var(--hatch);opacity:.8;padding:44px 0;}
body.bo .ocard{border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--hair);}
:root[data-theme="light"] body.bo .ocard{background:#fff;}
body.bo .ocard.late{border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
body.bo .ocard.late::before{opacity:.35;}
body.bo .ocard-age.hot{background:color-mix(in srgb,var(--danger) 16%,transparent);padding:3px 8px;border-radius:999px;}
body.bo .ocard-dest{border-radius:14px;border-style:dashed;background:transparent;}
body.bo .ocard-top b{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:-.02em;}
body.bo .ocard-sum b{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.02em;}

/* tables: lighter, more air */
body.bo table.data th{font-weight:500;}
body.bo table.data td,body.bo table.data th{border-color:var(--hair);}
body.bo .bar{background:var(--hatch);border-radius:999px;height:8px;}
body.bo .bar i{background:var(--seg-solid);border-radius:999px;}

/* chips and pills */
body.bo .chip{border-radius:999px;}
body.bo .btn{border-radius:999px;}
body.bo .btn-accent{background:var(--fg);color:var(--bg);}
body.bo .btn-accent:hover{filter:none;opacity:.9;}

@media (max-width:1099px){
  body.bo .bento{grid-template-columns:repeat(6,minmax(0,1fr));}
  body.bo .bento > *,body.bo .bento > .b-2,body.bo .bento > .b-3{grid-column:span 3;}
  body.bo .bento > .b-4,body.bo .bento > .b-5,body.bo .bento > .b-6,body.bo .bento > .b-7{grid-column:1 / -1;}
  body.bo .bento > .b-tall{grid-row:auto;}
}
@media (max-width:620px){
  body.bo .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  body.bo .bento > *,body.bo .bento > .b-2,body.bo .bento > .b-3{grid-column:span 1;}
  body.bo .stat{min-height:112px;padding:16px;}
  body.bo .stat.hero b.big{font-size:2.8rem;}
  body.bo .main{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel);}
}

/* ── the till, in the same language ──────────────────────────────── */
body.bo .types{display:flex;gap:3px;padding:4px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid var(--hair);}
:root[data-theme="light"] body.bo .types{background:rgba(12,40,36,.04);}
body.bo .type-btn{flex:1;border:0;background:transparent;border-radius:999px;font-family:var(--sans);text-transform:none;
  letter-spacing:0;font-size:.82rem;font-weight:500;padding:9px 6px;color:var(--fg-2);}
body.bo .type-btn.on{background:var(--fg);color:var(--bg);border:0;}
body.bo .tile{border-radius:20px;border:1px solid var(--hair);background:var(--tile-bg),var(--tile-solid);}
body.bo .tile-shot{height:92px;}
body.bo .tile-add{border-radius:50%;}
body.bo .cat{border-radius:14px;}
body.bo .cat.on{background:var(--fg);color:var(--bg);}
body.bo .cat.on i{color:color-mix(in srgb,var(--bg) 60%,transparent);}
body.bo .sum.total span:last-child{font-family:var(--display);font-weight:300;font-size:1.9rem;letter-spacing:-.04em;}
body.bo .ticket-close .btn-accent{min-height:52px;font-size:.78rem;}
@media (max-width:760px){
  body.bo .rtabs,body.bo .range-presets,body.bo .ob-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:auto;}
  body.bo .rtabs button,body.bo .range-presets button,body.bo .ob-filter button{flex:none;}
  body.bo .livestrip{border-radius:22px;}
}

/* ═══════════════════════════════════════════════════════════
   UI v4.1 — smaller tiles, softer colour, Windows-style motion.
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] body.bo,
:root:not([data-theme]) body.bo{
  /* the lead tile stays the one bright white card (only smaller) */

  --seg-solid:#3B8576;
  --seg-ink:#EAF3F1;
  --sand:#B9A37E;
  --rail-bg:linear-gradient(180deg,#0E3F3A 0%,#0B302C 55%,#082421 100%);
}
:root[data-theme="light"] body.bo{
  --seg-solid:#2F7468;
  --seg-ink:#fff;
  --sand:#C2A877;
}
body.bo .stat.hero,
body.bo .cards:not(.cards ~ .cards) > .stat:first-child{box-shadow:0 10px 30px rgba(0,0,0,.22);}

body.bo .pill-seg.white{background:#DADDD9;}
body.bo .stat > .mono::before,body.bo .b-head > .mono::before{background:var(--accent);opacity:.7;}

/* sizes: tighter tiles, smaller figures */
body.bo .stat{min-height:100px;padding:15px 18px;}
body.bo .stat > b{font-size:clamp(1.45rem,1.8vw,1.8rem);padding-top:12px;}
body.bo .stat i{font-size:.74rem;margin-top:6px;}
body.bo .stat.hero b.big{font-size:clamp(2.3rem,3.2vw,2.9rem);padding-top:16px;}
body.bo .cards:not(.cards ~ .cards) > .stat:first-child b{font-size:clamp(1.9rem,2.4vw,2.3rem);}
@media (min-width:1100px){
  body.bo .cards:has(> .stat:nth-child(4):last-child) > .stat:not(:first-child) b,
  body.bo .cards:has(> .stat:nth-child(5):last-child) > .stat:not(:first-child) b,
  body.bo .cards:has(> .stat:nth-child(6):last-child) > .stat b{font-size:clamp(1.35rem,1.6vw,1.65rem);}
}
body.bo .b-foot{margin-top:14px;padding-top:12px;}
body.bo .pillbar{min-height:36px;}
body.bo .pill-seg{padding:5px 12px;}
body.bo .pillbar-lg{min-height:42px;}
body.bo .bento{gap:12px;}
body.bo .bento-hours{min-height:84px;margin-top:10px;}
body.bo .bento-empty{min-height:76px;margin-top:10px;}
body.bo .panel{padding:18px 20px;}
body.bo .page-head h3{font-size:clamp(1.6rem,2.1vw,2rem);}
body.bo .lane-n{min-width:34px;height:34px;font-size:.95rem;}
body.bo .ocard-top b{font-size:1.1rem;}
body.bo .ocard-sum b{font-size:1.15rem;}
body.bo .sum.total span:last-child{font-size:1.6rem;}

/* the rail's active pill glides between items (moveRailIndicator() in app.js) */
body.bo .rail{position:relative;}
body.bo .rail-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  transition:transform .42s cubic-bezier(.1,.9,.2,1),width .3s cubic-bezier(.1,.9,.2,1),height .3s cubic-bezier(.1,.9,.2,1);}
body.bo .rail-ind.still{transition:none;}
body.bo .rail-btn{position:relative;z-index:1;}
body.bo .rail-btn.on,body.bo .shell.rail-open .rail-btn.on{background:transparent;box-shadow:none;}
body.bo .rail-btn.on:hover{background:transparent;}
@media (max-width:760px){ body.bo .rail-ind{display:none;}
  body.bo .rail-btn.on,body.bo .shell.rail-open .rail-btn.on{background:#fff;} }

/* the new screen's pieces settle in a beat apart, Fluent's decelerate curve */
@keyframes bo-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
body.bo .view .page > *{animation:bo-rise .45s cubic-bezier(.1,.9,.2,1) both;}
body.bo .view .page > *:nth-child(2){animation-delay:.03s;}
body.bo .view .page > *:nth-child(3){animation-delay:.06s;}
body.bo .view .page > *:nth-child(4){animation-delay:.09s;}
body.bo .view .page > *:nth-child(n+5){animation-delay:.12s;}

/* ── the rail, closed: icons with their names underneath (v4.2) ──────
   A bare row of icons was hard to find your way around; each now carries a
   small label, and the white indicator is a rounded tile around both. */
@media (min-width:761px){
  body.bo .rail{width:88px;transition:width .38s cubic-bezier(.1,.9,.2,1),padding .38s cubic-bezier(.1,.9,.2,1);}
  body.bo .shell:not(.rail-open) .rail-btn{
    width:72px;height:auto;min-height:56px;padding:8px 2px 7px;border-radius:16px;
    flex-direction:column;gap:4px;
  }
  body.bo .shell:not(.rail-open) .rail-btn svg{width:19px;height:19px;}
  body.bo .shell:not(.rail-open) .rail-btn span{
    display:block;max-width:68px;font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:0;
    line-height:1.15;text-align:center;text-transform:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.bo .shell:not(.rail-open) .rail-badge{top:4px;right:10px;}
  body.bo .shell:not(.rail-open) .rail-btn{animation:rail-label-in .3s cubic-bezier(.1,.9,.2,1) both;}
  body.bo .shell.rail-open .rail-btn span{animation:rail-label-in .3s cubic-bezier(.1,.9,.2,1) both;}
}
@keyframes rail-label-in{from{opacity:0;}to{opacity:1;}}

/* ── v4.3: the 1718pos logo, the splash, and a rail that opens on hover ── */

/* the splash: always the brand's dark green, whatever the theme — the logo is white */
body.bo .boot,.boot{
  background:radial-gradient(700px 480px at 50% 42%,rgba(46,156,136,.16),transparent 70%),#07100E;
  gap:30px;
}
.boot-logo{position:relative;width:132px;animation:boot-logo-in .55s cubic-bezier(.1,.9,.2,1) both;}
.boot-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.4));}
/* a light passing over the letters, clipped to the logo's own shape */
.boot-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(186,255,226,.95) 50%,transparent 65%) 0 0/260% 100% no-repeat;
  background-position:120% 0;
  -webkit-mask:url("../img/logo.png") center/contain no-repeat;mask:url("../img/logo.png") center/contain no-repeat;
  animation:boot-sheen .8s .28s cubic-bezier(.4,0,.2,1) both;}
@keyframes boot-logo-in{from{opacity:0;transform:scale(.92);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
@keyframes boot-sheen{from{background-position:120% 0;}to{background-position:-20% 0;}}
.boot-bar{width:132px;height:2px;background:rgba(255,255,255,.1);}
.boot-bar span{background:linear-gradient(90deg,#2E9C88,#9BE07A);}
.boot-note{color:rgba(255,255,255,.5);min-height:1em;}
@media (prefers-reduced-motion:reduce){ .boot-logo,.boot-sheen{animation:none;} .boot-sheen{display:none;} }

/* the logo where the old ticket mark used to be */
.pos-brand .pos-logo{height:64px;width:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));}
.locked-brand .pos-logo{height:72px;width:auto;}
:root[data-theme="light"] .locked-brand .pos-logo{filter:invert(1) hue-rotate(180deg);}
body.bo .rail-pos .pos-mark{width:26px;height:auto;display:block;}
body.bo .rail-pos b{display:none !important;}
body.bo .rail-pos{opacity:.75;}

/* the closed rail: back to its slimmer width, smaller names under the icons */
@media (min-width:761px){
  body.bo .rail{width:76px;}
  body.bo .shell:not(.rail-open) .rail-btn{width:64px;min-height:52px;padding:7px 2px 6px;gap:3px;border-radius:15px;}
  body.bo .shell:not(.rail-open) .rail-btn svg{width:18px;height:18px;}
  body.bo .shell:not(.rail-open) .rail-btn span{font-size:.54rem;max-width:60px;font-weight:600;letter-spacing:.01em;}
  body.bo .shell:not(.rail-open) .rail-badge{right:6px;}
  body.bo .shell.rail-open .rail{width:232px;}

  /* hover opens the rail in place: the page beside it narrows as it widens
     and grows back as it closes — the width eases both ways */
  body.bo .rail{transition:width .34s cubic-bezier(.2,.8,.2,1),padding .34s cubic-bezier(.2,.8,.2,1);}
  body.bo .shell .main{transition:none;}
}

/* v4.4: the logo, smaller everywhere it appears */
.boot-logo{width:92px;}
.boot-bar{width:92px;}
.pos-brand .pos-logo{height:50px;}
.locked-brand .pos-logo{height:54px;}

/* ── v4.4: nothing on the till or the Menu screen gets cut off ───────── */
/* the till's ticket: a tighter header and footer, so the basket (and its
   "tap an item" prompt) is visible on a 768px-tall laptop, not under the bar */
body.bo .ticket-head{padding:12px 14px;gap:10px;}
body.bo #tblGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;}
body.bo #tblGrid button{min-width:0;height:34px;padding:0;font-size:.78rem;justify-content:center;}
body.bo .ticket .lines{min-height:96px;}
body.bo .ticket .lines .empty{padding:16px 8px;min-height:0;height:auto;gap:6px;}
body.bo .ticket .lines .empty svg{width:22px;height:22px;}
body.bo .ticket-close{padding:10px 14px 12px;gap:8px;}
body.bo .ticket-close .sum{padding:2px 0;}
body.bo .sum.total span:last-child{font-size:1.45rem;}
body.bo .ticket-close .btn-accent,body.bo .ticket-close .btn{min-height:44px;}
/* the tile grid and the category column scroll clear of their last row */
body.bo .grid{padding-bottom:28px;}
body.bo .cats{padding-bottom:24px;}
body.bo .cat b{white-space:normal;line-height:1.25;}

/* Menu screen: a category's full name, wrapping if it must; its move and
   rename buttons appear on hover (always on the selected one) instead of
   squeezing the name into an ellipsis */
body.bo .mgr-cat{position:relative;}
body.bo .mgr-cat-btn{min-width:0;flex:1;}
body.bo .mgr-cat b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;display:block;}
body.bo .mgr-cat-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  padding:3px;border-radius:999px;background:var(--surface-3);box-shadow:0 4px 14px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .18s;}
body.bo .mgr-cat:hover .mgr-cat-actions,body.bo .mgr-cat:focus-within .mgr-cat-actions{opacity:1;pointer-events:auto;}
body.bo .mgr-grid{padding-bottom:28px;}
@media (hover:none){ body.bo .mgr-cat.on .mgr-cat-actions{opacity:1;pointer-events:auto;position:static;transform:none;background:none;box-shadow:none;} }

/* ── v4.5: the till and the Menu screen as whole tiles ─────────────────
   Their columns used to be flat slabs inside the panel: rounded where they met
   the panel's corners, square where they met each other, so every column read
   as cut off on one side. Each is now its own rounded pane with a gap. */
@media (min-width:761px){
  body.bo .pos,body.bo .mgr{gap:12px;padding:12px;box-sizing:border-box;}
  body.bo .cats,body.bo .grid-wrap,body.bo .ticket,body.bo .mgr-rail,body.bo .mgr-main{
    border-radius:22px;border:1px solid var(--hair);overflow:hidden;
    background:var(--tile-bg),var(--tile-solid);
  }
  body.bo .cats,body.bo .mgr-rail,body.bo .ticket{overflow-y:auto;}
  body.bo .ticket{background:var(--surface);}
  body.bo .ticket-close{background:var(--surface);border-radius:0 0 22px 22px;}
  body.bo .grid-head,body.bo .mgr-head{border-bottom:1px solid var(--hair);}
  body.bo .cats{padding:10px 8px 24px;}
  body.bo .mgr-rail{padding:10px 8px;}
  body.bo .cat,body.bo .mgr-cat{border-radius:14px;}
  body.bo .tile{border-radius:18px;}
  body.bo .mtile{border-radius:18px;overflow:hidden;}
}
:root[data-theme="light"] body.bo .ticket,:root[data-theme="light"] body.bo .ticket-close{background:#fff;}

/* v4.5: the logo smaller still, and dark on light backgrounds */
.boot-logo,.boot-bar{width:72px;}
.pos-brand .pos-logo{height:40px;}
.locked-brand .pos-logo{height:44px;}
/* Light mode: the splash turns light and the logo dark. invert + hue-rotate
   keeps the O's bar green while the white letters go near-black. */
:root[data-theme="light"] .boot,:root[data-theme="light"] body.bo .boot{
  background:radial-gradient(700px 480px at 50% 42%,rgba(46,156,136,.12),transparent 70%),#F3F5F4;}
:root[data-theme="light"] .boot-logo img{filter:invert(1) hue-rotate(180deg) drop-shadow(0 10px 24px rgba(14,40,36,.12));}
:root[data-theme="light"] .boot-sheen{background-image:linear-gradient(105deg,transparent 35%,rgba(30,140,118,.9) 50%,transparent 65%);}
:root[data-theme="light"] .boot-bar{background:rgba(12,40,36,.1);}
:root[data-theme="light"] .boot-note{color:rgba(12,40,36,.5);}