/* Narrated mode: the guided screen plus a caption dock, response choices, and a transport bar. */

.nr { position: relative; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.nr .gd-stage { grid-row: 2; }

.nr-dock { grid-row: 3; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; justify-items: center; gap: 6px 12px; min-height: 104px; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.nr-cap { grid-column: 2; max-width: 760px; min-height: 2.7em; margin: 0; font-size: clamp(17px, 2.1vw, 22px); font-weight: 500; line-height: 1.35; letter-spacing: -.015em; text-align: center; cursor: pointer; }
.nr-cap b { color: var(--green-deep); }
.nr-speaker { display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 99px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: 3px; }
.nr-cap[data-speaker="interviewer"] { font-style: italic; }
.nr-cap[data-speaker="interviewer"] .nr-speaker { font-style: normal; }
.nr-cap.nr-cap-in { animation: nrCapIn .4s cubic-bezier(.2, .8, .3, 1); }
.nr-dock.paused .nr-cap { opacity: .55; }

.nr-voice { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 3px; height: 22px; }
.nr-voice i { width: 4px; height: 5px; border-radius: 99px; background: var(--line-strong); transition: background .2s; }
.nr-dock.speaking .nr-voice i { background: var(--green); animation: nrBar .9s ease-in-out infinite; }
.nr-dock.speaking .nr-voice i:nth-child(2) { animation-delay: -.3s; }
.nr-dock.speaking .nr-voice i:nth-child(3) { animation-delay: -.6s; }
.nr-dock.speaking .nr-voice i:nth-child(4) { animation-delay: -.15s; }

.nr-turn { grid-column: 2; padding: 3px 12px; border-radius: 99px; color: var(--green-deep); background: var(--lime); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.nr-turn.nr-turn-in { animation: nrPop .35s cubic-bezier(.2, .8, .3, 1.4); }

.nr-choices { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nr-choices[hidden] { display: none; }
.nr-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 10px; border: 1.5px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--surface); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; animation: nrChoiceIn .4s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i) * 90ms); transition: transform .15s, border-color .15s, opacity .25s; }
.nr-choice kbd { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-family: var(--mono); font-size: 12px; }
.nr-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--green); }
.nr-choice:disabled:not(.picked) { opacity: .35; }
.nr-choice.picked { border-color: var(--green); background: var(--lime); }
.nr-choice.picked kbd { color: #fff; background: var(--green); }

.nr-transport { grid-row: 4; display: flex; align-items: center; gap: 8px; min-height: 60px; border-top: 1px solid var(--line); }
.nr-btn { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--surface); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nr-btn:hover:not(:disabled) { border-color: var(--green); }
.nr-btn:disabled { opacity: .35; cursor: default; }
.nr-play { min-width: 48px; color: #fff; border-color: var(--green); background: var(--green); }
.nr-chapter { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nr-speed { font-family: var(--mono); font-size: 12px; }

.nr-nudge { outline: 3px solid var(--green); outline-offset: 2px; animation: nrNudge 1.1s ease-in-out infinite; }

.nr-start { position: absolute; inset: 61px 0 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); transition: opacity .35s; }
.nr-start.gone { opacity: 0; pointer-events: none; }
.nr-start-card { display: grid; justify-items: center; gap: 12px; max-width: 460px; text-align: center; }
.nr-start-card h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; line-height: 1.05; }
.nr-start-card p { margin: 0 0 8px; color: var(--muted); }
.nr-start-eyebrow { color: var(--green-deep); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

@keyframes nrCapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nrPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nrChoiceIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nrBar { 0%, 100% { height: 5px; } 50% { height: 20px; } }
@keyframes nrNudge { 0%, 100% { outline-color: var(--green); } 50% { outline-color: transparent; } }

@media (max-width: 760px) {
  .nr-dock { grid-template-columns: 24px minmax(0, 1fr) 0; min-height: 92px; }
  .nr-cap { font-size: 16px; }
  .nr-choice { width: 100%; font-size: 14px; }
  .nr-replay { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nr-dock.speaking .nr-voice i, .nr-nudge { animation: none; }
  .nr-dock.speaking .nr-voice i { height: 12px; }
}

.nr-quiz { gap: 18px; }
.nr-marks { display: flex; gap: 12px; }
.nr-marks i { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line-strong); border-radius: 99px; color: #fff; font-style: normal; font-weight: 800; transition: border-color .2s, background .2s; }
.nr-marks i.current { border-color: var(--ink); }
.nr-marks i.ok { border-color: var(--green); background: var(--green); }
.nr-marks i.bad { border-color: var(--coral); background: var(--coral); }

@media (max-width: 760px) {
  .nr-transport { gap: 4px; }
  .nr-btn { min-width: 32px; padding: 0 6px; font-size: 13px; }
}