/* The frame round the stage (engine/frame.js): the top bar, the prose band, panels, the contents panel and placeholders.
   Everything a chapter draws sits between the top bar (y 24 to 96) and the prose band (y 890 down): content stays inside
   y 112 to 880. Every opacity and width here is written per frame by frame.js through a limited value; nothing animates
   through CSS transitions. */

/* ------------------------------------------------------------------------------------------------- the top bar */
.nav {
  position: absolute; left: 300px; right: 44px; top: 24px; height: 72px;
  display: flex; align-items: flex-start; gap: 28px;
  font: 500 24px/1.2 var(--display); color: var(--text-soft);
}
.nav button { pointer-events: auto; cursor: pointer; border-radius: 0; }
.nav button:focus-visible, .prose-panel:focus-visible, .panel-close:focus-visible, .ct-close:focus-visible { outline: 2px solid var(--tai-void); outline-offset: 3px; }
.nav-contents {
  flex: none; margin-top: 4px; padding: 7px 14px;
  font: 600 24px/1.2 var(--body); color: var(--tai-void);
  background: var(--tai-black); border: 2px solid var(--panel-rule);
}
.nav-contents:hover { border-color: var(--text-soft); }
.nav-strip { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.nav-ch { position: relative; padding-bottom: 14px; }
.nav-cell {
  display: flex; align-items: baseline; padding: 9px 10px 5px;
  font: inherit; white-space: nowrap; background: none; border: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, var(--typed, 0));
}
.nav-n { color: color-mix(in srgb, var(--tai-void) calc(var(--o, 0) * 100%), var(--text-faint)); font-variant-numeric: tabular-nums; }
.nav-cell:hover .nav-n { color: var(--tai-void); }
.nav-name { display: inline-block; overflow: hidden; width: 0; opacity: 0; vertical-align: bottom; color: var(--tai-void); }
.nav-name > span { display: inline-block; white-space: nowrap; }
/* The position rail: one tick per advance in the current chapter. Passed ticks are soft, the current one white and twice as
   tall, the ones ahead lane-rule gray. */
.nav-rail { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 6px; display: flex; align-items: flex-end; gap: 3px; opacity: 0; }
.nav-tick {
  position: relative; flex: 1 1 0; height: 3px; pointer-events: auto; cursor: pointer;
  background: color-mix(in srgb, var(--tai-void) calc(var(--lit, 0) * 100%), color-mix(in srgb, var(--text-soft) calc(var(--done, 0) * 100%), var(--lane-rule)));
  transform: scaleY(calc(1 + var(--lit, 0))); transform-origin: bottom;
}
.nav-tick::before { content: ""; position: absolute; left: -1px; right: -2px; top: -14px; bottom: -6px; }
.nav-done { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; background: var(--text-soft); opacity: 0; }
.nav-step {
  flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 4px;
  font: 400 24px/1.2 var(--body); color: var(--text-soft); white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------- the prose band */
/* The reader's text for the advance, on a black ground across the foot of the stage. */
.prose { position: absolute; left: 70px; top: 912px; width: 1780px; height: 124px; isolation: isolate; }
.prose::before { content: ""; position: absolute; left: -70px; right: -70px; top: -22px; bottom: -44px; background: var(--tai-black); z-index: -1; }
.prose-line { display: flex; align-items: center; gap: 36px; height: 100%; }
.prose-text { flex: 1 1 auto; margin: 0; font: 400 28px/1.35 var(--body); color: var(--text-body); text-wrap: pretty; }
.prose-text code { font-family: var(--mono); font-size: 0.92em; color: var(--tai-void); }
.prose-panel {
  flex: none; padding: 10px 18px; pointer-events: auto; cursor: pointer; border-radius: 0;
  font: 600 26px/1.2 var(--body); color: var(--tai-void); background: var(--tai-black); border: 2px solid var(--panel-rule);
}
.prose-panel:hover { border-color: var(--text-soft); }
.prose-panel[hidden] { display: none; }

/* -------------------------------------------------------------------------------------- click-to-expand panels */
.panel-layer, .contents { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.panel-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
/* The panel's own ground: the diagram sits on black, so the scene under the scrim never competes with it. Its top edge is at
   y 112, as the contents panel's is, so the top bar's step line stays clear above it. */
.panel-sheet { position: absolute; left: 44px; top: 112px; right: 44px; bottom: 40px; background: var(--tai-black); border: 2px solid var(--panel-rule); }
.panel-title { position: absolute; left: 90px; top: 134px; margin: 0; font: 700 54px/1.15 var(--display); letter-spacing: -0.01em; color: var(--tai-void); }
.panel-close, .ct-close {
  position: absolute; right: 80px; top: 120px; padding: 10px 18px; cursor: pointer; border-radius: 0;
  font: 600 26px/1.2 var(--body); color: var(--tai-void); background: var(--tai-black); border: 2px solid var(--panel-rule);
}
.panel-close:hover, .ct-close:hover { border-color: var(--text-soft); }
.panel-close { top: 142px; }
.panel-content { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
/* A sequence's message labels sit on the sheet's black, so the lifelines they cross pass behind them. */
.panel-content .m-label { background: var(--tai-black); }

/* --------------------------------------------------------------------------------------------- the contents panel */
.ct-box {
  position: absolute; left: 70px; top: 112px; width: 1780px; height: 924px; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 32px 40px 28px; background: var(--panel); border: 2px solid var(--panel-rule);
}
.ct-head { position: relative; display: flex; align-items: center; gap: 40px; padding-right: 160px; }
.ct-head h2 { margin: 0; font: 700 54px/1.15 var(--display); letter-spacing: -0.01em; color: var(--tai-void); }
.ct-find {
  flex: 1 1 auto; max-width: 980px; padding: 12px 18px; border-radius: 0;
  font: 400 30px/1.2 var(--body); color: var(--tai-void); background: var(--tai-black); border: 2px solid var(--panel-rule);
  caret-color: var(--tai-void);
}
.ct-find::selection { background: var(--tai-red); color: var(--tai-void); }
.ct-find::-webkit-search-cancel-button { display: none; }
.ct-find::placeholder { color: var(--text-faint); }
.ct-find:focus { outline: none; border-color: var(--tai-void); }
.ct-head .ct-close { right: 0; top: 50%; transform: translateY(-50%); }
.ct-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 28px 0 0; padding: 0; list-style: none; scrollbar-color: var(--frame-dash) var(--panel); }
.ct-row { display: flex; align-items: baseline; gap: 22px; padding: 10px 18px; cursor: pointer; color: var(--text-body); }
.ct-row[aria-selected="true"] { background: var(--tai-black); box-shadow: inset 0 0 0 2px var(--tai-void); }
.ct-here-tag { flex: none; font: 400 24px/1.2 var(--body); color: var(--text-soft); }
.ct-chapter { margin-top: 6px; font: 700 30px/1.25 var(--display); color: var(--tai-void); }
.ct-n { flex: none; width: 44px; font-variant-numeric: tabular-nums; }
.ct-time { margin-left: auto; font: 400 26px/1.2 var(--body); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ct-scene { padding-left: 84px; font: 600 26px/1.25 var(--body); color: var(--text-soft); }
.ct-advance { padding-left: 116px; font: 400 26px/1.3 var(--body); }
.ct-advance code { font-family: var(--mono); font-size: 0.92em; }
.ct-none { padding: 18px; font: 400 28px/1.3 var(--body); color: var(--text-soft); }
.ct-keys { margin: 18px 0 0; font: 400 24px/1.2 var(--body); color: var(--text-faint); }

/* ------------------------------------------------------------------------------------------------- placeholders */
/* An advance with no step yet: its prose on a plain panel, until its chapter builds it. None is left; this is the fallback. */
#todo { position: absolute; inset: 0; pointer-events: none; }
.todo-panel { background: var(--tai-black); }
.todo-card { position: absolute; left: 70px; top: 150px; width: 1780px; height: 700px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 60px 90px; background: var(--panel); border: 2px solid var(--panel-rule); }
.todo-note { margin: 0; font: 600 24px/1.2 var(--body); color: var(--text-faint); }
.todo-prose { margin: 0; max-width: 1400px; font: 400 40px/1.35 var(--body); color: var(--text-body); }
.todo-prose code { font-family: var(--mono); font-size: 0.92em; }

/* --------------------------------------------------------------------------------- the crossfade from black at load */
.cover { position: absolute; inset: 0; background: var(--tai-black); pointer-events: none; }