/* Masking — a Logical Art nibble.
 *
 * The subject is a threshold and what falls under it, so the picture is twelve
 * columns and a line across them. The line is the argument: everything below it
 * is being sent and not heard. Colour marks one measured thing, a component the
 * model discarded, and nothing else.
 *
 * No accent is sampled. There is nothing to photograph: masking is an event in
 * a listener, not an object with a colour, so this takes the studio neutral and
 * the only hue on the page is what got thrown away.
 */
* { margin: 0; padding: 0; box-sizing: border-box; }

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;
}

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

main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* Read but not seen. [hidden] is restated because any selector carrying a
   display value outranks the user-agent rule for the attribute, which has
   shipped broken in this family three times. */
.mk-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mk-sr[hidden] { display: none; }


/* ---- the four stages ----------------------------------------------------- */
.mk-steplabel {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
}
.mk-steplabel:first-of-type { margin-top: var(--la-space-2); }

.mk-stepno {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  border: 1px solid var(--la-hairline);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

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

/* ---- the knobs ----------------------------------------------------------- */
.mk-knob {
  display: grid;
  gap: var(--la-space-1);
  margin-top: var(--la-space-3);
}
.mk-knob[hidden] { display: none; }

.mk-knob label {
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

.mk-knob input[type="range"] {
  width: 100%;
  /* 2.5.8 asks 24 by 24 at AA; a range needs a comfortable grab area. */
  min-height: 2.75rem;
  accent-color: var(--accent);
}
.mk-knob input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- the spectrum, and the line across it -------------------------------- */
.mk-bars {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  align-items: end;
  height: 12rem;
}

.mk-bar {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: var(--la-space-1);
}

/* The column is the full height; the level fills it from the bottom and the
   threshold is a line drawn across it, so "under the line" is literal. */
.mk-barcol {
  position: relative;
  height: 100%;
  background: linear-gradient(to top, var(--la-page) 0 0);
  border-bottom: 1px solid var(--la-hairline);
}

.mk-barcol::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--la-ink-dim);
  border-radius: 1px 1px 0 0;
  height: 0;
  z-index: 0;
}

/* Above the fill, not behind it. Painted behind, the threshold was only
   visible where it rose above a bar — which is to say only over the components
   that were dropped, hiding exactly the half of the contour that shows why the
   others were kept. */
.mk-barthreshold {
  position: absolute;
  left: -1px; right: -1px;
  height: 2px;
  background: var(--la-hairline);
  z-index: 1;
}

.mk-bar[data-state="dropped"] .mk-barcol::after { background: var(--accent); }
.mk-bar[data-state="dropped"] .mk-barthreshold { background: var(--accent); opacity: 0.5; }

.mk-barlabel {
  font-family: var(--la-font-mono);
  font-size: 0.62rem;
  color: var(--la-ink-dim);
  text-align: center;
}

/* CSP forbids an inline style attribute, so the heights are data values with a
   rule per step. Twenty-one steps of five is the resolution the model rounds
   to, so nothing is lost between the number and the picture. */
.mk-bar[data-level="0"] .mk-barcol::after { height: 0%; }
.mk-bar[data-level="5"] .mk-barcol::after { height: 5%; }
.mk-bar[data-level="10"] .mk-barcol::after { height: 10%; }
.mk-bar[data-level="15"] .mk-barcol::after { height: 15%; }
.mk-bar[data-level="20"] .mk-barcol::after { height: 20%; }
.mk-bar[data-level="25"] .mk-barcol::after { height: 25%; }
.mk-bar[data-level="30"] .mk-barcol::after { height: 30%; }
.mk-bar[data-level="35"] .mk-barcol::after { height: 35%; }
.mk-bar[data-level="40"] .mk-barcol::after { height: 40%; }
.mk-bar[data-level="45"] .mk-barcol::after { height: 45%; }
.mk-bar[data-level="50"] .mk-barcol::after { height: 50%; }
.mk-bar[data-level="55"] .mk-barcol::after { height: 55%; }
.mk-bar[data-level="60"] .mk-barcol::after { height: 60%; }
.mk-bar[data-level="65"] .mk-barcol::after { height: 65%; }
.mk-bar[data-level="70"] .mk-barcol::after { height: 70%; }
.mk-bar[data-level="75"] .mk-barcol::after { height: 75%; }
.mk-bar[data-level="80"] .mk-barcol::after { height: 80%; }
.mk-bar[data-level="85"] .mk-barcol::after { height: 85%; }
.mk-bar[data-level="90"] .mk-barcol::after { height: 90%; }
.mk-bar[data-level="95"] .mk-barcol::after { height: 95%; }
.mk-bar[data-level="100"] .mk-barcol::after { height: 100%; }

.mk-bar[data-threshold="0"] .mk-barthreshold { bottom: 0%; }
.mk-bar[data-threshold="5"] .mk-barthreshold { bottom: 5%; }
.mk-bar[data-threshold="10"] .mk-barthreshold { bottom: 10%; }
.mk-bar[data-threshold="15"] .mk-barthreshold { bottom: 15%; }
.mk-bar[data-threshold="20"] .mk-barthreshold { bottom: 20%; }
.mk-bar[data-threshold="25"] .mk-barthreshold { bottom: 25%; }
.mk-bar[data-threshold="30"] .mk-barthreshold { bottom: 30%; }
.mk-bar[data-threshold="35"] .mk-barthreshold { bottom: 35%; }
.mk-bar[data-threshold="40"] .mk-barthreshold { bottom: 40%; }
.mk-bar[data-threshold="45"] .mk-barthreshold { bottom: 45%; }
.mk-bar[data-threshold="50"] .mk-barthreshold { bottom: 50%; }
.mk-bar[data-threshold="55"] .mk-barthreshold { bottom: 55%; }
.mk-bar[data-threshold="60"] .mk-barthreshold { bottom: 60%; }
.mk-bar[data-threshold="65"] .mk-barthreshold { bottom: 65%; }
.mk-bar[data-threshold="70"] .mk-barthreshold { bottom: 70%; }
.mk-bar[data-threshold="75"] .mk-barthreshold { bottom: 75%; }
.mk-bar[data-threshold="80"] .mk-barthreshold { bottom: 80%; }
.mk-bar[data-threshold="85"] .mk-barthreshold { bottom: 85%; }
.mk-bar[data-threshold="90"] .mk-barthreshold { bottom: 90%; }
.mk-bar[data-threshold="95"] .mk-barthreshold { bottom: 95%; }
.mk-bar[data-threshold="100"] .mk-barthreshold { bottom: 100%; }

/* ---- the numbers --------------------------------------------------------- */
.mk-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2) var(--la-space-4);
  margin-top: var(--la-space-4);
  padding-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
}

.mk-reg {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
  font-variant-numeric: tabular-nums;
}

.mk-verdictline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}
.mk[data-dropped="yes"] .mk-verdictline { color: var(--la-ink); }

/* ---- controls ------------------------------------------------------------ */
.mk-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}
.mk-buttons[hidden] { display: none; }

.mk-button {
  font: inherit;
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  min-height: 2.75rem;
  padding: 0 var(--la-space-3);
  cursor: pointer;
}
.mk-button:hover { border-color: var(--accent); color: var(--accent); }
.mk-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mk-said, .mk-found {
  margin-top: var(--la-space-2);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  min-height: 1.5em;
}
.mk-found { font-family: var(--la-font-ui); font-size: var(--la-text-sm); }

.mk-proof {
  margin-top: var(--la-space-4);
  padding-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.mk-why { margin-top: var(--la-space-5); }
.mk-why h2 {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-lg);
  font-weight: 600;
}
.mk-why p { margin-top: var(--la-space-2); }

@media (max-width: 30rem) {
  .mk-bars { height: 9rem; gap: 1px; }
  .mk-barlabel { font-size: 0.5rem; }
}