/* XOR Calculator styles. No preprocessor, no framework. */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* Layout: one narrow column. Input A, Input B and the result are stacked
   cards joined by a thin wire that runs through the ⊕ and = operators. */
:root {
  --paper: #f4f5f7;
  --sheet: #ffffff;
  --ink: #15181d;
  --ink-2: #555d69;
  --ink-3: #626a76;
  --rule: #dadee4;
  --rule-2: #b3bbc5;
  --grid: #e9ebef;
  --signal-a: #1d4ed8;
  --signal-a-wash: #e7edfc;
  --signal-b: #b45309;
  --signal-b-wash: #fbefe2;
  --signal-c: #0f766e;
  --signal-c-wash: #e1f3f1;
  --signal-d: #be185d;
  --signal-d-wash: #fbe8f1;
  --on-signal: #ffffff;
  --escape: #6d28d9;
  --escape-wash: #f1ecfc;
  --danger: #b42318;
  --danger-wash: #fdeceb;
  --focus: #1d4ed8;

  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --pad-x: 14px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1014;
    --sheet: #161a1f;
    --ink: #e6e9ed;
    --ink-2: #a5adb8;
    --ink-3: #8a929e;
    --rule: #2a3038;
    --rule-2: #47505c;
    --grid: #15181d;
    --signal-a: #8db0ff;
    --signal-a-wash: #1c2645;
    --signal-b: #f2a35e;
    --signal-b-wash: #3a2810;
    --signal-c: #4fd1c5;
    --signal-c-wash: #0f2e2b;
    --signal-d: #f472b6;
    --signal-d-wash: #3a1426;
    --on-signal: #0e1014;
    --escape: #c4a7ff;
    --escape-wash: #2a2142;
    --danger: #ff8f84;
    --danger-wash: #3b1715;
    --focus: #8db0ff;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0e1014;
  --sheet: #161a1f;
  --ink: #e6e9ed;
  --ink-2: #a5adb8;
  --ink-3: #8a929e;
  --rule: #2a3038;
  --rule-2: #47505c;
  --grid: #15181d;
  --signal-a: #8db0ff;
  --signal-a-wash: #1c2645;
  --signal-b: #f2a35e;
  --signal-b-wash: #3a2810;
  --signal-c: #4fd1c5;
  --signal-c-wash: #0f2e2b;
  --signal-d: #f472b6;
  --signal-d-wash: #3a1426;
  --on-signal: #0e1014;
  --escape: #c4a7ff;
  --escape-wash: #2a2142;
  --danger: #ff8f84;
  --danger-wash: #3b1715;
  --focus: #8db0ff;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* Engineering paper: a faint 24px grid. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 400 1rem/1.55 var(--font-sans);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding-block: 28px 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* -------------------------------------------------------------- masthead */

.masthead {
  padding-bottom: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 600 1.5rem/1.1 var(--font-mono);
  letter-spacing: -0.02em;
}

.brand-mark {
  flex: none;
  width: 48px;
  height: 32px;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark .gate {
  stroke: var(--ink);
}

.brand-mark .wire-a {
  stroke: var(--signal-a);
}

.brand-mark .wire-b {
  stroke: var(--signal-b);
}

.tagline {
  margin: 10px 0 0;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* ----------------------------------------------------------------- cards */

.card {
  --sig: var(--ink);
  --sig-wash: var(--paper);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-width: 0;
}

.card[data-signal="a"] {
  --sig: var(--signal-a);
  --sig-wash: var(--signal-a-wash);
}

.card[data-signal="b"] {
  --sig: var(--signal-b);
  --sig-wash: var(--signal-b-wash);
}

.card[data-signal="c"] {
  --sig: var(--signal-c);
  --sig-wash: var(--signal-c-wash);
}

.card[data-signal="d"] {
  --sig: var(--signal-d);
  --sig-wash: var(--signal-d-wash);
}

.card-actions {
  display: flex;
  gap: 14px;
  margin-left: auto;
}

.input-card {
  position: relative;
}

.input-card:focus-within {
  border-color: var(--sig);
  box-shadow: 0 0 0 1px var(--sig);
}

.input-card.has-error,
.input-card.has-error:focus-within {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 9px 10px 9px var(--pad-x);
  border-bottom: 1px solid var(--rule);
}

.card-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: 600 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--sig);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 42px;
  padding: 6px 10px 6px var(--pad-x);
  border-top: 1px solid var(--rule);
}

.status {
  margin: 0;
  min-width: 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.status .err {
  color: var(--danger);
  font-weight: 600;
}

.status .hint {
  color: var(--ink);
}

.status .text-btn {
  margin-left: 6px;
  padding-block: 2px;
}

/* -------------------------------------------------- segmented controls */

.seg {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  min-width: 0;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
}

.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.seg label {
  padding: 6px 10px;
  border-radius: 3px;
  color: var(--ink-2);
  font: 400 0.8125rem/1 var(--font-mono);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.seg label:hover {
  color: var(--ink);
  background: var(--paper);
}

.seg input:checked + label {
  background: var(--sig);
  color: var(--on-signal);
  font-weight: 600;
}

.result-card .seg input:checked + label {
  color: var(--sheet);
}

.seg input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- inputs */

.field {
  display: block;
  width: 100%;
  min-height: 6.6em;
  max-height: 55vh;
  margin: 0;
  padding: 12px var(--pad-x);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 0.9375rem/1.6 var(--font-mono);
  resize: vertical;
  field-sizing: content;
}

/* Sizing a field to its content is slow for very large pastes. */
.field.is-large {
  height: 55vh;
  field-sizing: fixed;
}

.field::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

/* A file in place of the text box. Files are raw bytes, so the formats go. */
.file-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 6.6em;
  padding: 12px var(--pad-x);
  font: 600 0.9375rem/1.4 var(--font-mono);
  overflow-wrap: anywhere;
}

.file-icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: var(--sig-wash);
  stroke: var(--sig);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.input-card.has-file .seg {
  display: none;
}

.input-card.has-file .card-head::after {
  content: "File · raw bytes";
  color: var(--ink-2);
  font: 400 0.8125rem/1 var(--font-mono);
}

.input-card.is-dragover::after {
  content: "Drop to use as " attr(aria-label);
  position: absolute;
  inset: -1px;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 2px dashed var(--sig);
  border-radius: var(--radius);
  background: var(--sheet);
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  color: var(--sig);
  font: 600 0.9375rem/1.3 var(--font-mono);
  text-align: center;
  pointer-events: none;
}

.text-btn {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 0.8125rem/1 var(--font-sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-btn:hover {
  color: var(--sig, var(--ink));
}

/* ------------------------------------------------------------- junctions */

.junction {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 0 10px var(--pad-x);
}

/* The wire: centred on the 28px operator symbol. */
.junction::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pad-x) + 13.25px);
  width: 1.5px;
  background: var(--rule-2);
}

.op {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.op rect {
  stroke: none;
}

/* The "add input" junction: a dashed ⊕ waiting for another input. */
.op-ghost {
  stroke: var(--ink-3);
  stroke-width: 1.5;
}

.op-ghost circle {
  stroke-dasharray: 3 2.6;
}

.junction-add .text-btn {
  color: var(--ink-2);
}

.junction-add .text-btn:hover {
  color: var(--ink);
}

.noscript {
  margin: 0 0 16px;
  padding: 12px var(--pad-x);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
}

.length-ctl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.length-note {
  font-size: 0.8125rem;
}

.length-ctl.differs .length-note {
  padding: 2px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: var(--sheet);
  color: var(--ink);
}

.select {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  min-width: 0;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  cursor: pointer;
}

select:hover {
  border-color: var(--ink-3);
}

/* ---------------------------------------------------------------- result */

.result-body {
  display: flex;
  min-height: 6.6em;
}

.result-text {
  flex: 1;
  min-width: 0;
  max-height: 22em;
  margin: 0;
  padding: 12px var(--pad-x);
  overflow: auto;
  color: var(--ink);
  font: 600 0.9375rem/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.result-text:focus-visible {
  outline-offset: -2px;
}

.esc {
  color: var(--escape);
  background: var(--escape-wash);
  border-radius: 2px;
  font-weight: 400;
}

.result-empty {
  margin: 0;
  padding: 12px var(--pad-x);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.notices {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 var(--pad-x) 12px;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.notices li {
  position: relative;
  padding-left: 14px;
}

.notices li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 1px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--rule-2);
}

.out-opts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-left: auto;
}

.opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.opt select {
  padding-block: 4px;
  font-size: 0.8125rem;
}

.check {
  gap: 6px;
  cursor: pointer;
}

.check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.result-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn.btn-quiet {
  border-color: var(--rule-2);
  background: var(--sheet);
  color: var(--ink);
}

.btn.btn-quiet:hover {
  border-color: var(--ink-3);
  background: var(--paper);
}

.share-note {
  margin: 0;
  padding: 0 var(--pad-x) 12px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.share-note.is-error {
  color: var(--danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: var(--sheet);
  font: 600 0.8125rem/1 var(--font-sans);
  cursor: pointer;
}

.btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.btn:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.btn:disabled {
  background: transparent;
  border-color: var(--rule-2);
  color: var(--ink-3);
  cursor: default;
}

/* ------------------------------------------------------------- breakdown */

.breakdown {
  margin-top: 14px;
}

.breakdown summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  font: 600 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.breakdown summary::-webkit-details-marker {
  display: none;
}

.breakdown summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
  transition: transform 0.15s ease;
}

.breakdown[open] summary::before {
  transform: translateY(-3px) rotate(45deg);
}

.breakdown-body {
  margin-top: 4px;
  padding: 12px var(--pad-x) 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.key {
  display: inline-block;
  min-width: 2.2ch;
  margin-right: -4px;
  padding: 0 3px;
  border-radius: 2px;
  font: 400 0.8125rem/1.5 var(--font-mono);
  text-align: center;
}

.key-pad {
  color: var(--ink-3);
  outline: 1px dashed var(--rule-2);
  outline-offset: -1px;
}

.key-repeat {
  color: var(--signal-b);
  background: var(--signal-b-wash);
}

.dump-wrap {
  position: relative;
  overflow-x: auto;
}

.ch-probe {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  font: 400 0.875rem/1 var(--font-mono);
  white-space: pre;
  pointer-events: none;
}

.dump {
  border-collapse: separate;
  border-spacing: 0;
  font: 400 0.875rem/1.55 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.dump th {
  width: 4ch;
  padding: 0 1ch 0 0;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.dump td {
  padding: 0 0.6ch;
  text-align: right;
  white-space: pre;
}

.dump.fmt-hex td {
  width: 2ch;
}

.dump.fmt-bin td {
  width: 8ch;
}

.dump.fmt-ascii td {
  width: 4ch;
  text-align: center;
}

.dump tr[data-signal="a"] {
  --row: var(--signal-a);
  --row-wash: var(--signal-a-wash);
}

.dump tr[data-signal="b"] {
  --row: var(--signal-b);
  --row-wash: var(--signal-b-wash);
}

.dump tr[data-signal="c"] {
  --row: var(--signal-c);
  --row-wash: var(--signal-c-wash);
}

.dump tr[data-signal="d"] {
  --row: var(--signal-d);
  --row-wash: var(--signal-d-wash);
}

.dump tr[data-signal] > * {
  color: var(--row);
}

.dump .row-r > * {
  border-top: 1px solid var(--rule-2);
  color: var(--ink);
  font-weight: 600;
}

.dump tbody + tbody tr:first-child > * {
  padding-top: 14px;
}

/* Escapes keep their row's colour here; padding (below) still wins. */
.dump .esc {
  color: inherit;
  background: transparent;
}

.dump .t-pad {
  color: var(--ink-3);
  font-weight: 400;
}

.dump .t-repeat {
  background: var(--row-wash);
}

.dump .gap td {
  padding-top: 14px;
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
}

.breakdown-empty {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

/* -------------------------------------------------------------- examples */

.examples,
.reference {
  margin-top: 56px;
}

.examples > h2,
.reference > h2 {
  margin: 0 0 16px;
  font: 600 1.125rem/1.2 var(--font-mono);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.example-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px var(--pad-x);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}

.example h3 {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.example p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.example .example-io {
  margin-top: auto;
  padding-top: 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.example .text-btn {
  align-self: flex-start;
}

/* ------------------------------------------------------------- reference */

.ref-grid {
  display: grid;
  gap: 32px;
}

.ref-block {
  min-width: 0;
}

.ref-block h3 {
  margin: 0 0 10px;
  font: 600 0.8125rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ref-block p {
  max-width: 65ch;
  margin: 0 0 12px;
}

.ref-block code {
  padding: 1px 4px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--sheet);
  white-space: nowrap;
}

.truth {
  margin: 4px 0 16px;
  border-collapse: collapse;
  background: var(--sheet);
  font: 400 0.9375rem/1 var(--font-mono);
  text-align: center;
}

.truth th,
.truth td {
  padding: 8px 18px;
  border: 1px solid var(--rule);
}

.truth th {
  font-weight: 600;
}

.truth td:last-child {
  font-weight: 600;
}

.defs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 20px;
  max-width: 72ch;
  margin: 0;
}

.defs dt {
  font: 600 0.875rem/1.55 var(--font-mono);
}

.defs dd {
  margin: 0;
  min-width: 0;
}

.modes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.modes th,
.modes td {
  padding: 10px 12px 10px 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.modes th {
  font: 600 0.875rem/1.55 var(--font-mono);
  white-space: nowrap;
}

.modes td:last-child {
  padding-right: 0;
  white-space: nowrap;
}

.checks {
  display: grid;
  gap: 8px;
  max-width: 65ch;
  margin: 0 0 12px;
  padding-left: 1.2em;
}

.checks li::marker {
  color: var(--ink-3);
}

/* Shown only while the browser is offline. */
.offline-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: var(--sheet);
  color: var(--ink);
  font-size: 0.875rem;
}

.offline-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal-b);
}

.offline-note:empty {
  display: none;
}

/* ---------------------------------------------------------------- footer */

.footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
}

.footer p {
  margin: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 600px) {
  .page {
    padding-top: 20px;
  }

  .brand {
    font-size: 1.3rem;
  }

  /* 16px keeps iOS from zooming in when a field is focused. */
  .field,
  select {
    font-size: 16px;
  }

  .defs {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .defs dd + dt {
    margin-top: 10px;
  }

  .modes tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
  }

  .modes th,
  .modes td {
    padding: 2px 0;
    border: 0;
  }

  .modes td:last-child {
    white-space: normal;
  }
}

/* Five formats don't fit beside the label on a phone: give them a row. */
@media (max-width: 480px) {
  .card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .seg {
    display: flex;
  }

  .seg label {
    flex: 1 1 0;
    padding-inline: 0;
    text-align: center;
  }
}

@media (max-width: 350px) {
  .seg label {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}