/* Styles for the generated conjugation reference at /words/ (see
   tool/render_reference.dart, which emits markup only).

   Loaded after styles.css and built on its tokens, so the reference reads as
   the same site as the landing page. The header here is static rather than the
   landing's fixed .site-header: these pages are long lists, and a bar that
   floats over them costs a row of the table on every phone. */

:root {
  /* The play button's size, and the width every form row reserves for it.
     One value because the two must agree: each row is its own grid, so an
     `auto` track would collapse on the rows whose surface has no clip and
     shift their conjugation ~15px right of the rows that do. */
  --play-size: 38px;
}

/* ------------------------------------------------------------ page chrome */

.ref-header {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.ref-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 16px;
}

.ref-header .brand {
  font-size: 18px;
}

.ref-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.ref-nav a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink-soft);
}

.ref-nav a:hover,
.ref-nav a:focus-visible {
  color: var(--navy);
  background: var(--blue-pale);
}

.ref-nav .ref-cta {
  color: #fff;
  background: var(--navy);
}

.ref-nav .ref-cta:hover,
.ref-nav .ref-cta:focus-visible {
  color: #fff;
  background: var(--blue);
}

.ref-main {
  padding: 28px 0 56px;
}

.ref-footer {
  border-top: 1px solid var(--border);
  background: var(--white);
}

.ref-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 22px 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.ref-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.ref-footer a:hover,
.ref-footer a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
}

/* -------------------------------------------------------------- word page */

/* A reading column, centred in the shell: the table is one narrow list and
   pinning it to the left of a wide window leaves the page looking unfinished. */
.word {
  max-width: 760px;
  margin-inline: auto;
}

.word-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.word-class {
  margin: 0;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.word-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.word-title h1 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(30px, 7vw, 42px);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.word-reading {
  margin-left: 12px;
  color: var(--ink-soft);
  font-size: 0.5em;
  font-weight: 700;
}

.word-meta {
  margin: 6px 0 0;
  color: var(--ink-soft);
}

/* "Also read きく: 効く (be effective)." and "Looking for toru?" — the two
   lines that answer a reader who followed a romaji URL to the wrong homophone.
   Set apart from the table but not shouted: whoever landed on the right page
   should be able to skip them in one glance. */
.word-aka {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.word-aka a {
  color: var(--navy);
  font-weight: 700;
}

.word-aka a:hover,
.word-aka a:focus-visible {
  text-decoration: underline;
}

/* What is true of this word and not of its class, in one line under the
   header: the kana spelling, the other senses, transitivity. */
.word-facts {
  margin: 14px 0 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ------------------------------------------------------------ pattern card */

/* The class rule as a picture: the rule in a sentence, the stem drawn, then
   stem + ending = form, one row each. The kana that moves is coral — the
   site's one accent, spent on the one thing the card exists to point at —
   and the ending is navy. Same box as the table below it. */
.pattern {
  margin: 20px 0 0;
  padding: 22px 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
}

.pattern-eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pattern h2 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.pattern h2 [lang="ja"] {
  letter-spacing: 0;
}

.pattern-sub,
.pattern-foot {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.pattern-foot {
  margin-top: 16px;
}

.pattern-foot [lang="ja"] {
  color: var(--ink);
  font-weight: 600;
}

/* かわいい with the い struck through: the word on one baseline, the kana that
   drops marked in it, and a small tag saying so. */
.stem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
}

.stem-word {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.stem-kana {
  color: var(--coral);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-skip-ink: none;
}

.stem-cap {
  padding: 1px 7px;
  border-radius: 5px;
  color: #a5412f;
  background: var(--coral-pale);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stem-label {
  color: var(--ink-soft);
  font-size: 13px;
}

/* The godan card: one column per kana the last one becomes, the forms built
   on it underneath. Columns wrap rather than squeeze — three and two on a
   phone. */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0 10px;
  margin: 18px 0 0;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--border);
}

.col-kana {
  color: var(--coral);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.cf {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cf-word {
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.cf small {
  color: var(--ink-soft);
  font-size: 12px;
}

.cf .note {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 5px;
  color: #a5412f;
  background: var(--coral-pale);
  font-size: 11px;
  font-weight: 800;
}

/* The て and た forms under the columns: the kana they change to, then the
   two forms beside it. */
.onbin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}

.onbin-title {
  flex-basis: 100%;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.en {
  color: var(--navy);
  font-weight: inherit;
}

/* stem + ending = form, four cells a row. */
.rows {
  display: grid;
  align-items: baseline;
  grid-template-columns: max-content max-content max-content 1fr;
  column-gap: 14px;
  margin: 16px 0 0;
  border-top: 1px solid var(--border);
}

.rows > * {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.rows-title {
  grid-column: 1 / -1;
  padding: 12px 0 4px;
  border-bottom: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.r-stem {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.r-end {
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  white-space: nowrap;
}

.r-end::before {
  content: "+ ";
  color: var(--ink-soft);
  font-weight: 500;
}

/* できる beside an empty stem: the form is its own word, nothing is added. */
.r-whole::before {
  content: none;
}

.r-out {
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
}

.r-out::before {
  content: "= ";
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 500;
}

.r-lab {
  color: var(--ink-soft);
  font-size: 13px;
}

.r-lab em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

.r-lab .note {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 5px;
  color: #a5412f;
  background: var(--coral-pale);
  font-size: 11px;
  font-weight: 800;
}

.mv {
  color: var(--coral);
  font-weight: inherit;
}

/* Romaji ships in every page's HTML — that is what lets a search for
   "oyogu te form" find the page — and is hidden until asked for, because the
   reader who wants it is a minority and everyone else is here for the kana.
   The html class is set from localStorage before first paint (inline script
   in the renderer's _head) and toggled by reference.js. */
.romaji {
  display: none;
  color: var(--ink-soft);
}

html.romaji-on .romaji {
  display: block;
}

/* The headword's romaji is the exception to the toggle above: it is what a
   reader who searched "oyogu conjugation" came to have confirmed, and since
   the URL became /words/oyogu/ it is the page's own name. Always shown. */
.word-romaji {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}

.surface-romaji {
  font-size: 13px;
}

.romaji-toggle {
  margin-top: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--navy);
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.romaji-toggle:hover,
.romaji-toggle:focus-visible {
  border-color: rgba(21, 61, 104, 0.3);
  background: var(--blue-pale);
}

.romaji-toggle .when-on,
html.romaji-on .romaji-toggle .when-off {
  display: none;
}

html.romaji-on .romaji-toggle .when-on {
  display: inline;
}

/* The legend, in the same visual language as the rows it explains: the level
   sample is the tag itself, the rarity sample is set at the rows' opacity. */
.word-key {
  margin: 16px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
}

.word-key p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.word-key p + p {
  margin-top: 6px;
}

.dimmed-sample {
  flex: none;
  opacity: 0.55;
  font-weight: 700;
}

.level-tag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid rgba(21, 61, 104, 0.24);
  border-radius: 5px;
  color: var(--navy);
  background: rgba(21, 61, 104, 0.07);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

/* The page's one sentence about the word — who it is, its class, four of
   its forms — under the header and above the card. It is also the meta
   description; on the page it is the line an answer engine quotes. */
.word-lead {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

.word-lead [lang="ja"] {
  font-weight: 600;
}

.form-group h2 {
  margin: 30px 0 6px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

/* Each paradigm is a real <table>: a form name in a row header, the
   conjugation beside it, so what a search engine or an answer engine
   extracts is "te-form → 食べて" and not a run of spans. The look is the
   list it replaced — one box, a rule between rows, two columns of 2:3 and
   the play button's fixed track — so the column header row is there for
   the semantics and hidden from sight. border-collapse stays separate: a
   collapsed table cannot round its corners. */
.form-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
}

.form-table thead {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-table th,
.form-table td {
  padding: 13px 18px 13px 0;
  border: 0;
  vertical-align: top;
  text-align: left;
  font-weight: inherit;
}

.form-table th:first-child {
  padding-left: 16px;
}

.form-table td:last-child {
  width: var(--play-size);
  padding-right: 16px;
}

.form-row + .form-row > * {
  border-top: 1px solid var(--border);
}

.form-meaning {
  width: 40%;
}

/* What the flex row used to do: label, tag and prompt wrap together. */
.form-meaning-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
}

.form-label {
  color: var(--ink-soft);
}

.form-prompt {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
}

.surface-primary {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}

.surface-secondary {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
}

/* A form the game never quizzes because it barely occurs in speech. Dimmed,
   never hidden: the paradigm stays complete. The level tag keeps its contrast,
   because a row can be both rare and above your level and those two marks say
   different things. */
.dimmed .form-label,
.dimmed .form-prompt,
.dimmed .form-surface,
.dimmed .play {
  opacity: 0.55;
}

.play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--play-size);
  height: var(--play-size);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--navy);
  background: var(--white);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.play svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.play:hover,
.play:focus-visible {
  border-color: rgba(21, 61, 104, 0.3);
  background: var(--blue-pale);
}

.play.is-playing {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

.play-word {
  width: 44px;
  height: 44px;
}

/* Under the table: the words either side of this one in its class, the ones
   at its level, and the lists it belongs to. Rows are dropped rather than
   left empty — 死ぬ is the only ぬ-verb in modern Japanese and has no
   neighbours at all — so nothing here can render a label with no links. */
.related {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.related-walk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  font-weight: 700;
}

.related-class {
  color: var(--ink-soft);
}

.related-row {
  margin: 12px 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.related a {
  color: var(--navy);
  font-weight: 700;
}

.related a:hover,
.related a:focus-visible {
  text-decoration: underline;
}

/* One rule above the block, not two: .related has already drawn it. */
.related + .word-nav {
  margin-top: 20px;
  padding-top: 0;
  border-top: none;
}

.word-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.word-nav a:not(.button-ref) {
  color: var(--ink-soft);
}

.word-nav a:hover,
.word-nav a:focus-visible {
  color: var(--navy);
}

.button-ref {
  padding: 11px 18px;
  border-radius: 12px;
  color: #fff;
  background: var(--navy);
}

.button-ref:hover,
.button-ref:focus-visible {
  color: #fff;
  background: var(--blue);
}

/* -------------------------------------------------------------- about page */

/* Prose in the word page's column: the same box widths, a heading scale
   between the word h1 and the table's group labels. */
.about-lead,
.about > p {
  max-width: 66ch;
  color: var(--ink);
  line-height: 1.65;
}

.about-lead {
  margin: 20px 0 0;
  font-size: 18px;
}

.about h2 {
  margin: 34px 0 6px;
  color: var(--navy);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.about > p {
  margin: 10px 0 0;
}

.about a {
  color: var(--navy);
  font-weight: 700;
}

.about a:hover,
.about a:focus-visible {
  text-decoration: underline;
}

.about-updated {
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ------------------------------------------------------------ breadcrumbs */

/* Above the h1 on every page but the index: the way back up, and the trail a
   search result shows in place of a URL. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.crumbs a:hover,
.crumbs a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
}

.crumbs [aria-hidden] {
  opacity: 0.5;
}

.crumbs [aria-current] {
  color: var(--ink);
}

/* --------------------------------------------------------------- list hubs */

/* One row per conjugation class on each form hub: the exemplar's dictionary
   form, the same word in this form, and the edit between them. */
/* The table scrolls inside its own box rather than widening the page: three
   columns of Japanese are wider than a phone, and a table left to overflow
   takes the whole document with it. */
.rule-scroll {
  max-width: 100%;
  margin: 22px 0 8px;
  overflow-x: auto;
}

.rule-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rule-table caption {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}

.rule-table th,
.rule-table td {
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.rule-table th {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rule-table td:first-child {
  color: var(--ink-soft);
}

.rule-table td:last-child {
  font-weight: 700;
}

/* The conjugated surface on a form hub's tile, under the headword. */
.tile-form {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}

.tile-form-kana {
  margin-left: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

/* The index's browse strip: three rows of links to the 35 list hubs, above
   the word list and outside it — word-search.js filters what is inside
   [data-word-list], and these must not disappear when a search narrows it. */
.browse {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
}

.browse-row h2 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.browse-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.browse-row a {
  display: block;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.browse-row a:hover,
.browse-row a:focus-visible {
  color: var(--navy);
  border-color: rgba(21, 61, 104, 0.28);
  background: var(--blue-pale);
}

/* The two hub links under each level heading on the index. */
.level-hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: -4px 0 10px;
  color: var(--ink-soft);
  font-size: 13px;
}

.level-hubs a {
  font-weight: 700;
}

.level-hubs a:hover,
.level-hubs a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
}

/* ------------------------------------------------------------- index page */

.index-head {
  max-width: 720px;
}

.index-head h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.index-head > p {
  color: var(--ink-soft);
}

.index-search {
  margin-top: 6px;
}

.index-empty {
  color: var(--ink-soft);
}

.word-index section {
  margin-top: 34px;
}

.word-index h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.word-index h2 span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.word-index ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every conjugable word is on this one page, which is what makes the search
   need no index of its own — and what makes off-screen layout the page's whole
   cost. content-visibility hands that back to the browser. */
.word-index li {
  content-visibility: auto;
  contain-intrinsic-size: auto 74px;
}

.word-index li a {
  display: block;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  transition: border-color 140ms ease, transform 140ms ease;
}

.word-index li a:hover,
.word-index li a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(21, 61, 104, 0.28);
}

.tile-word {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.tile-reading {
  margin-left: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.tile-meta {
  display: block;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pattern {
    padding: 18px 16px 16px;
  }

  .pattern h2 {
    font-size: 19px;
  }

  .stem-word {
    font-size: 24px;
  }

  .cols {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }

  .col-kana {
    font-size: 22px;
  }

  .cf-word {
    font-size: 17px;
  }

  /* Two lines per form: stem + ending, then the result and its label. */
  .rows {
    grid-template-columns: max-content max-content 1fr;
    column-gap: 10px;
  }

  .r-stem,
  .r-end {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 17px;
  }

  .r-out {
    grid-column: 1 / 3;
    padding-top: 2px;
    font-size: 19px;
  }

  .r-out::before {
    content: "→ ";
  }

  .r-lab {
    grid-column: 3;
    padding-top: 2px;
  }

  /* On a phone the form name sits above its conjugation, as before. This
     is the one place the table gives up its table display: a row becomes a
     two-column grid, name spanning both, button in the second. The markup
     is unchanged, so what is extracted is the same on every width. */
  .form-row {
    display: grid;
    gap: 6px 18px;
    grid-template-columns: minmax(0, 1fr) var(--play-size);
    padding: 13px 16px;
  }

  .form-row + .form-row {
    border-top: 1px solid var(--border);
  }

  .form-row > * {
    display: block;
    width: auto;
    padding: 0;
  }

  .form-row + .form-row > * {
    border-top: 0;
  }

  .form-meaning {
    grid-column: 1 / -1;
  }

  .ref-header-inner {
    gap: 8px;
  }

  .ref-nav a {
    padding: 8px 10px;
  }
}