/* Morse — a Logical Art bit.
 *
 * The subject is a ranking, so the page is a ranking: twenty-six rows, each
 * carrying its signal, a bar for how often the text uses it, and what it costs
 * to send. Reading down the list IS the argument, because the bars shorten
 * smoothly and the costs do not.
 *
 * One thing earns colour and it is a measurement rather than a category: a
 * letter whose signal costs more than its frequency deserves. The accent is
 * brass, which is what a sounder and a key were made of.
 */
* { 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.bit {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

main.bit p, main.bit ul, main.bit ol, main.bit dl,
main.bit h1, main.bit 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. */
.mo-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mo-sr[hidden] { display: none; }


/* ---- the text you are weighing ------------------------------------------ */
.mo-knob { display: grid; gap: var(--la-space-1); }

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

.mo-input {
  width: 100%;
  padding: var(--la-space-2);
  font-family: var(--la-font-ui);
  font-size: var(--la-text-base);
  line-height: var(--la-leading-body);
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  resize: vertical;
}
.mo-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mo-buttons { margin-top: var(--la-space-2); }

.mo-button {
  font-family: inherit;
  font-size: var(--la-text-sm);
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  cursor: pointer;
}
.mo-button:hover { border-color: var(--accent); }
.mo-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- what it measured ---------------------------------------------------- */
.mo-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
}

.mo-reg {
  padding: 0.2rem 0.55rem;
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  color: var(--la-ink);
  white-space: nowrap;
}

.mo-verdictline {
  margin-top: var(--la-space-3);
  padding-left: var(--la-space-3);
  border-left: 3px solid var(--accent);
  color: var(--la-ink);
}

/* ---- the ranking, which is the argument --------------------------------- */
.mo-subhead {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-lg);
  line-height: var(--la-leading-tight);
}

.mo-table {
  margin-top: var(--la-space-2);
  list-style: none;
  display: grid;
  gap: 2px;
}

.mo-row { display: block; }

/* The row is a button, because pressing it plays the letter. Everything a
   button brings with it is reset except the part that matters: it is focusable,
   it is announced, and it is the full width of the row so the target is the
   thing you were already reading. */
.mo-rowbtn {
  display: grid;
  grid-template-columns: 1.6rem minmax(min(4.5rem, 22%), auto) 1fr auto;
  align-items: center;
  gap: var(--la-space-2);
  width: 100%;
  min-height: 1.75rem;
  padding: 0.2rem var(--la-space-2);
  font: inherit;
  font-size: var(--la-text-sm);
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--la-radius-sm);
  cursor: pointer;
}
.mo-rowbtn:hover { background: var(--la-raised); }
.mo-rowbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mo-row.is-over .mo-rowbtn { background: var(--la-sunken); }

.mo-letter {
  font-family: var(--la-font-mono);
  font-weight: 600;
  color: var(--la-ink);
}

.mo-signal {
  font-family: var(--la-font-mono);
  letter-spacing: 0.15em;
  color: var(--la-ink-dim);
  white-space: nowrap;
}
.mo-row.is-over .mo-signal { color: var(--accent); }

/* The bar is how often the text uses the letter, as a share of the commonest.
   Width comes from a data attribute in tens, because the CSP forbids an inline
   style and a rule per whole percent would be a hundred rules. */
.mo-bar {
  height: 0.55rem;
  min-width: 2px;
  border-radius: 1px;
  background: var(--la-hairline-strong);
}
.mo-row.is-over .mo-bar { background: var(--accent); }

.mo-row[data-share="0"] .mo-bar { width: 2%; }
.mo-row[data-share="10"] .mo-bar { width: 10%; }
.mo-row[data-share="20"] .mo-bar { width: 20%; }
.mo-row[data-share="30"] .mo-bar { width: 30%; }
.mo-row[data-share="40"] .mo-bar { width: 40%; }
.mo-row[data-share="50"] .mo-bar { width: 50%; }
.mo-row[data-share="60"] .mo-bar { width: 60%; }
.mo-row[data-share="70"] .mo-bar { width: 70%; }
.mo-row[data-share="80"] .mo-bar { width: 80%; }
.mo-row[data-share="90"] .mo-bar { width: 90%; }
.mo-row[data-share="100"] .mo-bar { width: 100%; }

.mo-num {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  white-space: nowrap;
  justify-self: end;
}

/* ---- the letters that cost the most -------------------------------------- */
.mo-blame {
  margin-top: var(--la-space-2);
  list-style: none;
  display: grid;
  gap: var(--la-space-1);
  font-size: var(--la-text-sm);
}

.mo-blamerow {
  padding: 0.35rem var(--la-space-3);
  background: var(--la-sunken);
  border-left: 3px solid var(--accent);
  border-radius: var(--la-radius-sm);
  color: var(--la-ink-dim);
}

/* Where this text sits between the best arrangement and the worst. The needle
   is a measurement, so it moves in fives rather than being drawn by hand. */
.mo-scale {
  position: relative;
  height: 0.7rem;
  margin-top: var(--la-space-3);
  border-radius: 999px;
  background: linear-gradient(to right, var(--la-hairline-strong), var(--accent));
}

.mo-needle {
  position: absolute;
  top: -0.2rem;
  width: 3px;
  height: 1.1rem;
  border-radius: 2px;
  background: var(--la-ink);
}


.mo-scale[data-at="0"] .mo-needle { left: calc(0% - 1.5px); }
.mo-scale[data-at="5"] .mo-needle { left: calc(5% - 1.5px); }
.mo-scale[data-at="10"] .mo-needle { left: calc(10% - 1.5px); }
.mo-scale[data-at="15"] .mo-needle { left: calc(15% - 1.5px); }
.mo-scale[data-at="20"] .mo-needle { left: calc(20% - 1.5px); }
.mo-scale[data-at="25"] .mo-needle { left: calc(25% - 1.5px); }
.mo-scale[data-at="30"] .mo-needle { left: calc(30% - 1.5px); }
.mo-scale[data-at="35"] .mo-needle { left: calc(35% - 1.5px); }
.mo-scale[data-at="40"] .mo-needle { left: calc(40% - 1.5px); }
.mo-scale[data-at="45"] .mo-needle { left: calc(45% - 1.5px); }
.mo-scale[data-at="50"] .mo-needle { left: calc(50% - 1.5px); }
.mo-scale[data-at="55"] .mo-needle { left: calc(55% - 1.5px); }
.mo-scale[data-at="60"] .mo-needle { left: calc(60% - 1.5px); }
.mo-scale[data-at="65"] .mo-needle { left: calc(65% - 1.5px); }
.mo-scale[data-at="70"] .mo-needle { left: calc(70% - 1.5px); }
.mo-scale[data-at="75"] .mo-needle { left: calc(75% - 1.5px); }
.mo-scale[data-at="80"] .mo-needle { left: calc(80% - 1.5px); }
.mo-scale[data-at="85"] .mo-needle { left: calc(85% - 1.5px); }
.mo-scale[data-at="90"] .mo-needle { left: calc(90% - 1.5px); }
.mo-scale[data-at="95"] .mo-needle { left: calc(95% - 1.5px); }
.mo-scale[data-at="100"] .mo-needle { left: calc(100% - 1.5px); }

.mo-scalelabel {
  margin-top: var(--la-space-1);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

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

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

/* ---- the prose ----------------------------------------------------------- */
.mo-why { margin-top: var(--la-space-6); }
.mo-why h2 {
  margin-top: var(--la-space-5);
  margin-bottom: var(--la-space-2);
  font-size: var(--la-text-xl);
  line-height: var(--la-leading-tight);
}
.mo-why h2:first-child { margin-top: 0; }
.mo-why p { margin-top: var(--la-space-3); }

/* The link to a graded text. Visible, and selectable, because the point is to
   hand it to somebody: the -said line above is screen-reader only. Wraps
   anywhere so a long URL cannot push the page sideways on a phone. */
.mo-shareline {
  margin-top: var(--la-space-2);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  overflow-wrap: anywhere;
  min-height: 1.5em;
}