/* ═══════════════════════════════════════════════════════════════════════════
   REFUGE — the type specimen tester, and nothing else.

   Loaded after project.css on refuge.html only. The tester is the first item
   in that page's image column, so it obeys the column's rules: full width,
   flush with what follows it, and cut to a ratio like every frame around it.

   The old page shipped this as a Webflow embed — a black rounded panel, a
   white sheet with a 30px drop shadow, 45px slider knobs and labels pushed
   220px to the right. Same three controls, same ranges, same face. What
   changed is that it now speaks the site's language: 13px labels, hairline
   tracks, outline knobs, and the tokens from chrome.css so it follows the
   theme like everything else.
   ═══════════════════════════════════════════════════════════════════════════ */

.spec{
  /* The three values the sliders write. Declared here so the specimen renders
     correctly — at the sliders' own default positions — before any script runs
     and if none ever does.

     The sheet opens white, the type in pure blue, at the size the specimen is
     meant to be read at. Both wheels then run the same saturated spectrum —
     see the note in specimen.js — each with white on its first notch. */
  --spec-size:   367px;
  --spec-ink:    #0000FF;
  --spec-ground: #FFFFFF;

  margin: 0;
  width: 100%;
  /* The tester's own separation from the image run below it — the same 5svh a
     .note puts above a group. It sat on the controls while they were the last
     thing in the block; now the sheet is. */
  padding-bottom: 5svh;
}

/* ─── The sheet ───────────────────────────────────────────────────────────────
   A block of colour the width of the image column. No border: the ground the
   reader picked is the frame, the same way an image's own edge is. */

.spec__stage{
  /* The same 16:9 the animations further down the column are cut to, so the
     sheet reads as one more frame in the run rather than a panel bolted on.
     The floor is what a phone needs before display type stops being display
     type; the ceiling keeps the sheet inside one screen on a tall monitor. */
  aspect-ratio: 16 / 9;
  min-height: 300px;
  max-height: 72svh;
  /* Not redundant. With the width left to `auto`, the moment either clamp
     above binds — the floor on a phone, the ceiling in a short window — the
     ratio starts resolving the width from the height instead of the other way
     round, and the sheet grows past its column. Stating the width makes the
     inline axis definite, so the ratio only ever answers for the height. */
  width: 100%;
  padding: clamp(14px, 3.4vw, 40px);
  /* Type bigger than the sheet is the point of the control, so it scrolls.
     Chaining is left on: a reader scrolling the page whose pointer crosses the
     sheet should carry on down the page once the sheet runs out, not stop dead
     in it. The bar takes the specimen's own ink so it reads as part of the
     sheet rather than as a piece of system furniture. */
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--spec-ink) transparent;

  font-family: var(--font-refuge);
  font-size: var(--spec-size);
  line-height: .92;
  font-variant-numeric: normal;      /* body sets tnum; a specimen shows the
                                        face's own figures */
  color: var(--spec-ink);
  background: var(--spec-ground);

  white-space: pre-wrap;             /* typed line breaks survive */
  overflow-wrap: anywhere;           /* one long word can't blow out the box */
  cursor: text;
  transition: color .25s var(--ease-out-quart),
              background-color .25s var(--ease-out-quart);
}

/* Caret and selection have to be legible against whatever ground is live. */
.spec__stage{ caret-color: var(--spec-ink); }
.spec__stage::selection{ background: var(--spec-ink); color: var(--spec-ground); }

@media (prefers-reduced-motion: reduce){
  .spec__stage{ transition: none; }
}

/* ─── The controls ────────────────────────────────────────────────────────────
   Above the sheet, as the old page had them: three cells across the image
   column, each a label/value line over its track. Splitting the label off its
   slider is what buys the track the full width of its cell — at 13px,
   "Background Color" and a hairline on one line leaves the hairline about
   150px, too short to aim with.

   They open the image column, so their top edge is what lands level with the
   project's name in the sticky column beside it. */

.spec__controls{
  display: flex;
  gap: clamp(16px, 3.2vw, 44px);
  padding: 0 0 12px;
}

.spec__ctrl{
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

/* Field name left, live value right — the pair the info column's <dl> makes. */
.spec__label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gut);
  margin-bottom: 11px;
  color: var(--ink-quiet);
}
.spec__label output{ color: var(--ink); }

/* ─── The sliders ─────────────────────────────────────────────────────────────
   Outline only, like the theme toggle: a 1px rule for the track and a ring for
   the knob. The two colour knobs fill with the colour they are pointing at, so
   the control shows its own answer; the size knob has nothing to show, so it
   fills on hover instead. Track and thumb rules have to be written twice —
   WebKit and Gecko do not share the pseudo-elements. */

.spec__range{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 13px;                /* the knob's box; the track draws inside it */
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: ew-resize;
  touch-action: pan-y;         /* dragging the knob mustn't scroll the page */
}

/* WebKit / Blink */
.spec__range::-webkit-slider-runnable-track{
  height: 1px;
  background: var(--ink);
}
.spec__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -5px;            /* centres the ring on the 1px rule */
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ground);
  transition: background-color .18s var(--ease-out-quart);
}
.spec__range:hover::-webkit-slider-thumb,
.spec__range:active::-webkit-slider-thumb{ background: var(--ink); }

/* Gecko */
.spec__range::-moz-range-track{
  height: 1px;
  background: var(--ink);
  border: 0;
}
.spec__range::-moz-range-thumb{
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ground);
  transition: background-color .18s var(--ease-out-quart);
}
.spec__range:hover::-moz-range-thumb,
.spec__range:active::-moz-range-thumb{ background: var(--ink); }

/* A knob that is already showing a colour has nothing to gain from filling on
   hover — it grows its ring instead. The script keeps --swatch on each colour
   slider; until then each one points at the value its own position stands for,
   which the sheet is already painted in. Custom properties inherit, so these
   resolve against the two declared on .spec. */
.spec__range--ink{    --swatch: var(--spec-ink); }
.spec__range--ground{ --swatch: var(--spec-ground); }

.spec__range--hue::-webkit-slider-thumb,
.spec__range--hue:hover::-webkit-slider-thumb,
.spec__range--hue:active::-webkit-slider-thumb{ background: var(--swatch); }
.spec__range--hue::-moz-range-thumb,
.spec__range--hue:hover::-moz-range-thumb,
.spec__range--hue:active::-moz-range-thumb{ background: var(--swatch); }

.spec__range--hue:hover::-webkit-slider-thumb{ box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--ink); }
.spec__range--hue:hover::-moz-range-thumb{ box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--ink); }

@media (prefers-reduced-motion: reduce){
  .spec__range::-webkit-slider-thumb{ transition: none; }
  .spec__range::-moz-range-thumb{ transition: none; }
}

/* ─── Narrow ──────────────────────────────────────────────────────────────────
   Three cells in a phone's width give each label about 100px and each track
   about 60px. Stack them instead; the tracks go full width and stay aimable. */

@media (max-width: 639px){
  .spec{ padding-bottom: 4svh; }
  .spec__controls{ display: block; padding-bottom: 14px; }
  .spec__ctrl + .spec__ctrl{ margin-top: 20px; }
  .spec__label{ margin-bottom: 9px; }
}