/* Full-screen Studio adaptation of the current mobile activity detail.
   Background, prompt dots and recording ring come from the mobile renderer;
   typography is Tracy's October 13 guideline. Graph geometry stays data-owned. */
:root {
  color-scheme: dark; --activity: #6c8b81; --voice-level: 0;
  --ink: #f2f2f0; --muted: rgba(255,255,255,.88); --dim: rgba(255,255,255,.75);
  --bg: #0c0c0e; --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.3);
  --danger: #ffd8d0; --connected: #9cc8b0;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --display: 'Hanken Grotesk', var(--sans); --numbers: 'Doto', var(--sans);
  --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: color-mix(in oklch, var(--activity) 52%, #384640); }
body { margin: 0; min-height: 100dvh; color: #fff; font-family: var(--sans); background: transparent; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; z-index: 0; pointer-events: none; left: -25%; right: -25%; top: 70px; height: 500px; filter: blur(20px); background: radial-gradient(closest-side, color-mix(in oklch,var(--activity) 30%,#14211d) 0%, color-mix(in oklch,var(--activity) 45%,#1c3029) 34%, color-mix(in oklch,var(--activity) 85%,#99aa96) 66%,transparent 100%); transform: scale(calc(1 + var(--voice-level) * .08)); transition: transform 120ms linear; }
.studio-shell { position: relative; width: 100%; max-width: none; min-height: 100dvh; display: flex; flex-direction: column; padding: max(28px,env(safe-area-inset-top)) 24px max(26px,env(safe-area-inset-bottom)); }
.studio-brand { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 24px; }
.studio-brand img { width: 18px; height: 18px; object-fit: contain; filter: invert(1); }
.studio-session-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; font: 400 26px/1.2 var(--display); }
.studio-session-mark { display: none; }
.studio-session-subtitle { width: 100%; font: 400 13px/1.4 var(--sans); color: var(--muted); }
section { width: 100%; min-width: 0; }
#studio-start, #studio-notice, #studio-capture, #studio-waiting { flex: 1; display: flex; flex-direction: column; max-width: 600px; align-self: center; }
h1 { margin: 0 0 14px; font: 400 32px/1.2 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.studio-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.studio-trust { font-size: 13px; line-height: 1.5; color: var(--muted); }
button { min-height: 50px; width: 100%; padding: 12px 20px; border: 1px solid transparent; border-radius: 999px; background: #fff; color: #2a0f22; font: 500 15px/1.4 var(--sans); cursor: pointer; transition: background 250ms var(--ease), transform 250ms var(--ease); }
button:hover:not(:disabled) { background: #f2f2f0; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#studio-start h1 { max-width: 17ch; margin: 48px 0 24px; font-size: clamp(36px,6vw,48px); }
#studio-start-button { margin-top: auto; }
#studio-error { max-width: 600px; align-self: center; padding: 14px; background: #381921; color: var(--danger); border: 1px solid var(--danger); border-radius: 16px; font-size: 14px; }
/* Same large numeric focal point and tappable question card as mobile. */
.studio-recording-clock { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 20px 0 28px; }
#studio-recording-time { font: 700 clamp(72px,22vw,96px)/.95 var(--numbers); font-variant-numeric: tabular-nums; white-space: nowrap; }
.studio-recording-clock > span:last-child { font-size: 14px; }
.studio-prompt-card { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100px; padding: 20px 22px; border-radius: 22px; background: rgba(30,10,25,.28); color: #fff; touch-action: pan-y; }
.studio-prompt-card:hover:not(:disabled) { background: rgba(30,10,25,.38); }
.studio-prompt-card h1 { margin: 0; font: 500 20px/1.3 var(--sans); text-align: center; text-wrap: balance; }
.studio-prompt-dots { display: flex; align-items: center; justify-content: center; gap: 5px; }
.studio-prompt-dots span { width: 5px; height: 5px; border-radius: 3px; background: #fff; opacity: .4; transition: width 400ms var(--ease); }
.studio-prompt-dots span.active { width: 14px; opacity: .95; }
.studio-prompt-navigation { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 12px; }
.studio-prompt-navigation button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; background: transparent; color: #fff; font-size: 24px; }
#studio-prompt-position { color: var(--muted); font-size: 11px; text-align: center; }
#studio-capture-detail { margin-bottom: 24px; text-align: center; font-size: 13px; }
/* Full-screen detail's white 70px knob in a 108px masked tick ring. */
.studio-recorder { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 24px; }
.studio-recording-control { position: relative; width: 108px; height: 108px; flex: 0 0 108px; display: grid; place-items: center; }
.studio-recording-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.85) 0deg 1.6deg,transparent 1.6deg 9deg); mask-image: radial-gradient(circle,transparent 44px,#000 45px,#000 53px,transparent 54px); opacity: .32; }
.studio-recorder button { position: relative; width: 70px; height: 70px; min-height: 70px; padding: 0; border-radius: 50%; font-size: 0; background: #fff; box-shadow: 0 8px 24px rgba(40,10,35,.35),inset 0 -4px 10px rgba(0,0,0,.08); touch-action: none; user-select: none; }
.studio-recorder button::before { display: block; width: 14px; height: 14px; margin: auto; border-radius: 7px; background: var(--activity); box-shadow: 0 0 8px 2px color-mix(in srgb,var(--activity) 55%,transparent); content: ''; }
.studio-recorder #studio-stop-button { transform: scale(1.1); box-shadow: 0 0 calc(24px + var(--voice-level) * 30px) calc(8px + var(--voice-level) * 12px) var(--activity); }
.studio-recorder #studio-stop-button::before { border-radius: 3px; box-shadow: none; }
.studio-recording-summary { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#studio-recording-slot { font-size: 14px; }
#studio-recording-label { font-size: 12px; color: var(--muted); }
.studio-waveform { display: flex; align-items: center; gap: 3px; height: 26px; overflow: hidden; }
.studio-waveform span { width: 3px; height: 4px; flex: 0 0 3px; border-radius: 2px; background: #fff; opacity: .35; transition: height 90ms linear; }
.studio-recorder:has(#studio-stop-button:not([hidden])) .studio-waveform span { opacity: 1; }
.studio-recording-hint { margin: 14px 0 0; text-align: center; font-size: 12px; }
.studio-saved-note { align-self: flex-start; padding: 12px 16px; margin: 0 0 28px; border-radius: 22px; background: rgba(30,10,25,.28); font-size: 13px; }
#studio-waiting h1 { margin-top: 28px; }
#studio-after-button, #studio-activity-start-button { margin-top: auto; }
.studio-analysis-progress { margin-top: auto; margin-bottom: 24px; }
.studio-analysis-progress-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: 13px; }
#studio-analysis-progress-value { font-family: var(--numbers); }
.studio-analysis-progress-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.studio-analysis-progress-track span { display: block; height: 100%; width: 0; background: #fff; transition: width 450ms var(--ease); }
/* Privacy uses readable opaque groups within the same full-screen atmosphere. */
.studio-notice-details { display: grid; gap: 18px; padding: 20px; margin: 8px 0 20px; border-radius: 22px; background: rgba(30,10,25,.55); }
.studio-notice-details h2 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.studio-notice-details p { margin: 0; font-size: 13px; }
#studio-notice-heading:focus { outline: none; }
.studio-privacy-link { color: #fff; padding: 12px 0; font-size: 13px; text-underline-offset: 4px; }
#studio-continue-button { margin-top: auto; }
#studio-notice-back-button { margin-top: 12px; background: rgba(30,10,25,.28); color: #fff; border: 1px solid rgba(255,255,255,.3); }
/* Mobile comparison card: graph, pair, interpretation and tracks stay together. */
#studio-reveal { max-width: 1040px; align-self: center; }
.voice-result-main { display: flex; flex-direction: column; gap: 20px; }
.voice-result-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.studio-result-header h1 { font-size: 26px; }
.studio-result-header .studio-eyebrow { margin-bottom: 8px; }
.studio-result-visual { background: #0c0c0e; color: var(--ink); border-radius: 22px; padding: 12px 14px 16px; }
.studio-result-tabs { display: flex; justify-content: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto 8px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); }
.studio-result-tab { min-height: 44px; width: auto; padding: 8px 12px; background: transparent; color: rgba(242,242,240,.72); font-size: 13px; }
.studio-result-tab:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.studio-result-tab-active,.studio-result-tab-active:hover:not(:disabled) { background: #f2f2f0; color: #0a0a0a; }
.studio-result-chart { width: 100%; max-width: 280px; margin: auto; }
.studio-result-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.studio-chart-frame { fill: transparent; stroke: rgba(255,255,255,.1); }
.studio-chart-axis { stroke: rgba(255,255,255,.1); }
.studio-chart-label { fill: rgba(242,242,240,.72); font: 400 10px var(--sans); }
.voice-viz-mind { --dim-color: #b7b9ff; }
.voice-viz-expression { --dim-color: #f08cc6; }
.voice-viz-body { --dim-color: #f59a88; }
.voice-viz-group { opacity: .14; transition: opacity 250ms var(--ease); }
.studio-result-visual[data-active-dimension='mind'] .voice-viz-mind,.studio-result-visual[data-active-dimension='expression'] .voice-viz-expression,.studio-result-visual[data-active-dimension='body'] .voice-viz-body { opacity: 1; }
.voice-viz-stroke { fill: none; stroke-linecap: round; stroke-width: 30; opacity: .5; }
.voice-viz-dot { stroke-width: 1.5; }
.voice-viz-dot-before { fill: #0c0c0e; stroke: rgba(242,242,240,.72); }
.voice-viz-dot-after { fill: var(--dim-color); stroke: var(--dim-color); }
.voice-viz-ring { fill: none; stroke: var(--dim-color); stroke-width: 1; }
.voice-viz-ring-unclear { stroke-dasharray: 2 3; }
.voice-result-scrubber { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 12px; color: rgba(242,242,240,.72); }
.voice-result-scrubber i { position: relative; width: 64px; height: 10px; }
.voice-result-scrubber i::before { position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: rgba(242,242,240,.5); content: ''; }
.voice-result-scrubber b { position: absolute; top: 1px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #f2f2f0; }
.voice-result-pair { margin: 14px 0 4px; font-size: 12px; color: rgba(242,242,240,.72); }
.voice-result-shift { margin: 0 0 16px; font: 500 16px/1.35 var(--sans); color: var(--ink); }
.studio-result-visual-note { display: none; }
.voice-result-bars { display: flex; flex-direction: column; gap: 10px; }
#studio-result-bars[data-dim='mind'] { --dim-color: #b7b9ff; }
#studio-result-bars[data-dim='expression'] { --dim-color: #f08cc6; }
#studio-result-bars[data-dim='body'] { --dim-color: #f59a88; }
.voice-result-bar-row { display: grid; grid-template-columns: 80px minmax(0,1fr) 80px; gap: 8px; align-items: center; font-size: 12px; }
.voice-result-bar-row strong { text-align: right; font-size: 12px; font-weight: 500; }
.voice-result-bar { position: relative; height: 16px; }
.voice-result-bar::before { position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.14); content: ''; }
.voice-result-bar i,.voice-result-bar b { position: absolute; top: 2px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; }
.voice-result-bar i { border: 1px solid rgba(242,242,240,.72); background: #0c0c0e; }
.voice-result-bar b { background: var(--dim-color); }
.voice-result-bar u { position: absolute; top: 7px; height: 2px; background: var(--dim-color); }
.voice-result-dimension-group { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; border-radius: 22px; background: rgba(30,10,25,.28); }
.voice-result-dimension-group h2 { width: 100%; margin: 0; font-size: 14px; }
.voice-result-dimension-row { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.voice-result-dimension-row strong { font-size: 16px; }
#studio-recovery { font: 500 22px/1.3 var(--numbers); }
.voice-result-note summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; }
.voice-result-note summary::after { content: '+'; margin-left: auto; }
.voice-result-note[open] summary::after { content: '−'; }
.voice-result-note h2 { font-size: 14px; margin: 16px 0 6px; }
.voice-result-note p { font-size: 13px; }
.voice-result-actions { display: flex; flex-direction: column; gap: 12px; }
.voice-result-actions > p { margin: 0; }
.studio-choice { display: flex; gap: 8px; }
.studio-choice button,.studio-restart-button { color: #fff; background: rgba(30,10,25,.28); }
.studio-email { display: grid; gap: 8px; margin-top: 48px; font-size: 14px; }
.studio-email input[type='email'] { width: 100%; min-height: 50px; border: 1px solid rgba(255,255,255,.5); padding: 12px 16px; border-radius: 22px; background: rgba(30,10,25,.4); color: #fff; font: 16px var(--sans); }
.studio-email input::placeholder { color: var(--muted); }
.studio-consent { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; }
.studio-consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
#studio-reveal-message { min-height: 1.5em; }
.voice-result-footer { font-size: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); }
@media (max-width:359px) {
  .studio-shell { padding-left: 16px; padding-right: 16px; }
  .studio-prompt-card { padding-left: 16px; padding-right: 16px; }
  .studio-prompt-card h1 { font-size: 18px; }
  .studio-recording-control { flex-basis: 108px; }
  .studio-recorder { gap: 12px; }
  #studio-recording-label { font-size: 11px; }
  .voice-result-bar-row { grid-template-columns: 70px minmax(0,1fr) 72px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

/* Mobile elapsed-time ring: fills once over 20 seconds, then remains full. */
.studio-recording-ring-lit { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(#fff 0deg 1.6deg,transparent 1.6deg 9deg); mask-image: radial-gradient(circle,transparent 44px,#000 45px,#000 53px,transparent 54px),conic-gradient(#000 0deg var(--record-degrees,0deg),transparent var(--record-degrees,0deg) 360deg); mask-composite: intersect; -webkit-mask-image: radial-gradient(circle,transparent 44px,#000 45px,#000 53px,transparent 54px),conic-gradient(#000 0deg var(--record-degrees,0deg),transparent var(--record-degrees,0deg) 360deg); -webkit-mask-composite: source-in; filter: drop-shadow(0 0 4px var(--activity)); }

#studio-capture #studio-activity-recordings { margin: 18px 0 12px; }
#studio-capture #studio-activity-start-button, #studio-capture #studio-after-button { margin-top: 8px; flex: none; }

.studio-recording-control:not(:has(button:not([hidden]))) { display: none; }
#studio-capture:has(#studio-prompt-button:disabled) .studio-prompt-navigation { visibility: hidden; }
#studio-capture:has(#studio-prompt-button:disabled) .studio-recording-hint { display: none; }
.studio-prompt-card:disabled { opacity: 1; }

/* Saved state uses one chip; suppress inactive recording chrome. */
#studio-capture:has(#studio-record-button[hidden]):has(#studio-stop-button[hidden]) .studio-recorder { display: none; }
#studio-capture:has(#studio-record-button[hidden]):has(#studio-stop-button[hidden]) #studio-activity-recordings { margin-top: auto; }
.studio-analysis-progress-track span { width: 32%; animation: studio-pending 1.6s ease-in-out infinite alternate; }
@keyframes studio-pending { to { transform: translateX(210%); } }

.voice-result-reflection { border-radius: 22px; padding: 24px; background: #101010; border: 1px solid rgba(255,255,255,.1); }
.voice-result-reflection h2 { margin: 8px 0 12px; font: 500 26px/1.2 var(--sans); }
#studio-reflection-copy { margin: 16px 0 0; font: 400 18px/1.65 var(--sans); color: var(--ink); }
.studio-reflection-source { margin: 0; font-size: 12px; line-height: 1.5; opacity: .75; }

/* Phone-first contract: one reading column at every width, natural scrolling
   for results/privacy, viewport-height rhythm for recording and activity. */
:root { --page-gutter: clamp(16px, 4.6vw, 20px); --card-radius: 22px; }
.studio-shell { max-width: 480px; margin-inline: auto; padding: calc(16px + env(safe-area-inset-top)) max(var(--page-gutter),env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(var(--page-gutter),env(safe-area-inset-left)); }
.studio-brand { margin-bottom: 16px; }
.studio-session-context { font-size: 22px; margin-bottom: 20px; }
body:has(#studio-capture:not([hidden])) .studio-session-subtitle,
body:has(#studio-reveal:not([hidden])) .studio-session-subtitle { display: none; }
body:has(#studio-reveal:not([hidden])) .studio-session-context { display: none; }
#studio-reveal { max-width: 100%; }
.voice-result-main { display: flex; gap: 16px; }
.studio-result-header h1 { margin-bottom: 4px; }
.studio-result-chart { max-width: clamp(180px,54vw,232px); }
.studio-result-visual { border-radius: var(--card-radius); }
.voice-result-bar-row { grid-template-columns: minmax(64px,1fr) minmax(64px,1.6fr) minmax(64px,1fr); }
.voice-result-bar-row strong { overflow-wrap: anywhere; }
.voice-result-reflection { padding: 20px; border: 0; }
.voice-result-reflection h2 { font-size: 24px; }
#studio-reflection-copy { font-size: 16px; line-height: 1.55; }
.studio-reflection-source { opacity: 1; color: var(--dim); }
.studio-recording-clock { margin: clamp(8px,2dvh,20px) 0 clamp(12px,2.5dvh,24px); }
#studio-recording-time { font-size: clamp(64px,11dvh,96px); }
.studio-prompt-card { flex-shrink: 0; }
.studio-recorder { flex-shrink: 0; padding-top: 12px; }
button,a,summary { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
.studio-recorder button { touch-action: none; }
.studio-privacy-link { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 44px; }
@media (max-height:700px) {
 .studio-brand { margin-bottom: 12px; }
 .studio-session-context { font-size: 20px; margin-bottom: 12px; }
 .studio-eyebrow { margin-bottom: 8px; }
 .studio-recording-clock { margin: 4px 0 12px; }
 .studio-prompt-card { padding: 16px; }
 .studio-prompt-card h1 { font-size: 20px; }
 #studio-capture-detail { margin-bottom: 8px; }
 .studio-recording-hint { margin-top: 8px; }
 #studio-start h1 { margin-top: 24px; font-size: 34px; }
}
@media (orientation:landscape) and (max-height:500px) {
 .studio-shell { min-height: 100dvh; }
 #studio-capture { min-height: 450px; }
}
@media (max-height:700px) {
 #studio-capture #studio-activity-recordings { padding: 6px 12px; margin: 4px 0; font-size: 12px; }
 #studio-capture:has(#studio-activity-recordings:not([hidden])) .studio-recorder { padding-top: 0; }
 #studio-capture:has(#studio-after-button:not([hidden])) #studio-capture-detail,
 #studio-capture:has(#studio-after-button:not([hidden])) .studio-recording-hint { display: none; }
 #studio-capture:has(#studio-after-button:not([hidden])) .studio-prompt-card { padding-block: 12px; }
}

#studio-capture-detail { margin-top: 16px; }
/* The timer owns the atmospheric field; the prompt is a separate section. */
body:has(#studio-capture:not([hidden]))::before { display: none; }
html { overflow-x: clip; }
.studio-shell { overflow: visible; }
.studio-recording-clock { position: relative; isolation: isolate; overflow: clip; border-radius: 28px; flex: none; justify-content: center; min-height: clamp(150px,28dvh,250px); margin: 0 0 28px; }
.studio-recording-clock::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -20%; right: -20%; top: 50%; height: 100%; filter: blur(20px); mask-image: radial-gradient(ellipse, #000 35%, transparent 72%); background: radial-gradient(closest-side,color-mix(in oklch,var(--activity) 30%,#14211d) 0%,color-mix(in oklch,var(--activity) 45%,#1c3029) 34%,color-mix(in oklch,var(--activity) 85%,#99aa96) 66%,transparent 100%); transform: translateY(-50%) scale(calc(1 + var(--voice-level) * .08)); transition: transform 120ms linear; }
#studio-recording-time { font-size: clamp(72px,12dvh,96px); }
.studio-prompt-card { position: relative; }
@media (max-height:700px) {
 .studio-recording-clock { min-height: 132px; margin: 0 0 20px; }
 #studio-recording-time { font-size: 72px; }
 #studio-capture:has(#studio-after-button:not([hidden])) .studio-recording-clock { min-height: 112px; }
}
/* Let the timer and question breathe into the available vertical space. */
@media (min-height:701px) {
 .studio-recording-clock { margin-top: clamp(20px,4dvh,40px); margin-bottom: clamp(40px,6dvh,60px); }
}
@media (min-height:620px) and (max-height:700px) {
 .studio-recording-clock { margin-top: 16px; margin-bottom: 32px; }
}
.studio-recording-clock::before { left: 50%; right: auto; width: min(100vw,660px); transform: translate(-50%,-50%) scale(calc(1 + var(--voice-level) * .08)); }
/* Mobile GraphViz presentation; numeric result labels intentionally omitted. */
.studio-result-chart { max-width: 280px; }
.studio-chart-frame,.studio-chart-axis { stroke: rgba(255,255,255,.12); }
.studio-chart-label-axis { font-weight: 600; font-size: 11px; letter-spacing: .07em; }
.studio-chart-endpoint { fill: #8a8a8a; font: 400 10px var(--sans); }
.voice-viz-mind { --dim-color: #c9d3fa; }
.voice-viz-expression { --dim-color: #f6c6ec; }
.voice-viz-body { --dim-color: #f9c9b4; }
.voice-viz-group { mix-blend-mode: screen; opacity: .13; }
.voice-viz-stroke { opacity: 1; }
.voice-viz-ring { stroke: #f2f2f0; }
.voice-result-scrubber { gap: 10px; margin-top: 6px; }
.voice-result-scrubber i::before { background: rgba(255,255,255,.15); }
.voice-result-scrubber i::after { content:''; position:absolute; top:4px; left:0; width:var(--chart-progress,100%); height:2px; background:#f2f2f0; }
.voice-result-scrubber b { left:var(--chart-progress,100%); right:auto; margin-left:-3.5px; width:7px; height:7px; top:1.5px; }
#studio-chart { cursor: pointer; }
#studio-chart:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.voice-result-pair,.voice-result-shift,.voice-result-bars { margin-inline: 4px; }
.voice-result-bars { gap:8px; }
.studio-result-visual[data-active-dimension='mind'] .studio-chart-label-axis { fill:#c9d3fa; }
.studio-result-visual[data-active-dimension='expression'] .studio-chart-label-axis { fill:#f6c6ec; }
.studio-result-visual[data-active-dimension='body'] .studio-chart-label-axis { fill:#f9c9b4; }

.studio-email h2 { margin: 0; font: 500 22px/1.3 var(--display); }
.studio-email > p { margin: 0 0 8px; }
.studio-website-link { display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink); text-decoration:none; margin-bottom:16px; }
.voice-result-note #studio-reflection-copy { margin-top:12px; font-size:16px; line-height:1.55; }
.voice-result-note .studio-reflection-source { margin-top:12px; }
/* Axis labels use bounded columns so the track owns the remaining width. */
.voice-result-bar-row { grid-template-columns: 76px minmax(0,1fr) 48px; gap: 10px; }

/* Production landing's unified email/action pill, with Studio-safe colors. */
.studio-brand { color:var(--ink); text-decoration:none; width:fit-content; min-height:44px; margin-bottom:4px; }
.studio-waitlist-pill { display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px; background:rgba(246,245,241,.88); min-width:0; }
.studio-waitlist-pill #studio-email { flex:1; width:0; min-width:0; min-height:44px; padding:0 12px; border:0; border-radius:999px; background:#303431; color:#fafaf7; font-size:16px; }
.studio-waitlist-pill #studio-waitlist-button { width:auto; flex:none; min-height:44px; padding:0 12px; background:#fafaf7; color:#141615; font-size:13px; white-space:nowrap; }
/* Readable single-boundary signup; the field has no nested surface. */
.studio-waitlist-pill { background:transparent; border:1px solid rgba(255,255,255,.65); padding:4px; gap:8px; }
.studio-waitlist-pill #studio-email { background:transparent; border:0; border-radius:0; padding:0 10px; color:#fff; }
.studio-waitlist-pill #studio-email::placeholder { color:rgba(255,255,255,.8); }
.studio-waitlist-pill #studio-waitlist-button { min-height:48px; padding:0 14px; font-size:14px; font-weight:600; }
.studio-waitlist-pill:has(#studio-email:focus-visible) { outline:2px solid #fff; outline-offset:3px; }
.studio-waitlist-pill #studio-email:focus-visible { outline:none; }

.studio-welcome-copy { margin-top:clamp(40px,12dvh,110px); padding-bottom:28px; }
#studio-start .studio-welcome-copy h1 { margin:0 0 16px; max-width:18ch; font-size:clamp(32px,8.5vw,40px); }
.studio-welcome-copy p { margin:0; }
.studio-notice-actions { display:flex; gap:12px; margin-top:auto; padding-top:16px; flex:none; }
.studio-notice-actions #studio-notice-back-button,.studio-notice-actions #studio-continue-button { flex:1; width:0; margin:0; }
@media (max-height:620px) { .studio-welcome-copy { margin-top:32px; } }

/* Activity is a timer state; reflection begins only after Finish. */
#studio-capture.studio-activity-running .studio-prompt-card,
#studio-capture.studio-activity-running #studio-capture-detail,
#studio-capture.studio-activity-running .studio-recorder,
#studio-capture.studio-activity-running #studio-activity-recordings { display:none; }
#studio-capture.studio-activity-running .studio-recording-clock { flex:1; margin:0; min-height:180px; }
#studio-capture.studio-activity-running #studio-after-button { margin-top:24px; }

/* Mobile ListenViz: separated before/after envelopes merge over 2.8s.
   Animation never determines completion; status polling owns the transition. */
.studio-analysis-waves { position:relative; width:100%; height:200px; flex:none; margin:28px 0; border-radius:28px; background:#0c0c0e; }
.studio-analysis-wave { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px; }
.studio-analysis-wave span { width:4px; flex:0 0 4px; border-radius:2px; }
.studio-analysis-wave-before { color:rgba(242,242,240,.45); transform:translateY(-30px); }
.studio-analysis-wave-after { color:var(--activity); transform:translateY(30px); }
.studio-analysis-wave span { background:currentColor; }
#studio-waiting:not([hidden]) .studio-analysis-wave-before { animation:studio-merge-before 2.8s cubic-bezier(.65,0,.35,1) forwards; }
#studio-waiting:not([hidden]) .studio-analysis-wave-after { animation:studio-merge-after 2.8s cubic-bezier(.65,0,.35,1) forwards,studio-wave-breathe 2s 2.8s ease-in-out infinite alternate; }
.studio-analysis-before-label,.studio-analysis-after-label { position:absolute; font-size:12px; color:var(--muted); }
.studio-analysis-before-label { top:14px; left:16px; }
.studio-analysis-after-label { right:16px; bottom:14px; }
#studio-waiting .studio-analysis-progress-meta { display:none; }
@keyframes studio-merge-before { to { transform:translateY(0); opacity:.5; } }
@keyframes studio-merge-after { to { transform:translateY(0); } }
@keyframes studio-wave-breathe { to { opacity:.65; } }
@media(prefers-reduced-motion:reduce) { .studio-analysis-wave-before,.studio-analysis-wave-after { transform:none; } }

/* Canonical mobile ListenViz composition: waveform, title, one explanation. */
#studio-waiting { justify-content:center; align-items:center; gap:14px; padding:18px 0 8px; }
#studio-waiting .studio-analysis-waves { margin:0; height:200px; border-radius:28px; }
#studio-waiting #studio-waiting-heading { margin:0; font:400 20px/1.3 var(--sans); text-align:center; letter-spacing:0; }
#studio-waiting #studio-waiting-detail { margin:0; max-width:280px; font:400 13px/1.4 var(--sans); text-align:center; color:rgba(255,255,255,.9); }
#studio-waiting #studio-analysis-progress { display:none; }
#studio-waiting .studio-analysis-wave { animation:none !important; top:calc(50% - 26px); bottom:auto; height:52px; }
#studio-waiting .studio-analysis-before-label { font-size:11px; color:rgba(242,242,240,.72); }
#studio-waiting .studio-analysis-after-label { font-size:11px; font-weight:600; color:#f2f2f0; }

.studio-legal-link, .studio-legal-link:visited { color: #fff; text-underline-offset: 4px; }

.studio-choice button[aria-pressed="true"], .studio-choice button:active { background:#fff; color:#111; }

/* Route-scoped demo view toggle. Copy and result layout stay shared. */
.studio-demo-toggle { display: flex; gap: 4px; background: rgba(0,0,0,.28); border-radius: 999px; padding: 4px; margin: 18px 0 22px; width: fit-content; max-width: 100%; }
.studio-demo-toggle button { appearance: none; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.8); padding: 10px 14px; min-height: 44px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.studio-demo-toggle button[aria-pressed="true"] { background: #fff; color: #111; }
.studio-demo-toggle button:disabled { opacity: .4; cursor: default; }
.studio-demo-toggle button:focus-visible { outline: 2px solid white; outline-offset: 3px; }

.studio-return-website { display: block; margin-top: 32px; padding: 14px 20px; min-height: 50px; border-radius: 999px; background: #fff; color: #2a0f22; text-align: center; text-decoration: none; font: 500 15px/1.4 var(--sans); }
.studio-return-website:hover { background: #f2f2f0; }