/* ═══ Eureka — design system ═══
   Light, warm-neutral enterprise command center. White panels float on a
   soft sage ground; one emerald accent carries the brand; Fraunces serifs
   mark brand moments; status colors are reserved for status.
   Same selectors as always — only the craft level changed. */

:root {
  /* Surfaces */
  --plane: #f2f4f3;
  --surface: #ffffff;
  --surface-2: #f4f6f5;
  --surface-3: #e9edeb;
  --border: #e4e9e7;
  --border-strong: #ccd6d1;

  /* Ink */
  --ink: #16201b;
  --ink-2: #5b6b63;
  --ink-3: #8a968e;

  /* Brand accent (kept under the historical --gold names so every page follows) */
  --gold: #107a4f;
  --gold-bright: #0b5f3d;
  --gold-dim: #8fbfa9;
  --gold-wash: rgba(16, 122, 79, 0.09);

  /* Categorical series (light surface #ffffff) */
  --s1: #107a4f; --s2: #2563eb; --s3: #b97e0b;
  --s4: #7c3aed; --s5: #d64540; --s6: #0e7490;

  /* Status (reserved) */
  --ok: #12915c; --warn: #b97e0b; --serious: #c96a2e; --crit: #d64540;
  --ok-wash: rgba(18,145,92,.10); --warn-wash: rgba(185,126,11,.11); --crit-wash: rgba(214,69,64,.09);

  /* Chart chrome */
  --grid: rgba(22, 32, 27, 0.07);
  --axis: rgba(22, 32, 27, 0.24);

  --radius: 14px;
  --radius-sm: 10px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", "Palatino Linotype", Georgia, serif;
  --shadow-sm: 0 1px 2px rgba(22, 32, 27, 0.05), 0 1px 1px rgba(22, 32, 27, 0.03);
  --shadow: 0 2px 6px -1px rgba(22, 32, 27, 0.07), 0 14px 34px -10px rgba(22, 32, 27, 0.13);
  --ring: 0 0 0 3px rgba(16, 122, 79, 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--plane); color-scheme: light; height: 100%; max-width: 100%; overflow-x: hidden; }
#app { height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 500px at 18% -12%, rgba(16, 122, 79, 0.055), transparent 60%),
    radial-gradient(900px 420px at 95% -10%, rgba(14, 116, 144, 0.035), transparent 55%),
    var(--plane);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
::selection { background: rgba(16, 122, 79, 0.22); }
a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* Phones: a fast second tap is a second tap — never a double-tap zoom.
   This is why PIN keys "missed" digits: iOS was zooming instead of typing. */
button, a, input, select, textarea, label,
.btn, .pin-key, .chip, .cat-pill, .nav-item, .seg button, .combo-opt {
  touch-action: manipulation;
}

/* Thin quiet scrollbars on desktop */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
}
/* Keyboard focus ring — visible, never on mouse click */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: var(--radius-sm); }
/* `hidden` means hidden, whatever display a class gives (a .flex box with hidden showed: the date picker's custom dates) */
[hidden] { display: none !important; }

/* ─── Icons ─── */
.i { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; }
.side-brand .crown, .boot-crown, .login-card .crown { color: var(--gold); }
.login-card .crown { display: flex; justify-content: center; }
.nav-item .ico .i { vertical-align: 0; }
.m-switch .i { vertical-align: -2px; margin-right: 2px; }

/* Sidebar close (mobile) + tap-outside backdrop */
.side-close {
  display: none; position: absolute; top: 14px; right: 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-2);
  border-radius: 8px; width: 34px; height: 34px; font-size: 15px; cursor: pointer;
}
.side-overlay { display: none; position: fixed; inset: 0; background: rgba(22, 32, 27, 0.40); z-index: 45; backdrop-filter: blur(2px); }
@media (max-width: 900px) { .side-close { display: block; } }

/* ─── Boot splash ─── */
.boot-splash {
  height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--ink-3); font-size: 15px; letter-spacing: 5px; font-weight: 650;
  text-transform: uppercase;
}
.boot-crown {
  width: 74px; height: 74px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #149162, #0c6a44);
  box-shadow: 0 10px 30px -8px rgba(16, 122, 79, 0.5), inset 0 1px 0 rgba(255,255,255,.25);
  animation: pulse 1.3s ease-in-out infinite;
}
.boot-crown svg, .boot-crown .i { color: #fff; }
@keyframes pulse { 50% { opacity: 0.55; transform: scale(0.97); } }

/* ─── App layout ─── */
.layout {
  display: flex; height: 100%; height: 100dvh; max-height: 100dvh;
  width: 100%; max-width: 100%; overflow: hidden;
}
.stage {
  flex: 1; min-width: 0; min-height: 0; width: 100%; max-width: 100%;
  display: flex; flex-direction: column;
}
.sidebar {
  width: 236px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  height: 100%; overflow-y: auto; z-index: 30;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
body.drawer-open { overflow: hidden; }
.side-brand { padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 14px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 40px 1fr; column-gap: 11px; align-items: center; }
.side-brand .crown {
  width: 40px; height: 40px; border-radius: 11px; grid-row: 1 / 3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #149162, #0c6a44);
  box-shadow: 0 4px 12px -3px rgba(16, 122, 79, 0.45), inset 0 1px 0 rgba(255,255,255,.22);
}
.side-brand .crown svg, .side-brand .crown .i { color: #fff; }
.side-brand .name { font-family: var(--serif); font-size: 19px; font-weight: 650; letter-spacing: .2px; color: var(--ink); line-height: 1.1; margin-top: 0; }
.side-brand .sub { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 2.6px; margin-top: 2px; font-weight: 650; }

.side-merchant {
  margin: 12px 12px 4px; padding: 10px 12px;
  background: linear-gradient(155deg, rgba(16,122,79,.12), rgba(16,122,79,.05));
  border: 1px solid rgba(16,122,79,.24);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s;
}
.side-merchant:hover { border-color: rgba(16,122,79,.5); }
.side-merchant .m-name { font-weight: 700; font-size: 13px; color: var(--gold-bright); letter-spacing: -0.1px; }
.side-merchant .m-switch { font-size: 11px; color: var(--ink-2); margin-top: 1px; }

.side-nav { padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--ink-3); padding: 14px 12px 5px; font-weight: 700; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7.5px 12px; border-radius: 8px;
  color: var(--ink-2); cursor: pointer; font-size: 13.5px; border: none; background: none; text-align: left; width: 100%;
  font-weight: 500; position: relative; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--gold-wash); color: var(--gold-bright); font-weight: 650; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 3px; background: var(--gold);
}
.nav-item .ico { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; opacity: .8; }
.nav-item.active .ico { opacity: 1; }
/* the menu's dropdown groups (2026-10-26): a header that opens its pages, indented under a thin line */
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: none; background: none;
  border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
  transition: background .12s, color .12s; touch-action: manipulation;
}
.nav-group-head:hover { background: var(--surface-2); }
.nav-group-head .ico { width: 20px; text-align: center; flex-shrink: 0; opacity: .7; }
.nav-group-name { flex: 1; min-width: 0; }
.nav-group-head .chev { display: inline-flex; opacity: .5; transition: transform .15s; }
.nav-group.open > .nav-group-head .chev { transform: rotate(180deg); }
.nav-group.here > .nav-group-head { color: var(--gold-bright); }
.nav-group.here > .nav-group-head .ico { opacity: 1; }
.nav-group-body { display: none; flex-direction: column; gap: 1px; margin: 1px 0 6px 21px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-group.open > .nav-group-body { display: flex; }
.nav-group-body .nav-item { padding-top: 6.5px; padding-bottom: 6.5px; font-size: 13px; }
.nav-sep { height: 1px; background: var(--border); margin: 10px 8px; }

.side-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-3); }
.side-foot .sync-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.sync-dot.idle { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.sync-dot.syncing { background: var(--warn); animation: pulse 1s infinite; }
.sync-dot.error { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-wash); }
.sync-dot.not-configured { background: var(--ink-3); }

.main { flex: 1; min-width: 0; min-height: 0; max-width: 100%; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: calc(13px + env(safe-area-inset-top, 0px)) 28px 13px; border-bottom: 1px solid var(--border);
  background: rgba(242, 244, 243, 0.85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-family: var(--serif); font-size: 21px; font-weight: 650; letter-spacing: -0.1px; flex: 1; }
.topbar .back-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; flex-shrink: 0; }
.topbar .back-btn:active { transform: scale(.97); }
.topbar .user-chip { font-size: 12px; color: var(--ink-2); text-align: right; line-height: 1.35; white-space: nowrap; flex-shrink: 0; }
.topbar .user-chip b { display: block; color: var(--ink); font-weight: 650; }
.content { padding: 26px 30px 72px; max-width: 1440px; width: 100%; margin: 0 auto; min-width: 0; }

.hamburger { display: none; background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink); border-radius: 9px; padding: 6px 10px; font-size: 16px; cursor: pointer; box-shadow: var(--shadow-sm); }

/* ─── Cards & grids ─── */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
/* side by side in a grid, the gap spaces them: a stacked-card margin there pushed every second card down */
.grid > .card, .grid > .kpi { margin-top: 0; }
.card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-3); margin-bottom: 13px; font-weight: 700; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.card-head h3 { margin-bottom: 0; }

.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

/* KPI tiles */
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi .k-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-3); font-weight: 700; }
.kpi .k-value { font-size: 31px; font-weight: 800; margin-top: 7px; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi .k-sub { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.kpi.gold .k-value { color: var(--gold-bright); }
.kpi.gold::before { content: none; }
.kpi.alert .k-value { color: var(--crit); }
.kpi.alert::before { content: none; }
.kpi.tap { cursor: pointer; transition: border-color .14s, transform .14s, box-shadow .14s; }
.kpi.tap:hover { border-color: var(--gold-dim); box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi.tap:active { transform: scale(0.985); }
.k-delta { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm); transition: border-color .13s, background .13s, box-shadow .13s, transform .08s;
}
.btn:hover { background: var(--surface-2); border-color: var(--gold-dim); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #158e5f, #0d6f47);
  color: #ffffff; border-color: #0c6a44; font-weight: 650;
  box-shadow: 0 1px 2px rgba(16,122,79,.35), inset 0 1px 0 rgba(255,255,255,.17);
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.btn.primary:hover { background: linear-gradient(180deg, #189a68, #0f7a4f); border-color: #0c6a44; }
.btn.danger { background: var(--crit-wash); border-color: rgba(214,69,64,.35); color: #b53c38; box-shadow: none; }
.btn.danger:hover { background: rgba(214,69,64,.17); border-color: rgba(214,69,64,.55); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover { color: var(--ink); background: var(--surface-2); border-color: transparent; }
.btn.sm { padding: 4px 11px; font-size: 12.5px; }
.btn.lg { padding: 12px 22px; font-size: 15px; border-radius: 11px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Segmented control */
.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button {
  border: none; background: none; color: var(--ink-2); padding: 5px 12px; font-size: 12.5px;
  border-radius: 6px; cursor: pointer; font-weight: 600; transition: color .12s, background .12s;
}
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--surface); color: var(--gold-bright); box-shadow: 0 1px 3px rgba(22,32,27,.14); font-weight: 700; }
/* package chips over the members list, each with its count (2026-10-23) */
.pkg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.pkg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px var(--font); cursor: pointer; }
.pkg-chip b { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); font-size: 12.5px; text-align: center; }
.pkg-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pkg-chip.on b { background: rgba(255,255,255,.18); color: #fff; }

/* ─── Forms ─── */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 5px; font-weight: 650; letter-spacing: .2px; }
.input, .select, textarea.input {
  width: 100%; padding: 9px 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none;
  transition: border-color .13s, box-shadow .13s;
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--gold); box-shadow: var(--ring); }
.input::placeholder { color: var(--ink-3); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a968e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }

/* ─── Menu Builder ─── */
.mb-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.mb-row:last-child { border-bottom: none; }
.mb-arrows { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.mb-arrows .btn { padding: 2px 8px; min-height: 26px; line-height: 1; }
@media (max-width: 900px) {
  .mb-row { flex-wrap: wrap; }
  .mb-arrows { flex-direction: row; }
  .mb-arrows .btn { min-height: 38px; padding: 6px 14px; }
}

/* ─── Product page (item detail) ─── */
.item-photo {
  width: 116px; height: 116px; object-fit: contain; flex-shrink: 0;
  border-radius: 14px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); padding: 6px;
}
.item-thumb {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  border-radius: 8px; background: #fff; border: 1px solid var(--border); padding: 2px;
}
.spec-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 12px; color: var(--ink); white-space: nowrap;
}
.spec-chip .sc-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ink-3); font-weight: 700; }
.desc-fold {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  margin-bottom: 12px; overflow: hidden;
}
.desc-fold summary {
  cursor: pointer; padding: 10px 14px; font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none;
}
.desc-fold summary::before { content: '▸'; font-size: 11px; color: var(--ink-3); transition: transform .15s; }
.desc-fold[open] summary::before { transform: rotate(90deg); }
.desc-fold summary::-webkit-details-marker { display: none; }
.desc-body { padding: 0 16px 12px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.desc-body p { margin: 0 0 10px; }
@media (max-width: 900px) {
  .item-photo { width: 88px; height: 88px; }
}

/* type-or-pick combo (ui.js combo()) — a dropdown that actually opens on phones */
.combo-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a968e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.combo-panel {
  position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow); max-height: 224px; overflow-y: auto; padding: 4px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.combo-opt { padding: 10px 12px; border-radius: 7px; font-size: 13.5px; cursor: pointer; color: var(--ink); }
.combo-opt:hover, .combo-opt.on { background: var(--gold-wash); color: var(--gold-bright); }
.combo-empty { padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); }
.form-row { display: flex; gap: 12px; } .form-row > * { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.checkbox-row input { accent-color: var(--gold); width: 16px; height: 16px; }

.search-bar { position: relative; flex: 1; min-width: 180px; }
.search-bar .input { padding-left: 34px; }
.search-bar::before {
  content: ''; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b63' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M21 21l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─── Tables ─── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; padding: 10px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ink-3); border-bottom: 1px solid var(--border); font-weight: 700; white-space: nowrap;
  background: var(--surface);
}
.tbl td { padding: 10.5px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }

/* ─── Badges & chips ─── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 650; border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
}
.badge.gold { background: var(--gold-wash); color: var(--gold-bright); border-color: rgba(16,122,79,.22); }
.badge.ok { background: var(--ok-wash); color: #0e7a4b; border-color: rgba(18,145,92,.2); }
.badge.warn { background: var(--warn-wash); color: #96660a; border-color: rgba(185,126,11,.22); }
.badge.crit { background: var(--crit-wash); color: #b53c38; border-color: rgba(214,69,64,.22); }
.badge.dim { background: var(--surface-3); color: var(--ink-2); border-color: var(--border); }
.badge.violet { background: rgba(124,58,237,.09); color: #6d4fc4; border-color: rgba(124,58,237,.2); }
.badge.blue { background: rgba(37,99,235,.09); color: #2458c9; border-color: rgba(37,99,235,.2); }

.stock-pill { font-variant-numeric: tabular-nums; font-weight: 700; padding: 2.5px 10px; border-radius: 14px; font-size: 12.5px; }
.stock-pill.ok { background: var(--ok-wash); color: #0e7a4b; }
.stock-pill.low { background: var(--warn-wash); color: #96660a; }
.stock-pill.out { background: var(--crit-wash); color: #b53c38; }

/* ─── Modal ─── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(22, 32, 27, 0.44); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
  animation: fadeIn .15s ease; backdrop-filter: blur(3px);
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 560px; box-shadow: 0 24px 64px -12px rgba(22, 32, 27, 0.28); animation: slideUp .18s cubic-bezier(.16,1,.3,1);
}
.modal.wide { max-width: 860px; }
.modal.xl { max-width: 1100px; }
@keyframes slideUp { from { transform: translateY(16px) scale(.985); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 16px; font-weight: 750; letter-spacing: -0.2px; }
.modal-x { background: none; border: none; color: var(--ink-3); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; border-radius: 7px; transition: color .12s, background .12s; }
.modal-x:hover { color: var(--ink); background: var(--surface-2); }
.modal-body { padding: 20px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 16px 16px; }

/* ─── Toasts ─── */
.toast-holder { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink);
  border-radius: 11px; padding: 12px 18px; font-size: 13.5px; box-shadow: var(--shadow);
  animation: toastIn .22s cubic-bezier(.16,1,.3,1); max-width: 360px;
}
@keyframes toastIn { from { transform: translateY(10px) scale(.97); opacity: 0; } }
.toast.ok { border-left: 3px solid var(--ok); }
.toast.err { border-left: 3px solid var(--crit); }

/* ─── Charts ─── */
.chart-box { position: relative; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.chart-box svg { display: block; width: 100%; max-width: 100%; height: auto; }
.chart-tip {
  position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 7px 11px; font-size: 12.5px; z-index: 10; box-shadow: var(--shadow);
  white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); transition: opacity .1s;
}
.chart-tip .tip-label { color: var(--ink-3); font-size: 11px; }
.chart-tip .tip-value { font-weight: 750; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hbar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr minmax(74px, max-content); align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.hbar-row .hb-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-row .hb-track { background: var(--surface-3); border-radius: 5px; height: 18px; position: relative; overflow: hidden; }
.hbar-row .hb-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; min-width: 2px; transition: width .35s cubic-bezier(.16,1,.3,1); }
.hbar-row .hb-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 12.5px; }

/* ─── Spirit cards (bar menu) ─── */
.spirit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.spirit-card {
  border-radius: var(--radius); border: 1px solid var(--border); padding: 15px 17px;
  background: linear-gradient(150deg, var(--sc-from, #f0f5f2), var(--surface) 62%);
  position: relative; transition: transform .13s, border-color .13s, box-shadow .13s; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.spirit-card:hover { transform: translateY(-2px); border-color: var(--gold-dim); box-shadow: var(--shadow); }
.spirit-card.unavailable { opacity: 0.5; }
.spirit-card .sp-cat { font-size: 9.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--ink-3); font-weight: 700; }
.spirit-card .sp-name { font-size: 16.5px; font-weight: 700; margin: 4px 0 2px; color: var(--ink); letter-spacing: -0.2px; }
.spirit-card .sp-meta { font-size: 12px; color: var(--ink-2); }
.spirit-card .sp-pours { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.spirit-card .pour-chip { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 3px 9px; font-size: 12px; box-shadow: var(--shadow-sm); }
.spirit-card .pour-chip b { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.spirit-card .sp-badges { position: absolute; top: 12px; right: 12px; display: flex; gap: 5px; }
.cat-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-pill {
  padding: 5px 13px; border-radius: 18px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; cursor: pointer; font-weight: 600;
  transition: border-color .12s, color .12s, background .12s; box-shadow: var(--shadow-sm);
}
.cat-pill:hover { border-color: var(--gold-dim); color: var(--ink); }
.cat-pill.active { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 1px 3px rgba(16,122,79,.4); }
.cat-pill .n { opacity: 0.65; margin-left: 4px; font-size: 11px; }
.cat-pills.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.cat-pills.scroll::-webkit-scrollbar { display: none; }
.cat-pills.scroll .cat-pill { flex-shrink: 0; }

/* ─── Login ─── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(1100px 640px at 50% -14%, #dcebe2 0%, rgba(242,244,243,0) 62%),
    radial-gradient(700px 400px at 100% 110%, rgba(16,122,79,.06), transparent 60%),
    var(--plane);
}
.login-card {
  width: 100%; max-width: 402px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px 36px; box-shadow: 0 28px 70px -18px rgba(22,32,27,.22);
}
.login-card .crown {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #149162, #0c6a44);
  box-shadow: 0 10px 26px -8px rgba(16, 122, 79, 0.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.login-card .crown svg, .login-card .crown .i { color: #fff; }
.login-card h1 { text-align: center; font-family: var(--serif); font-size: 25px; font-weight: 650; letter-spacing: .2px; color: var(--ink); margin: 14px 0 2px; }
.login-card .sub { text-align: center; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 3.4px; margin-bottom: 28px; font-weight: 700; }

/* Scanned audit row lights up so the eye lands where the scanner did */
.audit-row.flash { background: rgba(16, 122, 79, .14); transition: background .2s; }

/* ─── The wall of lockers ─── */
.locker-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.locker {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 6px;
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 12px;
  cursor: pointer; transition: border-color .13s, transform .13s, box-shadow .13s; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.locker:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow); }
.locker .lk-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.locker .lk-who { font-size: 10px; color: var(--ok); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.locker.taken { background: linear-gradient(155deg, rgba(16,122,79,.09), var(--surface) 70%); border-color: var(--gold-dim); }
.locker.taken .lk-who { color: var(--gold-bright); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locker.stale { border-color: var(--crit); background: linear-gradient(155deg, rgba(214,69,64,.08), var(--surface) 70%); }
.locker.stale .lk-who { color: var(--crit); }
@media (max-width: 500px) { .locker-wall { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } }

/* ─── The Lockers page (2026-10-08, lockers.js): 600 doors on one screen ─── */
.lk-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 4px; }
.lk-tools .search-bar { margin: 0; }
.lk-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 12px; align-items: center; }
.lk-key { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--border-strong); background: var(--surface); }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.lk-cell {
  min-height: 52px; padding: 5px 3px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: inherit; min-width: 0; transition: border-color .12s, transform .12s;
}
.lk-cell b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-cell span { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); text-transform: lowercase; }
.lk-cell:hover { border-color: var(--gold); transform: translateY(-1px); }
.lk-cell.taken, .lk-key.taken { background: rgba(16,122,79,.11); border-color: rgba(16,122,79,.38); }
.lk-cell.taken span { color: var(--gold-bright); font-weight: 700; text-transform: none; }
.lk-cell.stale, .lk-key.stale { background: rgba(214,69,64,.10); border-color: var(--crit); }
.lk-cell.stale span { color: var(--crit); font-weight: 700; text-transform: none; }
.lk-cell.out, .lk-key.out { background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--surface-3) 5px 10px); color: var(--ink-3); border-style: dashed; }
.lk-cell.sm { min-height: 34px; width: 46px; flex-shrink: 0; cursor: inherit; }
.lk-cell.sm b { font-size: 13px; }
.lk-line { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-height: 48px; }
.lk-line:hover { background: var(--surface-2); }
.lk-line:last-child { border-bottom: 0; }
.lk-todo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.lk-todo:last-child { border-bottom: 0; }
.lk-holder { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.lk-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: 13.5px; }
.lk-facts small { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.lk-history > div { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.lk-history > div:last-child { border-bottom: 0; }
.lk-results { max-height: 300px; overflow-y: auto; margin-top: 10px; }
.lk-sub { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .9px; font-weight: 700; padding: 10px 2px 4px; }
.lk-person { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; min-height: 46px; padding: 8px 8px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lk-person:hover { background: var(--surface-2); }
.lk-person.on { border-color: var(--gold); background: rgba(16,122,79,.07); }
/* ─── Profit (2026-10-08, profit.js): a statement per location ─── */
.pnl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.pnl-grid > .card { margin: 0; }
.pnl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pnl-net { font-size: 26px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.pnl-empty { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pnl-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .9px; font-weight: 750; color: var(--ink-3); margin: 14px 0 4px; }
.pnl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.pnl-row.indent .pnl-label { padding-left: 10px; }
.pnl-row.strong { font-weight: 750; border-bottom: none; }
.pnl-row.tap { cursor: pointer; border-radius: 6px; }
.pnl-row.tap:hover { background: var(--surface-2); }
.pnl-label { min-width: 0; }
.pnl-sub { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-top: 1px; }
.pnl-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl-bottom { margin-top: 10px; padding-top: 6px; border-top: 2px solid var(--border); }
.pnl-bottom .pnl-row { font-size: 17px; }
.pnl-trend { display: flex; flex-direction: column; }
.pnl-tr { display: grid; grid-template-columns: 96px 1fr 1fr 1.3fr 1.2fr; gap: 10px; align-items: center; padding: 7px 6px; border: none; border-bottom: 1px solid var(--border); background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; border-radius: 6px; }
.pnl-tr.head { cursor: default; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; font-weight: 750; color: var(--ink-3); }
.pnl-tr:not(.head):hover, .pnl-tr.on { background: var(--surface-2); }
.pnl-tr .num { font-variant-numeric: tabular-nums; }
.pnl-bar { height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.pnl-bar i { display: block; height: 100%; border-radius: 4px; }
@media (max-width: 500px) {
  .pnl-grid { grid-template-columns: 1fr; }
  .pnl-tr { grid-template-columns: 74px 1fr 1fr 1.2fr; }
  .pnl-top { flex-wrap: wrap; }
  .pnl-net { font-size: 22px; }
  .pnl-tr > :last-child { display: none; }
}

/* ─── Cash & Deposits (2026-10-08, cash.js) ─── */
.cash-sides { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cash-sides > .card { margin: 0; }
.cash-bills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cash-bill { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.cash-bill .input { min-height: 46px; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.cash-total { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-bright); }
.cash-howto { background: var(--gold-wash); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 4px 0 12px; }
.cash-drawer-head, .cash-drawer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.cash-drawer-head { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.cash-drawer-row { margin-bottom: 6px; }
.cash-drawer-row .cash-amount { min-height: 48px; font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.cash-deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.cash-deps > .card { margin: 0; }
.cash-dep.crit { border-color: var(--crit); }
.cash-dep.warn { border-color: var(--warn); }
.cash-slip { width: 84px; height: 84px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-3); text-align: center; }
.cash-slip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 500px) {
  .cash-sides, .cash-deps { grid-template-columns: 1fr; }
  .cash-bills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
}

/* ─── Organize (2026-10-08, organize.js + organize/*.js): passwords, files, licenses ─── */
.org-tabs { margin-bottom: 14px; }
.org-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 4px; }
.org-warn { border-color: var(--crit); background: rgba(214,69,64,.06); margin-top: 12px; }
.org-warn-line { color: var(--crit); font-size: 13px; font-weight: 600; margin-top: 10px; }
.org-group { padding-top: 10px; }
.org-cat { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .9px; font-weight: 700; padding: 0 2px 6px; }
.org-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--border); cursor: pointer; min-height: 56px; }
.org-row:hover { background: var(--surface-2); }
.org-av { width: 36px; height: 36px; border-radius: 10px; background: rgba(16,122,79,.10); color: var(--gold-bright); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.org-main { flex: 1 1 200px; min-width: 0; }
.org-sub { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-pw { display: flex; gap: 6px; align-items: center; }
.org-site { min-width: 86px; text-align: center; }
.org-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .5px; min-width: 96px; word-break: break-all; }
.org-secret.big { font-size: 15px; }
.org-fact { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: center; }
.org-fact small { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.org-notes { white-space: pre-wrap; font-size: 13.5px; }
.org-facts .org-fact:last-child { border-bottom: 0; }
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.org-tile { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; }
.org-tile:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.org-thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
.org-thumb img { width: 100%; height: 100%; object-fit: contain; }
.org-thumb.doc, .org-view.doc { background: var(--surface-2); color: var(--ink-2); }
.org-thumb.doc b { font-size: 18px; letter-spacing: 1px; }
.org-tile-name { font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-tile-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-view { border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; max-height: 62vh;
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 18px 18px; }
.org-view img { max-width: 100%; max-height: 62vh; object-fit: contain; }
.org-view.doc { flex-direction: column; gap: 4px; min-height: 180px; }
.org-view.doc b { font-size: 28px; }
.org-drop { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; }
.org-drop.on, .org-drop:hover { border-color: var(--gold); background: rgba(16,122,79,.05); }
.org-picked { margin-top: 8px; }
.org-picked-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.org-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.org-lics { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 14px; }
.grid > .card.org-lic, .org-lics > .card { margin: 0; }
.org-lic { display: flex; flex-direction: column; gap: 10px; }
.org-lic > .btn { align-self: flex-start; }
.org-lic.expired, .org-lic.urgent { border-color: var(--crit); }
.org-lic.soon { border-color: var(--warn); }
.org-lic-open { display: flex; gap: 14px; align-items: flex-start; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.org-lic-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.org-lic-when { font-size: 13px; }
.org-lic-pic { width: 84px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 11px; text-align: center; }
.org-lic-pic img { width: 100%; height: 100%; object-fit: cover; }
.org-lic-pic.big { width: auto; min-width: 160px; height: 220px; }
.org-lic-pic.big img { object-fit: contain; }
.org-lic-pics { display: flex; gap: 10px; flex-wrap: wrap; }
.org-old { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
@media (max-width: 500px) {
  .org-fact { grid-template-columns: 1fr; gap: 2px; }
  .org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .org-lics { grid-template-columns: 1fr; }
  .org-pw { width: 100%; }
  .org-site:empty { display: none; }
}
@media (max-width: 500px) {
  .lk-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; }
  .lk-history > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── Bar: bottle gauge + two-tap pour grid ─── */
.btl-gauge {
  width: 16px; height: 34px; border: 1.5px solid var(--border-strong); border-radius: 3px 3px 5px 5px;
  position: relative; overflow: hidden; background: var(--surface-2); flex-shrink: 0;
}
.btl-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #16a06a, var(--gold));
  transition: height .25s;
}
.pour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.pour-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm);
}
.pour-card.dry { opacity: .5; }
.pour-card .pc-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -0.2px; }
.pour-card .pc-meta { font-size: 11.5px; color: var(--ink-3); }
.pour-card .pc-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pour-card .pc-sizes .btn { flex: 1; justify-content: center; min-width: 84px; }
@media (max-width: 600px) { .pour-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pour-card { padding: 12px; } }
@media (max-width: 400px) { .pour-grid { grid-template-columns: 1fr; } }

/* ─── Floor PIN sign-in (shared counter device) ─── */
.pin-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pin-person {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 17px 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 15px;
  color: var(--ink); cursor: pointer; transition: border-color .13s, background .13s, transform .1s; font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.pin-person:hover, .pin-person:active { border-color: var(--gold); background: var(--surface-2); }
.pin-person:active { transform: scale(.98); }
.pp-badge {
  width: 47px; height: 47px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, rgba(16,122,79,.16), rgba(16,122,79,.07));
  color: var(--gold-bright);
  font-size: 17px; font-weight: 800; letter-spacing: .5px; border: 1px solid rgba(16,122,79,.3);
}
.pp-badge.lg { width: 60px; height: 60px; font-size: 22px; }
.pp-name { color: var(--ink-2); font-weight: 600; }
.pin-who { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 17px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; min-height: 16px; }
.pin-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--border-strong); transition: all .12s; }
.pin-dot.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.pin-dot.faint { opacity: .35; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key {
  padding: 18px 0; font-size: 22px; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 13px;
  color: var(--ink); cursor: pointer; transition: all .1s; user-select: none; box-shadow: var(--shadow-sm);
}
.pin-key:active { background: var(--gold-wash); border-color: var(--gold); transform: scale(.97); }
.pin-key.ghost { color: var(--ink-3); font-size: 18px; box-shadow: none; background: var(--surface-2); }
.pin-key.ok { color: var(--gold-bright); }
@media (max-width: 430px) { .pin-key { padding: 15px 0; font-size: 20px; } }

/* ─── Command center ─── */
.store-card { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
.store-card .st-name { font-family: var(--serif); font-size: 19px; font-weight: 650; color: var(--ink); margin-bottom: 14px; letter-spacing: .1px; }
.merchant-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.merchant-chip {
  border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px; cursor: pointer;
  background: var(--surface); transition: border-color .14s, transform .14s, box-shadow .14s; position: relative;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.merchant-chip::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #149162, rgba(16,122,79,.25));
  opacity: 0; transition: opacity .14s;
}
.merchant-chip:hover { border-color: var(--gold-dim); transform: translateY(-2px); box-shadow: var(--shadow); }
.merchant-chip:hover::before { opacity: 1; }
.merchant-chip .mc-type { font-size: 10px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--ink-3); font-weight: 700; }
.merchant-chip .mc-name { font-size: 16.5px; font-weight: 700; margin: 3px 0 11px; color: var(--gold-bright); letter-spacing: -0.2px; }
.merchant-chip .mc-stats { display: flex; gap: 20px; }
.merchant-chip .mc-stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.5px; }
.merchant-chip .mc-stat span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 650; }

/* ─── Scanner ─── */
.scan-input { font-size: 19px !important; padding: 15px 16px !important; text-align: center; letter-spacing: 1px; }
.scan-page { display: flex; flex-direction: column; gap: 12px; }
.scan-results { min-height: 0; }
.scan-dock { order: -1; }
.scan-dock.waiting-code {
  background: var(--gold-wash);
  box-shadow: 0 -6px 20px rgba(16, 122, 79, .14);
}
.scan-assign { display: none; text-align: center; padding: 4px 4px 10px; }
.scan-assign:not(:empty) { display: block; }
.scan-assign-title { font-weight: 800; font-size: 15px; color: var(--gold-bright); }
.scan-assign-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.card.waiting-code { outline: 2px solid var(--gold); background: var(--gold-wash); }
/* the scan hit: a gold band says what the reader hit; the box or sticks that come with it sit below, quieter */
.card.scan-hit { outline: 3px solid var(--gold); box-shadow: 0 8px 26px rgba(185,126,11,.22); }
.scan-hit-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--gold); color: #1a1208; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 12px; }
.scan-hit-strip svg { flex: 0 0 auto; }
.scan-hit-word { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; }
.scan-hit-code { font-weight: 700; font-size: 13px; letter-spacing: 1px; }
.scan-hit-how { opacity: .8; }
.card.scan-also { border-style: dashed; }
.scan-also-lbl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); margin-bottom: 8px; }
.scan-codes { margin-top: 8px; display: grid; gap: 5px; }
.scan-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; background: var(--surface-2); }
.scan-code-row.hit { background: rgba(185,126,11,.14); outline: 1.5px solid var(--gold); }
.scan-code-lbl { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; color: var(--ink-3); width: 60px; }
.scan-code-val { font-weight: 700; letter-spacing: .5px; }
.scan-code-val.none { color: var(--ink-3); font-weight: 400; font-style: italic; }
.scan-code-acts { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.scan-code-acts .btn.sm { padding: 6px 10px; font-size: 12px; min-height: 36px; }
.scan-code-clear { color: #b3261e; }
.scan-family-bar .btn { width: 100%; min-height: 46px; }
.scan-dock-row { display: flex; gap: 8px; align-items: stretch; }
.scan-dock-row .scan-input { flex: 1; min-width: 0; }
.scan-cam { flex: 0 0 52px; min-width: 52px; padding: 0; justify-content: center; }
.scan-print-row { display: flex; gap: 8px; margin-top: 12px; }
.scan-print-row .btn { flex: 1; justify-content: center; min-height: 48px; }
.scan-qty { font-size: 36px; font-weight: 800; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 58px; }
.scan-missing { text-align: center; padding: 22px 16px; border: 1.5px dashed rgba(185,126,11,.45); background: var(--warn-wash); }
.big-adjust { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0; }
.big-adjust button { width: 58px; height: 58px; border-radius: 50%; font-size: 25px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .12s, transform .1s; }
.big-adjust button:hover { border-color: var(--gold); }
.big-adjust button:active { transform: scale(.94); }
.big-adjust .qty { font-size: 36px; font-weight: 800; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -1px; }

/* ─── Audit mode ─── */
.audit-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.audit-row:last-child { border-bottom: none; }
.audit-row.match { background: rgba(18, 145, 92, 0.06); }
.audit-row.minor { background: rgba(185, 126, 11, 0.07); }
.audit-row.major { background: rgba(214, 69, 64, 0.07); }
.audit-row .a-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row input { width: 76px; text-align: center; }

/* ─── Invoice print preview (stays paper — it IS paper) ─── */
.inv-paper { background: #fdfcf8; color: #241c0e; border: 1px solid var(--border); border-radius: 10px; padding: 34px 38px; font-size: 13.5px; box-shadow: var(--shadow-sm); }
.inv-paper h2 { font-family: var(--serif); font-size: 23px; font-weight: 650; }
.inv-paper table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.inv-paper th { text-align: left; border-bottom: 2px solid #241c0e; padding: 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.inv-paper td { padding: 7px 4px; border-bottom: 1px solid #e2dcc9; }
.inv-paper .tot-row td { border: none; padding: 3px 4px; }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0; }
  .inv-paper { border-radius: 0; border: none; box-shadow: none; }
}

/* ─── Permissions editor ─── */
.perm-group { margin-bottom: 18px; }
.perm-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.7px; color: var(--ink-3); margin-bottom: 7px; font-weight: 700; }
.perm-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 8px; }
.perm-row:hover { background: var(--surface-2); }
.perm-row.overridden { background: var(--warn-wash); }
.perm-row .p-label { font-size: 13.5px; }
.perm-row .p-key { font-size: 11px; color: var(--ink-3); font-family: ui-monospace, monospace; }

/* Toggle switch */
.switch { position: relative; width: 38px; height: 21px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 12px; transition: .16s; }
.switch .track::after { content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(22,32,27,.3); top: 2px; left: 2px; transition: .16s cubic-bezier(.16,1,.3,1); }
.switch input:checked + .track { background: var(--gold); border-color: var(--gold); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* ─── Item audit log (event feed) ─── */
.logrow { display: flex; gap: 13px; padding: 14px 2px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.logrow:last-child { border-bottom: none; }
.lg-ico { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-3); margin-top: 2px; color: var(--ink-2); }
.lg-ico.neg { background: var(--crit-wash); color: #b53c38; }
.lg-ico.pos { background: var(--ok-wash); color: #0e7a4b; }
.lg-ico.gold { background: var(--gold-wash); color: var(--gold-bright); }
.lg-ico.amber { background: var(--warn-wash); color: #96660a; }
.lg-ico.dim { color: var(--ink-3); }
.lg-title { font-weight: 750; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; }
.lg-title.neg { color: #b53c38; } .lg-title.pos { color: #0e7a4b; }
.lg-title.gold { color: var(--gold-bright); } .lg-title.amber { color: #96660a; } .lg-title.dim { color: var(--ink-2); }
.lg-chip { border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 8px; font-size: 9.5px; letter-spacing: 1.4px; color: var(--ink-2); margin-left: 9px; vertical-align: 1px; background: var(--surface-2); font-weight: 650; }
.lg-qty { font-size: 15px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.lg-qty.neg { color: #b53c38; } .lg-qty.pos { color: #0e7a4b; } .lg-qty.gold { color: var(--gold-bright); }
.lg-qty.amber { color: #96660a; } .lg-qty.dim { color: var(--ink-2); }
.lg-sentence { font-size: 13.5px; color: var(--ink); margin-top: 3px; }
.lg-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.btn.receipt { border: 1px solid rgba(16,122,79,.35); color: var(--gold-bright); background: none; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 700; box-shadow: none; }
.btn.receipt:hover { background: var(--gold-wash); border-color: rgba(16,122,79,.55); }
.stat-strip { display: flex; gap: 26px; flex-wrap: wrap; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.stat-strip .ss-label { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.stat-strip .ss-value { font-size: 18px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }

/* ─── PO add-item picker: brands rail + sizes list ─── */
.po-pick { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.po-pick-brands {
  display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.po-pick-items {
  max-height: 420px; overflow-y: auto; min-width: 0; padding-right: 4px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
  .po-pick { grid-template-columns: 1fr; }
  .po-pick-brands { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; scrollbar-width: none; }
  .po-pick-brands::-webkit-scrollbar { display: none; }
  .po-pick-brands .nav-item { white-space: nowrap; width: auto; }
  .po-pick-items { max-height: 55vh; }
}

/* ─── Settings: corporate two-rail layout ─── */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-rail {
  position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow-sm);
}
.settings-rail .sr-store { padding: 6px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.settings-rail .sr-name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.1px; }
.settings-rail .sr-type { font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--ink-3); font-weight: 650; margin-top: 2px; }
.settings-pane { min-width: 0; }
.sp-head { margin-bottom: 16px; }
.sp-head h2 { font-size: 21px; font-weight: 750; letter-spacing: -0.4px; }
.sp-head p { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.sp-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-3); font-weight: 700; }
.sp-value { font-size: 14.5px; font-weight: 650; margin-top: 3px; }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-rail { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .settings-rail::-webkit-scrollbar { display: none; }
  .settings-rail .sr-store { display: none; }
  .settings-rail .nav-item { white-space: nowrap; width: auto; }
}

/* ─── Misc ─── */
.empty { text-align: center; color: var(--ink-3); padding: 42px 16px; font-size: 13.5px; }
.empty .e-ico { font-size: 30px; margin-bottom: 8px; opacity: 0.7; }
.muted { color: var(--ink-3); } .dim { color: var(--ink-2); }
.mono { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12.5px; }
.right { text-align: right; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 10px; } .flex-1 { flex: 1; } .wrap { flex-wrap: wrap; }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--gold); border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.page-load { display: flex; justify-content: center; padding: 60px; }
.pagination { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }

/* ─── Responsive tables → card lists on phones ─── */
.dt-cards { display: none; }
@media (max-width: 700px) {
  .dt-table { display: none; }
  .dt-cards { display: flex; flex-direction: column; gap: 10px; }
}
.dtc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.dtc-card.clickable { cursor: pointer; }
.dtc-card.clickable:active { background: var(--surface-2); }
.dtc-head { font-size: 14.5px; margin-bottom: 8px; }
.dtc-fields { display: flex; flex-direction: column; gap: 6px; }
.dtc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dtc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-3); flex-shrink: 0; font-weight: 700; }
.dtc-val { font-size: 13.5px; text-align: right; min-width: 0; }
.dtc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dtc-actions .btn { flex: 1; justify-content: center; }
.dtc-actions .btn-row { width: 100%; }
.dtc-actions .btn-row .btn { flex: 1; justify-content: center; }

/* ─── Bottom tab bar — locked on every merchant screen ─── */
.bottomnav {
  flex-shrink: 0; z-index: 40; display: flex;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(22,32,27,.06);
}
.bottomnav button {
  flex: 1; background: none; border: none; color: var(--ink-3); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 650; letter-spacing: 0.3px; padding: 6px 2px; min-height: 48px;
  border-radius: 10px; transition: color .12s;
}
.bottomnav button.active { color: var(--gold-bright); }
.bottomnav button:active { transform: scale(0.94); }

/* ─── Mobile ─── */
@media (max-width: 900px) {
  /* Drawer is an overlay — do not let it steal page width on PDA WebViews. */
  .layout { display: block; width: 100%; max-width: 100%; }
  .stage { width: 100%; max-width: 100%; height: 100%; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 86vw);
    transform: translateX(-100%); transition: transform .2s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 16px 48px rgba(22,32,27,.22); z-index: 50;
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: block; }
  .content, .card, .grid, .kpi, .flex, .btn-row { max-width: 100%; min-width: 0; }
  .search-bar { min-width: 0; }
  .scan-print-row { flex-wrap: wrap; }
  .hbar-row { grid-template-columns: minmax(0, 1fr) minmax(48px, 2fr) auto; gap: 8px; }

  /* finger-sized tap targets for every small control */
  .seg button { padding: 10px 14px; min-height: 40px; font-size: 13px; }
  .cat-pill { min-height: 40px; padding: 9px 14px; }
  .nav-item, .nav-group-head { min-height: 42px; }
  .modal-x { padding: 10px 14px; min-width: 44px; min-height: 44px; }
  .switch { padding: 10px 6px; box-sizing: content-box; }
  /* toasts must clear the bottom tab bar and the home indicator */
  .toast-holder { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; }

  /* PO / invoice paper on a phone: tighter margins, wrapping header rows,
     and the line-item table scrolls inside the sheet instead of overflowing */
  .inv-paper { padding: 18px 14px; }
  .inv-paper div { flex-wrap: wrap; min-width: 0; }
  .inv-paper table { display: block; overflow-x: auto; }
  .content { padding: 16px 14px 24px; }
  /* Scanner: scan box stays on the thumb, above the tab bar. Results scroll above it. */
  .content.scan-page { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  .scan-dock {
    order: 0;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 35;
    max-width: 100%;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(22, 32, 27, .08);
    padding: 10px 14px;
  }
  .scan-dock.waiting-code { background: var(--gold-wash); }
  .scan-dock > div:first-child { max-height: 36vh; overflow-y: auto; }

  .topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; flex-wrap: wrap; row-gap: 9px; }
  .topbar h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
  .topbar .user-chip { display: none; }
  .topbar .btn-row {
    order: 5; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .topbar .btn-row::-webkit-scrollbar { display: none; }
  .topbar .btn-row:empty { display: none; }
  .topbar .btn-row .btn { flex-shrink: 0; min-height: 37px; padding: 8px 14px; font-size: 13px; }
  .form-row { flex-direction: column; gap: 0; }
  .side-overlay.show { display: block; }

  .input, .select, textarea.input { font-size: 16px; padding: 11px 13px; }
  .flex.wrap > .search-bar { flex-basis: 100%; }
  .flex.wrap > .select { flex: 1 1 42%; max-width: none !important; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .btn { padding: 10px 16px; min-height: 42px; }
  .btn.sm { padding: 8px 12px; min-height: 36px; }
  .tbl td { padding: 12px 12px; }
  .kpi .k-value { font-size: 25px; }

  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal, .modal.wide, .modal.xl {
    max-width: 100%; width: 100%; min-height: 100dvh; border-radius: 0;
    display: flex; flex-direction: column; animation: none;
  }
  /* clear the phone's notch/status bar — without this the ✕ hides under it */
  .modal-head { position: sticky; top: 0; background: var(--surface); z-index: 5; padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-foot { position: sticky; bottom: 0; background: var(--surface-2); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; border-radius: 0; }
  .spirit-grid { grid-template-columns: 1fr; }
  .merchant-chips { grid-template-columns: 1fr; }
}

/* the shelf-refill bell: visible on every page while boxes need topping up */
.refill-bell {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f5a623; color: #3a2405; border: 0; border-radius: 999px;
  padding: 7px 14px; font-weight: 800; font-size: 13px; cursor: pointer;
  animation: refill-pulse 2s ease-in-out infinite;
}
.refill-bell b { background: #3a2405; color: #ffd98a; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-size: 12px; }
@keyframes refill-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, .55); } 50% { box-shadow: 0 0 0 7px rgba(245, 166, 35, 0); } }
@media (prefers-reduced-motion: reduce) { .refill-bell { animation: none; } }

/* ─── PIN lock screen (shared PDA) ─── */
.lock-screen { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.lock-card { width: min(380px, 100%); }
.lock-who { text-align: center; color: var(--ink-3); font-size: 13px; margin: -14px 0 16px; line-height: 1.45; }
.lock-who b { color: var(--ink); }
.lock-msg { min-height: 20px; text-align: center; font-size: 13px; color: var(--crit); margin: -6px 0 10px; }
.pin-pad-wrap.pin-shake { animation: pinshake .38s; }
@keyframes pinshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.pin-dot.bad { border-color: var(--crit); background: var(--crit); box-shadow: none; }
.pin-key { min-height: 64px; font-size: 24px; }
body.locked .layout, body.locked .login-wrap { filter: blur(6px); pointer-events: none; user-select: none; }

/* ─── Scanner: slim dock, armed tab, feedback ─── */
.scan-ready { display: none; align-items: center; gap: 10px; padding: 2px 2px; cursor: pointer; }
.scan-ready-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; animation: scanpulse 1.8s infinite; }
@keyframes scanpulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(18,145,92,.16); } 50% { box-shadow: 0 0 0 8px rgba(18,145,92,.04); } }
.scan-ready-text { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; color: var(--ok); }
.scan-dock.slim .scan-ready { display: flex; }
.scan-dock.slim .scan-dock-row { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.scan-dock.slim .scan-recent, .scan-dock.slim .scan-status:empty { display: none; }
.scan-recent { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: none; }
.scan-recent::-webkit-scrollbar { display: none; }
.scan-recent .btn { white-space: nowrap; flex: 0 0 auto; }
.scan-status { font-size: 12px; color: var(--ink-3); text-align: center; min-height: 16px; }
.scan-status:empty { min-height: 0; }
.scan-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.scan-dock.scan-flash-ok { animation: scanok .55s; }
.scan-dock.scan-flash-bad { animation: scanbad .55s; }
@keyframes scanok { 0% { box-shadow: 0 0 0 0 rgba(18,145,92,0); } 30% { box-shadow: 0 0 0 5px rgba(18,145,92,.45); } 100% { box-shadow: 0 0 0 0 rgba(18,145,92,0); } }
@keyframes scanbad { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,69,64,0); } 30% { box-shadow: 0 0 0 5px rgba(214,69,64,.5); } }
.bottomnav button.scan-armed { color: var(--ok); }
.bottomnav button.scan-armed .i { position: relative; }
.bottomnav button.scan-armed .i::after { content: ''; position: absolute; top: -3px; right: -7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px #fff; }
/* activity rows */
.lg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lg-head .lg-chip { margin-left: 0; white-space: nowrap; }
.lg-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
@media (max-width: 900px) {
  .scan-dock.slim { padding: 8px 14px; }
  .content.scan-page.slim-dock { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  .logrow { flex-wrap: wrap; gap: 10px; padding: 12px 0; }
  .lg-ico { width: 30px; height: 30px; }
  .lg-ico .i svg { width: 14px; height: 14px; }
  .lg-actions { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; padding-left: 40px; gap: 6px; }
  .lg-actions .btn.receipt { min-height: 34px; padding: 6px 10px; font-size: 10px; letter-spacing: 1px; }
  .lg-sentence { font-size: 13px; }
  .lg-meta { font-size: 11px; }
}

/* ─── Full-screen work mode (Bar Cleanup on the iPad, 2026-09-21): the side menu and top bar step aside ─── */
body.kc-full .sidebar, body.kc-full .side-overlay, body.kc-full .topbar { display: none !important; }
body.kc-full .content { padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 40px; max-width: none; }
.kc-full-x { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; }
.kc-full-x:active { transform: scale(.95); }
/* one bottle = one card whose boxes wrap to the width of the screen: never a sideways scroll */
.brow { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
.brow .f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brow .f label { font-size: 10.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; padding-left: 2px; white-space: nowrap; }
.brow .input, .brow .select { min-height: 40px; padding: 4px 8px; font-size: 14px; width: 100%; box-sizing: border-box; }
.brow-card .badge { white-space: nowrap; }

/* ─── Team page (2026-09-25): tabs, the week grid, coverage bars, chips, threads ─── */
.team-tabs { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding: 2px 0 6px; margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.team-tabs::-webkit-scrollbar { display: none; }
.team-tabs .btn { flex-shrink: 0; min-height: 40px; }
.team-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; }
.btn.primary .team-count { background: #fff; color: var(--gold-bright); }
.team-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.team-bar .btn { min-height: 40px; }
.team-bar .grow { flex: 1 1 auto; }
.team-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.team-empty { color: var(--ink-3); padding: 18px 4px; font-size: 13.5px; }
.team-note { background: var(--gold-wash); border: 1px solid rgba(16,122,79,.2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px; }
.team-note.warn { background: var(--warn-wash); border-color: rgba(185,126,11,.3); }
.team-note.crit { background: var(--crit-wash); border-color: rgba(214,69,64,.3); }
.team-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.team-row:first-child { border-top: none; }
.team-row .main { flex: 1 1 220px; min-width: 0; }
.team-row .main b { font-size: 14.5px; }
.team-row .sub { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }

/* ─── The Team hub's look (2026-09-27, the owner's mockup carried to every tab) ────────────────
   A tab bar with an underline, a serif title and a one-line subtitle per tab, a white summary line of
   counts (the .sb-strip), cards with plain titles. Scoped to .team-hub so the rest of Eureka is untouched. */
.team-hub .team-tabs { gap: 2px; border-bottom: 1px solid var(--border); padding: 0; margin-bottom: 18px; }
.team-hub .team-tabs .btn { background: none; border: none; box-shadow: none; border-radius: 0; min-height: 44px; padding: 0 12px; color: var(--ink-2); font-weight: 650; border-bottom: 3px solid transparent; margin-bottom: -1px; gap: 7px; }
.team-hub .team-tabs .btn:hover { color: var(--ink); background: var(--surface-2); }
.team-hub .team-tabs .btn.primary { color: var(--gold-bright); border-bottom-color: var(--gold); background: none; }
.team-hub .team-tabs .btn .i { color: currentColor; opacity: .8; }
@media (max-width: 1560px) { .team-hub .team-tabs .btn .i { display: none; } .team-hub .team-tabs .btn { padding: 0 11px; } }
.team-hub .team-tabs .btn.primary .team-count { background: var(--crit); color: #fff; }
.team-hub .card { border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.team-hub .card h3 { font-size: 15.5px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 750; margin-bottom: 10px; }
.team-hub .card h3 .hc { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-left: 6px; }
.team-hub .team-empty { color: var(--ink-3); padding: 14px 4px; font-size: 13.5px; }
.team-hub .team-group-h { font-size: 11.5px; letter-spacing: 1.1px; color: var(--ink-2); }
.lib-body { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 760px; }
.lib-body h4 { font-size: 17px; font-weight: 800; margin: 16px 0 6px; }
.lib-body h4:first-child { margin-top: 0; }
.lib-body p { margin: 0 0 10px; }
.lib-body ul { margin: 0 0 12px 22px; padding: 0; }
.lib-body li { margin: 3px 0; }
.hub-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.hub-head .grow { flex: 1; }
.hub-head h1 { font-family: var(--serif); font-size: 32px; font-weight: 700; letter-spacing: -.4px; margin: 0; line-height: 1.08; color: var(--ink); }
.hub-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 15.5px; }
.hub-head .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.hub-cards > .card { margin: 0 !important; }
.hub-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hub-stat > div { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--c, var(--border)); }
.hub-stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.hub-stat span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.hub-stat small { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .9px; font-weight: 750; margin-bottom: 2px; }
.hub-av { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 800; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, #8a968e) 40%, transparent); }
.hub-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hub-person .t { min-width: 0; }
.hub-person .t b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-person .t span { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* People → Who's who: a level (four buttons) and the sides (chips) on one line a person (2026-09-27) */
.ww-head h3 { margin: 0 0 4px; }
.ww-head p { margin: 0 0 12px; font-size: 13px; max-width: 760px; }
.ww-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.ww-sum .grow { flex: 1; }
.ww-count { font-size: 13px; color: var(--ink-2); }
.ww-count b { font-size: 16px; color: var(--ink); margin-right: 2px; }
.ww-filter, .ww-seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; }
.ww-filter button, .ww-seg button { border: 0; background: transparent; padding: 0 12px; min-height: 36px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.ww-filter button.on, .ww-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.ww-seg button.on { color: var(--gold-bright); }
.ww-seg button:disabled { color: var(--ink-3); opacity: .55; cursor: default; }
.ww-seg button.on:disabled { opacity: 1; }
.ww-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(0, max-content); gap: 10px 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ww-row:last-child { border-bottom: 0; }
.ww-row.busy { opacity: .6; }
.ww-who { display: flex; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 0; font: inherit; color: inherit; }
.ww-who:hover b { text-decoration: underline; }
.ww-sides { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1101px) { .ww-sides { flex-wrap: nowrap; } }
.ww-side { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.ww-side i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: .3; }
.ww-side.on { border-color: var(--c); color: var(--ink); background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.ww-side.on i { opacity: 1; }
.ww-side:disabled { cursor: default; }
.ww-hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.ww-hint.warn { color: var(--warn); font-weight: 650; }
.ww-note { font-size: 12px; color: var(--ink-3); text-align: right; }
.ww-owner { grid-template-columns: minmax(200px, 1fr) auto; }
.ww-owner .ww-note { text-align: left; }
@media (max-width: 1100px) {
  .ww-row { grid-template-columns: 1fr; gap: 8px; padding: 13px 0; }
  .ww-note { text-align: left; }
  .ww-sum .grow { display: none; }
}
@media (max-width: 760px) {
  .ww-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ww-seg button { min-height: 40px; }
  .ww-filter { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 760px) {
  .hub-head h1 { font-size: 25px; }
  .hub-head p { font-size: 13.5px; }
  .team-hub .team-tabs .btn { padding: 0 11px; }
  .team-hub .card { padding: 14px 14px; }
}
.team-row .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.team-row .acts .btn { min-height: 40px; }
.team-row.tap { cursor: pointer; }
.team-row.tap:hover { background: var(--surface-2); }
.team-row.on { background: var(--gold-wash); border-radius: 8px; padding-left: 6px; padding-right: 6px; }
.team-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 6px; background: var(--ink-3); }
.team-unread { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--crit); margin-right: 6px; flex-shrink: 0; }
.team-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.team-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.team-chip.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.team-chip.on .team-dot { box-shadow: 0 0 0 2px #fff; }
.team-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.team-kpis .kpi { padding: 12px 14px; }
.team-kpis .kpi .k-value { font-size: 24px; }
.team-side { border-left: 4px solid var(--ink-3); }
.team-side.short { background: var(--crit-wash); }
.team-side.over { background: var(--warn-wash); }
.team-group-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-3); font-weight: 800; margin: 14px 0 4px; }
.team-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; cursor: pointer; padding: 0; }
.team-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-thumb-x { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(22,32,27,.72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.team-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.team-thumbs:empty { display: none; }
.team-photo-big { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border-radius: 10px; }
/* the week */
.team-week { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); gap: 8px; min-width: 950px; }
.team-day { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; min-height: 140px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.team-day.today { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-wash); }
.team-day-h { font-weight: 750; font-size: 13.5px; }
.team-shift { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ink-3); border-radius: 9px; padding: 7px 9px; font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-sm); }
.team-shift b { font-size: 13px; display: block; overflow-wrap: anywhere; }
.team-shift.draft { border-style: dashed; border-left-style: solid; background: #fffdf6; }
.team-shift.out { opacity: .65; }
.team-shift.out b { text-decoration: line-through; }
.team-shift.open { border-style: dashed; background: var(--gold-wash); }
.team-shift .w { color: #96660a; font-size: 11.5px; margin-top: 3px; }
.team-mini { font-size: 11.5px; color: var(--ink-2); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 4px 7px; }
.team-cov { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; height: 12px; border-radius: 3px; overflow: hidden; background: var(--border); }
.team-cov span { background: var(--surface-3); }
.team-cov span.ok { background: #7cc9a3; }
.team-cov span.short { background: #e07a76; }
.team-cov span.over { background: #e3b75a; }
.team-cov span.has { background: #b9c7bf; }
.team-cov-l { font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }
.team-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-2); align-items: center; }
.team-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
/* number grids: staffing needs, the heat map */
.team-grid { border-collapse: collapse; font-size: 12px; }
.team-grid th { font-weight: 700; color: var(--ink-2); padding: 3px 4px; text-align: center; white-space: nowrap; }
.team-grid td { padding: 2px; text-align: center; }
.team-grid th.rowh { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.team-grid input { width: 42px; min-height: 36px; text-align: center; border: 1px solid var(--border-strong); border-radius: 7px; font-size: 14px; background: var(--surface); color: var(--ink); padding: 2px; }
.team-grid .tk { display: block; font-size: 10px; color: var(--ink-3); }
.team-heat td { min-width: 34px; height: 32px; border-radius: 5px; font-size: 11px; font-weight: 650; color: var(--ink); }
.team-heat td.hot { background: #f0a6a3; }

/* ─── Team → Schedule: the week builder (2026-09-27, Ivan's layout) ──────────
   "Team schedule. The whole week. Every role. One view." People grouped by their main role, the week across,
   each day a soft block in the colour of the job worked, the time big and where they work under it. */
.sb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 12px; }
.sb-head .grow { flex: 1; }
.sb-title h1 { font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: -.4px; margin: 0; line-height: 1.05; color: var(--ink); }
.sb-title p { margin: 4px 0 0; color: var(--ink-3); font-size: 16px; }
.sb-pill { display: inline-flex; align-items: center; border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 750; }
.sb-pill.draft { background: #fdecc5; color: #8a5a00; }
.sb-pill.live { background: var(--ok-wash); color: var(--ok); }
.sb-saved { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.sb-strip { display: flex; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 6px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.sb-strip .grow { flex: 1; }
.sb-si { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; color: var(--ink); border: none; background: none; font-family: inherit; border-right: 1px solid var(--border); white-space: nowrap; }
.sb-si:last-child { border-right: none; }
.sb-si .i { color: var(--ink-2); display: inline-flex; }
button.sb-si { cursor: pointer; border-radius: 8px; }
button.sb-si:hover { background: var(--surface-2); }
.sb-si.warn { color: #8a5a00; font-weight: 650; }
.sb-si.on { background: var(--warn-wash); }
.sb-si.money { font-size: 13px; color: var(--ink-2); border-right: none; margin-left: auto; }
.sb-si.money b.ok { color: var(--ok); } .sb-si.money b.warn { color: var(--warn); } .sb-si.money b.crit { color: var(--crit); }
.sb-si-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.sb-ok { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sb-ok .i { color: #fff; }
.sb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.sb-controls .grow { flex: 1; }
.sb-weeknav { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.sb-weeknav .btn { border: none; border-radius: 0; min-width: 42px; box-shadow: none; }
.sb-range { display: flex; align-items: center; padding: 0 16px; font-weight: 700; font-size: 15px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; }
.sb-search { max-width: 260px; min-width: 180px; padding-left: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.sb-roles { max-width: 190px; }
.sb-controls .seg button.active { background: var(--gold); color: #fff; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink); margin: 2px 2px 12px; }
.sb-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sb-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.sb-hint { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.sb-hint .grow { flex: 1; }
.sb-hint b { color: var(--ink-2); }
.sb-empty { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }

.sb-frame { overflow: auto; max-height: calc(100vh - 230px); min-height: 320px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
.sb-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1060px; table-layout: fixed; font-size: 13px; }
.sb-grid col.who { width: 196px; }
.sb-grid col.tot { width: 76px; }
.sb-grid th, .sb-grid td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; vertical-align: middle; }
.sb-grid th:last-child, .sb-grid td:last-child { border-right: none; }
.sb-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); padding: 10px 8px; font-size: 12px; font-weight: 800; letter-spacing: .9px; color: var(--ink-2); text-align: center; text-transform: uppercase; }
.sb-grid thead th.corner { left: 0; z-index: 5; text-align: left; padding-left: 14px; }
.sb-grid thead th.tot-h { text-align: right; padding-right: 12px; }
.sb-day-h.today { background: #dcf3e5 !important; color: #0b5f3d !important; }
.sb-day-h.weekend { background: #fcf1e1 !important; }
.sb-day-h .dn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sb-short { width: 8px; height: 8px; border-radius: 50%; background: var(--crit); display: inline-block; }
.sb-day-h .note { display: block; margin: 5px auto 0; max-width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #8a5a00; background: #fff6de; border: 1px solid #f1dfae; border-radius: 6px; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
.sb-day-h button.note { cursor: pointer; }
.sb-day-h .add-note { display: block; margin: 4px auto 0; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink-3); background: none; border: 1px dashed transparent; border-radius: 6px; padding: 0 6px; cursor: pointer; font-family: inherit; opacity: 0; }
.sb-day-h:hover .add-note, .sb-day-h .add-note:focus { opacity: 1; border-color: var(--border-strong); }
@media (hover: none) { .sb-day-h .add-note { opacity: .7; } }
.sb-grid .who-cell { position: sticky; left: 0; z-index: 2; background: var(--surface); padding: 8px 12px; }

.sb-open td { background: #fffdf8; }
.sb-open td.who-cell { background: #fffdf8; }
.sb-open .on { font-weight: 750; font-size: 14px; color: var(--ink); }
.sb-band td { background: var(--surface-2); padding: 8px 14px; position: sticky; left: 0; }
.sb-band .bn { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink); position: sticky; left: 14px; }
.sb-band .bn i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.sb-band .bn small { font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-left: 4px; }

.sb-person { display: table-cell; }
.sb-person > * { vertical-align: middle; }
.sb-person .av { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 12px; font-weight: 800; align-items: center; justify-content: center; margin-right: 10px; float: left; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, #8a968e) 35%, transparent); }
.sb-person .pw { overflow: hidden; }
.sb-person .pn { font-weight: 700; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.sb-person .pr { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-grid tr.me .sb-person .pn { color: var(--gold-bright); }
.sb-grid td.tot { padding: 6px 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; }
.sb-grid td.tot b { color: var(--ink); font-size: 14px; }
.sb-grid td.tot.ot b, .sb-grid td.tot.ot div { color: var(--crit); font-weight: 750; }
.sb-grid td.tot.max b { color: var(--warn); }

.sb-cell { position: relative; padding: 4px !important; height: 54px; background: var(--surface); transition: background .12s; text-align: center; }
.sb-cell.edit { cursor: pointer; }
.sb-cell.edit:hover { background: #f6faf8; }
.sb-cell.today { background: #f7fcf9; }
.sb-cell.off { background: repeating-linear-gradient(135deg, #f4f5f5 0 6px, #eceeed 6px 12px); }
.sb-cell.cant { background: repeating-linear-gradient(135deg, #fcf8ef 0 6px, #f6efdf 6px 12px); }
.sb-cell.drop { background: var(--gold-wash) !important; outline: 2px dashed var(--gold); outline-offset: -3px; }
.sb-cell .word { font-size: 13px; color: #9aa5a0; }
.sb-cell .word.cant { color: #8a6200; font-size: 12px; font-weight: 650; }
.sb-cell .word.asked { color: var(--ink-2); font-size: 12px; }
.sb-cell .word.crit { display: block; color: var(--crit); font-size: 11px; font-weight: 700; margin-top: 2px; }
.sb-cell .plus { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 7px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--ink-2); font-size: 15px; line-height: 19px; text-align: center; opacity: 0; transition: opacity .12s; pointer-events: none; }
.sb-cell.edit.empty:hover .word { opacity: .25; }
.sb-cell.edit:hover .plus { opacity: 1; }
@media (hover: none) { .sb-cell.edit.empty .plus { opacity: .5; } }
.sb-pasting .sb-cell.edit { cursor: copy; }
.sb-pasting .sb-cell.edit:hover { background: var(--gold-wash); }
.sb-pasting .sb-cell.edit:hover .plus { opacity: 1; border-color: var(--gold); color: var(--gold); }

.sb-chip { display: block; width: 100%; min-height: 44px; text-align: left; font: inherit; color: var(--ink); border: none; border-left: 5px solid var(--c, #7a869a); border-radius: 6px; padding: 5px 8px 5px 9px; cursor: pointer; background: var(--bg, #eef1f3); line-height: 1.2; position: relative; }
.sb-chip + .sb-chip { margin-top: 3px; min-height: 36px; }
.sb-chip:hover { filter: brightness(.97); box-shadow: 0 1px 4px rgba(22,32,27,.12); }
.sb-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sb-chip .t { display: block; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.sb-chip .j { display: block; font-size: 12px; font-weight: 550; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sb-chip.draft { box-shadow: inset 0 0 0 1px var(--c, #7a869a); outline: 1px dashed var(--c, #7a869a); outline-offset: -1px; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 5px, transparent 5px 10px); }
.sb-chip.out { opacity: .5; }
.sb-chip.out .t { text-decoration: line-through; }
.sb-chip.open { border: 1.5px dashed var(--c, #b8863b); border-left: 1.5px dashed var(--c, #b8863b); background: var(--bg, #fffaf0); text-align: center; }
.sb-chip.open .t { color: var(--c); font-size: 13px; }
.sb-chip .flag { position: absolute; top: 4px; right: 5px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 800; text-align: center; line-height: 16px; padding: 0 4px; }
.sb-chip .flag.crit { background: var(--crit); }
.sb-dim .sb-chip:not(.has-flag) { opacity: .25; }

.sb-cat-band td { border-top: 1px solid var(--border-strong); }
.sb-cat td { background: #fbfcfb; height: 36px; }
.sb-cat td.who-cell { background: #fbfcfb; padding: 6px 14px; }
.sb-cat .cn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.sb-cat .cn i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.sb-cat td.cd { text-align: center; font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.sb-cat .none { color: var(--ink-3); font-weight: 400; }
.sb-grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); padding: 8px 10px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; border-top: 1px solid var(--border-strong); text-align: center; }
.sb-grid tfoot td.who-cell { z-index: 4; font-weight: 800; color: var(--ink); text-align: left; padding-left: 14px; }
.sb-grid tfoot td.tot { text-align: right; }
.sb-grid tfoot b { color: var(--ink); font-size: 13px; }

.sb-paste { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff8e6; border: 1px solid #f0d58a; border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; font-size: 13.5px; }
.sb-paste .grow { flex: 1; }
.sb-undo { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; background: #16201b; color: #fff; border-radius: 12px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: 14px; max-width: calc(100vw - 24px); }
.sb-undo button { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.sb-menu { position: fixed; z-index: 120; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 34px rgba(22,32,27,.18); padding: 6px; min-width: 260px; max-width: 330px; max-height: calc(100vh - 120px); overflow: auto; }
.sb-menu button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 11px; font: inherit; cursor: pointer; color: var(--ink); }
.sb-menu button:hover, .sb-menu button:focus { background: var(--surface-2); outline: none; }
.sb-menu button b { display: block; font-size: 13.5px; }
.sb-menu button span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 1px; }

/* the shift dialog */
.sb-form .who-line { font-size: 13.5px; color: var(--ink-2); margin: -4px 0 10px; }
.sb-times { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sb-times button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; font-weight: 650; min-height: 36px; }
.sb-times button.on { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-bright); }
.sb-times button small { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.sb-time-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; align-items: end; }
.sb-days { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-days button { min-width: 64px; min-height: 42px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1.2; }
.sb-days button b { display: block; font-size: 13.5px; }
.sb-days button.on { border-color: var(--gold); background: var(--gold); color: #fff; }
.sb-days button.bad { box-shadow: inset 0 -3px 0 var(--warn); }
.sb-warns .team-note { margin-bottom: 6px; }
.sb-len { font-size: 12.5px; color: var(--ink-2); margin: -2px 0 10px; }

/* the day timeline */
.sb-daytabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sb-daytabs button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 10px; padding: 6px 12px; font: inherit; cursor: pointer; min-height: 40px; font-size: 13px; }
.sb-daytabs button.on { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; }
.sb-tl { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow-x: auto; }
.sb-tl-in { min-width: 860px; }
.sb-tl-row { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--border); min-height: 40px; }
.sb-tl-row .l { padding: 8px 10px; font-size: 13px; font-weight: 700; border-right: 1px solid var(--border); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.sb-tl-row .l small { display: block; font-weight: 600; color: var(--ink-2); font-size: 11.5px; }
.sb-tl-row .r { position: relative; }
.sb-tl-head .r { height: 30px; }
.sb-tl-head .tick { position: absolute; top: 7px; font-size: 11px; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; }
.sb-tl-row .grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.sb-tl-band { background: var(--surface-2); }
.sb-tl-band .l { background: var(--surface-2); border-left: 4px solid var(--c, var(--ink-3)); }
.sb-bar { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; background: var(--bg); border: 1px solid var(--c); border-left-width: 4px; padding: 3px 8px; font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; color: var(--ink); text-align: left; font-family: inherit; }
.sb-bar.draft { border-style: dashed; border-left-style: solid; }
.sb-bar small { font-weight: 600; color: var(--ink-2); margin-left: 6px; }
.sb-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--crit); z-index: 2; }
@media (max-width: 760px) {
  .sb-frame { max-height: 72vh; border-radius: 12px; }
  .sb-grid { min-width: 860px; }
  .sb-grid col.who { width: 138px; }
  .sb-grid col.tot { width: 58px; }
  .sb-person .av { display: none; }
  .sb-title h1 { font-size: 26px; }
  .sb-title p { font-size: 14px; }
  .sb-si { padding: 7px 10px; font-size: 13px; border-right: none; }
  .sb-search { max-width: none; flex: 1 1 160px; }
  .sb-time-row { grid-template-columns: 1fr 1fr; }
  .sb-tl-row { grid-template-columns: 120px 1fr; }
}
@media print {
  .sb-frame { max-height: none; overflow: visible; }
}
.team-heat td.warm { background: #f6d9a0; }
.team-heat td.good { background: #b9e2cb; }
.team-heat td.cool { background: #cfdcf5; }
.team-heat td.none { background: var(--surface-2); color: var(--ink-3); }
/* reports */
.team-rating { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.team-rating .btn, .team-yesno .btn { min-height: 52px; justify-content: center; font-size: 15px; }
.team-yesno { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 8px; }
.team-q { margin-bottom: 18px; }
.team-q > label { display: block; font-weight: 650; font-size: 14px; margin-bottom: 6px; }
.team-q .hint { color: var(--ink-3); font-size: 12.5px; margin: -3px 0 6px; }
.team-q .req { color: var(--crit); margin-left: 3px; }
.team-answer { padding: 8px 0; border-top: 1px solid var(--border); }
.team-answer .q { font-size: 12px; color: var(--ink-3); font-weight: 650; }
.team-answer .a { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.team-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.team-facts > div { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; }
.team-facts b { display: block; font-size: 16px; }
.team-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* messages */
.team-chat { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 12px; align-items: start; }
.team-thread { display: flex; flex-direction: column; min-height: 380px; }
.team-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px 2px 8px; }
.team-msg { max-width: min(560px, 88%); align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.team-msg.mine { align-self: flex-end; background: var(--gold-wash); border-radius: 14px 14px 4px 14px; }
.team-msg.ann { max-width: 100%; align-self: stretch; background: #fffaf0; border: 1px solid #e3b75a; border-radius: 12px; }
.team-msg .who { font-size: 11.5px; color: var(--ink-3); font-weight: 650; margin-bottom: 2px; }
.team-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.team-msg img { max-width: 220px; max-height: 220px; border-radius: 9px; display: block; margin-top: 6px; cursor: pointer; }
.team-compose { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; }
.team-compose textarea { min-height: 64px; resize: vertical; }
@media (max-width: 760px) {
  .team-chat { grid-template-columns: minmax(0, 1fr); }
  .team-rating { grid-template-columns: repeat(2, 1fr); }
  .team-msgs { max-height: 55vh; }
}
/* the Time Clock kiosk: a store tablet at the bar or the cigar counter */
body.team-kiosk .bottomnav { display: none !important; }
body.team-kiosk .content { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(20px + env(safe-area-inset-bottom, 0px)); max-width: none; }
.team-kiosk-wrap { min-height: calc(100dvh - 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 28px; align-items: center; max-width: 1100px; margin: 0 auto; }
.team-kiosk-side { text-align: center; }
.team-kiosk-time { font-size: clamp(54px, 9vw, 96px); font-weight: 800; letter-spacing: -2px; font-variant-numeric: tabular-nums; line-height: 1; }
.team-kiosk-date { font-size: 20px; color: var(--ink-2); margin-top: 8px; }
.team-kiosk-store { font-family: var(--serif); font-size: 22px; margin-top: 18px; color: var(--gold-bright); }
.team-kiosk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.team-kiosk-card h2 { font-size: 22px; text-align: center; margin-bottom: 12px; }
.team-kiosk-card .pin-key { min-height: 72px; font-size: 28px; }
.team-kiosk-msg { font-size: 17px; text-align: center; color: var(--ink-2); margin: 6px 0 14px; line-height: 1.45; }
.team-kiosk-name { font-size: 30px; font-weight: 800; text-align: center; letter-spacing: -0.5px; overflow-wrap: anywhere; }
.team-kiosk-go { width: 100%; justify-content: center; min-height: 76px; font-size: 24px; border-radius: 16px; }
.team-kiosk-go.out { background: linear-gradient(180deg, #2f3b35, #16201b); border-color: #16201b; color: #fff; }
.team-kiosk-video { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 10px; background: var(--surface-3); transform: scaleX(-1); }
.team-kiosk-done { text-align: center; padding: 26px 8px; }
.team-kiosk-done .big { font-size: 34px; font-weight: 800; color: var(--ok); }
.team-kiosk-exit { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 60; min-height: 40px; }
.team-kiosk-tasks { background: var(--warn-wash); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 14.5px; }
.team-kiosk-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; justify-content: center; }
@media (max-width: 760px) {
  .team-kiosk-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-height: 0; padding-top: 44px; }
  .team-kiosk-time { font-size: 48px; }
  .team-kiosk-date { font-size: 16px; }
  .team-kiosk-store { margin-top: 6px; font-size: 18px; }
  .team-kiosk-card { padding: 16px; }
  .team-kiosk-card .pin-key { min-height: 62px; font-size: 24px; }
}

/* ── Command Center: every location at a glance (2026-09-26) ── */
.cc-band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.cc-kicker { font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-3); font-weight: 700; }
.cc-big { font-family: var(--serif); font-size: 38px; font-weight: 650; color: var(--ink); letter-spacing: -0.5px; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cc-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cc-range { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cc-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-dates .input { max-width: 160px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.cc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px 10px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cc-name { font-family: var(--serif); font-size: 19px; font-weight: 650; color: var(--ink); letter-spacing: .1px; line-height: 1.25; }
.cc-where { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cc-edit { background: none; border: none; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.cc-edit:hover { color: var(--ink); background: var(--surface-2); }
.cc-store-total { font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--gold-bright); margin-top: 12px; font-variant-numeric: tabular-nums; }
.cc-split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); margin: 12px 0 2px; }
.cc-split span.a, .cc-swatch.a { background: var(--gold); }
.cc-split span.b, .cc-swatch.b { background: #c8a45a; }
.cc-sides { margin-top: 10px; border-top: 1px solid var(--border); }
.cc-side { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); padding: 12px 2px; min-height: 52px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.cc-side:last-child { border-bottom: none; }
.cc-side:hover { background: var(--surface-2); }
.cc-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cc-side-name { flex: 1; font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.cc-side-num { font-weight: 750; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.cc-side-orders { min-width: 44px; text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cc-side-orders:not(:empty)::after { content: ' orders'; }
.cc-chev { color: var(--ink-3); font-size: 18px; line-height: 1; }
.cc-cam { font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; border: none; font: inherit; font-size: 11.5px; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; min-height: 28px; white-space: nowrap; }
.cc-cam:hover { color: var(--ink); background: var(--surface-3); }
.cc-cam.bad { color: #b53c38; background: var(--crit-wash); }
.cc-head-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Cameras v2 (2026-10-08): the owner's camera page and a location's door in ── */
.cam-grid { align-items: start; }
.cam-card { gap: 2px; padding-bottom: 16px; }
.cam-state { margin-top: 12px; }
.cam-state-title { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.cam-state-detail { font-size: 13px; margin-top: 3px; line-height: 1.45; }
.cam-checks { margin: 8px 0 0 18px; padding: 0; font-size: 12.5px; line-height: 1.45; }
.cam-checks li.crit b { color: #b53c38; }
.cam-checks li.warn b { color: #96660a; }
.cam-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cam-actions .btn { min-height: 44px; }
.cam-code-box { margin-top: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.cam-code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 34px; font-weight: 800; letter-spacing: 4px; color: var(--ink); margin: 4px 0 2px; }
.cam-cmd-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.cam-kind { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.cam-kind .btn { min-height: 40px; }
.cam-cmd { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; word-break: break-all; user-select: all; -webkit-user-select: all; color: var(--ink); }
.cam-steps { margin: 12px 0 0 20px; padding: 0; font-size: 13.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.cam-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cam-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.cam-section .cam-switch { margin-top: 0; padding-top: 0; border-top: none; }
.cam-label { font-weight: 700; font-size: 14px; color: var(--ink); }
.cam-small { font-size: 12.5px; line-height: 1.45; }
.cam-warn { color: #96660a; }
.cam-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cam-row .input { flex: 1; min-width: 150px; }
.cam-row .input.cam-money { flex: 0 0 110px; min-width: 0; }
.cam-meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.cam-meter span { display: block; height: 100%; background: var(--gold); }
.cam-meter span.warn { background: var(--warn); }
.cam-meter span.crit { background: var(--crit); }
.cam-nums { display: flex; flex-direction: column; gap: 6px; }
.cam-num { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cam-num:last-child { border-bottom: none; }
.cam-num-digits { flex: 1; min-width: 130px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cam-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cam-note.warn { color: #96660a; }
.cam-door { text-align: center; padding: 40px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cam-door-icon { color: var(--gold); }
.cam-door-title { font-family: var(--serif); margin: 4px 0 0; }
.cam-door-text { font-size: 14px; max-width: 460px; margin: 0 0 6px; line-height: 1.5; }
.cam-door-btn { width: 100%; max-width: 420px; min-height: 52px; justify-content: center; font-size: 15.5px; }
.cam-door-foot { margin-top: 6px; font-size: 12.5px; }
@media (max-width: 640px) {
  .cam-code { font-size: 28px; letter-spacing: 3px; }
  .cam-cmd-row { flex-direction: column; }
  .cam-actions .btn { flex: 1 1 100%; justify-content: center; }
}
.cc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cc-dot.ok { background: var(--ok); }
.cc-dot.wait { background: var(--warn); }
.cc-dot.bad { background: var(--crit); cursor: pointer; }
.cc-dot.off { background: var(--border); }
@media (max-width: 640px) {
  .cc-band { padding: 16px; }
  .cc-big { font-size: 30px; }
  .cc-range { align-items: stretch; width: 100%; }
  /* the five date choices share the width evenly, never running off the edge of a phone */
  .cc-range .seg { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
  .cc-range .seg button { padding: 10px 0; font-size: 12px; white-space: nowrap; }
  .cc-grid { grid-template-columns: 1fr; }
}

/* ── Dashboards in the Command Center's look (2026-09-26) ── */
.cc-change { font-weight: 700; white-space: nowrap; }
.cc-change.up { color: var(--ok); }
.cc-change.down { color: var(--crit); }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; min-height: 46px; border-bottom: 1px solid var(--border); border-radius: 8px; }
.dash-row:last-child { border-bottom: none; }
.dash-row[style*="pointer"]:hover { background: var(--surface-2); }
.dash-name { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-fig { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dash-fig .muted { font-size: 12px; }
.dash-money { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 32px; }
.dash-cols .dash-row:last-child { border-bottom: 1px solid var(--border); }

/* ─── Scan Invoice (2026-09-30): take the invoice, read it, check every line against the order ─── */
.inv-hero-head { display: flex; align-items: center; gap: 12px; }
.inv-hero-head h2 { font-family: var(--serif); font-weight: 600; }
.inv-hero-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--gold-wash); color: var(--gold); flex: 0 0 auto; }
.inv-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.inv-big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 18px; border-radius: 16px; border: 1.5px dashed var(--border-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit; }
.inv-big b { font-size: 16px; }
.inv-big span { color: var(--ink-2); font-size: 13px; }
.inv-big.primary { border: 1.5px solid var(--gold); background: var(--gold-wash); color: var(--gold-bright); }
.inv-big:disabled { opacity: .5; cursor: not-allowed; }
.inv-big:focus-visible, .inv-row:focus-visible { outline: none; box-shadow: var(--ring); }
.inv-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-width: 560px; }
.inv-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); padding: 0; font: inherit; color: var(--ink-2); }
.inv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-file { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; font-weight: 700; }
.inv-pno { position: absolute; left: 6px; bottom: 6px; background: rgba(22,32,27,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.inv-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(22,32,27,.72); color: #fff; font-size: 18px; line-height: 30px; cursor: pointer; }
.inv-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; cursor: pointer; font-weight: 600; }
.inv-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; margin: 0 0 12px; font-size: 13.5px; }
.inv-note.warn { background: var(--warn-wash); border: 1px solid rgba(185,126,11,.25); color: var(--ink); }
.inv-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: var(--ink); cursor: pointer; }
.inv-row:hover { background: var(--surface-2); }
.inv-head .inv-vendor { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.inv-problems { margin-top: 10px; font-size: 13px; }
.inv-problems summary { cursor: pointer; font-weight: 600; color: #96660a; }
.inv-problems ul { margin: 6px 0 0 18px; padding: 0; }
.inv-reading { position: relative; overflow: hidden; text-align: center; padding: 28px 18px; }
.inv-scanline { height: 4px; border-radius: 4px; margin: 0 auto 18px; max-width: 280px; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: inv-sweep 1.4s ease-in-out infinite; }
@keyframes inv-sweep { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .inv-scanline { animation: none; background-position: 50% 0; } }
.inv-fail { border-color: rgba(214,69,64,.35); background: var(--crit-wash); }
.inv-po { display: flex; align-items: center; gap: 12px; }
.inv-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 0 0 14px; }
.inv-count { border-radius: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; }
.inv-count b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.inv-count span { font-size: 12.5px; color: var(--ink-2); }
.inv-count.ok b { color: var(--ok); } .inv-count.crit b { color: var(--crit); } .inv-count.warn b { color: var(--warn); } .inv-count.blue b { color: #2458c9; }
.inv-section { margin: 0 0 16px; }
.inv-section > h3, .inv-section > summary { font-size: 15px; margin: 4px 0 10px; cursor: default; }
.inv-section > summary { cursor: pointer; }
.inv-line { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.inv-line.short, .inv-line.missing { border-left: 4px solid var(--crit); }
.inv-line.price, .inv-line.more { border-left: 4px solid var(--warn); }
.inv-line.extra { border-left: 4px solid #2563eb; }
.inv-line.extra.tied { border-left-color: var(--ok); }
.inv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.inv-fields label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.inv-fields .input { min-height: 44px; font-variant-numeric: tabular-nums; }
.inv-val { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.inv-was { font-size: 12px; color: #96660a; margin-top: 3px; }
.inv-foot { position: sticky; bottom: 8px; z-index: 5; box-shadow: var(--shadow); }
.inv-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; }
.inv-total b { font-size: 18px; font-variant-numeric: tabular-nums; }
.inv-done { text-align: center; padding: 26px 18px; }
.inv-done-ic { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--ok-wash); color: var(--ok); }
.inv-pages { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.inv-pages img { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
@media (max-width: 700px) { .inv-foot { position: static; box-shadow: none; } }   /* on a phone the button sits after the lines instead of covering them */

/* ─── Register → Menu (2026-10-04): everything a side sells, made and changed in the office ─── */
.menu-head { display: flex; gap: 12px 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.menu-tools { display: flex; gap: 8px; align-items: center; margin: 14px 0 10px; }
.menu-tools .input { flex: 1; min-width: 0; }
.menu-group + .menu-group { margin-top: 18px; }
.menu-group-h { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 0 4px 8px; border-bottom: 1px solid var(--border); }
.menu-group-h b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.menu-group-h .muted { font-size: 12.5px; }
.menu-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 10px; }
.menu-row:last-child { border-bottom: none; }
.menu-row:hover, .menu-row:focus-visible { background: var(--surface-2); outline: none; }
.menu-row:focus-visible { box-shadow: var(--ring); }
.menu-main { flex: 1; min-width: 0; }
.menu-name { font-weight: 650; font-size: 14.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.menu-meta { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 2px 14px; flex-wrap: wrap; margin-top: 3px; overflow-wrap: anywhere; }
.menu-pour.warn { color: #96660a; font-weight: 650; }
.menu-pour.crit { color: #b53c38; font-weight: 650; }
.menu-pour.dim { color: var(--ink-3); }
.menu-price { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-sub { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: -2px 0 14px; }
.menu-sec { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 16px; }
.menu-sec h4 { margin: 0 0 4px; font-size: 15px; font-family: var(--serif); font-weight: 600; }
.menu-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.menu-line .combo-input { flex: 1; min-width: 0; }
.menu-line .oz { width: 84px; flex: none; }
.menu-line .btn { flex: none; }
/* a menu row's own buttons (2026-10-17): Up, Down and 86, which never open the row */
.menu-acts { display: flex; gap: 4px; align-items: center; flex: none; }
.menu-acts .btn { min-height: 36px; padding: 6px 10px; }
/* a category's colour on the register: ten swatches and none */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swatch { width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; background: var(--surface); }
.swatch.none { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 4px, var(--surface-2) 4px, var(--surface-2) 8px); }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.swatch:disabled { cursor: default; opacity: .7; }
/* a tick box with its words inside a .field (whose own labels are the small captions) */
.field label.tick-inline, label.tick-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink); margin: 0; letter-spacing: 0; cursor: pointer; }
/* a list of things to tick (the drinks that take the call choices) */
.tick-list { display: flex; flex-direction: column; max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 4px 10px; }
.tick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 44px; border-bottom: 1px solid var(--border); cursor: pointer; }
.tick-row:last-child { border-bottom: none; }
.tick-row .muted { font-size: 12.5px; }
@media (max-width: 640px) {
  .menu-long { display: none; }
  .menu-head .btn.lg { width: 100%; justify-content: center; }
  .menu-row { padding: 10px 4px; gap: 10px; flex-wrap: wrap; }
  .menu-acts { width: 100%; justify-content: flex-end; }
  .menu-line { flex-wrap: wrap; }
  .menu-line .combo-input { flex-basis: 100%; }
}

/* The Members section (2026-10-06): a person row that opens their profile, the profile's tabs and timeline */
.mo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 7px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; border-radius: 8px; font: inherit; color: inherit; }
.mo-row:hover { background: var(--surface-2); }
/* Members overview: paid in full and monthly (2026-10-26) */
.dues-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 22px; padding: 13px 16px; margin: 12px 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }
.dues-fig .ss-label { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.dues-fig .ss-value { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.dues-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.35; }
.dues-wait { background: var(--warn-wash); border: 1px solid rgba(185,126,11,.22); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.6; margin: 0 0 6px; }
.dues-list .hub-person .t b { white-space: normal; }   /* a name is never cut off beside its badge on a phone */
.dues-list .badge { flex-shrink: 0; }
.dues-pick { font: inherit; font-weight: 600; padding: 3px 6px; min-height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.mo-row:last-child { border-bottom: 0; }
.mo-bar { height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.mo-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--ok, #107a4f); }
.mo-tl { list-style: none; margin: 0; padding: 0; }
.mo-tl li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.mo-tl li:last-child { border-bottom: 0; }
.mo-tl .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-2); }
.mo-tl .ok .ico { background: color-mix(in srgb, #107a4f 14%, transparent); color: #107a4f; }
.mo-tl .warn .ico { background: color-mix(in srgb, #b97e0b 16%, transparent); color: #8a5d05; }
.mo-tl .t { flex: 1; min-width: 0; font-size: 14px; }
.mo-tl .when { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.mo-perks { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.mo-perks li { margin: 2px 0; }
.mo-row .hub-person .t span { white-space: normal; }   /* why someone left, who invited a guest: never cut off */
/* Marketing, Send a message (2026-10-06): how many a choice holds, and who the message reaches */
.mk-n { margin-left: 6px; font-size: 11px; font-weight: 700; opacity: .7; }
.mk-reach { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 4px; }

/* ─── Transfers between stores (2026-10-08, transfers.js): the list, send / ask, count in, the Clover by hand ─── */
.tr-tabs { margin: 2px 0 12px; }
.tr-stepsbox:not(:empty) { margin-bottom: 14px; }
.tr-list { padding: 6px 16px; }
.tr-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; width: 100%; min-height: 64px; padding: 12px 6px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.tr-row:first-child { border-top: 0; }
.tr-row:hover { background: var(--surface-2); }
.tr-no { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 76px; color: var(--gold-bright); }
.tr-main { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-main b { font-size: 14.5px; overflow-wrap: anywhere; }
.tr-route { display: inline-flex; align-items: center; gap: 6px; }
.tr-sub { display: block; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.tr-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-warn { display: block; font-size: 12.5px; font-weight: 650; color: #96660a; }
.tr-badge { font-size: 13px; padding: 5px 12px; }
.tr-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-store { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 54px; min-width: 150px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tr-store b { font-size: 15px; }
.tr-store small { font-size: 11.5px; color: var(--ink-3); }
.tr-store:hover { border-color: var(--gold-dim); }
.tr-store.on { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-bright); box-shadow: var(--ring); }
.tr-scanrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.tr-scanrow .scan-input { flex: 1 1 260px; min-width: 0; }
.tr-results { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.tr-result { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tr-result:hover { border-color: var(--gold-dim); background: var(--surface); }
.tr-line { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border); }
.tr-line:first-child { border-top: 0; }
.tr-line.short { background: var(--warn-wash); border-radius: 10px; padding: 12px 10px; }
.tr-pick { align-self: flex-start; margin-top: 4px; padding-left: 0; }
.tr-qty { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tr-qty .btn { min-width: 46px; min-height: 46px; padding: 0; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; }
.tr-qty-n { min-width: 62px; min-height: 46px; padding: 0 8px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
.tr-qty-n:hover { border-color: var(--gold); }
.tr-x { min-width: 46px; min-height: 46px; font-size: 22px; justify-content: center; }
.tr-cost { font-variant-numeric: tabular-nums; font-weight: 650; min-width: 80px; text-align: right; }
.tr-total { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-2); font-weight: 600; }
.tr-total:empty { display: none; }
.tr-empty { padding: 10px 2px; font-size: 13px; }
.tr-big { width: 100%; justify-content: center; min-height: 54px; font-size: 16px; margin: 4px 0 16px; }
.tr-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.tr-step { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--border-strong); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.tr-step.on { border-top-color: var(--gold); }
.tr-step.off { border-top-color: var(--crit); }
.tr-step small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 750; color: var(--ink-3); }
.tr-step b { display: block; font-size: 14px; }
.tr-step span { display: block; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.tr-note small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 750; color: var(--ink-3); margin-bottom: 4px; }
.tr-clover { border-color: rgba(185,126,11,.45); background: var(--warn-wash); }
.tr-check { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(185,126,11,.25); }
.tr-check .btn { min-height: 44px; }
.tr-check.done b { text-decoration: line-through; color: var(--ink-3); }
.tr-check.void { opacity: .55; }
.tr-acts { margin: 0 0 16px; }
.tr-acts .btn { min-height: 46px; }
.tr-log > div { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.tr-log > div:last-child { border-bottom: 0; }
@media (max-width: 600px) {
  .tr-list { padding: 4px 10px; }
  .tr-line { gap: 10px; }
  .tr-line .tr-main { flex-basis: 100%; }
  .tr-store { flex: 1 1 100%; }
  .tr-log > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── Repairs (2026-10-08) ─── problems reported with a photo, and the regular service (repairs.js) */
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.rp-grid > .card { margin: 0; }
.rp-card { display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--border-strong); }
.rp-card.urgent, .rp-svc.overdue, .rp-svc.due { border-left-color: var(--crit); }
.rp-card.soon, .rp-svc.soon { border-left-color: var(--warn); }
.rp-card.when_possible { border-left-color: var(--ink-3); }
.rp-card.closed { border-left-color: var(--ok); }
.rp-svc.ok { border-left-color: var(--ok); }
.rp-open { display: flex; gap: 14px; align-items: flex-start; width: 100%; min-height: 64px; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.rp-open:focus-visible { box-shadow: var(--ring); border-radius: 10px; }
.rp-pic { width: 76px; height: 76px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--surface-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
.rp-pic img { width: 100%; height: 100%; object-fit: cover; }
.rp-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rp-title { font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rp-meta { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.rp-meta .badge { margin-left: 0; }
.rp-who { margin-top: 2px; }
.rp-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; font-size: 13.5px; }
.rp-badges .badge { margin-left: 0; }
.rp-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rp-photos .team-thumb { width: 132px; height: 132px; border-radius: 12px; }
.rp-facts { margin-bottom: 8px; }
.rp-fact { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: baseline; font-size: 13.5px; }
.rp-fact:last-child { border-bottom: 0; }
.rp-fact small { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.rp-details { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 6px 0 10px; }
.rp-sec { margin-top: 12px; }
.rp-actions { margin: 14px 0 6px; }
.rp-actions .btn { min-height: 42px; }
.rp-thread { list-style: none; margin: 0; padding: 0; }
.rp-thread li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.rp-thread li:last-child { border-bottom: 0; }
.rp-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--surface-3); color: var(--ink-2); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.rp-av.ok { background: var(--ok-wash); color: var(--ok); }
.rp-t { flex: 1; min-width: 0; font-size: 13.5px; }
.rp-what { color: var(--gold-bright); font-weight: 650; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.rp-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
@media (max-width: 560px) {
  .rp-grid { grid-template-columns: 1fr; }
  .rp-pic { width: 64px; height: 64px; }
  .rp-fact { grid-template-columns: 1fr; gap: 2px; }
  .rp-photos .team-thumb { width: 104px; height: 104px; }
  .rp-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ─── Hiring and leaving (2026-10-08) ─── */
/* Team → People: Hire someone (five steps on one page), a person's onboarding, paperwork and keys, the leaving
   checklist, the key register and the training checklist (pages/team/hire.js). Phone first: big ticks, buttons that
   fill the width on a phone, nothing wider than the screen. */
.hl-steps { max-width: 880px; }
.hl-step { transition: opacity .15s; }
.hl-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.team-hub .hl-step-h h3, .hl-step-h h3 { margin: 0; font-size: 16px; }
.hl-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-weight: 800; font-size: 14px; flex-shrink: 0; }
.hl-step.done .hl-num { background: var(--ok); color: #fff; }
.hl-step.off { opacity: .5; }
.hl-step.off .hl-step-b { pointer-events: none; }
.hl-sum { font-size: 14px; color: var(--ink-2); }
.hl-sum b { display: block; font-size: 16px; color: var(--ink); }
.hl-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.hl-go { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 2px 0 16px; }
.hl-go .btn { min-height: 48px; }
.hl-go .team-note { flex: 1 1 100%; margin-bottom: 0; }
.hl-p { font-size: 13px; margin: 2px 0 8px; }
.hl-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.team-hub .hl-card-h h3, .hl-card-h h3 { margin: 0; }
.hl-bar { height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin: 6px 0 4px; }
.hl-bar > i { display: block; height: 100%; border-radius: 6px; background: var(--ok); transition: width .25s; }
.hl-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.hl-item:first-child { border-top: 0; }
.hl-item-t { flex: 1; min-width: 0; }
.hl-item-t b { display: block; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.hl-item-t span { display: block; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.hl-item.done .hl-item-t b { color: var(--ink-2); }
.hl-item .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-tick { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: transparent; cursor: pointer; flex-shrink: 0; padding: 0; }
.hl-tick:not(.ro):hover { border-color: var(--ok); color: var(--ok); }
.hl-tick.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.hl-tick.on:not(.ro):hover { color: #fff; filter: brightness(.95); }
.hl-tick.ro { width: 26px; height: 26px; border-width: 1.5px; cursor: default; }
.hl-tick:disabled { opacity: .6; cursor: progress; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hl-chips:empty { display: none; }
.hl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 650; color: var(--ink); }
.hl-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); font-size: 19px; line-height: 1; cursor: pointer; }
.hl-x:hover { background: var(--surface-3); color: var(--ink); }
.hl-pages { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 10px 0; }
.hl-page { display: block; max-width: 100%; max-height: 75vh; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.hl-look { font-size: 13px; color: var(--ink-2); padding: 5px 0; border-top: 1px solid var(--border); }
.hl-ul { margin: 0 0 4px 20px; padding: 0; font-size: 14px; }
.hl-ul li { margin: 5px 0; }
.hl-add { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(150px, 1fr) minmax(110px, auto) auto; gap: 0 10px; align-items: end; }
.hl-add > .btn { margin-bottom: 12px; min-height: 42px; }
@media (max-width: 640px) {
  .hl-go .btn { flex: 1 1 100%; justify-content: center; }
  .hl-add { grid-template-columns: 1fr; }
  .hl-add > .btn { width: 100%; justify-content: center; }
  .hl-item { flex-wrap: wrap; }
  .hl-item .acts { flex-basis: 100%; padding-left: 38px; }
}

/* ─── The Label builder (2026-10-16): saved templates, the designer, printing, label printers ─── */
.lb-filters { gap: 8px; margin-bottom: 14px; }
.lb-chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; }
.lb-chip:hover { border-color: var(--gold-dim); color: var(--ink); }
.lb-chip.on { background: var(--gold-wash); border-color: rgba(16,122,79,.35); color: var(--gold-bright); }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.lb-grid > .card { margin: 0; }
.lb-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; }
.lb-thumb-wrap { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; border: 1px solid var(--border); border-radius: 12px; height: 170px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.lb-thumb { max-width: 92%; max-height: 150px; box-shadow: 0 6px 18px rgba(22,32,27,.18); border-radius: 3px; background: #fff; }
.lb-card-name { font-family: var(--serif); font-size: 18px; font-weight: 650; color: var(--ink); line-height: 1.2; }
.lb-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-card-by { font-size: 12px; color: var(--ink-3); }
.lb-card-acts .btn.sm { min-height: 34px; }
/* folders on saved designs (2026-10-17): a chip each with its count, a heading each under All, the pick list */
.lb-folders { margin-bottom: 8px; }
.lb-fchip { display: inline-flex; align-items: center; gap: 6px; }
.lb-fchip .lb-count { font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.lb-fchip.on .lb-count { color: var(--gold-bright); background: rgba(16,122,79,.12); }
.lb-fnew { border-style: dashed; color: var(--ink-3); }
.lb-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 8px 2px; margin-top: 4px; cursor: pointer; color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 650; text-align: left; }
.lb-group:hover { color: var(--gold-bright); }
.lb-group .lb-count { font-family: var(--sans, inherit); font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.lb-folder-btn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pick-list { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.lb-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; min-height: 44px; font-size: 14px; }
.lb-pick-row:last-child { border-bottom: 0; }
.lb-pick-row input { width: 18px; height: 18px; flex-shrink: 0; }
.lb-pick-row em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lb-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lb-size { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: center; min-height: 170px; }
.lb-size:hover { border-color: var(--gold); background: var(--gold-wash); }
.lb-size b { font-size: 16px; }
.lb-size span { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.lb-size-shape { border: 2px solid var(--ink-2); border-radius: 4px; background: #fff; margin-bottom: 6px; }
.lb-size-shape.s-shelf { width: 90px; height: 50px; }
.lb-size-shape.s-4x6 { width: 54px; height: 80px; }
.lb-size-shape.s-band { width: 48px; height: 24px; }
@media (max-width: 640px) { .lb-sizes { grid-template-columns: 1fr; } .lb-size { min-height: 0; flex-direction: row; text-align: left; } .lb-size-shape { margin: 0 6px 0 0; flex-shrink: 0; } }

.lb-designer { display: flex; flex-direction: column; gap: 12px; }
.lb-bar { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.lb-bar-main, .lb-bar-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-bar-tools { border-top: 1px solid var(--border); padding-top: 8px; }
.lb-bar .lb-name { max-width: 340px; font-weight: 650; font-size: 15px; }
.lb-card-acts { align-items: center; }
.lb-card-acts .lb-use-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
.lb-bar .lb-grid-size { width: auto; padding: 6px 8px; }
.lb-starter { font-size: 13px; color: var(--gold-bright); background: var(--gold-wash); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 6px; }
.lb-cols { display: grid; grid-template-columns: 132px minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.lb-palette { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px; position: sticky; top: 12px; }
.lb-pal-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-3); font-weight: 700; padding: 2px 4px 4px; }
.lb-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-2); font-size: 12px; font-weight: 600; min-height: 60px; text-align: center; line-height: 1.2; }
.lb-tool:hover { background: var(--gold-wash); color: var(--gold-bright); border-color: rgba(16,122,79,.2); }
.lb-center { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lb-stage { background: repeating-conic-gradient(#e7ebe9 0 25%, #f1f4f2 0 50%) 0 0 / 18px 18px; border: 1px solid var(--border); border-radius: 16px; padding: 24px 14px; display: flex; justify-content: center; align-items: center; overflow: auto; min-height: 280px; }
.lb-paper { position: relative; flex-shrink: 0; box-shadow: 0 10px 30px rgba(22,32,27,.22), 0 1px 3px rgba(22,32,27,.2); border-radius: 4px; background: #fff; }
.lb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; }
.lb-overlay { position: absolute; inset: 0; touch-action: none; cursor: default; outline: none; border-radius: 4px; }
.lb-safe { position: absolute; border: 1px dashed rgba(16,122,79,.45); pointer-events: none; }
.lb-guide { position: absolute; pointer-events: none; background: #d64540; }
.lb-guide.v { top: 0; bottom: 0; width: 1px; }
.lb-guide.h { left: 0; right: 0; height: 1px; }
.lb-flag { position: absolute; outline: 2px dashed rgba(214,69,64,.75); pointer-events: none; border-radius: 2px; }
.lb-sel { position: absolute; outline: 2px solid #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); pointer-events: none; }
.lb-sel.locked { outline-color: #b97e0b; box-shadow: 0 0 0 4px rgba(185,126,11,.15); }
.lb-handle { position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid #2563eb; border-radius: 4px; pointer-events: auto; touch-action: none; }
.lb-handle.h-nw { left: -9px; top: -9px; cursor: nwse-resize; } .lb-handle.h-ne { right: -9px; top: -9px; cursor: nesw-resize; }
.lb-handle.h-se { right: -9px; bottom: -9px; cursor: nwse-resize; } .lb-handle.h-sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.lb-handle.h-n { left: calc(50% - 8px); top: -9px; cursor: ns-resize; } .lb-handle.h-s { left: calc(50% - 8px); bottom: -9px; cursor: ns-resize; }
.lb-handle.h-e { right: -9px; top: calc(50% - 8px); cursor: ew-resize; } .lb-handle.h-w { left: -9px; top: calc(50% - 8px); cursor: ew-resize; }
@media (pointer: coarse) {
  .lb-handle { width: 24px; height: 24px; }
  .lb-handle.h-nw, .lb-handle.h-sw, .lb-handle.h-w { left: -13px; } .lb-handle.h-ne, .lb-handle.h-se, .lb-handle.h-e { right: -13px; }
  .lb-handle.h-nw, .lb-handle.h-ne, .lb-handle.h-n { top: -13px; } .lb-handle.h-sw, .lb-handle.h-se, .lb-handle.h-s { bottom: -13px; }
  .lb-handle.h-n, .lb-handle.h-s { left: calc(50% - 12px); } .lb-handle.h-e, .lb-handle.h-w { top: calc(50% - 12px); }
}
.lb-sample { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.lb-warnings { display: flex; flex-direction: column; gap: 6px; }
.lb-ok { font-size: 13px; color: #0e7a4b; display: flex; align-items: center; gap: 6px; }
.lb-warn { text-align: left; background: var(--crit-wash); border: 1px solid rgba(214,69,64,.25); color: #9b302c; border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.4; cursor: pointer; display: flex; gap: 6px; align-items: flex-start; }
.lb-warn.small { cursor: default; font-size: 12.5px; padding: 6px 9px; margin: 4px 0; }
.lb-inspector { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.lb-insp-empty b { display: block; font-size: 15px; margin-bottom: 6px; }
.lb-insp-empty p { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 0 8px; }
.lb-insp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.lb-insp-head b { font-family: var(--serif); font-size: 18px; }
.lb-sec { border-top: 1px solid var(--border); padding: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.lb-sec-t { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-3); font-weight: 700; }
.lb-hint { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lb-chips .lb-chip { padding: 4px 10px; min-height: 30px; font-size: 12px; }
.lb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-slider { display: grid; grid-template-columns: 96px 1fr 68px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.lb-slider input[type=range] { width: 100%; accent-color: var(--gold); min-height: 28px; }
.lb-slider em { font-style: normal; font-size: 12px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.lb-num { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.lb-num .input { padding: 7px 8px; }
.lb-num em { display: none; }
.lb-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lb-check { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 36px; }
.lb-check .box { width: 18px; height: 18px; border: 1.6px solid var(--border-strong); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.lb-check.on { border-color: rgba(16,122,79,.4); color: var(--gold-bright); background: var(--gold-wash); }
.lb-check.on .box { background: var(--gold); border-color: var(--gold); }
.lb-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.lb-field-grid .btn { justify-content: center; min-height: 44px; }
.lb-results { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; margin-top: 8px; }
.lb-result { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 9px 11px; cursor: pointer; min-height: 48px; align-items: center; }
.lb-result b { font-size: 14px; } .lb-result span { grid-column: 1; font-size: 12px; color: var(--ink-3); }
.lb-result .i { grid-row: 1 / span 2; grid-column: 2; color: var(--gold); }
.lb-result:hover { border-color: var(--gold-dim); background: var(--gold-wash); }
.lb-img-dlg { display: flex; flex-direction: column; gap: 10px; }
.lb-img-stage { background: repeating-conic-gradient(#e7ebe9 0 25%, #f1f4f2 0 50%) 0 0 / 14px 14px; border-radius: 12px; padding: 14px; display: flex; justify-content: center; max-height: 340px; overflow: auto; }
.lb-img-prev { max-width: 100%; height: auto; image-rendering: pixelated; background: #fff; box-shadow: 0 4px 14px rgba(22,32,27,.2); }

.lb-use { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.lb-use-left { position: sticky; top: 12px; }
.lb-use-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lb-use-right > .card { margin: 0; }
.lb-use-preview { background: repeating-conic-gradient(#e7ebe9 0 25%, #f1f4f2 0 50%) 0 0 / 18px 18px; border-radius: 12px; padding: 22px; display: flex; justify-content: center; margin-bottom: 10px; }
.lb-use-canvas { max-width: 100%; height: auto; max-height: 62vh; background: #fff; box-shadow: 0 10px 30px rgba(22,32,27,.22); border-radius: 3px; }
.lb-use-preview.size-4x6 .lb-use-canvas { max-height: 70vh; }
.lb-rows { display: flex; flex-direction: column; gap: 8px; }
.lb-rowi { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 8px; cursor: pointer; background: var(--surface); }
.lb-rowi.on { border-color: var(--gold); box-shadow: var(--ring); }
.lb-row-thumb { width: 96px; max-height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.lb-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-row-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row-main span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stepper { display: flex; align-items: center; gap: 4px; }
.lb-stepper .btn { min-width: 36px; min-height: 36px; justify-content: center; }
.lb-qty { width: 58px; text-align: center; padding: 7px 4px; }
.lb-typed { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 10px; }
.lb-printer-note { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.lb-media { display: flex; gap: 6px; align-items: flex-start; background: var(--warn-wash); color: #7a5208; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
.lb-print { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }
@media (max-width: 1180px) {
  .lb-cols { grid-template-columns: 112px minmax(0, 1fr); }
  .lb-inspector { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 900px) {
  .lb-cols { grid-template-columns: 1fr; }
  .lb-palette { position: static; flex-direction: row; overflow-x: auto; }
  .lb-pal-title { display: none; }
  .lb-tool { min-width: 84px; }
  .lb-use { grid-template-columns: 1fr; }
  .lb-use-left { position: static; }
  .lb-bar .lb-name { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 500px) {
  .lb-rowi { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .lb-row-thumb { width: 64px; }
  .lb-rowi .lb-stepper { grid-column: 2 / span 2; justify-content: flex-end; }
  .lb-nums { grid-template-columns: repeat(2, 1fr); }
  .lb-slider { grid-template-columns: 80px 1fr 60px; }
}

/* the label printers list */
.lp-list { display: flex; flex-direction: column; gap: 8px; }
.lp-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.lp-ico { color: var(--gold); padding-top: 2px; }
.lp-name { font-weight: 700; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lp-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.lp-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lp-details { margin-top: 6px; font-size: 12.5px; }
.lp-details summary { cursor: pointer; color: var(--gold-bright); font-weight: 600; }
.lp-addr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.lp-steps { margin: 6px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 640px) { .lp-row { grid-template-columns: 30px minmax(0, 1fr); } .lp-acts { grid-column: 1 / -1; justify-content: flex-start; } }
/* the print page: how the label is drawn, labels sent through a register (2026-10-16) */
.lb-mode { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lb-relay { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.lb-relay:empty { display: none; }
.lb-relay-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.lb-relay-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-relay-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-relay-main span { font-size: 12px; color: var(--ink-2); }
.lb-relay-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.lb-relay-row.s-claimed .lb-relay-dot { background: #2563eb; }
.lb-relay-row.s-printed .lb-relay-dot { background: var(--ok); }
.lb-relay-row.s-failed { border-color: rgba(214,69,64,.35); background: var(--crit-wash); }
.lb-relay-row.s-failed .lb-relay-dot { background: var(--crit); }
/* The lounge's message board (Vestaboard) drawn as it looks: 6 rows of 22 black flaps, letters in off-white,
   colour tiles as themselves. Black in both themes: it is a picture of the board on the wall (2026-10-16). */
.vb { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 2px; background: #0b0b0b; padding: 8px; border-radius: 10px;
  max-width: 660px; width: 100%; box-sizing: border-box; container-type: inline-size; box-shadow: inset 0 0 0 1px #262626; }
.vb-c { aspect-ratio: 5 / 7; background: #1b1b1b; color: #f3f0e8; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 600; font-size: 10px; font-size: 3.1cqw; line-height: 1; border-radius: 2px; overflow: hidden;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.vb.sm { max-width: 330px; padding: 4px; gap: 1px; border-radius: 6px; }
.vb.sm .vb-c { border-radius: 1px; }
.vb-live { margin-top: 4px; }
.vb-list { display: flex; flex-direction: column; gap: 10px; }
.vb-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.vb-row:first-child { border-top: 0; }
.vb-row .vb { flex: 1 1 240px; }
.vb-row-main { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.vb-lib { padding: 10px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.vb-lib.off .vb-lib-words { opacity: .55; }
.vb-lib-words { all: unset; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--ink); }
.vb-lib-words b { font-weight: 600; }

/* ═══ The member packet on the tablet (2026-10-21, pages/member-packet.js) ═══
   A member at orientation, not staff at work: an ivory ground, white cards, serif titles, one quiet gold, 18-20 px
   words and tap targets of 56 px and up. Full screen (kc-full), the footer with Back and the next step always in reach. */
body.mp-kiosk { background: #f6f3ec; }
body.mp-kiosk .bottomnav { display: none !important; }
body.mp-kiosk .content { padding: 0; max-width: none; }
.mp { --mp-ink: #1d1915; --mp-ink-2: #5f564c; --mp-ink-3: #8c8378; --mp-line: #e6dfd2; --mp-edge: #d9d0c1; --mp-gold: #9a7330; --mp-gold-wash: rgba(154, 115, 48, 0.11); --mp-bad: #b3261e;
  min-height: 100dvh; display: flex; flex-direction: column; background: #f6f3ec; color: var(--mp-ink); font-size: 18px; line-height: 1.55; }
.mp-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) 28px 12px; }
.mp-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 19px; letter-spacing: 0.02em; min-width: 0; }
.mp-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-crown { color: var(--mp-gold); display: inline-flex; }
.mp-where { text-align: center; font-size: 12.5px; color: var(--mp-ink-3); text-transform: uppercase; letter-spacing: 0.14em; }
.mp-where b { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--mp-ink); font-weight: 600; }
.mp-staff { justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mp-line); background: rgba(255, 255, 255, 0.7); color: var(--mp-ink-2); font: 600 13.5px var(--font); cursor: pointer; }
.mp-bar { height: 3px; background: var(--mp-line); margin: 0 28px; border-radius: 3px; overflow: hidden; }
.mp-bar i { display: block; height: 100%; background: var(--mp-gold); transition: width 0.35s ease; }
.mp-main { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: 26px 28px 150px; }
.mp-head h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px; }
.mp-head p { color: var(--mp-ink-2); margin: 0 0 20px; font-size: 18px; }
.mp-card { background: #fff; border: 1px solid var(--mp-line); border-radius: 16px; padding: 22px 24px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(29, 25, 21, 0.04); }
.mp-card h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 0 0 12px; }
.mp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mp-card-head h2 { margin: 0; }
.mp-field { display: block; margin-bottom: 14px; }
.mp-label { display: block; font-size: 14px; font-weight: 600; color: var(--mp-ink-2); margin-bottom: 6px; letter-spacing: 0.01em; }
.mp-input { width: 100%; min-height: 58px; padding: 0 16px; border: 1px solid var(--mp-edge); border-radius: 12px; background: #fff; font: 400 19px var(--font); color: var(--mp-ink); outline: none; -webkit-appearance: none; appearance: none; }
.mp-input:focus { border-color: var(--mp-gold); box-shadow: 0 0 0 3px var(--mp-gold-wash); }
textarea.mp-input { padding: 14px 16px; min-height: 104px; line-height: 1.45; resize: vertical; }
.mp-short { max-width: 170px; }
.mp-hint { display: block; font-size: 14.5px; color: var(--mp-ink-3); margin-top: 6px; min-height: 0; }
.mp-hint.bad, .mp-warn { color: var(--mp-bad); }
.mp-sub { color: var(--mp-ink-2); margin: 0 0 14px; }
.mp .center { text-align: center; }
.mp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mp-grid3 { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 0 16px; }
.mp-dob-row { display: flex; align-items: center; gap: 10px; }
.mp-dob { max-width: 92px; text-align: center; }
.mp-dob.y { max-width: 124px; }
.mp-dob-row > span { color: var(--mp-ink-3); font-size: 22px; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* the home address: matching addresses to tap under the street (2026-10-22) */
.mp-addr { margin: -4px 0 14px; }
.mp-addr:empty { display: none; }
.mp-addr-head { font-size: 14px; font-weight: 600; color: var(--mp-gold); margin: 0 0 8px; }
.mp-addr-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 62px; padding: 10px 16px; margin-bottom: 8px; border: 1px solid var(--mp-edge); border-radius: 12px; background: #fff; color: var(--mp-ink); font: 400 17px var(--font); text-align: left; cursor: pointer; }
.mp-addr-row b { font-weight: 600; font-size: 18px; }
.mp-addr-row span { color: var(--mp-ink-2); font-size: 15.5px; }
.mp-addr-row:hover, .mp-addr-row:active { border-color: var(--mp-gold); background: var(--mp-gold-wash); }
.mp-addr-ok { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--mp-gold-wash); color: var(--mp-ink); font-size: 16px; font-weight: 500; }
.mp-addr-ok svg { color: var(--mp-gold); flex: 0 0 auto; }
.mp-addr-more { font-size: 14.5px; color: var(--mp-ink-3); }
.mp-chip { min-height: 56px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--mp-edge); background: #fff; font: 500 17px var(--font); color: var(--mp-ink); cursor: pointer; }
.mp-chip.on { background: var(--mp-ink); color: #fff; border-color: var(--mp-ink); }
.mp-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; min-height: 68px; background: none; border: 0; border-top: 1px solid var(--mp-line); text-align: left; cursor: pointer; color: var(--mp-ink); font: inherit; }
.mp-card > .mp-toggle:first-child { border-top: 0; padding-top: 4px; }
.mp-toggle-txt b { display: block; font-weight: 600; font-size: 18px; }
.mp-toggle-txt span { color: var(--mp-ink-2); font-size: 15.5px; }
.mp-switch { flex: 0 0 auto; width: 60px; height: 36px; border-radius: 999px; background: var(--mp-edge); position: relative; transition: background 0.2s; }
.mp-switch i { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.mp-toggle.on .mp-switch { background: var(--mp-ink); }
.mp-toggle.on .mp-switch i { transform: translateX(24px); }

.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 0 30px; border-radius: 14px; border: 1px solid var(--mp-ink); background: var(--mp-ink); color: #fff; font: 600 18px var(--font); cursor: pointer; }
.mp-btn:active { transform: scale(0.985); }
.mp-btn:disabled { opacity: 0.45; cursor: default; }
.mp-btn.ghost { background: transparent; color: var(--mp-ink); border-color: var(--mp-edge); }
.mp-btn.big { min-height: 68px; padding: 0 42px; font-size: 20px; }
.mp-btn.wide { width: 100%; }
.mp-link { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--mp-gold); font: 600 16px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }
.mp-link.danger { color: var(--mp-bad); }
.mp-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(246, 243, 236, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--mp-line); z-index: 20; }
.mp-foot:empty { display: none; }
.mp-msg { flex: 1; text-align: center; color: var(--mp-bad); font-size: 16px; font-weight: 500; line-height: 1.35; }
.mp-msg.shake { animation: mpShake 0.35s; }
@keyframes mpShake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.mp-hero { max-width: 640px; margin: 6vh auto 0; text-align: center; }
.mp-hero h1 { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.1; margin: 10px 0 14px; letter-spacing: -0.015em; }
.mp-hero > p { color: var(--mp-ink-2); font-size: 19px; margin: 0 auto 24px; max-width: 540px; }
.mp-hero-crown { color: var(--mp-gold); display: flex; justify-content: center; }
.mp-hero-check { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: var(--mp-ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.mp-eyebrow { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mp-ink-3); margin-top: 8px; }
.mp-welcome-list { list-style: none; margin: 0 auto 30px; padding: 0; max-width: 470px; text-align: left; }
.mp-welcome-list li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--mp-line); font-size: 18px; }
.mp-welcome-list li svg { color: var(--mp-gold); flex: 0 0 auto; }
.mp-hero .mp-link { display: flex; width: fit-content; margin: 16px auto 0; color: var(--mp-ink-3); }
.mp-row-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.mp-done-list { text-align: left; margin: 0 0 22px; }

.mp-seg { display: inline-flex; background: #fff; border: 1px solid var(--mp-line); border-radius: 14px; padding: 4px; margin-bottom: 18px; }
.mp-seg button { min-height: 58px; min-width: 176px; padding: 0 18px; border: 0; border-radius: 10px; background: none; font: 600 17px var(--font); color: var(--mp-ink-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.mp-seg button small { font-weight: 500; font-size: 13px; color: var(--mp-ink-3); }
.mp-seg button.on { background: var(--mp-ink); color: #fff; }
.mp-seg button.on small { color: rgba(255, 255, 255, 0.75); }
.mp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.mp-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--mp-line); border-radius: 16px; padding: 20px 18px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.mp-plan.on { border-color: var(--mp-gold); box-shadow: 0 0 0 3px var(--mp-gold-wash), 0 12px 26px -16px rgba(29, 25, 21, 0.35); }
.mp-plan-name { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.mp-plan-price { margin-top: 8px; }
.mp-plan-price b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mp-plan-price span { color: var(--mp-ink-2); font-size: 16px; }
.mp-plan-alt { color: var(--mp-ink-3); font-size: 14px; margin: 2px 0 12px; min-height: 20px; }
.mp-plan ul { list-style: none; padding: 12px 0 0; margin: 0 0 14px; border-top: 1px solid var(--mp-line); flex: 1; }
.mp-plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 15.5px; line-height: 1.35; padding: 5px 0; }
.mp-plan li svg { color: var(--mp-gold); flex: 0 0 auto; margin-top: 2px; }
.mp-plan-full { font-size: 14px; color: #7a5200; background: #fbf3e0; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.mp-plan-pick { min-height: 56px; border-radius: 12px; border: 1px solid var(--mp-edge); background: #fff; font: 600 17px var(--font); color: var(--mp-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mp-plan.on .mp-plan-pick { background: var(--mp-ink); color: #fff; border-color: var(--mp-ink); }
.mp-total { margin-top: 20px; text-align: center; font-family: var(--serif); font-size: 22px; }
.mp-total span { display: block; font-family: var(--font); font-size: 15px; color: var(--mp-ink-3); margin-top: 4px; }

.mp-add { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 86px; padding: 16px 20px; margin-bottom: 16px; border: 1.5px dashed #cdbf9f; border-radius: 16px; background: rgba(255, 255, 255, 0.6); color: var(--mp-ink); text-align: left; cursor: pointer; font: inherit; }
.mp-add b { display: block; font-size: 19px; }
.mp-add small { display: block; color: var(--mp-ink-2); font-size: 15px; }
.mp-add-plus { width: 46px; height: 46px; border-radius: 50%; background: var(--mp-gold-wash); color: var(--mp-gold); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.mp-rules { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.mp-toc { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - 230px); overflow: auto; }
.mp-toc button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font: 500 14.5px var(--font); color: var(--mp-ink-2); cursor: pointer; line-height: 1.25; }
.mp-toc button.on { background: #fff; color: var(--mp-ink); box-shadow: 0 1px 2px rgba(29, 25, 21, 0.07); }
.mp-toc-dot { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid var(--mp-edge); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--mp-ink-3); background: #fff; }
.mp-toc button.done .mp-toc-dot { background: var(--mp-ink); border-color: var(--mp-ink); color: #fff; }
.mp-section-n { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-ink-3); margin-bottom: 4px; }
.mp-card.mp-section h2 { font-size: 28px; }
.mp-doc p { margin: 0 0 14px; font-size: 18.5px; line-height: 1.65; }
.mp-doc h4 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 18px 0 6px; }
.mp-doc b { font-weight: 650; }
.mp-section-foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; border-top: 1px solid var(--mp-line); padding-top: 16px; margin-top: 10px; flex-wrap: wrap; }
.mp-section-foot .mp-link { margin-right: auto; }
.mp-done { color: var(--mp-gold); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

.mp-ack { display: flex; gap: 22px; align-items: center; }
.mp-ack-text { flex: 1; }
.mp-ack-text b { display: block; font-size: 13.5px; letter-spacing: 0.12em; color: var(--mp-gold); margin-bottom: 4px; }
.mp-ack-text p { margin: 0; font-size: 18px; }
.mp-ack-box { flex: 0 0 200px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.mp-tap-initial { min-height: 58px; width: 100%; font-size: 17px; }
.mp-tap-initial.on { background: #fff; color: var(--mp-ink); border: 2px solid var(--mp-gold); font-family: var(--serif); font-size: 20px; }
.mp-ack-box .mp-label { display: block; margin-bottom: 4px; }
/* the rules on one page: every part in order, one I agree (2026-10-23) */
.mp-rules-all .mp-rule + .mp-rule { border-top: 1px solid var(--mp-line); margin-top: 22px; padding-top: 20px; }
.mp-rules-all .mp-rule h2 { font-size: 24px; margin: 0 0 6px; }
.mp-agree { border-top: 2px solid var(--mp-gold); margin-top: 26px; padding-top: 20px; text-align: center; }
.mp-agree p { color: var(--mp-ink-2); margin: 0 0 14px; }
.mp-initials { text-align: center; font-family: var(--serif); font-size: 28px; letter-spacing: 0.12em; text-transform: uppercase; min-height: 68px; }
.mp-sig { position: relative; height: 210px; border: 1px solid var(--mp-edge); border-radius: 14px; background: #fff; overflow: hidden; }
.mp-sig-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.mp-sig-hint { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: var(--mp-ink-3); font-size: 18px; pointer-events: none; }
.mp-sig-line { position: absolute; left: 28px; right: 28px; bottom: 46px; border-bottom: 1px solid #cdbf9f; pointer-events: none; }
.mp-sig .mp-link { position: absolute; right: 10px; top: 4px; }
.mp-when { margin-top: 8px; font-size: 14px; color: var(--mp-ink-3); }

.mp-ccwrap { position: relative; }
.mp-ccnum { font-size: 22px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; padding-right: 150px; }
.mp-ccbrand { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 600; color: var(--mp-ink-2); pointer-events: none; }
.mp-cc-said { color: var(--mp-bad); font-size: 16px; min-height: 22px; margin: 8px 0; }
.mp-row-end { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mp-cc { border-radius: 16px; padding: 22px 24px; background: linear-gradient(135deg, #22201c, #3b3328); color: #fff; max-width: 420px; margin-bottom: 10px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); }
.mp-cc-brand { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #d9c08a; }
.mp-cc-num { font-size: 26px; letter-spacing: 0.14em; margin: 20px 0 12px; font-variant-numeric: tabular-nums; }
.mp-cc-note { font-size: 14px; color: rgba(255, 255, 255, 0.78); display: flex; align-items: center; gap: 6px; }
.mp-lines { margin-bottom: 14px; }
.mp-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--mp-line); font-size: 17px; }
.mp-line:last-child { border-bottom: 0; }
.mp-line > span { color: var(--mp-ink-2); flex-shrink: 0; }
.mp-line.mp-todo > span { flex-shrink: 1; min-width: 0; }
.mp-addr-wait { padding: 10px 2px; font-size: 15px; color: var(--mp-ink-2); }
.mp-line.mp-todo > button { flex-shrink: 0; }
.mp-rule-list h2 { margin-bottom: 8px; }
.mp-rule-list ol { margin: 0; padding: 0 0 0 22px; }
.mp-rule-list li { padding: 2px 0; color: var(--mp-ink-2); }
.mp-rule-jump { display: block; width: 100%; background: none; border: 0; padding: 7px 0; font: inherit; font-size: 16px; color: var(--mp-ink); text-align: left; text-decoration: underline; text-decoration-color: var(--mp-line); text-underline-offset: 3px; cursor: pointer; }
.mp-rule { scroll-margin-top: 12px; }
.mp-rule-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--mp-ink-2); }
#mp-rule-list { scroll-margin-top: 12px; }
.mp-line > b { font-weight: 600; text-align: right; }
.mp-line.total > b { font-size: 20px; }
.mp-auth { margin: 0 0 16px; padding: 16px 18px; border-left: 3px solid var(--mp-gold); background: #faf7f1; border-radius: 0 12px 12px 0; font-size: 17px; line-height: 1.6; }
.mp-note { min-height: 110px; }

.mp-layer { position: fixed; inset: 0; z-index: 400; background: rgba(29, 25, 21, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.mp-layer-card { background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 420px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45); color: #1d1915; }
.mp-layer-card h2 { font-family: var(--serif); font-size: 26px; text-align: center; margin: 0 0 6px; }
.mp-layer-card .mp-sub { color: #5f564c; margin: 0 0 14px; font-size: 17px; }
.mp-layer-card.wide { max-width: 860px; max-height: 88dvh; display: flex; flex-direction: column; }
.mp-layer-card.wide h2 { text-align: left; }
.mp-layer-body { overflow: auto; padding-right: 6px; }
.mp-layer-body h3 { font-family: var(--serif); font-size: 21px; margin: 18px 0 8px; }
.mp-layer-card.pin .pin-key { min-height: 70px; font-size: 26px; }
.mp-layer-card .mp-btn { min-height: 60px; border-radius: 14px; border: 1px solid #1d1915; background: #1d1915; color: #fff; font: 600 18px var(--font); cursor: pointer; }
.mp-layer-card .mp-btn.ghost { background: transparent; color: #1d1915; border-color: #d9d0c1; }
.mp-layer-card .mp-btn.wide { width: 100%; margin-top: 12px; }
.mp-launch { border-color: #cdbf9f; background: linear-gradient(180deg, #fffdf8, #fff); }
/* a photo of someone's driver's license (2026-10-23): taken, sealed with the card key and kept at once */
.mp-id-card { padding: 18px 20px; }
.mp-id-file { display: none; }
.mp-id-nested { border-top: 1px solid var(--mp-line); margin-top: 18px; padding-top: 16px; }
.mp-id-head { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--mp-ink); margin-bottom: 6px; }
.mp-id-head svg { color: var(--mp-gold); }
.mp-id .mp-sub { margin: 0 0 12px; }
.mp-id .mp-link { display: inline-block; margin-top: 10px; }
.mp-id-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 420px; }
.mp-id-done { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mp-id-thumb { width: 150px; height: auto; border-radius: 10px; border: 1px solid var(--mp-line); background: #fff; }
.mp-id-ok { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #107a4f; font-size: 16px; }
.mp-id .mp-hint.bad { color: var(--mp-bad); margin-top: 8px; }
/* the packet on the member's own phone (packet.html): no Eureka around it */
body.mp-phone { margin: 0; }
body.mp-phone .mp-main { padding-bottom: 150px; }
.mp-sent-staff { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.45; padding: 4px 0 14px; border-bottom: 1px solid var(--mp-line); margin-bottom: 4px; text-align: left; }
.mp-sent-staff svg { color: #107a4f; flex: none; margin-top: 3px; }

/* the locker picker (lockers.js) at tablet size, in the packet's colours */
.mp .lk-pick .btn { min-height: 50px; padding: 0 18px; font-size: 16px; border-radius: 12px; }
.mp .lk-pick .btn.primary { background: var(--mp-ink); border-color: var(--mp-ink); color: #fff; }
.mp .lk-pick .input { min-height: 50px; font-size: 17px; max-width: 280px !important; border-radius: 12px; }
.mp .lk-pick .muted { font-size: 15px !important; }

/* a tablet held upright (768 px): the three packages stay side by side, a little tighter */
@media (max-width: 900px) {
  .mp-plan { padding: 16px 14px 14px; }
  .mp-plan-name { font-size: 23px; }
  .mp-plan-price b { font-size: 29px; }
  .mp-plan li { font-size: 14.5px; }
  .mp-rules { grid-template-columns: 1fr; }
  .mp-toc { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 6px; }
  .mp-toc button { flex: 0 0 auto; }
  .mp-toc button > span:last-child { display: none; }
  .mp-toc button.on > span:last-child { display: inline; }
}
@media (max-width: 700px) {
  .mp-plans { grid-template-columns: 1fr; }
  .mp-grid2, .mp-grid3 { grid-template-columns: 1fr; }
  .mp-top { grid-template-columns: 1fr auto; padding: 12px 16px 10px; }
  .mp-where { display: none; }
  .mp-bar { margin: 0 16px; }
  .mp-main { padding: 18px 16px 140px; }
  .mp-foot { padding-left: 16px; padding-right: 16px; }
  .mp-head h1 { font-size: 28px; }
  .mp-hero h1 { font-size: 34px; }
  .mp-ack { flex-direction: column; align-items: stretch; }
  .mp-ack-box { flex: none; }
  .mp-rules-all .mp-rule h2 { font-size: 21px; }
  .mp-card.mp-section { padding: 18px 16px; }
  .mp-btn { padding: 0 18px; }
  .mp-seg button { min-width: 0; flex: 1; }
}

/* ─── The handheld (2026-10-27, the 360 px walk at King Corona 1523) ───
   The top bar stays one row: the page's buttons fold into a "⋯" menu, the Refill pill is its count, the menu button
   is a full finger wide. Below 480 px only: a wide screen is unchanged. */
.top-more-btn { display: none; }
@media (max-width: 480px) {
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; flex-wrap: nowrap; position: sticky; }
  .topbar h1 { font-size: 18px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .back-btn { min-height: 44px; padding-right: 8px; }
  .topbar .back-btn > span:not(.i) { display: none; }
  .hamburger { min-width: 44px; min-height: 44px; font-size: 18px; }
  .refill-bell { padding: 6px 10px; min-height: 40px; }
  .refill-bell .rb-word { display: none; }
  .topbar .user-chip { font-size: 11px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
  .top-actions.many { display: none; }
  .top-actions.many.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    position: absolute; right: 10px; top: calc(100% - 4px); z-index: 40; min-width: 210px; max-width: calc(100vw - 20px);
    padding: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(22, 32, 27, .18);
  }
  .top-actions.many.open .btn { justify-content: flex-start; min-height: 44px; width: 100%; }
  .top-more-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex-shrink: 0;
    border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .dtc-card .btn.sm, .dtc-actions .btn { min-height: 44px; min-width: 44px; }
}