/* Animated screens (screens.js). Default state is the finished result; the
   .is-playing class hides parts until the timeline reveals them. */
.hp-screen { overflow: hidden; background: var(--night); color: var(--on-night); border: 1px solid var(--night);  font-size: 0.95rem; }
.scr-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0f2a3a; border-block-end: 1px solid var(--line-night); }
.scr-dots { display: inline-flex; gap: 6px; }
.scr-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 239, 231, 0.22); }
.scr-title { color: var(--on-night-soft); font-size: 0.85rem; }
.scr-tag { margin-inline-start: auto; padding: 2px 8px; border: 1px solid var(--line-night); color: var(--on-night-soft); font-size: 0.72rem; }
.scr-body { display: grid; gap: 14px; padding: 18px; min-height: 340px; align-content: start; }

.scr-me { justify-self: end; max-width: 88%; display: grid; gap: 8px; }
.scr-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.scr-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(243, 239, 231, 0.08); border: 1px solid var(--line-night); font-size: 0.8rem; color: var(--on-night-soft); }
.scr-file::before { content: ""; width: 9px; height: 11px; border: 1px solid var(--gold-lum); border-start-end-radius: 3px; }
.scr-request { margin: 0; padding: 10px 14px; background: var(--paper); color: var(--ink); line-height: 1.55; min-height: 1.55em; }
.hp-screen.is-playing:not(.is-done) .scr-request::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; background: var(--ink); vertical-align: -0.12em; animation: scr-caret 0.8s steps(1) infinite; }
@keyframes scr-caret { 50% { opacity: 0; } }

.scr-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.scr-steps li { display: flex; align-items: center; gap: 10px; color: var(--on-night-soft); font-size: 0.88rem; }
.scr-steps li::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--gold-lum); border-radius: 50%; background: radial-gradient(circle, var(--gold-lum) 0 3px, transparent 3.5px); }

.scr-out { padding: 14px 16px; background: #10303f; border: 1px solid var(--line-night); }
.scr-out-title { margin: 0 0 10px; color: var(--gold-lum); font-size: 0.85rem; font-weight: 500; }
.scr-out ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.scr-out li { display: grid; grid-template-columns: minmax(110px, auto) 1fr; align-items: center; gap: 12px; }
.scr-out b { font-weight: 500; font-size: 0.9rem; }
.scr-line { display: block; height: 7px; background: rgba(243, 239, 231, 0.22); transform-origin: left center; }
html[dir="rtl"] .scr-line { background: rgba(243, 239, 231, 0.22); transform-origin: right center; }
.scr-out li:nth-child(2) .scr-line { width: 82%; }
.scr-out li:nth-child(3) .scr-line { width: 64%; }
.scr-out li:nth-child(4) .scr-line { width: 74%; }

/* Timeline states */
.hp-screen.is-playing .scr-file,
.hp-screen.is-playing .scr-steps li,
.hp-screen.is-playing .scr-out,
.hp-screen.is-playing .scr-out li { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.hp-screen.is-playing .is-on { opacity: 1 !important; transform: none !important; }
.hp-screen.is-playing .scr-out li .scr-line { transform: scaleX(0); transition: transform 0.7s var(--ease-out) 0.1s; }
.hp-screen.is-playing .scr-out li.is-on .scr-line { transform: scaleX(1); }
.hp-screen.is-playing .scr-steps li.is-on::before { animation: scr-pulse 0.6s var(--ease-out); }
@keyframes scr-pulse { from { box-shadow: 0 0 0 0 rgba(214, 184, 120, 0.6); } to { box-shadow: 0 0 0 8px rgba(214, 184, 120, 0); } }

@media (max-width: 600px) {
  .scr-body { min-height: 0; padding: 14px; }
  .scr-out li { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-screen * { animation: none !important; transition: none !important; }
}

/* Sequences (screens.js): parts light up in order; the current one carries a gold signal. */
.seq-armed [data-seq-i] { opacity: 1; transform: translateY(4px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out), color 0.4s; }
.seq-armed [data-seq-i].is-on { opacity: 1; transform: none; }
.deliverable-document.seq-armed .is-current { box-shadow: 0 0 0 1px var(--gold); }
.approach-step-grid.seq-armed > .is-current,
.governance-graphic.seq-armed > .is-current { outline: 1px solid var(--gold); outline-offset: -1px; }
.approach-step-grid.seq-armed > .is-current > span,
.governance-graphic.seq-armed > .is-current > span { color: var(--gold-text); }
.governance-graphic.seq-done > article { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .seq-armed [data-seq-i] { opacity: 1 !important; transform: none !important; transition: none !important; } }
html.a11y-reduced-motion .seq-armed [data-seq-i] { opacity: 1 !important; transform: none !important; }

.screen-motion-toggle { min-height: 44px; margin-block: 12px; padding: 8px 16px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.screen-motion-toggle[hidden] { display: none; }
.screen-motion-toggle:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
html.a11y-reduced-motion .hp-screen *, html.a11y-reduced-motion [data-seq-i] { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .hp-screen .scr-file, .hp-screen .scr-steps li, .hp-screen .scr-out, .hp-screen .scr-out li { opacity: 1 !important; transform: none !important; } }

/* Reuse the use-case page overflow fix for the same drifting photo frames. Clip does not create a sticky scroll container. */
main#main { overflow-x: clip; }