/* Braille Translator
   Paper and ink, square corners, flat borders. One accent (proofing red), used for
   focus rings and small marks only.
   Type: Atkinson Hyperlegible Next for text, Atkinson Hyperlegible Mono for dot numbers
   and data, and a braille-only subset of Noto Sans Symbols 2 for the cells, all
   self-hosted from /fonts (SIL OFL 1.1). */

/* ---- Fonts ------------------------------------------------------------- */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Braille cells only (U+2800–28FF), so the dots look the same on every system
   instead of depending on whatever braille font the OS has. */
@font-face {
  font-family: "Noto Sans Symbols 2 Braille";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-symbols-2-braille-400-normal.woff2") format("woff2");
  unicode-range: U+2800-28FF;
  size-adjust: 111%; /* Noto's cells are drawn about 10% smaller than common system braille fonts */
}

/* Metric-matched fallbacks, used until the web fonts arrive, so the swap
   doesn't shift the layout. Values measured against the real fonts. */
@font-face {
  font-family: "Atkinson Next Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 99.6%;
  ascent-override: 98.3%;
  descent-override: 32.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Atkinson Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("Courier New");
  size-adjust: 114.9%;
  ascent-override: 85.3%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}

/* ---- Tokens ------------------------------------------------------------ */

:root {
  /* Colour: paper, ink and one accent. */
  --paper: #f6f2e9;
  --sheet: #fffdf8;
  --ink: #1d1b17;
  --ink-soft: #4b463d;      /* 8.4:1 on paper */
  --field: #6b6356;         /* input borders, 5.3:1 on paper */
  --rule: #d6cdbd;          /* decorative rules only */
  --accent: #a3341f;        /* focus ring and marks, 6.1:1 on paper */
  --notice-bg: #f3e3c4;

  /* Type */
  /* The braille face comes first everywhere: its unicode-range is U+2800–28FF only,
     so it draws braille cells in running text and leaves every other character alone. */
  --font-text: "Noto Sans Symbols 2 Braille", "Atkinson Hyperlegible Next", "Atkinson Next Fallback", sans-serif;
  --font-mono: "Noto Sans Symbols 2 Braille", "Atkinson Hyperlegible Mono", "Atkinson Mono Fallback", monospace;
  /* Braille cells come from the self-hosted Noto subset (U+2800–28FF only);
     any other character in a braille box falls through to Atkinson. */
  --braille-font: "Noto Sans Symbols 2 Braille", "Atkinson Hyperlegible Next", "Atkinson Next Fallback", sans-serif;

  --fs-2xs: 0.7rem;   /* Indicators table headers on the narrowest phones */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-xl: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);

  /* Braille cell sizes */
  --br-2xs: 0.9rem;   /* inline examples on the narrowest phones */
  --br-xs: 1.05rem;   /* inline examples on phones */
  --br-sm: 1.25rem;
  --br-md: 1.9rem;
  --br-md-tight: 1.45rem; /* chart cells on the narrowest phones */
  --br-lg: 2rem;      /* braille output box below 900px */
  --br-xl: 4rem;

  --lh-tight: 1.15;
  --lh-field: 1.5;
  --lh-body: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* The one large gap: space above a section's divider (and above ad slots
     and the footer). 48px on phones, 64px at 1280, 80px from 1600. */
  --section-gap: clamp(var(--space-7), 5vw, var(--space-9));

  /* Borders and focus */
  --bw-1: 1px;
  --bw-2: 2px;
  --focus-width: 4px;
  --offset: 3px;            /* focus ring gap and underline offset */
  --target: 44px;

  /* Letter-spacing */
  --track-tight: -0.015em;  /* headings and the logo */
  --track-label: 0.02em;    /* mono labels */
  --track-cell: 0.04em;     /* braille cells, compact */
  --track-cell-wide: 0.1em; /* braille cells with room to breathe */

  /* Content width: a 1280px column with the gutter inside it (18px at 700px and below). */
  --content-max: 1280px;
  --gutter: 32px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181613;
    --sheet: #23201b;
    --ink: #f1ebdf;
    --ink-soft: #c4bcad;    /* 9.6:1 on paper */
    --field: #9d9483;       /* 6:1 on paper */
    --rule: #3d382f;
    --accent: #f08d6f;      /* 7.5:1 on paper */
    --notice-bg: #3a2f1c;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 18px;
  }
}

/* ---- Base -------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

/* Square scrollbars. WebKit/Blink use the pseudo-elements; Firefox gets colours only
   (setting scrollbar-color in Blink would switch off the pseudo-elements). */
::-webkit-scrollbar {
  width: var(--space-3);
  height: var(--space-3);
}

::-webkit-scrollbar-track {
  background: var(--paper);
}

::-webkit-scrollbar-thumb {
  background: var(--field);
  border: var(--bw-2) solid var(--paper);
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--field) var(--paper);
  }
}

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a {
  color: var(--ink);
  text-decoration-thickness: var(--bw-1);
  text-underline-offset: var(--offset);
}

a:hover {
  text-decoration-thickness: var(--bw-2);
}

/* Big, unmistakable focus: a thick square accent ring with a paper gap. */
:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--offset);
}

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  color: var(--ink);
  border: var(--bw-2) solid var(--ink);
}

.skip-link:focus {
  top: var(--space-2);
}

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

/* The rules sit on inner elements so they start and end at the content edges,
   not at the edges of the gutter padding. */
.header-inner {
  display: flex;
  align-items: center;
  min-height: calc(var(--target) + var(--space-2));
  border-bottom: var(--bw-1) solid var(--rule);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: var(--target);
  padding-top: var(--space-2);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-decoration: none;
}

.logo-cells {
  font-family: var(--braille-font);
  font-size: var(--br-sm);
  font-weight: 400;
  letter-spacing: var(--track-cell-wide);
  color: var(--ink-soft);
}

.site-footer {
  margin-top: var(--section-gap);
  padding-bottom: var(--space-7);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--bw-2) solid var(--ink);
}

.site-footer p {
  margin: 0;
}

.site-footer p:last-child {
  margin-left: auto;
}

.site-footer p {
  display: flex;
  align-items: center;
  gap: var(--space-1); /* flex drops the space between "Contact:" and the link */
  min-height: var(--target);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink-soft);
}

/* ---- Type -------------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
}

/* Section headings sit under a solid ink rule, like a printed reference card. */
h2 {
  margin: 0;
  padding-top: var(--space-5); /* divider to heading */
  border-top: var(--bw-2) solid var(--ink);
  font-size: var(--fs-xl);
  font-weight: 800;
}

h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-5);
  padding: var(--space-4) 0 var(--space-3);
}

.intro {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lg);
}

/* ---- Native controls: no browser rounding ------------------------------ */

button,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* ---- Tool -------------------------------------------------------------- */

.standard {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 0 0 0 var(--space-3);
  border-left: var(--bw-2) solid var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* English box, Braille box, then one row of buttons (Copy text | Copy braille,
   Clear). Visual order matches the DOM and tab order at every width. */
.boxes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4) var(--space-2); /* 8px across: the three buttons fit one row at 375px */
}

.field-en { grid-column: 1 / -1; grid-row: 1; }
.field-br { grid-column: 1 / -1; grid-row: 2; }
.actions-en { grid-column: 1; grid-row: 3; }
.actions-br { grid-column: 2; grid-row: 3; }

/* "Try an example:" row under the buttons: full content width, secondary
   buttons that wrap onto more lines. */
.examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-5);
  gap: var(--space-2);
}

.examples-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.btn-example {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
}

.field {
  display: flex;
  flex-direction: column;
}

.field label {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--track-label);
}

textarea {
  width: 100%;
  padding: var(--space-3);
  border: var(--bw-2) solid var(--field);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lg);
  line-height: var(--lh-field);
  resize: vertical;
  overflow-wrap: anywhere; /* in the braille box this wraps at the U+200B hints after each blank cell */
}

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

textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.braille-text {
  font-family: var(--braille-font);
}

/* The braille output: a white sheet with a solid ink edge, cells spaced so
   each dot pattern reads clearly. */
textarea.sheet {
  border-color: var(--ink);
  background: var(--sheet);
  font-size: var(--br-lg);
  line-height: var(--lh-field);
  letter-spacing: var(--track-cell);
}

.counter {
  align-self: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Buttons: hover underlines the label, press nudges the button down 1px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  min-width: var(--target);
  padding: var(--space-2) var(--space-4);
  border: var(--bw-2) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--field);
}

.btn:hover {
  text-decoration: underline;
  text-underline-offset: var(--offset);
}

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

.btn:active,
.dot:active,
.faq-section summary:active {
  transform: translateY(1px);
}

.notice {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: var(--bw-2) solid var(--accent);
  background: var(--notice-bg);
  overflow-wrap: anywhere;
}

/* ---- Dot pad: laid out as a real cell ---------------------------------- */

.dotpad-wrap {
  margin-top: var(--space-5);
}

.dotpad {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: var(--bw-2) solid var(--field);
}

.dotpad-hint {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
}

.dotpad-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.dots {
  --dot-size: 64px;
  display: grid;
  grid-template-columns: repeat(2, var(--dot-size));
  grid-template-rows: repeat(3, var(--dot-size));
  grid-auto-flow: column; /* 1–3 down the left, 4–6 down the right */
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--bw-2) solid var(--rule);
  background: var(--sheet);
}

/* The button is a square target (and a square focus ring). The braille dot
   drawn inside it is round: flat dot = hollow ring, raised dot = solid disc. */
.dot {
  position: relative;
  isolation: isolate;
  width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  cursor: pointer;
}

.dot::before {
  content: "";
  position: absolute;
  inset: var(--space-1);
  z-index: -1;
  border: var(--bw-2) solid var(--field);
  border-radius: 50%; /* content shape: a braille dot */
}

.dot:hover::before {
  border-color: var(--ink);
}

.dot[aria-pressed="true"] {
  color: var(--paper);
}

.dot[aria-pressed="true"]::before {
  border-color: var(--ink);
  background: var(--ink);
}

.preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.preview-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.preview-cell {
  min-width: 1.3em;
  padding: 0 var(--space-2);
  border: var(--bw-2) solid var(--ink);
  background: var(--sheet);
  font-size: var(--br-xl);
  line-height: var(--lh-tight);
  text-align: center;
}

.preview-dots {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.dotpad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ---- Ads --------------------------------------------------------------- */

/* Fixed size (label and padding included, via border-box) so no ad can shift the layout. */
.ad-slot {
  height: 280px;
  overflow: hidden;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: var(--bw-1) solid var(--rule);
}

.ad-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

/* ---- Section rhythm ------------------------------------------------------- */

/* Large space before a section, small space inside it. Each gap is set by
   exactly one rule; the blocks themselves carry no vertical margins. */

/* Everything after the tool (ad slots and sections) starts after the section gap. */
.tool ~ * {
  margin-top: var(--section-gap);
}

/* Inside a section: heading to first block, and block to block, 16px. */
.how-section > * + *,
.chart-section > * + *,
.faq-section > * + *,
.chart-block > * + *,
.policy > section > * + *,
.prose > * + * {
  margin-top: var(--space-4);
}

/* A subheading: 32px above it, 8px below it. */
.chart-section > .chart-block + .chart-block {
  margin-top: var(--space-6);
}

.chart-block > h3 + * {
  margin-top: var(--space-2);
}

/* ---- How it works: diagram beside the text ------------------------------ */

.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4) var(--space-6);
}

.cell-figure {
  margin: 0;
}

.cell-svg {
  display: block;
  width: 170px;
  height: auto;
}

.cell-frame {
  fill: var(--sheet);
  stroke: var(--ink);
  stroke-width: 2;
}

/* SVG circles are braille dots (content), so they stay round. */
.dot-up {
  fill: var(--ink);
}

.dot-flat {
  fill: none;
  stroke: var(--field);
  stroke-width: 2;
}

.dot-num {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
}

.cell-figure figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Takes the rest of the row beside the diagram; its right edge is the content edge. */
.how-text {
  min-width: 0;
}

.how-text p {
  margin: 0;
}

.how-text p + p {
  margin-top: var(--space-4);
}

/* ---- Chart ------------------------------------------------------------- */

.table-note {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.letter-tables,
.split-tables {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption {
  padding: var(--space-1) 0;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
}

th,
td {
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: var(--bw-1) solid var(--rule);
  text-align: left;
  vertical-align: middle;
}

thead th {
  border-bottom: var(--bw-2) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}

tbody th {
  font-weight: 700;
}


.chart td.br {
  font-family: var(--braille-font);
  font-size: var(--br-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-cell-wide);
  white-space: nowrap;
}

.br-inline {
  font-family: var(--braille-font);
  font-size: var(--br-sm);
  letter-spacing: var(--track-cell);
  white-space: nowrap;
}

/* Dots column (third column in every chart table): mono figures, never split at a hyphen. */
.chart td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* Indicators table: English example, then its braille, separated by space rather than an arrow. */
.chart-indicators td:last-child {
  font-size: var(--fs-sm);
}

.ex-en {
  margin-right: var(--space-3);
  white-space: nowrap;
}

.char-name {
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---- FAQ: one list of full-width rows, +/− on the right ---------------- */

/* A 1px divider between rows only; the section divider sits above the heading. */
.faq-section details + details {
  border-top: var(--bw-1) solid var(--rule);
}

.faq-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--target);
  padding: var(--space-3) 0;
  list-style: none;
  cursor: pointer;
}

/* Focus ring drawn inside the row, its edges on the row's (and dividers') edges. */
.faq-section summary:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

/* Open: the answer starts 8px below the question. */
.faq-section details[open] > summary {
  padding-bottom: var(--space-2);
}

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

.faq-section summary::marker {
  content: "";
}

/* State shown by shape: + when closed, − when open. The alt text after "/"
   keeps screen readers from reading the symbol; <details> announces the state. */
.faq-section summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border: var(--bw-2) solid var(--field);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: calc(var(--space-6) - 2 * var(--bw-2));
  text-align: center;
}

.faq-section details[open] > summary::after {
  content: "−";
  content: "−" / "";
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.faq-section summary:hover h3 {
  text-decoration: underline;
  text-underline-offset: var(--offset);
}

.faq-section summary h3 {
  margin: 0;
  font-size: var(--fs-lg);
}

/* Padding, not margin, so the space stays inside the row above its divider. */
.faq-section details p {
  margin: 0 var(--space-7) 0 0;
  padding-bottom: var(--space-4);
}

/* ---- Privacy / tests pages -------------------------------------------- */

/* Privacy page: "Last updated" line under the H1. */
.updated {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.prose h1 {
  margin-top: var(--space-5);
}

/* Zero-specificity reset so the flow rules set every gap. */
:where(.prose, .chart-block) :where(p, ul) {
  margin: 0;
}

.prose h2 {
  font-size: var(--fs-lg);
}

/* Privacy page: each policy section starts after the section gap. */
.prose > .policy,
.policy > section + section {
  margin-top: var(--section-gap);
}

.summary {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Breakpoints ------------------------------------------------------- */

/* Phones: smaller dot pad; the four-column Indicators table tightened so it
   fits a 320px screen without wrapping a value. */
@media (max-width: 479px) {
  th,
  td {
    padding-right: var(--space-1);
  }

  .dots {
    --dot-size: 56px;
  }

  .chart-indicators td.br {
    font-size: var(--br-md-tight);
    letter-spacing: var(--track-cell);
  }

  .chart-indicators th,
  .chart-indicators td {
    padding-right: var(--space-2);
  }

  .chart-indicators .br-inline {
    font-size: var(--br-xs);
    letter-spacing: 0;
  }
}

/* Smallest phones (320px): slightly smaller chart type so every table fits
   without splitting a dot value or a braille example. */
@media (max-width: 359px) {
  :root {
    --br-md: var(--br-md-tight);
  }

  .chart thead th,
  .chart td:nth-child(3),
  .chart .char-name {
    font-size: var(--fs-xs);
  }

  .chart td.br {
    letter-spacing: 0;
  }

  .chart-indicators .br-inline {
    font-size: var(--br-2xs);
  }

  .chart-indicators thead th {
    font-size: var(--fs-2xs);
  }
}

/* Indicators table on phones: the English example above its braille. */
@media (max-width: 599px) {
  .chart .ex-en,
  .chart .br-inline {
    display: block;
  }
}

@media (min-width: 600px) {
  .how {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .letter-tables {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .split-tables {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :root {
    --br-lg: 2.25rem; /* braille output box from 900px */
  }

  .boxes {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-4) var(--space-6);
  }

  .field-en { grid-column: 1; grid-row: 1; }
  .field-br { grid-column: 2; grid-row: 1; }
  .actions-en { grid-column: 1; grid-row: 2; }
  .actions-br { grid-column: 2; grid-row: 2; }

  /* Side by side, both boxes take the height of the taller (braille) one. */
  .field-en,
  .field-br {
    align-self: stretch;
  }

  .field textarea {
    flex: 1 1 auto;
    min-height: 10rem;
  }

  /* Numbers 0–9: the three-column table beside its note instead of a sparse
     full-width table; the pair spans the content width. */
  .chart-block-numbers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
  }

  .chart-block-numbers > h3 {
    grid-column: 1 / -1;
  }

  .chart-block-numbers {
    row-gap: var(--space-2);
  }

  .chart-block.chart-block-numbers > * {
    margin-top: 0;
  }

  .actions-br {
    justify-content: space-between;
  }

  .ad-slot {
    height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .dot:active,
  .faq-section summary:active {
    transform: none;
  }
}

/* ---- Forced colours (Windows high contrast) ---------------------------- */

/* Backgrounds are replaced in this mode, so the raised dots and the diagram are
   redrawn with system colours to keep raised vs flat visible. */
@media (forced-colors: active) {
  .dot {
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }

  .dot::before {
    border-color: ButtonText;
  }

  .dot[aria-pressed="true"] {
    color: ButtonFace;
  }

  .dot[aria-pressed="true"]::before {
    border-color: ButtonText;
    background: ButtonText;
  }

  .faq-section details[open] > summary::after {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
  }

  .cell-frame {
    fill: Canvas;
    stroke: CanvasText;
  }

  .dot-up,
  .dot-num {
    fill: CanvasText;
  }

  .dot-flat {
    stroke: CanvasText;
  }
}

/* ---- Print: the alphabet chart only, black on white --------------------- */

@media print {
  :root {
    --paper: #fff;
    --sheet: #fff;
    --ink: #000;
    --ink-soft: #333;
    --field: #555;
    --rule: #999;
  }

  body {
    font-size: 11pt;
  }

  .skip-link,
  .site-header,
  .site-footer,
  .page-head,
  .tool,
  .ad-slot,
  main > section:not(.chart-section) {
    display: none;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .letter-tables {
    grid-template-columns: repeat(3, 1fr);
  }

  .split-tables {
    grid-template-columns: 1fr 1fr;
  }

  .table-wrap {
    overflow: visible;
  }

  .chart-section {
    margin-top: 0;
  }

  table,
  .chart-block {
    break-inside: avoid;
  }

  h3 {
    break-after: avoid;
  }

  .chart td.br {
    font-size: 18pt;
  }
}