/* Voice Design keeps one writing surface and a small example shortcut.
   The library remains below the composer so the page has one clear path. */
.screen-voice-design .voice-design-page { max-width: 1080px; padding-top: clamp(var(--space-6), 4vw, var(--space-10)); padding-bottom: var(--space-16); }
.screen-voice-design h1 { margin-bottom: var(--space-1); }
.screen-voice-design .voice-design-page > .sub { margin: 0 0 var(--space-6); max-width: 68ch; color: var(--tx-muted); }
.voice-design-section-head,
.voice-design-list-title,
.voice-design-actions,
.voice-design-list-actions,
.voice-design-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.voice-design-alert { margin: 0 0 var(--space-5); }
.voice-design-alert.is-danger { color: var(--danger); }
.voice-design-alert.is-success { color: var(--seal); }
.voice-design-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 272px); gap: var(--space-8); align-items: start; }
.voice-design-composer { padding: var(--space-6); background: var(--surface); }
.voice-design-section-head { align-items: flex-start; margin-bottom: var(--space-5); }
.voice-design-section-head h1, .voice-design-section-head h2 { margin: 0; }
.voice-design-version { color: var(--tx-muted); font: var(--text-xs) var(--font-mono); }
.voice-design-prompt-field textarea { min-height: 160px; resize: vertical; }
.voice-design-field-footer { align-items: flex-start; margin-top: var(--space-2); }
.voice-design-counter { color: var(--tx-muted); font: var(--text-xs) var(--font-mono); white-space: nowrap; }
.voice-design-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.voice-design-fields-grid .field { margin-bottom: 0; }
.voice-design-advanced { margin-top: var(--space-5); border-top: var(--border-width) solid var(--line); }
.voice-design-advanced summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 52px; padding: var(--space-2) 0; color: var(--tx); cursor: pointer;
  list-style: none; touch-action: manipulation;
}
.voice-design-advanced summary::-webkit-details-marker { display: none; }
.voice-design-advanced summary:hover { color: var(--signal-text); }
.voice-design-advanced-copy { display: grid; gap: 2px; }
.voice-design-advanced-copy strong { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.voice-design-advanced-copy span { color: var(--tx-muted); font-size: var(--text-xs); }
.voice-design-advanced-indicator {
  position: relative; flex: none; width: 16px; height: 16px; color: var(--tx-muted);
}
.voice-design-advanced-indicator::before,
.voice-design-advanced-indicator::after {
  content: ""; position: absolute; top: 7px; left: 2px; width: 12px; height: 1px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.voice-design-advanced-indicator::after { transform: rotate(90deg); }
.voice-design-advanced[open] .voice-design-advanced-indicator::after { transform: rotate(0); }
.voice-design-advanced-body { padding: var(--space-2) 0 var(--space-1); }
.voice-design-field-wide { grid-column: 1 / -1; }
.voice-design-actions { justify-content: flex-start; margin-top: var(--space-6); flex-wrap: wrap; }
.voice-design-actions .btn:disabled { opacity: .55; cursor: not-allowed; }
.voice-design-generation-note { max-width: 680px; margin: var(--space-3) 0 0; }
.voice-design-aside { display: grid; gap: var(--space-5); }
.voice-design-card { padding: var(--space-5); }
.voice-design-card h2 { margin: 0 0 var(--space-3); }
.voice-design-card p:last-child { margin-bottom: 0; }
.voice-design-examples { display: grid; gap: var(--space-2); }
.voice-design-example { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 44px; text-align: left; padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-input); background: transparent; color: var(--tx); cursor: pointer; touch-action: manipulation; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.voice-design-example::after { content: "→"; color: var(--tx-faint); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.voice-design-example:hover, .voice-design-example:focus-visible { border-color: var(--signal-solid-edge); background: var(--surface-raised); }
.voice-design-example:hover::after, .voice-design-example:focus-visible::after { color: var(--signal-text); transform: translateX(2px); }
.voice-design-library { margin-top: var(--space-8); }
.voice-design-list { display: grid; gap: var(--space-3); }
.voice-design-list-item { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-5); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.voice-design-list-item:hover { border-color: var(--line-control); background: var(--surface-raised); transform: translateY(-1px); }
.voice-design-list-main { min-width: 0; }
.voice-design-list-title { justify-content: flex-start; margin-bottom: var(--space-2); }
.voice-design-list-title h3 { margin: 0; overflow-wrap: anywhere; }
.voice-design-list-main p { margin: 0 0 var(--space-3); color: var(--tx-muted); overflow-wrap: anywhere; }
.voice-design-candidates { display: grid; gap: var(--space-2); margin-top: var(--space-4); max-width: 560px; }
.voice-design-candidate { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--border-width) solid var(--line); border-radius: var(--radius-input); background: var(--surface-raised); }
.voice-design-candidate > div:first-child { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }
.voice-design-candidate audio { width: 100%; height: 34px; }
.voice-design-candidate-actions { display: flex; justify-content: flex-end; }
.voice-design-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.voice-design-tags span { padding: 3px 8px; border-radius: var(--radius-tag); background: var(--surface-raised); color: var(--tx-muted); font-size: var(--text-xs); }
.voice-design-list-actions { flex-direction: column; align-items: flex-end; justify-content: space-between; flex: none; }
.voice-design-list-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.voice-design-list-buttons .btn { white-space: nowrap; }
.voice-design-list-buttons .btn--danger { border-color: var(--danger); color: var(--danger); }
.voice-design-list-buttons .btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.voice-design-list-meta { color: var(--tx-muted); font-size: var(--text-xs); white-space: nowrap; }
.voice-design-empty { margin-top: var(--space-3); }
.voice-design-list-skeleton { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.voice-design-list-skeleton span { display: block; height: 14px; border-radius: var(--radius-tag); background: linear-gradient(90deg, var(--surface-sunken), var(--surface-raised), var(--surface-sunken)); background-size: 220% 100%; animation: voice-design-skeleton-shimmer 1.2s ease-in-out infinite; }
.voice-design-list-skeleton span:nth-child(2) { width: 70%; }
.voice-design-list-skeleton span:nth-child(3) { width: 42%; }
@keyframes voice-design-skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Public product page keeps the same restrained brief-card language as the
   authenticated composer. Studio intentionally stays focused on narration;
   Voice Design is reached from its dedicated rail item. */
/* Matches .screen-landing .proof-kicker (screens.css) - the plain
   .eyebrow base rule (tokens.css) renders in the muted UI-label color,
   not brand green. Scoped to the product sections specifically (not
   .screen-voice-design-landing generally), so the shared site footer's
   own .eyebrow column headings - also present on this page - keep the
   same muted color they have everywhere else. */
.voice-design-product-hero .eyebrow,
.voice-design-product-section-head .eyebrow,
.voice-design-product-policy .eyebrow { color: var(--signal-text); }
.voice-design-product-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem); }
.voice-design-product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  align-items: center;
  gap: clamp(var(--space-7), 8vw, 10rem);
}
.voice-design-product-copy h1 { max-width: 700px; margin: 0 0 var(--space-4); font-size: var(--fluid-3xl); line-height: .98; letter-spacing: var(--tracking-display); }
.voice-design-product-lede { max-width: 650px; margin: 0; color: var(--tx-muted); font-size: var(--text-lg); line-height: 1.65; }
.voice-design-product-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.voice-design-product-disclosure { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0; color: var(--tx-muted); font-size: var(--text-sm); }
.voice-design-product-card { padding: clamp(var(--space-5), 5vw, var(--space-8)); border: var(--border-width) solid var(--line); border-radius: var(--radius-card); background: linear-gradient(145deg, var(--surface), var(--surface-raised)); box-shadow: var(--shadow-card); transform: rotate(1.2deg); }
.voice-design-product-card-top, .voice-design-product-card-foot { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--tx-muted); font: var(--text-xs) var(--font-mono); letter-spacing: var(--tracking-label-sm); text-transform: uppercase; }
.voice-design-product-status { color: var(--signal-solid); }
.voice-design-product-waveform { display: block; width: 100%; height: 32px; margin-top: var(--space-6); }
.voice-design-product-waveform rect { fill: var(--signal-solid); }
.voice-design-product-prompt { margin: var(--space-5) 0 clamp(var(--space-6), 8vw, var(--space-10)); font-size: var(--fluid-md); line-height: 1.45; letter-spacing: var(--tracking-heading); }
.voice-design-product-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-7); }
.voice-design-product-tags span { padding: 4px 10px; border: var(--border-width) solid var(--line); border-radius: var(--radius-tag); color: var(--tx-muted); font-size: var(--text-xs); }
.voice-design-product-card-foot { padding-top: var(--space-4); border-top: var(--border-width) solid var(--line); text-transform: none; letter-spacing: 0; }
.voice-design-product-section { padding: clamp(4rem, 8vw, 7rem) 0; border-top: var(--border-width) solid var(--line); }
.voice-design-product-section-head { max-width: 700px; }
.voice-design-product-section-head h2, .voice-design-product-policy h2 { margin: 0 0 var(--space-3); font-size: var(--fluid-xl); letter-spacing: var(--tracking-display); }
.voice-design-product-section-head p:last-child { margin: 0; color: var(--tx-muted); line-height: 1.65; }
.voice-design-product-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding: 0; margin: var(--space-8) 0 0; list-style: none; }
.voice-design-product-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding-top: var(--space-4); border-top: 2px solid var(--signal-solid); }
.voice-design-product-steps li > span { color: var(--signal-solid); font: var(--text-sm) var(--font-mono); }
.voice-design-product-steps h3 { margin: 0 0 var(--space-2); }
.voice-design-product-steps p { margin: 0; color: var(--tx-muted); line-height: 1.6; }
.voice-design-product-policy { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--surface-raised); }
.voice-design-product-policy-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.voice-design-product-policy-grid > p { margin: 0; color: var(--tx-muted); line-height: 1.7; }
.voice-design-product-close { padding: clamp(4rem, 8vw, 7rem) 0; border-top: var(--border-width) solid var(--line); text-align: center; }
.voice-design-product-close-inner { display: grid; justify-items: center; gap: var(--space-6); max-width: 560px; margin: 0 auto; }
.voice-design-product-close h2 { margin: 0; font-size: var(--fluid-xl); letter-spacing: var(--tracking-display); }
@media (max-width: 820px) {
  .voice-design-product-hero-grid, .voice-design-product-policy-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .voice-design-product-card { max-width: 620px; transform: none; }
  .voice-design-product-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .voice-design-product-hero { padding-top: 3.5rem; }
  .voice-design-product-copy h1 { font-size: clamp(2.7rem, 14vw, 4.5rem); }
}
@media (max-width: 800px) {
  .voice-design-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .voice-design-composer, .voice-design-card, .voice-design-list-item { padding: var(--space-4); }
  .voice-design-fields-grid { grid-template-columns: 1fr; }
  .voice-design-field-wide { grid-column: auto; }
  .voice-design-list-item { flex-direction: column; }
  .voice-design-list-actions { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .voice-design-list-buttons { justify-content: flex-start; }
  .voice-design-list-meta { white-space: normal; }
}