/* ===========================================================================
   voiceclean.css - THE CLEAN VOICE ROOM (web.voice.look: "clean").

   Ishaq 2026-09-27, of Apex Carpatia's /voice: "currently looks hurrendous ...
   need it clean" - then, having seen it live: "make this design universal for
   our framework. every new server website design should get it."

   WHO LOADS IT. The assembler links this sheet on the voice room ONLY when the
   owner's manifest says `web.voice.look: "clean"` (born that way for every new
   server - tools/newserver/born_features.py VOICE_LOOK_FROM), after the site
   theme and before the owner's own overlay, and writes `data-voice-look="clean"`
   on <html>. Every rule below is keyed on that attribute, so the sheet is inert
   anywhere else. An owner without the key never receives this file at all.

   ANY SITE THEME, ANY LANGUAGE. It was first drawn on Apex (haven) and proven on
   Dino Life (ridge, Thai). So it reads NO theme's private tokens (no --hv-*,
   --rg-*): only the theme contract every owner's theme.css writes (--fg, --bg-deep,
   --surface, --accent, --accent-hi, --primary, --on-primary, --ok/--warn/--bad and
   their halos and glows, the three font stacks) and color-mix() of them. No colour
   literal anywhere, and no invented primitive: every corner is the theme's own radius
   token (--r-lg / --r / --r-s / --r-xs / --r-pill) and every label size a house step
   (--tm-h-micro) or the owner's type scale (--fs-5 / --fs-6) - test_house_look's rules.
   The theme keeps its own title face, kicker and ground; this sheet decides layout.

   ID-ANCHORED ON PURPOSE. The site themes style .hero, .card and .btn with
   attribute-scoped selectors (haven's `body.has-livebar .hero.wrap` is 0,4,1);
   #main / #voice-desk out-rank all of them without !important, and the owner's
   overlay - linked after this sheet - can still out-rank this one.

   WHAT THE ROOM LOOKS LIKE. A compact centred title (kicker, title, one lede line)
   instead of a first screen of empty hero; ONE centred handset (two columns only
   when the staff-only earshot card is revealed); the plate as a clean status line
   (lamp + state word, the channel count); the Connect key as the page's one
   primary action (mic icon, label, sub-line); three quiet steps under it; the live
   phase as a lit mute key, a segmented mic mode, a dial well and one switch row.
   The engine's contract (ids, hooks, data-* it writes) is untouched.
   =========================================================================== */

html[data-voice-look="clean"] {
  --vc-line: color-mix(in srgb, var(--fg) 16%, transparent);
  --vc-hair: color-mix(in srgb, var(--fg) 8%, transparent);
  --vc-rim: color-mix(in srgb, var(--fg) 6%, transparent);
  --vc-rule: color-mix(in srgb, var(--fg) 14%, transparent);
  --vc-quiet: color-mix(in srgb, var(--fg) 62%, transparent);
  --vc-soft: color-mix(in srgb, var(--fg) 72%, transparent);
  --vc-read: color-mix(in srgb, var(--fg) 80%, transparent);
  --vc-glass: color-mix(in srgb, var(--fg) 4%, transparent);
  --vc-well: color-mix(in srgb, var(--bg-deep) 58%, transparent);
  --vc-well-deep: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  --vc-pane: color-mix(in srgb, var(--bg-deep) 62%, transparent);
  --vc-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --vc-tint-hi: color-mix(in srgb, var(--accent) 16%, transparent);
  --vc-tint-rim: color-mix(in srgb, var(--accent) 40%, transparent);
  --vc-tint-edge: color-mix(in srgb, var(--accent) 50%, transparent);
  --vc-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --vc-warn-wash: color-mix(in srgb, var(--warn) 8%, transparent);
  --vc-warn-rim: color-mix(in srgb, var(--warn) 30%, transparent);
  --vc-bad-wash: color-mix(in srgb, var(--bad) 8%, transparent);
  --vc-bad-rim: color-mix(in srgb, var(--bad) 30%, transparent);
  --vc-gut: clamp(20px, 4vw, 40px);
  --vc-desk: 600px;
}

/* ------------------------------------------------------------------ title -- */
html[data-voice-look="clean"] #main > .hero.wrap {
  min-height: 0;
  padding-block: clamp(28px, 6vh, 56px) 6px;
  padding-inline: var(--vc-gut);
}
/* the landing heroes' scroll cues and washes belong to a full-screen hero */
html[data-voice-look="clean"] #main > .hero.wrap::before,
html[data-voice-look="clean"] #main > .hero.wrap::after { content: none; }
/* some themes turn .hero-grid into a row and the copy shrink-wraps to the left
   edge; one full-width centred column at every width */
html[data-voice-look="clean"] #main > .hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  width: 100%;
}
html[data-voice-look="clean"] #main > .hero .hero-grid > div:not(.hero-art) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  text-align: center;
}
html[data-voice-look="clean"] #main > .hero .hero-art { display: none; }
html[data-voice-look="clean"] #main > .hero .kicker { margin-bottom: 12px; }
html[data-voice-look="clean"] #main > .hero h1 {
  margin: 0;
  padding-left: 0;
  font-size: clamp(calc(var(--fs-5) * 1.45), 5.4vw, calc(var(--fs-6) * 1.28));
  line-height: 1.14;             /* room for the marks above and below a Thai or Vietnamese line */
  letter-spacing: .04em;
}
html[data-voice-look="clean"] #main > .hero .vp-lede {
  margin: 12px auto 0;
  max-width: 44ch;
  font-size: clamp(12px, 1.25vw, 14.5px);
  line-height: 1.7;
  text-align: center;
}
html[data-voice-look="clean"] #main > .hero .vp-conn-row:has(#conn-badge:not([hidden])) {
  justify-content: center;
  margin-top: 16px;
}

/* ------------------------------------------------------ notes and gate ---- */
html[data-voice-look="clean"] #main > .vp-notes,
html[data-voice-look="clean"] #main > #voice-uninstalled {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--vc-gut);
}
html[data-voice-look="clean"] #main > .vp-notes > .notice,
html[data-voice-look="clean"] #main > #voice-uninstalled > .gate {
  max-width: var(--vc-desk);
  margin-inline: auto;
}
html[data-voice-look="clean"] #main > .vp-notes { margin-top: 14px; }
html[data-voice-look="clean"] #main > .vp-notes .notice { align-items: flex-start; gap: 10px; }

/* ------------------------------------------------------------- the desk -- */
html[data-voice-look="clean"] #main > #voice-desk.section {
  padding-top: clamp(18px, 3vh, 30px);
  padding-bottom: clamp(40px, 7vh, 72px);
  padding-inline: var(--vc-gut);
}
html[data-voice-look="clean"] #voice-desk .vp-grid {
  grid-template-columns: minmax(0, var(--vc-desk));
  justify-content: center;
  gap: 20px;
}
/* staff: the earshot card is revealed beside the handset */
html[data-voice-look="clean"] #voice-desk .vp-grid:has(> .vp-nearby:not([hidden])) {
  grid-template-columns: minmax(0, var(--vc-desk)) minmax(0, 380px);
}
@media (max-width: 1000px) {
  html[data-voice-look="clean"] #voice-desk .vp-grid:has(> .vp-nearby:not([hidden])) {
    grid-template-columns: minmax(0, var(--vc-desk));
  }
}

/* the two surfaces: one glass, no hover hop, no inherited padding */
html[data-voice-look="clean"] #voice-desk .vp-instrument,
html[data-voice-look="clean"] #voice-desk .vp-nearby {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  clip-path: none;
  border: 1px solid var(--vc-line);
  border-radius: var(--r-lg);
  background-color: var(--vc-pane);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 42%, transparent) 0%, transparent 46%);
  box-shadow: 0 30px 70px -34px var(--bg-deep), inset 0 1px 0 var(--vc-rim);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}
html[data-voice-look="clean"] #voice-desk .vp-instrument:hover,
html[data-voice-look="clean"] #voice-desk .vp-nearby:hover {
  transform: none;
  border-color: var(--vc-line);
}
html[data-voice-look="clean"] #voice-desk .vp-instrument::before,
html[data-voice-look="clean"] #voice-desk .vp-nearby::before { content: none; }
/* a hairline of the owner's accent along the handset's top edge */
html[data-voice-look="clean"] #voice-desk .vp-instrument::after {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .7;
  pointer-events: none;
}
html[data-voice-look="clean"] #voice-desk .vp-instrument > .vp-panel-h { display: none; }

/* ------------------------------------------------------- the status plate -- */
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-lcd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 18px;
  margin: 22px 22px 0;
  padding: 18px 20px 17px;
  border: 1px solid var(--vc-hair);
  border-radius: var(--r);
  background: var(--vc-well);
  box-shadow: inset 0 1px 0 var(--vc-rim);
}
html[data-voice-look="clean"] #voice-desk .vp-lcd p { margin: 0; }
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--vc-quiet);
  opacity: 1;
}
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  overflow: visible;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--fg);
  text-shadow: none;
}
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--fg-mute);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg-mute) 14%, transparent);
  transform: translateY(-1px);
}
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state[data-state="connecting"]::before,
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state[data-state="reconnecting"]::before {
  background: var(--warn);
  box-shadow: 0 0 0 4px var(--warn-halo), 0 0 12px var(--warn-glow);
  animation: vp-breathe 1.5s ease-in-out infinite;
}
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state[data-state="connected"]::before {
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-halo), 0 0 14px var(--ok-glow);
}
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state[data-state="error"]::before {
  background: var(--bad);
  box-shadow: 0 0 0 4px var(--bad-halo), 0 0 12px var(--bad-glow);
}
html[data-voice-look="clean"] #voice-desk .vp-instrument:has(#phase-live:not([hidden])) .vp-lcd-state {
  color: var(--accent-hi);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-voice-look="clean"] #voice-desk .vp-instrument[data-deaf="1"] .vp-lcd-state { color: var(--warn); }
/* the plate's sub-line: on a gated owner it prints the island's internal id */
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-sub { display: none; }
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-side { text-align: right; }
html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-count {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ the phases -- */
html[data-voice-look="clean"] #voice-desk .vp-phase { padding: 16px 22px 22px; }

/* the one primary action: Connect */
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
  width: 100%;
  min-height: 76px;
  padding: 14px 22px;
  border: 1px solid var(--primary);
  border-radius: var(--r);
  background-color: var(--primary);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent-hi) 55%, var(--primary)) 0%, var(--primary) 100%);
  color: var(--on-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px -14px var(--vc-glow), inset 0 1px 0 color-mix(in srgb, var(--fg) 22%, transparent);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key::before { display: none; }
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key:hover {
  border-color: var(--accent-hi);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 20px 44px -14px var(--vc-glow), inset 0 1px 0 color-mix(in srgb, var(--fg) 22%, transparent);
}
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key:active { transform: translateY(0) scale(.99); }
/* the house focus ring is the accent - invisible on an accent key */
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key-ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  color: var(--accent-hi);
}
html[data-voice-look="clean"] #voice-desk .vp-key-ico svg { display: block; width: 20px; height: 20px; }
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key-word {
  align-self: end;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-primary);
}
html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key-sub {
  align-self: start;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: color-mix(in srgb, var(--on-primary) 72%, transparent);
}
html[data-voice-look="clean"] #voice-desk .connect-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--vc-quiet);
}

/* how it works - three quiet steps under the key, only before connecting */
html[data-voice-look="clean"] #voice-desk .vp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--vc-hair);
  list-style: none;
  counter-reset: vp-step;
}
html[data-voice-look="clean"] #voice-desk .vp-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--vc-soft);
  counter-increment: vp-step;
}
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-steps li::before {
  content: counter(vp-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--vc-tint-rim);
  border-radius: 50%;
  background: var(--vc-tint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-hi);
}
html[data-voice-look="clean"] #voice-desk .vp-steps li::after { content: none; }

/* ------------------------------------------------------ the live handset -- */
html[data-voice-look="clean"] #voice-desk .voice-stage { margin: 0 0 16px; }
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-vu {
  display: flex;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--vc-hair);
  border-radius: var(--r-s);
  background: var(--vc-well-deep);
  box-shadow: none;
}
html[data-voice-look="clean"] #voice-desk .vp-vu > * { height: 12px; border-radius: var(--r-xs); }
html[data-voice-look="clean"] #voice-desk .vp-vu-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--vc-quiet);
}

/* the mute key: the live phase's main control, a lit outline rather than a fill */
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  padding: 14px 56px;
  border: 1px solid var(--vc-tint-edge);
  border-radius: var(--r);
  background: var(--vc-tint);
  box-shadow: inset 0 1px 0 var(--vc-rim);
  color: var(--fg);
  cursor: pointer;
}
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key::before { display: none; }
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key:hover { border-color: var(--accent); background: var(--vc-tint-hi); }
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key-word {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg);
}
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key-sub {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--vc-quiet);
}
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key[aria-pressed="true"],
html[data-voice-look="clean"] #voice-desk .vp-instrument[data-mic="closed"] #phase-live .vp-key {
  border-color: var(--vc-warn-rim);
  background: var(--vc-warn-wash);
}
html[data-voice-look="clean"] #voice-desk #phase-live .vp-key[aria-pressed="true"] .vp-key-word,
html[data-voice-look="clean"] #voice-desk .vp-instrument[data-mic="closed"] #phase-live .vp-key .vp-key-word { color: var(--warn); }
html[data-voice-look="clean"] #voice-desk .vp-key > .vp-key-cap {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
html[data-voice-look="clean"] #voice-desk .vp-key-cap {
  min-width: 26px;
  padding: 4px 7px;
  border: 1px solid var(--vc-rule);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  text-align: center;
  color: var(--vc-soft);
}

/* the microphone mode: one segmented control */
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid var(--vc-hair);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
}
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-pill {
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vc-quiet);
}
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-pill:hover { color: var(--fg); }
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-pill:has(input:checked) {
  border-color: var(--vc-tint-rim);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-hi);
}

/* the three dials, set in a quiet well */
html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-dials {
  gap: 8px;
  margin-top: 14px;
  padding: 14px 8px 12px;
  border: 1px solid var(--vc-hair);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bg-deep) 40%, transparent);
}
html[data-voice-look="clean"] #voice-desk .vp-dial-gauge { width: 64px; height: 64px; }
html[data-voice-look="clean"] #voice-desk .vp-dial-label { margin-top: 2px; font-size: var(--tm-h-micro); letter-spacing: .2em; }
html[data-voice-look="clean"] #voice-desk .vp-dial-val { font-size: 12.5px; }
html[data-voice-look="clean"] #voice-desk .vp-dial-input { width: 84%; }

/* Deafen / Settings / Leave */
html[data-voice-look="clean"] #voice-desk .vp-switchrow { gap: 8px; margin-top: 14px; }
html[data-voice-look="clean"] #voice-desk .vp-switch {
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11px 8px;
  border: 1px solid var(--vc-rule);
  border-radius: var(--r-s);
  background: var(--vc-glass);
  box-shadow: none;
  color: var(--vc-read);
}
html[data-voice-look="clean"] #voice-desk .vp-switch:hover {
  border-color: var(--vc-tint-edge);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--fg);
}
html[data-voice-look="clean"] #voice-desk .vp-switch .ctrl-icon svg { width: 16px; height: 16px; }
html[data-voice-look="clean"] #voice-desk .vp-switch .ctrl-label {
  font-family: var(--font-mono);
  font-size: var(--tm-h-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[data-voice-look="clean"] #voice-desk .vp-switch .vp-key-cap { min-width: 0; padding: 3px 5px; font-size: 9.5px; }
html[data-voice-look="clean"] #voice-desk .vp-switch[aria-pressed="true"] {
  border-color: var(--vc-warn-rim);
  background: var(--vc-warn-wash);
  color: var(--warn);
}
html[data-voice-look="clean"] #voice-desk .vp-switch.vp-switch-danger:hover {
  border-color: var(--vc-bad-rim);
  background: var(--vc-bad-wash);
  color: var(--bad);
}
html[data-voice-look="clean"] #voice-desk .vp-switch.vp-switch-danger:hover .ctrl-icon { color: var(--bad); }

/* the connection readouts */
html[data-voice-look="clean"] #voice-desk .vp-readouts {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--vc-hair);
}
html[data-voice-look="clean"] #voice-desk .vp-readouts > summary {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--vc-quiet);
}
html[data-voice-look="clean"] #voice-desk .vp-readout-grid { gap: 6px; }
html[data-voice-look="clean"] #voice-desk .vp-readouts .ro { padding: 9px 12px; border-radius: var(--r-s); }

/* the staff earshot card */
html[data-voice-look="clean"] #voice-desk .vp-nearby > .vp-panel-h {
  padding: 16px 20px;
  border-bottom: 1px solid var(--vc-hair);
  background: none;
}
html[data-voice-look="clean"] #voice-desk .vp-nearby .vp-count {
  padding: 3px 10px;
  border: 1px solid var(--vc-rule);
  border-radius: var(--r-pill);
  background: var(--vc-glass);
  font-family: var(--font-mono);
  font-size: 11px;
}
html[data-voice-look="clean"] #voice-desk .nb-row { padding: 11px 20px; border-bottom-color: var(--vc-hair); }

html[data-voice-look="clean"] #voice-desk .vp-ticker {
  width: min(100%, var(--vc-desk));
  margin: 14px auto 0;
  color: var(--vc-quiet);
}

/* ---------------------------------------------------------------- phones -- */
@media (max-width: 560px) {
  html[data-voice-look="clean"] #main > .hero.wrap { padding-block: 22px 2px; }
  html[data-voice-look="clean"] #main > .hero .vp-lede { max-width: 30ch; }
  html[data-voice-look="clean"] #voice-desk .vp-instrument .vp-lcd { margin: 16px 16px 0; padding: 15px 16px 14px; column-gap: 12px; }
  html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-eyebrow { letter-spacing: .14em; font-size: 9.5px; }
  html[data-voice-look="clean"] #voice-desk .vp-phase { padding: 14px 16px 18px; }
  html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key { column-gap: 13px; padding: 13px 16px; min-height: 70px; }
  html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key-ico { width: 40px; height: 40px; }
  html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key-word { font-size: 13px; letter-spacing: .2em; }
  html[data-voice-look="clean"] #voice-desk .vp-steps { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  html[data-voice-look="clean"] #voice-desk #phase-live .vp-key { padding-inline: 48px; }
  html[data-voice-look="clean"] #voice-desk .vp-dial-gauge { width: 56px; height: 56px; }
  html[data-voice-look="clean"] #voice-desk .vp-switch { grid-auto-flow: row; justify-items: center; gap: 5px; }
  html[data-voice-look="clean"] #voice-desk .vp-switch .vp-key-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key { transition: none; }
  html[data-voice-look="clean"] #voice-desk #phase-pre .vp-key:hover { transform: none; }
  html[data-voice-look="clean"] #voice-desk .vp-lcd .vp-lcd-state::before { animation: none; }
}