/* Count Distinct.
 *
 * The accent is declared on the machine root in la-machines.css, generated
 * from the roster. Nothing here declares --machine or --accent: a custom
 * property set on the element that reads it overrides the inherited value,
 * which is how nine differently-labelled tier pills once rendered the same
 * grey.
 *
 * Every measure is in rem. `ch` resolves against the element's own font-size,
 * so a shared measure written in ch is a different width in every place it is
 * used.
 */

/* The page frame. Three rules, and the machine before this one shipped with
   none of them, so its column ran the full 1584px of a desktop window against
   the 640px every other machine holds. There is a gate for it now. */
* { margin: 0; padding: 0; box-sizing: border-box; }

main.nibble {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

/* The measure belongs to the column, not to every block inside it. */
main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* Leaving this out is invisible: the browser paints a dark canvas from
   color-scheme, so the page LOOKS right in a screenshot while having no
   background colour at all, and a contrast checker then measures against
   white and is correct to fail it. */
body {
  font-family: var(--la-font-ui);
  background: var(--la-page);
  color: var(--la-ink);
  line-height: var(--la-leading-body);
  -webkit-font-smoothing: antialiased;
}

.cd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cd-steplabel {
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
  margin-top: var(--la-space-5);
  font-weight: 600;
  color: var(--la-ink);
}

.cd-steplabel:first-of-type { margin-top: var(--la-space-2); }

.cd-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

.cd-hint,
.cd-note {
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
  margin-top: var(--la-space-2);
}

/* Label and control in pairs that cannot come apart. A wrapping flex row can
   put a label at the end of one line and its input at the start of the next,
   which is what happened on the machine before this one as soon as the column
   was given a measure. */
.cd-knob {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr);
  align-items: center;
  gap: var(--la-space-2) var(--la-space-3);
  margin-top: var(--la-space-3);
}

.cd-knob label {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.cd-input {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  padding: 0.45em 0.7em;
  min-width: 9rem;
  max-width: 100%;
}

.cd-input:focus-visible,
.cd-range:focus-visible,
.cd-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cd-range {
  accent-color: var(--accent);
  min-width: 12rem;
  max-width: 100%;
}

.cd-value {
  font-family: var(--la-font-mono);
  color: var(--accent);
}

.cd-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}

.cd-btn {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  cursor: pointer;
}

.cd-btn:hover { border-color: var(--accent); color: var(--la-ink); }
.cd-btn:disabled { opacity: 0.75; cursor: progress; }

/* The readout. A definition list, because that is what it is. */
.cd-readout {
  margin: var(--la-space-3) 0 0;
  display: grid;
  gap: var(--la-space-2);
}

.cd-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--la-space-1) var(--la-space-3);
  align-items: baseline;
}

.cd-row dt {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

.cd-row dd {
  margin: 0;
  color: var(--la-ink-dim);
  overflow-wrap: anywhere;
}

.cd-strong dd { color: var(--la-ink); }
.cd-strong dt { color: var(--la-ink-dim); }

.cd-num {
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
}

/* State rides on a data attribute rather than a class, so the script sets one
   thing and the stylesheet owns every colour. CSP forbids inline style, so a
   rule per value is the only way to do this. */
[data-inside="no"] { color: var(--accent); }
[data-biased="yes"] { color: var(--accent); }

/* The thirty-two bits, in two runs. */
.cd-bitrow {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.cd-seg { padding: 0.15em 0.25em; border-radius: 3px; }
.cd-seg[data-seg="register"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cd-seg[data-seg="rest"] { color: var(--la-ink-dim); }

/* The registers. One bar each, height is the maximum that register has seen.
   Ten steps, because the value is a small integer and a continuous scale would
   suggest a precision the thing does not have. */
.cd-registers {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 3.5rem;
  margin-top: var(--la-space-3);
  padding: 0.25rem;
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius, 6px);
  background: color-mix(in srgb, var(--la-ink) 4%, transparent);
  overflow: hidden;
}

.cd-bar {
  flex: 1 1 0;
  min-width: 1px;
  background: var(--accent);
  opacity: 0.85;
}

.cd-bar[data-h="0"]  { height: 4%; opacity: 0.3; }
.cd-bar[data-h="1"]  { height: 10%; }
.cd-bar[data-h="2"]  { height: 20%; }
.cd-bar[data-h="3"]  { height: 30%; }
.cd-bar[data-h="4"]  { height: 40%; }
.cd-bar[data-h="5"]  { height: 50%; }
.cd-bar[data-h="6"]  { height: 60%; }
.cd-bar[data-h="7"]  { height: 70%; }
.cd-bar[data-h="8"]  { height: 80%; }
.cd-bar[data-h="9"]  { height: 90%; }
.cd-bar[data-h="10"] { height: 100%; }

/* The plot. Bands first, dots over them. */
.cd-plot {
  display: block;
  width: 100%;
  height: 9rem;
  margin-top: var(--la-space-3);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius, 6px);
  background: color-mix(in srgb, var(--la-ink) 4%, transparent);
}

.cd-band { fill: var(--accent); }
.cd-band[data-band="1"] { fill-opacity: 0.20; }
.cd-band[data-band="2"] { fill-opacity: 0.12; }
.cd-band[data-band="3"] { fill-opacity: 0.06; }

.cd-zero {
  stroke: var(--la-ink-dim);
  stroke-width: 0.3;
  stroke-dasharray: 1 1;
}

.cd-dot { fill: var(--la-ink); fill-opacity: 0.75; }

.cd-why { margin-top: var(--la-space-5); }
.cd-why h2 {
  font-size: var(--la-text-lg);
  margin-top: var(--la-space-4);
  margin-bottom: var(--la-space-2);
}
.cd-why p {
  color: var(--la-ink-dim);
  margin-bottom: var(--la-space-2);
}

@media (max-width: 34rem) {
  /* One column: a ten-rem label beside a long number leaves the number a few
     characters wide on a phone. */
  .cd-row { grid-template-columns: 1fr; }
  .cd-row dt { color: var(--la-ink-faint); }
  .cd-knob { grid-template-columns: 1fr; }
}

/* The register the picker is pointing at. Outlined rather than recoloured: the
   bars already carry meaning in their height and their accent, and a reader
   who cannot separate two hues still sees a ring. */
.cd-bar[data-picked="yes"] {
  outline: 2px solid var(--la-ink);
  outline-offset: 1px;
}