/**
 * Layer explorer.
 *
 * Ported from components/data/LayerExplorer.module.css. Two rules here are load-bearing
 * rather than decorative and are commented as such: the print rule and the focus rule.
 */

.ss-explorer {
  /**
   * ── THE DRAWING PALETTE ──────────────────────────────────────────────────
   *
   * Four colours, and the only place on this site where one is not a §4.3 token.
   *
   * The client asked for a colour per material — "insulterm gray, lana roca light green,
   * placner dark gray, pladur green, omega blue" — and the brand palette has no green.
   * It is blue, ink, four greys, white and one orange, and ADR-0004 vendors colors.css
   * BYTE FOR BYTE from the design handoff, which is what guarantees no brand value ever
   * drifts. Adding two greens to that file is the one thing that must not happen.
   *
   * So they are declared here, scoped to the explorer and named for what they are. A
   * hatch colour is a drawing convention in the same way a rock-wool cross-hatch is;
   * every CAD standard assigns colours to materials and nobody mistakes them for a
   * practice's branding. Nothing outside this block may use them, and the site chrome is
   * still §4.3 to the value.
   *
   * All four are light enough to carry an ink layer number and a steel hatch over them.
   * That is the constraint they were chosen against, not a mood. The other five grounds
   * are palette tokens and stay that way.
   */
  /* stylelint-disable color-no-hex -- the drawing palette, as above. */
  --ss-draw-green: #C3DCC3;
  --ss-draw-green-light: #DDEDC8;
  --ss-draw-grey: #D6DBE2;
  --ss-draw-grey-dark: #AEB6C0;

  /*
   * Blue is here rather than being --ss-blue-wash for a reason that is not aesthetic: the
   * active state IS --ss-blue-wash, so a layer already drawn in it changed to itself on
   * hover and the one layer set blue had no feedback at all. A ground and a state cannot
   * be the same colour.
   */
  --ss-draw-blue: #C9D8F7;
  /* stylelint-enable color-no-hex */

  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-7);
  align-items: start;
}

/* Grid children default to min-width: auto, which lets the 560px SVG force its column
   open and scroll the page sideways at 360px. See docs/STATUS.md. */
.ss-explorer > * {
  min-width: 0;
}

.ss-explorer--compact {
  grid-template-columns: 1fr;
}

@media (width <= 1024px) {
  .ss-explorer {
    grid-template-columns: 1fr;
  }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

/* .header / .ref / .name / .scale, ported. The first pass reached for the nearest token
   in each case and landed one step off in every one: the reference at 15px against 20px,
   the name at h4 against h3, and eyebrow tracking on a mono string that is not an
   eyebrow. The hairline under the row is not in the design either — the header sits
   directly above the drawing, which carries its own frame. */
.ss-explorer__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ss-explorer__ref {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: var(--tracking-mono);
  color: var(--ss-blue);
}

.ss-explorer__name {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.ss-explorer__scale {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
}

/* ── The drawing ──────────────────────────────────────────────────────────── */

.ss-explorer__drawing {
  width: 100%;
  height: auto;
  display: block;
  border: var(--hairline);
}

.ss-explorer__band {
  cursor: pointer;
}

/**
 * Focus lands on the <g>, but an SVG group has no box of its own to outline. Outlining
 * the child rect is what makes the focus ring actually appear where the user is.
 * Without this the drawing is keyboard-navigable and looks like it is not.
 */
.ss-explorer__band:focus-visible {
  outline: none;
}

.ss-explorer__band:focus-visible .ss-explorer__band-fill {
  outline: var(--focus-ring);
  outline-offset: -2px;
  stroke: var(--ss-blue);
  stroke-width: 2;
}

.ss-explorer__band-fill {
  fill: var(--ss-white);
  transition: fill var(--motion-hover) var(--ease-standard);
}

/**
 * The ground a layer's hatch is drawn on.
 *
 * Classes rather than an inline fill, because the list is closed and a class per tone is
 * what keeps it closed — a record cannot ask for a colour nobody defined, whatever it puts
 * in the field.
 *
 * The order matters. These come before the active rule below, which is the one thing
 * allowed to overrule a layer's own ground — the layer under the pointer has to look
 * chosen whatever colour it is.
 */
.ss-explorer__band-fill--tone-neutral {
  fill: var(--ss-white);
}

.ss-explorer__band-fill--tone-paper {
  fill: var(--ss-paper);
}

.ss-explorer__band-fill--tone-zinc {
  fill: var(--ss-zinc);
}

.ss-explorer__band-fill--tone-blue {
  fill: var(--ss-draw-blue);
}

.ss-explorer__band-fill--tone-signal {
  fill: var(--ss-signal-wash);
}

.ss-explorer__band-fill--tone-green {
  fill: var(--ss-draw-green);
}

.ss-explorer__band-fill--tone-green-light {
  fill: var(--ss-draw-green-light);
}

.ss-explorer__band-fill--tone-grey {
  fill: var(--ss-draw-grey);
}

.ss-explorer__band-fill--tone-grey-dark {
  fill: var(--ss-draw-grey-dark);
}

/**
 * The cavity and the layers inside it keep their own tone.
 *
 * Both used to be forced to `--ss-paper` here, which was right while a tone was a wash
 * and wrong the moment a tone became the material's colour: the rock wool inside the stud
 * was set light green in the record and rendered paper grey, because this rule sits after
 * the tone rules and beat them. Two of D.02's eight layers lost their colour that way and
 * the record gave no sign of it.
 *
 * A contained layer is told apart by its dashed outline, and the stud by the hairline of
 * it showing at each edge. Neither needs to overrule the drawing.
 *
 * The active state still does, and is the only thing that does — the layer under the
 * pointer has to look chosen whatever colour it is.
 */
.ss-explorer__band.is-active .ss-explorer__band-fill {
  fill: var(--ss-blue-wash);
}

/**
 * The layer number, with a white halo.
 *
 * `paint-order: stroke` draws the stroke first and the fill over it, so a 3px white
 * stroke becomes a halo behind the glyph rather than an outline around it. Without it a
 * number sitting on a cross-hatch is unreadable — which is what happened the moment the
 * hatches went in, and the numbers are how the drawing is tied to the schedule below.
 */
.ss-explorer__band-number {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ss-steel);
  stroke: var(--ss-white);
  stroke-width: 3px;
  paint-order: stroke;
}

.ss-explorer__band.is-active .ss-explorer__band-number {
  fill: var(--ss-blue);
}

.ss-explorer__band-thickness {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--ss-steel);
  stroke: var(--ss-white);
  stroke-width: 2.5px;
  paint-order: stroke;
}

.ss-explorer__dimension {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
  fill: var(--ss-ink);
}

/* The brace over a group — the stud and the layers filling it. Hairline weight, because
   it is a relationship between layers rather than one of the layers. */
.ss-explorer__bracket {
  fill: none;
  stroke: var(--ss-zinc-strong);
  stroke-width: 1;
}

/* A leader from a label that had to move to fit, back to the layer it names. Lighter than
   the bracket: it points at one layer, it does not group several. */
.ss-explorer__leader {
  fill: none;
  stroke: var(--ss-zinc-strong);
  stroke-width: 0.75;
}

/**
 * A sheet cast into another layer — D.07's trapezoidal deck — drawn by its profile.
 *
 * The hit area is invisible and covers the rib zone, so a 1 mm sheet can still be pointed
 * at. The profile is ink, the heaviest line in the drawing after the dimension, because it
 * is steel in section; the voids under the crests are the paper showing through. Pointed
 * at or focused, the profile turns blue and the voids take the active wash, which is the
 * focus ring a line has in place of a box.
 */
.ss-explorer__sheet-hit {
  fill: transparent;
}

.ss-explorer__sheet-void {
  fill: var(--ss-white);
}

.ss-explorer__sheet-profile {
  fill: none;
  stroke: var(--ss-ink);
  stroke-width: 1.25;
  stroke-linejoin: miter;
}

.ss-explorer__band.is-active .ss-explorer__sheet-profile,
.ss-explorer__band--sheet:focus-visible .ss-explorer__sheet-profile {
  stroke: var(--ss-blue);
  stroke-width: 2;
}

.ss-explorer__band.is-active .ss-explorer__sheet-void {
  fill: var(--ss-blue-wash);
}

/**
 * Reinforcement bars, in section.
 *
 * Filled dots, which is how a bar running across the section reads on a drawing. Solid ink
 * rather than a tone: the steel is the one thing that band is there to show, and a wash
 * would lose it against the concrete hatch it sits on.
 */
.ss-explorer__rebar {
  fill: var(--ss-ink);
}

/* The other direction of the same mat: a bar running along the cut rather than across it.
   Butt ends because the slab is cut, not stopped — the steel continues past the drawing. */
.ss-explorer__rebar-run {
  stroke: var(--ss-ink);
  stroke-linecap: butt;
}

.ss-explorer__band.is-active .ss-explorer__rebar,
.ss-explorer__band.is-active .ss-explorer__rebar-run {
  fill: var(--ss-blue);
  stroke: var(--ss-blue);
}

/* Int. / Ext. — which face is which, from the client's own D.02 sheet. Quieter than the
   dimension, because it orients the reader rather than telling them a number. */
.ss-explorer__face {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  fill: var(--ss-steel);
}

.ss-explorer__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 17px;
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  margin-top: var(--space-4);
  max-width: 78ch;
}

/* ── The detail pane ──────────────────────────────────────────────────────── */

.ss-explorer__pane {
  border: var(--hairline);
  background: var(--surface-section);
  padding: var(--space-5);
  min-height: 240px;
}

.ss-explorer__pane-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.ss-explorer__pane-title {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: var(--space-1);
}

.ss-explorer__pane-material {
  font-size: var(--type-body-sm-size);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.ss-explorer__pane-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline);
}

.ss-explorer__pane-data dt {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ss-explorer__pane-data dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-data);
}

.ss-explorer__pane-function,
.ss-explorer__pane-note {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-body);
}

.ss-explorer__pane-note {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

/* The three lines of the idle pane, ported value for value from .paneIdleTotal,
   .paneIdleEs and .paneIdleHint. The first pass reached for the nearest tokens instead
   and got all three wrong: the total came out at --type-h3-size (28px against 22px), the
   Spanish name lost its italic, and the hint — an ordinary instruction — was set in mono,
   which is this site's voice for a figure that is not yet stated. */
.ss-explorer__pane-idle-total {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ss-ink);
  margin-bottom: var(--space-2);
}

.ss-explorer__pane-idle-alt {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.ss-explorer__pane-idle-hint {
  font-size: 15px;
  line-height: 23px;
  color: var(--text-secondary);
}

/* ── Pending state ────────────────────────────────────────────────────────── */

/**
 * A detail whose schedule has not been transcribed lands here — D.09, and D.06 while it is
 * redrawn (ADR-0009). It has to read as a deliberate statement
 * rather than a broken component — hence the confirmed total set large, and the
 * explanation in full sentences underneath.
 */
.ss-explorer__pending {
  grid-column: 1 / -1;
  border: var(--hairline);
  background: var(--surface-section);
  padding: var(--space-8);
  text-align: center;
}

.ss-explorer__pending-total {
  font-family: var(--font-display);
  font-size: var(--type-figure-size);
  line-height: var(--type-figure-line);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}

.ss-explorer__pending-label {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.ss-explorer__pending-body {
  max-width: 62ch;
  margin: var(--space-5) auto 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
}

/* ── Print ────────────────────────────────────────────────────────────────── */

/**
 * LOAD-BEARING, not cosmetic.
 *
 * Every layer pane is in the HTML and hidden with [hidden], which is what makes the
 * drawing readable with JavaScript off. On paper that would print seven stacked panes.
 * Architects print these pages (criterion 5), so print gets the idle pane only — the
 * layer data is on the same sheet, in the schedule table.
 */
@media print {
  .ss-explorer {
    grid-template-columns: 1fr;
  }

  .ss-explorer__pane-layer {
    display: none !important;
  }

  .ss-explorer__pane-idle {
    display: block !important;
  }

  .ss-explorer__drawing {
    break-inside: avoid;
  }
}