/* ==================================================================
   AI Spritz Bar — one stylesheet for all three screens.

   Sections:
     1. Tokens          — colors, type, spacing. Change the palette here.
     2. Base & kiosk hardening
     3. Shared components
     4. Guest kiosk (index.html)
     5. Barkeeper display (bar.html)
     6. Admin (admin.html)
     7. Motion preferences
   ================================================================== */

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

:root {
  /* Brand — taken from the client's own assets, not guessed:
     the two logo files and the drink illustrations delivered on 2026-08-24.
     --c-ink is the dark the illustrations themselves are drawn against, which
     is why the "0%" baked into the alcohol-free glasses stays readable on it. */
  --c-ink: #221f4c;
  --c-ink-2: #2c2960;
  --c-ink-3: #3a3670;
  --c-blue: #3a539b;
  --c-blue-soft: #8595c4;
  --c-pink: #f2b1d1;
  --c-pink-soft: #f8d3e6;
  --c-cream: #f8efe6;

  /* Flavour accents — must mirror FAMILIES[*].accent in js/config.js */
  --c-fruity: #f2b1d1;
  --c-bitter: #f98830;
  --c-floral: #8595c4;
  --c-zesty: #ef8672;

  /* Set per screen by JS once a drink is known. */
  --accent: var(--c-pink);

  --c-text: var(--c-cream);
  --c-text-dim: color-mix(in srgb, var(--c-cream) 62%, transparent);
  --c-line: color-mix(in srgb, var(--c-cream) 20%, transparent);
  --c-surface: color-mix(in srgb, var(--c-cream) 7%, transparent);
  --c-surface-2: color-mix(in srgb, var(--c-cream) 12%, transparent);
  /* Opaque card colour — the quiz cards sit over the drifting bubbles, and a
     translucent fill lets them swim through the option labels. */
  --c-card: #35325a;
  --c-card-active: #413e6b;

  --c-ok: #35d39a;
  --c-warn: #ffc247;
  --c-danger: #ff5c5c;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue",
    Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", monospace;

  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-full: 999px;

  --space: clamp(16px, 2.2vmin, 28px);
  --shadow: 0 24px 60px rgba(3, 6, 26, 0.45);

  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  --dur: 340ms;
}

/* ------------------------------------------------------------------
   2. Base & kiosk hardening
   ------------------------------------------------------------------ */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
}

/* The guest kiosk is a fixed, non-scrolling surface. The staff screens are
   ordinary scrollable pages, so this only applies to the kiosk. */
body.kiosk {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--c-cream);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   3. Shared components
   ------------------------------------------------------------------ */

.kicker {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.5vmin, 17px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 88px;
  padding: 0 40px;
  border-radius: var(--r-full);
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: clamp(18px, 2.4vmin, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 140ms var(--ease), opacity 140ms var(--ease);
}

.btn:active {
  transform: scale(0.96);
}

/* The class sets display, which outranks the hidden attribute's UA style. */
.btn[hidden] {
  display: none;
}

.btn-ghost {
  background: transparent;
  color: var(--c-text);
  box-shadow: inset 0 0 0 2px var(--c-line);
}

.btn-danger {
  background: var(--c-danger);
  color: #2a0505;
}

.btn-sm {
  min-height: 56px;
  padding: 0 26px;
  font-size: 17px;
}

/* PIN gate — shared by bar.html and admin.html ---------------------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--space);
  background: var(--c-ink);
}

.gate[hidden] {
  display: none;
}

.gate-card {
  width: min(420px, 100%);
  text-align: center;
}

.gate-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 14px 0 6px;
}

.gate-hint {
  color: var(--c-text-dim);
  font-size: 16px;
  margin: 0 0 26px;
  min-height: 24px;
}

.gate-hint.is-error {
  color: var(--c-danger);
}

.gate-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
}

.gate-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 2px var(--c-line);
}

.gate-dot.is-filled {
  background: var(--c-cream);
  box-shadow: none;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.key {
  min-height: 88px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  transition: transform 120ms var(--ease), background 120ms var(--ease);
}

.key:active {
  transform: scale(0.94);
  background: var(--c-surface-2);
}

.key-wide {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
}

/* Persistent warning strip — shown while the default PIN is in place. */
.banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-warn) 22%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-warn) 55%, transparent);
  color: var(--c-warn);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--space);
}

.banner[hidden] {
  display: none;
}

/* ------------------------------------------------------------------
   4. Guest kiosk
   ------------------------------------------------------------------ */

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  overflow: hidden;
}

/*
  The signature element: the screen fills from the bottom while the drink is
  mixed, so the reveal lands inside a colour rather than next to one.

  It fills with the brand blue, not with a per-drink colour. The delivered
  illustrations are all drawn in one pink palette, and a full-screen orange or
  red behind a pink glass fought the artwork instead of framing it — checked
  against every ground before deciding. Height is driven from JS via --fill.
*/
.fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--c-blue) 0%,
    color-mix(in srgb, var(--c-blue) 88%, black) 100%
  );
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
  transition: clip-path var(--fill-dur, 2200ms) cubic-bezier(0.5, 0, 0.2, 1);
}

.bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -14vmin;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c-cream) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-cream) 11%, transparent);
  animation: rise linear infinite;
}

@keyframes rise {
  from {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  to {
    transform: translate3d(var(--drift, 3vmin), -118vh, 0) scale(1);
    opacity: 0;
  }
}

.kiosk-head {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding: calc(var(--space) * 1.4) calc(var(--space) * 1.6);
  padding-top: max(calc(var(--space) * 1.4), env(safe-area-inset-top));
}

.kiosk-logo {
  width: clamp(150px, 20vmin, 240px);
  opacity: 0.9;
}

.screens {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) * 1.2);
  padding: calc(var(--space) * 5) calc(var(--space) * 1.8) calc(var(--space) * 3);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

body[data-screen="attract"] .screen[data-name="attract"],
body[data-screen="quiz"] .screen[data-name="quiz"],
body[data-screen="alcohol"] .screen[data-name="quiz"],
body[data-screen="name"] .screen[data-name="name"],
body[data-screen="mixing"] .screen[data-name="mixing"],
body[data-screen="reveal"] .screen[data-name="reveal"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* Attract ----------------------------------------------------------- */

.attract-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 11.5vmin, 150px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0;
  white-space: pre-line;
  text-wrap: balance;
}

.attract-title em {
  font-style: normal;
  color: var(--c-pink);
}

.attract-tagline {
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.4vmin, 27px);
  letter-spacing: 0.06em;
  color: var(--c-pink-soft);
  margin: 0;
  text-wrap: balance;
}

.attract-cue {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: calc(var(--space) * 1.5);
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.2vmin, 24px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.attract-cue::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--c-pink);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.9);
    opacity: 0.35;
  }
}

/* Quiz -------------------------------------------------------------- */

.progress {
  display: flex;
  gap: 10px;
  align-items: center;
}

.progress-step {
  width: clamp(34px, 5vmin, 58px);
  height: 8px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c-cream) 22%, transparent);
  transition: background 240ms var(--ease);
}

.progress-step.is-done {
  background: var(--c-pink);
}

.progress-step.is-current {
  background: var(--c-cream);
}

.progress-label {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.7vmin, 18px);
  letter-spacing: 0.12em;
  color: var(--c-text-dim);
}

.question {
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vmin, 80px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.options {
  display: grid;
  gap: calc(var(--space) * 1.1);
  width: 100%;
  max-width: 900px;
  grid-template-columns: 1fr;
}

/* Landscape has the width for two columns; portrait stacks. */
@media (min-aspect-ratio: 1/1) {
  .options {
    grid-template-columns: 1fr 1fr;
    max-width: 1400px;
  }
}

.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: max(88px, 26vmin);
  padding: calc(var(--space) * 1.4);
  border-radius: var(--r-lg);
  background: var(--c-card);
  box-shadow: inset 0 0 0 2px var(--c-line);
  transition: transform 160ms var(--ease), background 160ms var(--ease),
    box-shadow 160ms var(--ease);
}

.option:active {
  transform: scale(0.97);
  background: var(--c-card-active);
  box-shadow: inset 0 0 0 3px var(--c-cream);
}

.option-emoji {
  font-size: clamp(50px, 9vmin, 104px);
  line-height: 1;
}

.option-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vmin, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.quiz-back {
  position: absolute;
  z-index: 4;
  left: calc(var(--space) * 1.4);
  bottom: max(calc(var(--space) * 1.4), env(safe-area-inset-bottom));
  min-height: 88px;
  min-width: 88px;
  padding: 0 30px;
  border-radius: var(--r-full);
  color: var(--c-text-dim);
  font-size: 19px;
  font-weight: 600;
}

.quiz-back:active {
  color: var(--c-text);
}

.quiz-back[hidden] {
  display: none;
}

/* Mixing ------------------------------------------------------------ */

.mixing-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vmin, 88px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}

.mixing-dots::after {
  content: "";
  animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.shaker {
  width: clamp(120px, 22vmin, 240px);
  animation: shake 620ms var(--ease) infinite;
  transform-origin: 50% 90%;
}

@keyframes shake {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(9deg) translateY(-3%); }
}

/* Reveal ------------------------------------------------------------ */

.reveal-art {
  width: clamp(200px, 40vmin, 460px);
  filter: drop-shadow(0 26px 44px rgba(3, 6, 26, 0.4));
  animation: pour 620ms var(--ease) both;
}

@keyframes pour {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal-name {
  font-family: var(--font-display);
  font-size: clamp(40px, 7.6vmin, 100px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.reveal-copy {
  font-size: clamp(19px, 2.7vmin, 32px);
  line-height: 1.35;
  margin: 0;
  max-width: 26ch;
  color: color-mix(in srgb, var(--c-cream) 88%, transparent);
  text-wrap: balance;
}

.reveal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: calc(var(--space) * 0.6);
}

.reveal-status {
  margin: 0;
  max-width: 30ch;
  padding: 16px 26px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-ink) 45%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-cream) 28%, transparent);
  font-size: clamp(16px, 2.1vmin, 22px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-cream);
  text-wrap: balance;
}

.reveal-status[hidden] {
  display: none;
}

/* Top-aligned: the iOS keyboard takes the lower half of the screen the moment
   the field is focused, and would otherwise cover the send button. */
body[data-screen="name"] .screen[data-name="name"] {
  justify-content: flex-start;
  padding-top: calc(var(--space) * 5);
  gap: var(--space);
}

.name-hint {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(16px, 2.1vmin, 22px);
  color: color-mix(in srgb, var(--c-cream) 80%, transparent);
  text-wrap: balance;
}

.name-input {
  width: min(560px, 100%);
  min-height: 96px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 4vmin, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c-ink) 25%, transparent);
  -webkit-user-select: text;
  user-select: text;
}

.name-input::placeholder {
  color: color-mix(in srgb, var(--c-ink) 40%, transparent);
  font-weight: 600;
}

.name-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 4px var(--c-ink);
}

.name-error {
  margin: 0;
  font-size: clamp(15px, 1.9vmin, 20px);
  font-weight: 700;
  color: #ffd7e4;
}

.name-error[hidden] {
  display: none;
}

/* Kiosk footer ------------------------------------------------------ */

.kiosk-foot {
  position: absolute;
  z-index: 3;
  right: calc(var(--space) * 1.4);
  bottom: max(calc(var(--space) * 1.2), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 45%, transparent);
}

.net-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--c-ok);
}

body.is-offline .net-dot {
  background: var(--c-warn);
}

body.is-offline .net-label::after {
  content: " · offline";
}

/* ------------------------------------------------------------------
   5. Barkeeper display
   ------------------------------------------------------------------ */

.bar-page {
  padding: var(--space) calc(var(--space) * 1.2)
    calc(var(--space) * 2);
  max-width: 2200px;
  margin: 0 auto;
}

.bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px;
  padding: 8px 0 var(--space);
}

.bar-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vmin, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}

.bar-count {
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vmin, 38px);
  font-weight: 700;
  color: var(--c-pink);
}

.bar-total {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.8vmin, 20px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.bar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.bar-status.is-stale {
  color: var(--c-warn);
}

.queue {
  display: grid;
  gap: calc(var(--space) * 0.9);
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.order {
  --accent: var(--c-pink);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "art meta"
    "action action";
  align-items: center;
  gap: 20px;
  padding: 22px;
  padding-left: 30px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 2px var(--c-line);
  overflow: hidden;
  animation: land 320ms var(--ease) both;
}

@keyframes land {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.order::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--accent);
}

/* Only used when the display does not know the ordered drink and therefore has
   no per-drink accent to apply. */
.order[data-family="fruity"] { --accent: var(--c-fruity); }
.order[data-family="bitter"] { --accent: var(--c-bitter); }
.order[data-family="floral"] { --accent: var(--c-floral); }
.order[data-family="zesty"] { --accent: var(--c-zesty); }

.order-art {
  grid-area: art;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.order-meta {
  grid-area: meta;
  min-width: 0;
}

/* The name gets called across the bar, so it leads the card. */
.order-guest {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vmin, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--c-pink);
  overflow-wrap: break-word;
}

/* The drink name is the whole card. Bar staff need to know what to pour and
   nothing else, so it gets all the room. */
.order-name {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.5vmin, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
  color: var(--c-text);
  /* break-word, not anywhere: "Koskenkorva" may only be split when it genuinely
     does not fit, never mid-word to tidy up a ragged edge. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.order-serve {
  grid-area: action;
  width: 100%;
  min-height: 88px;
  border-radius: var(--r-md);
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: 22px;
  font-weight: 700;
  transition: transform 130ms var(--ease), opacity 130ms var(--ease);
}

.order-serve:active {
  transform: scale(0.97);
}

.order-serve[disabled] {
  opacity: 0.45;
}

.empty {
  padding: calc(var(--space) * 3) var(--space);
  text-align: center;
  color: var(--c-text-dim);
  font-size: 22px;
}

.empty-big {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vmin, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--c-text);
  margin: 0 0 10px;
}

/* ------------------------------------------------------------------
   6. Admin
   ------------------------------------------------------------------ */

.admin-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--space) * 1.5) var(--space) calc(var(--space) * 4);
}

.admin-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vmin, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 6px;
}

.admin-sub {
  color: var(--c-text-dim);
  margin: 0 0 var(--space);
  font-size: 16px;
}

.tiles {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: calc(var(--space) * 1.6);
}

.tile {
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 2px var(--c-line);
}

.tile-value {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tile-label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.section-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin: calc(var(--space) * 1.6) 0 12px;
}

.bars {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr auto;
  align-items: center;
  gap: 14px;
  font-size: 16px;
}

.bar-row-name {
  overflow-wrap: anywhere;
}

.bar-track {
  height: 14px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent, var(--c-pink));
}

.bar-value {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 3ch;
  text-align: right;
}

.danger-zone {
  margin-top: calc(var(--space) * 2);
  padding: var(--space);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-danger) 45%, transparent);
}

.danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.admin-note {
  color: var(--c-text-dim);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.admin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: calc(var(--space) * 2);
}

.admin-links a {
  color: var(--c-blue-soft);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   7. Motion preferences
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .bubbles {
    display: none;
  }

  .fill {
    transition: none;
  }
}