/*
 * The showroom's page (src/showroom/frame.js): the demo bar and the device
 * around the app. Reads the app's tokens (tokens.css), so the page and the
 * app look like one thing in day and night. Two layouts:
 * - framed (windows from 700 px): the bar with the scenarios, the device
 *   (kiosk or phone) scaled to the space below;
 * - full (a phone: up to 699 px wide or 500 px high, frame.js
 *   pageLayout()): a slim bar, the scenarios in a menu under
 *   "Ausprobieren", the app fills the rest of the screen.
 * The bar never lies over the app: it takes its own space above the
 * frame, the answer to a scenario too while it shows, and the phone's
 * menu only while it is open.
 */

:root {
  /* The device: graphite in both themes, like the kiosk's housing. */
  --sr-bezel: #121417;
  --sr-bezel-edge: #2c3036;
  --sr-device-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --sr-page-pad: var(--space-6);
}

/*
 * The intro (intro.js) in the page's own colours (data-tone: the theme it
 * plays in): light by day, the night's dark by night. Its background is the
 * page's surface with a hint of water light where the drop lands, so the
 * intro comes out of the page's colour and goes back into it (review
 * 2026-10-10: a dark intro faded into the day page through a dull grey).
 */
.sr-intro[data-tone="night"],
.sr-intro-backdrop[data-tone="night"],
.sr-intro-fade[data-tone="night"] {
  --sr-i-bg: var(--page-night);
  --sr-i-depth: #0f1722;
  --sr-i-text: #eceef1;
  --sr-i-text-2: #afb5bd;
  --sr-i-drop-top: #a9d6fb;
  --sr-i-drop-bottom: #529fe2;
  --sr-i-ring: #6db5f2;
  --sr-i-rim: #d2eaff;
  --sr-i-rim-opacity: 0.42;
  --sr-i-soft-opacity: 0.06;
  --sr-i-glow: rgba(109, 181, 242, 0.2);
}

.sr-intro[data-tone="day"],
.sr-intro-backdrop[data-tone="day"],
.sr-intro-fade[data-tone="day"] {
  --sr-i-bg: var(--page-day);
  --sr-i-depth: #fbfcfe;
  --sr-i-text: #14181d;
  --sr-i-text-2: #454d57;
  --sr-i-drop-top: #5ca8e8;
  --sr-i-drop-bottom: #1c6cb4;
  --sr-i-ring: #2f82cc;
  --sr-i-rim: #2f82cc;
  --sr-i-rim-opacity: 0.34;
  --sr-i-soft-opacity: 0.05;
  --sr-i-glow: rgba(47, 130, 204, 0.12);
}

:root[data-theme="day"] {
  --sr-bezel: #1c1f23;
  --sr-bezel-edge: #3a3f46;
  --sr-device-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
}

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

html,
body {
  height: 100%;
  margin: 0;
}

html {
  background: var(--surface-0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

p {
  margin: 0;
}

.sr-page {
  position: relative;
  /* Above the intro's background, light, rings and words (z-index 0), under its drop and tap layer (30). */
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* ── The bar ─────────────────────────────────────────────────────────── */

/*
 * One calm row (Stephan 2026-10-09: "einfach, Apple style"): the wordmark
 * and its badge on the left, the scenarios in the middle, the view and the
 * reset on the right. The scenarios stand centred over the device while
 * the window allows it (German from 1120 px); below that the shorter side
 * gives way, so one row still holds them down to 1010 px: a kiosk-size
 * window and a tablet held sideways keep the calm single row (review
 * 2026-10-10: two rows took a fifth of a 1024 × 600 window). A window
 * narrower than that gives the scenarios a row of their own under it
 * (German needs 998 px in one row, measured 2026-10-10; English 895 px).
 */
.sr-bar {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  grid-template-areas: "brand actions end";
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--sr-page-pad);
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 1009px) {
  .sr-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand end"
      "actions actions";
  }
}

.sr-brand {
  grid-area: brand;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sr-name {
  font-size: var(--type-title3-size);
  line-height: var(--type-title3-line);
  letter-spacing: var(--type-title3-tracking);
  font-weight: var(--weight-semibold);
}

.sr-badge {
  padding: 1px 9px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--weight-medium);
}

.sr-bar-end {
  grid-area: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Controls ────────────────────────────────────────────────────────── */

.sr-button,
.sr-switch-option {
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  font: inherit;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.sr-button {
  background: var(--surface-2);
  color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.sr-button:hover:not(:disabled) {
  background: var(--fill-hover);
}

.sr-button:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.sr-button:disabled {
  cursor: default;
  opacity: 0.45;
}

/* The scenario that runs in demo time: says so, and stays readable. */
.sr-button.is-running:disabled {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
}

/* The reset is a quiet word, not a second button beside the view. */
.sr-reset {
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--accent);
}

.sr-button:focus-visible,
.sr-switch-option:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The view: one capsule; the chosen side is a thumb inset into it (the option keeps its full 44 px). */
.sr-switch {
  display: inline-flex;
  border-radius: var(--radius-full);
  background: var(--surface-2);
}

.sr-switch-option {
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--text-secondary);
}

.sr-switch-option[aria-pressed="true"] {
  background: var(--fill-thumb);
  box-shadow: inset 0 0 0 3px var(--surface-2);
  color: var(--text-primary);
}

.sr-menu-toggle,
.sr-reset-menu {
  display: none;
}

/* ── Scenarios and their answer ──────────────────────────────────────── */

.sr-actions {
  grid-area: actions;
  justify-self: center;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.sr-scenarios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.sr-status {
  min-height: var(--type-body-line);
  margin: var(--space-2) var(--sr-page-pad) 0;
  color: var(--text-secondary);
  text-align: center;
}

/* ── The device ──────────────────────────────────────────────────────── */

.sr-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--sr-page-pad) var(--sr-page-pad);
}

.sr-holder {
  position: relative;
  flex: none;
}

.sr-device {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sr-bezel-size);
  border-radius: var(--sr-device-radius);
  background: var(--sr-bezel);
  box-shadow: 0 0 0 1px var(--sr-bezel-edge), var(--sr-device-shadow);
  transform-origin: 0 0;
}

/* Sizes match frame.js DEVICE_SCREENS and DEVICE_BEZELS. */
.sr-device[data-device="kiosk"] {
  --sr-bezel-size: 16px;
  --sr-device-radius: 22px;
}

.sr-device[data-device="phone"] {
  --sr-bezel-size: 12px;
  --sr-device-radius: 38px;
}

.sr-app {
  display: block;
  border: 0;
  background: var(--surface-0);
}

.sr-device[data-device="kiosk"] .sr-app {
  width: 1024px;
  height: 600px;
  border-radius: 6px;
}

/*
 * The screen's corners stay clear of the app: it has no safe-area insets
 * here, its tab bar runs into the corners, and a rounder screen cut off
 * the end of „Einstellungen“ (review 2026-10-09, once no scrollbar took
 * the width any more).
 */
.sr-device[data-device="phone"] .sr-app {
  width: 390px;
  height: 844px;
  border-radius: 26px;
}

/* ── The phone itself: the app fills the screen under a slim bar ─────── */

/* The menu drops down from the bar, over the app, while it is open. */
.sr-page[data-layout="full"] .sr-top {
  position: relative;
  z-index: 10;
}

.sr-page[data-layout="full"] {
  --sr-page-pad: var(--space-4);
}

.sr-page[data-layout="full"] .sr-bar {
  display: flex;
  justify-content: space-between;
  padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) var(--space-2)
    max(var(--space-4), env(safe-area-inset-left));
}

/* The app's own header names Tropfwerk right under the bar: the bar keeps its badge only. */
.sr-page[data-layout="full"] .sr-name,
.sr-page[data-layout="full"] .sr-bar-end {
  display: none;
}

.sr-page[data-layout="full"] .sr-menu-toggle {
  display: inline-block;
}

.sr-page[data-layout="full"] .sr-actions {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
}

.sr-page[data-layout="full"] .sr-actions.is-open {
  display: flex;
}

.sr-page[data-layout="full"] .sr-scenarios {
  flex-direction: column;
  align-items: stretch;
}

.sr-page[data-layout="full"] .sr-scenarios .sr-button {
  border-radius: var(--radius-control);
}

.sr-page[data-layout="full"] .sr-reset-menu {
  display: block;
}

/*
 * The answer to a scenario takes its own space under the bar while it
 * shows, then goes: the app moves down for it and keeps every control
 * free (review 2026-10-09: over the app it covered the Stopp it names).
 */
.sr-page[data-layout="full"] .sr-status {
  margin: 0;
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right)) var(--space-3) max(var(--space-4), env(safe-area-inset-left));
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  color: var(--text-primary);
  text-align: start;
}

.sr-page[data-layout="full"] .sr-status:empty {
  display: none;
}

.sr-page[data-layout="full"] .sr-stage {
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--surface-1);
}

.sr-page[data-layout="full"] .sr-holder,
.sr-page[data-layout="full"] .sr-device {
  position: static;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.sr-page[data-layout="full"] .sr-app {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* ── The intro (intro.js) ─────────────────────────────────────────────── */

/*
 * While it plays, the page waits: the bar and the device are hidden until
 * their animations bring them in (the device shows inside the ring's
 * circle only); the phone's stage shows the intro's background, not its
 * surface.
 */
.sr-page[data-intro] .sr-top,
.sr-page[data-intro] .sr-holder {
  opacity: 0;
}

.sr-page[data-intro] .sr-stage {
  background: transparent;
}

.sr-page[data-intro] .sr-holder {
  will-change: transform, opacity;
}

/*
 * Under the page (before it, z-index 0): the background, the light, the
 * rings and the words. The device covers them: no ring crosses the app or
 * the words, and the device grows over the words when it takes its place.
 */
.sr-intro-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* Over the page: the drop, and the layer that takes every tap while it plays (a tap ends it, reaches nothing under it). */
.sr-intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.sr-intro-backdrop > *,
.sr-intro > * {
  position: absolute;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.sr-intro-bg,
.sr-intro-fade {
  inset: 0;
  background: radial-gradient(120% 90% at var(--sr-intro-x, 50%) var(--sr-intro-y, 50%), var(--sr-i-depth) 0%, var(--sr-i-bg) 62%);
}

.sr-intro-drop {
  --sr-drop-width: 14px;
  --sr-drop-height: 21px;
  left: var(--sr-intro-x, 50%);
  top: var(--sr-intro-y, 50%);
  width: var(--sr-drop-width);
  height: var(--sr-drop-height);
  margin: calc(-1 * var(--sr-drop-height)) 0 0 calc(var(--sr-drop-width) / -2);
  overflow: visible;
  transform-origin: 50% 100%;
}

.sr-intro-stop-top {
  stop-color: var(--sr-i-drop-top);
}

.sr-intro-stop-bottom {
  stop-color: var(--sr-i-drop-bottom);
}

.sr-intro-ring {
  left: var(--sr-intro-x, 50%);
  top: var(--sr-intro-y, 50%);
  width: var(--sr-intro-ring, 600px);
  height: var(--sr-intro-ring, 600px);
  margin: calc(var(--sr-intro-ring, 600px) / -2) 0 0 calc(var(--sr-intro-ring, 600px) / -2);
}

.sr-intro-ring-clear {
  stop-color: var(--sr-i-ring);
  stop-opacity: 0;
}

.sr-intro-ring-soft {
  stop-color: var(--sr-i-ring);
  stop-opacity: var(--sr-i-soft-opacity);
}

.sr-intro-ring-rim {
  stop-color: var(--sr-i-rim);
  stop-opacity: var(--sr-i-rim-opacity);
}

.sr-intro-glow {
  left: var(--sr-intro-x, 50%);
  top: var(--sr-intro-y, 50%);
  width: var(--sr-intro-glow, 300px);
  height: var(--sr-intro-glow, 300px);
  margin: calc(var(--sr-intro-glow, 300px) / -2) 0 0 calc(var(--sr-intro-glow, 300px) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sr-i-glow), transparent);
}

.sr-intro-name,
.sr-intro-tagline {
  left: 0;
  right: 0;
  padding: 0 var(--space-4);
  text-align: center;
}

.sr-intro-name {
  top: var(--sr-intro-name-top, 20%);
  color: var(--sr-i-text);
  font-size: var(--type-display-s-size);
  line-height: var(--type-display-s-line);
  letter-spacing: var(--type-display-s-tracking);
  font-weight: var(--weight-semibold);
}

.sr-intro-tagline {
  top: var(--sr-intro-tagline-top, 30%);
  color: var(--sr-i-text-2);
  font-size: var(--type-title3-size);
  line-height: var(--type-title3-line);
  letter-spacing: var(--type-title3-tracking);
}

/*
 * On a phone the app itself is the device: while it floats, its screen
 * stands off the background with a hairline and a soft shadow, round like
 * its corners (intro.js INTRO_LAYOUT.cornerRadius). In its place at the
 * end both lie outside the window or under the bar, so they go unseen.
 */
.sr-page[data-intro][data-layout="full"] .sr-holder {
  border-radius: 28px;
  box-shadow: 0 0 0 1px var(--hairline), var(--sr-device-shadow);
}

@media (min-width: 900px) and (min-height: 640px) {
  .sr-intro-drop {
    --sr-drop-width: 16px;
    --sr-drop-height: 24px;
  }

  .sr-intro-name {
    font-size: var(--type-display-m-size);
    line-height: var(--type-display-m-line);
    letter-spacing: var(--type-display-m-tracking);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-button {
    transition: none;
  }

  .sr-button:active:not(:disabled) {
    transform: none;
  }
}