/* Abend.
 *
 * A byte carries its own shell, so this file sets the page frame as well as
 * the machine's own surfaces. Measures in rem, never ch.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Set --machine, never --accent.
 *
 * logical-art.css computes `body { --accent: var(--machine, var(--la-instrument)) }`,
 * so declaring --accent here on :root is overridden for everything inside
 * body and the whole page silently renders in the fallback grey, #bdbdbd.
 * That is the trap the canon warns about in as many words, and it cost a
 * measurement to find because the rule was present and the colour was not.
 * The accent is the roster's value for turnaround. */
body[data-machine="abend"] { --machine: #a8c8a0; }

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

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

.ab-head { margin-bottom: var(--la-space-6); }

.ab-lede {
  margin-top: var(--la-space-3);
  color: var(--la-ink-dim);
}

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

.ab-panel {
  margin-top: var(--la-space-6);
  padding: var(--la-space-4);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  background: color-mix(in srgb, var(--la-ink) 3%, transparent);
}

.ab-panel h2 { margin-bottom: var(--la-space-2); }

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

/* ---- knobs ------------------------------------------------------------ */

.ab-knobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--la-space-3) var(--la-space-4);
  margin-top: var(--la-space-4);
}

.ab-knob label {
  display: block;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  margin-bottom: var(--la-space-2);
}

.ab-value { color: var(--accent); }

.ab-range {
  width: 100%;
  accent-color: var(--accent);
  min-height: 1.5rem;
}

.ab-range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- the passes ------------------------------------------------------- */

.ab-passes {
  width: 100%;
  margin-top: var(--la-space-4);
  border-collapse: collapse;
  font-size: var(--la-text-sm);
}

.ab-passes th {
  text-align: right;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  font-weight: 400;
  color: var(--la-ink-dim);
  padding: 0 0 var(--la-space-2) var(--la-space-2);
  border-bottom: 1px solid var(--la-hairline-strong);
}

.ab-passes th:first-child { text-align: left; }

.ab-passes td {
  text-align: right;
  padding: var(--la-space-2) 0 var(--la-space-2) var(--la-space-2);
  border-bottom: 1px solid var(--la-hairline);
  color: var(--la-ink);
}

.ab-passes td:first-child { text-align: left; color: var(--la-ink-dim); }

/* The last pass is the answer: it stops being a guess. */
.ab-passes tbody tr:last-child td { color: var(--accent); }

.ab-num { font-family: var(--la-font-mono); }

/* ---- the readout ------------------------------------------------------ */

.ab-readout {
  margin-top: var(--la-space-4);
  border-top: 1px solid var(--la-hairline);
}

.ab-row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--la-space-3);
  padding: var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline);
}

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

.ab-row dd {
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  overflow-wrap: anywhere;
}

.ab-strong dd { color: var(--accent); font-weight: 600; }

.ab-why { margin-top: var(--la-space-6); }
.ab-why h2 { margin-top: var(--la-space-5); margin-bottom: var(--la-space-2); }
.ab-why p { margin-top: var(--la-space-3); color: var(--la-ink-dim); }

@media (max-width: 34rem) {
  .ab-row { grid-template-columns: 1fr; }
  .ab-row dt { color: var(--la-ink-faint); }
}


/* ---- the deck ---------------------------------------------------------- */

.ab-label {
  margin-top: var(--la-space-4);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.ab-deck {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-4);
}

.ab-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--la-space-2) 0.7rem;
  border: 1px solid var(--la-hairline-strong);
  border-radius: 2px;
  background: color-mix(in srgb, var(--la-ink) 5%, transparent);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

.ab-card-key { color: var(--la-ink); font-size: var(--la-text-sm); }
.ab-card-ctl { color: var(--accent); }
.ab-card-val { color: var(--la-ink-dim); }

/* ---- the fifteen items ------------------------------------------------- */

.ab-items {
  margin-top: var(--la-space-2);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--la-hairline);
}

.ab-item {
  display: flex;
  gap: var(--la-space-2);
  align-items: baseline;
  padding: var(--la-space-2) 0.4rem;
  border-bottom: 1px solid var(--la-hairline);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

.ab-item-n {
  flex: none;
  width: 1.6rem;
  text-align: right;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

/* Yours and the compiler's, told apart by a rule down the side as well as by
   colour, so it survives greyscale. */
.ab-item[data-yours="yes"] {
  border-left: 3px solid var(--accent);
  color: var(--la-ink);
}

.ab-item[data-yours="no"] { border-left: 3px solid transparent; }

.ab-item[data-here="yes"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--la-ink);
}

.ab-item[data-here="yes"] .ab-item-n { color: var(--accent); font-weight: 600; }

/* ---- the printer ------------------------------------------------------- */

.ab-print {
  margin-top: var(--la-space-2);
  padding: var(--la-space-3);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  background: #05070a;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  white-space: pre;
  overflow-x: auto;
  min-height: 6rem;
}

/* ---- the days ---------------------------------------------------------- */

.ab-days {
  width: 100%;
  margin-top: var(--la-space-4);
  border-collapse: collapse;
  font-size: var(--la-text-sm);
}

.ab-days th {
  text-align: left;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  font-weight: 400;
  color: var(--la-ink-dim);
  padding: 0 var(--la-space-2) var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline-strong);
}

.ab-days td {
  padding: var(--la-space-2) var(--la-space-2) var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline);
  color: var(--la-ink);
  vertical-align: top;
}

.ab-days tbody tr:last-child td { color: var(--accent); }

.ab-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-4);
}

.ab-btn {
  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.4em 0.9em;
  cursor: pointer;
  /* 2.5.8 asks for 24 CSS pixels. */
  min-height: 2.25rem;
  min-width: 2.25rem;
}

.ab-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.ab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ab-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ab-btn:disabled { opacity: 0.45; cursor: default; }

.ab-now { margin-top: var(--la-space-4); }

/* ---- the specification sheet ------------------------------------------- */

/* A grid, not a wrap: the fields are in card order left to right and the row
 * has to read like the printed form does. */
.ab-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.9rem 1rem;
    margin: 1.2rem 0 1.4rem;
}

.ab-field {
    display: flex;
    flex-direction: column;
    /* The label wraps to two lines on Decimal Positions and one everywhere
     * else, so the boxes only line up if they are pushed to the bottom. */
    justify-content: end;
    gap: 0.3rem;
    margin: 0;
    min-width: 0;
}

.ab-field-label {
    font-size: var(--la-text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--la-ink-dim);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.25;
}

.ab-field-cols {
    font-family: var(--la-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent);
}

.ab-field-in {
    font-family: var(--la-font-mono);
    font-size: 0.95rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: var(--la-sunken);
    color: var(--la-ink);
    border: 1px solid var(--la-hairline-strong);
    border-radius: 2px;
    text-transform: uppercase;
}

.ab-field-in:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* ---- the card itself ---------------------------------------------------- */

.ab-card80 {
    border: 1px solid var(--la-hairline);
    border-radius: 3px;
    padding: 0.85rem 0.95rem;
    background: var(--la-sunken);
    overflow-x: auto;
}

/* The card scrolls sideways on a narrow screen, so it has to be reachable by
 * keyboard: a region you can only read by dragging it is a region a keyboard
 * cannot read at all. Second time this studio has shipped that. */
.ab-card80:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ab-card80-head {
    margin: 0 0 0.55rem;
    font-size: var(--la-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--la-ink-dim);
}

.ab-ruler,
.ab-punched {
    font-family: var(--la-font-mono);
    /* Eighty columns has to fit on a desktop without scrolling, or the card
     * reads as a fragment rather than as the whole of what was sent. It still
     * scrolls on a phone, where eighty of anything will not fit. */
    font-size: 0.68rem;
    line-height: 1.3;
    margin: 0;
    white-space: pre;
    /* Every column the same width, whatever is in it, or the ruler above and
     * the card below stop lining up and the whole panel is a lie. */
    font-variant-numeric: tabular-nums;
}

.ab-ruler { color: var(--la-ink-faint); }

.ab-punched {
    color: var(--accent);
    border-bottom: 1px solid var(--la-hairline);
    padding-bottom: 0.4rem;
}

.ab-col-say {
    margin: 0.55rem 0 0;
    font-family: var(--la-font-mono);
    font-size: var(--la-text-xs);
    color: var(--la-ink-dim);
}

/* ---- where the columns come from ---------------------------------------- */

.ab-where { margin: 1rem 0 0; }

.ab-where-list {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ab-where-list li {
    font-size: var(--la-text-sm);
    line-height: 1.55;
    color: var(--la-ink-dim);
}

.ab-where-name {
    font-family: var(--la-font-mono);
    color: var(--accent);
    margin-right: 0.4rem;
}

/* ---- the diagnostics ---------------------------------------------------- */

.ab-diag-head {
    font-size: var(--la-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--la-ink-dim);
    margin: 1.4rem 0 0.55rem;
    font-weight: 600;
}

.ab-diags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ab-diag {
    display: flex;
    gap: 0.65rem;
    align-items: baseline;
    font-size: var(--la-text-sm);
    line-height: 1.55;
    padding: 0.45rem 0.65rem;
    border-left: 3px solid var(--la-hairline-strong);
    background: var(--la-raised);
    border-radius: 0 2px 2px 0;
    color: var(--la-ink);
}

.ab-diag-code {
    font-family: var(--la-font-mono);
    font-weight: 700;
    min-width: 1.4rem;
    text-align: right;
}

.ab-diag[data-code="0"] { color: var(--la-ink-dim); }
.ab-diag[data-code="0"] .ab-diag-code { color: var(--la-ink-faint); }
.ab-diag[data-code="4"] { border-left-color: var(--accent); }
.ab-diag[data-code="4"] .ab-diag-code { color: var(--accent); }
.ab-diag[data-code="8"],
.ab-diag[data-code="12"],
.ab-diag[data-code="16"] { border-left-color: var(--la-ink); }

.ab-handoff { font-style: italic; }

/* The deck as the Input sheet reads it. */
.ab-deckread { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: var(--la-text-sm); }
.ab-deckread th, .ab-deckread td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--la-hairline); }
.ab-deckread th { font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--la-ink-dim); font-weight: 600; }
.ab-deckread td { font-family: var(--la-font-mono); font-size: 0.8rem; color: var(--la-ink-dim); font-variant-numeric: tabular-nums; }
.ab-deckread td:nth-child(2) { color: var(--accent); }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the field, half-byte at a time ------------------------------------- */

.ab-nibbles { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.ab-nibbles th, .ab-nibbles td {
    text-align: left;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--la-hairline);
}
.ab-nibbles thead th {
    font-size: var(--la-text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--la-ink-dim);
    font-weight: 600;
}
.ab-nibbles tbody th, .ab-nibbles td {
    font-family: var(--la-font-mono);
    font-size: 0.8rem;
    color: var(--la-ink-dim);
    font-weight: 400;
}

/* Wrong is carried by a word in the last column and by a rule down the side,
   never by colour alone. */
.ab-nibbles tr[data-ok="no"] td:last-child { color: var(--la-ink); }
.ab-nibbles tr[data-ok="no"] th {
    border-left: 3px solid var(--la-ink);
    padding-left: 0.45rem;
    color: var(--la-ink);
}

.ab-verdict[data-abend="yes"] { border-left: 3px solid var(--accent); padding-left: 0.7rem; }