/* Sonar Ruler site, round 1 kit: base.css
 *
 * What every look shares: the app's three fonts, its colours as named custom properties, a type scale, and a few
 * neutral components (capsules, pills, a units toggle, a slider, the App Store placeholder, a video facade and the
 * frame for SRSound's scope). A look restyles them through custom properties instead of overriding their rules.
 *
 * Everything is scoped by an `sr-` class: the only global rule is box-sizing, so a look keeps full control of its
 * own page. Colours and type come from the app's code (TwoPhonesStyle.swift, PageKit.swift, LiveWallTop.swift,
 * HomeStyle.swift); README-parts.md says where each one is used. */

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

/* MARK: Fonts
 * The app's own files (app/App/Brand/Fonts), cut to Latin and converted to WOFF2, all SIL OFL (OFL.txt beside them).
 * The paths are relative to this file, so a page in round1/<look>/ that links ../kit/base.css gets them on file:// too.
 * One variable file per family: any weight on the `wght` axis with no extra request. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The rounded face of the first mockup. The app bundles it but its screens don't use it; it's here for a look that
 * wants a softer voice somewhere (never for numbers). */
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/Nunito-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* MARK: Colours: the amber page (TwoPhonesStyle.swift, PageKit.swift) */
  --sr-field: #FCBA1E;          /* the page's amber; also type on dark fills */
  --sr-field-top: #FCBC20;      /* the page runs top to bottom between these two */
  --sr-field-bottom: #FBB21C;
  --sr-yellow: #FEE306;         /* the one action yellow (Save, the TO OTHER PHONE chevron) */
  --sr-tile: #FDC94E;           /* cards and quiet fills: one shade lighter than the field, opaque */
  --sr-ink: #261208;            /* dark-brown ink: the number and all type on amber */
  --sr-ink2: #6B4313;           /* secondary type: the ink softened toward the field, still opaque so it stays crisp */
  --sr-brown: #6A1900;          /* filled circles (exit, sound), the TO OTHER PHONE pill */
  --sr-on-brown: #FFD23A;       /* type on the brown */
  --sr-cream: #F7F3EA;          /* the app's light colour: cards over a washed page. Not bone white. */
  --sr-wash: #F0E6D2;           /* what a card washes the amber page with (at 72 %) */
  --sr-warmth: #F98A0E;         /* the soft orange warmth behind Two Phones' number */
  --sr-steady: #1E5A2B;         /* STEADY: a deep, quiet green that still reads as good on amber */
  --sr-red: #D92B1A;            /* Two Phones' Quiet ON, so a silent phone isn't taken for a broken one */

  /* The page when a reading isn't valid (listening, settling, moving): it eases to this warm grey, so a lock shows
   * as the bright amber coming back. */
  --sr-grey-top: #C9C4BB;
  --sr-grey-bottom: #C1BCB2;
  --sr-grey-tint: #DEDAD2;      /* quiet fills on the grey */
  --sr-grey-chip: #F6F3EC;      /* the yellow chips on the grey */

  /* The accent on the portrait pages (PageKit.Accent): action capsules and icon discs in Live Wall's graphite with
   * its tape yellow. Brick red is the only "no"; STEADY green is the "yes". */
  --sr-graphite: #2A2A2F;       /* "pure black is too black": this is the app's darkest fill */
  --sr-tape: #FFD21A;           /* tape yellow: type on graphite, Live Wall's tape */
  --sr-brick: #C8341C;
  --sr-brick-on: #FFF4DE;

  /* Live Wall (LiveWallTop.swift) */
  --sr-lw-top: #17171A;         /* its page, top to bottom */
  --sr-lw-bottom: #0F0F11;
  --sr-lw-raised: #2A2A2F;      /* labels, pills and cards on it */
  --sr-lw-text: #F2F2F0;
  --sr-lw-dim: #9A9AA2;
  --sr-cyan: #38D9F0;           /* the tracked echo, everywhere it shows */
  --sr-cyan-ink: #08191D;
  --sr-leader: #E6E6EA;         /* an untracked echo's leader and notch */
  --sr-to-wall: #FFE680;        /* the TO WALL chevron and its words */
  --sr-lw-red: #E5484D;
  --sr-lw-good: #4ADE80;
  --sr-tape-ink: #1A1408;       /* the tape's numbers and ticks */
  --sr-tape-red: #C8102E;       /* the tape's metre marks */

  /* The waterfall's heat ramp (LiveWallTop.heat), quiet to loud. Its first stop is transparent in the app: the echo
   * fades into the page. SRSound's scope draws with the same ramp. */
  --sr-heat-0: #17171A;
  --sr-heat-1: #4A1A0A;
  --sr-heat-2: #A8380C;
  --sr-heat-3: #EE7A14;
  --sr-heat-4: #FCBA1E;
  --sr-heat-5: #FFF4D0;

  /* The 2017 icon (app/App/Assets.xcassets/AppIcon.appiconset/Icon1024.png), sampled: red-to-yellow bands with thin
   * deep-indigo crests. The thermal touch "here or there", never everywhere. */
  --sr-icon-red: #FC0008;
  --sr-icon-orange: #FF5A00;
  --sr-icon-amber: #FFA800;
  --sr-icon-yellow: #FFC700;
  --sr-indigo: #1200B0;
  --sr-thermal: linear-gradient(90deg, #FC0008, #FF5A00 32%, #FFA800 68%, #FFC700);

  /* The App Store art's darks (app/appstore/storeshots.py), for pages that hold amber app screens: those need a dark
   * page behind them. Slate is cool, warm-dark is Two Phones' grey family. */
  --sr-slate-top: #323238;
  --sr-slate-bottom: #28282D;
  --sr-warm-dark-top: #3B3631;
  --sr-warm-dark-bottom: #302C28;
  --sr-warm-deep-top: #2C2824;
  --sr-warm-deep-bottom: #221F1C;

  /* MARK: Type
   * Geist for words, Geist Mono for numbers, labels and small print, as in the app. The sizes are fluid between a
   * 390 px phone and a 1440 px desktop. */
  --sr-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sr-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sr-round: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;

  --sr-size-display: clamp(2.75rem, 1.65rem + 4.5vw, 5.75rem);   /* 44 to 92 px: the hero */
  --sr-size-h1: clamp(2.25rem, 1.6rem + 2.7vw, 4rem);           /* 36 to 64 */
  --sr-size-h2: clamp(1.75rem, 1.4rem + 1.45vw, 2.75rem);        /* 28 (the app's page title) to 44 */
  --sr-size-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);        /* 20 to 24 */
  --sr-size-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);    /* 18 to 22 */
  --sr-size-body: 1.0625rem;                                      /* 17 */
  --sr-size-line: 0.875rem;                                       /* 14: the app's Geist Mono line is 12-13 pt */
  --sr-size-small: 0.8125rem;                                     /* 13 */
  --sr-size-label: 0.75rem;                                       /* 12: the app's caps label is 11 pt */
  --sr-size-number: clamp(3.5rem, 2rem + 6.2vw, 8rem);            /* the big reading */

  /* MARK: Shape and motion */
  --sr-radius-card: 30px;       /* the guide and temperature cards */
  --sr-radius-tile: 24px;       /* the home's tiles */
  --sr-radius-pill: 999px;
  --sr-ease: cubic-bezier(0.42, 0, 0.58, 1);   /* SwiftUI's easeInOut: unhurried, no bounce */
  --sr-dur: 0.45s;              /* layout and colour changes (TwoPhones.ease) */
  --sr-dur-lit: 1.3s;           /* the page changing colour with the reading (TwoPhones.litEase) */
  --sr-dur-press: 0.12s;        /* a press dims a touch (Brand.Press) */
}

/* MARK: Type classes */

.sr-display,
.sr-h1,
.sr-h2,
.sr-h3 {
  font-family: var(--sr-font);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.sr-display {
  font-size: var(--sr-size-display);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.sr-h1 {
  font-size: var(--sr-size-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* The app's page title: Geist 28 pt, weight 700, tracking -0.7 pt. */
.sr-h2 {
  font-size: var(--sr-size-h2);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.sr-h3 {
  font-size: var(--sr-size-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 650;
}

.sr-lead,
.sr-body {
  font-family: var(--sr-font);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

.sr-lead {
  font-size: var(--sr-size-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.sr-body {
  font-size: var(--sr-size-body);
  line-height: 1.55;
}

/* The app's Geist Mono line under a title ("Measure with sound.", "Aim at a wall."). */
.sr-line {
  font-family: var(--sr-mono);
  font-size: var(--sr-size-line);
  font-weight: 500;
  line-height: 1.55;
  margin: 0;
}

/* The caps label ("HOW IT WORKS", "WORKS BEST"): Geist Mono 11 pt, 600, tracking 1.2 pt. */
.sr-label {
  font-family: var(--sr-mono);
  font-size: var(--sr-size-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0;
}

.sr-small {
  font-family: var(--sr-mono);
  font-size: var(--sr-size-small);
  font-weight: 450;
  line-height: 1.5;
  margin: 0;
}

/* A reading: Geist Mono, heavy and tight. Put the point in `.sr-dot` (SRPhysics.numberHTML does) to pull its
 * neighbours in, as the app does: Geist Mono gives the point a whole cell, which reads as a gap. */
.sr-num {
  font-family: var(--sr-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.92;
  white-space: nowrap;
  margin: 0;
}

.sr-num--big { font-size: var(--sr-size-number); }

.sr-dot { margin-inline: -0.19em; }

/* The unit after a reading: small, set on the baseline, not shouting. */
.sr-unit {
  font-family: var(--sr-mono);
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 0.35em;
}

.sr-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* MARK: Surfaces
 * Paint a section like one of the app's pages and set the text colours to match. Components inside pick up the
 * surface's own defaults (the store button turns cream on graphite, and so on). */

.sr-amber {
  background: linear-gradient(180deg, var(--sr-field-top), var(--sr-field-bottom));
  color: var(--sr-ink);
  --sr-fg2: var(--sr-ink2);
  --sr-focus: var(--sr-ink);
}

.sr-cream {
  background: var(--sr-cream);
  color: var(--sr-ink);
  --sr-fg2: var(--sr-ink2);
  --sr-focus: var(--sr-ink);
}

.sr-graphite {
  background: linear-gradient(180deg, var(--sr-lw-top), var(--sr-lw-bottom));
  color: var(--sr-lw-text);
  --sr-fg2: var(--sr-lw-dim);
  --sr-focus: var(--sr-tape);
  --sr-store-bg: var(--sr-cream);
  --sr-store-fg: var(--sr-ink);
  --sr-pill-bg: var(--sr-lw-raised);
  --sr-pill-fg: var(--sr-lw-text);
  --sr-btn-bg: var(--sr-tape);
  --sr-btn-fg: var(--sr-graphite);
  --sr-toggle-track: var(--sr-lw-raised);
  --sr-toggle-fg: var(--sr-lw-dim);
  --sr-toggle-on-bg: var(--sr-tape);
  --sr-toggle-on-fg: var(--sr-graphite);
  --sr-range-track: var(--sr-lw-raised);
  --sr-range-fill: var(--sr-tape);
  --sr-range-thumb: var(--sr-tape);
}

/* MARK: Buttons and pills
 * The app's flat capsules: no borders, no gradients, no glow. A press only dims a touch (Brand.Press). Each takes
 * its colours from custom properties, so a look restyles a whole page by setting them on an ancestor:
 *   --sr-btn-bg / --sr-btn-fg, --sr-pill-bg / --sr-pill-fg, --sr-focus (the keyboard focus ring). */

.sr-btn,
.sr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  border: 0;
  border-radius: var(--sr-radius-pill);
  font-family: var(--sr-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* The action capsule ("GOT IT", "NEXT"): graphite, its words in tape yellow, Geist Mono 14 pt bold. */
.sr-btn {
  min-height: var(--sr-btn-h, 50px);
  padding: 0 var(--sr-btn-px, 22px);
  background: var(--sr-btn-bg, var(--sr-graphite));
  color: var(--sr-btn-fg, var(--sr-tape));
  font-size: var(--sr-btn-size, 0.875rem);
  font-weight: var(--sr-btn-weight, 700);
  letter-spacing: 0.07em;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--sr-dur-press) ease-out;
}

/* The quiet capsule ("SHARE APP"): the tile colour, ink type, a size down. */
.sr-btn--tile {
  --sr-btn-bg: var(--sr-tile);
  --sr-btn-fg: var(--sr-ink);
  --sr-btn-h: 42px;
  --sr-btn-px: 18px;
  --sr-btn-size: 0.8125rem;
  --sr-btn-weight: 650;
}

.sr-btn--brown { --sr-btn-bg: var(--sr-brown); --sr-btn-fg: var(--sr-on-brown); }
.sr-btn--yellow { --sr-btn-bg: var(--sr-yellow); --sr-btn-fg: var(--sr-ink); }
.sr-btn--cream { --sr-btn-bg: var(--sr-cream); --sr-btn-fg: var(--sr-ink); }
.sr-btn--small { --sr-btn-h: 36px; --sr-btn-px: 14px; --sr-btn-size: 0.75rem; }

/* hover only where there is one: on a phone a tapped capsule would stay dimmed */
@media (hover: hover) { .sr-btn:hover { opacity: 0.88; } }
.sr-btn:active { opacity: 0.6; }
.sr-btn:disabled,
.sr-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* A capsule that is on (a playing sound, the selected chirp): the colours swap, nothing else moves. */
.sr-btn[aria-pressed="true"] {
  background: var(--sr-btn-on-bg, var(--sr-btn-fg, var(--sr-tape)));
  color: var(--sr-btn-on-fg, var(--sr-btn-bg, var(--sr-graphite)));
}

.sr-btn:focus-visible,
.sr-pill:focus-visible,
.sr-store:focus-visible,
.sr-toggle button:focus-visible,
.sr-video__play:focus-visible {
  outline: 2px solid var(--sr-focus, currentColor);
  outline-offset: 3px;
}

/* An icon in a capsule: any inline SVG at the text's size, in its colour. */
.sr-btn svg,
.sr-pill svg,
.sr-store svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: currentColor;
}

/* Pills label things ("20°C", "TO OTHER PHONE", "STEADY"). The default is the tile pill. */
.sr-pill {
  min-height: var(--sr-pill-h, 34px);
  padding: 0 var(--sr-pill-px, 14px);
  background: var(--sr-pill-bg, var(--sr-tile));
  color: var(--sr-pill-fg, var(--sr-ink));
  font-size: var(--sr-pill-size, 0.8125rem);
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1;
}

.sr-pill--lower { text-transform: none; letter-spacing: 0.02em; }
.sr-pill--brown { --sr-pill-bg: var(--sr-brown); --sr-pill-fg: var(--sr-on-brown); }
.sr-pill--graphite { --sr-pill-bg: var(--sr-graphite); --sr-pill-fg: var(--sr-tape); }
.sr-pill--steady { --sr-pill-bg: var(--sr-steady); --sr-pill-fg: var(--sr-yellow); letter-spacing: 0.09em; }
.sr-pill--red { --sr-pill-bg: var(--sr-red); --sr-pill-fg: #FFF4DE; }
.sr-pill--cream { --sr-pill-bg: var(--sr-cream); --sr-pill-fg: var(--sr-ink); }
.sr-pill--cyan { --sr-pill-bg: var(--sr-cyan); --sr-pill-fg: var(--sr-cyan-ink); }

/* MARK: Toggle
 * The app's units switch as a generic choice: a light track, the choice in use on the accent. Buttons with
 * aria-pressed (or radios' labels with .is-on); the fill changes colour in place, it doesn't slide. */

.sr-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 0;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-toggle-track, var(--sr-tile));
}

.sr-toggle button {
  min-height: var(--sr-toggle-h, 32px);
  padding: 0 13px;
  border: 0;
  border-radius: var(--sr-radius-pill);
  background: transparent;
  color: var(--sr-toggle-fg, var(--sr-ink2));
  font: 500 0.8125rem/1 var(--sr-mono);
  cursor: pointer;
  transition: background-color 0.25s var(--sr-ease), color 0.25s var(--sr-ease);
}

.sr-toggle button[aria-pressed="true"],
.sr-toggle button.is-on {
  background: var(--sr-toggle-on-bg, var(--sr-graphite));
  color: var(--sr-toggle-on-fg, var(--sr-tape));
  font-weight: 650;
}

/* MARK: Slider
 * A plain range input in the app's colours: a thin track, the part behind the thumb filled. Set --sr-range-pct
 * (0% to 100%) from script for the fill; without it the track is plain. */

.sr-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --sr-range-pct: 0%;
}

.sr-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sr-range-fill, var(--sr-graphite)) var(--sr-range-pct),
                              var(--sr-range-track, var(--sr-tile)) var(--sr-range-pct));
}

.sr-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--sr-range-track, var(--sr-tile));
}

.sr-range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--sr-range-fill, var(--sr-graphite));
}

.sr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--sr-range-thumb, var(--sr-graphite));
}

.sr-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--sr-range-thumb, var(--sr-graphite));
}

.sr-range:focus-visible { outline: 2px solid var(--sr-focus, currentColor); outline-offset: 4px; border-radius: 4px; }

/* MARK: App Store placeholder
 * A stand-in for Apple's official "Download on the App Store" badge, which goes in later from Apple's marketing
 * resources (it must be used unaltered). So this one deliberately looks like our own capsule, not like Apple's
 * badge: no Apple logo, none of its wording, none of its black-and-white look. It keeps about the badge's 3:1 box
 * (the badge is 120 x 40 at its smallest), so the swap doesn't move the layout. Find it by
 * data-placeholder="app-store-badge". */

.sr-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: var(--sr-store-h, 56px);
  min-width: calc(var(--sr-store-h, 56px) * 3);
  padding: 0 22px 0 18px;
  border-radius: var(--sr-radius-pill);
  background: var(--sr-store-bg, var(--sr-graphite));
  color: var(--sr-store-fg, var(--sr-tape));
  text-decoration: none;
  transition: opacity var(--sr-dur-press) ease-out;
}

@media (hover: hover) { .sr-store:hover { opacity: 0.88; } }
.sr-store:active { opacity: 0.6; }

.sr-store svg { width: 22px; height: 22px; }

.sr-store__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.sr-store__small {
  font: 600 0.625rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
}

.sr-store__big {
  font: 650 1.1875rem/1 var(--sr-font);
  letter-spacing: -0.01em;
}

/* MARK: Video facade
 * A poster with a play button that loads nothing until it's clicked: no YouTube request, no cookie, until the
 * visitor asks. data-state is "soon" (no video yet: the button is disabled and says so), "ready" or "playing".
 * The script that swaps the poster for the player is in parts.html (and README-parts.md): a local clip
 * (data-src) works now, and the youtube-nocookie iframe is a commented hook for when the video exists.
 * Restyle with --sr-video-ratio, --sr-video-radius, --sr-video-play-bg / --sr-video-play-fg. */

.sr-video {
  position: relative;
  aspect-ratio: var(--sr-video-ratio, 16 / 9);
  border-radius: var(--sr-video-radius, 24px);
  overflow: hidden;
  background: var(--sr-lw-top);
  color: var(--sr-lw-text);
  isolation: isolate;
}

.sr-video__poster,
.sr-video > video,
.sr-video > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* A calm wash at the foot, so the caption reads over any poster, even an app screen with its own buttons there. */
.sr-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(15 15 17 / 0) 42%, rgb(15 15 17 / 0.5) 68%, rgb(15 15 17 / 0.84));
  pointer-events: none;
  transition: opacity var(--sr-dur) var(--sr-ease);
}

/* No video yet: dim the whole poster, so it reads as a preview and the note sits on calm dark, not on the app's own
   reading pill. */
.sr-video[data-state="soon"]::after {
  background: linear-gradient(180deg, rgb(15 15 17 / 0.3), rgb(15 15 17 / 0.5) 55%, rgb(15 15 17 / 0.88));
}

.sr-video__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: var(--sr-video-play, 84px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  /* cream reads on a dark poster and on an amber one alike; the tape yellow disappears on amber */
  background: var(--sr-video-play-bg, var(--sr-cream));
  color: var(--sr-video-play-fg, var(--sr-graphite));
  cursor: pointer;
  transition: opacity var(--sr-dur-press) ease-out;
}

/* The triangle, nudged right of centre so it looks centred. */
.sr-video__play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  width: 30%;
  height: 34%;
  translate: -50% -50%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (hover: hover) { .sr-video__play:enabled:hover { opacity: 0.9; } }
.sr-video__play:enabled:active { opacity: 0.6; }
/* No video yet: the button is there but plainly not live, and the note beside the title says why. */
.sr-video__play:disabled { cursor: default; opacity: 1; background: rgb(247 243 234 / 0.5); color: rgb(42 42 47 / 0.6); }

.sr-video__caption {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 3%, 28px);
  right: clamp(16px, 3%, 28px);
  bottom: clamp(14px, 3%, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 0;
}

.sr-video__title {
  font: 650 clamp(1rem, 0.9rem + 0.5vw, 1.375rem)/1.2 var(--sr-font);
  letter-spacing: -0.01em;
}

.sr-video__note {
  font: 600 0.6875rem/1 var(--sr-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sr-to-wall);
}

.sr-video[data-state="playing"]::after,
.sr-video[data-state="playing"] .sr-video__play,
.sr-video[data-state="playing"] .sr-video__caption,
.sr-video[data-state="playing"] .sr-video__poster { display: none; }

.sr-video > video,
.sr-video > iframe { z-index: 3; background: #000; }

/* MARK: Scope
 * The frame SRSound.scope() draws its spectrogram in: Live Wall's dark page, so the heat ramp reads as it does in
 * the app's waterfall. The canvas fills it; give the frame a width (and a ratio, if not this one). */

.sr-scope {
  position: relative;
  aspect-ratio: var(--sr-scope-ratio, 16 / 5);
  min-height: 120px;
  border-radius: var(--sr-scope-radius, 18px);
  overflow: hidden;
  background: var(--sr-scope-bg, var(--sr-lw-top));
  color: var(--sr-lw-dim);
}

.sr-scope > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .sr-btn, .sr-store, .sr-toggle button, .sr-video::after, .sr-video__play { transition: none; }
}