/* Admin UI. Dense and utilitarian — built for daily data entry, tinted with
   the Laba Fresh teal so it reads as the same product. Scoped to body.admin
   so none of it leaks into the public site. */

body.admin {
  --a-bg:      #F4F7F6;
  --a-surface: #FFFFFF;
  --a-ink:     #16211F;
  --a-muted:   #61726F;
  --a-line:    #DFE7E5;
  --a-accent:  #16736A;
  --a-accent-d:#115A53;
  --a-soft:    #E7F2F0;
  --a-warn:    #9A6410;
  --a-warn-bg: #FCF3E2;
  --a-bad:     #A3392A;
  --a-bad-bg:  #FBECE9;

  /* The bar is the one place admin is deliberately *not* the brand teal. The
     counter's bar is #0D4F47 and both screens are open on the same tablet all
     day; a glance at the top of the page has to say which one you are on, and
     a hue apart says it from across the counter where a shade apart does not.
     These are the defaults; Settings → Appearance overrides them (and the
     accents with them) from AdminTheme, in a <style> block the admin layout
     alone renders. Anything themed is a token here, or the picker cannot
     reach it. */
  --a-bar:          #14303F;
  --a-bar-panel:    #102A38;
  --a-bar-pill:     #9AE8DD;
  --a-bar-pill-ink: #07302A;

  margin: 0;
  background: var(--a-bg);
  color: var(--a-ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* ── Top bar ──────────────────────────────────────── */
.a-bar {
  background: var(--a-bar);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.a-bar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 22px;
  min-height: 70px;
  flex-wrap: wrap;
}
.a-bar__brand {
  display: flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none;
  font-size: 17px; white-space: nowrap;
  padding-right: 4px;
}
.a-bar__brand b { font-weight: 700; }
.a-bar__logo { width: 38px; filter: brightness(0) invert(1); }
/* Two lines: the app's name, and the one place its full name is written out.
   The tagline is chrome, so it goes as soon as the bar has anything else to
   fit — well before the nav collapses. */
.a-bar__name { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; min-width: 0; }
.a-bar__tag { font-size: 12px; font-weight: 500; letter-spacing: .02em; opacity: .72; }

/* The nav and the end links are wrapped so phone width has one thing to
   collapse. display:contents keeps them direct flex children of the bar on
   desktop, so the wrapper costs the wide layout nothing. */
.a-bar__menu { display: contents; }
.a-bar__toggle { display: none; }

/* Grouped: one trigger per area of the admin; a group with several pages
   drops its items in a panel on hover or keyboard focus. Pure CSS — the links
   are always in the DOM, so they stay reachable by tabbing. */
.a-nav { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; }
.a-nav__group { position: relative; }
.a-nav__trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border: 0; border-radius: 6px;
  background: none;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.a-nav__trigger svg { width: 16px; height: 16px; }
.a-nav__trigger:hover { background: rgba(255,255,255,.1); color: #fff; }
.a-nav__trigger.is-active { background: var(--a-bar-pill); color: var(--a-bar-pill-ink); font-weight: 600; }
.a-nav__caret {
  width: 0; height: 0; margin-left: 1px;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
  opacity: .7;
}

.a-nav__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: var(--a-bar-panel);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  z-index: 60;
}
/* Bridge the gap so the panel survives the trip from trigger to menu. */
.a-nav__menu::before { content: ""; position: absolute; inset: -8px 0 100% 0; }
.a-nav__group:hover .a-nav__menu,
.a-nav__group:focus-within .a-nav__menu { display: block; }
.a-nav__item {
  display: block;
  padding: 8px 11px;
  border-radius: 6px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.a-nav__item:hover { background: rgba(255,255,255,.12); color: #fff; }
.a-nav__item.is-active { background: var(--a-bar-pill); color: var(--a-bar-pill-ink); font-weight: 600; }

/* Blocks inside a panel: Operations is thirteen pages, and the rule plus the
   heading is what says which of them belong to the same job. Unlabelled groups
   render one block and never draw a line. */
.a-nav__block + .a-nav__block {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.a-nav__blockhead {
  margin: 2px 0 3px; padding: 0 11px;
  color: rgba(255,255,255,.5);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

.a-bar__end { display: flex; align-items: center; gap: 12px; }
.a-bar__view { color: rgba(255,255,255,.7); text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.a-bar__view:hover { color: var(--a-bar-pill); }
.a-bar__end form { margin: 0; }

/* ── Main ─────────────────────────────────────────── */
.a-main { max-width: 1280px; margin-inline: auto; padding: 26px 22px 80px; }

.a-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.a-head h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.3px; }
.a-head p { margin: 5px 0 0; color: var(--a-muted); font-size: 14px; }

/* ── Flash ────────────────────────────────────────── */
.a-flash {
  margin: 0 0 18px;
  padding: 11px 16px;
  border-radius: 7px;
  border-left: 4px solid;
  font-size: 14.5px;
}
.a-flash--ok  { background: var(--a-soft); border-color: var(--a-accent); color: #0F5049; }
.a-flash--bad { background: var(--a-bad-bg); border-color: var(--a-bad); color: var(--a-bad); }

/* ── Cards & panels ───────────────────────────────── */
.a-panel {
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: 9px;
  margin-bottom: 18px;
  overflow: hidden;
}
.a-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--a-line);
  background: #FBFDFC;
  flex-wrap: wrap;
}
.a-panel__title { margin: 0; font-size: 16px; font-weight: 700; }
.a-panel__title small { display: block; font-size: 13px; font-weight: 400; color: var(--a-muted); margin-top: 2px; }
.a-panel__body { padding: 18px; }

/* A panel that folds — Site Details' page wording. The summary is the panel head. */
details.a-panel > summary { cursor: pointer; list-style: none; }
details.a-panel > summary::-webkit-details-marker { display: none; }
details.a-panel > summary .a-panel__title::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--a-muted); }
details.a-panel[open] > summary .a-panel__title::before { content: "▾"; }
details.a-panel:not([open]) > summary { border-bottom: 0; }

/* ── Stat tiles ───────────────────────────────────── */
.a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.a-stat {
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: 9px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
.a-stat:hover { border-color: var(--a-accent); }
/* A glyph in the corner says what a card is before its label is read. The
   value keeps clear of it, so a long peso amount wraps instead of running
   under it. */
.a-stat__icon { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px;
                display: grid; place-items: center; background: var(--a-soft); color: var(--a-accent); }
.a-stat__icon svg { width: 17px; height: 17px; }
.a-stat__icon + .a-stat__value { padding-right: 36px; }
/* 21px, not the 28 it started at: a card is ~240px wide once five of them
   share a row, and a seven-figure peso amount ran out of the box. `anywhere`
   is the last resort under that — a figure that still doesn't fit wraps inside
   the card rather than spilling out of it. */
.a-stat__value { font-size: 21px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
                 overflow-wrap: anywhere; }
.a-stat__label { font-size: 12px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--a-muted); margin-top: 6px; }
.a-stat--alert .a-stat__value { color: var(--a-warn); }

/* ── Dashboard ────────────────────────────────────── */
.a-dash__title { font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
                 color: var(--a-muted); margin: 0 0 10px; }
.a-dash__quiet { margin: 0 0 22px; color: var(--a-muted); }
/* The orders table wants the width; the staff list is four short columns. */
.a-dash__cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.a-dash__links { color: var(--a-muted); font-size: 14px; }
@media (max-width: 900px) {
  .a-dash__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* The week's sales and loads: two strips of seven bars, each on its own
   baseline and scaled to its own best day, the figure under each bar rather
   than on it. Plain HTML, so a column is a link and nothing needs JS. The 2px
   gap between columns and the rounded top are the bar's only chrome. The loads
   strip is shorter and darker, so the two read as two measures at a glance. */
.a-week { margin-bottom: 22px; }
.a-week__chart { list-style: none; margin: 0; padding: 16px 18px 14px;
                 display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.a-week__day a { display: flex; flex-direction: column; align-items: stretch; text-decoration: none;
                 color: inherit; border-radius: 6px; padding: 0 4px 4px; }
.a-week__day a:hover, .a-week__day a:focus-visible { background: var(--a-soft); }
.a-week__plot { height: 140px; display: flex; align-items: flex-end; justify-content: center;
                border-bottom: 1px solid var(--a-line); }
.a-week__bar { width: min(100%, 44px); min-height: 1px; background: var(--a-accent);
               border-radius: 4px 4px 0 0; opacity: .55; }
.a-week__day.is-today .a-week__bar,
.a-week__day a:hover .a-week__bar { opacity: 1; }
.a-week__plot--loads { height: 56px; margin-top: 10px; }
.a-week__bar--loads { width: min(70%, 30px); background: var(--a-bar); }
.a-week__label { margin-top: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--a-muted); }
.a-week__day.is-today .a-week__label { color: var(--a-ink); }
.a-week__value { margin-top: 4px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
                 overflow-wrap: anywhere; }
.a-week__value--loads { font-size: 12px; font-weight: 500; color: var(--a-muted); white-space: nowrap; }
@media (max-width: 600px) {
  .a-week__chart { padding: 12px 8px 10px; }
  .a-week__plot { height: 100px; }
  .a-week__plot--loads { height: 44px; }
  .a-week__day a { padding: 0 1px 4px; }
  .a-week__label, .a-week__value { font-size: 10.5px; }
}

/* ── Tables ───────────────────────────────────────── */
.a-table-wrap { overflow-x: auto; }
/* Order counts beside a payment-method amount on the sales sheet. */
.a-table .num small { font-weight: 400; color: var(--a-muted); }
.a-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.a-table th, .a-table td { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--a-line); vertical-align: middle; }
.a-table thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--a-muted); background: #FBFDFC;
}
.a-table tbody tr:last-child td { border-bottom: 0; }
.a-table tbody tr:hover { background: #FAFCFB; }
/* The expense-category tree: sub-categories under the parent they belong to, and
   the branch's own subtotal closing the group off. Indent and weight carry it —
   a nested table would break every column's alignment with the rows above it. */
.ec-sub td:first-child { padding-left: 34px; }
.ec-branch td { border-bottom-width: 2px; font-size: 13px; }
.ec-branch td:first-child { padding-left: 34px; font-style: italic; }
.a-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-table .actions { text-align: right; white-space: nowrap; }
.a-table .muted { color: var(--a-muted); font-size: 13.5px; }
/* The grouped GCash/Others column has a long two-word header, so it reads a
   step smaller than the cash and total columns beside it — header included,
   which needs the thead/tfoot selectors to outrank the rules above. */
.a-table tbody .a-col-noncash, .a-table tfoot .a-col-noncash { font-size: 13px; }
.a-table thead .a-col-noncash { font-size: 10px; letter-spacing: .5px; }
.a-table form { display: inline; margin: 0; }
/* Totals row on the sales sheet. The top border carries the divider, since the
   last tbody row drops its own. */
.a-table tfoot th {
  background: #FBFDFC; font-weight: 700;
  border-top: 2px solid var(--a-line); border-bottom: 0;
}

/* ── Buttons ──────────────────────────────────────── */
.a-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--a-accent);
  color: #fff;
}
/* An icon leading a button's label ("✎ Edit order"), sized to the text. */
.a-btn > svg { width: 16px; height: 16px; flex: none; }
.a-btn:hover { background: var(--a-accent-d); }
.a-btn--quiet { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.a-btn--quiet:hover { background: rgba(255,255,255,.12); }
.a-btn--ghost { background: transparent; border-color: var(--a-line); color: var(--a-ink); }
.a-btn--ghost:hover { background: #F2F7F6; border-color: var(--a-accent); }
.a-btn--danger { background: transparent; border-color: transparent; color: var(--a-bad); }
.a-btn--danger:hover { background: var(--a-bad-bg); }
.a-btn--sm { padding: 5px 11px; font-size: 13px; }
/* A button carrying one glyph instead of a word. Square-ish, so a row of them
   lines up with the fields beside it rather than reading as text. */
.a-btn--icon { padding: 5px 9px; min-width: 30px; font-size: 15px; line-height: 1.15; }

/* ── Forms ────────────────────────────────────────── */
.a-form { max-width: 720px; }
.a-form:not(:last-child) { margin-bottom: 18px; }
.a-form--wide { max-width: 100%; }
.a-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.a-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.a-field--full { grid-column: 1 / -1; }
.a-field label { font-size: 13px; font-weight: 600; }
.a-field .hint { font-weight: 400; color: var(--a-muted); }
/* A checkbox reads as one line, not as a label stacked over a control. */
.a-field--check label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.a-field--check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--a-accent); }
.a-field input, .a-field select, .a-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--a-line);
  border-radius: 6px;
  font: inherit; font-size: 14.5px;
  background: #fff; color: var(--a-ink);
}
.a-field textarea { min-height: 92px; resize: vertical; }
.a-field input:focus, .a-field select:focus, .a-field textarea:focus {
  outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(22,115,106,.13);
}
.a-form__actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--a-line); }
.a-form__actions .spacer { flex: 1; }

.a-errors { margin: 0 0 18px; padding: 13px 17px; border-radius: 7px; border-left: 4px solid var(--a-bad); background: var(--a-bad-bg); color: var(--a-bad); font-size: 14px; }
.a-errors ul { margin: 6px 0 0; padding-left: 18px; }

/* ── Pills ────────────────────────────────────────── */
.a-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
}
.a-pill--pending   { background: var(--a-warn-bg); color: var(--a-warn); }
.a-pill--contacted { background: var(--a-soft); color: var(--a-accent-d); }
.a-pill--closed    { background: #EEF1F0; color: var(--a-muted); }
.a-pill--admin     { background: var(--a-soft); color: var(--a-accent-d); }
.a-pill--staff     { background: #EEF1F0; color: var(--a-muted); }
.a-pill--inactive  { background: var(--a-warn-bg); color: var(--a-warn); }
/* A former employee stays on the list, since their records point at the
   account, but reads as set aside. */
.a-table tr.is-inactive td { color: var(--a-muted); }

.a-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.a-filters a {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--a-line); background: #fff;
  font-size: 13px; font-weight: 500; color: var(--a-muted); text-decoration: none;
}
.a-filters a.is-active { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }

.a-empty { padding: 46px 18px; text-align: center; color: var(--a-muted); }
.a-empty p { margin: 0 0 14px; }

.a-def { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; font-size: 14.5px; }
.a-def dt { color: var(--a-muted); font-weight: 600; font-size: 13px; }
.a-def dd { margin: 0; }

/* The bar is one row, and it stays one row: six nav triggers wrapping onto a
   second line was the thing that read as broken. Between the widest bar and
   the toggle the chrome goes in order of what is least missed — the tagline,
   then the gaps, then the two "open in a tab" links, then the trigger icons.
   The widths are measured, not guessed: the nav needs ~694px, the brand 244
   with its tagline and 186 without, the end links 247 and 87. */
@media (max-width: 1320px) {
  .a-bar__tag { display: none; }
}
@media (max-width: 1210px) {
  .a-bar__inner { gap: 12px; }
  .a-nav__trigger { padding: 8px 9px; }
}
@media (max-width: 1160px) and (min-width: 901px) {
  .a-bar__view { display: none; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .a-nav__trigger svg { display: none; }
  .a-nav__trigger { gap: 0; }
}

@media (max-width: 900px) {
  /* One compact row — brand and a toggle — with everything else behind it.
     900 rather than 720: below it the six triggers only fit by giving up
     their labels, and a panel is better than a row of riddles.
     Flattened open, this nav is a dozen rows deep in a sticky bar. */
  .a-bar__inner { padding-block: 8px; gap: 12px; min-height: 62px; flex-wrap: nowrap; }
  .a-bar__brand { flex: 1; min-width: 0; }
  .a-bar__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .a-bar__toggle {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    padding: 0; border: 0; border-radius: 8px;
    background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  }
  .a-bar__bars, .a-bar__bars::before, .a-bar__bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  }
  .a-bar__bars { position: relative; }
  .a-bar__bars::before, .a-bar__bars::after { content: ""; position: absolute; left: 0; }
  .a-bar__bars::before { top: -6px; }
  .a-bar__bars::after { top: 6px; }
  .a-bar__toggle[aria-expanded="true"] .a-bar__bars { background: transparent; }
  .a-bar__toggle[aria-expanded="true"] .a-bar__bars::before { top: 0; transform: rotate(45deg); }
  .a-bar__toggle[aria-expanded="true"] .a-bar__bars::after { top: 0; transform: rotate(-45deg); }

  .a-bar__menu { display: none; }
  .a-bar__menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    flex-basis: 100%;
    max-height: calc(100svh - 74px);
    overflow-y: auto;
    padding: 12px 0 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .a-bar__inner:has(.a-bar__menu.is-open) { flex-wrap: wrap; }

  /* No hover on touch: flatten the panels inside the drawer. */
  .a-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 2px; }
  .a-nav__trigger { padding-block: 10px; }
  .a-nav__caret { display: none; }
  .a-nav__menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 23px;
    border: 0; background: none; box-shadow: none;
  }
  .a-nav__menu::before { content: none; }
  .a-nav__item { padding-block: 10px; }
  .a-nav__block + .a-nav__block { margin-top: 4px; padding-top: 4px; }
  .a-nav__blockhead { padding-inline: 11px 0; }

  .a-bar__end {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16);
  }
  .a-bar__view { padding: 6px 2px; font-size: 14px; }
  .a-bar__end .a-btn { width: 100%; justify-content: center; }
  .a-def { grid-template-columns: 1fr; gap: 3px 0; }
  .a-def dd { margin-bottom: 10px; }
}

/* ── Sign in ──────────────────────────────────────── */
.a-signin {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0D4F47;
}
.a-signin__card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 12px;
  padding: 34px 30px 26px;
  box-shadow: 0 20px 50px rgba(7, 48, 42, .3);
}
.a-signin__logo { width: 120px; margin: 0 auto 14px; display: block; }
/* The app's name sits between the shop's logo and what this screen is for.
   Nothing is cramped here, so unlike the two bars the tagline always shows. */
.a-signin__app {
  margin: 0 0 16px; text-align: center;
  font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--a-ink);
}
.a-signin__app span {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em; color: var(--a-muted);
}
.a-signin__title { margin: 0 0 20px; font-size: 19px; font-weight: 700; text-align: center; }
.a-signin__foot { margin: 20px 0 0; text-align: center; font-size: 13.5px; color: var(--a-muted); }
.a-signin__foot a { color: var(--a-accent); }

/* ── Staff sign-in card ───────────────────────────── */
/* Printed on plain paper, not the thermal roll — 70_print.css is sized to the
   receipt width, which is the wrong paper for a badge. Rules are scoped by the
   card's presence rather than body.admin, because the counter layout is
   <body class="admin counter"> and would otherwise inherit them. */
.a-qr-card {
  display: inline-block;
  padding: 20px 22px;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  text-align: center;
  background: #fff;
}
.a-qr-card__logo { width: 76px; margin-bottom: 10px; }
.a-qr-card .qr { display: block; width: 240px; height: 240px; margin: 0 auto 14px; }
.a-qr-card p { margin: 0 0 6px; }
.a-qr-card__who { font-size: 15px; }
.a-qr-card__issued { font-size: 12px; color: var(--a-muted); }

.a-qr-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.a-qr-actions form { margin: 0; }
.a-qr-actions .hint { flex-basis: 100%; margin: 0; }
.a-qr-actions code { word-break: break-all; }

@media print {
  @page { margin: 14mm; }
  body:has(.a-qr-card) .a-bar,
  body:has(.a-qr-card) .a-flash,
  body:has(.a-qr-card) .a-head,
  body:has(.a-qr-card) .a-qr-actions { display: none; }
  body:has(.a-qr-card) .a-main { max-width: none; padding: 0; }
  body:has(.a-qr-card) .a-panel,
  body:has(.a-qr-card) .a-panel__body { border: 0; box-shadow: none; padding: 0; background: none; }
  .a-qr-card { width: 85mm; border: 1px solid #000; break-inside: avoid; }
  .a-qr-card .qr { width: 55mm; height: 55mm; }
  .a-qr-card__logo { width: 20mm; filter: grayscale(1); }
}

/* Plain bullet list inside a definition list cell — customer "most ordered". */
.a-list { margin: 0; padding-left: 18px; }
.a-list li { margin-bottom: 2px; }

/* ── Theme picker (Settings → Appearance) ─────────── */
/* Each card is a little picture of the admin — bar, active pill, a button and
   two lines of page — drawn from the theme's own tokens, which the view emits
   one rule of per theme. Colour is never the only cue: the name and the blurb
   are read, and the checked card takes a ring and a tick. */
.a-themes { border: 0; margin: 0; padding: 0; display: grid; gap: 12px;
            grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
/* Quiet ones, loud ones and the mixed ones on shelves of their own. The
   legend is a grid item of its own so it spans the row rather than sitting
   in the first cell. */
.a-themes + .a-themes { margin-top: 22px; }
.a-themes__legend {
  float: left; width: 100%; margin-bottom: 10px; padding: 0;
  color: var(--a-muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.a-theme {
  position: relative;
  display: grid; grid-template-rows: auto auto auto; gap: 3px;
  padding: 10px 10px 12px;
  border: 1px solid var(--a-line); border-radius: 11px;
  background: var(--a-surface);
  cursor: pointer;
}
.a-theme:hover { border-color: var(--a-accent); }
.a-theme:has(.a-theme__radio:checked) {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 2px var(--a-accent) inset;
}
.a-theme:has(.a-theme__radio:focus-visible) { outline: 2px solid var(--a-accent); outline-offset: 2px; }
/* The radio itself is the control and stays in the tab order; it is the card
   that is painted, so it sits out of the way rather than being display:none. */
.a-theme__radio { position: absolute; top: 14px; right: 12px; width: 16px; height: 16px;
                  accent-color: var(--a-accent); margin: 0; }
.a-theme__shot {
  display: block; overflow: hidden;
  border: 1px solid var(--a-line); border-radius: 7px;
  background: var(--t-bg);
}
.a-theme__bar { display: flex; align-items: center; padding: 7px 8px; background: var(--t-bar); }
.a-theme__pill { display: block; width: 44px; height: 8px; border-radius: 999px; background: var(--t-pill); }
.a-theme__page { display: flex; flex-direction: column; gap: 5px; padding: 9px 8px 11px; }
.a-theme__btn { width: 52px; height: 9px; border-radius: 4px; background: var(--t-accent); }
.a-theme__line { width: 100%; height: 6px; border-radius: 3px; background: var(--t-soft); }
.a-theme__line--short { width: 62%; }
.a-theme__name { padding-right: 22px; font-size: 14px; font-weight: 700; margin-top: 7px; }
.a-theme__blurb { font-size: 12.5px; line-height: 1.4; color: var(--a-muted); }