/* Page styles for the ÁKSZ / FAKSZ guide (content/aksz-guide.yaml).

   Prose typography comes from css/ekr-guide.css, which is written against
   `.prose-section .prose-content` structure, not against EKR content, so this
   page loads it as is. This file adds the guide's own modules: status box,
   checker, KPI tiles, charts, timeline, event list and tables. Every class is
   `aksz-` prefixed. The blog chart styles are scoped to .blog-content and are
   not reused.

   Not purged: build_site.py runs PurgeCSS on css/editorial.css only, so the
   classes js/aksz-checker.js creates at runtime need no safelist.

   Selectors that fight editorial.css or ekr-guide.css run at 0,2,x so load
   order (all sheets are preload-swapped) does not decide the outcome. */

:root {
  --aksz-ink: var(--color-ink, #0f172a);
  --aksz-muted: #6b7280;
  --aksz-rule: #e5e7eb;
  --aksz-cobalt: var(--color-cobalt, #2563eb);
  --aksz-cobalt-soft: #eff6ff;
  --aksz-cream: var(--color-cream, #faf8f3);
}

[data-step][hidden],
.aksz-check[hidden],
.aksz-explainer[hidden] {
  display: none !important;
}

/* ---------- Wide modules inside a prose section ------------------------- */

.prose-section .prose-content.aksz-wide {
  max-width: 1120px;
}

/* ---------- Status line, answer box, transition box --------------------- */

/* Clears the breadcrumb row above it. */
section.prose-section.aksz-status-section {
  background: #ffffff;
  padding: 44px 0 8px;
}

.prose-section .prose-content .aksz-status__line {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--aksz-muted);
  margin: 0 0 20px;
}

.aksz-status .aksz-status__line strong {
  color: var(--aksz-ink);
  font-weight: 600;
}

.aksz-answer {
  border: 1px solid var(--aksz-rule);
  border-top: 3px solid var(--aksz-cobalt);
  background: var(--aksz-cream);
  padding: 20px 24px 8px;
  border-radius: 4px;
}

.aksz-status .aksz-answer__title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aksz-cobalt);
  margin: 0 0 10px;
}

.prose-section .aksz-answer .aksz-answer__list {
  margin: 0;
  padding-left: 1.2em;
}

.prose-section .aksz-answer .aksz-answer__list li {
  color: var(--aksz-ink);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 12px;
}

.aksz-answer a,
.aksz-transition a {
  color: var(--aksz-cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aksz-transition {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px dashed var(--aksz-ink);
  background: #ffffff;
}

.prose-section .prose-content .aksz-transition .aksz-transition__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aksz-ink);
  margin: 0 0 4px;
}

.prose-section .prose-content .aksz-transition p {
  margin: 0;
  color: var(--aksz-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- Checker ------------------------------------------------------- */

.aksz-checker-section .aksz-checker__intro {
  max-width: 62ch;
}

.aksz-checker {
  max-width: 760px;
  margin: 20px 0 0;
}

.aksz-checker .aksz-step {
  border: 1px solid var(--aksz-rule);
  border-radius: 6px;
  padding: 16px 18px 18px;
  margin: 0 0 14px;
  background: #ffffff;
  min-width: 0;
}

.aksz-checker .aksz-step__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  margin-left: -6px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--aksz-ink);
}

.aksz-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--aksz-ink);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  flex: none;
}

.aksz-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.aksz-options--inline {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.aksz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--aksz-rule);
  border-radius: 6px;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.aksz-option:hover {
  border-color: var(--aksz-cobalt);
}

.aksz-option:has(input:checked) {
  border-color: var(--aksz-cobalt);
  background: var(--aksz-cobalt-soft);
  box-shadow: inset 0 0 0 1px var(--aksz-cobalt);
}

.aksz-option:has(input:focus-visible) {
  outline: 2px solid var(--aksz-cobalt);
  outline-offset: 2px;
}

.aksz-option input {
  margin-top: 3px;
  accent-color: var(--aksz-cobalt);
  flex: none;
}

.aksz-option__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aksz-option__label {
  color: var(--aksz-ink);
  font-size: 0.95rem;
  line-height: 1.35;
}

.aksz-option__hint {
  color: var(--aksz-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.aksz-checker .aksz-unknown {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--aksz-cobalt);
  font: inherit;
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.aksz-checker .aksz-unknown:focus-visible {
  outline: 2px solid var(--aksz-cobalt);
  outline-offset: 2px;
}

.aksz-checker .aksz-explainer {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--aksz-cream);
  border-radius: 4px;
}

.prose-section .prose-content .aksz-explainer p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 6px;
}

.aksz-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--aksz-ink);
  cursor: pointer;
}

.aksz-check input {
  margin-top: 4px;
  accent-color: var(--aksz-cobalt);
}

.aksz-field {
  display: block;
  margin-top: 10px;
}

.aksz-field__label {
  display: block;
  font-size: 0.9rem;
  color: var(--aksz-ink);
  margin-bottom: 4px;
}

.aksz-field__wrap {
  display: flex;
  align-items: center;
  max-width: 320px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
}

.aksz-field__wrap:focus-within {
  border-color: var(--aksz-cobalt);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.aksz-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--aksz-ink);
}

.aksz-field__input:focus {
  outline: none;
}

.aksz-field__unit {
  padding: 0 12px;
  color: var(--aksz-muted);
}

.prose-section .prose-content .aksz-field__hint,
.prose-section .prose-content .aksz-field__echo,
.prose-section .prose-content .aksz-field__threshold {
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 6px 0 0;
  color: var(--aksz-muted);
}

.prose-section .prose-content .aksz-field__echo:empty,
.prose-section .prose-content .aksz-field__threshold:empty {
  display: none;
}

.prose-section .prose-content .aksz-field__threshold {
  color: var(--aksz-ink);
}

/* Result card */

.aksz-result {
  max-width: 760px;
}

.aksz-result__card {
  margin-top: 6px;
  padding: 18px 20px 14px;
  border-radius: 6px;
  border: 1px solid var(--aksz-rule);
  border-left-width: 6px;
  background: #ffffff;
}

.aksz-result__card--yes {
  border-left-color: var(--aksz-cobalt);
  border-left-style: solid;
}

.aksz-result__card--no {
  border-left-color: var(--aksz-ink);
  border-left-style: dashed;
}

.prose-section .prose-content .aksz-result__verdict {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--aksz-ink);
  margin: 0 0 8px;
}

.aksz-result__card--yes .aksz-result__verdict {
  color: var(--aksz-cobalt) !important;
}

.prose-section .prose-content .aksz-result__basis,
.prose-section .prose-content .aksz-result__applied,
.prose-section .prose-content .aksz-result__next,
.prose-section .prose-content .aksz-result__transition,
.prose-section .prose-content .aksz-result__rules,
.prose-section .prose-content .aksz-result__error {
  font-size: 0.93rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.prose-section .prose-content .aksz-result__reasons {
  margin: 0 0 10px;
  padding-left: 1.2em;
}

.prose-section .prose-content .aksz-result__reasons li {
  font-size: 0.93rem;
  line-height: 1.5;
  margin-bottom: 4px;
}

.prose-section .prose-content .aksz-result__transition {
  padding: 8px 12px;
  background: var(--aksz-cream);
  border-radius: 4px;
}

.prose-section .prose-content .aksz-result__rules {
  color: var(--aksz-muted);
  font-size: 0.82rem;
  margin: 4px 0 0;
}

.prose-section .prose-content .aksz-result__error {
  color: #991b1b;
}

.prose-section .prose-content .aksz-disclaimer {
  font-size: 0.82rem;
  color: var(--aksz-muted);
  margin-top: 14px;
}

/* ---------- KPI tiles ------------------------------------------------------- */

section.prose-section.aksz-kpi-section {
  background: #ffffff;
  padding: 0 0 40px;
}

/* Prose that continues the section above the KPI tiles (no H2 of its own). */
section.prose-section.aksz-prose-continued {
  padding-top: 0;
}

.prose-section .prose-content ul.aksz-kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.prose-section .prose-content .aksz-kpi {
  margin: 0;
  border: 1px solid var(--aksz-rule);
  border-top: 3px solid var(--aksz-cobalt);
  border-radius: 4px;
  padding: 14px 16px 16px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aksz-kpi__value {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--aksz-ink);
  font-variant-numeric: tabular-nums;
}

.aksz-kpi__label {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--aksz-ink);
}

.prose-section .prose-content .aksz-kpis__source {
  font-size: 0.8rem;
  color: var(--aksz-muted);
  margin: 10px 0 0;
}

@media (max-width: 720px) {
  .aksz-kpi__value {
    font-size: 1.8rem;
  }
}

/* ---------- Charts ---------------------------------------------------------- */

.prose-section .prose-content figure.aksz-chart {
  margin: 28px 0 6px;
}

/* Visible title; the svg <title> carries the accessible name, so this one is
   aria-hidden to avoid reading it twice. */
.prose-section .prose-content .aksz-chart__title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--aksz-ink);
  margin: 0 0 10px;
}

.prose-section .prose-content figure.aksz-chart svg,
.prose-section .prose-content figure.aksz-timeline svg {
  display: block;
  width: 100%;
  height: auto;
}

.prose-section .prose-content figure.chart figcaption {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--aksz-muted);
  margin-top: 8px;
}

/* The bar charts carry their labels above the bars at a 400-unit viewBox.
   Capped so they do not blow up to 20px text in the desktop column. */
.prose-section .prose-content figure.aksz-chart--split svg,
.prose-section .prose-content figure.aksz-chart--categories svg {
  max-width: 460px;
}

.prose-section .prose-content figure.aksz-chart--history svg {
  max-width: 560px;
}

.prose-section .prose-content .aksz-chart-data {
  margin: 4px 0 20px;
}

.prose-section .prose-content .aksz-chart-data > summary {
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--aksz-cobalt);
}

.prose-section .prose-content .aksz-method {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--aksz-rule);
}

.prose-section .prose-content .aksz-method p {
  font-size: 0.88rem;
  color: var(--aksz-muted);
}

/* ---------- Timeline -------------------------------------------------------- */

/* flow-root: with no top padding the figure's margin would collapse through
   the section and open a strip of body background above it. */
.aksz-timeline-section.prose-section {
  padding-top: 0;
  display: flow-root;
}

.prose-section .prose-content figure.aksz-timeline {
  margin: 8px 0 28px;
}

.aksz-timeline__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--aksz-rule);
  border-radius: 4px;
}

/* Below 720px the timeline keeps a legible size and scrolls sideways. The
   list and the table below carry the same content in reading order, and a tap
   opens the full-screen viewer (js/lightbox.js). */
@media (max-width: 720px) {
  .prose-section .prose-content figure.aksz-timeline svg {
    width: 900px;
    max-width: none;
  }
}

.prose-section .prose-content .aksz-timeline__list-title,
.prose-section .prose-content .aksz-timeline__table-title {
  margin-top: 24px;
}

.prose-section .prose-content ol.aksz-events {
  list-style: none;
  padding: 0;
  margin: 12px 0 8px;
  columns: 2 420px;
  column-gap: 32px;
}

.prose-section .prose-content .aksz-events__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  break-inside: avoid;
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.aksz-events__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--aksz-ink);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

.is-expected .aksz-events__num {
  background: #ffffff;
  color: var(--aksz-ink);
  border: 1.5px dashed var(--aksz-ink);
}

.aksz-events__tag {
  color: var(--aksz-muted);
}

.prose-section .prose-content a.aksz-src {
  font-size: 0.78rem;
  color: var(--aksz-muted);
  white-space: nowrap;
}

/* ---------- Tables ------------------------------------------------------------ */

.aksz-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aksz-table-wrap:focus-visible {
  outline: 2px solid var(--aksz-cobalt);
  outline-offset: 2px;
}

.prose-section .prose-content table.aksz-promises {
  min-width: 640px;
}

.prose-section .prose-content table.aksz-table tbody th {
  text-align: left;
  font-weight: 600;
  vertical-align: top;
}

.prose-section .prose-content table.aksz-table td {
  vertical-align: top;
}

/* ---------- Sources and change log -------------------------------------------- */

.prose-section .prose-content ul.aksz-sources li {
  font-size: 0.9rem;
}

.aksz-sources__note {
  color: var(--aksz-muted);
}

.prose-section .prose-content ol.aksz-changelog {
  list-style: none;
  padding: 0;
}

.prose-section .prose-content ol.aksz-changelog li {
  font-size: 0.9rem;
}

.prose-section .prose-content ol.aksz-changelog time {
  font-weight: 600;
  margin-right: 6px;
}

/* "Last checked" info card, last element of the sources section. */
.prose-section .prose-content .aksz-info-card {
  margin-top: 28px;
  padding: 16px 20px;
  border: 1px solid var(--aksz-rule);
  border-left: 3px solid var(--aksz-cobalt);
  background: var(--aksz-cream);
  border-radius: 4px;
}

.prose-section .prose-content .aksz-info-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--aksz-muted);
  margin: 0;
}

.prose-section .prose-content .aksz-info-card strong {
  color: var(--aksz-ink);
  font-weight: 600;
}

/* Answered checker steps: only the chosen option plus a "change" button. */
.aksz-step__edit {
  display: none;
  align-self: center;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--aksz-rule);
  border-radius: 6px;
  background: #ffffff;
  color: var(--aksz-cobalt);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.aksz-step__edit:hover {
  border-color: var(--aksz-cobalt);
}

.aksz-step__edit:focus-visible {
  outline: 2px solid var(--aksz-cobalt);
  outline-offset: 2px;
}

.aksz-step.aksz-step--collapsed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.aksz-step--collapsed .aksz-step__edit {
  display: inline-block;
}

.aksz-step--collapsed .aksz-options {
  display: block;
  flex: 1 1 260px;
  margin-top: 0;
}

.aksz-step--collapsed .aksz-option:not(.is-selected),
.aksz-step--collapsed .aksz-unknown,
.aksz-step--collapsed .aksz-explainer,
.aksz-step--collapsed .aksz-field,
.aksz-step--collapsed .aksz-field__hint {
  display: none !important;
}

.aksz-step--collapsed .aksz-option.is-selected {
  cursor: default;
}

.aksz-step--collapsed .aksz-check {
  flex-basis: 100%;
}

.aksz-step--collapsed .aksz-field__echo {
  flex: 1 1 260px;
  margin: 0;
  font-weight: 600;
  color: var(--aksz-ink);
}

/* "Röviden" answer box, collapsed by default (native <details>). */
.aksz-answer > .aksz-answer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding-bottom: 12px;
}

.aksz-answer > .aksz-answer__summary::-webkit-details-marker {
  display: none;
}

.aksz-answer > .aksz-answer__summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--aksz-cobalt);
  border-bottom: 2px solid var(--aksz-cobalt);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}

.aksz-answer[open] > .aksz-answer__summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.aksz-answer > .aksz-answer__summary:focus-visible {
  outline: 2px solid var(--aksz-cobalt);
  outline-offset: 4px;
}

.aksz-status .aksz-answer .aksz-answer__title {
  margin: 0;
}

/* Related tool link under the checker. */
.prose-section .prose-content .aksz-related {
  margin-top: 20px;
}

.prose-section .prose-content .aksz-related .aksz-related__title {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aksz-muted);
}

.prose-section .prose-content a.aksz-related__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--aksz-cobalt);
  border-radius: 6px;
  color: var(--aksz-cobalt);
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
}

.prose-section .prose-content a.aksz-related__btn:hover {
  background: var(--aksz-cobalt-soft);
}

.prose-section .prose-content .aksz-info-card p + p {
  margin-top: 8px;
}

.aksz-answer:not([open]) {
  padding-bottom: 20px;
}

.aksz-answer:not([open]) > .aksz-answer__summary {
  padding-bottom: 0;
}

/* One statute reference above a sub-heading instead of one per sentence. */
.prose-section .prose-content p.aksz-eyebrow {
  margin: 28px 0 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aksz-muted);
}

.prose-section .prose-content p.aksz-eyebrow + h3.aksz-eyebrow-heading {
  margin-top: 0;
}

/* Eyebrow above a section H2 (the H2 then lives in body_html). The chapter
   hairline and cobalt tick move from the H2 onto the eyebrow, so the order
   reads rule, reference, heading. */
.prose-section .prose-content > p.aksz-eyebrow:has(+ h2.aksz-eyebrow-heading) {
  position: relative;
  margin: 0 0 6px;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-rule);
}

.prose-section .prose-content > p.aksz-eyebrow:has(+ h2.aksz-eyebrow-heading)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.25rem;
  height: 2px;
  background: var(--color-cobalt);
}

.prose-section .prose-content > p.aksz-eyebrow + h2.aksz-eyebrow-heading {
  padding-top: 0;
  border-top: 0;
}

.prose-section .prose-content > p.aksz-eyebrow + h2.aksz-eyebrow-heading::before {
  content: none;
}

@media (max-width: 767px) {
  .prose-section .prose-content > p.aksz-eyebrow:has(+ h2.aksz-eyebrow-heading) {
    padding-top: 1.25rem;
  }
}

/* One short reference line under a box ("underline below"). */
.prose-section .prose-content .aksz-transition p.aksz-ref,
.prose-section .prose-content p.aksz-ref {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aksz-muted);
}

/* Collapsible sub-sections (timeline event list), closed by default. Content
   stays in the DOM, so it is crawlable. */
.aksz-collapsible {
  margin-top: 24px;
  border-top: 1px solid var(--aksz-rule);
  border-bottom: 1px solid var(--aksz-rule);
}

.aksz-collapsible > .aksz-collapsible__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

.aksz-collapsible > .aksz-collapsible__summary::-webkit-details-marker {
  display: none;
}

.prose-section .prose-content .aksz-collapsible > .aksz-collapsible__summary h3 {
  margin: 0;
}

.aksz-collapsible > .aksz-collapsible__summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--aksz-cobalt);
  border-bottom: 2px solid var(--aksz-cobalt);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}

.aksz-collapsible[open] > .aksz-collapsible__summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.aksz-collapsible > .aksz-collapsible__summary:focus-visible {
  outline: 2px solid var(--aksz-cobalt);
  outline-offset: 4px;
}

.aksz-collapsible[open] {
  padding-bottom: 12px;
}

/* Chart captions: short label visible, full text visually hidden but in the
   DOM (crawlable, screen readers) and shown by js/lightbox.js. */
figure.aksz-chart figcaption .chart-cap__full,
figure.aksz-timeline figcaption .chart-cap__full {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.prose-section .prose-content ul.aksz-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prose-section .prose-content ul.aksz-related__list li {
  margin: 0;
  padding: 0;
}

.prose-section .prose-content ul.aksz-related__list li::before {
  content: none;
}

/* Related pages: equal-size buttons, three across, stacked on narrow screens. */
.prose-section .prose-content ul.aksz-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.prose-section .prose-content ul.aksz-related__list li {
  display: flex;
}

.prose-section .prose-content ul.aksz-related__list a.aksz-related__btn {
  flex: 1;
  justify-content: space-between;
  min-height: 64px;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .prose-section .prose-content ul.aksz-related__list {
    grid-template-columns: 1fr;
  }
  .prose-section .prose-content ul.aksz-related__list a.aksz-related__btn {
    min-height: 0;
  }
}

.prose-section .prose-content ul.aksz-related__list a.aksz-related__btn {
  gap: 10px;
}

.aksz-related__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.aksz-related__label {
  flex: 1;
}

.aksz-related__arrow {
  flex: none;
}

/* Final layout: one full-width row per page, so all buttons share one size. */
.prose-section .prose-content ul.aksz-related__list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.prose-section .prose-content ul.aksz-related__list a.aksz-related__btn {
  min-height: 0;
  padding: 12px 16px;
}