/* The app owns layout and tokens. These are documentation-only annotations. */
.app-docs-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--line); background: var(--blue-soft); color: var(--ink); font-size: var(--text-sm); line-height: 1.6; }
.app-docs-banner p { margin: 0; }
.app-docs-banner > div { flex: 1 1 36rem; }
.app-docs-banner nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.app-docs-banner strong { color: var(--blue-dark); }
.app-guide-button { padding: var(--space-3) var(--space-5) 0; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.demo-prefill-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--line); background:var(--blue-soft); font-size:var(--text-sm); line-height:1.6; }
.demo-prefill-bar span { flex:1 1 18rem; }
.demo-input-example { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--line); background:var(--panel); min-width:0; }
.demo-input-label { font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere; }
.demo-input-example small { color:var(--muted); line-height:1.6; }
.demo-input-preview { max-width:100%; }
.demo-input-preview img,.demo-input-preview video { display:block; width:100%; max-width:240px; max-height:180px; object-fit:contain; }
.demo-input-preview audio { max-width:100%; }
.demo-description { display:flex; flex-direction:column; gap:var(--space-2); }
.app-guide-models { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.7; }
.app-guide-models th, .app-guide-models td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.app-guide-models td:nth-child(2) { word-break: break-word; }
.app-guide-models small { display: block; color: var(--muted); }
.app-feature-guide .workflow-actions a { overflow-wrap: anywhere; }
@media(max-width:767px) {
  .app-docs-banner { padding: var(--space-2) var(--space-3); }
  .app-guide-models, .app-guide-models tbody, .app-guide-models tr, .app-guide-models td { display: block; }
  .app-guide-models thead { display: none; }
  .app-guide-models td { border: 0; padding: var(--space-1) 0; }
  .app-guide-models tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .app-guide-models td:first-child { font-weight: 700; }
}

.docs-character-workspace {display: grid; gap: 16px; min-width: 0;}
.docs-character-header {display: flex; gap: 24px; padding: 24px; align-items: start;}
.docs-character-header > div {min-width: 0; overflow-wrap: anywhere;}
.docs-character-reference {width: 120px; aspect-ratio: 4 / 5; object-fit: contain; background: var(--bg); border-radius: var(--catalogue-radius);}
.docs-character-description {white-space: pre-wrap;}
.docs-character-examples {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;}
.docs-character-example {padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px;}
.docs-character-example > img,.docs-character-example > video {width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--bg);}
.docs-character-example > a {align-self: start; margin-top: auto;}
@media (max-width: 767px) {.docs-character-header {flex-direction: column; padding: 16px; gap: 16px;} .docs-character-examples {grid-template-columns: minmax(0,1fr);}}

.docs-character-header > div {display: grid; gap: 12px;}
.docs-character-header h1,.docs-character-header p,.docs-character-workspace > h2,.docs-character-workspace > p,.docs-character-example h3,.docs-character-example p {margin: 0;}

.demo-voice-selection {grid-column: 1 / -1; min-width: 0;}
.demo-voice-selection audio {width: 100%; max-width: 100%;}
.demo-voice-selection p {margin: 0; overflow-wrap: anywhere;}