/* Scoped additions to the existing Sten dossier. */
[hidden] { display: none !important; }
.dossier-header { gap: clamp(.7rem, 1.6vw, 2rem); }
.dossier-header nav { margin-left: auto; gap: clamp(.8rem, 1.6vw, 2rem); }
.dossier { height: auto; min-height: calc(100svh - var(--header-h)); }
.viewer { grid-template-rows: minmax(0, 1fr) auto auto auto; }
.viewer__stage { height: clamp(400px, calc(100svh - 320px), 1000px); align-self: stretch; }
#sten-frame { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; filter: none; }
.viewer__notice { position: absolute; z-index: 30; left: 50%; top: 1rem; transform: translateX(-50%); width: min(90%, 24rem); padding: .8rem 1rem; background: #121019; border: 1px solid var(--line); font-size: .8rem; text-align: center; }
.viewer__notice button { min-height: 44px; margin-left: .5rem; color: var(--gold-bright); background: transparent; border: 0; text-decoration: underline; cursor: pointer; }
.angle-track { margin-bottom: .15rem; min-height: 36px; }
.angle-track button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; }
.angle-track button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border: 1px solid #827787; border-radius: 50%; background: var(--ink); }
.angle-track button:hover, .angle-track button:focus-visible, .angle-track button[aria-current=true] { background: transparent; transform: none; }
.angle-track button[aria-current=true]::after, .angle-track button:hover::after { background: var(--gold-bright); border-color: var(--gold-bright); }
.angle-track button:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: -3px; }

.sound-panel { position: relative; z-index: 20; width: min(100% - 2rem, 480px); margin: 0 auto .9rem; padding-top: .75rem; border-top: 1px solid var(--line); user-select: text; }
.sound-panel__actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: .65rem; }
.sound-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .65rem .75rem; color: #c6becf; background: rgba(21, 18, 29, .80); border: 1px solid #4b415b; border-radius: 3px; font: 500 .72rem/1.2 var(--sans); cursor: pointer; white-space: nowrap; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.sound-button:hover { border-color: #b39acd; color: var(--paper); }
.sound-button[aria-pressed=true] { background: #24182f; border-color: #a78fc6; color: #eddbff; }
.sound-button--voice { color: var(--gold-bright); border-color: rgba(205,168,87,.5); }
.sound-button--voice[aria-pressed=true] { border-color: var(--gold-bright); color: var(--gold-bright); background: #211c15; }
.sound-button [data-voice-icon] { font-size: .60rem; }
.sound-button:disabled { opacity: .5; cursor: default; }
.header-embers { flex-shrink: 0; font-size: .66rem; min-height: 40px; background: transparent; padding-inline: .8rem; }
.ember-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #8e7aab; background: transparent; flex-shrink: 0; }
[aria-pressed=true] > .ember-dot { background: #c2a1ea; box-shadow: 0 0 10px #b393d984; }
.voice-timeline { display: flex; align-items: center; gap: .7rem; margin-top: .55rem; }
.voice-timeline progress { display: block; appearance: none; width: 100%; height: 3px; border: none; background: #27222f; color: var(--gold); accent-color: var(--gold); }
.voice-timeline progress::-webkit-progress-bar { background: #27222f; }
.voice-timeline progress::-webkit-progress-value { background: var(--gold); }
.voice-timeline progress::-moz-progress-bar { background: var(--gold); }
.voice-timeline span { flex-shrink: 0; font: 400 .62rem var(--sans); font-variant-numeric: tabular-nums; color: #aaa1b5; }
.sound-panel__settings { display: flex; align-items: center; gap: .45rem; min-height: 40px; color: #aaa1b5; font: 400 .65rem var(--sans); }
.sound-panel__settings input { width: clamp(55px, 7vw, 85px); min-width: 0; height: 32px; accent-color: #b49bce; cursor: pointer; }
.sound-panel__settings output { min-width: 3ch; font-variant-numeric: tabular-nums; }
.text-control { margin-left: auto; min-height: 40px; padding: .4rem 0 .4rem .6rem; background: transparent; border: 0; color: #cbb8df; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.sound-status { margin: 0; color: #c5b4d6; font-size: .68rem; line-height: 1.45; }
.sound-status:empty { display: none; }
.sound-button:focus-visible, .text-control:focus-visible, .dialog-close:focus-visible, #sten-volume:focus-visible, .viewer__notice button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.invocation-dialog { position: fixed; width: min(92vw, 540px); max-height: 88svh; padding: clamp(2rem, 6vw, 3.3rem); overflow-y: auto; border: 1px solid #725d88; border-top: 2px solid var(--gold); border-radius: 3px; color: var(--paper); background: radial-gradient(ellipse at top left, #2b1d3a, transparent 75%), #0a090f; box-shadow: 0 25px 100px #000a; }
.invocation-dialog::backdrop { background: #030308da; backdrop-filter: blur(8px); }
.invocation-dialog .eyebrow { margin: .5rem 0 1rem; font-size: .65rem; line-height: 1.5; }
.invocation-dialog h2 { margin: 0 0 1.6rem; font: 500 clamp(1.8rem, 5vw, 2.5rem)/1.1 var(--serif); }
.dialog-close { position: absolute; top: .3rem; right: .3rem; width: 44px; height: 44px; border: 0; background: transparent; color: #c7bbd0; font-size: 1.7rem; cursor: pointer; }
.invocation-verse { font: 400 clamp(.94rem, 2.4vw, 1.08rem)/1.9 var(--serif); color: #c5bfcc; }
.invocation-verse p { margin: 0 0 1.3rem; }
.invocation-verse .invocation-unitas { margin: 1.5rem 0 0; font-size: 1.7rem; letter-spacing: .12em; color: var(--gold-bright); }

@media (max-width: 1100px) {
  .dossier-header nav a:nth-child(2), .dossier-header nav a:nth-child(3) { display: none; }
}
@media (max-width: 740px) {
  .dossier-header { gap: .7rem; }
  .brand strong { font-size: .77rem; letter-spacing: .08em; }
  .dossier-header nav { margin-left: auto; }
  .dossier-header nav a:last-child { display: none; }
  .header-embers { padding-inline: .6rem; font-size: .62rem; }
  .viewer { min-height: 0; grid-template-rows: auto auto auto auto; }
  .viewer__stage { height: max(360px, min(145vw, calc(100svh - 340px))); }
  #sten-frame { width: 100%; height: 100%; max-width: 100%; }
  .viewer__gesture { font-size: .6rem; }
  .viewer__controls { gap: .5rem; }
  .sound-panel { width: calc(100% - 2rem); margin-bottom: 1.4rem; }
  .sound-panel__settings input { width: 70px; }
}
@media (max-width: 360px) {
  .brand { gap: .4rem; }
  .brand strong { font-size: .69rem; }
  .header-embers { font-size: .6rem; padding-inline: .45rem; }
  .sound-panel__settings { flex-wrap: wrap; }
  .sound-panel__settings input { width: 52px; }
  .text-control { padding-left: .25rem; }
}