/* VOXLINE — stage: Present Mode + landing preview share this file.
 * Every size is relative to the stage container (cqw/cqh), so the preview is a true miniature of Present Mode.
 */

.view-present { position: fixed; inset: 0; z-index: 10; background: var(--ink); }
.stage {
  position: absolute; inset: 0; overflow: hidden; background: var(--ink); color: var(--paper);
  container-type: size; container-name: stage;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.stage.is-idle { cursor: none; }

/* top bar: status · chapter · time */
.stage-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw;
  padding: 2.6cqh 3.2cqw 0; font: 500 max(10px, 1cqw)/1.2 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute);
}
.stage--preview .stage-top { font-size: 1.15cqw; }
.status { display: flex; align-items: center; gap: .9em; min-width: 0; white-space: nowrap; }
.sl { position: relative; flex: none; width: 3.4em; height: 2px; }
.sl i { position: absolute; inset: 0; background: var(--rule-2); transform-origin: left center; }
.st-label { color: var(--paper); }
.st-sub { color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.status[data-state="listening"] .sl i, .status[data-state="demo"] .sl i, .status[data-state="text"] .sl i { background: var(--signal); }
.status[data-state="paused"] .sl i { background: repeating-linear-gradient(90deg, var(--mute) 0 .5em, transparent .5em .8em); }
.status[data-state="reconnecting"] .sl i, .status[data-state="starting"] .sl i { background: linear-gradient(90deg, var(--paper-dim) 0 40%, transparent 40% 55%, var(--paper-dim) 55%); }
.status[data-state="offline"] .sl i, .status[data-state="nomic"] .sl i, .status[data-state="denied"] .sl i, .status[data-state="error"] .sl i { background: linear-gradient(90deg, var(--alert) 0 40%, transparent 40% 55%, var(--alert) 55%); }
.status[data-state="offline"] .st-label, .status[data-state="nomic"] .st-label, .status[data-state="denied"] .st-label, .status[data-state="error"] .st-label { color: var(--alert); }
.stage-chapter { text-align: center; color: var(--mute); max-width: 40cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-chapter b { color: var(--signal); font-weight: 500; margin-right: .8em; }
.stage-time { text-align: right; color: var(--paper-dim); font-variant-numeric: tabular-nums; }

/* field: primary layer (lead + previous) and the memory rail */
.field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 21cqw; gap: 3.4cqw; padding: 4cqh 3.2cqw 3.6cqh; min-height: 0; }
.primary-layer { position: relative; min-height: 0; }
.rail { list-style: none; margin: 0; padding: 0 0 0 1.8cqw; border-left: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: flex-end; gap: 3.2cqh; min-height: 0; overflow: hidden; }
.stage[data-captions="off"] .captions { display: none; }

/* captions: a dedicated stable band; newest words always visible, older lines clip upward */
.captions {
  position: relative; border-top: 1px solid var(--rule);
  padding: 1.7cqh 3.2cqw 3.4cqh; height: calc(2 * 1.24 * var(--cap-size) + 5.1cqh);
  --cap-size: clamp(18px, 2.75cqw, 64px);
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.stage--preview .captions { --cap-size: 2.75cqw; }
.cap-text { font: 500 var(--cap-size)/1.24 var(--f-text); letter-spacing: .003em; max-width: 92cqw; overflow-wrap: anywhere; }
.cap-final { color: var(--paper); }
.cap-interim { color: var(--mute); }
.cap-caret { display: inline-block; width: max(2px, .1em); height: .95em; margin-left: .12em; vertical-align: -.12em; background: var(--signal); opacity: 0; }
.stage.is-speaking .cap-caret { opacity: 1; }

/* ---------- stage elements ---------- */
.el { position: absolute; left: 0; bottom: 0; width: 100%; transform-origin: 0 0; transition: transform 520ms var(--ease), opacity 520ms var(--ease); }
.el.is-second { opacity: .9; }
.el.is-second, .el.is-second * { color: var(--mute) !important; transition: color 520ms var(--ease); }
.el.is-second .u-mark { background-image: linear-gradient(var(--rule-2), var(--rule-2)); }
.el.is-second .b-wrap > i, .el.is-second .s-line { background: var(--rule-2); }
.el.is-second .kick { opacity: 0; }
.el .kick { display: block; margin-bottom: .9em; font: 500 max(10px, .95cqw)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }

/* GIANT */
.g-text { font-family: var(--f-display); font-weight: 860; font-stretch: 66%; text-transform: uppercase; line-height: .86; letter-spacing: -.012em; color: var(--paper); text-wrap: balance; }
.g-text .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .03em 0 .05em; margin-bottom: -.05em; }
.g-text .w > span { display: inline-block; }
.g-text .em, .u-text .em { color: var(--signal); }

/* UNDERLINE */
.u-text { font-family: var(--f-display); font-weight: 720; font-stretch: 90%; line-height: 1.06; letter-spacing: -.016em; text-wrap: balance; }
.u-mark { background-image: linear-gradient(var(--signal), var(--signal)); background-repeat: no-repeat; background-position: 0 96%; background-size: 100% .075em; padding-bottom: .07em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.u-text .u-mark.em { color: var(--paper); }

/* BOX */
.b-wrap { position: relative; display: inline-block; padding: .5em .62em .55em; max-width: 100%; }
.b-text { font-family: var(--f-display); font-weight: 720; font-stretch: 92%; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
.b-wrap > i { position: absolute; background: var(--signal); }
.b-wrap .bt, .b-wrap .bb { left: 0; right: 0; height: max(2px, .055em); transform-origin: left center; }
.b-wrap .bl, .b-wrap .br { top: 0; bottom: 0; width: max(2px, .055em); transform-origin: center top; }
.b-wrap .bt { top: 0; } .b-wrap .bb { bottom: 0; transform-origin: right center; }
.b-wrap .bl { left: 0; transform-origin: center bottom; } .b-wrap .br { right: 0; }

/* QUOTE */
.q-wrap { position: relative; padding-left: .8em; }
.q-mark { position: absolute; left: -.08em; top: -.18em; font: 900 2.1em/1 var(--f-display); font-stretch: 62%; color: var(--signal); }
.q-text { margin: 0; font-family: var(--f-display); font-weight: 520; font-stretch: 86%; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }

/* NUMBER */
.n-clip { display: block; overflow: hidden; padding-top: .05em; }
.n-val { display: block; font-size: 5.4em; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; line-height: .8; letter-spacing: -.02em; color: var(--signal); font-variant-numeric: lining-nums; }
.n-label { display: block; margin-top: .55em; font: 650 1em/1.12 var(--f-display); font-stretch: 96%; color: var(--paper); max-width: 34ch; text-wrap: balance; }

/* SHIFT */
.s-line { display: block; height: max(3px, .4cqh); background: var(--signal); transform-origin: left center; margin: 0 0 .5em; width: 100%; }
.s-title { font-family: var(--f-display); font-weight: 820; font-stretch: 74%; text-transform: uppercase; line-height: .9; letter-spacing: -.008em; text-wrap: balance; }

/* rail items (TAG, LINK) */
.tag { position: relative; padding-top: 1.5cqh; transition: transform 380ms var(--ease), opacity 380ms var(--ease); }
.tag .t-rule { position: absolute; top: 0; left: 0; width: 3.2cqw; height: 2px; background: var(--signal); transform-origin: left center; }
.tag .t-idx { display: block; font: 400 max(9px, .85cqw)/1 var(--f-mono); letter-spacing: .08em; color: var(--mute); margin-bottom: .9cqh; }
.tag .t-txt { display: block; font: 740 max(13px, 1.75cqw)/1.04 var(--f-display); font-stretch: 108%; text-transform: uppercase; letter-spacing: .005em; color: var(--paper); overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag .t-txt.is-long { font-size: max(12px, 1.3cqw); }
/* LINK: a bracket joins the two concepts, pointing at the middle of each */
.l-pair { position: relative; padding-left: 1.5cqw; font: 740 max(13px, 1.75cqw)/1.04 var(--f-display); }
.l-pair .t-txt + .t-txt { margin-top: 1.2cqh; }
.l-bracket { position: absolute; left: 0; top: .52em; bottom: .52em; width: .8cqw; border: 2px solid var(--signal); border-right: 0; transform-origin: center top; }
.tag.is-touched .t-txt { color: var(--signal); transition: color 300ms; }

/* ---------- overlays ---------- */
.notice {
  position: absolute; left: 3.2cqw; top: 14cqh; z-index: 5; max-width: min(560px, 60cqw); padding: 26px 28px;
  background: var(--ink-2); border: 1px solid var(--rule); border-left: 3px solid var(--alert);
}
.notice h2 { font: 750 26px/1.15 var(--f-display); margin-bottom: 10px; }
.notice p { color: var(--paper-dim); font-size: 17px; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.type-bar { position: absolute; left: 3.2cqw; right: 3.2cqw; bottom: calc(2 * 1.24 * clamp(18px, 2.75cqw, 64px) + 7cqh); z-index: 4; display: flex; align-items: center; gap: 14px; }
.type-label { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.type-bar input { border: 0; border-bottom: 2px solid var(--signal); background: var(--ink-2); font-size: 20px; padding: 12px 14px; }
.type-bar input:focus { outline: none; box-shadow: none; background: var(--ink-3); }
.stage[data-captions="off"] .type-bar { bottom: 4cqh; }

.toast {
  position: absolute; top: 1.6cqh; left: 50%; transform: translate(-50%, -4px); z-index: 8; padding: 8px 14px; max-width: 46cqw; overflow: hidden; text-overflow: ellipsis;
  font: 500 13px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--signal);
  opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms var(--ease); white-space: nowrap;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.dock {
  position: absolute; right: 3.2cqw; top: 7cqh; z-index: 7; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 94cqw;
  background: var(--ink-2); border: 1px solid var(--rule); opacity: 0; visibility: hidden; transition: opacity 180ms, visibility 0s linear 180ms;
}
.dock.is-visible { opacity: 1; visibility: visible; transition: opacity 120ms, visibility 0s; }
.dock button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; background: none; border: 0; border-right: 1px solid var(--rule);
  font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-dim); cursor: pointer;
}
.dock button:hover, .dock button:focus-visible { color: var(--paper); background: var(--ink-3); }
.dock button:focus-visible { outline-offset: -2px; }
.dock kbd { font-size: 10px; padding: 0 .35em; min-width: 1.6em; color: var(--mute); }
.dock-int { display: inline-flex; border-right: 1px solid var(--rule); }
.dock-int button { border-right: 0; padding: 0 11px; }
.dock-int button[aria-pressed="true"] { color: var(--ink); background: var(--signal); }
.dock-finish { color: var(--paper) !important; }
.dock-finish.is-armed { background: var(--alert) !important; color: var(--ink) !important; }
.dock button:last-child { border-right: 0; }

.help { position: absolute; right: 3.2cqw; top: 14cqh; z-index: 7; width: min(420px, 50cqw); padding: 20px 22px 12px; background: var(--ink-2); border: 1px solid var(--rule); }
.help h2 { font: 500 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.keys--compact { grid-template-columns: 1fr; margin-top: 0; }
.keys--compact > div { grid-template-columns: 7em 1fr; padding: 9px 0; font-size: 15px; }

/* ---------- preview (landing) ---------- */
.stage--preview { pointer-events: none; }

/* ---------- narrow screens: Present Mode still works, rail becomes a row ---------- */
@container stage (max-aspect-ratio: 1/1) {
  .field { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 2cqh; }
  .rail { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; border-left: 0; border-top: 1px solid var(--rule); padding: 1.6cqh 0 0; gap: 4cqw; }
  .tag .t-txt { font-size: max(13px, 3.6cqw); }
  .tag .t-rule { width: 8cqw; }
  .captions { --cap-size: clamp(17px, 4.6cqw, 28px); }
  .stage-top { grid-template-columns: 1fr auto; }
  .stage-chapter { display: none; }
  .dock { top: 6cqh; left: 3cqw; right: 3cqw; justify-content: flex-start; }
}

/* small landscape frames (landing preview on a phone): drop the rail, keep captions readable */
@container stage (max-width: 520px) and (min-aspect-ratio: 1/1) {
  .field { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .captions { --cap-size: 3.4cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .el, .tag { transition-duration: 1ms; }
}