/**
 * spec-figure.css — the frame around an annotated figure in a case study.
 *
 * Shared by /utility-connections and /wireless-network. The component being
 * annotated lives in its own file (wizard-step.css, device-card.css) and the
 * overlay lives in annotate.{css,js}; this file is only the figure around
 * them, plus the commentary theme both of them run.
 *
 * Two things happen here. The figure breaks out of .wrap, because the notes
 * need horizontal room the 1040px column does not have. And below the width
 * where a leader line still fits, the notes change form rather than shrinking:
 * numbered pins on the component, keyed to a list under the figure at text
 * measure. Nothing is ever scaled down, so nothing lands under the legibility
 * floor the rest of the site holds to.
 */

/* ------------------------------------------------------------ the figure */

.spec-figure {
  /* Out of the 1040px column and across the viewport. margin-inline works
     from inside any centred ancestor without needing to know its width. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: calc(var(--u) * 3) var(--gutter);
  background: #fafafa;
  border-block: 1px solid var(--rule);
}

/* Each page sets --spec-stage to its component's width. The fallback is the
   wizard step, which was here first. */
.spec-figure__stage {
  position: relative;
  width: var(--spec-stage, 440px);
  margin-inline: auto;
}

/*
 * The icon sprite. `hidden` does NOT take an inline <svg> out of layout — the
 * attribute is honoured for HTML elements, and an <svg> falls back to its
 * default 300x150 intrinsic box instead. Without this the figure carries
 * 150px of empty space above the component, which reads as a layout bug
 * nobody can find in the markup.
 */
.spec-figure > svg[hidden] {
  display: none;
}

/* The same correction, for the sprite that serves more than one figure and
   therefore sits outside all of them. */
.figure-sprite {
  display: none;
}

/* ------------------------------------------------------- the map variant */

/*
 * A figure whose content is a whole screen rather than one component: no
 * .spec-figure__stage, no overlay, and the diagram brings its own canvas
 * colour. That canvas is Grey/100 and the band's own ground is #fafafa, two
 * greys close enough to read as a printing error, so the band goes white
 * here and lets the canvas be the only grey in the figure.
 */
.spec-figure--map {
  background: #fff;
}

.spec-figure figcaption {
  max-width: var(--measure);
  margin: calc(var(--u) * 2) auto 0;
  color: var(--ink-50);
}

/* The keyed list. Text measure, not figure width — it is prose. */
.spec-legend {
  max-width: var(--measure);
  margin: calc(var(--u) * 2) auto 0;
  display: none;
}

.spec-legend__item + .spec-legend__item {
  margin-top: calc(var(--u) * 0.75);
}

/* ------------------------------------------------- the overlay, restyled */

/*
 * Commentary, not redline. A case study reader does not need to know the
 * padding is 24px, so there are no rulers and no bands — only the elements
 * being discussed, and what is being said about them.
 */
.spec-layer,
.spec-legend {
  --spec: #d6006f;
  --spec-line: rgb(214 0 111 / 45%);
  --spec-guide: #a3a3a2;
  --spec-lead: #b8b7b6;
  --spec-name: #8e8d8c;
  --spec-mark: #191918;
  --spec-pin: #191918;
  --spec-pin-text: #fff;

  /* Notes are prose: they inherit the page's face, and only the numbered pin
     stays part of the drawing. */
  --spec-note-text: var(--ink);
  --spec-note-size: 0.9375rem;
  --spec-note-width: 15rem;
}

/* ------------------------------------------------------------ the switch */

/*
 * One breakpoint for every figure, sized for the widest component on the
 * site: 440 + two margins of 28 + 240, plus the page gutters, needs about
 * 1208px. Below that a leader line either overlaps the component or runs off
 * the page, so the notes become pins and the list appears.
 *
 * A narrower component could hold its leader lines a little longer, and
 * deliberately does not get to. Switching early costs a reader nothing —
 * pins always fit. Switching late is what puts a note through a component,
 * and a per-page breakpoint is a second copy of this rule waiting to drift
 * from the first.
 */
@media (max-width: 76rem) {
  .spec-note__line,
  .spec-note__text {
    display: none;
  }

  .spec-note__pin {
    display: grid;
  }

  .spec-legend {
    display: block;
  }
}

@media (max-width: 34rem) {
  /* The component name is drawing, not prose; it has nothing to add here. */
  .spec-name {
    display: none;
  }
}