/* ==========================================================================
   Hourglass Pass: design tokens ("Sky and sand")
   --------------------------------------------------------------------------
   Sky / periwinkle  = the air the WiFi lives in: surfaces, tints, backdrop.
   Navy ink          = type, numbers, primary actions, icon tiles.
   Sand gold         = TIME. Only for the countdown ring, active passes,
                       "time left" and the one highlight on a chart.
                       Never for warnings, never decorative filler.
   Load order: tokens.css, then components.css. Dashboard only; the customer
   portal inlines its own copy of the colour and radius tokens (see README,
   "Portal") with the system font stack.
   Contrast ratios are WCAG 2.1 relative-luminance ratios, text on surface.
   AA = 4.5:1 body text, 3:1 large text (24px, or 18.66px bold) and UI glyphs.
   ========================================================================== */

/* Plus Jakarta Sans (SIL OFL 1.1), variable wght 200-800, latin subset.
   Source: npm @fontsource-variable/plus-jakarta-sans@5.3.0, file
   plus-jakarta-sans-latin-wght-normal.woff2 (27,348 bytes). Self-hosted:
   serve /fonts/ from our own origin. No other font request exists. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2?v=153fc85b70298bee") format("woff2-variations"),
       url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2?v=153fc85b70298bee") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* ---- Raw palette (light) ------------------------------------------- */
  /* Sky / periwinkle */
  --sky-25:  #FBFBFE;  /* main panel */
  --sky-50:  #F4F6FD;  /* inset areas, table header, chart plot */
  --sky-100: #E7ECFC;  /* tinted card (default) */
  --sky-150: #DCE3FA;  /* tinted card, stronger; hover on tint */
  --sky-200: #CBD5F6;  /* hero gradient end, selected chip */
  --sky-300: #AEBDF0;  /* chart area top, decorative */
  --sky-400: #8FA4E6;  /* backdrop sky */
  --sky-500: #6F86D9;  /* chart line on dark, decorative only (3.45:1 on white) */
  --sky-600: #4F63C4;  /* links, focus ring (5.36:1 on white) */

  /* Navy ink */
  --ink-900: #141A3F;  /* headings, big numbers. 16.81 on #FFF, 14.25 on sky-100 */
  --ink-800: #1E2550;  /* primary button, icon tile. #FFF on it: 14.63 */
  --ink-700: #343C6B;  /* body text. 10.48 on #FFF, 8.88 on sky-100 */
  --ink-600: #474F7E;  /* secondary text on tints and the hero. 7.81 on #FFF, 5.06 on the hero end stop */
  --ink-500: #5B638E;  /* muted text. 5.80 #FFF, 5.62 sky-25, 4.92 sky-100, 4.53 sky-150, 5.17 frame */
  --ink-400: #8E94B6;  /* disabled, axis ticks next to labelled values. 2.97: NOT for text */
  --ink-300: #BCC1D9;  /* input borders at rest (UI, with label), chart gridline strong */
  --ink-200: #DCE0EE;  /* hairline dividers */
  --ink-100: #EDEFF7;  /* list row dividers, skeleton base */

  /* Sand = time */
  --sand-50:  #FDF7EA;
  --sand-100: #FBEFD3;  /* active-pass pill bg */
  --sand-200: #F6DDA6;
  --sand-300: #F0C36A;  /* sand on dark surfaces; highlighted column top */
  --sand-400: #E9B04E;  /* sand button fill. ink-900 on it: 8.63 */
  --sand-500: #C98F2A;  /* ring arc, stream, mark. 2.82 on #FFF: graphic only, always paired with the number */
  --sand-600: #B07A1C;  /* ring arc on white where it must stand alone: 3.72 */
  --sand-700: #8A5A0E;  /* sand text. 5.92 on #FFF, 5.18 on sand-100 */

  /* Status (warning is burnt orange, deliberately NOT sand: time is never a warning) */
  --green-600: #157350;  --green-50: #E2F4EA;   /* 5.83 on #FFF, 5.10 on its bg */
  --orange-600: #A94C0B; --orange-50: #FFF0E2;  /* 5.64 on #FFF, 5.05 on its bg */
  --red-600: #B72D47;    --red-50: #FDEBEE;     /* 6.03 on #FFF, 5.26 on its bg; #FFF on red-600 6.03 */
  --blue-600: #3D51C2;   --blue-50: #E8ECFD;    /* 6.66 on #FFF, 5.66 on its bg */

  /* ---- Semantic tokens (light). Components use ONLY these. -------------- */
  /* Backdrop: a soft sky. Cloud light is layered radial gradients over a
     vertical sky, so it costs no image request. */
  --bg-backdrop:
    radial-gradient(60% 45% at 10% 4%, rgba(255,255,255,.80), rgba(255,255,255,0) 70%),
    radial-gradient(45% 35% at 92% 12%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%),
    radial-gradient(70% 50% at 70% 100%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    radial-gradient(40% 30% at 30% 62%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #7D96DD 0%, #A7BAEE 36%, #D7E0F8 74%, #EEF1FB 100%);
  --bg-backdrop-solid: #C9D4F4;
  --bg-frame: rgba(244, 247, 254, .64);      /* frosted, with backdrop-filter */
  --bg-frame-solid: #EEF2FB;                 /* fallback when backdrop-filter is unsupported */
  --frame-edge: rgba(255, 255, 255, .75);    /* 1px inner highlight, not a border */
  --bg-panel: var(--sky-25);                 /* main white panel */
  --bg-card: #FFFFFF;                        /* raised card inside the panel */
  --bg-inset: var(--sky-50);                 /* right column, table head, wells */
  --bg-tint: var(--sky-100);                 /* tinted periwinkle card */
  --bg-tint-strong: var(--sky-150);
  --bg-hero: linear-gradient(135deg, #EEF1FD 0%, #DDE4FB 45%, #C4CFF6 100%);
  --bg-on-hero: rgba(255, 255, 255, .62);    /* cards sitting on the hero gradient (setup steps) */
  --bg-on-hero-strong: #FFFFFF;              /* the current step on the hero */
  --halo-1: #FFFFFF;                         /* empty-state art: three soft discs behind the mark */
  --halo-2: rgba(255, 255, 255, .55);
  --halo-3: rgba(255, 255, 255, .28);
  --hero-muted: var(--ink-600);              /* muted text on the hero: ink-500 falls to 3.76 at the gradient end; ink-600 is 5.06 */
  --hero-glow: radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  --bg-tile: var(--ink-800);                 /* dark rounded-square icon tile */
  --fg-on-tile: #FFFFFF;
  --bg-hover: rgba(30, 37, 80, .05);
  --bg-pressed: rgba(30, 37, 80, .09);
  --bg-selected: #FFFFFF;                    /* active nav item */
  --bg-scrim: rgba(12, 16, 44, .38);

  --text: var(--ink-900);
  --text-2: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-disabled: var(--ink-400);
  --text-on-primary: #FFFFFF;
  --link: var(--sky-600);
  --line: var(--ink-100);                    /* row dividers */
  --line-2: var(--ink-200);                  /* card outline where one is unavoidable */
  --line-control: #868CB0;                   /* control outline at rest, toggle-off track: 3.29 on #FFF, 3.04 on sky-50 (WCAG 1.4.11 needs 3:1) */
  --focus: var(--sky-600);
  --focus-halo: rgba(79, 99, 196, .18);

  --primary: var(--ink-800);
  --primary-hover: var(--ink-900);
  --secondary-bg: #FFFFFF;
  --secondary-edge: var(--ink-200);

  --time: var(--sand-500);                   /* ring arc, stream, active dot */
  --time-strong: var(--sand-600);
  --time-soft: var(--sand-100);
  --time-text: var(--sand-700);
  --time-fill: var(--sand-400);              /* sand button */
  --time-track: rgba(30, 37, 80, .10);

  --ok: var(--green-600);    --ok-bg: var(--green-50);
  --warn: var(--orange-600); --warn-bg: var(--orange-50);
  --bad: var(--red-600);     --bad-bg: var(--red-50);
  --info: var(--blue-600);   --info-bg: var(--blue-50);

  /* Charts */
  --chart-line: var(--ink-800);
  --chart-area-top: rgba(111, 134, 217, .28);
  --chart-area-bottom: rgba(111, 134, 217, 0);
  --chart-grid: var(--ink-100);
  --chart-axis: var(--ink-500);
  --chart-bar: var(--sky-200);
  --chart-bar-2: var(--sky-300);
  --chart-hl-top: rgba(30, 37, 80, .22);     /* highlighted column: navy fading down */
  --chart-hl-bottom: rgba(30, 37, 80, 0);
  --chart-tip-bg: var(--ink-900);
  --chart-tip-fg: #FFFFFF;
  --chart-dot-ring: #FFFFFF;

  /* ---- Radii: big and soft, nested radii shrink by the padding --------- */
  --r-frame: 40px;     /* floating frosted frame */
  --r-panel: 32px;     /* white main panel */
  --r-card: 24px;      /* cards, tinted cards, hero */
  --r-tile: 14px;      /* dark icon tile (48px) */
  --r-control: 14px;   /* buttons, inputs, selects */
  --r-sm: 10px;        /* chips, small tiles, tooltips */
  --r-xs: 6px;         /* badges, checkbox */
  --r-pill: 999px;     /* search bar, pills, toggles, avatar */

  /* ---- Shadows: soft navy haze, never grey, never hard ------------------ */
  --shadow-frame: 0 40px 90px -40px rgba(24, 34, 96, .45), 0 12px 32px -20px rgba(24, 34, 96, .25);
  --shadow-panel: 0 1px 2px rgba(20, 26, 63, .03), 0 20px 48px -28px rgba(20, 26, 63, .16);
  --shadow-raise: 0 10px 28px -16px rgba(20, 26, 63, .22);
  --shadow-pop: 0 22px 48px -18px rgba(20, 26, 63, .32), 0 2px 6px rgba(20, 26, 63, .06);
  --shadow-ring: 0 0 0 3px var(--bg-panel), 0 0 0 5px var(--focus);   /* focus */

  /* ---- Spacing: 4px base ------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;               /* customer portal: no font file */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --num: "tnum" 1, "lnum" 1;                           /* font-feature-settings for numbers */

  /* size / line-height pairs */
  --fs-caption: 12px;  --lh-caption: 16px;   /* axis labels, badges, overlines */
  --fs-small: 13px;    --lh-small: 18px;     /* dates, hints, meta */
  --fs-body: 15px;     --lh-body: 22px;      /* default */
  --fs-lead: 17px;     --lh-lead: 26px;      /* intro sentences, list primary */
  --fs-h3: 18px;       --lh-h3: 24px;        /* card titles */
  --fs-h2: 22px;       --lh-h2: 28px;        /* section titles ("Live sessions") */
  --fs-h1: 28px;       --lh-h1: 34px;        /* page title ("Overview") */
  --fs-stat: 32px;     --lh-stat: 36px;      /* tinted-card numbers */
  --fs-display: 48px;  --lh-display: 52px;   /* hero number */
  --fs-code: 44px;     --lh-code: 48px;      /* staff / hourly codes */

  --w-body: 500;       /* Jakarta reads light; 500 is the calm default */
  --w-medium: 580;
  --w-semi: 650;
  --w-bold: 720;
  --w-heavy: 780;      /* big numbers only */
  --track-tight: -0.02em;
  --track-num: -0.025em;
  --track-code: 0.14em;
  --track-over: 0.06em;

  /* ---- Layout ------------------------------------------------------------ */
  --frame-gap: 28px;          /* backdrop visible around the frame */
  --frame-pad: 20px;
  --sidebar-w: 224px;
  --topbar-h: 72px;
  --panel-pad: 36px;
  --content-max: 1520px;
  --tabbar-h: 68px;
  --tap: 44px;                /* minimum touch target */

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-flip: 700ms;          /* the hourglass flip on refill */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --z-sticky: 10; --z-drawer: 40; --z-modal: 50; --z-toast: 60;
}

/* ---- Dark: night sky. Same structure, surfaces step UP in lightness ----- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-backdrop:
      radial-gradient(55% 40% at 12% 6%, rgba(120, 140, 230, .30), rgba(120, 140, 230, 0) 70%),
      radial-gradient(45% 35% at 90% 14%, rgba(233, 176, 78, .10), rgba(233, 176, 78, 0) 70%),
      radial-gradient(70% 50% at 60% 105%, rgba(96, 116, 214, .32), rgba(96, 116, 214, 0) 70%),
      linear-gradient(180deg, #0A0E2B 0%, #121842 45%, #1B2358 100%);
    --bg-backdrop-solid: #0F1438;
    --bg-frame: rgba(22, 27, 68, .62);
    --bg-frame-solid: #161B45;
    --frame-edge: rgba(255, 255, 255, .08);
    --bg-panel: #111538;                     /* text 15.96, text-2 10.91, muted 7.01, link 9.09 */
    --bg-card: #1A1F4C;                      /* muted 6.20 */
    --bg-inset: #161B45;                     /* muted 6.53 */
    --bg-tint: #20275A;                      /* ink 12.65, ink-2 8.65, muted 5.56 */
    --bg-tint-strong: #28306A;
    --bg-hero: linear-gradient(135deg, #2A3375 0%, #222A63 50%, #1B2152 100%);
    --hero-glow: radial-gradient(60% 80% at 85% 20%, rgba(168, 182, 255, .22), rgba(168, 182, 255, 0) 70%);
    --bg-on-hero: rgba(228, 232, 250, .06);  /* translucent, so it always reads lighter than the hero behind it */
    --bg-on-hero-strong: rgba(228, 232, 250, .12);
    --halo-1: #262E66;
    --halo-2: rgba(168, 182, 255, .10);
    --halo-3: rgba(168, 182, 255, .05);
    --hero-muted: #A7AED6;                   /* 5.29 on the hero's lightest stop */
    --bg-tile: #E4E8FA;                      /* tile turns light on dark */
    --fg-on-tile: #141A3F;                   /* 13.79 */
    --bg-hover: rgba(228, 232, 250, .06);
    --bg-pressed: rgba(228, 232, 250, .10);
    --bg-selected: #232A60;
    --bg-scrim: rgba(4, 6, 20, .6);

    --text: #F1F3FC;                         /* 15.96 on panel, 12.65 on tint */
    --text-2: #C5CAE6;                       /* 10.91 panel, 8.65 tint */
    --text-muted: #9AA1CB;                   /* 7.01 panel, 6.20 card, 5.56 tint */
    --text-disabled: #646B98;
    --text-on-primary: #141A3F;
    --link: #A8B6FF;                         /* 8.69 */
    --line: rgba(228, 232, 250, .08);
    --line-2: rgba(228, 232, 250, .14);
    --line-control: #737A9E;                 /* 3.72 on card, 4.2 on panel */
    --focus: #A8B6FF;
    --focus-halo: rgba(168, 182, 255, .22);

    --primary: #E4E8FA;                      /* light button on dark, ink text 13.79 */
    --primary-hover: #FFFFFF;
    --secondary-bg: #20275A;
    --secondary-edge: rgba(228, 232, 250, .14);

    --time: #F0C36A;                         /* 10.70 on panel */
    --time-strong: #F5D38D;
    --time-soft: rgba(240, 195, 106, .14);
    --time-text: #F0C36A;                    /* 8.48 on tint */
    --time-fill: #F0C36A;                    /* ink on it 10.18 */
    --time-track: rgba(228, 232, 250, .12);

    --ok: #5FD3A6;   --ok-bg: rgba(95, 211, 166, .12);    /* 9.14 */
    --warn: #FFAA6B; --warn-bg: rgba(255, 170, 107, .12); /* 9.02 */
    --bad: #FF8A9C;  --bad-bg: rgba(255, 138, 156, .12);  /* 7.54 */
    --info: #A8B6FF; --info-bg: rgba(168, 182, 255, .12); /* 8.69 */

    --chart-line: #C9D3FF;
    --chart-area-top: rgba(143, 164, 230, .30);
    --chart-area-bottom: rgba(143, 164, 230, 0);
    --chart-grid: rgba(228, 232, 250, .07);
    --chart-axis: #9AA1CB;
    --chart-bar: #2C356F;
    --chart-bar-2: #3A4488;
    --chart-hl-top: rgba(168, 182, 255, .26);
    --chart-hl-bottom: rgba(168, 182, 255, 0);
    --chart-tip-bg: #F1F3FC;
    --chart-tip-fg: #141A3F;                 /* 16.8 */
    --chart-dot-ring: #111538;

    --shadow-frame: 0 40px 90px -40px rgba(0, 0, 0, .7), 0 12px 32px -20px rgba(0, 0, 0, .5);
    --shadow-panel: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 48px -28px rgba(0, 0, 0, .6);
    --shadow-raise: 0 10px 28px -16px rgba(0, 0, 0, .6);
    --shadow-pop: 0 22px 48px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(228, 232, 250, .08);
  }
}

/* ---- Reduced motion: every duration collapses; the ring still updates --- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-flip: 0ms; }
}

/* ==========================================================================
   Hourglass Pass: components. Requires tokens.css first.
   Rules (see README "Cleanliness rules"): no hard borders, surfaces separate by
   tone; one dark element per card (the icon tile); numbers are navy, big and
   tabular; sand is time only; generous space (24/32/40); radii nest
   (frame 40 > panel 32 > card 24 > control 14).
   Naming: block, block__part, block--variant. State via aria-* where one exists.
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  color: var(--text);
  background-color: var(--bg-backdrop-solid);
  background-image: var(--bg-backdrop);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--w-bold); letter-spacing: var(--track-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-bold); letter-spacing: var(--track-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semi); letter-spacing: -0.01em; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
svg { flex: none; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
.num, time, .tabular { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.overline { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-semi); letter-spacing: var(--track-over); text-transform: uppercase; color: var(--text-muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: var(--z-toast); background: var(--primary); color: var(--text-on-primary); padding: 10px 16px; border-radius: var(--r-control); font-weight: var(--w-semi); text-decoration: none; }
.skip:focus { top: 16px; }

/* One focus treatment everywhere: a 2px ring offset by the surface colour. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: inherit; }
:focus:not(:focus-visible) { outline: none; }

/* ---- Icons (inline SVG, 24 grid, 1.6 stroke) ---------------------------- */
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 20px; height: 20px; }
.i--xs { width: 16px; height: 16px; stroke-width: 1.8; }
.i--lg { width: 28px; height: 28px; stroke-width: 1.5; }

/* ---- App frame: sky backdrop, floating frosted frame --------------------- */
.app { min-height: 100vh; padding: var(--frame-gap); display: flex; }
.frame {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "brand top" "side main";
  column-gap: var(--s-6);
  padding: var(--frame-pad) var(--frame-pad) var(--frame-pad) var(--s-5);
  border-radius: var(--r-frame);
  background: var(--bg-frame-solid);
  box-shadow: var(--shadow-frame), inset 0 0 0 1px var(--frame-edge);
  min-width: 0;                       /* a flex item: without this, one wide child widens the page on phones */
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .frame {
    background: var(--bg-frame);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
  }
}
.frame__brand { grid-area: brand; display: flex; align-items: center; padding-left: var(--s-4); }
.frame__brand a { display: inline-flex; border-radius: var(--r-sm); }
.frame__brand img, .frame__brand svg { height: 34px; width: auto; display: block; }
.frame__brand .brand-mark { display: none; }
.side {
  grid-area: side; display: flex; flex-direction: column; min-height: 0;
  padding: var(--s-7) 0 var(--s-2);
  position: sticky; top: var(--s-4); align-self: start;
  height: calc(100vh - var(--topbar-h) - var(--frame-gap) * 2 - var(--frame-pad) * 2);
  min-height: 560px;
}
.top { grid-area: top; display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }

/* ---- Sidebar navigation --------------------------------------------------- */
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.nav + .nav { margin-top: auto; padding-top: var(--s-6); }
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 52px; padding: 0 var(--s-4);
  border-radius: var(--r-control);
  color: var(--text-2);
  font-weight: var(--w-medium); font-size: var(--fs-body);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__item .i { color: var(--text-2); }
.nav__item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav__item[aria-current="page"] {
  background: var(--bg-selected);
  color: var(--text);
  font-weight: var(--w-bold);
  box-shadow: var(--shadow-raise);
}
.nav__item[aria-current="page"] .i { color: var(--text); stroke-width: 1.8; }
.nav__badge {
  margin-left: auto;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 7px;
  background: var(--bg-tile); color: var(--fg-on-tile);
  font-size: var(--fs-caption); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.nav__badge--time { background: var(--time-fill); color: var(--ink-900); }
button.nav__item { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.nav__item--quiet { color: var(--text-muted); }

/* ---- Top bar ---------------------------------------------------------------- */
.top__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.pill-field {                         /* search, location switcher: the reference's pill bar */
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  height: 48px; min-width: 0; width: min(420px, 100%);
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--text-muted);
  box-shadow: 0 1px 2px rgba(20, 26, 63, .04);
}
.pill-field input, .pill-field select {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-weight: var(--w-medium);
  -webkit-appearance: none; appearance: none;
}
.pill-field input::placeholder { color: var(--text-muted); opacity: 1; }
.pill-field input:focus, .pill-field select:focus { outline: none; }
.pill-field:focus-within { box-shadow: var(--shadow-ring); }
.pill-field select { padding-right: 24px; cursor: pointer; }
.pill-field__chev { position: absolute; right: 18px; pointer-events: none; color: var(--text-muted); }
.pill-field__label { color: var(--text-muted); font-size: var(--fs-small); white-space: nowrap; }
.loc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--time); box-shadow: 0 0 0 4px var(--time-soft); flex: none; }

.icon-btn {
  position: relative;
  width: var(--tap); height: var(--tap);
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn__dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bg-frame-solid); }
.avatar {
  width: 48px; height: 48px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sand-300), var(--sand-500));
  color: var(--ink-900);
  font-weight: var(--w-bold); font-size: var(--fs-body); letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--bg-card);
  text-decoration: none;
}
.avatar--sm { width: 36px; height: 36px; font-size: var(--fs-small); box-shadow: 0 0 0 2px var(--bg-card); }

/* ---- Main panel ------------------------------------------------------------ */
.panel {
  flex: 1;
  margin-top: var(--s-4);
  padding: var(--panel-pad);
  border-radius: var(--r-panel);
  background: var(--bg-panel);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-7); }
.page-head__sub { margin-top: var(--s-1); color: var(--text-muted); }
.page-head__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.section-head a { font-size: var(--fs-small); color: var(--text-muted); text-decoration: none; font-weight: var(--w-medium); }
.section-head a:hover { color: var(--text); }

/* Layout helpers */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: var(--s-8); align-items: start; }
.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.grid--hero > :first-child { grid-column: 1 / -1; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s-6); }
.stack--sm { gap: var(--s-3); }
.stack--lg { gap: var(--s-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.spacer { flex: 1; }

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-control);
  font: inherit; font-weight: var(--w-semi); font-size: var(--fs-body); line-height: 1;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  background: var(--secondary-bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--secondary-edge);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; background: var(--bg-inset); }
.btn:active { transform: translateY(1px); }
.btn .i { width: 20px; height: 20px; }
.btn--primary { background: var(--primary); color: var(--text-on-primary); box-shadow: 0 8px 18px -10px rgba(20, 26, 63, .55); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--sand { background: var(--time-fill); color: var(--ink-900); box-shadow: 0 8px 18px -10px rgba(169, 112, 20, .6); }
.btn--sand:hover { background: var(--sand-300); }
.btn--secondary { /* the default look, named for clarity */ }
.btn--ghost { background: transparent; box-shadow: none; color: var(--text-2); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn--danger { background: var(--bad); color: #FFFFFF; box-shadow: none; }
.btn--danger:hover { filter: brightness(.94); background: var(--bad); }
.btn--danger-quiet { background: var(--bad-bg); color: var(--bad); box-shadow: none; }
.btn--icon { width: var(--tap); padding: 0; }
.btn--sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--fs-small); border-radius: var(--r-sm); }
.btn--lg { min-height: 56px; padding: 0 var(--s-6); font-size: var(--fs-lead); border-radius: 18px; }
.btn--xl { min-height: 68px; padding: 0 var(--s-6); font-size: 19px; border-radius: 20px; }   /* staff counter buttons */
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
@media (prefers-color-scheme: dark) {
  .btn--danger { color: var(--ink-900); }
}
form.inline { display: inline; margin: 0; }

/* ---- Forms ------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field + .field { margin-top: var(--s-5); }
.label { font-weight: var(--w-semi); font-size: var(--fs-small); color: var(--text); }
.label__opt { font-weight: var(--w-body); color: var(--text-muted); }
.hint { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.hint--advice { color: var(--time-text); }              /* "Recommended: 90" evidence line */
.error-text { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--bad); font-weight: var(--w-semi); display: flex; gap: 6px; align-items: flex-start; }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-control);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-control);
  color: var(--text);
  font: inherit; font-weight: var(--w-medium);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { min-height: 112px; padding: var(--s-3) var(--s-4); line-height: var(--lh-body); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; font-weight: var(--w-body); }
.input:hover, .select:hover, .textarea:hover { box-shadow: inset 0 0 0 1px var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px var(--focus-halo); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad); }
.input[readonly] { background: var(--bg-inset); box-shadow: none; }
.input--code { font-family: var(--font-mono); letter-spacing: .04em; }
.select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B638E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
@media (prefers-color-scheme: dark) {
  .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1CB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
}
.input-group { display: flex; align-items: center; border-radius: var(--r-control); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--line-control); }
.input-group:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.input-group .input { box-shadow: none; background: transparent; }
.input-group .input:focus { box-shadow: none; }
.input-group__affix { padding: 0 var(--s-4); color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--w-semi); white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.form-grid .field + .field { margin-top: 0; }
.form-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-7); }
fieldset.group { border: 0; padding: 0; margin: 0; }
fieldset.group > legend { padding: 0; margin-bottom: var(--s-3); font-weight: var(--w-semi); font-size: var(--fs-small); }

/* Checkbox and radio: native inputs, restyled; the label is the 44px target. */
.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: 10px 0; cursor: pointer; font-weight: var(--w-medium); }
.check input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0;
  border-radius: 7px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--line-control);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.check input[type="radio"] { border-radius: 50%; }
.check input::after { content: ""; width: 10px; height: 6px; border: solid var(--text-on-primary); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.check input[type="radio"]::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--text-on-primary); transform: scale(0); }
.check input:checked { background: var(--primary); box-shadow: none; }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input[type="radio"]:checked::after { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.check__text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.check__text .hint { font-weight: var(--w-body); }

/* Toggle: <label class="toggle"><input type="checkbox" role="switch"> ... */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--tap); cursor: pointer; font-weight: var(--w-medium); }
.toggle input {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 48px; height: 28px; border-radius: var(--r-pill);
  background: var(--line-control);
  position: relative; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.toggle input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 2px 6px rgba(20, 26, 63, .25);
  transition: transform var(--dur-base) var(--ease-out);
}
.toggle input:checked { background: var(--primary); }
.toggle input:checked::after { transform: translateX(20px); }
@media (prefers-color-scheme: dark) {
  .toggle input:checked::after { background: var(--ink-900); }
}

/* Segmented control: radio group styled as a pill track. */
.segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--line); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: var(--w-semi); color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.segmented input:checked + span { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-raise); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.segmented--block { display: flex; }
.segmented--block label { flex: 1; }
.segmented--block span { width: 100%; }

/* ---- Cards ------------------------------------------------------------------- */
.card { border-radius: var(--r-card); background: var(--bg-inset); padding: var(--s-7); min-width: 0; }
.card--raised { background: var(--bg-card); box-shadow: var(--shadow-raise); }
.card--tint { background: var(--bg-tint); }
.card--hero { position: relative; overflow: hidden; background: var(--bg-hero); }
.card--hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; }
.card--hero > * { position: relative; }
.card--hero { --text-muted: var(--hero-muted); }
.card--flush { padding: 0; }
.card--compact { padding: var(--s-5); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semi); }
.card__sub { margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }

/* ---- Icon tile: the one dark shape per card ------------------------------- */
.tile {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-tile);
  background: var(--bg-tile); color: var(--fg-on-tile);
}
.tile .i { width: 24px; height: 24px; }
.tile--sm { width: 36px; height: 36px; border-radius: 11px; }
.tile--sm .i { width: 20px; height: 20px; }
.tile--sand { background: var(--time-fill); color: var(--ink-900); }
.tile--soft { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-raise); }
.tile--ok { background: var(--ok-bg); color: var(--ok); }
.tile--warn { background: var(--warn-bg); color: var(--warn); }
.tile--bad { background: var(--bad-bg); color: var(--bad); }

/* ---- Stat tiles (numbers on tinted cards) ------------------------------------- */
.stat { display: flex; flex-direction: column; gap: var(--s-5); border-radius: var(--r-card); background: var(--bg-tint); padding: var(--s-6); min-width: 0; }
.stat__label { font-weight: var(--w-semi); font-size: var(--fs-body); color: var(--text); }
.stat__sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); margin-top: 2px; }
.stat__value {
  font-size: var(--fs-stat); line-height: var(--lh-stat);
  font-weight: var(--w-heavy); letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num);
  color: var(--text);
  white-space: nowrap;
}
.stat__unit { font-size: .5em; font-weight: var(--w-semi); letter-spacing: 0; color: var(--text-muted); margin-left: 4px; }
.stat__foot { margin-top: auto; font-size: var(--fs-small); color: var(--text-muted); }
.stat--row { flex-direction: row; align-items: center; gap: var(--s-4); }
.stat--row .stat__value { margin-left: auto; text-align: right; }
/* In the 2-up hero row the number takes its own line under tile + label (the reference's card rhythm),
   so a long value like "2 h 36 min" never squeezes the label into three lines. */
.grid--hero > .stat--row { flex-wrap: wrap; row-gap: var(--s-4); align-content: flex-start; }
.grid--hero > .stat--row > div { flex: 1 1 0; min-width: 0; }
.grid--hero > .stat--row > .stat__value { flex-basis: 100%; margin-left: 0; text-align: left; }
.stat--time .stat__value { color: var(--text); }
.stat--empty .stat__value { color: var(--text-muted); }

/* ---- List rows (the reference's transaction rows) ----------------------------- */
/* <ul class="list" role="list"><li class="row">icon | main | meta | value | pill | more */
.list { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, auto) 44px;
  align-items: center; column-gap: var(--s-5);
  min-height: 76px; padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row__icon { color: var(--text); display: grid; place-items: center; }
.row__icon .i { width: 28px; height: 28px; stroke-width: 1.5; }
.row__main { min-width: 0; }
.row__title { font-weight: var(--w-bold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__sub { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; }
.row__meta.pill { justify-self: start; color: var(--text-2); }
.row__value { font-weight: var(--w-bold); color: var(--text); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.row__value small { display: block; font-size: var(--fs-caption); font-weight: var(--w-body); color: var(--text-muted); }
.row__more { justify-self: end; }
.row--link { position: relative; }
.row--link:hover { background: linear-gradient(90deg, transparent, var(--bg-hover) 8%, var(--bg-hover) 92%, transparent); }
.list--compact .row { min-height: 60px; grid-template-columns: 32px minmax(0, 1fr) auto; }

/* Row actions menu: <details class="menu"> needs no JS. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-drawer);
  min-width: 200px; padding: var(--s-2);
  border-radius: 16px; background: var(--bg-card); box-shadow: var(--shadow-pop);
}
.menu__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-weight: var(--w-medium); text-align: left; text-decoration: none; cursor: pointer; }
.menu__item:hover { background: var(--bg-hover); text-decoration: none; }
.menu__item--danger { color: var(--bad); }

/* ---- Tables: for dense data (report hours, network checks, master list) -------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-card); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th { text-align: left; padding: var(--s-3) var(--s-5); font-size: var(--fs-caption); font-weight: var(--w-semi); letter-spacing: var(--track-over); text-transform: uppercase; color: var(--text-muted); background: var(--bg-inset); white-space: nowrap; }
.table td { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.table td:first-child, .table th:first-child { padding-left: var(--s-6); }
.table td:last-child, .table th:last-child { padding-right: var(--s-6); }
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table strong, .table b { color: var(--text); font-weight: var(--w-bold); }
.table tr.is-peak td { background: var(--time-soft); }
.table caption { caption-side: top; text-align: left; padding: 0 0 var(--s-3); font-weight: var(--w-semi); }

/* ---- Status pills and dots ------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: var(--w-semi); line-height: 1;
  background: var(--bg-inset); color: var(--text-2);
  white-space: nowrap;
}
.pill .i { width: 16px; height: 16px; stroke-width: 1.8; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--bad { background: var(--bad-bg); color: var(--bad); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--time { background: var(--time-soft); color: var(--time-text); }
.pill--solid { background: var(--bg-tile); color: var(--fg-on-tile); }
.pill--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--bad { background: var(--bad); }
.dot--time { background: var(--time); }
.dot--live { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: hp-pulse 2.4s var(--ease-out) infinite; }
@keyframes hp-pulse { 0% { box-shadow: 0 0 0 0 rgba(21, 115, 80, .45); } 70% { box-shadow: 0 0 0 8px rgba(21, 115, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(21, 115, 80, 0); } }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--bg-tile); color: var(--fg-on-tile); font-size: 11px; font-weight: var(--w-bold); }

/* ---- Notices: info, success, warning, problem ------------------------------------ */
/* <div class="notice notice--warn" role="status"><svg class="i">..</svg><div class="notice__body">
   <p class="notice__title">..</p><p>..</p></div><a class="btn btn--sm">Fix</a></div>        */
.notice {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: 18px;
  background: var(--info-bg); color: var(--text);
}
.notice > .i { color: var(--info); margin-top: 1px; }
.notice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notice__title { font-weight: var(--w-bold); }
.notice__body p:not(.notice__title) { color: var(--text-2); }
.notice__body ul { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--text-2); }
.notice > .btn { align-self: center; }
.notice--ok { background: var(--ok-bg); }
.notice--ok > .i { color: var(--ok); }
.notice--warn { background: var(--warn-bg); }
.notice--warn > .i { color: var(--warn); }
.notice--bad { background: var(--bad-bg); }
.notice--bad > .i { color: var(--bad); }
.notice--time { background: var(--time-soft); }
.notice--time > .i { color: var(--time-text); }
.notice + .notice { margin-top: var(--s-3); }

/* ---- Empty states ---------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-8) var(--s-6); }
.empty__art { width: 120px; height: 120px; margin-bottom: var(--s-2); color: var(--text); }
.empty__art--sm { width: 72px; height: 72px; }
.empty__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); }
.empty__text { max-width: 36ch; color: var(--text-muted); }
.empty__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-3); }
.empty--row { flex-direction: row; text-align: left; padding: var(--s-5) 0; gap: var(--s-5); }
.empty--row .empty__text { max-width: none; }
.empty--dashed { border-radius: var(--r-card); background:
  linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box,
  repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px) border-box; border: 1.5px solid transparent; }

/* ---- Tabs ---------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--s-6); box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 2px;
  border: 0; background: none; font: inherit; font-weight: var(--w-semi); color: var(--text-muted);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tabs__tab:hover { color: var(--text); text-decoration: none; }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--text); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

/* ---- Tooltips ---------------------------------------------------------------------- */
/* Static chart tooltip (server-positioned) and a CSS hint for icon buttons. */
.tip {
  display: inline-block; padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--chart-tip-bg); color: var(--chart-tip-fg);
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--shadow-pop);
}
.tip small { display: block; font-weight: var(--w-body); opacity: .8; }
[data-hint] { position: relative; }
[data-hint]::after {
  content: attr(data-hint);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--chart-tip-bg); color: var(--chart-tip-fg);
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-semi); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
[data-hint]:hover::after, [data-hint]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---- Charts: hand-drawn inline SVG, labels in HTML so they never stretch -------- */
/* <figure class="chart"><div class="chart__y">..</div><div class="chart__plot"><svg viewBox="0 0 600 200"
   preserveAspectRatio="none">..</svg><div class="chart__hl" style="left:..%;width:..%"></div>
   <span class="chart__dot" style="left:..%;top:..%"></span><span class="tip chart__tip" style="..">..</span>
   </div><div class="chart__x">..</div></figure>                                             */
.chart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--chart-h, 220px) auto; column-gap: var(--s-3); row-gap: var(--s-3); margin: 0; }
.chart__y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: var(--fs-caption); line-height: 1; color: var(--chart-axis); font-variant-numeric: tabular-nums; margin: -6px 0; }
.chart__plot { position: relative; min-width: 0; }
.chart__plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__x { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--chart-axis); font-variant-numeric: tabular-nums; }
.chart__x span { flex: 1; text-align: center; }
.chart__x span:first-child { text-align: left; }
.chart__x span:last-child { text-align: right; }
.chart__x--abs { position: relative; display: block; height: var(--lh-caption); }
.chart__x--abs span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.chart__x--abs span:first-child, .chart__x--abs span:last-child { text-align: center; }
.chart__x .is-hl { color: var(--text); font-weight: var(--w-bold); }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.chart__base { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__line { fill: none; stroke: var(--chart-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__line--2 { stroke: var(--sky-500); stroke-dasharray: 4 5; stroke-width: 2; }
.chart__area { stroke: none; }
.chart__bar { fill: var(--chart-bar); }
.chart__bar--2 { fill: var(--chart-bar-2); }
.chart__bar--hl { fill: var(--primary); }
.chart__bar--time { fill: var(--time); }
.chart__hl {                     /* the highlighted column behind the peak */
  position: absolute; top: 0; bottom: 0; transform: translateX(-50%);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--chart-hl-top), var(--chart-hl-bottom));
  pointer-events: none;
}
.chart__dot {
  position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--chart-line);
  box-shadow: 0 0 0 3px var(--chart-dot-ring), 0 4px 10px rgba(20, 26, 63, .3);
}
.chart__tip { position: absolute; transform: translate(-50%, calc(-100% - 16px)); }
.chart__tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--chart-tip-bg); border-radius: 2px; }
.chart__legend { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-muted); }
.chart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart__key { width: 14px; height: 4px; border-radius: 2px; background: var(--chart-line); }
.chart__key--bar { height: 10px; background: var(--chart-bar-2); }
.chart__key--time { background: var(--time); }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: var(--fs-small); }

/* ---- Hourglass time ring ------------------------------------------------------------- */
/* Arc length is set server-side: <circle class="ring__arc" pathLength="100" stroke-dasharray="74 100">.
   The number is ALWAYS printed in the centre: the arc is never the only carrier of the value. */
.ring { position: relative; width: var(--ring-size, 168px); height: var(--ring-size, 168px); flex: none; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: var(--time-track); stroke-width: 10; }
.ring__arc { fill: none; stroke: var(--time); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease-out); }
.ring__ticks { fill: none; stroke: var(--text-muted); stroke-width: 3; opacity: .35; }   /* set pathLength="120" stroke-dasharray="0.6 9.4" on the element: 12 hour ticks */
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.ring__mark { width: 22px; height: 22px; margin-bottom: 2px; }
.ring__value { font-size: var(--fs-display); line-height: 1; font-weight: var(--w-heavy); letter-spacing: var(--track-num); font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.ring__label { font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--w-medium); }
.ring--sm { --ring-size: 44px; }
.ring--sm .ring__track, .ring--sm .ring__arc { stroke-width: 14; }
.ring--md { --ring-size: 120px; }
.ring--md .ring__value { font-size: 32px; }
.ring--low .ring__arc { stroke: var(--warn); }          /* last 10 minutes in the portal */

/* ---- Codes: staff "New code", hourly code, counter code ------------------------- */
.code { display: inline-flex; gap: 8px; font-family: var(--font-sans); }
.code__char {
  width: 56px; height: 68px; display: grid; place-items: center;
  border-radius: 16px; background: var(--bg-card); box-shadow: var(--shadow-raise);
  font-size: var(--fs-code); line-height: 1; font-weight: var(--w-heavy); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.code--sand .code__char { background: var(--time-soft); box-shadow: inset 0 0 0 1.5px var(--sand-200); color: var(--text); }
.code--sm .code__char { width: 40px; height: 48px; font-size: 26px; border-radius: 12px; }

/* ---- Setup steps (new venue checklist) ------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); counter-reset: step; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-radius: 20px; background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.step__num {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-tile); background: var(--bg-tint-strong); color: var(--text);
  font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
}
.step__num::before { content: counter(step); }
.step__title { font-weight: var(--w-bold); color: var(--text); }
.step__text { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
.step--current { box-shadow: var(--shadow-raise); }            /* lifted, never outlined: the dark number tile carries it */
.step--current .step__num { background: var(--bg-tile); color: var(--fg-on-tile); }
.step--done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.step--done .step__num { background: var(--ok-bg); color: var(--ok); }
.step--done .step__num::before { content: ""; width: 14px; height: 8px; border: solid currentColor; border-width: 0 0 2.2px 2.2px; transform: translateY(-2px) rotate(-45deg); }
.step--done .step__title { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.step--locked .step__num { background: var(--bg-tint); color: var(--text-muted); }   /* no opacity: text keeps AA */
.step--locked .step__title { color: var(--text-2); }

/* ---- Progress ------------------------------------------------------------------------------ */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--time-track); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); width: var(--p, 0%); transition: width var(--dur-slow) var(--ease-out); }
.progress--time > span { background: linear-gradient(90deg, var(--sand-300), var(--time)); }

/* ---- Key / value lists (health cards, settings summaries) ---------------------------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-5); margin: 0; font-size: var(--fs-small); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; text-align: right; font-weight: var(--w-semi); color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---- Health card: a service we depend on (access point, Square) ----------------------- */
.health { display: flex; flex-direction: column; gap: var(--s-5); }
.health__head { display: flex; align-items: center; gap: var(--s-4); }
.health__name { font-weight: var(--w-bold); }
.health__vendor { font-size: var(--fs-small); color: var(--text-muted); }
.health__head .pill { margin-left: auto; }

/* ---- Copy field: portal URL, codes ---------------------------------------------------- */
.copy { display: flex; align-items: center; gap: var(--s-2); padding: 6px 6px 6px var(--s-4); border-radius: var(--r-control); background: var(--bg-inset); }
.copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* ---- Modal and sheet (<dialog>) ------------------------------------------------------- */
.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 28px; background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-pop); }
.modal::backdrop { background: var(--bg-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__body { padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-3); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--s-3); padding: 0 var(--s-7) var(--s-7); flex-wrap: wrap; }
.modal[open] { animation: hp-rise var(--dur-base) var(--ease-out); }
@keyframes hp-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Skeleton -------------------------------------------------------------------------- */
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--line) 0%, var(--bg-inset) 50%, var(--line) 100%); background-size: 200% 100%; animation: hp-shimmer 1.4s linear infinite; }
.skel--text { height: 12px; width: 60%; }
.skel--num { height: 32px; width: 40%; border-radius: 10px; }
.skel--row { height: 56px; border-radius: 14px; }
@keyframes hp-shimmer { to { background-position: -200% 0; } }

/* ---- Phone chrome (hidden on desktop) ------------------------------------------------ */
.m-top, .tabbar { display: none; }

/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 1320px) {
  :root { --panel-pad: 32px; --sidebar-w: 216px; }
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); }
}
/* Laptop-narrow / tablet: the sidebar becomes an icon rail, the aside drops below. */
@media (max-width: 1120px) {
  :root { --sidebar-w: 76px; --frame-gap: 16px; }
  .frame { column-gap: var(--s-4); padding-left: var(--s-3); }
  .frame__brand { padding-left: 0; justify-content: center; }
  .frame__brand .brand-full { display: none; }
  .frame__brand .brand-mark { display: block; height: 40px; }
  .nav__item { justify-content: center; padding: 0; min-height: 52px; }
  .nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__badge { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; border-radius: 6px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: top bar + bottom tab bar. Everything is one column; targets are 44px or more. */
@media (max-width: 760px) {
  :root { --panel-pad: 20px; --frame-gap: 0px; --fs-h1: 24px; --lh-h1: 30px; --fs-h2: 19px; --lh-h2: 26px; --fs-display: 40px; --fs-stat: 28px; }
  body { background-attachment: scroll; }
  .app { padding: 0; }
  .frame {
    display: block; padding: 0; border-radius: 0;
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }
  .frame__brand, .side, .top { display: none; }
  .m-top {
    display: flex; align-items: center; gap: var(--s-3);
    position: sticky; top: 0; z-index: var(--z-sticky);
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-frame-solid);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .m-top { background: var(--bg-frame); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
  }
  .m-top__mark { width: 36px; height: 36px; flex: none; }
  .m-top .pill-field { height: 44px; flex: 1; width: auto; padding: 0 var(--s-4); }
  .m-top .avatar { width: var(--tap); height: var(--tap); font-size: var(--fs-small); }
  .m-top > a:first-child { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-sm); }
  /* 44px targets on phones: small buttons and the text links that sit on their own line */
  .btn--sm { min-height: var(--tap); }
  .section-head a, .whatif__inputs a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .panel { margin: 4px 0 0; border-radius: 28px 28px 0 0; min-height: calc(100vh - 72px); box-shadow: none; }
  .page-head { margin-bottom: var(--s-6); align-items: flex-start; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1; }
  .grid--2, .grid--3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: var(--s-4); }
  .stack { gap: var(--s-5); }
  .card { padding: var(--s-5); }
  .stat { padding: var(--s-5); gap: var(--s-4); }
  .row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "icon main value" "icon meta meta"; row-gap: 6px; min-height: 72px; column-gap: var(--s-3); padding: var(--s-4) 0; }
  .row__icon { grid-area: icon; align-self: start; padding-top: 2px; }
  .row__icon .i { width: 24px; height: 24px; }
  .row__main { grid-area: main; }
  .row__meta { grid-area: meta; }
  .row__value { grid-area: value; justify-self: end; }
  .row__more { display: none; }
  .step { grid-template-columns: 40px minmax(0, 1fr); padding: var(--s-4); gap: var(--s-4); }
  .step__num { width: 40px; height: 40px; border-radius: 12px; }
  .step > .btn, .step__action { grid-column: 1 / -1; width: 100%; }
  .table th, .table td { padding: var(--s-3) var(--s-4); }
  .modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  .modal[open] { animation-name: hp-sheet; }
  @keyframes hp-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .code__char { width: 52px; height: 64px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: var(--z-drawer);
    height: var(--tabbar-h); padding: 6px;
    border-radius: 24px; background: var(--bg-card);
    box-shadow: var(--shadow-pop);
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--tap); border-radius: 18px;
    color: var(--text-muted); text-decoration: none;
    font-size: 11px; line-height: 14px; font-weight: var(--w-semi);
    border: 0; background: none; font-family: inherit; cursor: pointer; list-style: none;
  }
  .tabbar__item .i { width: 24px; height: 24px; }
  .tabbar__item[aria-current="page"] { background: var(--bg-tint); color: var(--text); }
  .tabbar__item::-webkit-details-marker { display: none; }
  .more { position: static; }
  .more > summary { height: 100%; }
  .more[open] > summary { color: var(--text); }
  .more__panel {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 20px);
    padding: var(--s-2); border-radius: 24px; background: var(--bg-card); box-shadow: var(--shadow-pop);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .skel { animation: none; }
  .dot--live { animation: none; }
}

/* ---- Live-now hero (overview; staff reuses the ring) ------------------------------------ */
.live { display: flex; flex-direction: column; gap: var(--s-5); height: 100%; }
.live__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.live__title { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-h3); font-weight: var(--w-bold); }
.live__body { display: flex; align-items: center; gap: var(--s-7); }
.live__facts { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.live__facts li { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.live__facts b { font-size: var(--fs-stat); line-height: var(--lh-stat); font-weight: var(--w-heavy); letter-spacing: var(--track-num); color: var(--text); font-variant-numeric: tabular-nums; }
.live__foot { margin-top: auto; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--text-muted); }
.live__foot .i { width: 18px; height: 18px; color: var(--time-text); }

/* Stat inside the hero row keeps the reference's tile-on-top rhythm */
.stat__top { display: flex; flex-direction: column; gap: var(--s-4); }

/* What-if card: the report's estimate, with its inputs visible */
.whatif { display: flex; gap: var(--s-4); align-items: flex-start; }
.whatif__text { color: var(--text-2); }
.whatif__text b { color: var(--text); font-weight: var(--w-bold); }
.whatif__inputs { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }

@media (max-width: 760px) {
  .live__body { flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .live .ring { --ring-size: 148px; align-self: center; }
  .live .ring__value { font-size: 40px; }
  .live__facts { gap: var(--s-3); }
  .live__facts b { font-size: 24px; line-height: 28px; }
  .grid--hero { gap: var(--s-3); }
  .grid--hero > .stat--row { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .grid--hero > .stat--row > div, .grid--hero > .stat--row > .stat__value { flex: none; width: 100%; }
}

/* ---- Time left inside a row: tiny sand ring + minutes ------------------------------------ */
.left { display: inline-flex; align-items: center; gap: 10px; }
.left .ring { --ring-size: 26px; }
.left .ring__track, .left .ring__arc { stroke-width: 18; }
.left__text { display: flex; flex-direction: column; line-height: 1.2; }
.left__text small { font-size: var(--fs-caption); font-weight: var(--w-body); color: var(--text-muted); }
.left--low .ring__arc { stroke: var(--time-strong); }
.left--none { color: var(--text-muted); font-weight: var(--w-medium); }
.card--hero .ring__track { stroke: rgba(255, 255, 255, .8); }
@media (prefers-color-scheme: dark) { .card--hero .ring__track { stroke: rgba(228, 232, 250, .12); } }

/* ==========================================================================
   New venue: setup hero, step cards and the empty states of the live widgets.
   Used by screens/overview-empty.html. Every widget keeps its normal frame and
   title when empty; only its body changes, so the page never jumps when the
   first device joins.
   ========================================================================== */
.setup { display: flex; flex-direction: column; gap: var(--s-7); }
.setup__head { display: flex; align-items: center; gap: var(--s-8); }
.setup__intro { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.setup__title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--w-bold); letter-spacing: var(--track-tight); max-width: 22ch; }
.setup__text { color: var(--text-2); max-width: 62ch; }
.setup__art { position: relative; width: 176px; height: 176px; flex: none; display: grid; place-items: center; margin-right: var(--s-4); }
.setup__art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.setup__art > img { position: relative; width: 76px; height: 76px; }
.halo-1 { fill: var(--halo-1); }
.halo-2 { fill: var(--halo-2); }
.halo-3 { fill: var(--halo-3); }

/* Four-part progress meter: "0 of 4 done". The label carries the value. */
.segments { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.segments__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 184px; }
.segments__bar > span { height: 6px; border-radius: var(--r-pill); background: var(--time-track); }
.segments__bar > .is-done { background: var(--primary); }
.segments__label { font-size: var(--fs-small); font-weight: var(--w-semi); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Step cards: the reference's tinted-card rhythm (tile, title, text, action). */
.steps--cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.steps--cards .step {
  position: relative;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  align-items: start; gap: var(--s-5);
  padding: var(--s-6); border-radius: var(--r-card);
}
.steps--cards .step__state { position: absolute; top: var(--s-6); right: var(--s-6); height: 48px; margin: 0; }
.steps--cards .step__action { width: 100%; }
.step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step__title { font-size: var(--fs-body); line-height: var(--lh-body); }
.step__text { line-height: var(--lh-small); }
.step__state { display: flex; align-items: center; gap: var(--s-2); }
.step__time { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--w-semi); color: var(--text-muted); }
.step__time .i { width: 14px; height: 14px; stroke-width: 1.9; }
.card--hero .step { background: var(--bg-on-hero); box-shadow: none; }
.card--hero .step--current { background: var(--bg-on-hero-strong); box-shadow: var(--shadow-raise); }

/* Live now, before any device: the ring shows its empty track, the number goes quiet. */
.ring--empty .ring__value { color: var(--text-muted); }
.live__empty { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.live__empty-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-bold); color: var(--text); }
.live__empty p:not(.live__empty-title) { color: var(--text-2); max-width: 46ch; }
.live__empty .btn { margin-top: var(--s-3); }
.stat--empty .stat__value { white-space: normal; }
.stat--empty .stat__unit { font-size: var(--fs-small); margin-left: 8px; }

/* Chart with no data: axes and grid stay, a floating note explains when it fills. */
.chart__plot .chart-empty { padding: var(--s-4); }
.chart-empty__note {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 250px; padding: var(--s-4) var(--s-5);
  border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-raise);
  color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small);
}
.chart-empty__note b { color: var(--text); font-weight: var(--w-bold); font-size: var(--fs-body); line-height: var(--lh-body); }
.chart-empty__note .i { color: var(--text); }
.chart__line--flat { stroke: var(--line-control); stroke-width: 2; stroke-dasharray: 2 7; }

/* A list of services that are not connected yet (health, before setup). */
.connect-list .row { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 68px; }
.connect-list .row__icon .i { width: 22px; height: 22px; stroke-width: 1.6; }

@media (max-width: 1200px) {
  .steps--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup__art { width: 144px; height: 144px; margin-right: 0; }
  .setup__art > img { width: 64px; height: 64px; }
}
/* Phone: step cards become compact rows (number | text), the action goes full width under them. */
@media (max-width: 760px) {
  .setup { gap: var(--s-5); }
  .setup__head { gap: var(--s-4); }
  .setup__art { display: none; }
  .setup__title { font-size: 22px; line-height: 28px; }
  .segments { flex-wrap: wrap; gap: var(--s-3); }
  .steps--cards { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .steps--cards .step { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto; gap: var(--s-3) var(--s-4); padding: var(--s-4); border-radius: 20px; }
  .steps--cards .step__state { position: static; height: auto; grid-column: 2; grid-row: 1; margin-bottom: -4px; }
  .steps--cards .step__body { grid-column: 2; }
  .steps--cards .step__num { grid-row: 1 / span 2; align-self: start; }
  .steps--cards .step__action { grid-column: 1 / -1; }
  .live__empty .btn { width: 100%; }
}

/* Page-local styles for the dashboard, loaded after tokens.css and components.css (all three are
   served as one stylesheet, /assets/app.css). Semantic tokens only, as components.css does. */

/* ---- App shell (src/ui/shell.ts): what overview.html sets inline -------------------------- */
.loc-menu > summary {
  cursor: pointer;
}
.top .loc-menu > summary {
  width: 340px;
}
.loc-menu__name {
  color: var(--text);
  font-weight: var(--w-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-menu .menu__panel {
  left: 0;
  right: auto;
  min-width: 280px;
}
.loc-menu .overline {
  padding: 8px 12px 4px;
}
.m-top .loc-menu {
  flex: 1;
  min-width: 0;
}
.m-top .loc-menu .menu__panel {
  min-width: 0;
}
/* Staff's counter frame (spec 8): no sidebar or tab bar, so the panel takes the whole width and
   the location is plain text in the same pill. */
.frame--staff {
  grid-template-areas: "brand top" "main main";
}
.top .loc-pill {
  width: 340px;
}
.loc-pill__name {
  color: var(--text);
  font-weight: var(--w-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1120px) {
  .frame--staff .frame__brand {
    justify-content: flex-start;
  }
}
/* The counter's phone bar (staff.html .s-top): the location is the title, then the mode. */
.s-top {
  display: none;
}
@media (max-width: 760px) {
  /* No tab bar to clear at the bottom. */
  .frame--staff {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .s-top {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-frame-solid);
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .s-top {
      background: var(--bg-frame);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      backdrop-filter: blur(20px) saturate(1.4);
    }
  }
  .s-top > a:first-child {
    display: grid;
    place-items: center;
    min-width: var(--tap);
    min-height: var(--tap);
    border-radius: var(--r-sm);
  }
  .s-top__mark {
    width: 36px;
    height: 36px;
  }
  .s-top__where {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .s-top__name {
    font-weight: var(--w-bold);
    font-size: var(--fs-lead);
    line-height: 22px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .s-top__mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-muted);
    font-weight: var(--w-semi);
  }
  .s-top .avatar {
    width: var(--tap);
    height: var(--tap);
    font-size: var(--fs-small);
  }
}
.account-menu {
  min-width: 240px;
}
.account-menu__who {
  padding: 8px 12px 6px;
  overflow-wrap: anywhere;
}
summary.avatar {
  cursor: pointer;
  list-style: none;
}
summary.avatar::-webkit-details-marker {
  display: none;
}

/* ---- Charts and time (src/ui/charts.ts) ------------------------------------------------
   Bars are round-capped sticks, copied from screens/report.html's page styles. */
.chart__stick {
  fill: none;
  stroke: var(--chart-bar);
  stroke-width: 16px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart__stick--thin {
  stroke-width: 12px;
}
.chart__stick--2 {
  stroke: var(--chart-bar-2);
}
.chart__stick--hl {
  stroke: var(--primary);
}
.ring__mark {
  color: var(--time);
}
/* No passes yet: the hourglass goes quiet with its number (overview-empty.html). */
.ring--empty .ring__mark {
  color: var(--text-muted);
}
.spark {
  display: block;
  width: 100%;
  height: 32px;
  overflow: visible;
}

/* ---- Overview (src/dashboard/overview-view.ts): what overview.html sets inline ------------- */
/* In a stack the head keeps the stack's rhythm instead of its own gap (style="margin-bottom:0"). */
.stack > .page-head {
  margin-bottom: 0;
}

/* Signed-out pages: the lockup and one panel on the sky. */
.solo {
  width: 100%;
  max-width: 560px;
  margin: auto;
}
.solo__brand {
  display: flex;
  justify-content: center;
  padding: var(--s-6) 0 var(--s-5);
}
.solo__brand img {
  height: 34px;
  width: auto;
  display: block;
}

/* ---- Pages not redesigned yet (.legacy, src/dashboard/views.ts layout) --------------------
   Their old markup, drawn with the design's tokens until each page is rebuilt. Delete a rule
   when no page uses it; delete the block with the last old page. */
.legacy {
  max-width: 900px;
}
.legacy h1 {
  margin: 0 0 var(--s-4);
}
.legacy h2 {
  margin: var(--s-7) 0 var(--s-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.legacy p,
.legacy ul,
.legacy ol {
  margin: var(--s-3) 0;
}
.legacy .ok {
  color: var(--ok);
  font-weight: var(--w-semi);
}
.legacy .bad {
  color: var(--bad);
  font-weight: var(--w-semi);
}
.legacy .hint {
  margin: var(--s-1) 0 0;
}
.legacy .notice {
  display: block;
  margin: var(--s-3) 0;
}
.legacy .notice p,
.legacy .notice ul {
  margin: var(--s-1) 0;
}
.legacy .notice.ok {
  background: var(--ok-bg);
  color: var(--text);
}
.legacy .notice.bad {
  background: var(--bad-bg);
  color: var(--text);
}
.legacy .card {
  margin-top: var(--s-3);
  padding: var(--s-5);
}
.legacy .card.ok {
  background: var(--ok-bg);
  color: var(--text);
  font-weight: var(--w-body);
}
.legacy .big {
  font-size: var(--fs-code);
  line-height: 1.1;
  font-weight: var(--w-heavy);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.legacy .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  min-height: 0;
  padding: 0;
  border: 0;
  align-items: start;
}
.legacy .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
.legacy .stat {
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
}
.legacy .stat p {
  margin: 0;
  color: var(--text-2);
}
.legacy .stat b {
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-num);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.legacy table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.legacy th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-over);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-inset);
}
.legacy td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-2);
}
.legacy td form {
  margin: 0 0 var(--s-2);
}
.legacy label {
  display: block;
  margin: var(--s-4) 0 var(--s-1);
  font-weight: var(--w-semi);
  font-size: var(--fs-small);
  color: var(--text);
}
.legacy input:not([type="checkbox"]):not([type="radio"]),
.legacy select,
.legacy textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-control);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line-control);
  color: var(--text);
  font: inherit;
  font-weight: var(--w-medium);
}
.legacy textarea {
  padding: var(--s-3) var(--s-4);
  line-height: var(--lh-body);
}
.legacy input:focus,
.legacy select:focus,
.legacy textarea:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--focus),
    0 0 0 4px var(--focus-halo);
}
.legacy input[type="checkbox"],
.legacy input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0 var(--s-2) 0 0;
  vertical-align: -4px;
  accent-color: var(--primary);
}
.legacy button,
.legacy .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-control);
  font: inherit;
  font-weight: var(--w-semi);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: var(--primary);
  color: var(--text-on-primary);
}
.legacy button:hover,
.legacy .btn:hover {
  background: var(--primary-hover);
}
.legacy button.secondary,
.legacy .btn.secondary {
  background: var(--secondary-bg);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--secondary-edge);
}
.legacy button.secondary:hover,
.legacy .btn.secondary:hover {
  background: var(--bg-inset);
}
.legacy button.danger,
.legacy .btn.danger {
  background: var(--bad-bg);
  color: var(--bad);
}
@media (max-width: 760px) {
  .legacy .row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 0;
  }
  .legacy table {
    display: block;
    overflow-x: auto;
  }
}

/* ---- Master console (src/dashboard/master-view.ts): master.html's page styles -------------- */
.stats4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.stats4 .stat {
  gap: var(--s-4);
}
.stat__of {
  font-size: 0.5em;
  font-weight: var(--w-semi);
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 6px;
}

.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.filters .tabs {
  box-shadow: none;
  gap: var(--s-2);
}
.filters .tabs__tab {
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  gap: 8px;
}
.filters .tabs__tab[aria-current="page"] {
  background: var(--bg-tint);
}
.filters .tabs__tab[aria-current="page"]::after {
  display: none;
}
.filters .tabs__tab .badge {
  background: var(--bg-tint-strong);
  color: var(--text);
}
.filters .tabs__tab[aria-current="page"] .badge {
  background: var(--bg-tile);
  color: var(--fg-on-tile);
}
/* The search sits in the filters row here (the mockup has it in the top bar). */
.master-search {
  width: 320px;
  max-width: 100%;
}

/* The venue table: dense data, no card outlines, rows breathe. */
.mtable td {
  vertical-align: middle;
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
.loc-cell {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
.loc-cell .tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-tint);
  color: var(--text);
  font-weight: var(--w-bold);
  font-size: var(--fs-small);
}
.mtable .loc-cell b {
  display: block;
  color: var(--text);
  font-weight: var(--w-bold);
}
.loc-cell .small {
  color: var(--text-muted);
}
.loc-cell code {
  font-size: 12px;
  color: var(--text-muted);
}
.mtable td.c-loc {
  white-space: nowrap;
}
.ap-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 360px;
}
.mtable td.c-sq .ap-cell {
  max-width: 220px;
}
.ap-cell .vendor {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.mtable tr.needs td {
  border-bottom: 0;
}
.mtable tr.mtable__err td {
  border-top: 0;
  padding-top: 0;
  padding-bottom: var(--s-5);
}
.err-note {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-radius: 14px;
  background: var(--bad-bg);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.err-note + .err-note {
  margin-top: var(--s-2);
}
.err-note .i {
  width: 18px;
  height: 18px;
  color: var(--bad);
  flex: none;
  margin-top: 0;
}
.mtable .err-note b {
  color: var(--text);
  font-weight: var(--w-semi);
}
.when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.mtable .when b {
  color: var(--text);
  font-weight: var(--w-semi);
}
.when .small {
  color: var(--text-muted);
}
.mtable .btn {
  white-space: nowrap;
}

/* Phone: each row becomes a card; labels come from data-label. */
@media (max-width: 1320px) {
  .stats4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .stats4 {
    gap: var(--s-3);
  }
  .stats4 .stat {
    padding: var(--s-4);
  }
  .filters .tabs {
    width: 100%;
    overflow-x: auto;
  }
  .master-search {
    width: 100%;
  }
  .table-wrap.mwrap {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .mtable,
  .mtable tbody {
    display: block;
  }
  .mtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .mtable tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4) var(--s-4);
    padding: var(--s-5);
    margin-bottom: var(--s-3);
    border-radius: var(--r-card);
    background: var(--bg-inset);
  }
  .mtable tr.needs {
    border-radius: var(--r-card) var(--r-card) 0 0;
    margin-bottom: 0;
    padding-bottom: var(--s-4);
  }
  .mtable tr.mtable__err {
    display: block;
    margin-bottom: var(--s-3);
    padding: 0 var(--s-5) var(--s-5);
    border-radius: 0 0 var(--r-card) var(--r-card);
  }
  .mtable td,
  .mtable td:first-child,
  .mtable td:last-child {
    display: block;
    padding: 0;
    border: 0;
    background: none;
  }
  .mtable tr.mtable__err td {
    padding: 0;
  }
  .mtable td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: var(--w-semi);
    letter-spacing: var(--track-over);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .mtable td.c-loc,
  .mtable td.c-ap,
  .mtable td.c-act {
    grid-column: 1 / -1;
  }
  .mtable td.c-act .btn {
    width: 100%;
  }
  .ap-cell,
  .mtable td.c-sq .ap-cell {
    max-width: none;
  }
  .mtable td.c-loc {
    white-space: normal;
  }
}

/* ---- Staff mode (src/dashboard/staff-view.ts, staff-live.ts): staff.html's page styles ------ */
/* Codes on the left, the live list on the right; one column on phones (designed at 390 first). */
.counter {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.counter__codes {
  position: sticky;
  top: var(--s-6);
}
.notices {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.notices .notice {
  margin-bottom: 0;
}
/* New code: the one big action. On phones its form floats at the bottom (thumb reach). */
.newcode {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.newcode__intro {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.newcode__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-bold);
}
.newcode__text {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
/* The code just made: the hero moment, big white tiles on the sky gradient. */
.issued {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}
.issued__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
}
.issued__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
}
.issued__meta {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  max-width: 30ch;
}
.issued .btn {
  align-self: stretch;
}
.code--xl {
  gap: 10px;
  margin: var(--s-2) 0;
}
.code--xl .code__char {
  width: 68px;
  height: 84px;
  font-size: 52px;
  border-radius: 20px;
}
.hourly {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.hourly__head {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
/* Live now: the head, the two counts, then the groups of rows. */
.live-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.live-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.live-head__count {
  height: 24px;
  min-width: 28px;
  font-size: var(--fs-small);
  border-radius: 8px;
}
.live-head__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.live-sum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.counter__live > .empty {
  margin-top: var(--s-4);
}
.sgroup + .sgroup {
  margin-top: var(--s-5);
}
.sgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) 0 var(--s-1);
}
.slist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srow {
  border-bottom: 1px solid var(--line);
}
.srow:last-child {
  border-bottom: 0;
}
/* A row on a pass is a <details>: tapping it opens a tray with +30 min and End pass (no JS). */
.srow > details {
  border-radius: 20px;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.srow > details[open] {
  background: var(--bg-inset);
  margin: 6px calc(var(--s-3) * -1);
  padding: 0 var(--s-3);
}
.srow__sum {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 24px;
  align-items: center;
  column-gap: var(--s-4);
  min-height: 76px;
  padding: var(--s-3) 0;
  list-style: none;
  cursor: pointer;
  border-radius: 16px;
}
.srow__sum::-webkit-details-marker {
  display: none;
}
.srow__sum:focus-visible {
  outline-offset: 2px;
}
div.srow__sum {
  cursor: default;
}
.srow__icon {
  display: grid;
  place-items: center;
  color: var(--text);
}
.srow__icon .i {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}
.srow--none .srow__icon {
  color: var(--text-muted);
}
.srow__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.srow__title {
  font-weight: var(--w-bold);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srow__sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srow__shared {
  align-self: flex-start;
  margin-top: 4px;
  height: 24px;
  padding: 0 10px;
  font-size: var(--fs-caption);
}
.srow__value {
  font-weight: var(--w-bold);
  color: var(--text);
  white-space: nowrap;
  text-align: left;
}
.srow__chev {
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.srow__chev .i {
  width: 20px;
  height: 20px;
}
details[open] > .srow__sum .srow__chev {
  transform: rotate(180deg);
  color: var(--text);
}
.srow__tray {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding: 0 0 var(--s-4) calc(36px + var(--s-4));
}
.srow__tray--one {
  grid-template-columns: minmax(0, 1fr);
}
.srow__tray .btn {
  width: 100%;
}
.srow__note {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.srow__note .i {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-muted);
}
.left--ended .left__text {
  color: var(--text-2);
}
.left--ended .ring__track {
  stroke: var(--time-track);
}
/* Laptop-narrow and tablet: narrower codes, then the codes above the list. */
@media (max-width: 1200px) {
  .counter {
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--s-7);
  }
  .code--xl .code__char {
    width: 60px;
    height: 76px;
    font-size: 46px;
  }
}
@media (max-width: 900px) {
  .counter {
    grid-template-columns: minmax(0, 1fr);
  }
  .counter__codes {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
  }
  .counter__codes > .issued {
    grid-column: 1 / -1;
  }
}
/* Phone (designed first): the location heads the bar, New code floats at thumb height. */
@media (max-width: 760px) {
  .page-head--staff {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Room under the last row for the floating New code bar. */
  .staff {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .counter {
    gap: var(--s-7);
  }
  .counter__codes {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .newcode {
    padding: 0;
    background: none;
    gap: 0;
  }
  .newcode__intro {
    display: none;
  }
  .newcode__bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: var(--z-drawer);
    padding: 8px;
    border-radius: 28px;
    background: var(--bg-card);
    box-shadow: var(--shadow-pop);
  }
  .issued {
    padding: var(--s-6) var(--s-5);
  }
  .code--xl .code__char {
    width: 62px;
    height: 78px;
    font-size: 46px;
    border-radius: 18px;
  }
  .hourly {
    gap: var(--s-4);
  }
  .notices {
    margin-bottom: var(--s-5);
  }
  .srow > details[open] {
    margin: 6px -12px;
    padding: 0 12px;
  }
  .srow__sum {
    grid-template-columns: 28px minmax(0, 1fr) auto 20px;
    column-gap: var(--s-3);
    min-height: 72px;
  }
  .srow__icon .i {
    width: 24px;
    height: 24px;
  }
  .srow__tray {
    padding-left: 0;
  }
  /* Refresh keeps its 44 px target but shows only its icon. */
  .live-head__refresh {
    width: var(--tap);
    padding: 0;
  }
  .live-head__refresh-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---- Settings (src/dashboard/settings-view.ts): settings.html's page styles ------------------ */
/* Section rhythm: the explanation on the left, the fields on a card on the right. */
.settings {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.settings > .page-head,
.settings > .notices {
  margin-bottom: 0;
}
.set {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  scroll-margin-top: var(--s-6);
}
.set__intro {
  position: sticky;
  top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
.set__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}
.set__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.set__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.set__body > .form-grid {
  gap: var(--s-6);
}
.set + .set {
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}
.set .field .input-group .input {
  min-height: 46px;
}
.field--wide {
  grid-column: 1 / -1;
}
.field > .segmented {
  align-self: flex-start;
}
.field > .segmented--block {
  align-self: stretch;
}
.field .label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.label__pill {
  height: 22px;
  padding: 0 8px;
  font-size: var(--fs-caption);
}
.set__body > .field > .input-group,
.subcard .field > .input-group {
  max-width: 320px;
}
.input--zone {
  max-width: 420px;
}
.input-group--bad {
  box-shadow: inset 0 0 0 2px var(--bad);
}
.input-group__affix--before {
  padding-right: 0;
}
.subcard {
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The recommended value under a field. Matches: a quiet check. Differs: the sand line. */
.rec {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.rec .i {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  flex: none;
  margin-top: 1px;
  color: var(--ok);
}
.rec__now {
  color: var(--text);
}
.rec--diff {
  color: var(--time-text);
  font-weight: var(--w-semi);
}
.rec--diff .i {
  color: var(--time-text);
}

/* At a glance: the pass as a timeline (the view's one sand accent). */
.glance {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: stretch;
}
.glance__pass {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.glance__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.glance__value {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
}
.glance__value .stat__unit {
  font-size: var(--fs-lead);
  margin-left: 8px;
}
.glance__text {
  color: var(--text-2);
  max-width: 46ch;
}
.glance__facts {
  padding: var(--s-5) var(--s-6);
  border-radius: 20px;
  background: var(--bg-on-hero);
}
.glance__facts .kv {
  gap: var(--s-3) var(--s-4);
}
.glance__diff {
  margin-top: var(--s-4);
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-2);
}
.glance__pill {
  height: 24px;
  font-size: var(--fs-caption);
}
.passbar {
  margin-top: var(--s-2);
}
.passbar__track {
  position: relative;
  display: flex;
  gap: 4px;
  height: 14px;
}
.passbar__seg {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--time);
}
.passbar__seg--2 {
  background: repeating-linear-gradient(135deg, var(--time) 0 4px, var(--time-soft) 4px 8px);
  box-shadow: inset 0 0 0 1.5px var(--time);
}
.passbar__mark {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 2px;
  border-radius: 2px;
  background: var(--text);
  transform: translateX(-3px);
}
.passbar__axis {
  position: relative;
  height: 34px;
  margin-top: 10px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.passbar__axis span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.passbar__num {
  display: block;
  color: var(--text);
  font-weight: var(--w-semi);
}
.passbar__axis .is-end {
  right: 0;
  text-align: right;
}
.passbar__axis .is-mark {
  transform: translateX(-100%);
  text-align: right;
  padding-right: 10px;
}

/* When a pass ends: the three modes, explained. Where :has() works, the chosen one lifts. */
.mode-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
}
.mode-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-4);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.mode-note__title {
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mode-note .i {
  width: 20px;
  height: 20px;
}
.mode-note .pill {
  align-self: flex-start;
  height: 24px;
  font-size: var(--fs-caption);
  margin-top: 4px;
}
.modes:has(#m-soft:checked) .mode-note--soft,
.modes:has(#m-throttle:checked) .mode-note--throttle,
.modes:has(#m-hard:checked) .mode-note--hard {
  background: var(--bg-tint);
  box-shadow: var(--shadow-raise);
}

/* Schedule: the week as seven lanes (hand-drawn, labels in HTML). */
.week {
  margin: 0;
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.week__grid {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  row-gap: 8px;
  column-gap: var(--s-3);
  align-items: center;
}
.week__day {
  font-size: var(--fs-caption);
  font-weight: var(--w-semi);
  color: var(--text-muted);
}
.week__lane {
  position: relative;
  height: 22px;
  border-radius: 7px;
  background: var(--bg-tint);
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    transparent calc(25% - 1px),
    var(--bg-panel) calc(25% - 1px) 25%,
    transparent 25% calc(50% - 1px),
    var(--bg-panel) calc(50% - 1px) 50%,
    transparent 50% calc(75% - 1px),
    var(--bg-panel) calc(75% - 1px) 75%,
    transparent 75%
  );
}
.week__win {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
}
.week__win--hard {
  background: var(--primary);
}
.week__win--throttle {
  background: var(--chart-bar-2);
}
.week__win--soft {
  background: var(--bg-tint-strong);
  box-shadow: inset 0 0 0 1.5px var(--line-control);
}
.week__axis {
  position: relative;
  grid-column: 2;
  height: 16px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--chart-axis);
  font-variant-numeric: tabular-nums;
}
.week__axis span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.week__axis span:first-child {
  transform: none;
}
.week__axis span:last-child {
  transform: translateX(-100%);
}
.week__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.week__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.week__key {
  width: 16px;
  height: 10px;
  border-radius: 3px;
}
.week__key--outside {
  background: var(--bg-tint);
}
.textarea--code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 24px;
  min-height: 104px;
}

/* How to write a window: a disclosure, closed by default. */
.rules {
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rules__sum {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--w-semi);
  border-radius: 18px;
}
.rules__sum::-webkit-details-marker {
  display: none;
}
.rules__sum .i {
  color: var(--text-muted);
}
.rules__sum .rules__chev {
  margin-left: auto;
  transition: transform var(--dur-base) var(--ease-out);
}
.rules[open] .rules__chev {
  transform: rotate(180deg);
}
.rules__list {
  margin: 0;
  padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 36px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.rules code {
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--bg-tint);
  color: var(--text);
  font-size: 12.5px;
  white-space: nowrap;
}

/* Radio cards (sold-out behaviour). A choice not available yet is disabled and says why. */
.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.choice .check {
  padding: var(--s-4);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--line);
  min-height: 0;
}
.choice .check:has(input:checked) {
  background: var(--bg-tint);
  box-shadow: none;
}
.choice .check.is-off {
  cursor: not-allowed;
}
.choice .check.is-off input {
  box-shadow: inset 0 0 0 1.5px var(--text-disabled);
  cursor: not-allowed;
}
.choice .check__text {
  gap: 4px;
}
.choice .pill {
  height: 24px;
  font-size: var(--fs-caption);
  align-self: flex-start;
  margin-top: 4px;
}
.modes .segmented span {
  min-height: 44px;
  font-size: var(--fs-body);
}

/* "Use recommended defaults": a no-JS confirm that shows exactly what it will change. */
.reset {
  position: relative;
}
.reset__sum {
  list-style: none;
}
.reset__sum::-webkit-details-marker {
  display: none;
}
.reset__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: var(--z-drawer);
  width: 400px;
  padding: var(--s-6);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.reset__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-bold);
}
.reset__text {
  color: var(--text-2);
}
.reset__list {
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: 16px;
  background: var(--bg-inset);
  font-size: var(--fs-small);
}
.reset__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.reset__list li + li {
  border-top: 1px solid var(--line);
}
.reset__list s {
  color: var(--text-muted);
}
.reset__change {
  gap: 6px;
}
.reset__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.reset-locked {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

/* Save bar: floats at the bottom of the panel while the form scrolls; ends the form on phones. */
.savebar {
  position: sticky;
  bottom: var(--s-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6);
  border-radius: 22px;
  background: var(--bg-card);
  box-shadow: var(--shadow-pop);
}
.savebar__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.savebar__title {
  display: block;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--w-semi);
}
.savebar .btn {
  flex: none;
}

/* The section index under the glance (desktop), a scrolling chip row (phone). */
.toc {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  text-decoration: none;
}
.toc a:hover {
  background: var(--bg-tint);
  color: var(--text);
}

@media (max-width: 1320px) {
  .set {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--s-7);
  }
}
@media (max-width: 1120px) {
  .glance {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}
@media (max-width: 960px) {
  .set {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .set__intro {
    position: static;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-4);
  }
}
@media (max-width: 760px) {
  .settings {
    gap: var(--s-7);
  }
  .set + .set {
    padding-top: var(--s-7);
  }
  .mode-notes,
  .choice {
    grid-template-columns: minmax(0, 1fr);
  }
  .glance__value {
    font-size: 40px;
    line-height: 44px;
  }
  .glance__facts {
    padding: var(--s-4) var(--s-5);
  }
  .glance__facts dd {
    white-space: nowrap;
  }
  .toc {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px 4px;
    scrollbar-width: none;
  }
  .toc a {
    flex: none;
    min-height: var(--tap);
  }
  .savebar {
    position: static;
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-5);
  }
  .savebar .btn {
    width: 100%;
  }
  .page-head__actions .reset,
  .page-head__actions .reset-locked {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .reset__sum.btn {
    width: 100%;
  }
  .reset__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 20px);
    width: auto;
  }
  .week {
    padding: var(--s-4);
  }
  .week__grid {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--s-2);
  }
}

/* ---- Network (src/dashboard/integrations-view.ts, network-form.ts, network-side.ts): network.html's page styles ---- */
.net > .page-head {
  margin-bottom: 0;
}
.card-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.card-head > div {
  flex: 1;
  min-width: 0;
}
.card-head > .pill {
  flex: none;
}

/* Vendor choice: radio cards. The input stays a real radio (visually hidden, focusable). */
.net-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}
.net-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 76px;
  padding: var(--s-4) var(--s-5);
  border-radius: 18px;
  background: var(--bg-card);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.net-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.net-choice__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.net-choice__name {
  font-weight: var(--w-bold);
  color: var(--text);
}
.net-choice__sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.net-choice__mark {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-control);
  display: grid;
  place-items: center;
}
.net-choice__mark::after {
  content: "";
  width: 10px;
  height: 6px;
  border: solid var(--text-on-primary);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.net-choice__input:checked ~ .net-choice__mark {
  background: var(--primary);
  box-shadow: none;
}
.net-choice__input:checked ~ .net-choice__mark::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.net-choice:has(.net-choice__input:checked) {
  box-shadow: var(--shadow-raise);
}
.net-choice__input:focus-visible ~ .net-choice__mark {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.net-choice--dev {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* The access point form */
.ap-form .form-grid {
  margin-top: var(--s-6);
}
.field--full {
  grid-column: 1 / -1;
}
.saved-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  padding: 0 10px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  white-space: nowrap;
  flex: none;
}
.saved-key .i {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}
.input-group > .i {
  margin-left: var(--s-4);
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  flex: none;
}
.input--after-icon {
  padding-left: var(--s-3);
}
.toggle-row {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-5);
  border-radius: 18px;
  background: var(--bg-card);
}
.toggle-row .toggle {
  font-weight: var(--w-semi);
  padding: var(--s-2) 0;
}
.toggle-row .hint {
  padding-bottom: var(--s-3);
  max-width: 60ch;
}
.advanced {
  margin-top: var(--s-4);
}
.advanced__sum {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.advanced__sum::-webkit-details-marker {
  display: none;
}
.advanced__sum:hover {
  color: var(--text);
}
.advanced[open] .advanced__chev {
  transform: rotate(180deg);
}
.advanced .field {
  max-width: 460px;
  margin-top: var(--s-2);
}
.ap-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.ap-actions .hint {
  flex-basis: 100%;
  margin-top: 2px;
}
.locked-action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.verify-result {
  margin-top: var(--s-4);
}
.verify-result time {
  color: var(--text-muted);
  font-weight: var(--w-medium);
}

/* Guest portal address: big copy field, three short steps */
.copy--lg {
  padding: 8px 8px 8px var(--s-5);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: var(--shadow-raise);
}
.copy--lg code {
  font-size: var(--fs-body);
  font-weight: var(--w-semi);
  -webkit-user-select: all;
  user-select: all;
}
.btn .copy__icon {
  width: 18px;
  height: 18px;
}
.copy__done {
  display: none;
}
[data-copied="true"] .copy__idle {
  display: none;
}
[data-copied="true"] .copy__done {
  display: inline;
}
.portal-steps {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  counter-reset: ps;
}
.portal-step {
  counter-increment: ps;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.portal-step::before {
  content: counter(ps);
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--bg-tint-strong);
  color: var(--text);
  font-weight: var(--w-bold);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.portal-step__key {
  color: var(--text);
  font-weight: var(--w-semi);
}

/* Health, Square and what we ask the console to do */
.health .btn--block {
  margin-top: var(--s-1);
}
.health__note {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.health-list {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.can-do__title {
  margin-bottom: var(--s-4);
}
.can-do {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.can-do__item {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.can-do__icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
  color: var(--ok);
  flex: none;
}
.can-do__icon--never {
  color: var(--text-muted);
}

/* Square: choose-location radios as rows */
.net-pick {
  max-width: 560px;
}
.pick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pick .check {
  padding: 12px var(--s-4);
  border-radius: 14px;
  background: var(--bg-inset);
  align-items: center;
}
.net-pick .btn--block {
  margin-top: var(--s-4);
}

/* A new venue: step 1 in place */
.net-when {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  counter-reset: w;
}
.net-when__item {
  counter-increment: w;
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--bg-on-hero);
  min-width: 0;
}
.net-when__item::before {
  content: counter(w);
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--bg-on-hero-strong);
  color: var(--text);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.net-when__title {
  font-weight: var(--w-bold);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.net-when__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  margin-top: 2px;
}
.setup__art > .net-art__icon {
  position: relative;
  width: 56px;
  height: 56px;
  stroke-width: 1.4;
  color: var(--text);
}

@media (max-width: 1200px) {
  .net-when {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
}
@media (max-width: 1120px) {
  .portal-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
}
@media (max-width: 760px) {
  .card-head {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
  }
  .card-head > .tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  /* The title keeps its width; a status pill drops under it, in line with the text. */
  .card-head > div {
    flex-basis: 200px;
  }
  .card-head > .pill {
    margin-left: calc(40px + var(--s-4));
  }
  .net-choices {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-actions {
    margin-top: var(--s-6);
  }
  .ap-actions .btn {
    flex: 1 1 100%;
  }
  .locked-action {
    width: 100%;
  }
  .copy--lg {
    flex-wrap: wrap;
    padding: var(--s-4);
    gap: var(--s-3);
  }
  .copy--lg code {
    flex-basis: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .copy--lg .btn {
    flex: 1;
  }
  .toggle-row {
    padding: var(--s-2) var(--s-4);
  }
  .net-when__item {
    padding: var(--s-4);
  }
  .net .notice {
    flex-wrap: wrap;
  }
  .net .notice__body {
    flex: 1 1 200px;
  }
  .net .notice > .btn {
    margin-left: calc(24px + var(--s-4));
  }
}

/* ---- Network Test (src/dashboard/network-test-view.ts, network-test-hero.ts, network-test-checks.ts): network-test.html's page styles ---- */
.nt > .page-head {
  margin-bottom: 0;
}

/* Hero: progress, and the three kinds of device the owner has to try */
.nt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-8);
  align-items: center;
}
.nt-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  min-width: 0;
}
.nt-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
.segments__bar--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 220px;
}
.devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--bg-on-hero);
  min-width: 0;
}
.device--done {
  background: var(--bg-on-hero-strong);
  box-shadow: var(--shadow-raise);
}
.device__icon {
  color: var(--text);
}
.device__icon .i {
  width: 32px;
  height: 32px;
  stroke-width: 1.4;
}
.device__name {
  font-weight: var(--w-bold);
  line-height: 1.25;
}
.device__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  font-weight: var(--w-semi);
}
.device--done .device__state {
  color: var(--ok);
}
.device__state .i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.nt-last {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.nt-last .i {
  width: 16px;
  height: 16px;
}

/* Check rows: status tile | title and result | pill; the fix sits under the row, never in a tooltip */
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}
.check-row:first-child {
  border-top: 0;
  padding-top: var(--s-2);
}
.check-row:last-child {
  padding-bottom: var(--s-1);
}
.check-row__main {
  min-width: 0;
}
.check-row__title {
  font-weight: var(--w-bold);
  color: var(--text);
}
.checks--quiet .check-row__title {
  color: var(--text-2);
}
.check-row__result {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tile--quiet {
  background: var(--bg-tint);
  color: var(--text-muted);
}
.tile--info {
  background: var(--info-bg);
  color: var(--info);
}
.fix {
  grid-column: 2 / -1;
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-radius: 14px;
  background: var(--bg-card);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.fix .i {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  flex: none;
  color: var(--text);
}
.fix--bad {
  background: var(--bad-bg);
}
.fix--bad .i {
  color: var(--bad);
}
.fix code {
  font-size: 0.95em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.group-card .card__head {
  margin-bottom: var(--s-3);
}

/* Test tools: the test pass form, the portal address, start over */
.tp__text {
  color: var(--text-2);
}
.tp__form {
  margin-top: var(--s-5);
}
.tp__buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.locked-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.nt-side__sub {
  margin: 6px 0 var(--s-4);
}
.copy--sm code {
  font-size: var(--fs-small);
  -webkit-user-select: all;
  user-select: all;
}

/* Start over: a no-JS confirm in place (the design annex's dialog without a script). */
.restart__sum {
  list-style: none;
  cursor: pointer;
}
.restart__sum::-webkit-details-marker {
  display: none;
}
.restart__idle,
.restart__cancel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.restart[open] .restart__idle,
.restart:not([open]) .restart__cancel {
  display: none;
}
.restart__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: var(--shadow-raise);
}
.restart__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-bold);
  color: var(--text);
}
.restart__text {
  color: var(--text-2);
}

@media (max-width: 1320px) {
  .nt-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}
@media (max-width: 760px) {
  .nt-hero__title {
    font-size: 22px;
    line-height: 28px;
  }
  .devices {
    gap: var(--s-2);
  }
  .device {
    padding: var(--s-4) var(--s-3);
    gap: var(--s-3);
    border-radius: 18px;
  }
  .device__icon .i {
    width: 26px;
    height: 26px;
  }
  .device__name {
    font-size: var(--fs-small);
  }
  .device__state {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }
  .check-row {
    column-gap: var(--s-3);
  }
  .fix {
    grid-column: 1 / -1;
    margin-top: var(--s-1);
  }
  /* A notice's action button drops under the text instead of squeezing it. */
  .nt .notice {
    flex-wrap: wrap;
  }
  .nt .notice__body {
    flex: 1 1 200px;
  }
  .nt .notice > .btn {
    margin-left: calc(24px + var(--s-4));
  }
}

/* ---- Camper Report (src/dashboard/report-view.ts and its report-*.ts parts): report.html and report-empty.html's page styles ---- */
.rp > .page-head {
  margin-bottom: 0;
}
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Four headline numbers: the value pinned to the bottom so the row aligns. */
.rp .stats4 .stat__value {
  margin-top: auto;
}
.rp .stats4 .stat__sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  margin-top: 4px;
}

/* What-if: the estimate, its two numbers, and every input beside it */
.wh {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.wh__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  min-width: 0;
}
.wh__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.wh__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  max-width: 23ch;
  text-wrap: balance;
}
/* No estimate: the reason is a sentence, not a headline. */
.wh__title--reason {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  max-width: 36ch;
}
.wh__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  width: 100%;
}
.wh__numcard {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--s-5) var(--s-6);
  border-radius: 20px;
  background: var(--bg-on-hero);
}
.wh__num {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num);
  color: var(--text);
  white-space: nowrap;
}
.wh__num .stat__unit {
  font-size: var(--fs-body);
  line-height: 1;
  margin-left: 8px;
}
.wh__num--none {
  color: var(--text-muted);
}
.wh__num--none .stat__unit {
  font-size: var(--fs-small);
}
.wh__numsub {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.wh__change {
  color: var(--text-2);
}

/* The inputs list: label, value, and where each figure came from */
.wh__inputs {
  padding: var(--s-5) var(--s-6) var(--s-3);
  border-radius: 20px;
  background: var(--bg-on-hero-strong);
  box-shadow: var(--shadow-raise);
  min-width: 0;
}
.wh__inputs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.inputs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inputs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-5);
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.inputs__row:first-child {
  border-top: 0;
}
.inputs__label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--w-semi);
  color: var(--text);
}
.inputs__value {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--w-bold);
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.inputs__value--none {
  color: var(--text-muted);
  font-weight: var(--w-semi);
}
.inputs__src {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
}
.inputs__via {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--w-semi);
  color: var(--text-2);
}
.inputs__via .i {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

/* "How we worked it out": a disclosure with the arithmetic, no JS */
.how {
  width: 100%;
  border-radius: 16px;
  background: var(--bg-on-hero);
}
.how__sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  color: var(--text);
  cursor: pointer;
  border-radius: 16px;
}
.how__sum::-webkit-details-marker {
  display: none;
}
.how__chev {
  margin-left: auto;
  transition: transform var(--dur-base) var(--ease-out);
}
.how[open] .how__chev {
  transform: rotate(180deg);
}
.how__body {
  padding: 0 var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}
.calc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-variant-numeric: tabular-nums lining-nums;
}
.calc__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px var(--s-3);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-on-hero-strong);
}
.calc__val {
  color: var(--text);
  font-weight: var(--w-bold);
  white-space: nowrap;
}

/* The small form for seats and average ticket, as a strip across the what-if */
.wh__form {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 440px) auto;
  justify-content: start;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--bg-on-hero);
}
.wh__form-text {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wh__form-title {
  font-weight: var(--w-bold);
  font-size: var(--fs-body);
}
.wh__form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-4);
}
.wh__form-fields .field + .field {
  margin-top: 0;
}
.wh__form .input-group__affix:first-child {
  padding-right: 0;
}
.wh__form > .btn {
  margin-top: 26px;
  min-height: 48px;
}
/* Two fields: side by side on their own row, Save under them */
.wh__form--two {
  grid-template-columns: minmax(0, 1fr);
}
.wh__form--two .wh__form-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wh__form--two > .btn {
  margin-top: 0;
  justify-self: start;
}
.rp .input-group--invalid,
.rp .input-group--invalid:focus-within {
  box-shadow: inset 0 0 0 2px var(--bad);
}
/* Under the first-report hero the what-if is a plain card: its parts sit on the card colour. */
.card:not(.card--hero) .wh__numcard,
.card:not(.card--hero) .how,
.card:not(.card--hero) .wh__form {
  background: var(--bg-card);
}
.card:not(.card--hero) .wh__inputs {
  background: var(--bg-card);
  box-shadow: none;
}

/* Hour-of-day charts: peak hours banded behind, the band named above it */
.chart__peakband {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--bg-tint);
  pointer-events: none;
}
.chart__band-label {
  position: absolute;
  top: -26px;
  transform: translateX(-50%);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semi);
  color: var(--text-muted);
  white-space: nowrap;
}
.chart-card .card__head {
  margin-bottom: var(--s-7);
}
.chart-card .chart {
  margin-top: var(--s-6);
}
.chart-card .chart__legend {
  margin-top: var(--s-5);
}
.chart-card__note {
  margin-top: var(--s-5);
}
.chart__key--stick {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--chart-bar-2);
}
.chart__key--band {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  background: var(--bg-tint-strong);
}

/* "Show as a table": the chart's numbers, one tap away */
.as-table {
  margin-top: var(--s-5);
}
.as-table__sum {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-size: var(--fs-small);
  font-weight: var(--w-semi);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.as-table__sum::-webkit-details-marker {
  display: none;
}
.as-table__sum:hover {
  color: var(--text);
}
.as-table[open] .as-table__chev {
  transform: rotate(180deg);
}
.as-table .table-wrap {
  margin-top: var(--s-2);
}
.rp .as-table .table td,
.rp .as-table .table th {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* How long devices stay: laptops against phones, the pass marked on every track */
.dwell {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-8);
  align-items: center;
}
.dwell__lead {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}
.dwell__big {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--w-heavy);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
}
.dwell__big .stat__unit {
  font-size: var(--fs-body);
  line-height: 1;
  margin: 0 8px 0 4px;
}
.dwell__big--none {
  color: var(--text-muted);
}
.dwell__text {
  max-width: 38ch;
}
.dwell__chart {
  min-width: 0;
  margin: 0;
}
.dwell__rows {
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.dwell__row {
  display: grid;
  grid-template-columns: 28px 116px minmax(0, 1fr) 92px;
  align-items: center;
  gap: var(--s-4);
}
.dwell__row > .i {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
  color: var(--text);
}
.dwell__name {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-weight: var(--w-bold);
  min-width: 0;
}
.dwell__name small {
  font-size: var(--fs-caption);
  font-weight: var(--w-body);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Bars are SVG rects with % widths and px radii: round at any width. */
.dwell__track {
  position: relative;
  display: block;
  height: 14px;
}
.dwell__track > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dwell__rect--track {
  fill: var(--bg-tint);
}
.dwell__rect--1 {
  fill: var(--primary);
}
.dwell__rect--2 {
  fill: var(--chart-bar-2);
}
.dwell__halo {
  stroke: var(--bg-inset);
  stroke-width: 6;
}
.dwell__tick {
  stroke: var(--text-2);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
.dwell__flag {
  position: absolute;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-semi);
  color: var(--text-2);
  white-space: nowrap;
}
.dwell__val {
  font-weight: var(--w-bold);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.dwell__val--none {
  color: var(--text-muted);
  font-weight: var(--w-semi);
}
.dwell__row--scale {
  margin-top: -8px;
}
.dwell__scale {
  position: relative;
  display: block;
  height: var(--lh-caption);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--chart-axis);
  font-variant-numeric: tabular-nums;
}
.rp .dwell__scale > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.rp .dwell__scale > span:first-child {
  transform: none;
}
.rp .dwell__scale > span:last-child {
  transform: translateX(-100%);
}

/* A new venue: the 14-day meter, the art, and what appears when */
.segments__bar--14 {
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
  width: 232px;
}
.setup__art > .rp-art__icon {
  position: relative;
  width: 56px;
  height: 56px;
  stroke-width: 1.4;
  color: var(--text);
}
.rp-when {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.rp-when__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--bg-on-hero);
  min-width: 0;
}
.rp-when__item--now {
  background: var(--bg-on-hero-strong);
  box-shadow: var(--shadow-raise);
}
.rp-when__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.rp-when__title {
  font-weight: var(--w-bold);
  color: var(--text);
}
.rp-when__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
  margin-top: 4px;
}
.rp-when__item > .btn {
  margin-top: auto;
  align-self: flex-start;
}
.card--hero .tile--soft {
  background: var(--bg-on-hero-strong);
  box-shadow: none;
}
.rp .stats4 .stat__unit {
  line-height: 1;
}

@media (max-width: 1320px) {
  .wh {
    gap: var(--s-7);
  }
  .dwell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}
/* The master console's stats go two by two at 1320; the report's stay four across until 1200. */
@media (min-width: 1201px) and (max-width: 1320px) {
  .rp .stats4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .wh {
    grid-template-columns: minmax(0, 1fr);
  }
  .rp-when {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
}
@media (max-width: 760px) {
  .rp .stats4 .stat {
    gap: var(--s-3);
  }
  .rp .stats4 .tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .rp .stats4 .stat__sub {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }
  .wh__title {
    font-size: 22px;
    line-height: 28px;
  }
  .wh__title--reason {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
  }
  .wh__numcard {
    padding: var(--s-4) var(--s-5);
  }
  .wh__num {
    font-size: 40px;
    line-height: 44px;
  }
  .wh__inputs {
    padding: var(--s-4) var(--s-5) var(--s-2);
  }
  .wh__form {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-4);
  }
  .wh__form > .btn {
    margin-top: 0;
    width: 100%;
  }
  .wh__form--two .wh__form-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .chart__band-label {
    display: none;
  }
  .dwell__row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas: "icon name val" "track track track";
    row-gap: var(--s-3);
    column-gap: var(--s-3);
  }
  .dwell__row > .i {
    grid-area: icon;
  }
  .dwell__name {
    grid-area: name;
  }
  .dwell__track {
    grid-area: track;
  }
  .dwell__val {
    grid-area: val;
  }
  .dwell__rows {
    gap: var(--s-6);
    padding-top: 4px;
  }
  .dwell__row:first-child .dwell__track {
    margin-top: 26px;
  }
  .dwell__row--scale {
    grid-template-areas: "track track track";
    margin-top: -12px;
  }
  .dwell__row--scale > span:not(.dwell__scale) {
    display: none;
  }
  .dwell__scale {
    grid-area: track;
  }
  .dwell__big {
    font-size: 40px;
    line-height: 44px;
  }
  .rp-when__item {
    padding: var(--s-4) var(--s-5);
    gap: var(--s-3);
  }
  .segments__bar--14 {
    width: 100%;
  }
  /* A notice's action drops under its text instead of squeezing it. */
  .rp .notice {
    flex-wrap: wrap;
  }
  .rp .notice__body {
    flex: 1 1 200px;
  }
  .rp .notice > .btn {
    margin-left: calc(24px + var(--s-4));
  }
}

/* ---- Small-phone polish (checked at 320 and 375 wide) -------------------------------------- */
/* "Live now" stays on one line; the Updated pill moves under it when there is no room. */
.live__title {
  white-space: nowrap;
}
.live__head {
  flex-wrap: wrap;
  row-gap: var(--s-2);
}
@media (max-width: 760px) {
  /* A button inside a form (New code is a POST) stretches like the plain buttons beside it. */
  .page-head__actions > form {
    display: flex;
    flex: 1;
  }
  .page-head__actions > form .btn {
    flex: 1;
  }
}
@media (max-width: 360px) {
  /* The narrowest phones: the location's name gets the store icon's room in the top bar pill. */
  .m-top .loc-menu > summary > .i:first-child {
    display: none;
  }
}

/* Measuring (spec 6): the card's actions, and the buttons in its warning */
.measure__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.measure > .notice {
  margin-top: var(--s-6);
}
.measure .notice .measure__actions {
  margin-top: var(--s-4);
}
@media (max-width: 760px) {
  .measure-note .notice {
    flex-wrap: wrap;
  }
  .measure-note .notice__body {
    flex: 1 1 200px;
  }
  .measure-note .notice > .btn {
    margin-left: calc(24px + var(--s-4));
  }
}

/* ===== Sign-in (design-wip/mockups/screens/login.html): .auth, .scene, .mailart, .howto ===== */
/* ---- Sign-in layout: the frosted frame, split into a sky story and a white panel ---- */
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); padding: var(--frame-gap); }
.auth__frame {
  width: 100%; max-width: 1180px; min-height: 700px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-5);
  padding: var(--frame-pad);
  border-radius: var(--r-frame);
  background: var(--bg-frame-solid);
  box-shadow: var(--shadow-frame), inset 0 0 0 1px var(--frame-edge);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .auth__frame { background: var(--bg-frame); -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); }
}
.auth__brand { display: flex; flex-direction: column; gap: var(--s-7); padding: var(--s-6) var(--s-6) var(--s-5) var(--s-7); min-width: 0; }
.auth__brand > a { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); border-radius: var(--r-sm); }
.auth__brand > a img { height: 34px; width: auto; display: block; }
.auth__headline { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--w-heavy); letter-spacing: -0.03em; max-width: 12ch; margin-top: var(--s-5); }
.auth__sub, .auth__fine { text-wrap: pretty; }
.auth__lede { text-wrap: balance; }
.auth__lede { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); max-width: 38ch; margin-top: calc(var(--s-5) * -1); }
.auth__panel {
  display: flex; flex-direction: column;
  padding: var(--s-9) var(--s-9) var(--s-7);
  border-radius: var(--r-panel);
  background: var(--bg-panel);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}
.auth__body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin: 0 auto; }
.auth .overline { margin-bottom: var(--s-2); }
.auth__title { font-size: 32px; line-height: 38px; font-weight: var(--w-bold); letter-spacing: var(--track-tight); }
.auth__sub { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.auth__form { margin-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); }
.auth__form .input { min-height: 56px; font-size: 16px; padding: 0 var(--s-5); border-radius: 16px; }   /* 16px: no iOS zoom */
.auth__fine { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.auth__fine .i { width: 18px; height: 18px; flex: none; margin-top: 0; color: var(--text-muted); }
.auth__foot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-muted); width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
.auth__foot a { color: var(--text-muted); text-decoration: none; font-weight: var(--w-medium); display: inline-flex; align-items: center; min-height: var(--tap); }
.auth__foot a:hover { color: var(--text); }
.auth__art { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin-bottom: var(--s-6); }
.auth__art > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth__art > img, .auth__art > .mailart { position: relative; }
.auth .notice { margin-top: var(--s-6); }
.auth .notice + .auth__form { margin-top: var(--s-5); }

/* ---- The scene: a still life of the product on the sky (decorative, aria-hidden) ---- */
.scene { position: relative; flex: 1; min-height: 340px; margin-top: auto; }
.scene__halo { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; transform: translate(-50%, -50%); }
.scene__card { position: absolute; border-radius: var(--r-card); background: var(--bg-card); box-shadow: var(--shadow-pop); }
.scene__stage { position: absolute; left: 50%; top: 50%; width: 244px; transform: translate(-50%, -55%); }
.scene__portal { position: relative; padding: var(--s-6) var(--s-6) var(--s-5); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.scene__portal .ring { --ring-size: 132px; }
.scene__portal .ring__value { font-size: 40px; }
.scene__venue { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--w-semi); color: var(--text-2); }
.scene__venue .i { width: 18px; height: 18px; }
.scene__until { font-size: var(--fs-small); color: var(--text-muted); margin-top: -6px; }
.scene__bar { width: 100%; height: 44px; border-radius: var(--r-control); background: var(--primary); color: var(--text-on-primary); display: grid; place-items: center; font-weight: var(--w-semi); font-size: var(--fs-small); }
.scene__chip { display: flex; align-items: center; gap: var(--s-3); padding: 12px 18px 12px 12px; font-size: var(--fs-small); line-height: var(--lh-small); }
.scene__chip b { display: block; color: var(--text); font-weight: var(--w-bold); font-size: var(--fs-body); }
.scene__chip span.muted { display: block; }
.scene__chip { white-space: nowrap; }
.scene__chip--cup { right: calc(100% - 40px); top: -30px; }
.scene__chip--refill { left: calc(100% - 64px); bottom: -36px; background: var(--bg-tint); box-shadow: var(--shadow-raise); }

/* Envelope art for "Check your email": navy outline, the one sand accent is the little hourglass seal. */
.mailart { width: 64px; height: 64px; color: var(--text); }

/* Keep hyphenated words whole. */
.nb { white-space: nowrap; }

/* "Check your email" how-to: two numbered lines on an inset well. */
.howto { list-style: none; margin: var(--s-6) 0 var(--s-5); padding: var(--s-2) var(--s-5); border-radius: 18px; background: var(--bg-inset); }
.howto li { display: flex; align-items: center; gap: var(--s-4); min-height: 52px; color: var(--text-2); }
.howto li + li { border-top: 1px solid var(--line); }
.howto b { color: var(--text); font-weight: var(--w-semi); }
.howto__n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--bg-tint-strong); color: var(--text); font-size: var(--fs-small); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.howto__actions { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.howto__actions form.inline { display: block; }


/* ---- Dark: the hero discs and the scene cards follow the night sky ---- */
@media (prefers-color-scheme: dark) {
  .scene__chip--refill { background: var(--bg-tint); }
  .scene__card { box-shadow: var(--shadow-pop); }
}

/* ---- Narrow laptop: the scene shrinks, the headline steps down ---- */
@media (max-width: 1120px) {
  .auth__frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; }
  .auth__headline { font-size: 40px; line-height: 44px; }
  .auth__panel { padding: var(--s-8) var(--s-7) var(--s-6); }
  .scene__halo { width: 340px; height: 340px; }
  .scene__stage { transform: translate(-50%, -55%) scale(.94); }
  .scene__chip--cup { right: calc(100% - 100px); top: -44px; }
  .scene__chip--refill { left: auto; right: -36px; bottom: -40px; }
}
/* ---- Tablet portrait: the story goes on top as a short band, the panel below ---- */
@media (max-width: 900px) {
  .auth__frame { grid-template-columns: minmax(0, 1fr); max-width: 560px; min-height: 0; }
  .auth__brand { padding: var(--s-5) var(--s-5) 0; gap: var(--s-4); }
  .auth__headline { font-size: 32px; line-height: 38px; margin-top: var(--s-2); max-width: none; }
  .auth__lede { margin-top: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
  .scene { display: none; }
}
/* ---- Phone: no frame. Lockup and one line on the sky, the panel is a sheet ---- */
@media (max-width: 760px) {
  .auth { padding: calc(env(safe-area-inset-top, 0px) + 20px) 0 0; justify-content: flex-start; gap: var(--s-6); }
  .auth__frame { display: flex; flex-direction: column; flex: 1; padding: 0; gap: var(--s-6); border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: none; }
  .auth__brand { padding: 0 20px; align-items: flex-start; }
  .auth__brand > a img { height: 30px; }
  .auth__headline { font-size: 26px; line-height: 32px; }
  .auth__lede { display: none; }
  .auth__panel { flex: 1; padding: var(--s-7) 20px calc(env(safe-area-inset-bottom, 0px) + 20px); border-radius: 28px 28px 0 0; box-shadow: none; }
  .auth__body { justify-content: flex-start; }
  .auth__title { font-size: 26px; line-height: 32px; }
  .auth__sub { font-size: var(--fs-body); line-height: var(--lh-body); }
  .auth__art { width: 96px; height: 96px; margin-bottom: var(--s-5); }
  .auth__foot { margin-top: var(--s-7); }
}