/* Line Mode. The accent is amber because the subject is a terminal, and it
   marks exactly two things: a reply that carries a code, and the moment the
   client sends something other than what you typed. */

:root { --accent: #e4d820; }

* { 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.byte {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

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

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

.lm-kicker { margin-bottom: var(--la-space-2); color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.lm-kicker a { color: var(--la-ink-dim); }
.lm-tier, .lm-era {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.55rem;
  border: 1px solid var(--la-hairline-strong); border-radius: 999px;
  font-family: var(--la-font-mono); font-size: var(--la-text-xs);
}
.lm-tier { color: var(--accent); border-color: var(--accent); }

h1 { font-size: var(--la-text-3xl, 2.6rem); margin-bottom: var(--la-space-3); }
h2 { font-size: var(--la-text-xl, 1.4rem); margin-bottom: var(--la-space-3); }

.lm-lede { margin-bottom: var(--la-space-4); color: var(--la-ink-dim); }
.lm-personal { border-left: 3px solid var(--accent); padding-left: 0.9rem; }

.lm-panel { margin-top: var(--la-space-6); }
.lm-hint, .lm-caption { margin: var(--la-space-3) 0; color: var(--la-ink-dim); }
.lm-caption { font-size: var(--la-text-sm); }
.lm-hintline { margin: 0.4rem 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); font-family: var(--la-font-mono); }

.lm-presets { display: flex; flex-wrap: wrap; gap: var(--la-space-2); margin: var(--la-space-3) 0; }
.lm-btn {
  padding: 0.45rem 0.9rem; border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px); background: var(--la-raised);
  color: var(--la-ink); font-family: var(--la-font-mono);
  font-size: var(--la-text-sm); cursor: pointer;
}
.lm-btn:hover:not(:disabled) { border-color: var(--accent); }
.lm-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.lm-btn:disabled { opacity: 0.45; cursor: default; }
.lm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the terminal ------------------------------------------------------- */

.lm-terminal {
  height: 20rem;
  overflow-y: auto;
  padding: 0.8rem 1rem;
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px);
  background: var(--la-sunken);
  font-family: var(--la-font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
}
.lm-terminal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lm-line { white-space: pre-wrap; word-break: break-word; }
.lm-out-line { color: var(--la-ink); }
.lm-in { color: var(--la-ink-dim); }
/* Measured, not chosen: the hairline colour composites to about 1.6:1 on the
   terminal's background and axe was right to call it a serious violation.
   #78828d is 5.10:1 on #08090b, still visibly quieter than the transcript. */
.lm-meta { color: #78828d; font-style: italic; }

/* A line the client changed on its way out. Marked by a rule as well as by
   colour, so it survives forced colours. */
.lm-out-line[data-mark="stuffed"] {
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 0.5rem;
}

/* A Gopher item type, which is one character and carries the meaning. The
   title attribute says what it means; this only makes it findable. */
.lm-in[data-type] { color: var(--la-ink); }

.lm-form { display: flex; gap: var(--la-space-2); margin-top: var(--la-space-3); }
.lm-input {
  flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.7rem;
  border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm, 4px);
  background: var(--la-sunken); color: var(--la-ink);
  font-family: var(--la-font-mono); font-size: var(--la-text-sm);
}
.lm-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- readouts and tables ------------------------------------------------ */

.lm-readout { margin: var(--la-space-4) 0 0; }
.lm-row {
  display: flex; justify-content: space-between; gap: var(--la-space-3);
  padding: 0.4rem 0; border-bottom: 1px solid var(--la-hairline);
}
.lm-row dt { color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.lm-num { font-family: var(--la-font-mono); color: var(--la-ink); margin: 0; word-break: break-word; }
.lm-row.lm-strong dd { color: var(--accent); }

.lm-table { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.lm-table th, .lm-table td {
  text-align: left; padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--la-hairline);
}
.lm-table thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.lm-table tbody th, .lm-table td {
  font-family: var(--la-font-mono); font-size: 0.8rem;
  color: var(--la-ink-dim); font-weight: 400;
}
.lm-table tr[data-mark="yes"] th {
  border-left: 3px solid var(--accent); padding-left: 0.45rem; color: var(--accent);
}
.lm-table tr[data-mark="yes"] td { color: var(--accent); }
.lm-table tr[data-mark="here"] { background: var(--la-raised); }
.lm-table tr[data-mark="bad"] td { color: var(--accent); }
.lm-table tr[data-mark="bad"] th { border-left: 3px solid var(--accent); padding-left: 0.45rem; }

.lm-verdict, .lm-warn {
  margin: var(--la-space-3) 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm);
}
.lm-warn:empty { display: none; }
.lm-warn:not(:empty) {
  border-left: 3px solid var(--accent); padding-left: 0.7rem; color: var(--la-ink);
}

.lm-honest details {
  margin: var(--la-space-3) 0; padding-bottom: var(--la-space-2);
  border-bottom: 1px solid var(--la-hairline);
}
.lm-honest summary { cursor: pointer; color: var(--la-ink); font-weight: 600; }
.lm-honest summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-honest p { margin-top: var(--la-space-2); color: var(--la-ink-dim); }

.la-sources { list-style: none; }
.la-sources li { margin: var(--la-space-2) 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.la-sources a { color: var(--la-ink-dim); }
.la-sources a:hover { color: var(--accent); }

.la-tablewrap { overflow-x: auto; margin: var(--la-space-3) 0; }
.la-tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The visible breadcrumb the BreadcrumbList JSON-LD describes. Structured
   data has to correspond to something a person can see; the first version of
   this page had the JSON-LD from the managed region and no nav, which is a
   Google policy violation and which the canonical audit caught. */
.breadcrumb { display: inline; }
.breadcrumb a, .breadcrumb span { margin-right: 0.35rem; }
.breadcrumb [aria-current="page"] { color: var(--la-ink); }