/* app.css: layout over redfish-style.css (linked, not vendored).
 * The stage fills the viewport (rule 15). EVERY text box is a redfish-style collapsible panel (rule 15d, UI canon,
 * and rule 10): a [data-panel] whose first child is a button.rf-min-tab; .rf-collapsed (from redfish-style.css)
 * withdraws everything but the tab. Font floor 15 px body, 14 px controls, nothing under 13 px. Dark by default.
 * Measured at run time: --cohost-h (the co-host line) and --dock-h (chips + timeline).
 */
:root {
  --cohost-h: 34px;
  --dock-h: 40px;
  --story-w: 400px;
  --gap: 12px;
}

html, body { height: 100%; }
body.rf-map-page { font-size: 15px; }

/* the house tab; a collapsed panel keeps only it (the way back stays visible) */
.rf-min-tab { font-size: 14px; }
[data-panel] > .rf-min-tab[aria-expanded="true"] { color: var(--rf-ink); border-color: var(--rf-rule-strong); }
.rf-overlay.rf-collapsed { background: transparent; border-color: transparent; }
.rf-collapsed > .rf-min-tab { background: var(--rf-ground); }

/* ── the co-host line (collapsible; lane C's widget keeps these class names inside #cohost-bar) ── */
.cohost-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 1200; display: flex; align-items: center; gap: 8px;
               padding: 4px var(--gap); background: var(--rf-ground); border-bottom: 1px solid var(--rf-rule); }
.cohost-wrap.rf-collapsed { right: auto; background: transparent; border: 0; }
.cohost-bar { flex: 1 1 auto; display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; min-width: 0;
              font-size: 15px; color: var(--rf-ink); border-left: 3px solid transparent; padding-left: 6px; }
.cohost-msg { flex: 1 1 auto; }
.cohost-btn, .cohost-bar button {
  font: 600 14px/1 var(--rf-sans); color: var(--rf-ink); text-decoration: none;
  border: 1px solid var(--rf-rule-strong); border-radius: var(--rf-radius); padding: 6px 11px;
  background: transparent; cursor: pointer;
}
.cohost-btn:hover, .cohost-bar button:hover { border-color: var(--rf-accent); color: var(--rf-accent); }
.cohost-status { font: 14px/1.3 var(--rf-mono); color: var(--rf-ink-quiet); }
/* the widget sets data-state: signed-out, not-member, member, syncing, co-hosting; the accent only while hosting */
.cohost-bar[data-state="member"] { border-left-color: var(--rf-rule-strong); }
.cohost-bar[data-state="syncing"] { border-left-color: var(--rf-ink-quiet); }
.cohost-bar[data-state="co-hosting"] { border-left-color: var(--rf-accent); }
.cohost-bar[data-state="co-hosting"] .cohost-status { color: var(--rf-accent); }

/* ── stage and labels ─────────────────────────────────────────────────── */
#stage { display: block; width: 100%; height: 100%; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.mk {
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--rf-sans); letter-spacing: .02em; white-space: nowrap;
  color: var(--rf-ink); background: rgba(18, 18, 18, .82);
  border: 1px solid var(--rf-rule); border-radius: var(--rf-radius); padding: 4px 8px;
}
.mk:hover { border-color: var(--rf-rule-strong); }
.mk.is-active { border-color: var(--rf-accent); }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rf-ink-faint); flex: none; }
.mk.is-active .mk-dot, .mk-eye.is-solved .mk-dot { background: var(--rf-accent); }
.mk-eye { pointer-events: none; }
.mk-region { opacity: .9; }


/* ── header and fabs (labels and controls, not text boxes) ──────────────── */
.hdr { top: calc(var(--cohost-h) + var(--gap)); left: var(--gap);
       display: flex; align-items: center; gap: 10px; padding: 6px 10px; max-width: calc(100% - 110px); }
.hdr .title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr .ver { font: 14px/1 var(--rf-mono); color: var(--rf-ink-quiet); }
.fabs { position: absolute; top: calc(var(--cohost-h) + var(--gap)); right: var(--gap); z-index: 1001; display: flex; gap: 6px; }

/* ── the left stack: info, sources, place (an accordion of panels) ────── */
.left-stack { position: absolute; z-index: 1000; top: calc(var(--cohost-h) + var(--gap) + 50px); left: var(--gap);
              width: min(440px, calc(100% - var(--story-w) - 3 * var(--gap)));
              max-height: calc(100% - var(--cohost-h) - var(--dock-h) - 120px);
              display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.left-stack .lp { position: relative; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; min-height: 0; }
.left-stack .lp:not(.rf-collapsed) { width: 100%; flex: 1 1 auto; overflow: hidden; }
.left-stack .lp > .body { padding: 10px 14px 12px; overflow: auto; width: 100%; }
.left-stack .lp p { font-size: 15px; margin-bottom: 10px; }
.left-stack .rf-footer { margin-top: 10px; padding-top: 8px; font-size: 14px; }
#place-tab { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sources-body table { font-size: 14px; }
#sources-body td, #sources-body th { padding: 7px 10px 7px 0; }
#sources-body .st { font: 13px var(--rf-mono); color: var(--rf-ink-quiet); white-space: nowrap; }
#sources-body .st.established { color: var(--rf-accent); }

/* ── the story column (a panel; each chapter card a panel inside it) ───── */
.story { top: calc(var(--cohost-h) + var(--gap) + 50px); right: var(--gap); width: var(--story-w);
         max-height: calc(100% - var(--cohost-h) - var(--dock-h) - 3 * var(--gap) - 50px);
         display: flex; flex-direction: column; overflow: hidden; }
/* slides: one card at a time; previous/next at the top */
.chapter:not(.is-current) { display: none; }
.chapter { border-bottom: 0; opacity: 1; }
.slide-nav { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--rf-rule); }
.slide-nav button { padding: 6px 12px; }
.slide-n { flex: 1 1 auto; text-align: center; font: 14px var(--rf-mono); color: var(--rf-ink-quiet); }
.story-scroll { min-height: 0; }
.story > .story-tab { align-self: flex-end; margin: 0; }
.story-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.story.rf-collapsed { bottom: auto; width: auto; overflow: visible; }

.chapter { padding: 0 0 4px; border-bottom: 1px solid var(--rf-rule); opacity: .6; transition: opacity var(--rf-t-slow) var(--rf-ease); }
.chapter.is-active { opacity: 1; }
.chapter.rf-collapsed { opacity: .85; }
.chapter > .ch-tab { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; border-radius: 0;
                     padding: 14px 18px 8px; font: 600 19px/1.25 var(--rf-sans); letter-spacing: -0.01em; color: var(--rf-ink); background: transparent; }
.chapter > .ch-tab::after { content: "\2212"; margin-left: auto; font: 400 16px var(--rf-mono); color: var(--rf-ink-faint); }
.chapter.rf-collapsed > .ch-tab { font-size: 16px; padding: 10px 18px; background: transparent; }
.chapter.rf-collapsed > .ch-tab::after { content: "+"; }
.chapter.is-active > .ch-tab .ch-n { color: var(--rf-accent); }
.ch-n { font: 600 13px var(--rf-mono); color: var(--rf-ink-faint); min-width: 1.4em; }
.chapter > .body { padding: 0 18px 14px; }
.chapter .eyebrow { font: 600 13px/1.3 var(--rf-sans); text-transform: uppercase; letter-spacing: .09em; color: var(--rf-ink-faint); margin-bottom: 8px; }
.chapter .eyebrow.reported { color: var(--rf-ink-quiet); }
.chapter .eyebrow.established { color: var(--rf-accent); }
.chapter p, .chapter li { font-size: 15px; line-height: 1.55; }
.chapter ul { padding-left: 18px; margin: 0 0 12px; }
.chapter li { margin-bottom: 6px; }
.chapter .standfirst { font-size: 17px; color: var(--rf-ink-quiet); }
.chapter .cites { font-size: 14px; color: var(--rf-ink-faint); margin-top: 8px; }
.chapter .cites a { color: inherit; }
.chapter .ch-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.chapter .status { font: 14px/1.4 var(--rf-mono); color: var(--rf-ink-quiet); margin-bottom: 8px; }
.chapter .status b { font-weight: 400; color: var(--rf-accent); }
.panel-fig { margin: 10px 0; }
.panel-fig svg { width: 100%; height: auto; display: block; background: var(--rf-ground-sunk); border: 1px solid var(--rf-rule); }
.colophon { padding: 12px 18px 18px; }
.colophon > .body { font-size: 14px; color: var(--rf-ink-faint); padding-top: 8px; }
.colophon a { color: inherit; }
button.tiny { font-size: 14px; padding: 6px 10px; }

/* ── the attribution: one line, always visible while tiles show (Google's terms; a label) ── */
.stage-foot { position: absolute; left: var(--gap); bottom: calc(var(--dock-h) + 2 * var(--gap)); z-index: 6; max-width: min(640px, 60%); }
.attrib { font-size: 14px; color: var(--rf-ink-quiet); background: rgba(18, 18, 18, .7); padding: 3px 8px; border-radius: var(--rf-radius);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the dock: chapter chips (controls) above the timeline panel ───────── */
.dock { position: absolute; left: var(--gap); right: var(--gap); bottom: var(--gap); z-index: 1000;
        display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.dock > * { pointer-events: auto; }
.chips { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto;
         background: var(--rf-ground); border: 1px solid var(--rf-rule); border-radius: var(--rf-radius); padding: 3px 4px; }
.chips button.tiny { padding: 4px 9px; }
.chip-n { font: 14px var(--rf-mono); color: var(--rf-ink-quiet); min-width: 3.4em; text-align: center; }
.chip-row { display: inline-flex; gap: 3px; margin-left: 6px; }
.chip { font: 600 13px/1 var(--rf-mono); padding: 5px 7px; min-width: 28px; }
.chip[aria-pressed="true"] { border-color: var(--rf-accent); background: var(--rf-accent); color: #fff; }

.timeline { position: relative; width: 100%; height: 118px; display: flex; flex-direction: column; padding: 0; }
.timeline > .rf-min-tab { align-self: flex-start; margin: 0; }
.timeline.rf-collapsed { width: auto; height: auto; }
.tl-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2px 10px 6px; }
.tl-bar { display: flex; align-items: center; gap: 12px; }
.tl-legend { font-size: 14px; color: var(--rf-ink-quiet); display: inline-flex; align-items: center; gap: 6px; }
.tl-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--rf-ink-quiet); margin-left: 6px; }
.tl-key.solid { background: var(--rf-accent); border-color: var(--rf-accent); }
#btn-replay { margin-left: auto; }
.tl-body { flex: 1 1 auto; min-height: 0; margin-top: 4px; }
.tl-body svg { display: block; overflow: visible; }
.tl-band { fill: var(--rf-ground-sunk); }
.tl-band.byzantine, .tl-band.republic { fill: var(--rf-rule); opacity: .45; }
.tl-band-label { font: 600 13px var(--rf-sans); fill: var(--rf-ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.tl-axis { stroke: var(--rf-rule-strong); }
.tl-tick { font: 13px var(--rf-mono); fill: var(--rf-ink-faint); }
.tl-row-label { font: 13px var(--rf-sans); fill: var(--rf-ink-quiet); }
.tl-ev { cursor: pointer; }
.tl-ev circle { stroke-width: 1.5; }
.tl-ev.reported circle { fill: var(--rf-ground); stroke: var(--rf-ink-quiet); }
.tl-ev.established circle { fill: var(--rf-accent); stroke: var(--rf-accent); }
.tl-ev.is-active circle { stroke: var(--rf-ink); stroke-width: 2.5; }
.tl-span { fill: var(--rf-accent); opacity: .35; }
.tl-playhead { stroke: var(--rf-ink); stroke-width: 1; }

/* ── the lens ─────────────────────────────────────────────────────────── */
.lens { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lens-frame { position: absolute; left: 0; top: 0; width: 100px; height: 100px; overflow: hidden; }
.lens-frame img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; object-fit: fill; }
/* the era under discussion: the rest of the photograph dims, the band keeps its colour, one accent outline */
.lens-band { position: absolute; outline: 2px solid var(--rf-accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
             transition: top var(--rf-t-slow) var(--rf-ease), height var(--rf-t-slow) var(--rf-ease); }
.lens-ctl { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 2 * var(--gap) + 34px);
            pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 6px 10px;
            background: var(--rf-ground); border: 1px solid var(--rf-rule); border-radius: var(--rf-radius); }
.lens-ctl label { font-size: 14px; }
.lens-ctl input[type="range"] { width: 160px; }

/* ── dialogs ──────────────────────────────────────────────────────────── */
dialog { background: var(--rf-ground); color: var(--rf-ink); border: 1px solid var(--rf-rule); border-radius: var(--rf-radius); padding: 14px 18px 18px; max-width: min(96vw, 1120px); width: min(96vw, 1120px); max-height: 92vh; overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, .66); }
dialog.max { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
dialog.max .stack-wide svg { max-height: 64vh; width: auto; max-width: 100%; margin: 0 auto; }
.dlg-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dlg-bar .rf-label { flex: 1 1 auto; font-size: 13px; }
.stack-wide svg, .stack-narrow svg { width: 100%; height: auto; display: block; }
.stack-narrow { display: none; }
.stack-text p { font-size: 15px; }
.stack-text ul { padding-left: 18px; }
.stack-text li { font-size: 15px; margin-bottom: 8px; }
.dlg-panel { margin-top: 10px; border-top: 1px solid var(--rf-rule); padding-top: 8px; }
.dlg-panel > .body { padding-top: 8px; }
.dlg-panel p { font-size: 15px; }
.dlg-panel ul { padding-left: 18px; }
.dlg-panel li { font-size: 15px; margin-bottom: 8px; }

/* the figure: strata beside stack beside co-host */
.four-layers .st-ink { fill: none; stroke: var(--rf-ink); stroke-width: 1.5; }
.four-layers .st-thin { stroke-width: .8; stroke: var(--rf-ink-quiet); }
.four-layers .st-fill { fill: var(--rf-rule); }
.four-layers .st-bg { fill: transparent; }
.four-layers .st-row { outline: none; }
.four-layers .st-row:hover .st-bg, .four-layers .st-row:focus .st-bg, .four-layers .st-row.on .st-bg { fill: var(--rf-accent-wash); }
.four-layers .st-head { font: 600 13px var(--rf-sans); fill: var(--rf-ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.four-layers .st-era { font: 600 18px var(--rf-sans); fill: var(--rf-ink); }
.four-layers .st-sub { font: 15px var(--rf-sans); fill: var(--rf-ink-quiet); }
.four-layers .st-note { font: 14px var(--rf-sans); fill: var(--rf-ink-quiet); }
.four-layers .st-rule { stroke: var(--rf-rule); }
.four-layers.compact .st-era { font-size: 20px; }
.four-layers.compact .st-sub { font-size: 16px; }
.four-layers.compact .st-note { font-size: 15px; }

/* ── phones: every text panel starts collapsed; the column opens as a bottom sheet above the dock ── */
@media (max-width: 720px) {
  :root { --story-w: 0px; --sheet: 46vh; }
  .cohost-bar { font-size: 14px; gap: 6px 10px; }
  .cohost-btn, .cohost-bar button { padding: 5px 9px; }
  .hdr { max-width: calc(100% - 100px); }
  .hdr .title { max-width: 150px; }
  .left-stack { width: calc(100% - 2 * var(--gap)); max-height: 46vh; }
  .story { top: auto; left: 0; right: 0; bottom: calc(var(--dock-h) + var(--gap)); width: auto; max-height: var(--sheet);
           border-left: 0; border-right: 0; }
  .story.rf-collapsed { left: auto; right: var(--gap); bottom: calc(var(--dock-h) + var(--gap) + 4px); height: auto; }
  .chapter > .ch-tab { padding: 12px 14px 6px; font-size: 17px; }
  .chapter > .body { padding: 0 14px 12px; }
  .stage-foot { max-width: calc(100% - 100px); bottom: calc(var(--dock-h) + var(--gap) + 4px); }
  body.story-open .stage-foot { bottom: calc(var(--dock-h) + var(--gap) + var(--sheet) + 6px); max-width: calc(100% - 2 * var(--gap)); }
  .lens-ctl { bottom: calc(var(--dock-h) + var(--gap) + 44px); }
  body.story-open .lens-ctl { bottom: calc(var(--dock-h) + var(--gap) + var(--sheet) + 40px); }
  .timeline { height: 100px; }
  .tl-legend { display: none; }
  .chip-row { display: none; }
  .stack-wide { display: none; }
  .stack-narrow { display: block; }
}