/* assets/scene.css — the story art's stroke system (DESIGN-SPEC §3.5), the draw-state classes RUNTIME toggles
   (§7.4), LOD and culling (§8.2), DETAIL discs, the #ui layer, and the static drawings ART injects into the page
   (icon sprite, FIG. 13, the closing clipper). Hand-written, versioned with scripts/build-scene.mjs. Owner: ART.

   Widths are on-screen CSS px at every zoom: finished strokes are non-scaling; a stroke mid-draw switches to user
   space with --k = 1 / camera scale (written by RUNTIME on that path only). Colours come from theme.css tokens,
   with fallbacks so the art renders even before PAGE's tokens load. */

.scene {
  --s-paper: var(--paper, #f5f4f0);
  --s-ink: var(--ink, #141414);
  --s-ink-2: var(--ink-2, #34342f);
  --s-tex: var(--tex, #6f6f69);
  --s-far: var(--far, #8f8e88);
  --s-construct: var(--construct, #b9b8b1);
  --s-rule: var(--rule, #d5d4ce);
  --s-accent: var(--accent, #936027);
  --s-l1: var(--l1-ink, #3a3a35);
  --s-text-3: var(--text-3, #66655f);
  --pi: var(--s-ink);       /* plane ink: t1 / t2 */
  --pd: var(--s-ink-2);     /* plane detail ink: t3 / kd */
  --pt: var(--s-tex);       /* plane texture ink: tt / kh */
  --pw: .085;               /* plane wash alpha (kw) */
  overflow: hidden;         /* display and size belong to PAGE (site.css: hidden when stacked, inset 0 when pinned) */
  fill: none;
}

/* ---- planes (§3.5) ---- */
.scene .pl0 { --pf: 1; --pi: var(--s-ink); --pd: var(--s-ink-2); --pt: var(--s-tex); --pw: .085; }
.scene .pl1 { --pf: .85; --pi: var(--s-l1); --pd: var(--s-ink-2); --pt: var(--s-tex); --pw: .07; }
.scene .pl2 { --pf: .75; --pi: var(--s-tex); --pd: var(--s-tex); --pt: var(--s-far); --pw: .05; }
.scene .pl3 { --pf: .65; --pi: var(--s-far); --pd: var(--s-far); --pt: var(--s-construct); --pw: .035; }

/* ---- base stroke: constant CSS px via non-scaling-stroke. Scoped (zero specificity via :where) to ART's own
   containers, so FIGURES' paths in g.figs and RUNTIME's #ui items are never restyled; tier classes win. ---- */
:where(.scene .slot, .scene .front, .scene #datum, .scene .detail .pl, .scene #sea) path {
  fill: none;
  stroke: var(--pi);
  stroke-width: calc(var(--w, 1) * var(--pf, 1) * 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---- tiers ---- */
.scene .t0 { --w: 1.8; stroke: var(--s-ink); }
.scene .t1 { --w: 1.4; stroke: var(--pi); }
.scene .t2 { --w: 1; stroke: var(--pi); }
.scene .t3 { --w: .6; stroke: var(--pd); }
.scene .tt { --w: .45; stroke: var(--pt); }
.scene .kh { --w: .4; stroke: var(--pt); stroke-linecap: butt; }
.scene .t4 { --w: .5; stroke: var(--s-construct); stroke-linecap: butt; }
.scene .kd { --w: .6; stroke: var(--pd); stroke-dasharray: 3 3; stroke-linecap: butt; }
.scene .kc { --w: .5; stroke: var(--s-construct); stroke-dasharray: 14 3 2 3; stroke-linecap: butt; }
.scene .tr { --w: .5; stroke: var(--s-rule); stroke-linecap: butt; }
.scene .ka { --w: .75; stroke: var(--s-accent); stroke-linecap: butt; }
.scene .ka.f { fill: var(--s-accent); stroke: none; }
.scene .kf { fill: var(--s-paper); stroke: none; }
.scene .kfi { fill: var(--s-ink); stroke: none; }
.scene .kw { fill: var(--s-ink); fill-opacity: var(--pw); stroke: none; }
.scene .kp { fill: var(--s-paper); }            /* ART extension: a stroke tier that is also its own paper occluder */

/* ---- draw states written by RUNTIME (§7.4). Dash numbers are plain numbers (Firefox ignores unitless calc()). */
.scene .is-empty { visibility: hidden; }
.scene .is-drawing {
  vector-effect: none;
  stroke-dasharray: 1 2;
  stroke-width: calc(var(--w, 1) * var(--pf, 1) * var(--k, 1) * 1px);
}
.scene .is-culled { visibility: hidden; }

/* ---- level of detail (classes on #scene, written by RUNTIME with hysteresis) ---- */
.scene .r-tex,
.scene .r-sha,
.scene .r-orn { transition: opacity .22s linear, visibility 0s linear 0s; }
.scene.lod-tex-off .r-tex,
.scene.lod-tex-off .r-sha,
.scene.lod-orn-off .r-orn { opacity: 0; visibility: hidden; transition: opacity .22s linear, visibility 0s linear .22s; }
.story-lite .scene .r-tex,
.story-lite .scene .r-sha { visibility: hidden; }
/* at the empire's scales the street's silhouettes thin, so Nº 1 (full weight) stays the one dark mark at the foot */
.scene.lod-tex-off .street .t1 { --w: .8; }
/* r-far: the far indication of texture (bays, floor bands) shows exactly where r-tex is hidden */
.scene .r-far { opacity: 0; visibility: hidden; transition: opacity .22s linear, visibility 0s linear .22s; }
.scene.lod-tex-off .r-far,
.story-lite .scene .r-far { opacity: 1; visibility: visible; transition: opacity .22s linear, visibility 0s linear 0s; }

/* ---- DETAIL callouts (§7.7): paper disc, clipped drawing, ink ring ---- */
.scene .detail__disc { fill: var(--s-paper); stroke: none; }
.scene .detail__ring { fill: none; stroke: var(--s-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---- #ui layer (screen space; RUNTIME builds items from HUD / DETAILS) ---- */
.scene .ui-t {
  font: 500 10.5px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
  fill: var(--s-text-3);
  stroke: var(--s-paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.scene .ui-ln { fill: none; stroke: var(--s-construct); stroke-width: .75px; vector-effect: non-scaling-stroke; }
.scene .ui-ld { fill: none; stroke: var(--s-text-3); stroke-width: .75px; stroke-dasharray: 1 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.scene .ui-ink { fill: none; stroke: var(--s-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* DETAIL leaders and their reference circles: annotation weight (T4-like), never read as part of the drawing */
.scene .ui-lead { stroke: var(--s-text-3); stroke-width: .8px; }
.scene .ui-fill { fill: var(--s-ink); stroke: none; }
.scene .ui-dot { fill: var(--s-ink); stroke: none; }
.scene .ui-halo { fill: var(--s-paper); stroke: none; }

/* ---- DPR ≤ 1.49: hairlines gain .15 px (§3.5); band at DPR 1: T3/T4 +.25 px (§5.19) ---- */
@media (max-resolution: 1.49dppx) {
  .scene .t3 { --w: .75; }
  .scene .tt { --w: .6; }
  .scene .t4 { --w: .65; }
  .scene .kh { --w: .55; }
  .scene .tr { --w: .65; }
  .layout-band .scene .t3 { --w: .85; }
  .layout-band .scene .t4 { --w: .75; }
}

/* ---- contrast and forced colours ---- */
@media (prefers-contrast: more) {
  .scene .t4,
  .scene .tt { stroke: var(--s-ink-2); }
}
@media (forced-colors: active) {
  .scene path,
  .scene .ka,
  .scene .t4, .scene .kc, .scene .tr, .scene .kd, .scene .tt, .scene .kh, .scene .t3 { stroke: CanvasText; }
  .scene .kf,
  .scene .kp,
  .scene .detail__disc { fill: Canvas; }
  .scene .kfi,
  .scene .ka.f,
  .scene .kw { fill: CanvasText; }
  .scene .ui-t { fill: CanvasText; stroke: Canvas; }
}

/* ======================================================================================================== */
/* Static drawings injected by ART into index.html (outside the story).                                       */
/* ======================================================================================================== */

/* icon sprite: never rendered itself */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }