/* BarberBot shared design tokens — the dark shop theme every page uses.
   Linked before each page's own <style> block, so a page can still override
   a value locally (kiosk.html does, for its full-screen state colours). */
:root{
  --ink:#0e0c0a;          /* near-black, warm */
  --panel:#171311;        /* raised panel */
  --line:#2a221d;         /* hairlines */
  --amber:#e8a23d;        /* shop amber — the one accent */
  --amber-dim:#7a5a25;
  --cream:#f3ece1;        /* primary text */
  --muted:#9b8e7e;        /* secondary text */
  --green:#5fb87a;        /* confirmation */
  --blue:#5a9bd4;
  --red:#c9504a;
  --radius:10px;
}

/* shared bottom-sheet modal backdrop (admin.html, owner.html — each page still
   defines its own `.sheet` for the panel content/sizing). Paired with the
   openModal()/closeModal() helpers in shared.js. */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:flex-end;justify-content:center;z-index:50}
.modal.open{display:flex}

/* visually hidden but still reachable by screen readers — for a <label> whose
   text is redundant on screen (e.g. a placeholder already shows it visibly)
   but still needs to exist for assistive tech. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* shared confirmation toast (paired with toast() in shared.js). One style for
   every page and every message — success and error alike, matching how
   admin.html/owner.html already used it before this was unified. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);
  color:var(--ink);font-weight:600;padding:13px 22px;border-radius:30px;z-index:60;
  opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}

/* ── shared button component ──
   Structure/interaction identity only — each page keeps its own padding/
   font-size/width locally, which genuinely differ by context (dense
   3-across admin actions vs. full-width customer CTAs). admin.html's
   `.act` and call.html's `.book` predate this and keep their own class
   names — renaming them means touching every JS call site that toggles
   them — so they're aliased into the same rules below instead of forcing
   a markup migration. See handoff.md.txt V2.85 for the full comparison
   this was built from, including the two deliberately-NOT-shared bits:
   call.html's `.book` has no box-shadow (a real pre-existing difference,
   not drift — left alone) and admin.html's `.svc:hover` uses a brighter
   border color than book/queue's identical `.svc` (also left alone). */
.btn, .act, .book{
  cursor:pointer;border:none;border-radius:var(--radius);
  font-weight:700;font-family:inherit;
  transition:filter .15s,transform .1s,box-shadow .15s;
}
.btn:hover, .act:hover, .book:hover{filter:brightness(1.07)}
.btn:active, .act:active{transform:scale(.98)}

/* primary (amber) look — the default for .btn, opt-in via .primary for .act */
.btn, .act.primary{
  background:var(--amber);color:var(--ink);
  box-shadow:0 4px 14px rgba(232,162,61,.25);
}
.btn:hover, .act.primary:hover{box-shadow:0 6px 20px rgba(232,162,61,.35)}
.btn:active{box-shadow:0 2px 8px rgba(232,162,61,.2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.book{background:var(--amber);color:var(--ink)}

/* ghost (secondary) look */
.btn.ghost, .act.ghost{
  background:var(--panel);color:var(--cream);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.btn.ghost:hover, .act.ghost:hover{box-shadow:0 4px 12px rgba(0,0,0,.3)}

/* danger (destructive) look */
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--red);box-shadow:none}

/* ── shared card shell ──
   The static panel look (background/border/radius/shadow) duplicated
   verbatim across every list-row/card class in the app. Each page keeps
   its own padding/margin/layout (flex direction, gap) locally — real
   per-component differences, not drift. `.tlcard` gets the shell minus
   radius — it deliberately uses a larger 14px corner, not the shared
   10px `--radius`. */
.card, .row, .qrow, .chairctl, .svc, .tlcard{
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.card, .row, .qrow, .chairctl, .svc{border-radius:var(--radius)}