/* ============================================================================
   The type tester. The one page that sets live text in the webfont rather
   than drawing it, so it is also the one page with form controls.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   The type tester
   --------------------------------------------------------------------------- */

/* A control that sits flush inside a surface with a clipped, rounded edge cannot have its focus
   ring drawn outside it: the surface cuts three sides off and leaves a straight stub crossing a
   rounded corner. The same ring, drawn within the element, is whole. The ring itself is defined
   once, in site.css; only its offset changes here. */
.rig textarea:focus-visible,
.seg label:has(input:focus-visible) {
  outline-offset: calc(var(--focus-width) * -1);
}

.rig {
  overflow: hidden;
}

/* A fixed height, and no drag handle. The box is for a sentence or two; left resizable it grew to
   whatever it was last dragged to and pushed the Moon it produces off the screen, which is the one
   thing this panel has to keep in view. Longer text scrolls inside it. */
.rig textarea {
  display: block;
  width: 100%;
  height: calc(var(--space-16) + var(--space-12));   /* about three lines */
  resize: none;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: var(--hairline) solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
}

/* The controls sit under the result, not between what you type and what it becomes: those two
   belong next to each other, and a block of switches between them broke the one thing this panel
   exists to show.

   Two deliberate rows rather than an accidental wrap. The level switch is the wide control and
   takes the first line; size, weight and raised are the three small ones and share the second.
   Left to wrap on its own, the row put three controls on one line and left "raised" alone below. */
.rig .controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: var(--hairline) solid var(--rule);
  background: var(--paper);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The label is the target — it wraps its control — so it carries the minimum, not the 16px
   checkbox inside it. */
.rig .controls label {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  gap: var(--space-2);
}

/* Packed to the left, not spread to the edges. Stretched across the whole panel the three sat so
   far apart that they stopped reading as one row of settings; grouped, they read as a toolbar under
   the switch. */
.controls__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.rig .stage {
  max-height: 60vh;
  padding: var(--space-6) var(--space-4);
  background: var(--paper-sunk);
  overflow: auto;
}

/* Both rows span the panel, so they share one left edge and one right edge. Set to their content
   they ended at two different places, and a rounded pill beside a square select was two shapes
   doing the same job. The segments divide the width evenly. */
.seg {
  display: grid;
  grid-template-columns: repeat(var(--levels, 4), minmax(0, 1fr));
  width: 100%;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border-right: var(--hairline) solid var(--rule-strong);
  text-align: center;
  cursor: pointer;
}

.seg label:hover:not(:has(input:checked)) {
  background: var(--paper-sunk);
  color: var(--accent);
}

.seg label:last-child {
  border-right: 0;
}

.seg label:has(input:checked) {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

/* The offset is inset by the focus rule in site.css, which is where the reason is written. */
.seg label:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus);
}

.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

select {
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-2);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}

input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  accent-color: var(--accent);
}

.warn {
  display: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-sm);
}

.warn.is-on {
  display: block;
}

/* Relief, not a ghost. A raised line on paper is low contrast; it is never
   invisible, and neither is this: a light edge above, a firm shadow below, a
   face a shade under the panel it sits on. */
body.is-raised .live,
body.is-raised .stage .mn {
  color: #ded2ba;
  filter: drop-shadow(-1px -1px 0 #fffdf7)
          drop-shadow(2px 2px 2px rgba(84, 62, 26, 0.75));
}


/* ---------------------------------------------------------------------------
   The tester on a narrow screen

   A pill that wraps is not a pill: the radius clips the second row and the
   segments stop lining up. Below the width that holds four segments in a line,
   the switch becomes a two-by-two grid of square segments — the same treatment
   every other ROW on the site gets, edge to edge and square — and the
   remaining controls stack instead of competing for one line.
   --------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .rig .controls,
  .controls__set {
    align-items: stretch;
    gap: var(--space-4);
  }

  .controls__set {
    flex-direction: column;
  }

  .seg,
  .controls__set {
    width: 100%;
  }

  .rig .controls label {
    justify-content: space-between;
  }

  /* A checkbox writes its box before its word, so with the rest of the row reading label-then-
     control it would be the one that reads the other way. Reversed, every row lines up. */
  .rig .controls label:has(input[type="checkbox"]) {
    flex-direction: row-reverse;
  }

  .seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-sm);
  }

  .seg label {
    justify-content: center;
    padding-inline: var(--space-2);
    border-right: var(--hairline) solid var(--rule-strong);
    border-bottom: var(--hairline) solid var(--rule-strong);
    text-align: center;
  }

  /* The right-hand column has no neighbour to its right, and the last row none below it. */
  .seg label:nth-child(2n),
  .seg label:last-child {
    border-right: 0;
  }

  .seg label:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

}