/* ============================================================================
   lux.css — LuxPlan's own layer, on top of the shared datasite.css
   AAA+++ STUDIO PREMIUM, per _plans/AAA-PLUS-STUDIO-PREMIUM.md §5 (lux row).

   SITE-LOCAL ONLY. Nothing here belongs in _shared/ — 36 other sites read
   those masters and none of them draws a photometric contour. Loaded after
   data.css by every page (see page() in build.mjs), so it may lean on the §20
   tokens (--mono, --t-slow, --ease-out, --accent-deep, --fs-mono) but never
   redefines them.

   The site's voice is a PHOTOMETRIC REPORT: a lighting engineer's sheet, drawn
   in instrument ink on warm paper. Its drawing hand is a 1px DASHED hairline —
   deliberately unlike every sibling's hand (fly's 2px round-cap great-circle
   arc, cook's 14px bezel band, sehat's filled bands, gym's dot map, thali's
   1.2px unit glyphs). Nothing here changes the ceiling plan's geometry: the
   plan is the model asset and it is kept, retokened and annotated, not redrawn.
   ========================================================================== */

/* ---- 1. entrance choreography (§3.7) ----------------------------------
   The above-the-fold stack only: kicker -> h1 -> answer, 60ms stagger. The
   .reveal classes come from data.css §20.8 and are gated behind
   prefers-reduced-motion: no-preference there, so a reduced-motion or no-JS
   reader gets the finished sheet with nothing stranded invisible. */
.hero h1 .hl { display: block; }

/* ---- 2. the answer block, as an instrument readout (§4) ----------------
   .answer.aaa strips the card; this gives the fitting count the mono unit that
   makes it read as a measured quantity rather than a marketing number. */
.answer.aaa .big { color: var(--accent); }
.answer.aaa .big .n { font-variant-numeric: proportional-nums lining-nums; }
.answer.aaa .big .u { text-transform: uppercase; }
.answer.aaa .assumed {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 14px;
}
.answer.aaa .assumed .sep { color: var(--faint); margin: 0 .5em; }

/* ---- 3. iso-lux contours: the set piece ------------------------------
   Server-rendered into the plan SVG. Three concentric dashed rings per
   fitting, at the radii where that fitting's own direct contribution falls to
   75 / 50 / 25 percent of the level directly beneath it. The rings overlap —
   that overlap IS the argument for the fitting count, and it is the one thing
   a text answer cannot carry.

   The dash pattern lengthens as the level drops, so the outermost, weakest
   contour is also the loosest line: the falloff is legible without reading a
   single label. 1px, butt caps, no round joins anywhere. */
.plan .iso {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.plan .iso-1 { stroke-dasharray: 1 2.5; opacity: .62; }
.plan .iso-2 { stroke-dasharray: 2 3;   opacity: .44; }
.plan .iso-3 { stroke-dasharray: 4 3.5; opacity: .30; }

/* The contour labels are the mono spec voice inside the drawing. Values are
   computed from the page's own published fitting output and mounting height,
   so the drawing cannot contradict the hero number. */
.plan .isolab {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
}
.plan .isolab-key { fill: var(--ink-2); }
.plan .isolead { stroke: var(--line-2); stroke-width: .7; stroke-dasharray: 2 2; fill: none; }

/* Dark mode: the plan's strokes follow --ink-2 and the lux accent's lighter
   cut (data.css §19), never pure white. Contours need a touch more presence on
   basalt because a dashed hairline is the first thing a dark ground eats. */
:root[data-theme="dark"] .plan .iso-1 { opacity: .74; }
:root[data-theme="dark"] .plan .iso-2 { opacity: .54; }
:root[data-theme="dark"] .plan .iso-3 { opacity: .38; }
:root[data-theme="dark"] .plan .isolead { stroke: var(--line-2); }

/* ---- 4. the plan's own caption + legend ------------------------------- */
.plan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-legend span { display: inline-flex; align-items: center; gap: 8px; }
.plan-legend i {
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 1px solid var(--accent);
  flex: none;
}
.plan-legend i.k1 { border-top-style: dotted; }
.plan-legend i.k2 { border-top-style: dashed; opacity: .7; }
.plan-legend i.k3 { border-top-style: dashed; opacity: .45; }
.plan-legend i.kf { border-top-width: 2px; border-top-style: solid; }

/* The drawn argument, set as report body under the plan. Not a caption: it is
   the sentence the whole diagram exists to make. */
.iso-read {
  max-width: var(--measure);
  margin-top: var(--s3);
  color: var(--ink-2);
  font-size: .97rem;
  line-height: 1.62;
}
.iso-read strong { color: var(--ink); }
.iso-read .num { font-variant-numeric: tabular-nums lining-nums; }

/* SVG text scales with the viewBox, so a mono 8px label renders at ~4px on a
   phone. data.css bumps .plan text at <=760px; the contour labels need their
   own step or the argument becomes decoration. */
@media (max-width: 760px) {
  .plan .isolab { font-size: 17px; letter-spacing: .04em; }
}
/* Below the point where labels would collide with the fittings themselves,
   drop them: the legend under the drawing carries the same three values, and a
   drawing with overlapping type in it reads as an accident, not a document. */
@media (max-width: 460px) {
  .plan .isolab, .plan .isolead { display: none; }
}

/* ---- 5. the sheet number strip --------------------------------------- */
/* Every h2 on a room page is a numbered sheet, which is the register a real
   photometric report is written in. The keel rule (data.css §20.3) is the datum
   line above it; this puts the sheet's own reference beside it. */
h2.sec .sheet {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 5px;
}

/* ---- 6. one floating object per page (§3.2) -------------------------- */
/* The calculator is the only thing on this site that asks to be acted on, so
   it is the only thing that carries --shadow-lift. The .lift class from
   data.css §20.7 already handles the dark-mode surface-step swap. */
.calc.lift { border-radius: var(--radius); }

/* ---- 7. confident emptiness (§ "breathe") ---------------------------- */
/* One full-width breath before the sign-off line, so the sheet ends the way a
   drawing ends: on paper, not on content. */
.breathe { display: block; }