/* RinseRevolution admin design system.
   Plain CSS, no build step. Tokens follow .impeccable.md; every class is prefixed `adm-`. */

:root {
  /* Colour */
  --ink: #14161C;
  --muted: #535867;
  --base: #EEF3F8;
  --sky: #3ABAF1;              /* decoration only, never text */
  --blue: #1E73BE;             /* links, booked pips, focus */
  --blue-ink: #16609F;         /* blue text on tinted fills (AA) */
  --amber: #F2A93B;
  --amber-ink: #7A4D00;
  --danger: #B3261E;
  --green-ink: #1F6B3A;
  --blob-1: #9FD8F7;
  --blob-2: #C9D7F2;
  --blob-3: #B7E6F3;

  --line: rgba(20, 22, 28, .08);
  --line-dashed: rgba(20, 22, 28, .1);
  --hover: rgba(20, 22, 28, .05);
  --glass: rgba(255, 255, 255, .55);
  --glass-edge: rgba(255, 255, 255, .8);
  --glass-shadow: 0 8px 24px rgba(20, 22, 28, .06);
  --control: rgba(255, 255, 255, .85);
  --glass-strong: rgba(255, 255, 255, .86);
  --card: rgba(255, 255, 255, .72);           /* solid cards inside lists (order cards, previews) */   /* open rail sheet, narrow top bar */
  --surface: rgba(255, 255, 255, .97);        /* popovers, drawer; the bell panel where blur is unsupported */
  --glass-pop: rgba(251, 252, 254, .9);       /* bell panel: frosted, a step denser than page panels so it sits above them */
  --glass-pop-blur: blur(24px) saturate(160%);
  --sheet-shadow: 0 16px 40px rgba(20, 22, 28, .12);
  --pop-shadow: 0 16px 40px rgba(20, 22, 28, .16);
  --scrim: rgba(20, 22, 28, .32);
  /* Control and switch boundaries: 3.8:1 on a field, 3.6:1 on a panel, 3.2:1 on a panel over the brightest blob. */
  --line-strong: #7D8394;
  --line-strong-hover: #5F6575;
  --on-ink: #fff;                             /* text and icons on ink or blue fills */

  /* Tints for chips */
  --tint-neutral: #E4E8EE;
  --tint-blue: #D6ECFA;
  --tint-amber: #F8E3C2;
  --tint-green: #D7F0E0;
  --tint-red: #F6D5D2;
  --tint-red-soft: #FBEAE8;    /* error flash */
  --tint-amber-soft: #FDF3E3;  /* warning flash */
  --track: #D5DCE4;            /* empty progress segments, todo timeline dots */
  --track-strong: #B9C2CE;     /* dashed timeline connector */
  --danger-ink: #8F3A33;       /* small block reasons on a tinted cell */
  --ink-hover: #2A2E38;        /* primary button hover */
  --placeholder: #6B7080;      /* 4.9:1 on a field */
  --surface-solid: #fff;       /* cards that must be opaque (email preview, hovered tiles) */

  /* Shape */
  --r-card: 18px;
  --r-control: 10px;
  --r-pill: 999px;
  --r-pop: 14px;      /* popovers, bubbles, cards inside panels */
  --r-sm: 6px;        /* small marks: code chips, legend swatches, drawer icons */

  /* Spacing, 4pt scale */
  --s1: 4px;
  --s1-5: 6px;   /* tight pairs: label to control, icon to text, grid cells */
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Type: fixed rem scale, five steps at least 1.14x apart: 12 / 14 / 16 / 20 / 26.
     Meta (hints, timestamps, chips) is 12 and muted; controls and body are 14. */
  --fs-sm: .75rem;     /* 12 */
  --fs-base: .875rem;  /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.625rem;   /* 26 */

  /* Motion */
  --ease-out: cubic-bezier(.25, 1, .5, 1);   /* ease-out-quart */
  --t-fast: 150ms;
  --t-rail: 200ms;

  /* Layout */
  --rail-gap: 12px;
  --rail-w: 56px;
  --rail-open-w: 232px;
  --content-max: 1280px;
  --scrollbar-thumb: rgba(83, 88, 103, .3);
  --scrollbar-thumb-hover: rgba(83, 88, 103, .5);
  --bell-size: 40px;
  --bell-lane: 60px;     /* bell size plus breathing room above the first row of content */
  --topbar-h: 56px;      /* narrow screens: the bar that replaces the rail */
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px; -webkit-text-size-adjust: 100%;
  /* Thin, quiet scrollbars: transparent track, muted rounded thumb. Never hidden, so the cue stays. */
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-pill); }
html::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
.adm-week-scroll, .adm-bell__list { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.adm-week-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.adm-bell__list::-webkit-scrollbar { width: 6px; }
.adm-week-scroll::-webkit-scrollbar-track, .adm-bell__list::-webkit-scrollbar-track { background: transparent; }
.adm-week-scroll::-webkit-scrollbar-thumb, .adm-bell__list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-pill); }
.adm-week-scroll::-webkit-scrollbar-thumb:hover, .adm-bell__list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

body.adm {
  margin: 0;
  min-height: 100vh;
  background: var(--base);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* The three soft blobs, fixed behind everything. */
body.adm::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 6%, var(--blob-1) 0%, transparent 70%),
    radial-gradient(45% 55% at 88% 14%, var(--blob-2) 0%, transparent 70%),
    radial-gradient(50% 50% at 58% 100%, var(--blob-3) 0%, transparent 70%);
  opacity: .9;
}

/* Base element rules carry zero specificity (:where) so any single-class component rule wins. */
:where(.adm) :where(h1, h2, h3, h4) { margin: 0; font-weight: 600; letter-spacing: -.01em; }
:where(.adm) :where(p) { margin: 0; }
:where(.adm) :where(a) { color: var(--blue-ink); text-decoration: none; }  /* --blue-ink: 5.9:1 on the page, 6.3:1 in a panel */
:where(.adm) :where(a:hover) { text-decoration: underline; text-underline-offset: 2px; }
/* One focus ring everywhere: 2px --blue with a 2px gap (4.7:1 on a panel, 3.7:1 against ink fills).
   Components don't replace it; text fields also turn their border blue. */
.adm :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.adm [x-cloak] { display: none !important; }

.adm-muted { color: var(--muted); }
.adm-num { font-variant-numeric: tabular-nums; font-weight: 500; }
.adm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.adm-skip {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 100;
  padding: var(--s2) var(--s3); border-radius: var(--r-control);
  background: var(--ink); color: var(--on-ink);
  transform: translateY(-200%);
}
.adm-skip:focus { transform: none; }

/* ---------- Layout ---------- */

.adm-main {
  /* The top band is the bell's lane, so it never covers a page header's actions. */
  padding: var(--bell-lane) var(--s6) var(--s7);
  padding-left: calc(var(--rail-gap) + var(--rail-w) + var(--s6));
}
/* The pin only applies where there is room for a 232px sidebar beside the content. */
@media (min-width: 900px) {
  .rail-pinned .adm-main { padding-left: calc(var(--rail-gap) + var(--rail-open-w) + var(--s6)); }
}

.adm-container {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.adm-page-actions { display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
/* A form's action row sits below its fields; flex stacks already space it via gap. */
form > .adm-page-actions:not(:first-child) { margin-top: var(--s5); }
form.adm-stack > .adm-page-actions { margin-top: 0; }

.adm-stack { display: flex; flex-direction: column; gap: var(--s4); }
.adm-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.adm-grid { display: grid; gap: var(--s4); }
.adm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .adm-grid--3, .adm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  /* The top bar replaces the rail, so content gets the full width back. */
  .adm-main { padding: calc(var(--topbar-h) + var(--s4)) var(--s4) var(--s5); }
  .adm-grid--2, .adm-grid--3, .adm-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Rail ---------- */

.adm-rail {
  position: fixed;
  top: var(--rail-gap);
  bottom: var(--rail-gap);
  left: var(--rail-gap);
  width: var(--rail-w);
  z-index: 50;
}

/* Collapsed column and the wider sheet that fades in over the content. */
.adm-rail__base,
.adm-rail__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--r-card);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.adm-rail__base {
  width: var(--rail-w);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.adm-rail__sheet {
  width: var(--rail-open-w);
  background: var(--glass-strong);
  box-shadow: var(--sheet-shadow);
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity var(--t-rail) var(--ease-out), transform var(--t-rail) var(--ease-out);
}

.adm-rail__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2);
}
.adm-rail__group { display: flex; flex-direction: column; gap: var(--s1); }
.adm-rail__group--end { margin-top: auto; }
.adm-rail__divider { border: 0; height: 1px; margin: var(--s1) var(--s2); background: rgba(20, 22, 28, .1); flex: none; }
.adm-rail__brand { margin-bottom: var(--s3); }
.adm-rail__link, .adm-rail__divider, .adm-rail__group { flex-shrink: 0; }

/* Short windows: tighten the rail so the last item keeps its bottom padding. */
@media (max-height: 760px) {
  .adm-rail .adm-rail__inner, .adm-rail .adm-rail__group { gap: 2px; }
  .adm-rail .adm-rail__brand { margin-bottom: var(--s1); }
  .adm-rail .adm-rail__divider { margin: 2px var(--s2); }
  .adm-rail .adm-rail__link, .adm-rail .adm-rail__icon { height: 36px; }
}
@media (max-height: 620px) {
  .adm-rail .adm-rail__link, .adm-rail .adm-rail__icon { height: 32px; }
  .adm-rail .adm-rail__brand { margin-bottom: var(--s1-5); }
}

.adm-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
/* Full-width row highlight, only live while the rail is open. */
.adm-rail__link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--rail-open-w) - 2 * var(--s2));
  border-radius: var(--r-control);
  background: var(--hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.adm-rail__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-control);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.adm-rail__icon svg { width: 20px; height: 20px; }
.adm-rail__label {
  position: absolute;
  left: 52px;
  white-space: nowrap;
  font-weight: 500;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition: opacity var(--t-rail) var(--ease-out), transform var(--t-rail) var(--ease-out);
}

.adm-rail__link:hover .adm-rail__icon { background: var(--hover); color: var(--ink); }
.adm-rail__link[aria-current="page"] .adm-rail__icon { background: var(--ink); color: var(--on-ink); }
.adm-rail__link[aria-current="page"] .adm-rail__label { color: var(--ink); font-weight: 600; }
.adm-rail__link:focus-visible { outline: none; }
.adm-rail__link:focus-visible .adm-rail__icon { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--blue); }

/* The bike mark: a wide image fitted into the rail's 40px icon slot. */
.adm-rail__mark {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.adm-rail__brand .adm-rail__label { color: var(--ink); font-weight: 700; letter-spacing: -.02em; font-size: var(--fs-md); }
.adm-rail__brand .adm-rail__label span { color: var(--blue); }
.adm-rail__brand:hover .adm-rail__icon { background: none; }

.adm-rail__pin[aria-pressed="true"] .adm-rail__icon { color: var(--blue); }

/* Open: hover, keyboard focus inside, or pinned (pinned only from 900px, below). */
.adm-rail:hover .adm-rail__sheet,
.adm-rail:focus-within .adm-rail__sheet {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.adm-rail:hover .adm-rail__label,
.adm-rail:focus-within .adm-rail__label {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Hover intent: a pointer passing over the rail on its way to the content doesn't flash the sheet.
   The delay applies to opening only; leaving falls back to the base rule and closes at once. */
.adm-rail:hover:not(:focus-within) .adm-rail__sheet,
.adm-rail:hover:not(:focus-within) .adm-rail__label { transition-delay: 120ms; }
.adm-rail:hover .adm-rail__link::before,
.adm-rail:focus-within .adm-rail__link::before { pointer-events: auto; }
.adm-rail:hover .adm-rail__link:hover::before,
.adm-rail:focus-within .adm-rail__link:hover::before { opacity: 1; }
.adm-rail .adm-rail__link:focus-visible::before { opacity: 1; box-shadow: inset 0 0 0 2px var(--blue); }
/* The row highlight replaces the icon hover once the labels are showing. */
.adm-rail:hover .adm-rail__link:hover .adm-rail__icon { background: none; }
.adm-rail:hover .adm-rail__link[aria-current="page"] .adm-rail__icon { background: var(--ink); }

@media (min-width: 900px) {
  .rail-pinned .adm-rail__sheet,
  .rail-pinned .adm-rail__label { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0ms; }
  .rail-pinned .adm-rail__link::before { pointer-events: auto; }
  .rail-pinned .adm-rail__link:hover::before { opacity: 1; }
  .rail-pinned .adm-rail__link:hover .adm-rail__icon { background: none; }
  .rail-pinned .adm-rail__link[aria-current="page"] .adm-rail__icon { background: var(--ink); }
}
/* Below 900px a pinned sheet would cover most of the page, so the pin is ignored and hidden. */
@media (max-width: 899.98px) {
  .adm-rail__pin { display: none; }
}

/* ---------- Narrow screens: top bar + drawer ---------- */

/* From 640px up only the slot (the bell) shows; the wrapper and bar add no boxes of their own. */
.adm-narrow, .adm-topbar { display: contents; }
.adm-topbar__brand, .adm-topbar__title, .adm-topbar__menu, .adm-drawer, .adm-drawer__scrim { display: none; }

@media (max-width: 639.98px) {
  .adm-rail { display: none; }

  .adm-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 45;
    display: flex; align-items: center; gap: var(--s3);
    height: var(--topbar-h);
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
  }
  /* The bar's frost lives on a layer behind its content, not on the bar itself: a backdrop-filter on the bar
     would make it the backdrop root of everything inside it, so the bell panel's own blur could only see the
     bar, never the page under it (and the page showed through the panel unblurred). */
  .adm-topbar::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .adm-topbar__brand { display: flex; flex: none; border-radius: var(--r-control); }
  .adm-topbar__brand:hover { text-decoration: none; }
  .adm-topbar__brand .adm-rail__mark { width: 36px; height: 36px; }
  .adm-topbar__title {
    display: block; flex: 1; min-width: 0;
    font-size: var(--fs-md); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .adm-topbar__menu {
    display: inline-flex; align-items: center; gap: var(--s2); flex: none;
    min-height: 40px; padding: 0 var(--s3);
    border: 1px solid var(--line-strong); border-radius: var(--r-control);
    background: var(--control); color: var(--ink);
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .adm-topbar__menu svg { width: 20px; height: 20px; }

  /* The bell joins the bar as an ordinary flex item. */
  .adm-topbar .adm-bell { position: relative; top: auto; right: auto; flex: none; }
  .adm-topbar .adm-bell__btn { box-shadow: none; }

  .adm-drawer__scrim {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: var(--scrim);
  }
  .adm-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 61;
    width: min(300px, calc(100vw - var(--s7)));
    padding: var(--s3) var(--s3) var(--s4);
    background: var(--surface);
    box-shadow: var(--pop-shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--t-rail) var(--ease-out), opacity var(--t-rail) var(--ease-out);
  }
  .adm-drawer.is-off { transform: translateX(-16px); opacity: 0; }
  .adm-drawer__scrim { transition: opacity var(--t-rail) var(--ease-out); }

  .adm-drawer-open, .adm-drawer-open body { overflow: hidden; }
}

.adm-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 0 var(--s3) var(--s2); }
.adm-drawer__title { font-size: var(--fs-md); font-weight: 600; }
.adm-drawer__close {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--r-control); background: none; color: var(--muted); cursor: pointer;
}
.adm-drawer__close:hover { background: var(--hover); color: var(--ink); }
.adm-drawer__close svg { width: 20px; height: 20px; }
.adm-drawer__nav { flex: 1; display: flex; flex-direction: column; }
.adm-drawer__group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-drawer__group--end { margin-top: auto; padding-top: var(--s4); }
.adm-drawer__divider { border: 0; height: 1px; margin: var(--s2) var(--s2); background: var(--line); }
.adm-drawer__link {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: 44px; padding: 0 var(--s2);
  border: 0; border-radius: var(--r-control); background: none;
  color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
.adm-drawer__link:hover { background: var(--hover); text-decoration: none; }
.adm-drawer__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); color: var(--muted); }
.adm-drawer__icon svg { width: 20px; height: 20px; }
.adm-drawer__link[aria-current="page"] { font-weight: 600; }
.adm-drawer__link[aria-current="page"] .adm-drawer__icon { background: var(--ink); color: var(--on-ink); }

/* ---------- Page header ---------- */

.adm-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.adm-page-header__text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.adm-page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  align-self: flex-start;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 500;
}
.adm-page-header__back svg { width: 16px; height: 16px; }
.adm-page-header__back:hover { color: var(--ink); text-decoration: none; }
.adm-page-header__title {
  font-size: var(--fs-xl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}
.adm-page-header__subtitle { color: var(--muted); }
.adm-page-header__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Panel (the frosted surface) ---------- */

.adm-panel {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: var(--s4) var(--s5) var(--s5);
  min-width: 0;
}
.adm-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.adm-panel__title { font-size: var(--fs-md); font-weight: 600; }
.adm-panel__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.adm-panel--flush { padding: var(--s1) var(--s2); }
@media (max-width: 639.98px) {
  .adm-panel { padding: var(--s3) var(--s4) var(--s4); }
  .adm-panel--flush { padding: var(--s1) var(--s2); }
}

/* Simple divided list used inside panels */
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px dashed var(--line-dashed);
}
.adm-list > li:last-child { border-bottom: 0; }

/* Driver row: identity left, status/actions right; actions drop below when narrow */
.adm-list > li.adm-driver { flex-wrap: wrap; row-gap: var(--s1); }
.adm-driver__who { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-driver__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-driver__who a { text-decoration: none; font-variant-numeric: tabular-nums; }
.adm-driver__who a:hover { text-decoration: underline; }
.adm-driver__meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; white-space: nowrap; }

/* ---------- Chip ---------- */

.adm-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--tint-neutral);
  color: var(--muted);
}
.adm-chip--blue { background: var(--tint-blue); color: var(--blue-ink); }
.adm-chip--amber { background: var(--tint-amber); color: var(--amber-ink); }
.adm-chip--green { background: var(--tint-green); color: var(--green-ink); }
.adm-chip--red { background: var(--tint-red); color: var(--danger); }

/* ---------- Progress (segmented, like the app's order card) ---------- */

.adm-progress { display: flex; gap: 3px; width: 100%; max-width: 120px; }
.adm-progress__seg { flex: 1; height: 4px; border-radius: 2px; background: var(--track); }
.adm-progress__seg.is-done { background: var(--amber); }
.adm-progress.is-complete .adm-progress__seg { background: var(--green-ink); }

/* ---------- Timeline ---------- */

.adm-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s5); }
.adm-timeline__step { position: relative; padding-bottom: var(--s4); }
.adm-timeline__step:last-child { padding-bottom: 0; }
.adm-timeline__step::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--track);
}
.adm-timeline__step::after {
  content: '';
  position: absolute;
  left: -14px;
  top: 20px;
  bottom: 2px;
  border-left: 1px dashed var(--track-strong);
}
.adm-timeline__step:last-child::after { display: none; }
.adm-timeline__step.is-done::before { background: var(--ink); }
.adm-timeline__step.is-now::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(242, 169, 59, .25); }
.adm-timeline__head { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.adm-timeline__label { font-weight: 600; }
.adm-timeline__step.is-todo .adm-timeline__label { color: var(--muted); font-weight: 500; }
.adm-timeline__at { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.adm-timeline__note { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Capacity pip cell ---------- */

.adm-pip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-control);
  border: 1px solid rgba(20, 22, 28, .05);
  background: rgba(255, 255, 255, .82);
  color: var(--ink);
  font: inherit;
  text-align: left;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
button.adm-pip { cursor: pointer; }
button.adm-pip:hover { border-color: rgba(30, 115, 190, .35); }
button.adm-pip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.adm-pip__track { display: flex; gap: 3px; }
.adm-pip__bar { flex: 1; height: 6px; border-radius: 3px; background: oklch(0.84 0.02 250); }
.adm-pip__bar.is-booked { background: var(--blue); }
.adm-pip__label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); line-height: 1.1; }
.adm-pip__reason { font-size: var(--fs-sm); font-weight: 500; color: var(--danger-ink); line-height: 1.1; }

.adm-pip.is-full,
.adm-pip.is-over { background: oklch(0.95 0.045 75); border-color: oklch(0.85 0.08 75); }
.adm-pip.is-full .adm-pip__bar,
.adm-pip.is-over .adm-pip__bar { background: var(--amber); }
.adm-pip.is-full .adm-pip__label,
.adm-pip.is-over .adm-pip__label { color: var(--amber-ink); }
.adm-pip.is-over .adm-pip__label { font-weight: 600; }

.adm-pip.is-blocked {
  background: repeating-linear-gradient(135deg, oklch(0.95 0.03 25) 0 6px, oklch(0.92 0.045 25) 6px 12px);
  border-color: oklch(0.85 0.06 25);
}
.adm-pip.is-blocked .adm-pip__label { color: var(--danger); font-weight: 600; }

.adm-pip.is-closed {
  background: transparent;
  border: 1px dashed oklch(0.82 0.01 250);
  align-items: center;
}

/* Week grid of pip cells */
.adm-week { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: var(--s1-5); align-items: stretch; }
.adm-week__day { text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.adm-week__day small { display: block; font-weight: 500; font-size: var(--fs-sm); }
.adm-week__time { display: flex; align-items: center; justify-content: flex-end; padding-right: var(--s1-5); font-size: var(--fs-sm); color: var(--muted); }

.adm-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
/* Legend swatches reuse the pip colours, so the key always matches the cells. */
.adm-legend__sw--booked { background: var(--blue); }
.adm-legend__sw--free { background: oklch(0.84 0.02 250); }
.adm-legend__sw--full { background: var(--amber); }
.adm-legend__sw--blocked { background: repeating-linear-gradient(135deg, oklch(0.95 0.03 25) 0 4px, oklch(0.92 0.045 25) 4px 8px); }
.adm-legend__sw--closed { border: 1px dashed oklch(0.82 0.01 250); }
.adm-legend__sw { display: inline-block; width: 22px; height: 12px; border-radius: var(--r-sm); vertical-align: -2px; margin-right: var(--s1-5); }

/* ---------- Field (label above, like the app's LabeledField) ---------- */

.adm-field { display: flex; flex-direction: column; gap: var(--s1-5); min-width: 0; }
.adm-field__label { font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.adm-field__optional { font-weight: 400; }
.adm-field__control {
  width: 100%;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  background: var(--control);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
textarea.adm-field__control { min-height: 96px; resize: vertical; line-height: 1.45; }
select.adm-field__control {
  appearance: none;
  padding-right: var(--s6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.adm-field__control::placeholder { color: var(--placeholder); font-weight: 400; }
.adm-field__control:hover { border-color: var(--line-strong-hover); }
.adm-field__control:focus { border-color: var(--blue); }
.adm-field__control[aria-invalid="true"] { border-color: var(--danger); }
.adm-field__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }
.adm-field__control:disabled { opacity: .6; cursor: not-allowed; }
.adm-field__hint { font-size: var(--fs-sm); color: var(--muted); }
.adm-field__error { font-size: var(--fs-sm); color: var(--danger); font-weight: 500; }
/* 16px keeps iOS Safari from zooming the page when a field takes focus. */
@media (max-width: 639.98px) {
  .adm-field__control { font-size: var(--fs-md); }
}

/* ---------- Button ---------- */

.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1-5);
  min-height: 36px;
  padding: 0 var(--s4);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.adm-btn svg { width: 16px; height: 16px; }
.adm-btn--primary { background: var(--ink); color: var(--on-ink); }
.adm-btn--primary:hover { background: var(--ink-hover); }
.adm-btn--secondary { background: rgba(255, 255, 255, .8); border-color: rgba(20, 22, 28, .1); color: var(--ink); }
.adm-btn--secondary:hover { background: var(--surface-solid); border-color: rgba(20, 22, 28, .18); }
.adm-btn--quiet { background: transparent; color: var(--muted); padding: 0 var(--s3); }
.adm-btn--quiet:hover { background: var(--hover); color: var(--ink); }
.adm-btn--danger { background: rgba(255, 255, 255, .8); border-color: rgba(179, 38, 30, .28); color: var(--danger); }
.adm-btn--danger:hover { background: var(--tint-red); border-color: rgba(179, 38, 30, .4); }
.adm-btn:disabled, .adm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- Empty state ---------- */

.adm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s7) var(--s5);
  text-align: center;
}
.adm-empty__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  color: var(--muted);
}
.adm-empty__icon svg { width: 22px; height: 22px; }
.adm-empty__title { font-size: var(--fs-md); font-weight: 600; }
.adm-empty__body { color: var(--muted); max-width: 44ch; }
.adm-empty__actions { margin-top: var(--s2); display: flex; gap: var(--s2); }

/* ---------- Flash ---------- */

.adm-flash {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-radius: var(--r-card);
  border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--glass-shadow);
  font-weight: 500;
}
.adm-flash__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.adm-flash--success .adm-flash__dot { background: var(--green-ink); }
.adm-flash--error { background: var(--tint-red-soft); border-color: rgba(179, 38, 30, .2); color: var(--danger); }
.adm-flash--error .adm-flash__dot { background: var(--danger); }
.adm-flash__text { flex: 1; }
.adm-flash--warn { background: var(--tint-amber-soft); border-color: rgba(122, 77, 0, .18); color: var(--amber-ink); }
.adm-flash--warn .adm-flash__dot { background: var(--amber); }
.adm-flash__close {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none;
  color: inherit; cursor: pointer; opacity: .7;
}
.adm-flash__close:hover { opacity: 1; background: var(--hover); }
.adm-flash__close svg { width: 16px; height: 16px; }

/* ---------- Tabs (pill segments) ---------- */

.adm-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; }
.adm-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s1-5);
  height: 32px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .6);
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
/* Below a page header, above the page body. */
.adm-section-tabs { margin: var(--s4) 0; }
button.adm-tabs__tab { border: 0; font-family: inherit; cursor: pointer; }
.adm-tabs__tab:hover { background: rgba(255, 255, 255, .9); color: var(--ink); }
.adm-tabs__tab[aria-current="page"] { background: var(--ink); color: var(--on-ink); }

/* ---------- Style guide helpers ---------- */

.adm-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s3); }
.adm-swatch { display: flex; flex-direction: column; gap: var(--s1-5); font-size: var(--fs-sm); }
.adm-swatch__chip { height: 48px; border-radius: var(--r-control); border: 1px solid var(--line); }
.adm-swatch code { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .adm *, .adm *::before, .adm *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
  .adm-rail__sheet, .adm-rail__label { transform: none; }
}

/* ---------- Stations ---------- */

.adm-station-card {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(20, 22, 28, .08);
  color: var(--ink); text-decoration: none;
}
.adm-station-card:hover { background: var(--surface-solid); border-color: rgba(30, 115, 190, .35); }
.adm-station-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.adm-station-card__facts { margin: var(--s2) 0 0; display: flex; flex-direction: column; gap: var(--s1); }
.adm-station-card__facts div { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); }
.adm-station-card__facts dt { color: var(--muted); }
.adm-station-card__facts dd { margin: 0; font-weight: 500; }

.adm-rings { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.adm-rings svg { width: 100%; max-width: 220px; height: auto; }
.adm-rings__ext { fill: rgba(58, 186, 241, .12); stroke: var(--sky); stroke-width: 1.5; stroke-dasharray: 5 4; }
.adm-rings__core { fill: rgba(30, 115, 190, .18); stroke: var(--blue); stroke-width: 1.5; }
.adm-rings__dot { fill: var(--ink); }
.adm-rings figcaption { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; font-size: var(--fs-sm); font-weight: 500; }
.adm-rings__tag { padding: 2px var(--s2); border-radius: var(--r-pill); }
.adm-rings__tag--core { background: var(--tint-blue); color: var(--blue-ink); }
.adm-rings__tag--ext { background: rgba(58, 186, 241, .14); color: var(--blue-ink); }

/* ---------- Station windows & blocks ---------- */

/* The grid panel sits above later panels so its popovers aren't painted under them (panels blur, so each is a stacking context). */
.adm-panel--raised { position: relative; z-index: 2; }

.adm-weeknav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.adm-weeknav__range { min-width: 104px; text-align: center; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-weeknav a.adm-btn { min-width: 32px; padding: 0 var(--s2); }
.adm-week__day[aria-current="date"] { color: var(--blue-ink); }

.adm-cellpop { position: relative; min-width: 0; display: flex; }
.adm-pop {
  position: absolute;
  top: calc(100% + var(--s1-5));
  left: 0;
  z-index: 30;
  width: 288px;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-pop);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--pop-shadow);
  text-align: left;
}
.adm-pop--end { left: auto; right: 0; }
.adm-pop__section { display: flex; flex-direction: column; gap: var(--s2); }
.adm-pop__section + .adm-pop__section { border-top: 1px solid var(--line); padding-top: var(--s3); }
.adm-pop__title { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
.adm-pop__note { margin: 0; font-size: var(--fs-base); color: var(--muted); }
.adm-pop__row { display: flex; align-items: flex-end; gap: var(--s2); }
.adm-pop__row > .adm-field { flex: 1; }
/* A panel's backdrop-filter traps the popover's z-index inside it, so a later panel would paint over it.
   While a popover is open (Alpine drops x-cloak and the inline display:none), lift its panel or header above
   its siblings. Stays below the rail (z-index 50). */
.adm-panel:has(.adm-pop:not([x-cloak]):not([style*="display: none"])),
.adm-page-header:has(.adm-pop:not([x-cloak]):not([style*="display: none"])) { position: relative; z-index: 40; }

/* Phones: a popover spans the row that holds its trigger and opens right below it, so it can't run off-screen.
   Placed before the windows-grid docking rule below so that rule (same specificity) still wins there. */
@media (max-width: 639.98px) {
  .adm-page-header__actions, .adm-panel__head, .adm-list > li { position: relative; }
  .adm-cellpop { position: static; }
  .adm-cellpop > .adm-pop, .adm-cellpop > .adm-pop--end { left: 0; right: 0; width: auto; max-width: none; }
}
/* Narrow screens: the grid scrolls sideways and popovers dock to the bottom of the grid panel
   (the panel's backdrop-filter makes it the containing block, so the scroller doesn't clip them). */
@media (max-width: 900px) {
  .adm-week-scroll { overflow-x: auto; }
  .adm-week-scroll .adm-week { min-width: 600px; }
  .adm-week-scroll .adm-pop, .adm-week-scroll .adm-pop--end { position: fixed; top: auto; left: var(--s4); right: var(--s4); bottom: var(--s4); width: auto; max-width: none; }
  /* Everywhere else popovers stay under their button and never outgrow the viewport. */
  .adm-pop { max-width: calc(100vw - 2 * var(--s4)); }
}

.adm-daywins { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px dashed var(--line-dashed); }
.adm-daywins:last-of-type { border-bottom: 0; }
.adm-daywins__day { font-weight: 600; padding-top: var(--s1-5); }
.adm-daywins__list { display: flex; flex-direction: column; gap: var(--s2); }
.adm-winrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-height: 32px; }
.adm-winrow__time { min-width: 112px; font-weight: 500; font-variant-numeric: tabular-nums; }
.adm-winrow__cap { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.adm-winrow__actions { margin-left: auto; display: flex; gap: var(--s1); }
.adm-winedit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s3); align-items: end; padding: var(--s3); border-radius: var(--r-control); background: rgba(255, 255, 255, .6); }
.adm-days { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); margin: 0; padding: 0; border: 0; min-width: 0; }
.adm-days legend { width: 100%; margin-bottom: var(--s1); padding: 0; }
.adm-winadd { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.adm-check { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-base); font-weight: 500; min-height: 40px; }
.adm-check input { width: 16px; height: 16px; accent-color: var(--blue); }
@media (max-width: 720px) {
  .adm-daywins { grid-template-columns: minmax(0, 1fr); }
  .adm-winedit { grid-template-columns: minmax(0, 1fr); }
  .adm-winadd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Price lists ---------- */

.adm-pricelist__note { margin: 0 0 var(--s3); font-size: var(--fs-sm); }
.adm-pricelist__jump { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s4); font-size: var(--fs-base); font-weight: 500; }
.adm-pricelist__jump a { color: var(--blue-ink); text-decoration: none; }
.adm-pricelist__jump a:hover { text-decoration: underline; }
.adm-pricelist__group { margin: var(--s4) 0 var(--s1); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.adm-pricelist__group:first-child { margin-top: 0; }
.adm-pricelist__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.adm-entry { display: block !important; }
.adm-entry__row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.adm-entry__main { flex: 1; min-width: 0; }
.adm-entry__label { font-weight: 500; }
.adm-entry__code { font-size: var(--fs-sm); color: var(--muted); background: rgba(20, 22, 28, .05); padding: 1px var(--s1-5); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.adm-entry__detail { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.adm-entry__price { min-width: 104px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.adm-entry__actions { display: flex; gap: var(--s1); }
/* The list is the query container, so rows react to the room they have (a narrow phone or a narrow column), not the viewport. */
.adm-entries { container-type: inline-size; container-name: adm-entries; }
/* Narrow: label, code and chips; then the detail; then price on the left with Edit / Turn off on the right. */
@container adm-entries (max-width: 479px) {
  .adm-entry__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .adm-entry__main { grid-column: 1 / -1; }
  .adm-entry__price { text-align: left; min-width: 0; }
  .adm-entry__actions { justify-self: end; }
}
.adm-entryform { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border-radius: var(--r-control); background: rgba(255, 255, 255, .6); }
.adm-entryform__title { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.adm-entryform__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.adm-entryform__wide { grid-column: 1 / -1; }
.adm-entryadd { margin-top: var(--s3); }
@media (max-width: 720px) {
  .adm-entryform__grid { grid-template-columns: minmax(0, 1fr); }
  .adm-entry__price { text-align: left; min-width: 0; }
}

/* Waitlist */
.adm-filters { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.adm-filters .adm-field { min-width: 160px; }
.adm-wl { display: flex; flex-direction: column; gap: var(--s3); }
.adm-wl__head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.adm-wl__name { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.adm-wl__meta { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.adm-wl__form { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.adm-wl__allow { padding: var(--s3); border-radius: var(--r-control); background: rgba(255, 255, 255, .6); display: flex; flex-direction: column; gap: var(--s3); }
.adm-wl__allow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.adm-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 720px) {
  .adm-wl__form, .adm-wl__allow-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Orders list ---------- */

.adm-orders__filters { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.adm-orders__filters .adm-field__control { width: auto; flex: 0 0 auto; min-width: 150px; }
.adm-orders__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.adm-orders__search { display: flex; align-items: center; gap: var(--s2); flex: 1 1 260px; max-width: 460px; }
.adm-orders__search .adm-field__control { flex: 1; min-width: 0; }

.adm-customers__search { display: flex; align-items: center; gap: var(--s2); max-width: 420px; }
.adm-customers__search .adm-field__control { flex: 1; min-width: 0; }

.adm-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.adm-ocard {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(0, 1fr) 110px 80px;
  align-items: center;
  gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4);
  /* A solid card, not glass: frosting stays on the rail and the main panels (.impeccable.md), and
     25 blurred cards per page would each cost a compositing layer. */
  background: var(--card);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  font-size: var(--fs-base);
  text-decoration: none;
}
.adm-ocard:hover { background: rgba(255, 255, 255, .85); border-color: rgba(30, 115, 190, .35); text-decoration: none; }
.adm-ocard__id { display: flex; flex-direction: column; gap: var(--s1-5); min-width: 0; }
.adm-ocard__num { display: block; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-ocard__new {
  display: inline-block; width: 8px; height: 8px; margin-right: var(--s1-5);
  border-radius: 50%; background: var(--blue); vertical-align: 1px;
}
.adm-ocard__who, .adm-ocard__when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ocard__who > *, .adm-ocard__when > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ocard__name { font-weight: 600; }
.adm-ocard__state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.adm-ocard__driver { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.adm-ocard__driver--pending { color: var(--amber-ink); }
.adm-ocard__driver--none { color: var(--danger); font-weight: 500; }
.adm-ocard__amount { text-align: right; font-weight: 600; }
@media (max-width: 900px) {
  .adm-ocard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .adm-ocard__id { grid-column: 1; }
  .adm-ocard__who { grid-column: 2; }
  .adm-ocard__amount { grid-column: 3; grid-row: 1; }
  .adm-ocard__when { grid-column: 1 / 3; }
  .adm-ocard__who > *, .adm-ocard__when > * { white-space: normal; overflow-wrap: anywhere; }
  .adm-ocard__state { grid-column: 3; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 639.98px) {
  .adm-ocard { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s3); }
  .adm-ocard__id { grid-column: 1; grid-row: 1; }
  .adm-ocard__amount { grid-column: 2; grid-row: 1; }
  .adm-ocard__who { grid-column: 1 / -1; grid-row: 2; }
  .adm-ocard__when { grid-column: 1 / -1; grid-row: 3; }
  .adm-ocard__state { grid-column: 1 / -1; grid-row: 4; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); }
  .adm-ocard__state .adm-chip { padding: 0 var(--s2); }
  .adm-ocard__num { font-size: var(--fs-md); }
}

/* ---------- Order detail ---------- */

.adm-odetail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.adm-odetail__col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.adm-odetail__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.adm-odetail__text { margin: 0 0 var(--s2); white-space: pre-line; overflow-wrap: anywhere; }
.adm-odetail__pay { margin-top: var(--s3); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.adm-odetail__photo { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--r-control); background: var(--tint-neutral); }
.adm-odetail__cap { margin: var(--s2) 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.adm-person { display: flex; align-items: center; gap: var(--s3); }
.adm-person__av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blob-2); font-weight: 600;
}
.adm-person__who { display: flex; flex-direction: column; min-width: 0; }
.adm-person__who > * { overflow-wrap: anywhere; }
.adm-person__who a { text-decoration: none; font-variant-numeric: tabular-nums; }
.adm-person__who a:hover { text-decoration: underline; }
.adm-person__note { margin: var(--s3) 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.adm-price__line { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s1-5) 0; }
.adm-price__line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.adm-price__line > :last-child { flex: 0 0 auto; }
.adm-price__note { font-size: var(--fs-sm); }
.adm-price__total {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s2); padding-top: var(--s3);
  border-top: 1px dashed var(--line-dashed);
  font-size: var(--fs-md); font-weight: 600;
}
/* Bags panel: each bag's Pickup and Pre-Delivery weigh-ins stay side by side, even at phone width. */
.adm-bags__banner { flex-wrap: wrap; margin-bottom: var(--s3); }
.adm-bags__banner .adm-flash__text { flex: 1 1 14rem; }
.adm-bags { list-style: none; margin: 0; padding: 0; }
.adm-bag { padding: var(--s3) 0; border-bottom: 1px dashed var(--line-dashed); }
.adm-bag:first-child { padding-top: 0; }
.adm-bag:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-bag__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-bottom: var(--s2); }
.adm-bag__name { overflow-wrap: anywhere; }
.adm-bag__weights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.adm-bag__cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; }
.adm-bag__kind { font-size: var(--fs-sm); color: var(--muted); }
.adm-bag__lb { font-size: var(--fs-md); }
.adm-bag__thumb { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-control); background: var(--tint-neutral); }
.adm-bag__missing, .adm-bag__by { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.adm-bag__correct { margin-top: var(--s2); }
.adm-bag__correct summary { cursor: pointer; font-weight: 600; width: fit-content; }
.adm-bag__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: end; margin-top: var(--s2); }
.adm-bag__form > div:last-child { grid-column: 1 / -1; }
.adm-bags__events { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line-dashed); }
.adm-bags__event { margin: 0 0 var(--s1); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .adm-odetail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .adm-odetail__people { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contact messages inbox ---------- */
/* Must out-rank `.adm-list > li` (flex row), or the expanded body becomes a second column. */
.adm-list > li.adm-msg { display: block; padding: var(--s3) var(--s2); margin: 0 calc(-1 * var(--s2)); border-bottom: 1px dashed var(--line-dashed); border-radius: var(--r-control); }
.adm-list > li.adm-msg:last-child { border-bottom: 0; }
.adm-list > li.adm-msg.adm-msg--unread { background: rgba(58, 186, 241, .08); border-bottom-color: transparent; }
.adm-msg__head { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; }
.adm-msg__toggle {
  flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.adm-msg__subject { overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }
.adm-msg--unread .adm-msg__subject { font-weight: 700; }
.adm-msg__preview {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; color: var(--muted); font-size: var(--fs-sm);
}
.adm-msg__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: var(--fs-sm); }
.adm-msg__side > * { overflow-wrap: anywhere; }
.adm-msg__body { min-width: 0; margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-control); background: rgba(255, 255, 255, .6); }
.adm-msg__text { margin: 0 0 var(--s3); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .adm-msg__head { flex-wrap: wrap; gap: var(--s1); }
  .adm-msg__toggle { flex-basis: 100%; }
  /* One compact meta line: name · phone, time on the right. */
  .adm-msg__side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s1-5); text-align: left; color: var(--muted); }
  .adm-msg__side > :first-child { color: var(--ink); }
  .adm-msg__side > :not(:first-child):not(:last-child)::before { content: '·'; margin-right: var(--s1-5); }
  .adm-msg__side > :last-child:not(:first-child) { margin-left: auto; }
}
.adm-msg__body .adm-row > * { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Today ---------- */
/* The week's figures as one quiet line of links under "Needs attention" (no hero tiles). */
.adm-today-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); color: var(--muted); }
.adm-today-figures a { font-weight: 500; }
.adm-today-figures__sep { color: var(--muted); }
/* Weight-check line above the needs-attention rows. */
.adm-today-weights, .adm-today-cue { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0 0 var(--s2); }
.adm-today-row { flex-wrap: wrap; gap: var(--s2) var(--s3); }
.adm-today-row .adm-chip { flex: 0 0 auto; }
.adm-today-row__main { flex: 1 1 16rem; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.adm-today-row__main:hover { text-decoration: underline; }

/* ---------- Login (stand-alone page) ---------- */

.adm-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s5) var(--s4);
}
.adm-login__card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.adm-login__head { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; }
.adm-login__head .adm-login__mark { width: 64px; height: 40px; margin-bottom: var(--s2); }
.adm-login__wordmark { margin: 0 0 var(--s4); color: var(--ink); font-weight: 800; letter-spacing: -.02em; font-size: var(--fs-lg); }
.adm-login__wordmark span { color: var(--blue); }
.adm-login__title { font-size: var(--fs-xl); }
.adm-login__pw { position: relative; }
.adm-login__toggle {
  position: absolute;
  top: -6px;
  right: 0;
  min-height: 28px;
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--blue-ink);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}
.adm-login__toggle:hover { background: var(--hover); }
.adm-login__submit { width: 100%; min-height: 40px; }
@media (max-width: 480px) {
  .adm-login__card { padding: var(--s5) var(--s4); }
}

/* ---------- Notification bell ---------- */

/* Floats top right, above page content (and above a lifted panel, z 40, while open) but under the rail (z 50). */
.adm-bell { position: fixed; top: var(--s3); right: var(--s5); z-index: 35; }
.adm-bell.is-open { z-index: 45; }
.adm-bell__btn {
  position: relative;
  display: grid; place-items: center;
  width: var(--bell-size); height: var(--bell-size);
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.adm-bell__btn:hover { background: rgba(255, 255, 255, .75); }
.adm-bell__btn svg { width: 20px; height: 20px; }
.adm-bell__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--blue); color: var(--on-ink);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Frosted glass that sits above the page: a denser fill and a stronger blur than page panels, so text under it
   melts into colour and never competes with the list. Where backdrop-filter is unsupported it is near-solid.
   No ancestor may carry filter, backdrop-filter, opacity or mask, or the blur stops seeing the page. */
.adm-bell__panel {
  position: absolute; top: calc(100% + var(--s1-5)); right: 0;
  width: min(360px, calc(100vw - var(--rail-gap) - var(--rail-w) - 2 * var(--s4)));
  max-height: min(64vh, 460px);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: var(--s1-5);
  border-radius: var(--r-pop);
  background: var(--glass-pop);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--pop-shadow);
  -webkit-backdrop-filter: var(--glass-pop-blur);
  backdrop-filter: var(--glass-pop-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .adm-bell__panel { background: var(--surface); }
}
/* The list scrolls; the footer stays put. When rows remain below, the list's bottom edge fades out (a mask on the
   list, not the panel, so the glass itself never fades) and a cut-off row reads as "scroll for more". */
.adm-bell__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-padding-bottom: var(--s6);   /* keyboard focus scrolls a row clear of the fade */
}
.adm-bell__list.has-more {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--s6)), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--s6)), transparent);
}
.adm-bell__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--s2);
  padding: var(--s2) var(--s3) var(--s2) var(--s2);
  border-radius: var(--r-control);   /* panel radius minus its padding, so the corners nest */
  color: var(--ink); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out);
}
.adm-bell__item:hover { background: var(--hover); text-decoration: none; }
/* Inset ring: the scrolling list would clip an outside one. */
.adm-bell__item:focus-visible { background: var(--hover); outline-offset: -2px; }
/* The dot is centred on the title's first line, whatever the font size. */
.adm-bell__dot {
  width: 6px; height: 6px; margin: calc(var(--fs-base) * .7 - 3px) var(--s1) 0;
  border-radius: 50%; background: var(--blue);
}
.adm-bell__dot.is-message { background: var(--amber); }
.adm-bell__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-bell__title { font-size: var(--fs-base); font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bell__detail { font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Time sits on the title's line, quieter than the detail's text. */
.adm-bell__at { font-size: var(--fs-sm); line-height: calc(var(--fs-base) * 1.4); color: var(--muted); white-space: nowrap; }
.adm-bell__empty { margin: 0; padding: var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.adm-bell__skeleton { list-style: none; margin: 0; padding: var(--s2) var(--s3) var(--s1); display: flex; flex-direction: column; gap: var(--s3); }
.adm-bell__skeleton li { height: 28px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--tint-neutral), var(--surface-solid), var(--tint-neutral)); background-size: 200% 100%; animation: adm-shimmer 1.2s linear infinite; }
.adm-bell__skeleton li:nth-child(2) { width: 80%; }
.adm-bell__skeleton li:nth-child(3) { width: 60%; }
@keyframes adm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .adm-bell__skeleton li { animation: none; }
}
.adm-bell__retry { padding: 0; border: 0; background: none; color: var(--blue-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.adm-bell__footer {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; margin-top: var(--s1-5);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-control) var(--r-control);
  font-size: var(--fs-base); font-weight: 500; color: var(--blue-ink);
  transition: background-color var(--t-fast) var(--ease-out);
}
.adm-bell__footer:hover { background: var(--hover); text-decoration: none; }
.adm-bell__footer:focus-visible { outline-offset: -2px; }
@media (max-width: 639.98px) {
  /* In the top bar the bell isn't at the right edge (Menu is), so its panel spans the viewport under the bar. */
  .adm-bell__panel {
    position: fixed; top: calc(var(--topbar-h) + var(--s1-5)); left: var(--s4); right: var(--s4); width: auto;
    max-height: min(70vh, 520px);
  }
}

/* ---------- Settings hub ---------- */
.adm-hub { display: flex; flex-direction: column; gap: var(--s5); }
.adm-hub__title { margin: 0 0 var(--s2); font-size: var(--fs-md); font-weight: 600; }
.adm-hub__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s2);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .adm-hub__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .adm-hub__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.adm-hub__card {
  display: flex; align-items: center; gap: var(--s3);
  height: 100%; padding: var(--s3);
  border-radius: var(--r-control);
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  color: var(--ink); text-decoration: none;
  transition: background var(--t-fast) var(--ease-out);
}
.adm-hub__card:hover { background: var(--control); text-decoration: none; }
.adm-hub__icon {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-control);
  background: var(--tint-blue); color: var(--blue-ink);
}
.adm-hub__icon svg { width: 20px; height: 20px; }
.adm-hub__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adm-hub__label { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
.adm-hub__desc { font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }

/* ---------- Prose (rendered legal pages and the Markdown preview) ---------- */

.adm-prose { max-width: 70ch; font-size: var(--fs-md); line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.adm-prose > :first-child { margin-top: 0; }
.adm-prose > :last-child { margin-bottom: 0; }
.adm-prose h1, .adm-prose h2, .adm-prose h3, .adm-prose h4 { line-height: 1.25; font-weight: 700; margin: var(--s5) 0 var(--s2); }
.adm-prose h1 { font-size: var(--fs-xl); }
.adm-prose h2 { font-size: var(--fs-lg); }
.adm-prose h3, .adm-prose h4 { font-size: var(--fs-md); }
.adm-prose p { margin: 0 0 var(--s3); }
.adm-prose ul, .adm-prose ol { margin: 0 0 var(--s3); padding-left: 1.4em; }
.adm-prose li { margin-bottom: var(--s1); }
.adm-prose a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.adm-prose img { max-width: 100%; height: auto; }
.adm-prose table { display: block; max-width: 100%; overflow-x: auto; }

textarea.adm-legal__source { min-height: max(24rem, 50vh); resize: vertical; }

/* ---------- Business settings ---------- */
.adm-form-narrow { max-width: 560px; min-width: 0; }
textarea.adm-key { min-height: 72px; overflow-wrap: anywhere; word-break: break-all; }
.adm-choice-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.adm-choice { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--glass-edge); border-radius: var(--r-control); cursor: pointer; }
.adm-choice input { width: 18px; height: 18px; margin: 0; flex: none; }
.adm-profile { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; min-width: 0; }
.adm-profile__text { min-width: 0; flex: 1 1 220px; display: flex; flex-direction: column; gap: var(--s3); }
.adm-profile__name { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.adm-profile__facts { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.adm-profile__facts dt { color: var(--muted); font-size: var(--fs-sm); }
.adm-profile__facts dd { margin: 0; overflow-wrap: anywhere; }

/* Avatar: photo, or initials on a tint when no photo is stored. */
.adm-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--adm-avatar, 40px); height: var(--adm-avatar, 40px); border-radius: var(--r-pill); object-fit: cover; background: var(--tint-neutral); }
.adm-avatar--initials { background: var(--tint-blue); color: var(--blue-ink); font-weight: 600; font-size: calc(var(--adm-avatar, 40px) * .38); letter-spacing: .02em; line-height: 1; user-select: none; }

/* File inputs: button matches .adm-btn--secondary, the field matches other controls. */
:where(.adm) :where(input[type="file"]) {
  width: 100%; min-width: 0; max-width: 100%; min-height: 40px; box-sizing: border-box;
  padding: 2px; border-radius: var(--r-control); border: 1px solid var(--line-strong);
  background: var(--control); color: var(--muted); font: inherit; font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:where(.adm) :where(input[type="file"])::file-selector-button {
  min-height: 34px; margin: 0 var(--s3) 0 0; padding: 0 var(--s4); border-radius: var(--r-control);
  border: 1px solid rgba(20, 22, 28, .1); background: rgba(255, 255, 255, .8); color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
:where(.adm) :where(input[type="file"])::file-selector-button:hover { background: var(--surface-solid); border-color: rgba(20, 22, 28, .18); }
:where(.adm) :where(input[type="file"]):focus-visible { border-color: var(--blue); }

/* ---------- Admins: list rows, permission switches ---------- */

.adm-list > li.adm-admin { flex-wrap: wrap; row-gap: var(--s2); }
.adm-admin__who { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: var(--s3); }
.adm-admin__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-admin__name { font-weight: 600; overflow-wrap: anywhere; }
.adm-admin__meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.adm-admin__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }

.adm-perm { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-width: 0; cursor: pointer; }
.adm-perm__label { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .adm-perm { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* Native checkbox drawn as a switch; keep role="switch" on the input. */
.adm-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);   /* off track: 3.6:1 on a panel */
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}
.adm-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-solid);
  transition: transform var(--t-fast) var(--ease-out);
}
button.adm-switch { border: 0; padding: 0; }
.adm-switch:checked, .adm-switch[aria-checked="true"] { background: var(--blue); }
.adm-switch:checked::before, .adm-switch[aria-checked="true"]::before { transform: translateX(18px); }
.adm-toggle__saving { font-size: var(--fs-sm); color: var(--muted); }
.adm-toggle__saving:empty { display: none; }
.adm-switch:disabled { opacity: .5; cursor: not-allowed; }

/* Notification template tokens */
.adm-perm__state { font-size: var(--fs-base); color: var(--muted); cursor: pointer; }
.adm-tokens { display: inline-flex; flex-wrap: wrap; gap: var(--s1-5); max-width: 100%; }
:where(.adm) button.adm-token {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(20, 22, 28, .05);
  color: var(--muted);
  font: var(--fs-sm)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
:where(.adm) button.adm-token:hover { background: rgba(20, 22, 28, .09); color: var(--ink); }

/* Notification template rows */
.adm-tpls > li.adm-tpl { display: block; }
.adm-tpl__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-width: 0; }
.adm-tpl__text { min-width: 0; flex: 1 1 auto; transition: opacity var(--t-fast) var(--ease-out); }
.adm-tpl--off .adm-tpl__text { opacity: .55; }
.adm-tpl__title { display: block; font-weight: 600; font-size: var(--fs-md); }
.adm-tpl__preview { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.adm-tpl__controls { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.adm-tpl__editor { padding-top: var(--s4); max-width: 560px; }
.adm-bubble {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-pop);
  background: var(--card);
  max-width: 360px;
}
.adm-bubble__title { display: block; font-size: var(--fs-sm); font-weight: 600; }
.adm-bubble__bad { background: var(--tint-amber); color: var(--amber-ink); border-radius: var(--r-sm); padding: 0 3px; }
.adm-tpl__unknown { margin: 0; font-size: var(--fs-sm); color: var(--amber-ink); }
.adm-bubble__body { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
/* A value to copy (e.g. a webhook address) */
.adm-code { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--tint-neutral); font: var(--fs-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }

/* Channels: badges on the row, toggle chips and per-channel sections in the editor */
.adm-tpl__channels { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 0; }
.adm-tpl__chans { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.adm-tpl__chans legend { padding: 0; margin-bottom: var(--s1); }
.adm-chan {
  display: inline-flex;
  align-items: center;
  gap: var(--s1-5);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--control);
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.adm-chan input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.adm-chan:has(input:checked) { background: var(--tint-blue); color: var(--blue-ink); border-color: transparent; }
.adm-chan:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.adm-chan input:focus-visible { outline: none; }  /* the chip carries the ring */
.adm-tpl__always .adm-field__hint { margin: 0; }
.adm-tpl__section { padding-top: var(--s4); border-top: 1px solid var(--line); }
.adm-tpl__heading { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.adm-tpl__count { margin: 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-tpl__count--over { color: var(--amber-ink); }
.adm-mailcard {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-pop);
  background: var(--surface-solid);
  max-width: 480px;
  min-width: 0;
}
.adm-mailcard__subject { margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); font-weight: 600; font-size: var(--fs-base); overflow-wrap: anywhere; }
.adm-mailcard__body { font-size: var(--fs-base); }
.adm-bubble--sms { border-radius: var(--r-card) var(--r-card) var(--r-card) var(--r-sm); background: var(--tint-neutral); }
.adm-bubble--sms .adm-bubble__body { white-space: pre-line; }
@media (max-width: 520px) {
  .adm-tpl__row { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .adm-tpl__controls { justify-content: space-between; }
}

/* Banners */
.adm-list > li.adm-banner { flex-wrap: wrap; row-gap: var(--s3); column-gap: var(--s3); align-items: flex-start; }
.adm-banner__img { flex: 0 0 auto; width: 160px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-control); background: var(--line); }
.adm-banner__main { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-banner__title { font-weight: 600; overflow-wrap: anywhere; }
.adm-banner__meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.adm-banner__actions { flex: 1 1 100%; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.adm-banner__preview { display: block; width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-control); background: var(--line); }
.adm-banner__actions .adm-perm { width: auto; flex-direction: row; align-items: center; }
@media (max-width: 480px) { .adm-banner__img { width: 100%; } }

/* Coupons */
.adm-list > li.adm-coupon { flex-wrap: wrap; row-gap: var(--s2); justify-content: space-between; }
.adm-coupon__main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-coupon__code { font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }
.adm-coupon__meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.adm-coupon__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.adm-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s3); min-width: 0; }
.adm-pair > * { min-width: 0; }

/* Notifications */
.adm-notify__audience { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.adm-notify__choose { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.adm-notify__list { max-height: 22rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-control); }
.adm-notify__row { display: flex; width: 100%; align-items: flex-start; padding: var(--s1) 0; }
.adm-notify__who { min-width: 0; overflow-wrap: anywhere; }
.adm-notify__contact { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Revenue report ---------- */

.adm-rev__presets { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s3); }
.adm-rev__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--s3); align-items: end; }
.adm-rev__totals { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.adm-rev__totals > div { padding: var(--s3); border-radius: var(--r-control); background: rgba(255, 255, 255, .6); min-width: 0; }
.adm-rev__totals dt { font-size: var(--fs-sm); color: var(--muted); }
.adm-rev__totals dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.adm-rev { width: 100%; border-collapse: collapse; }
.adm-rev th, .adm-rev td { padding: var(--s2) var(--s2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.adm-rev th { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.adm-rev .adm-rev__r { text-align: right; }
.adm-rev td .adm-muted { display: block; font-size: var(--fs-sm); }
@media (max-width: 720px) {
  .adm-rev__form { grid-template-columns: minmax(0, 1fr); }
  .adm-rev__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-rev thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .adm-rev, .adm-rev tbody, .adm-rev tr, .adm-rev td { display: block; }
  .adm-rev tr { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .adm-rev td { display: flex; justify-content: space-between; gap: var(--s3); border: 0; padding: 2px var(--s1); text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .adm-rev td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: 0 0 auto; }
  .adm-rev td .adm-muted { display: inline; margin-left: var(--s1); }
}

/* ---------- Bag tags ---------- */
.adm-tags__make { display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.adm-tags__make .adm-field { flex: 0 1 220px; }
.adm-tags__make > .adm-btn { margin-top: calc(var(--fs-base) * 1.5 + var(--s1-5)); }
.adm-tags__filters { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.adm-tags__filters .adm-field__control { width: auto; flex: 0 0 auto; min-width: 150px; }
.adm-tags__filters input.adm-field__control { flex: 1 1 200px; max-width: 360px; }
.adm-list > li.adm-tag { flex-wrap: wrap; row-gap: var(--s2); }
.adm-tag__main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-tag__code { font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm-tag__meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.adm-tag__actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }

/* ---------- Order page: Payment panel ---------- */
.adm-pay__chips { margin-bottom: var(--s3); }
.adm-pay__banner { flex-wrap: wrap; margin-bottom: var(--s3); }
.adm-pay__banner .adm-flash__text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.adm-pay__banner .adm-pay__wait { flex: 1 0 100%; font-size: var(--fs-sm); }
.adm-pay__retry { margin: 0; }
.adm-pay__confirm { display: flex; flex-direction: column; gap: var(--s2); }
.adm-pay__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1-5); }
.adm-pay__facts li { min-width: 0; overflow-wrap: anywhere; }
.adm-pay__note { display: block; font-size: var(--fs-sm); }
.adm-pay__sub { margin: var(--s4) 0 var(--s2); padding-top: var(--s3); border-top: 1px dashed var(--line-dashed); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.adm-pay__events, .adm-pay__attempts { list-style: none; margin: 0; padding: 0; }
.adm-pay__event { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: var(--s1-5) 0; min-width: 0; overflow-wrap: anywhere; }
.adm-pay__event > :first-child { flex: 1 1 12rem; min-width: 0; }
.adm-pay__event--warn { color: var(--amber-ink); font-weight: 600; }
.adm-pay__event--danger { color: var(--danger); font-weight: 600; }
.adm-pay__when { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 400; }
.adm-pay__attempts li { padding: var(--s1-5) 0; }
.adm-pay__att-main { display: flex; justify-content: space-between; gap: var(--s4); }
.adm-pay__att-meta { font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* Touch: the Payment and Price actions reach 44px. */
@media (pointer: coarse), (max-width: 639.98px) {
  .adm-pay .adm-btn, .adm-odetail__pay .adm-btn { min-height: 44px; }
}