/* ==========================================================================
   Parlor - shared interface stylesheet
   ==========================================================================

   Hand-written. No build step, no framework, no bundler -- CLAUDE.md's first
   rule, and the reason the Stitch direction was adopted as a DESIGN while its
   Tailwind-from-a-CDN delivery was not.

   -- FOUR BRANDS, TWO THEMES, ONE MECHANISM ---------------------------------
   Staff pick a colour and pick white or black, independently. That is eight
   combinations, and they are spelled out rather than computed because CSS
   cannot derive a considered grey ramp from a hue -- if it could, everyone's
   greys would already match their brand and they do not.

     <html data-brand="harbor|pine|indigo|clay" data-theme="light|dark">

   Both attributes are optional. No data-brand is Harbor; no data-theme follows
   the operating system. data-mode="light|dark" is a synonym for data-theme:
   it is what parlor-look.js stamps on the staff apps (the dashboard, Door, the
   scanner) from Settings -> Parlor's look, so one device choice drives this
   file and index.html's own tokens alike.

   PINE IS PARLOR'S OWN LOOK (owner's decision, 29 Sep 2026): Pine & Copper in
   light, Graphite & Mint in dark. The staff apps all run data-brand="pine".
   Harbor stays the bare default because guest-facing pages (privacy.html, the
   404) ask for it by name and must not change with Parlor's look.

   DASHBOARD LOOKS. <html data-look="classic|indigo"> (parlor-look.js, the
   dashboard only) repaints the shell in the dashboard's two light-only
   alternatives. Those blocks sit after the light brands and BEFORE every dark
   block, at the same (0,2,0), so in dark every look is Graphite & Mint -- the
   owner's rule -- without a single extra selector. Harbor is the default because it is the earthtone slate
   blue that was asked for; the other three exist because the first three
   options offered were measured at deltaE 8-14 apart, which is one colour
   wearing three names, and a picker with four indistinguishable entries is
   worse than no picker.

   ORDER IN THIS FILE IS LOAD-BEARING. :root[data-theme="dark"] and
   :root[data-brand="pine"] have identical specificity (0,2,0), so the later one
   wins any token they share. Every light-brand block is therefore written
   BEFORE every dark block, and each brand+dark pair is written as a two-
   attribute selector (0,3,0) that beats both. Do not reorder these blocks.

   -- THE GREYS BELONG TO THE BRAND -----------------------------------------
   Each brand carries its own surfaces, lines and inks, biased 4-10% toward its
   own hue. A stock grey beside a slate blue reads as a button dropped onto a
   template; these read as one thing. Ink is never #000 and paper is never #FFF
   -- pure black is harsh on a phone in a dark room and pure white is a torch.

   -- Everything is prefixed pl- --------------------------------------------
   index.html has its own 153-class inline stylesheet; the two collided on four
   classes and eight :root tokens (.inp alone appears 241 times there). A :root
   collision silently repaints the other file's UI and looks like a theme bug.
   Prefixing means this can be linked into a 630KB live app and provably not
   move one existing pixel. Do not un-prefix.
   ========================================================================== */

/* --- 1. TOKENS: shape, type and rhythm (brand-independent) --------------- */
:root{
  --pl-u:8px;
  --pl-gutter:24px;
  --pl-pad:32px;
  --pl-r-sm:.25rem;
  --pl-r:.5rem;
  --pl-r-md:.75rem;
  --pl-r-lg:1rem;
  --pl-nav-w:264px;
  --pl-bar-h:64px;
  --pl-panel-w:236px;
  --pl-font-display:"Fraunces",Georgia,serif;
  --pl-font-ui:"Geist","Segoe UI",system-ui,sans-serif;
  --pl-font-prose:"Geist","Segoe UI",system-ui,sans-serif;
}

/* --- LIGHT: Harbor is the bare :root, so no attribute means Harbor ------- */

:root{
  --pl-ground:#FBFCFD;
  --pl-surface-1:#F3F6F8;
  --pl-surface-2:#E9EFF3;
  --pl-surface-3:#DBE4EB;
  --pl-ink:#0E1419;
  --pl-ink-2:#46596A;
  --pl-ink-3:#71869A;
  --pl-line:#D5E0E8;
  --pl-line-2:#B9CAD6;
  --pl-accent:#3F6480;
  --pl-accent-ink:#FFFFFF;
  --pl-accent-soft:#E1EAF1;
  --pl-ok:#2F7D62;
  --pl-ok-soft:#DFF0E9;
  --pl-warn:#8A6420;
  --pl-warn-soft:#FAEEDA;
  --pl-critical:#A8423B;
  --pl-critical-soft:#FAE4E2;
  --pl-shadow-1:0 1px 2px rgba(14,20,25,.05), 0 8px 22px -18px rgba(14,20,25,.4);
  --pl-shadow-2:0 8px 28px rgba(14,20,25,.14);
}

/* Pine - Parlor's own: Pine & Copper (fern for action; copper lives in index.html) */
:root[data-brand="pine"]{
  --pl-ground:#F3F2EC;
  --pl-surface-1:#FFFFFF;
  --pl-surface-2:#F8F7F2;
  --pl-surface-3:#E8E8DF;
  --pl-ink:#1A1F1B;
  --pl-ink-2:#4F5750;
  --pl-ink-3:#6B7268;
  --pl-line:#D6D6CA;
  --pl-line-2:#C3C4B5;
  --pl-accent:#2F5B47;
  --pl-accent-ink:#FFFFFF;
  --pl-accent-soft:#DDE8DF;
  --pl-ok:#2A7030;
  --pl-ok-soft:#E3F0E3;
  --pl-warn:#8F5206;
  --pl-warn-soft:#F8EBD6;
  --pl-critical:#B3261E;
  --pl-critical-soft:#FDECEA;
  --pl-shadow-1:0 1px 2px rgba(26,31,27,.05), 0 8px 22px -18px rgba(26,31,27,.4);
  --pl-shadow-2:0 8px 28px rgba(26,31,27,.14);

  /* --pl-gold was used (focus ring, primary button, stage fill) but never
     defined, so :focus-visible drew NO outline anywhere in the staff shell. It is
     the brand's accent, whatever the mode. SCOPED TO PINE (it lives in this block), i.e. the staff apps
     (parlor-look.js stamps data-brand="pine" on the dashboard; scan.html asks for
     it): the guest and public pages (404.html, demo.html, privacy) ask for Harbor
     by name and must not change with Parlor's look, and there the undefined
     variable has always drawn .pl-btn-primary as an outline.
     No dark block redefines these, so the dark modes inherit them unchanged.

     --pl-admit is the ticket scanner's "admitted" colour: the same teal as Parlor
     Door's verdict in BOTH modes (teal = in, amber = already in, red = refused),
     so staff learn one set of verdict colours whichever scanner they open, and
     "in" never leans on red-versus-green. White text on it is 5.9:1.
     --pl-already is Door's amber "already in". */
  --pl-gold:var(--pl-accent);
  --pl-gold-ink:var(--pl-accent-ink);
  --pl-admit:#0B6E7A;
  --pl-admit-ink:#FFFFFF;
  --pl-already:#E9B23A;
}

/* Indigo - violet blue */
:root[data-brand="indigo"]{
  --pl-ground:#FCFCFE;
  --pl-surface-1:#F4F4FA;
  --pl-surface-2:#EAEAF6;
  --pl-surface-3:#DEDEF0;
  --pl-ink:#101024;
  --pl-ink-2:#474770;
  --pl-ink-3:#7373A0;
  --pl-line:#D9D9EC;
  --pl-line-2:#BEBEDC;
  --pl-accent:#414C86;
  --pl-accent-ink:#FFFFFF;
  --pl-accent-soft:#E4E5F3;
  --pl-ok:#2F7D62;
  --pl-ok-soft:#DFF0E9;
  --pl-warn:#8A6420;
  --pl-warn-soft:#FAEEDA;
  --pl-critical:#A8423B;
  --pl-critical-soft:#FAE4E2;
  --pl-shadow-1:0 1px 2px rgba(14,20,25,.05), 0 8px 22px -18px rgba(14,20,25,.4);
  --pl-shadow-2:0 8px 28px rgba(14,20,25,.14);
}

/* Clay - warm earth */
:root[data-brand="clay"]{
  --pl-ground:#FEFCFB;
  --pl-surface-1:#F9F4F1;
  --pl-surface-2:#F2E9E4;
  --pl-surface-3:#EADCD4;
  --pl-ink:#1A100B;
  --pl-ink-2:#5E4739;
  --pl-ink-3:#8E7263;
  --pl-line:#E6D6CE;
  --pl-line-2:#D2BAAE;
  --pl-accent:#8A5340;
  --pl-accent-ink:#FFFFFF;
  --pl-accent-soft:#F3E4DD;
  --pl-ok:#2F7D62;
  --pl-ok-soft:#DFF0E9;
  --pl-warn:#8A6420;
  --pl-warn-soft:#FAEEDA;
  --pl-critical:#9E2F3E;
  --pl-critical-soft:#F8DFE3;
  --pl-shadow-1:0 1px 2px rgba(14,20,25,.05), 0 8px 22px -18px rgba(14,20,25,.4);
  --pl-shadow-2:0 8px 28px rgba(14,20,25,.14);
}


/* Dashboard looks (data-look, parlor-look.js). Light only: every dark block
   below comes later at equal or higher specificity, so it always wins. */
:root[data-look="classic"]{
  --pl-ground:#F7F6F3;
  --pl-surface-1:#FFFFFF;
  --pl-surface-2:#FAF9F6;
  --pl-surface-3:#F0EEE9;
  --pl-ink:#1A1714;
  --pl-ink-2:#55504A;
  --pl-ink-3:#716B63;
  --pl-line:#E3E0D9;
  --pl-line-2:#CFCBC1;
  --pl-accent:#6C0C19;
  --pl-accent-ink:#FFFFFF;
  --pl-accent-soft:#F6E0DA;
}
:root[data-look="indigo"]{
  --pl-ground:#FCFCFE;
  --pl-surface-1:#F4F4FA;
  --pl-surface-2:#EAEAF6;
  --pl-surface-3:#DEDEF0;
  --pl-ink:#101024;
  --pl-ink-2:#474770;
  --pl-ink-3:#65658F;
  --pl-line:#D9D9EC;
  --pl-line-2:#BEBEDC;
  --pl-accent:#414C86;
  --pl-accent-ink:#FFFFFF;
  --pl-accent-soft:#E4E5F3;
}

/* --- DARK, following the operating system when nothing is stamped -------- */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-mode="light"]){
    --pl-ground:#0E1419;
    --pl-surface-1:#151E25;
    --pl-surface-2:#1D2831;
    --pl-surface-3:#27343E;
    --pl-ink:#EAF1F6;
    --pl-ink-2:#A9BDCB;
    --pl-ink-3:#74899A;
    --pl-line:#27343E;
    --pl-line-2:#3A4B58;
    --pl-accent:#7096B3;
    --pl-accent-ink:#0E1419;
    --pl-accent-soft:#1B2A36;
    --pl-ok:#5FB595;
    --pl-ok-soft:#12241E;
    --pl-warn:#D2A051;
    --pl-warn-soft:#2A2113;
    --pl-critical:#E08078;
    --pl-critical-soft:#2E1917;
    --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
    --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
  }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-mode="light"])[data-brand="pine"]{
    --pl-ground:#111315;
    --pl-surface-1:#1C2023;
    --pl-surface-2:#23282B;
    --pl-surface-3:#2B3033;
    --pl-ink:#E7EAEA;
    --pl-ink-2:#A3ABAF;
    --pl-ink-3:#8A9398;
    --pl-line:#2B3033;
    --pl-line-2:#3A4145;
    --pl-accent:#6FD3B0;
    --pl-accent-ink:#08231B;
    --pl-accent-soft:#1A3A31;
    --pl-ok:#A6D46B;
    --pl-ok-soft:#22301A;
    --pl-warn:#F2B85B;
    --pl-warn-soft:#3A2C12;
    --pl-critical:#FF8A80;
    --pl-critical-soft:#3A1E1C;
    --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
    --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
  }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-mode="light"])[data-brand="indigo"]{
    --pl-ground:#0F0F1A;
    --pl-surface-1:#171725;
    --pl-surface-2:#1F1F31;
    --pl-surface-3:#2A2A40;
    --pl-ink:#ECECF7;
    --pl-ink-2:#B0B0CE;
    --pl-ink-3:#7B7BA0;
    --pl-line:#2A2A40;
    --pl-line-2:#3D3D5A;
    --pl-accent:#8B96C9;
    --pl-accent-ink:#0F0F1A;
    --pl-accent-soft:#1D1D33;
    --pl-ok:#5FB595;
    --pl-ok-soft:#12241E;
    --pl-warn:#D2A051;
    --pl-warn-soft:#2A2113;
    --pl-critical:#E08078;
    --pl-critical-soft:#2E1917;
    --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
    --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
  }
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-mode="light"])[data-brand="clay"]{
    --pl-ground:#17110D;
    --pl-surface-1:#1F1712;
    --pl-surface-2:#2A1F18;
    --pl-surface-3:#372921;
    --pl-ink:#F6EDE7;
    --pl-ink-2:#CDB6A6;
    --pl-ink-3:#97806F;
    --pl-line:#372921;
    --pl-line-2:#4E3B2F;
    --pl-accent:#C89076;
    --pl-accent-ink:#17110D;
    --pl-accent-soft:#2E1E15;
    --pl-ok:#5FB595;
    --pl-ok-soft:#12241E;
    --pl-warn:#D2A051;
    --pl-warn-soft:#2A2113;
    --pl-critical:#E2818F;
    --pl-critical-soft:#31171C;
    --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
    --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
  }
}


/* --- DARK, chosen explicitly. Beats the OS in both directions. ----------- */

:root[data-theme="dark"],
:root[data-mode="dark"]{
  --pl-ground:#0E1419;
  --pl-surface-1:#151E25;
  --pl-surface-2:#1D2831;
  --pl-surface-3:#27343E;
  --pl-ink:#EAF1F6;
  --pl-ink-2:#A9BDCB;
  --pl-ink-3:#74899A;
  --pl-line:#27343E;
  --pl-line-2:#3A4B58;
  --pl-accent:#7096B3;
  --pl-accent-ink:#0E1419;
  --pl-accent-soft:#1B2A36;
  --pl-ok:#5FB595;
  --pl-ok-soft:#12241E;
  --pl-warn:#D2A051;
  --pl-warn-soft:#2A2113;
  --pl-critical:#E08078;
  --pl-critical-soft:#2E1917;
  --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
  --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
}

:root[data-theme="dark"][data-brand="pine"],
:root[data-mode="dark"][data-brand="pine"]{
  --pl-ground:#111315;
  --pl-surface-1:#1C2023;
  --pl-surface-2:#23282B;
  --pl-surface-3:#2B3033;
  --pl-ink:#E7EAEA;
  --pl-ink-2:#A3ABAF;
  --pl-ink-3:#8A9398;
  --pl-line:#2B3033;
  --pl-line-2:#3A4145;
  --pl-accent:#6FD3B0;
  --pl-accent-ink:#08231B;
  --pl-accent-soft:#1A3A31;
  --pl-ok:#A6D46B;
  --pl-ok-soft:#22301A;
  --pl-warn:#F2B85B;
  --pl-warn-soft:#3A2C12;
  --pl-critical:#FF8A80;
  --pl-critical-soft:#3A1E1C;
  --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
  --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
}

:root[data-theme="dark"][data-brand="indigo"],
:root[data-mode="dark"][data-brand="indigo"]{
  --pl-ground:#0F0F1A;
  --pl-surface-1:#171725;
  --pl-surface-2:#1F1F31;
  --pl-surface-3:#2A2A40;
  --pl-ink:#ECECF7;
  --pl-ink-2:#B0B0CE;
  --pl-ink-3:#7B7BA0;
  --pl-line:#2A2A40;
  --pl-line-2:#3D3D5A;
  --pl-accent:#8B96C9;
  --pl-accent-ink:#0F0F1A;
  --pl-accent-soft:#1D1D33;
  --pl-ok:#5FB595;
  --pl-ok-soft:#12241E;
  --pl-warn:#D2A051;
  --pl-warn-soft:#2A2113;
  --pl-critical:#E08078;
  --pl-critical-soft:#2E1917;
  --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
  --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
}

:root[data-theme="dark"][data-brand="clay"],
:root[data-mode="dark"][data-brand="clay"]{
  --pl-ground:#17110D;
  --pl-surface-1:#1F1712;
  --pl-surface-2:#2A1F18;
  --pl-surface-3:#372921;
  --pl-ink:#F6EDE7;
  --pl-ink-2:#CDB6A6;
  --pl-ink-3:#97806F;
  --pl-line:#372921;
  --pl-line-2:#4E3B2F;
  --pl-accent:#C89076;
  --pl-accent-ink:#17110D;
  --pl-accent-soft:#2E1E15;
  --pl-ok:#5FB595;
  --pl-ok-soft:#12241E;
  --pl-warn:#D2A051;
  --pl-warn-soft:#2A2113;
  --pl-critical:#E2818F;
  --pl-critical-soft:#31171C;
  --pl-shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -22px rgba(0,0,0,.9);
  --pl-shadow-2:0 8px 28px rgba(0,0,0,.55);
}


/* Native controls (scrollbars, date pickers, checkboxes) follow the tokens. */
:root{color-scheme:light}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-mode="light"]){color-scheme:dark}
}
:root[data-theme="dark"],:root[data-mode="dark"]{color-scheme:dark}

/* --- 2. BASE ------------------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Explicit, from a token. A transparent body borrows the host's ground and
     renders one theme's text on the other theme's background. */
  background:var(--pl-ground);
  color:var(--pl-ink);
  font-family:var(--pl-font-ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--pl-font-display);margin:0;text-wrap:balance;font-weight:600}
h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.05;letter-spacing:-.02em;font-weight:700}
h2{font-size:1.5rem;line-height:1.25}
h3{font-size:1.15rem;line-height:1.3}
p{margin:0 0 12px}
a{color:var(--pl-accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--pl-gold);outline-offset:2px;border-radius:var(--pl-r-sm)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.pl-u-label{
  font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--pl-ink-3);
}
.pl-u-num{font-variant-numeric:tabular-nums}
.pl-u-prose{font-family:var(--pl-font-prose);font-size:1.05rem;line-height:1.6;max-width:66ch}

/* --------------------------------------------------------------------------
   3. THE SHELL
   Sidebar on a desk, bottom bar on a phone. One navigation model, two
   presentations, chosen by width -- not two applications.
   -------------------------------------------------------------------------- */
.pl-app{min-height:100vh;min-height:100dvh}

.pl-rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--pl-nav-w);
  background:var(--pl-surface-1);border-right:1px solid var(--pl-line);
  padding:20px 14px;display:none;flex-direction:column;gap:4px;z-index:40;
  overflow-y:auto;
}
.pl-rail-brand{display:flex;align-items:center;gap:12px;padding:0 8px 20px}
.pl-rail-mark{
  width:40px;height:40px;border-radius:999px;flex-shrink:0;
  background:var(--pl-accent-soft);border:1px solid var(--pl-line-2);
  display:grid;place-items:center;
  font-family:var(--pl-font-display);font-size:1.25rem;font-weight:700;color:var(--pl-accent);
}
.pl-rail-name{font-family:var(--pl-font-display);font-size:1.25rem;line-height:1.15;font-weight:600}
.pl-rail-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-ink-3);font-weight:600}

/* A group heading is a real division of the product, not decoration: Tonight,
   Events, Guests, Insight, Setup. */
.pl-rail-group{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--pl-ink-3);padding:18px 10px 6px;
}
.pl-rail-link{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:var(--pl-r);
  color:var(--pl-ink-2);text-decoration:none;font-size:14px;font-weight:500;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease;
}
.pl-rail-link:hover{background:var(--pl-surface-2);color:var(--pl-ink)}
.pl-rail-link[aria-current="page"]{
  background:var(--pl-accent-soft);color:var(--pl-accent);
  border-color:var(--pl-line-2);font-weight:600;
}
.pl-rail-count{
  margin-left:auto;font-size:11px;font-weight:700;
  background:var(--pl-critical);color:var(--pl-ground);
  padding:1px 7px;border-radius:999px;
}
.pl-rail-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--pl-line);display:grid;gap:6px}

.pl-bar{
  position:fixed;left:0;right:0;bottom:0;height:var(--pl-bar-h);
  background:var(--pl-surface-1);border-top:1px solid var(--pl-line);
  display:flex;z-index:50;
  padding-bottom:env(safe-area-inset-bottom);
}
.pl-bar-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--pl-ink-3);text-decoration:none;font-size:11px;font-weight:600;
  /* 44px is the floor for a thumb. This is used one-handed, mid-service. */
  min-height:44px;position:relative;
  /* A label must never wrap. The bar is a fixed 64px and the items are
     flex-direction:column, so a second line of text pushes the icon and the
     label out of the bar rather than making it taller -- and `flex:1` with no
     min-width would let a long word do exactly that. This became load-bearing
     when ticketing added a seventh cell: at 390px seven cells are about 55px
     each and "Callbacks" is wider than that at 11px. Overflow is clipped
     rather than ellipsised: a clipped "Callback" still reads, and an ellipsis
     costs a character to say nothing. */
  white-space:nowrap;min-width:0;overflow:hidden;
}
/* The type ramp for a narrow phone. Only the label shrinks; the icon and the
   44px tap target do not, because the thumb needs both whatever the screen. */
@media(max-width:430px){
  .pl-bar-item{font-size:10px;gap:2px}
}
@media(max-width:360px){
  .pl-bar-item{font-size:9px}
}
.pl-bar-item[aria-current="page"]{color:var(--pl-accent)}
.pl-bar-item[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28px;height:3px;border-radius:0 0 999px 999px;background:var(--pl-accent);
}
.pl-bar-dot{
  position:absolute;top:8px;right:calc(50% - 18px);
  width:8px;height:8px;border-radius:999px;background:var(--pl-critical);
}
/* The `hidden` attribute must actually hide these. .pl-rail-link and .pl-bar-item set display:flex
   above, and an author rule beats the user-agent [hidden]{display:none}; without this line a
   venue with ticketing OFF would still see a Tickets link (index.html ships the ticketing links
   with `hidden` and PARLOR_TICKETS.boot() removes it only when the venue has it on). */
.pl-rail-group[hidden],.pl-rail-link[hidden],.pl-bar-item[hidden]{display:none}

.pl-main{padding:20px 16px calc(var(--pl-bar-h) + 28px)}

@media(min-width:900px){
  .pl-rail{display:flex}
  .pl-bar{display:none}
  .pl-main{margin-left:var(--pl-nav-w);padding:28px var(--pl-pad) 64px}
}

/* --------------------------------------------------------------------------
   4. PAGE HEAD + STATUS
   -------------------------------------------------------------------------- */
.pl-page-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
  justify-content:space-between;margin-bottom:26px;
}
.pl-page-head h1{margin-bottom:8px}
.pl-chips{display:flex;flex-wrap:wrap;gap:8px}
.pl-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:var(--pl-r-sm);
  background:var(--pl-surface-2);color:var(--pl-ink-2);
}
.pl-chip.pl-crit{background:var(--pl-critical-soft);color:var(--pl-critical)}
.pl-chip.pl-warn{background:var(--pl-warn-soft);color:var(--pl-warn)}
.pl-chip.pl-ok{background:var(--pl-ok-soft);color:var(--pl-ok)}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.pl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:var(--pl-r);
  font-family:var(--pl-font-ui);font-size:14px;font-weight:600;
  border:1px solid var(--pl-line-2);background:transparent;color:var(--pl-ink);
  cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.pl-btn:hover{background:var(--pl-surface-2)}
.pl-btn-primary{background:var(--pl-gold);color:var(--pl-gold-ink);border-color:var(--pl-gold)}
.pl-btn-primary:hover{filter:brightness(1.06);background:var(--pl-gold)}
.pl-btn-quiet{border-color:transparent;color:var(--pl-ink-2)}
.pl-btn-quiet:hover{background:var(--pl-surface-2);color:var(--pl-ink)}
.pl-btn-danger{border-color:var(--pl-critical);color:var(--pl-critical)}
.pl-btn-danger:hover{background:var(--pl-critical-soft)}

/* --------------------------------------------------------------------------
   6. CARDS + THE BENTO GRID
   -------------------------------------------------------------------------- */
.pl-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pl-gutter)}
@media(max-width:899px){.pl-grid{grid-template-columns:1fr}}
.pl-col-4{grid-column:span 4}
.pl-col-6{grid-column:span 6}
.pl-col-8{grid-column:span 8}
.pl-col-12{grid-column:span 12}
@media(max-width:899px){.pl-col-4,.pl-col-6,.pl-col-8,.pl-col-12{grid-column:1/-1}}

.pl-card{
  background:var(--pl-surface-1);border:1px solid var(--pl-line);
  border-radius:var(--pl-r-lg);padding:20px 22px;box-shadow:var(--pl-shadow-1);
  position:relative;
}
.pl-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.pl-card-head h2,.pl-card-head h3{margin:0}

/* Severity lives in FORM as well as number, so what needs attention reads at a
   glance on a phone held at arm's length. */
.pl-card-crit{border-top:2px solid var(--pl-critical)}
.pl-card-warn{border-top:2px solid var(--pl-warn)}
.pl-card-calm{border-top:2px solid var(--pl-line-2)}

.pl-pulse{position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:999px;background:var(--pl-critical)}
@media(prefers-reduced-motion:no-preference){
  .pl-pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
}

/* --------------------------------------------------------------------------
   7. THE PERSISTENT BANNER
   Not a toast. A failed save has to stay on screen and survive a tab change --
   the 414 bug went unnoticed for 26 days behind a 3.2-second toast.
   -------------------------------------------------------------------------- */
.pl-banner{
  display:flex;gap:12px;align-items:flex-start;
  border-left:3px solid var(--pl-critical);background:var(--pl-critical-soft);
  border-radius:var(--pl-r);padding:14px 18px;margin-bottom:22px;
}
.pl-banner h3{font-family:var(--pl-font-ui);font-size:14px;font-weight:700;color:var(--pl-critical)}
.pl-banner p{margin:4px 0 0;font-size:13.5px;color:var(--pl-ink-2)}

/* --------------------------------------------------------------------------
   8. STAGE STRIP + METRICS
   -------------------------------------------------------------------------- */
.pl-stages{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.pl-stage{flex:1;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:7px}
.pl-stage b{font-family:var(--pl-font-display);font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pl-stage.pl-empty b{color:var(--pl-ink-3)}
.pl-stage-track{width:100%;height:4px;border-radius:999px;background:var(--pl-surface-3);overflow:hidden}
.pl-stage-fill{height:100%;border-radius:999px;background:var(--pl-gold)}
.pl-stage-fill.pl-ok{background:var(--pl-ok)}

.pl-rows{display:grid;gap:10px}
.pl-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:var(--pl-r);
  background:var(--pl-surface-2);border:1px solid var(--pl-line);
}
.pl-row .pl-who{font-size:14px;font-weight:500}
.pl-row .pl-when{font-size:13px;color:var(--pl-ink-3)}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.pl-field{display:block;margin-bottom:16px}
.pl-field > span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--pl-ink-2)}
.pl-inp{
  width:100%;min-height:44px;padding:10px 13px;
  background:var(--pl-surface-2);color:var(--pl-ink);
  border:1px solid var(--pl-line);border-radius:var(--pl-r);
  font-family:var(--pl-font-ui);font-size:15px;
}
.pl-inp:focus{border-color:var(--pl-gold);outline:none;box-shadow:0 0 0 3px var(--pl-accent-soft)}
textarea.pl-inp{min-height:140px;resize:vertical;font-family:var(--pl-font-prose);font-size:16px;line-height:1.55}

/* --------------------------------------------------------------------------
   10. SETTINGS SUB-NAV
   Thirteen destinations in a horizontal scroller is what the current build
   does; it is unreadable and it hides which one is open. A list is the fix.
   -------------------------------------------------------------------------- */
.pl-settings-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--pl-gutter);align-items:start}
@media(max-width:899px){.pl-settings-layout{grid-template-columns:1fr}}
.pl-sub-nav{display:grid;gap:2px;position:sticky;top:20px}
@media(max-width:899px){.pl-sub-nav{position:static}}
.pl-sub-nav a{
  display:block;padding:9px 13px;border-radius:var(--pl-r);
  color:var(--pl-ink-2);text-decoration:none;font-size:14px;font-weight:500;
}
.pl-sub-nav a:hover{background:var(--pl-surface-2);color:var(--pl-ink)}
.pl-sub-nav a[aria-current="page"]{background:var(--pl-accent-soft);color:var(--pl-accent);font-weight:600}
.pl-sub-nav .pl-u-label{padding:16px 13px 5px}

.pl-wide{overflow-x:auto}

/* --------------------------------------------------------------------------
   11. THEME TOGGLE, SETTINGS PILL, COLLAPSIBLE PANEL
   Added for Joel's brief: staff pick white or black; settings live behind a
   pill on their own page, never on the home screen; and inside that page the
   sub-nav is a panel that collapses.
   -------------------------------------------------------------------------- */
.pl-pill{
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:8px 15px;border-radius:999px;
  background:var(--pl-surface-2);border:1px solid var(--pl-line);
  color:var(--pl-ink-2);font-size:13.5px;font-weight:600;
  font-family:var(--pl-font-ui);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pl-pill:hover{background:var(--pl-surface-3);color:var(--pl-ink);border-color:var(--pl-line-2)}
.pl-pill[aria-pressed="true"]{background:var(--pl-accent);color:var(--pl-accent-ink);border-color:var(--pl-accent)}

/* Two states, both drawn, so the control says what it will DO rather than what
   it currently is -- the ambiguity every theme toggle has. */
.pl-theme-on-dark{display:none}
:root[data-theme="dark"] .pl-theme-on-dark,:root[data-mode="dark"] .pl-theme-on-dark{display:inline}
:root[data-theme="dark"] .pl-theme-on-light,:root[data-mode="dark"] .pl-theme-on-light{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-mode="light"]) .pl-theme-on-dark{display:inline}
  :root:not([data-theme="light"]):not([data-mode="light"]) .pl-theme-on-light{display:none}
}

/* The settings page. Panel left, content right; the panel collapses to give a
   phone its whole width back, and the state is the caller's to keep. */
.pl-settings{display:grid;grid-template-columns:var(--pl-panel-w) 1fr;gap:var(--pl-gutter);align-items:start}
.pl-settings[data-collapsed="true"]{grid-template-columns:0 1fr;gap:0}
.pl-settings[data-collapsed="true"] .pl-panel{
  /* visibility, not display:none -- a collapsed panel keeps its place in the
     tab order out of the way rather than teleporting focus to the body. */
  width:0;overflow:hidden;visibility:hidden;
}
.pl-panel{
  position:sticky;top:20px;display:grid;gap:2px;
  background:var(--pl-surface-1);border:1px solid var(--pl-line);
  border-radius:var(--pl-r-lg);padding:12px;transition:width .2s ease;
}
.pl-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px}
@media(max-width:899px){
  .pl-settings,.pl-settings[data-collapsed="true"]{grid-template-columns:1fr;gap:var(--pl-gutter)}
  .pl-panel{position:static}
  .pl-settings[data-collapsed="true"] .pl-panel{width:auto;visibility:visible;overflow:visible}
}

/* Brand swatches, for choosing the hue. Not part of the product UI. */
.pl-swatches{display:flex;gap:10px;flex-wrap:wrap}
.pl-swatch{
  display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;
  border-radius:999px;border:1px solid var(--pl-line);background:var(--pl-surface-1);
  cursor:pointer;font-family:var(--pl-font-ui);font-size:13px;font-weight:600;color:var(--pl-ink-2);
}
.pl-swatch[aria-pressed="true"]{border-color:var(--pl-accent);color:var(--pl-ink)}
.pl-swatch i{width:22px;height:22px;border-radius:999px;display:block;border:1px solid rgba(0,0,0,.15)}