/* DrinksQR back office (owners). House style in Operate mode: clarity over decoration. Sentence case, Bricolage headings, Archivo UI, hairlines, 10-16px radii. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: 'Archivo DQ';
  src: url(../fonts/archivo-latin-wdth.woff2) format('woff2-variations'), url(../fonts/archivo-latin-wdth.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo DQ';
  src: url(../fonts/archivo-latin-ext-wdth.woff2) format('woff2-variations'), url(../fonts/archivo-latin-ext-wdth.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Young Serif DQ';
  src: url(../fonts/young-serif-latin.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif DQ';
  src: url(../fonts/young-serif-latin-ext.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage DQ';
  src: url(../fonts/bricolage-latin.woff2) format('woff2-variations'), url(../fonts/bricolage-latin.woff2) format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage DQ';
  src: url(../fonts/bricolage-latin-ext.woff2) format('woff2-variations'), url(../fonts/bricolage-latin-ext.woff2) format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+A720-A7FF;
}


/* ---------- Tokens ---------- */
:root {
  --stout: #141210;
  --white: #FFFFFF;
  --chalk: #EEF0EA;
  --paper: #F7F8F5;
  --lime: #C8F031;
  --cobalt: #2B4BFF;
  --tangerine: #FF7A1A;
  --grapefruit: #FF5C8A;
  --grey: #5C5852;
  --error: #B0103C;
  --ok: #2F6B1E;
  --hair: rgba(20, 18, 16, .1);
  --hair-strong: rgba(20, 18, 16, .22);
  --font-head: 'Bricolage DQ', 'Archivo DQ', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Archivo DQ', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r-btn: 10px;
  --r-card: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(20, 18, 16, .05), 0 8px 24px rgba(20, 18, 16, .06);
  --nav-w: 232px;
  --top-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.5; color: var(--stout); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 .75em; }
h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
main:focus, [tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--stout); color: var(--white); padding: .6rem 1rem; border-radius: var(--r-btn); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: .75rem; }
.logo-mark { width: 28px; height: 28px; }

/* ---------- Type ---------- */
.adm-h1 { font-family: var(--font-head); font-weight: 700; font-variation-settings: "opsz" 96; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.15; }
.adm-h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; font-variation-settings: "opsz" 32; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.25; }
.adm-h3 { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; font-variation-settings: "opsz" 32; font-size: 1.0625rem; line-height: 1.3; margin-bottom: .75rem; }
.adm-h4 { font-weight: 600; font-size: .9375rem; margin: 1.25rem 0 .5rem; }
.adm-muted { color: var(--grey); }
.adm-small { font-size: .875rem; }
.adm-head .adm-muted, .adm-head p { margin: .3rem 0 0; }
.adm-opt { font-weight: 400; color: var(--grey); font-size: .875rem; }
.adm-hint { margin: .35rem 0 0; font-size: .875rem; color: var(--grey); }
.adm-err { margin: .35rem 0 0; font-size: .875rem; font-weight: 500; color: var(--error); }
.adm-empty { padding: 1.25rem; border: 1px dashed var(--hair-strong); border-radius: 12px; color: var(--grey); text-align: center; }

/* ---------- Top bar + nav ---------- */
.adm-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; height: var(--top-h); padding: 0 clamp(.75rem, 2vw, 1.25rem); background: var(--stout); color: var(--white); --mark-bg: #2A2622; --mark-fg: #FFFFFF; }
.adm-top :focus-visible { outline-color: var(--lime); }
.adm-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.adm-venue { display: flex; align-items: center; gap: .5rem; min-width: 0; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.adm-venue-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-vswitch { position: relative; }
.adm-vswitch summary { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; list-style: none; min-height: 40px; }
.adm-vswitch summary::-webkit-details-marker { display: none; }
.adm-vswitch ul { position: absolute; top: 100%; left: 0; min-width: 220px; padding: .35rem; background: var(--white); color: var(--stout); border-radius: 12px; box-shadow: var(--shadow); }
.adm-vswitch a { display: block; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; }
.adm-vswitch a:hover, .adm-vswitch a[aria-current] { background: var(--chalk); }
.adm-top .adm-tag { background: rgba(255, 92, 138, .2); color: #FFD1DE; }
.adm-top-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.adm-toplink { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .7rem; border: 0; border-radius: 8px; background: none; color: #D9D6D0; text-decoration: none; font-size: .875rem; font-weight: 500; cursor: pointer; }
.adm-toplink:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.adm-toplink .icon { width: 18px; height: 18px; }
.adm-logout { margin: 0; }

.adm-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.adm-nav { position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 1rem .75rem; border-right: 1px solid var(--hair); background: var(--white); }
.adm-nav ul { display: grid; gap: 2px; }
.adm-nav a { display: flex; align-items: center; gap: .65rem; min-height: 42px; padding: 0 .75rem; border-radius: 10px; color: var(--grey); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.adm-nav a:hover { background: var(--chalk); color: var(--stout); }
.adm-nav a[aria-current="page"] { background: var(--chalk); color: var(--stout); box-shadow: inset 3px 0 0 var(--lime); }
.adm-nav-sep { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--hair); }
.adm-main { min-width: 0; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2.25rem) 4rem; }
@media (max-width: 900px) {
  .adm-shell { grid-template-columns: 1fr; align-content: start; }
  .adm-nav { position: sticky; top: var(--top-h); z-index: 30; height: auto; padding: .35rem .5rem; border-right: 0; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav ul { display: flex; gap: .25rem; }
  .adm-nav li { flex: none; }
  .adm-nav a { min-height: 40px; padding: 0 .7rem; font-size: .875rem; white-space: nowrap; }
  .adm-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--stout); }
  .adm-nav-sep { margin: 0; padding: 0 0 0 .25rem; border: 0; border-left: 1px solid var(--hair); }
  .adm-nav .icon { display: none; }
}
@media (max-width: 560px) {
  .adm-brand span, .adm-toplink span { display: none; }
  .adm-venue { padding-left: .75rem; }
  .adm-top { gap: .6rem; }
}

/* No sidebar (account page, platform staff without a venue): main takes the whole row, centred, instead of
   dropping into the 232px nav track. The top bar never clips: the brand keeps its size, link labels
   collapse to icons (still named for screen readers) before the row runs out of room. */
.adm-shell-solo { grid-template-columns: minmax(0, 1fr); }
.adm-shell-solo > .adm-main { width: 100%; max-width: 1320px; margin: 0 auto; }
.adm-brand { flex: none; }
.adm-top-actions { flex: none; }
.adm-venue { flex: 0 1 auto; }
@media (max-width: 760px) {
  .adm-toplink { padding: 0 .55rem; }
  .adm-toplink span { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Toast ---------- */
.adm-toast { display: flex; align-items: center; gap: .6rem; max-width: 720px; margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: 12px; font-weight: 500; font-size: .9375rem; background: #E7F5D2; color: #1F3D10; box-shadow: var(--shadow); }
.adm-toast.is-error { background: #FCE3EA; color: #6E0A26; }
.adm-toast .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .adm-toast { animation: adm-in .35s var(--ease); } }
@keyframes adm-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.adm-live:empty { display: none; }
.adm-live { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; padding: .7rem 1rem; border-radius: 12px; background: var(--stout); color: var(--white); font-weight: 500; font-size: .9375rem; box-shadow: var(--shadow); }
.adm-live.is-error { background: var(--error); }

/* ---------- Page scaffolding ---------- */
.adm-page { max-width: 1240px; }
.adm-narrow { max-width: 640px; }
.adm-narrow-wide { max-width: 880px; }
.adm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.adm-back { margin: 0 0 .75rem; font-size: .9375rem; }
.adm-back a { display: inline-flex; align-items: center; gap: .35rem; color: var(--grey); text-decoration: none; font-weight: 500; min-height: 36px; }
.adm-back a:hover { color: var(--stout); }
.adm-back .icon { width: 18px; height: 18px; }
.adm-card { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 1rem; }
.adm-form { display: grid; gap: 1rem; }
.adm-form .adm-card { margin: 0; display: grid; gap: 1rem; }
.adm-form .adm-card > .adm-h3 { margin: 0; }
.adm-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--chalk); color: var(--grey); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.adm-tag-warn { background: rgba(255, 122, 26, .18); color: #7A3300; }
.adm-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 7px; background: var(--chalk); font-size: .8125rem; font-weight: 600; font-family: var(--font); }
.adm-note { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .7rem .9rem; background: var(--chalk); border-radius: 10px; font-size: .875rem; color: #3B3833; }
.adm-note .icon { width: 18px; height: 18px; margin-top: 1px; }
.adm-alert { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 12px; background: #FCE3EA; color: #6E0A26; font-weight: 500; font-size: .9375rem; }
.adm-alert .icon { width: 18px; height: 18px; margin-top: 2px; }
.adm-alert p { margin: 0 0 .25rem; }
.adm-alert ul { display: grid; gap: .15rem; font-weight: 400; }
.adm-alert-block { max-width: 880px; }
.adm-codes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.adm-codes code { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .6); font-size: .8125rem; }

/* ---------- Buttons ---------- */
.adm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-btn); font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.adm-btn .icon { width: 18px; height: 18px; }
.adm-btn-primary { background: var(--stout); color: var(--white); }
.adm-btn-primary:hover { background: #2B2723; }
.adm-btn-primary:active { background: #000; }
.adm-btn-secondary { background: var(--white); border-color: var(--hair-strong); color: var(--stout); }
.adm-btn-secondary:hover { background: var(--chalk); }
.adm-btn-quiet { background: transparent; color: var(--grey); }
.adm-btn-quiet:hover { background: var(--chalk); color: var(--stout); }
.adm-btn-danger { background: var(--error); color: var(--white); }
.adm-btn-danger:hover { background: #8E0D30; }
.adm-btn[disabled] { opacity: .45; cursor: not-allowed; }
.adm-btn-block { width: 100%; }
.adm-btn-sm { height: 36px; padding: 0 12px; font-size: .875rem; }
.adm-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--grey); cursor: pointer; text-decoration: none; }
.adm-icon-btn:hover { background: var(--chalk); color: var(--stout); }
.adm-icon-btn:disabled { opacity: .3; cursor: default; background: none; }
.adm-icon-btn .icon { width: 18px; height: 18px; }
.adm-actions, .adm-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.adm-savebar-sticky { position: sticky; bottom: 0; z-index: 20; margin: 0 calc(-1 * clamp(1rem, 3vw, 2.25rem)); padding: .75rem clamp(1rem, 3vw, 2.25rem) calc(.75rem + env(safe-area-inset-bottom)); background: rgba(247, 248, 245, .94); border-top: 1px solid var(--hair); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.adm-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--white); font-size: .875rem; font-weight: 500; cursor: pointer; }
.adm-chip:hover { background: var(--chalk); }

/* ---------- Fields ---------- */
.adm-field { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.adm-field-narrow { max-width: 320px; }
.adm-field > label, .adm-colour > label, .adm-fieldset > legend { font-weight: 500; font-size: .9375rem; }
.adm-field input[type="text"], .adm-field input[type="email"], .adm-field input[type="password"], .adm-field input[type="date"], .adm-field input[type="time"], .adm-field textarea, .adm-field select,
.adm-inline-add input, .adm-attach select, .adm-size-row input[type="text"], .adm-opt-row input[type="text"], .adm-colour-in input[type="text"], .adm-price-in input {
  width: 100%; min-height: 44px; padding: .55rem .75rem; background: var(--white); border: 1px solid var(--hair-strong); border-radius: var(--r-btn); font-size: 1rem; line-height: 1.4;
}
.adm-field textarea { resize: vertical; min-height: 76px; }
.adm-field select, .adm-attach select { padding-right: 2rem; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error) !important; }
.adm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .adm-grid2 { grid-template-columns: 1fr; } }
.adm-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .5rem; }
.adm-fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.adm-fieldset-plain.adm-card { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--hair); display: grid; gap: 1rem; }
.adm-fieldset-plain[disabled] { opacity: .6; }
.adm-money { position: relative; display: flex; align-items: center; }
.adm-money > span[aria-hidden] { position: absolute; left: .75rem; color: var(--grey); pointer-events: none; }
.adm-money input { padding-left: 1.6rem !important; font-variant-numeric: tabular-nums; }
.adm-suffix > span[aria-hidden] { left: auto; right: .75rem; }
.adm-suffix input { padding-left: .75rem !important; padding-right: 1.8rem !important; }
.adm-kcal-in input { padding-right: 2.9rem !important; }
.adm-check { display: inline-flex; align-items: flex-start; gap: .55rem; min-height: 32px; font-size: .9375rem; cursor: pointer; }
.adm-check input { width: 18px; height: 18px; margin: .15rem 0 0; flex: none; accent-color: var(--stout); }
.adm-checkrow { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.adm-checklist { display: grid; gap: .35rem; }
.adm-allergens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .25rem 1rem; }
.adm-radio { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
.adm-radio input { width: 18px; height: 18px; accent-color: var(--stout); }

/* switch (checkbox-based, works without JS) */
.adm-switch-in { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; cursor: pointer; font-size: .875rem; font-weight: 500; }
.adm-switch-in input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.adm-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--hair-strong); transition: background-color .2s var(--ease); }
.adm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .2s var(--ease); }
.adm-switch-in input:checked + .adm-switch { background: var(--ok); }
.adm-switch-in input:checked + .adm-switch::after { left: 21px; }
.adm-switch-in input:focus-visible + .adm-switch { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.adm-switch-big { font-size: .9375rem; }

/* ---------- Login ---------- */
.adm-bare { background: var(--stout); }
.adm-bare-main { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.adm-login-card { width: min(420px, 100%); display: grid; gap: 1rem; padding: clamp(1.5rem, 5vw, 2.25rem); background: var(--white); border-radius: 16px; }
.adm-brand-login { --mark-bg: #141210; --mark-fg: #FFFFFF; }
.adm-login-card .adm-h1 { margin-top: .5rem; }
.adm-login-card p { margin: 0; }
.adm-login-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .875rem; }
.adm-login-foot a { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; color: var(--grey); font-weight: 500; }
.adm-login-foot .icon { width: 16px; height: 16px; }

/* ---------- Dashboard ---------- */
.adm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.adm-stat { display: grid; gap: .25rem; padding: 1.1rem 1.25rem; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); }
.adm-stat-label { color: var(--grey); font-size: .875rem; font-weight: 500; }
.adm-stat-num { font-family: var(--font-head); font-weight: 700; font-variation-settings: "opsz" 96; font-size: 2rem; letter-spacing: -.02em; line-height: 1.1; }
@media (max-width: 640px) { .adm-stats { grid-template-columns: 1fr 1fr; } .adm-stat:last-child { grid-column: 1 / -1; } .adm-stat-num { font-size: 1.6rem; } }
.adm-h2 + .adm-tiles { margin-top: .75rem; }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; margin-bottom: 2rem; }
.adm-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .15rem; padding: 1rem 1.1rem; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
/* Dashboard Manage grid (5 tiles): 5 across on wide screens, 3 + 2 in between, one column on phones. */
.adm-tiles-5 > li { display: flex; }
.adm-tiles-5 > li > .adm-tile { flex: 1; align-content: start; }
@media (min-width: 1280px) { .adm-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 1279px) {
  .adm-tiles-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .adm-tiles-5 > li { grid-column: span 2; }
  .adm-tiles-5 > li:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 599px) { .adm-tiles-5 { grid-template-columns: minmax(0, 1fr); } }
.adm-tile:hover { border-color: var(--hair-strong); box-shadow: var(--shadow); }
.adm-tile .icon { grid-row: 1 / 3; margin-top: 2px; color: var(--grey); }
.adm-tile-t { font-weight: 600; }
.adm-tile-d { font-size: .875rem; color: var(--grey); }
.adm-demo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; max-width: 880px; }
.adm-demo p { margin: 0; }
.adm-demo .adm-h3 { margin-bottom: .25rem; }

/* ---------- Lists / rows ---------- */
.adm-list { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
.adm-row { position: relative; display: flex; align-items: center; gap: .5rem; padding: 0 .5rem 0 0; border-bottom: 1px solid var(--hair); background: var(--white); }
.adm-row:last-child { border-bottom: 0; }
.adm-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .5rem .25rem .5rem 1rem; text-decoration: none; }
.adm-row-main:hover .adm-row-name { text-decoration: underline; text-decoration-color: var(--hair-strong); }
.adm-row-name { font-weight: 600; overflow-wrap: anywhere; }
.adm-row-meta { margin-left: auto; color: var(--grey); font-size: .875rem; white-space: nowrap; }
.adm-chev { width: 16px; height: 16px; color: var(--grey); }
.adm-row-tools { display: flex; align-items: center; gap: 0; }
.adm-row-tools form { margin: 0; }
.adm-row.is-current { background: var(--chalk); box-shadow: inset 3px 0 0 var(--stout); }
.adm-row.is-muted .adm-row-name { color: var(--grey); }
.adm-grip { display: inline-grid; place-items: center; width: 28px; margin-left: .35rem; color: var(--grey); cursor: grab; }
.adm-grip + .adm-row-main, .adm-grip + .adm-item-main { padding-left: .25rem; }
.adm-row.is-dragging { opacity: .5; }
.adm-row.is-drop { box-shadow: inset 0 2px 0 var(--cobalt); }
.adm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hair-strong); }
.adm-dot-clip-1 { background: var(--lime); }
.adm-dot-clip-2 { background: var(--cobalt); }
.adm-dot-clip-3 { background: var(--tangerine); }
.adm-dot-clip-4 { background: var(--grapefruit); }
.adm-dot-none { background: transparent; border: 1.5px dashed var(--hair-strong); }

/* Menu: categories | items */
.adm-split { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.adm-pane-cats .adm-h3 { margin-bottom: .6rem; }
.adm-cats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.adm-cats-head .adm-h3 { margin-bottom: 0; }
.adm-chip-sold { gap: .4rem; height: 30px; padding: 0 10px; color: inherit; text-decoration: none; }
.adm-chip-sold .num { color: var(--grey); }
.adm-chip-sold[aria-current] { background: var(--stout); border-color: var(--stout); color: var(--white); }
.adm-chip-sold[aria-current] .num { color: #B2ADA5; }
.adm-sold-cat { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 .5rem; }
.adm-sold-cat:first-of-type { margin-top: 0; }
.adm-sold-cat a { color: inherit; text-decoration: none; }
.adm-sold-cat a:hover { text-decoration: underline; }
.adm-itemlist-sold .adm-item { padding-right: 1rem; }
.adm-item-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.adm-item-tags[hidden] { display: none; }
.adm-inline-add { display: flex; gap: .5rem; margin-top: .75rem; }
.adm-inline-add input { flex: 1; min-width: 0; }
.adm-pane-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.adm-pane-head p { margin: .3rem 0 0; display: flex; align-items: center; gap: .3rem; }
.adm-pane-head .icon { width: 16px; height: 16px; }
.adm-pane-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.adm-pane-actions form { margin: 0; }
.adm-back-mobile { display: none; }
.adm-item { flex-wrap: wrap; padding: 0 .5rem 0 0; }
.adm-item-main { flex: 1 1 260px; min-width: 0; display: grid; gap: .15rem; padding: .7rem .25rem .7rem 1rem; text-decoration: none; }
.adm-item-main:hover .adm-row-name { text-decoration: underline; text-decoration-color: var(--hair-strong); }
.adm-item-sub { color: var(--grey); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-group-main { flex-wrap: wrap; }
.adm-group-main .adm-item-sub { flex-basis: 100%; white-space: normal; }
.adm-item.is-off .adm-row-name { color: var(--grey); }
/* Item photo thumbnail in the list (and search results). */
.adm-item-main.has-img { grid-template-columns: 44px minmax(0, 1fr); column-gap: .75rem; align-items: center; }
.adm-item-main.has-img > :not(.adm-item-thumb) { grid-column: 2; }
.adm-item-thumb { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--chalk); }
.adm-item.is-off .adm-item-thumb { opacity: .55; }
/* Menu: instant search over every item (admin.js) */
.adm-find { max-width: 480px; margin: 0 0 1.25rem; }
.adm-find-field { position: relative; display: flex; align-items: center; }
.adm-find-icon { position: absolute; left: .75rem; width: 18px; height: 18px; color: var(--grey); pointer-events: none; }
.adm-find input { width: 100%; min-height: 44px; padding: .55rem 2.75rem .55rem 2.4rem; background: var(--white); border: 1px solid var(--hair-strong); border-radius: var(--r-btn); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.adm-find input::-webkit-search-cancel-button, .adm-find input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.adm-find-x { position: absolute; right: 2px; }
.adm-find-results .adm-h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.adm-find-results .adm-empty p { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.adm-menu.is-finding .adm-split { display: none; }
.adm-quick { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .4rem 0; }
.adm-quick-sizes { font-size: .8125rem; color: var(--grey); width: 104px; text-align: right; }
.adm-price-in { position: relative; display: inline-flex; align-items: center; width: 104px; }
.adm-price-in > span[aria-hidden] { position: absolute; left: .6rem; color: var(--grey); }
.adm-price-in input { min-height: 38px !important; padding: .3rem .5rem .3rem 1.4rem !important; font-variant-numeric: tabular-nums; }
.adm-switch-label { color: var(--grey); min-width: 5.4rem; }
.adm-item.is-off .adm-switch-label { color: #7A3300; }
.adm-attach { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; padding: .85rem 1rem; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); font-size: .9375rem; }
.adm-attach label { font-weight: 500; }
.adm-attach select { width: auto; min-width: 180px; min-height: 36px; padding: .3rem .6rem; }
.adm-card .adm-attach { padding: 0; border: 0; margin: 0 0 .5rem; }
@media (max-width: 900px) {
  .adm-split { grid-template-columns: 1fr; }
  .adm-menu .adm-pane-items { display: none; }
  .adm-menu.is-drill .adm-pane-items { display: block; }
  .adm-menu.is-drill .adm-pane-cats { display: none; }
  .adm-menu.is-drill .adm-head { display: none; }
  .adm-back-mobile { display: block; }
  .adm-row.is-current { background: var(--white); box-shadow: none; }
}
@media (max-width: 640px) {
  .adm-item { padding: 0 0 .4rem; }
  .adm-quick { padding: 0 0 0 1rem; flex-wrap: wrap; }
  .adm-row-tools { margin-left: auto; }
  .adm-pane-actions .adm-btn { height: 40px; padding: 0 12px; }
}

/* ---------- Item editor ---------- */
.adm-editor-grid { display: grid; grid-template-columns: minmax(0, 760px) 340px; gap: 2rem; align-items: start; }
@media (max-width: 1180px) { .adm-editor-grid { grid-template-columns: minmax(0, 1fr); } .adm-preview { display: none !important; } }
.adm-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.adm-presets-label { font-size: .875rem; color: var(--grey); margin-right: .25rem; }
.adm-sizes-table, .adm-opt-table { display: grid; gap: .4rem; }
.adm-sizes-head, .adm-size-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 104px 104px 52px 40px; gap: .5rem; align-items: center; }
.adm-sizes-head, .adm-opt-head { font-size: .8125rem; font-weight: 500; color: var(--grey); }
.adm-sizes-head span:nth-child(5), .adm-opt-head span:nth-child(4), .adm-opt-head span:nth-child(5) { text-align: center; }
.adm-size-row label { display: block; min-width: 0; }
.adm-size-row label.adm-money { display: flex; }
.adm-opt-head, .adm-opt-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 112px 52px 52px; gap: .5rem; align-items: center; }
.adm-opt-row label { display: block; min-width: 0; }
@media (max-width: 640px) {
  .adm-sizes-head, .adm-opt-head { display: none; }
  .adm-size-row, .adm-opt-row { grid-template-columns: 1fr 1fr; padding: .6rem; border: 1px solid var(--hair); border-radius: 12px; }
  .adm-size-row .adm-money, .adm-opt-row .adm-money { grid-column: 1; }
  .adm-size-row .adm-kcal-in { grid-column: 2; }
  .adm-size-row .adm-radio, .adm-opt-row .adm-radio { justify-content: start; }
  .adm-size-row .adm-radio::after { content: attr(data-label); }
}
.adm-sizes-heading { margin-top: .5rem; }

/* Live preview: phone frame using the venue theme variables */
.adm-preview { position: sticky; top: calc(var(--top-h) + 1.25rem); }
.adm-preview-label { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 500; color: var(--grey); }
.pv-phone { padding: 10px; background: var(--stout); border-radius: 30px; box-shadow: var(--shadow); }
.pv, .bp { min-height: 520px; overflow: hidden; border-radius: 22px; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45; }
.pv-top { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.pv-venue { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px; letter-spacing: -.01em; }
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pv-row-main { display: grid; gap: 3px; min-width: 0; }
.pv-name { font-weight: 600; }
.pv-desc { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-meta { color: var(--muted); font-size: 12px; }
.pv-meta:empty, .pv-desc:empty { display: none; }
.pv-row-side { display: flex; align-items: center; gap: 10px; }
.pv-row.has-img { grid-template-columns: 48px minmax(0, 1fr) auto; }
.pv-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.pv-price { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-price small { color: var(--muted); font-size: 12px; font-weight: 400; }
.pv-add { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); }
.pv-add .icon { width: 15px; height: 15px; stroke-width: 2; }
.pv-sheet { margin: 14px 10px 10px; padding: 14px 14px 12px; border-radius: 18px; background: var(--surface-2); box-shadow: 0 -1px 0 var(--line); display: grid; gap: 10px; }
.pv-sheet-title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; letter-spacing: -.02em; }
.pv-allergens { margin: 0; color: var(--muted); font-size: 12px; }
.pv-group { display: grid; }
.pv-legend { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pv-legend small { font-weight: 400; color: var(--muted); font-size: 12px; }
.pv-opt { display: flex; align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pv-opt::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.pv-opt.is-sq::before { border-radius: 5px; }
.pv-opt.is-on::before { border: 5px solid var(--primary-edge); }
.pv-opt span:first-child { flex: 1; }
.pv-opt .pv-optp { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-btn { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 11px; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 14px; }
.pv-sold { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 500; }

/* ---------- Option library + deals ---------- */
.adm-minmax[hidden] { display: none; }
.adm-tags-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.adm-tags-list a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--chalk); font-size: .875rem; text-decoration: none; }
.adm-tags-list a:hover { background: #E2E5DC; }
.adm-newdeal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
@media (max-width: 800px) { .adm-newdeal { grid-template-columns: 1fr; } }
.adm-deal-row { padding-right: .75rem; }
.adm-deal-row form { margin: 0; }
.adm-status { display: inline-flex; align-items: center; gap: .35rem; height: 22px; padding: 0 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.adm-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.adm-status-active { background: #E7F5D2; color: #2F6B1E; }
.adm-status-scheduled { background: #E3E8FF; color: #1F35B5; }
.adm-status-off { background: var(--chalk); color: var(--grey); }
.adm-picker { display: grid; gap: .35rem; }
.adm-picker-cat { border: 1px solid var(--hair); border-radius: 10px; background: var(--white); }
.adm-picker-cat summary { display: flex; align-items: center; gap: .5rem; min-height: 42px; padding: 0 .8rem; cursor: pointer; list-style: none; font-weight: 500; font-size: .9375rem; }
.adm-picker-cat summary::-webkit-details-marker { display: none; }
.adm-picker-cat summary .icon { margin-left: auto; width: 16px; height: 16px; color: var(--grey); transition: transform .2s var(--ease); }
.adm-picker-cat[open] summary .icon { transform: rotate(180deg); }
.adm-picker-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .1rem 1rem; padding: .25rem .8rem .7rem; }

/* ---------- Branding ---------- */
.adm-upgrade { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1080px; margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--r-card); background: var(--cobalt); color: var(--white); }
.adm-upgrade p { margin: 0; color: #E3E8FF; max-width: 60ch; }
.adm-upgrade .adm-h3 { margin-bottom: .3rem; }
.adm-upgrade .adm-btn-primary { background: var(--lime); color: var(--stout); }
.adm-upgrade .adm-btn-primary:hover { background: #D3F552; }
.adm-upgrade :focus-visible { outline-color: var(--white); }
.adm-brand-grid { display: grid; grid-template-columns: minmax(0, 560px) 340px; gap: 2rem; align-items: start; }
@media (max-width: 980px) { .adm-brand-grid { grid-template-columns: minmax(0, 1fr); } .adm-brand-preview { max-width: 360px; } }
.adm-brand-forms { display: grid; gap: 1rem; }
.adm-brand-forms .adm-card { margin: 0; }
.adm-brand-preview { position: sticky; top: calc(var(--top-h) + 1.25rem); }
.adm-colour { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: .75rem; }
.adm-colour .adm-err { grid-column: 1 / -1; }
.adm-colour-in { display: flex; align-items: center; gap: .5rem; }
.adm-colour-in input[type="color"] { flex: none; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--hair-strong); border-radius: 10px; background: var(--white); cursor: pointer; }
.adm-colour-in input[type="text"] { font-variant-numeric: tabular-nums; text-transform: uppercase; }
.adm-checks { display: grid; gap: .4rem; }
.adm-checkline { display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .75rem; border-radius: 10px; font-size: .875rem; }
.adm-checkline .icon { width: 18px; height: 18px; margin-top: 1px; }
.adm-checkline.is-ok { background: #E7F5D2; color: #1F3D10; }
.adm-checkline.is-warn { background: #FFEAD9; color: #6B2C00; }
.adm-checkline.is-bad { background: #FCE3EA; color: #6E0A26; }
.adm-logo-now { display: inline-flex; padding: .75rem 1rem; margin-bottom: .75rem; border: 1px dashed var(--hair-strong); border-radius: 12px; background: repeating-conic-gradient(#EEF0EA 0% 25%, #FFFFFF 0% 50%) 50% / 16px 16px; }
.adm-logo-now img { max-height: 48px; width: auto; }
/* Item photo (editor) */
.adm-photo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.adm-photo-now { flex: none; }
.adm-photo-now img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; border: 1px solid var(--hair); background: var(--chalk); }
.adm-photo-body { flex: 1 1 260px; min-width: 0; display: grid; gap: .75rem; }
.adm-photo-body .adm-alert { margin: 0; }
.adm-photo input[type="file"] { max-width: 100%; font-size: .9375rem; }
.adm-photo.is-busy .adm-photo-now img { opacity: .5; }
.adm-field input[type="file"] { padding: .5rem 0; font-size: .9375rem; }
.bp-top { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.bp-logo { height: 24px; width: auto; max-width: 150px; margin-right: auto; object-fit: contain; }
.bp-name { margin-right: auto; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px; letter-spacing: -.01em; }
.bp-pill { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: var(--surface-3); font-size: 12px; font-weight: 500; }
.bp-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow: hidden; }
.bp-tab { padding: 10px 0; color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bp-tab.is-on { color: var(--ink); border-bottom-color: var(--primary-edge); }
.bp-h { margin: 16px 16px 2px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 19px; letter-spacing: -.02em; }
.bp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bp-row > div:first-child { display: grid; gap: 2px; }
.bp-item { font-weight: 600; }
.bp-desc { color: var(--muted); font-size: 13px; }
.bp-link { color: var(--accent-text); font-size: 12px; text-decoration: underline; text-underline-offset: .2em; }
.bp-side { display: flex; align-items: center; gap: 10px; }
.bp-price { font-weight: 500; font-variant-numeric: tabular-nums; }
.bp-add { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); }
.bp-add .icon { width: 15px; height: 15px; stroke-width: 2; }
.bp-bar { display: flex; justify-content: space-between; margin: 70px 12px 12px; padding: 0 16px; height: 46px; align-items: center; border-radius: 14px; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 14px; }

/* ---------- Accounts, setup, platform (stage 2) ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.adm-center { text-align: center; }
.adm-mb { margin-bottom: 1rem; }
.adm-okay { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .75rem 1rem; border-radius: 12px; background: #E7F5D2; color: #1F3D10; font-weight: 500; font-size: .9375rem; }
.adm-okay .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.adm-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.adm-label-row label { font-weight: 500; font-size: .9375rem; }
.adm-label-row a { font-size: .875rem; color: var(--grey); }
.adm-login-alt { text-align: center; font-size: .9375rem; color: var(--grey); }
.adm-login-alt a { color: var(--stout); font-weight: 600; }
.adm-signup-card { width: min(480px, 100%); }
.adm-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; max-width: 880px; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 12px; font-size: .9375rem; }
.adm-banner p { flex: 1 1 280px; margin: 0; }
.adm-banner .icon { width: 18px; height: 18px; flex: none; }
.adm-banner a { font-weight: 600; }
.adm-banner.is-info { background: #E3E8FF; color: #16236E; }
.adm-banner.is-warn { background: #FFEAD9; color: #6B2C00; }
.adm-banner-form { margin: 0; }
.adm-golive { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; max-width: 880px; }
.adm-golive p { margin: .35rem 0 0; }
.adm-golive form { margin: 0; }
.adm-setup { max-width: 880px; }
.adm-setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; }
.adm-steps { display: grid; gap: 0; counter-reset: step; }
.adm-step { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--hair); }
.adm-step:first-child { border-top: 0; }
.adm-step-mark { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--hair-strong); }
.adm-step-mark .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.adm-step.is-done .adm-step-mark { background: var(--lime); border-color: var(--lime); color: var(--stout); }
.adm-step-body { display: grid; gap: .1rem; }
.adm-step-t { font-weight: 600; text-decoration: none; }
.adm-step-t:hover { text-decoration: underline; }
.adm-step.is-done .adm-step-t { color: var(--grey); font-weight: 500; }
.adm-step-d { font-size: .875rem; color: var(--grey); }
.adm-pin { margin: .5rem 0; font-family: var(--font-head); font-weight: 700; font-size: 2.25rem; letter-spacing: .12em; }
.adm-tables-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.adm-tables-tools .adm-card { margin: 0; }
@media (max-width: 760px) { .adm-tables-tools { grid-template-columns: 1fr; } }
.adm-inline-form .adm-inline-add { margin-top: 0; }
.adm-inline-add input[type="number"] { flex: 0 1 120px; width: 120px; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--hair-strong); border-radius: var(--r-btn); background: var(--white); }
.adm-table-row { padding: .35rem .5rem .35rem 1rem; flex-wrap: wrap; }
.adm-table-name { flex: 1 1 260px; display: flex; gap: .4rem; align-items: center; margin: 0; }
.adm-table-name input { flex: 1; min-width: 0; min-height: 38px; padding: .35rem .6rem; border: 1px solid transparent; border-radius: 8px; background: transparent; font-weight: 600; }
.adm-table-name input:hover { border-color: var(--hair); }
.adm-table-name input:focus { border-color: var(--hair-strong); background: var(--white); }
.adm-confirm { position: relative; }
.adm-confirm summary { list-style: none; cursor: pointer; }
.adm-confirm summary::-webkit-details-marker { display: none; }
.adm-confirm-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: .75rem; width: 280px; padding: .85rem; background: var(--white); border: 1px solid var(--hair); border-radius: 12px; box-shadow: var(--shadow); }
.adm-confirm-pop form { margin: 0; }
.adm-confirm-pop p { margin: 0 0 .4rem; color: var(--grey); }
.adm-platform-pop { width: 320px; }

/* Platform console (admin/platform*.php): overview, businesses, one business. Reuses the analytics
   cards (.an-*); the charts' colours are the validated analytics palette. */
.adm-banner.is-staff { background: var(--cobalt); color: var(--white); }
.adm-banner.is-staff a { color: var(--white); }
.an.an-console { margin: 0; }
.pc-lede { margin: .3rem 0 0; max-width: 72ch; }
.pc-group { margin: 1.75rem 0 .65rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; }
.pc-group:first-child { margin-top: 0; }
.pc-group h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.pc-group p { margin: 0; font-size: .875rem; color: var(--grey); }
.an-kpis.pc-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-kpis.pc-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(50% + .5rem); }
@container an (max-width: 760px) { .an-kpis.pc-kpis-3, .an-kpis.pc-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
.an-kpi-label small { font-weight: 400; color: var(--grey); }
.pc-kpi-note { margin: 0; font-size: .75rem; color: var(--grey); }
.pc-charts { margin-top: 1.5rem; }
.an-hbar a.an-hbar-name { color: inherit; text-decoration: none; }
.an-hbar a.an-hbar-name:hover, .an-hbar a.an-hbar-name:focus-visible { text-decoration: underline; }
.pc-card-table { padding-bottom: .5rem; }
.pc-card-table .adm-table-wrap { border: 0; border-radius: 0; margin: 0 calc(-1 * clamp(1rem, 2.5vw, 1.35rem)); }
.pc-card-table .adm-table { font-size: .875rem; }
.pc-card-table .adm-table tbody th { min-width: 150px; }
.pc-card-table .adm-table .num { text-align: right; }
.pc-due { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: rgba(255, 122, 26, .18); color: #7A3300; }
.pc-due.is-past { background: #FCE3EA; color: #6E0A26; }
.pc-yes { color: var(--ok); font-weight: 500; }
.pc-no { color: var(--grey); }

/* Businesses list */
.pc-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .9rem; }
.pc-search input[type="search"] { flex: 1 1 240px; max-width: 360px; min-width: 0; height: 40px; padding: 0 .8rem; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--white); font-size: .9375rem; }
.pc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; }
.pc-chips a { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 10px; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--white); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.pc-chips a:hover { background: var(--chalk); }
.pc-chips a .num { color: var(--grey); }
.pc-chips a[aria-current] { background: var(--stout); border-color: var(--stout); color: var(--white); }
.pc-chips a[aria-current] .num { color: #B2ADA5; }
.adm-page.pc-biz { max-width: none; }
.pc-biz .adm-table th, .pc-biz .adm-table td { padding: .6rem .55rem; font-size: .8125rem; }
.pc-biz .adm-table th:first-child, .pc-biz .adm-table td:first-child { padding-left: .85rem; }
.pc-biz .adm-table tr > :last-child { padding-right: .85rem; }
.pc-biz .adm-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.pc-biz .adm-table tbody th { min-width: 140px; }
.pc-biz .adm-table td .pc-meta { white-space: nowrap; }
.pc-biz .adm-table td.num, .pc-biz .adm-table th.num { text-align: right; }
.pc-sort { display: inline-flex; align-items: center; gap: .2rem; color: inherit; text-decoration: none; }
.pc-sort:hover { color: var(--stout); text-decoration: underline; }
.pc-sort[aria-current] { color: var(--stout); font-weight: 600; }
.pc-sort .icon { width: 14px; height: 14px; }
.pc-meta { display: block; font-size: .75rem; color: var(--grey); }
.pc-count { margin: 0 0 .6rem; font-size: .875rem; color: var(--grey); }

/* One business */
.pc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .pc-detail { grid-template-columns: minmax(0, 1fr); } }
.pc-col { display: grid; gap: 1rem; min-width: 0; }
.pc-col > .adm-card { margin: 0; min-width: 0; }
.pc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem 1.25rem; margin: 0; }
.pc-facts div { min-width: 0; }
.pc-facts dt { font-size: .8125rem; color: var(--grey); }
.pc-facts dd { margin: .1rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.pc-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.pc-owner { display: grid; gap: .5rem; padding: .85rem 0; border-top: 1px solid var(--hair); }
.pc-owner:first-of-type { border-top: 0; padding-top: 0; }
.pc-owner-email { font-weight: 600; overflow-wrap: anywhere; }
.pc-owner .adm-actions { gap: .4rem; }
.pc-owner form { margin: 0; }
.pc-steps .adm-step { padding: .55rem 0; }
.pc-steps .adm-step-d { font-variant-numeric: tabular-nums; }
.pc-action { display: grid; gap: .5rem; padding: .9rem 0; border-top: 1px solid var(--hair); }
.pc-action:first-of-type { border-top: 0; padding-top: 0; }
.pc-action > p { margin: 0; font-size: .875rem; color: var(--grey); }
.pc-action-t { font-weight: 600; font-size: .9375rem; }
.pc-action form { margin: 0; }
.pc-action input[type="date"], .pc-action input[type="number"], .pc-action select { min-height: 40px; padding: .35rem .6rem; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--white); font-size: .9375rem; }
.pc-action input[type="number"] { width: 6.5rem; }
.pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pc-notes textarea { width: 100%; min-height: 140px; padding: .6rem .75rem; border: 1px solid var(--hair-strong); border-radius: var(--r-btn); background: var(--white); font-size: .9375rem; line-height: 1.5; resize: vertical; }
.pc-activity { display: grid; gap: 0; }
.pc-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .6rem 0; border-top: 1px solid var(--hair); font-size: .875rem; }
.pc-activity li:first-child { border-top: 0; }
.pc-activity time { color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-activity .pc-meta { grid-column: 1 / -1; }
.adm-confirm-pop.pc-pop { width: min(300px, calc(100vw - 2rem)); right: auto; left: 0; }
.pc-mini { margin-top: 1rem; }
.adm-table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.adm-table th, .adm-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; white-space: nowrap; }
.adm-table thead th { font-size: .8125rem; font-weight: 500; color: var(--grey); }
.adm-table tbody tr:last-child th, .adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody th { font-weight: 600; white-space: normal; min-width: 180px; }
.adm-table th.num, .adm-table td.num { font-variant-numeric: tabular-nums; }
.adm-cell-sub { display: block; font-weight: 400; font-size: .8125rem; color: var(--grey); }
.adm-h3 .adm-tag { vertical-align: middle; margin-left: .35rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Dashboard analytics (app/Charts.php, assets/js/analytics.js) ----------
   Palette validated with the dataviz validator on the white card surface:
   series cobalt / tangerine-600 / grapefruit-600 pass every categorical check
   (all pairs); the heatmap ramp is cobalt at OKLCH L .77-.45, passing the
   ordinal checks (monotone, steps >= .06, light end 2.09:1). Text never wears
   the data colour. */
.an { --an-s1: #2B4BFF; --an-s2: #DB6504; --an-s3: #D33067; --an-cmp: #8F8A82; --an-gl: #E9EAE4; --an-axis: #C9CAC2; --an-spark: #A8A49C;
  --an-q0: #EEF0EA; --an-q1: #93B2FF; --an-q2: #759BFE; --an-q3: #5882FE; --an-q4: #3D66FE; --an-q5: #2845FA; --an-q6: #1D29E2;
  container: an / inline-size; margin: 2.5rem 0 2rem; scroll-margin-top: calc(var(--top-h) + 1rem); }
.an-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .75rem; }
.an-head p { margin: 0; }
.an-note { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1rem; padding: .75rem 1rem; background: var(--chalk); border-radius: 10px; font-size: .9375rem; }
.an-note .icon { margin-top: .1rem; color: var(--grey); }

/* Filter row: one row above everything it scopes. */
.an-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 1.25rem; }
.an-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; min-width: 0; max-width: 100%; margin: 0; padding: 3px; border: 1px solid var(--hair-strong); border-radius: var(--r-btn); background: var(--white); }
.an-seg-opt { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 7px; font-size: .875rem; font-weight: 500; color: var(--grey); white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease); }
.an-seg-opt:hover { background: var(--chalk); color: var(--stout); }
.an-seg-in:checked + .an-seg-opt { background: var(--stout); color: var(--white); }
.an-seg-in:focus-visible + .an-seg-opt { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.an-custom { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.an-filters:has(.an-seg-in[value="custom"]:not(:checked)) .an-custom { display: none; }
.an-date, .an-cmp { display: grid; gap: .2rem; font-size: .8125rem; font-weight: 500; color: var(--grey); }
.an-date input, .an-cmp select { height: 40px; padding: 0 .6rem; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--white); color: var(--stout); font-size: .875rem; }
.an-cmp select { padding-right: 1.6rem; }
.an-apply { height: 40px; }

.an-body { transition: opacity .2s var(--ease); }
.an-body.is-loading { opacity: .5; }

/* Stat tiles */
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.an-kpi { display: grid; align-content: start; gap: .2rem; padding: 1rem 1.15rem .85rem; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); min-width: 0; }
.an-kpi-label { color: var(--grey); font-size: .875rem; font-weight: 500; }
.an-kpi-val { font-family: var(--font); font-weight: 650; font-size: 1.75rem; letter-spacing: -.015em; line-height: 1.15; overflow-wrap: anywhere; }
.an-delta { margin: 0; font-size: .8125rem; font-weight: 600; }
.an-delta.is-good { color: var(--ok); }
.an-delta.is-bad { color: var(--error); }
.an-delta.is-flat { color: var(--grey); font-weight: 500; }
.an-delta-vs { color: var(--grey); font-weight: 400; }
.an-spark { display: block; margin-top: .35rem; overflow: visible; }
.an-spark-line { fill: none; stroke: var(--an-spark); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
@container an (max-width: 760px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .an-kpi-val { font-size: 1.45rem; } }

/* Chart cards: one column, two from ~860px of section width; the takings line spans both. */
.an-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container an (min-width: 860px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-wide { grid-column: 1 / -1; }
.an-card { container-type: inline-size; min-width: 0; margin: 0; padding: clamp(1rem, 2.5vw, 1.35rem); background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); }
.an-cap { margin-bottom: .9rem; }
.an-title { font-family: var(--font-head); font-weight: 600; font-variation-settings: "opsz" 32; font-size: 1.0625rem; line-height: 1.3; margin: 0; }
.an-sub { margin: .2rem 0 0; font-size: .875rem; color: var(--grey); }
.an-empty { margin: 0; padding: 2rem 1rem; border: 1px dashed var(--hair-strong); border-radius: 12px; color: var(--grey); text-align: center; font-size: .9375rem; }

.an-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0 0 .6rem; font-size: .8125rem; color: var(--grey); }
.an-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.an-key { display: inline-block; flex: none; }
.an-key-line, .an-key-tick { width: 16px; height: 2px; border-radius: 1px; }
.an-key-dash { width: 16px; height: 2px; background: linear-gradient(90deg, var(--an-cmp) 0 6px, transparent 6px 10px, var(--an-cmp) 10px 16px); }
.an-key-bar { width: 10px; height: 10px; border-radius: 2px; }
.an-k-s1 { background: var(--an-s1); }
.an-k-s2 { background: var(--an-s2); }
.an-k-s3 { background: var(--an-s3); }
.an-key-tick.an-k-cmp { background: var(--an-cmp); }

.an-plot { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); border-radius: 6px; }
.an-plot:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
.an-svg { display: block; overflow: visible; }
.an-y, .an-x { display: block; overflow: visible; }
.an-y text, .an-x text { font-family: var(--font); font-size: 12px; fill: var(--grey); font-variant-numeric: tabular-nums; }
@container (max-width: 520px) { .an-xl:not(.m) { display: none; } }
.an-gl { stroke: var(--an-gl); stroke-width: 1; shape-rendering: crispEdges; }
.an-base { stroke: var(--an-axis); stroke-width: 1; shape-rendering: crispEdges; }
.an-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-l-s1 { stroke: var(--an-s1); }
.an-l-s2 { stroke: var(--an-s2); }
.an-l-cmp { stroke: var(--an-cmp); }
.an-dash { stroke-dasharray: 5 5; stroke-linecap: butt; }
.an-partial { stroke-dasharray: 4 4; stroke-linecap: butt; }
/* Bucket still in progress (Charts::line / columns 'partial'): hollow end marker, lighter bar. */
.an-dot.an-dot-hollow { fill: var(--white); stroke-width: 2; }
.an-dot-hollow.an-f-s1 { stroke: var(--an-s1); }
.an-dot-hollow.an-f-s2 { stroke: var(--an-s2); }
.an-dot-hollow.an-f-s3 { stroke: var(--an-s3); }
.an-bar-partial { fill-opacity: .45; }
.an-area { opacity: .1; stroke: none; }
.an-f-s1 { fill: var(--an-s1); }
.an-f-s2 { fill: var(--an-s2); }
.an-f-s3 { fill: var(--an-s3); }
.an-f-cmp { fill: var(--an-cmp); }
.an-dot { stroke: var(--white); stroke-width: 2; }
.an-cross { visibility: hidden; stroke: var(--stout); stroke-opacity: .35; stroke-width: 1; shape-rendering: crispEdges; }
.an-cross.is-on { visibility: visible; }
.an-hit { fill: transparent; }
.an-hit-bar:hover, .an-hit-bar.is-on { fill: rgba(20, 18, 16, .05); }
.an-ghost { stroke: var(--an-cmp); stroke-width: 2; stroke-linecap: round; }
.an-peak { font-family: var(--font); font-size: 12px; font-weight: 600; fill: var(--stout); font-variant-numeric: tabular-nums; }

.an-cell { stroke: var(--white); stroke-width: 2; }
.an-cell:hover, .an-cell.is-on { stroke: var(--stout); stroke-width: 1.5; }
.an-q0 { fill: var(--an-q0); } .an-q1 { fill: var(--an-q1); } .an-q2 { fill: var(--an-q2); } .an-q3 { fill: var(--an-q3); }
.an-q4 { fill: var(--an-q4); } .an-q5 { fill: var(--an-q5); } .an-q6 { fill: var(--an-q6); }
.an-scale { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .75rem; color: var(--grey); }
.an-scale svg { display: block; }

/* Horizontal bars (HTML rows, so names keep their real size) */
.an-hbars { display: grid; gap: .5rem; }
.an-hbar { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 24px; font-size: .875rem; }
.an-hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-hbar-svg { display: block; }
.an-hbar-val { min-width: 4.25rem; text-align: right; font-weight: 500; }
.an-hbar:hover .an-hbar-name, .an-hbar.is-on .an-hbar-name { text-decoration: underline; text-decoration-color: var(--hair-strong); }
@container (max-width: 420px) { .an-hbar { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; gap: .5rem; } .an-hbar-val { min-width: 3.5rem; } }
.an-toggle .an-seg { margin-bottom: .85rem; }
.an-seg-sm .an-seg-opt { height: 30px; padding: 0 10px; font-size: .8125rem; }
.an-list-pence { display: none; }
.an-t-pence:checked ~ .an-list-pence { display: grid; }
.an-t-pence:checked ~ .an-list-qty { display: none; }
.an-t-qty:checked ~ .an-seg .an-seg-opt:first-child, .an-t-pence:checked ~ .an-seg .an-seg-opt:last-child { background: var(--stout); color: var(--white); }
.an-t-qty:focus-visible ~ .an-seg .an-seg-opt:first-child, .an-t-pence:focus-visible ~ .an-seg .an-seg-opt:last-child { outline: 2px solid var(--cobalt); outline-offset: 1px; }

/* Service speed hero figure (the one hero number on the page) and cancellation summary */
.an-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem 1.25rem; margin-bottom: 1rem; }
.an-hero-num { margin: 0; font-family: var(--font); font-weight: 650; font-size: 3rem; letter-spacing: -.02em; line-height: 1; }
.an-hero-unit { margin-left: .3rem; font-size: 1.25rem; font-weight: 500; letter-spacing: 0; color: var(--grey); }
.an-hero-d { margin: 0; font-size: .875rem; color: var(--grey); }
.an-hero .an-delta { flex-basis: 100%; }
.an-sum { margin: 0 0 .85rem; font-size: .9375rem; color: var(--grey); }
.an-sum-n { margin-right: .2rem; font-size: 1.5rem; font-weight: 650; color: var(--stout); }
.an-subh { margin: 1.1rem 0 .55rem; font-size: .875rem; font-weight: 600; }

/* "View as table" twin */
.an-table { margin-top: .75rem; }
.an-table summary { display: inline-flex; align-items: center; min-height: 32px; font-size: .8125rem; font-weight: 500; color: var(--grey); cursor: pointer; }
.an-table summary:hover { color: var(--stout); }
.an-table-wrap { margin-top: .4rem; overflow-x: auto; border: 1px solid var(--hair); border-radius: 8px; }
.an-table table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.an-table th, .an-table td { padding: .4rem .65rem; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
.an-table thead th { font-weight: 500; color: var(--grey); }
.an-table tbody th { font-weight: 500; }
.an-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table tbody tr:last-child th, .an-table tbody tr:last-child td { border-bottom: 0; }

/* Tooltip (assets/js/analytics.js): value leads, label follows, line keys */
.an-tip { position: fixed; z-index: 60; margin: 0; max-width: 280px; padding: .5rem .7rem; background: var(--stout); color: var(--white); border-radius: 8px; box-shadow: var(--shadow); font-size: .8125rem; line-height: 1.35; pointer-events: none; }
.an-tip-t { display: block; margin-bottom: .25rem; color: #B2ADA5; font-size: .75rem; }
.an-tip-r { display: flex; align-items: center; gap: .5rem; }
.an-tip-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.an-tip-l { color: #D9D5CE; }
.an-tip-k { flex: none; width: 12px; height: 2px; border-radius: 1px; background: #D9D5CE; }
.an-tip-k.s1 { background: #7CA0FF; }
.an-tip-k.s2 { background: #FF8A3D; }
.an-tip-k.s3 { background: #FF6F96; }
.an-tip-k.cmp { background: #B2ADA5; }
.an-tip-k.dash { background: linear-gradient(90deg, #B2ADA5 0 4px, transparent 4px 7px, #B2ADA5 7px 12px); }
.an-tip-k.cell { width: 10px; height: 10px; border-radius: 2px; }
/* ---------- Staff (back office) + service times. Swatch colours: .stc-{key} from Staff::styleBlock() ---------- */
.st-avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--staff, var(--chalk)); color: var(--on-staff, var(--stout)); font-size: .8125rem; font-weight: 600; line-height: 1; }
.st-avatar-sm { width: 28px; height: 28px; }
.st-avatar-xs { width: 22px; height: 22px; font-size: .625rem; }
.st-avatar-lg { width: 52px; height: 52px; font-size: 1.125rem; }
.st-avatar-none { background: transparent; border: 1.5px dashed var(--hair-strong); }
.st-head { display: flex; align-items: center; gap: .85rem; }
.adm-staff .adm-row-meta .icon { width: 18px; height: 18px; }
.st-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.st-swatch { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.st-swatch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.st-swatch input:checked + .st-avatar { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--stout); }
.st-swatch input:focus-visible + .st-avatar { outline: 2px solid var(--cobalt); outline-offset: 4px; }

.svc { margin-top: 1.75rem; }
.svc.an { margin-top: 1.5rem; }
.svc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: .5rem; }
.svc-kpi-main .an-kpi-val { color: var(--stout); }
@media (max-width: 760px) { .svc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .svc-kpis .an-kpi-val { font-size: 1.35rem; } }
.svc-def { margin: 0 0 1rem; }
.svc-card { margin-top: 0; }
.svc-table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 10px; }
.svc-table-wrap:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.svc-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.svc-table th, .svc-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
.svc-table thead th { font-weight: 500; color: var(--grey); font-size: .8125rem; }
.svc-table tbody th { font-weight: 500; }
.svc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.svc-table tbody tr:last-child th, .svc-table tbody tr:last-child td { border-bottom: 0; }
.svc-table tr.is-none th { color: var(--grey); }
.svc-person { display: inline-flex; align-items: center; gap: .5rem; }

/* Mailing list (admin/marketing.php) */
.adm-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
@media (max-width: 640px) { .adm-stats-2 .adm-stat:last-child { grid-column: auto; } }
.adm-mkt-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.5rem 0 .9rem; }
.adm-mkt-search input { flex: 1 1 200px; max-width: 320px; min-width: 0; height: 44px; padding: 0 .8rem; font: inherit; border: 1px solid var(--hair-strong); border-radius: 10px; background: var(--white); }
.adm-mkt-search input:focus-visible { outline: 2px solid var(--cobalt, #2B4BFF); outline-offset: 1px; }
.adm-mkt-count { margin: 0 0 0 auto; }
@media (max-width: 640px) { .adm-mkt-count { margin-left: 0; flex-basis: 100%; } }
.adm-mkt-table th.adm-mkt-email { font-weight: 500; white-space: normal; word-break: break-all; min-width: 200px; }
.adm-mkt-table td:last-child { width: 1%; text-align: right; }
.adm-mkt-table thead th:last-child { position: relative; } /* keeps its visually-hidden label inside the scroll box */
.adm-mkt-pop { text-align: left; white-space: normal; }
@media (min-width: 1100px) { .adm-table-wrap:has(.adm-mkt-table) { overflow: visible; } }
.adm-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.adm-pager .adm-hint { margin: 0; }