/* ==========================================================================
   ShopFront — Policy documents
   --------------------------------------------------------------------------
   Shared by the three documents that state the shop's rules: terms.html,
   returns.html and shipping.html. They are one component with three sets of
   copy, so they get one sheet rather than three near-identical ones that
   would drift apart the first time a heading changed.

   Loaded after page.css, which already carries what these pages have in
   common with about / faq / contact — the breadcrumb, the gradient page
   hero, the CTA band and the two on-brand button variants. Nothing here
   overrides it; this sheet only adds the document itself: the summary card
   in the hero, the highlight band, the sticky table of contents, the prose
   scale, the callouts, the tables, the step list and the cross-links.

   House rules, unchanged and not negotiable:
     · no raw colour, no raw shadow, no off-grid spacing — tokens only;
     · logical properties throughout (dir="rtl", so inline-start = right);
     · the design is FLAT. Surfaces separate by border and tone.

   Two things a legal document needs that a marketing page does not, and
   both are handled here rather than left to the browser:
     · a measure. Body copy is capped near 78 characters, because a clause
       set at full container width is unreadable at 1440px.
     · a printable form. A visitor who is about to spend money is entitled
       to keep a copy, so section 11 below turns the whole page into a clean
       black-on-white document with the chrome stripped out.

   Contents
     01 · HERO SUMMARY CARD
     02 · HIGHLIGHT BAND
     03 · DOCUMENT LAYOUT
     04 · TABLE OF CONTENTS
     05 · PROSE
     06 · CALLOUTS
     07 · TABLES
     08 · STEP LIST
     09 · DEFINITION & CHECK LISTS
     10 · CROSS-LINKS
     11 · RESPONSIVE
     12 · MOTION, CONTRAST, PRINT
   ========================================================================== */


/* ==========================================================================
   01 · HERO SUMMARY CARD
   --------------------------------------------------------------------------
   The artwork column of .page-hero, holding the four facts the document
   spends the next few thousand words qualifying. A visitor who reads only
   this box should already have the right answer to the common case.
   ========================================================================== */

/* Chips under the title: revision date, version, reading time. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-sm);
  margin-block-start: var(--space-1);
}

.doc-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  padding: var(--space-1-5) var(--space-3);
  border: var(--border-hairline) solid var(--border-inverse);
  border-radius: var(--radius-pill);
  background: oklch(0 0 0 / 0.16);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.doc-summary {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-7);
  border: var(--border-thin) solid var(--border-inverse);
  border-radius: var(--radius-3xl);
  background: oklch(0 0 0 / 0.18);
}

.doc-summary__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: inherit;
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
}

.doc-summary__list {
  display: grid;
  gap: var(--space-3);
}

.doc-summary__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--gap-inline-md);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hairline) solid var(--border-inverse);
}
.doc-summary__list li:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.doc-summary__list .icon {
  margin-block-start: var(--space-0-5);
  flex: none;
  font-size: var(--icon-md);
}

.doc-summary__list b {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.doc-summary__list span {
  display: block;
  margin-block-start: var(--space-0-5);
  opacity: 0.82;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}


/* ==========================================================================
   02 · HIGHLIGHT BAND
   ========================================================================== */

.doc-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
  margin-block-start: var(--space-8);
}

.doc-highlight {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  transition: var(--transition-colors);
}
.doc-highlight:hover {
  border-color: var(--border-brand);
}

.doc-highlight b {
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
}

.doc-highlight span {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}


/* ==========================================================================
   03 · DOCUMENT LAYOUT
   ========================================================================== */

.doc {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-12);
  margin-block-start: var(--section-gap);
}

.doc-body {
  min-inline-size: 0;
}

.doc-section + .doc-section {
  margin-block-start: var(--space-14);
}

/* Anchored headings land under the sticky header otherwise. The same
   offset the help centre uses for its accordion rows. */
.doc-section {
  scroll-margin-block-start: calc(var(--header-height-compact) + var(--space-16));
}


/* ==========================================================================
   04 · TABLE OF CONTENTS
   --------------------------------------------------------------------------
   A nav, not a list of links dressed as one: it is the primary way anyone
   reads a document this long. It sticks below the site header on desktop
   and turns into the same horizontal chip rail .page-nav uses once the
   column is gone.

   The active row is marked by legal.js with `data-current`, which is set
   from an IntersectionObserver rather than from :target — a visitor who
   scrolls past a section without clicking anything still sees where they
   are.
   ========================================================================== */

.doc-toc {
  position: sticky;
  inset-block-start: calc(var(--header-height-compact) + var(--space-4));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  max-block-size: calc(100vh - var(--header-height-compact) - var(--space-10));
  overflow: auto;
  overscroll-behavior: contain;
}

.doc-toc__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
}
.doc-toc__title .icon {
  color: var(--brand);
}

.doc-toc__list {
  display: grid;
  gap: var(--space-0-5);
  counter-reset: toc;
}

.doc-toc__list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--gap-inline-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  transition: var(--transition-colors);
}
.doc-toc__list a::before {
  counter-increment: toc;
  content: counter(toc, persian) ".";
  color: var(--fg-subtle);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.doc-toc__list a:hover {
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.doc-toc__list a[data-current="true"] {
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-weight: var(--weight-bold);
}
.doc-toc__list a[data-current="true"]::before {
  color: var(--brand);
}

/* Print control at the foot of the column. Hidden from the printed page
   itself, for the obvious reason. */
.doc-toc__print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline-sm);
  min-block-size: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--fg-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.doc-toc__print:hover {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}


/* ==========================================================================
   05 · PROSE
   --------------------------------------------------------------------------
   The measure is set on the elements that carry running text rather than on
   the column, so tables and callouts stay full width while paragraphs stop
   at a readable line length.
   ========================================================================== */

.doc-section__head {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}

.doc-section__number {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-11);
  block-size: var(--space-11);
  border-radius: var(--radius-md);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}

.doc-section__title {
  min-inline-size: 0;
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
}

/* Deep link. Written by legal.js next to every section heading, so a
   support agent can send a visitor to one clause rather than to the page. */
.doc-section__anchor {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-9);
  block-size: var(--space-9);
  margin-inline-start: auto;
  border-radius: var(--radius-sm);
  color: var(--fg-subtle);
  font-size: var(--icon-md);
  opacity: 0;
  transition: var(--transition-colors), opacity var(--duration-fast) var(--ease-standard);
}
.doc-section:hover .doc-section__anchor,
.doc-section__anchor:focus-visible {
  opacity: 1;
}
.doc-section__anchor:hover {
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}

.doc-body h3 {
  margin-block: var(--space-8) var(--space-3);
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.doc-body p {
  max-inline-size: 78ch;
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
.doc-body p + p {
  margin-block-start: var(--space-4);
}

.doc-body a:not(.btn):not(.doc-section__anchor):not(.doc-related__card) {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: var(--transition-colors);
}
.doc-body a:not(.btn):not(.doc-section__anchor):not(.doc-related__card):hover {
  color: var(--brand-hover);
}

.doc-body strong,
.doc-body b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}

/* Inline value — a price, a window, a code. Set in the body face rather
   than a monospace one: the site ships one family, and Persian digits in a
   Latin mono face fall back to a different font mid-sentence. */
.doc-body code {
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--bg-inset);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   06 · CALLOUTS
   --------------------------------------------------------------------------
   Three tones, and no more: something to know, something to watch out for,
   something that is good news. Each is a bordered box with a tinted rule on
   the inline-start edge — the flat equivalent of the raised note card, and
   it mirrors correctly without a single physical property.
   ========================================================================== */

.doc-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-inline-start: var(--border-heavy) solid var(--brand);
  border-radius: var(--radius-xl);
  background: var(--bg-surface-2);
}

.doc-note > .icon {
  margin-block-start: var(--space-0-5);
  flex: none;
  color: var(--brand);
  font-size: var(--icon-md);
}

.doc-note b {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.doc-note p {
  max-inline-size: 72ch;
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.doc-note--warn {
  border-inline-start-color: var(--warning);
  background: var(--warning-subtle);
}
.doc-note--warn > .icon {
  color: var(--warning-text);
}

.doc-note--ok {
  border-inline-start-color: var(--success);
  background: var(--success-subtle);
}
.doc-note--ok > .icon {
  color: var(--success-text);
}


/* ==========================================================================
   07 · TABLES
   --------------------------------------------------------------------------
   Wrapped in a scroller, because a four-column table of costs cannot be
   made to fit a 360px phone and a squashed one is worse than a scrolled
   one. The wrapper is focusable so a keyboard can reach the scroll.
   ========================================================================== */

.doc-table-wrap {
  margin-block-start: var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: auto;
  overscroll-behavior-inline: contain;
}

.doc-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  text-align: start;
}

.doc-table caption {
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  text-align: start;
}

.doc-table th,
.doc-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
  text-align: start;
  vertical-align: top;
}

.doc-table thead th {
  background: var(--bg-inset);
  color: var(--fg-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
}

.doc-table tbody th {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}

.doc-table td {
  color: var(--fg-muted);
  line-height: var(--leading-normal);
}

.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td {
  border-block-end: 0;
}

.doc-table tbody tr:hover th,
.doc-table tbody tr:hover td {
  background: var(--bg-surface-2);
}

/* A figure that should be read as the answer: the free-shipping threshold,
   the refund window. */
.doc-table .is-key {
  color: var(--brand-text);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
}


/* ==========================================================================
   08 · STEP LIST
   ========================================================================== */

.doc-steps {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
  counter-reset: step;
}

.doc-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-inline-lg);
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  transition: var(--transition-colors);
}
.doc-step:hover {
  border-color: var(--border-brand);
}

.doc-step::before {
  counter-increment: step;
  content: counter(step, persian);
  display: grid;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--fg-on-brand);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
}

.doc-step b {
  display: block;
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.doc-step p {
  margin-block-start: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}


/* ==========================================================================
   09 · DEFINITION & CHECK LISTS
   ========================================================================== */

/* Bulleted clause list. The marker is a brand dot drawn by the list item
   itself, so it mirrors with the text and never lands in the gutter. */
.doc-list {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  max-inline-size: 78ch;
}

.doc-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.doc-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--brand);
}

/* Yes/no list: the same shape with a tick or a cross plate instead of a
   dot, for "what can be returned" against "what cannot". */
.doc-check {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.doc-check li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--fg-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.doc-check .icon {
  margin-block-start: var(--space-0-5);
  flex: none;
  font-size: var(--icon-md);
}
.doc-check li[data-answer="yes"] .icon { color: var(--success); }
.doc-check li[data-answer="no"]  .icon { color: var(--danger); }

.doc-check b {
  display: block;
  margin-block-end: var(--space-0-5);
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

/* Definition list for the glossary in the terms document. */
.doc-defs {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}

.doc-defs > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--gap-inline-lg);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}
.doc-defs > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.doc-defs dt {
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.doc-defs dd {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}


/* ==========================================================================
   10 · CROSS-LINKS
   --------------------------------------------------------------------------
   The three documents are one set, and every one of them answers a question
   that starts in another. Each therefore closes with the other two plus the
   help centre.
   ========================================================================== */

.doc-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.doc-related__card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  transition: var(--transition-colors), transform var(--duration-base) var(--ease-out);
}
.doc-related__card:hover {
  border-color: var(--border-brand);
  transform: translateY(var(--card-lift));
}

.doc-related__card b {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.doc-related__card span {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.doc-related__go {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.doc-related__go .icon {
  transition: var(--transition-transform);
}
.doc-related__card:hover .doc-related__go .icon {
  transform: translateX(calc(var(--space-1) * -1));
}

/* Revision history, printed at the foot of every document. Small, quiet,
   and the first thing a returning visitor looks for. */
.doc-revisions {
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface-2);
}

.doc-revisions b {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  color: var(--fg-default);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
.doc-revisions b .icon {
  color: var(--brand);
}

.doc-revisions ul {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.doc-revisions li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--gap-inline-md);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.doc-revisions time {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   11 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .doc { grid-template-columns: 14.5rem minmax(0, 1fr); gap: var(--space-8); }
  .doc-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
  /* The column is gone; the contents rail takes the shape .page-nav uses —
     a horizontally scrolling row of chips that stays with the page. */
  .doc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .doc-toc {
    position: static;
    max-block-size: none;
    overflow: visible;
    border-radius: var(--radius-2xl);
  }
  .doc-toc__list {
    display: flex;
    gap: var(--gap-inline-sm);
    overflow-x: auto;
    padding-block-end: var(--space-2);
    scrollbar-width: thin;
  }
  .doc-toc__list a {
    flex: none;
    border: var(--border-hairline) solid var(--border-default);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .doc-toc__print { justify-self: start; }

  .doc-related { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .doc-highlights { grid-template-columns: minmax(0, 1fr); }
  .doc-summary { padding: var(--space-6); }

  .doc-section__title { font-size: var(--text-3xl); }
  .doc-body p,
  .doc-list li { font-size: var(--text-md); }

  .doc-defs > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .doc-revisions li { grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); }
}

@media (max-width: 540px) {
  .doc-step { gap: var(--gap-inline-md); padding: var(--space-4); }
  .doc-note { padding: var(--space-4); }
  .doc-table th,
  .doc-table td { padding: var(--space-3) var(--space-4); }
}


/* ==========================================================================
   12 · MOTION, CONTRAST, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .doc-related__card {
    transition: var(--transition-colors);
  }
  .doc-related__card:hover {
    transform: none;
  }
  .doc-related__card:hover .doc-related__go .icon {
    transform: none;
  }
  /* The anchor is revealed on hover; without motion it simply appears. */
  .doc-section__anchor {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .doc-toc,
  .doc-highlight,
  .doc-step,
  .doc-note,
  .doc-check li,
  .doc-related__card,
  .doc-table-wrap {
    border-color: var(--fg-muted);
  }
}

@media print {
  /* Anyone about to spend money is entitled to keep a copy of the rules, so
     this is a real printed document, not a screenshot of a web page: the
     navigation, the campaign chrome and every control go, the panels lose
     their gradients, and each numbered clause is kept off a page break. */
  .breadcrumb,
  .doc-toc,
  .doc-related,
  .cta-band,
  .doc-summary__title .icon {
    display: none;
  }

  .doc {
    display: block;
    margin-block-start: var(--space-6);
  }

  .page-hero,
  .doc-summary {
    background: none;
    color: #000;
    border: 1px solid #000;
  }

  .doc-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .doc-section__anchor {
    display: none;
  }

  /* A printed link to another page of the site is useless without its
     address, so the address is printed after it. */
  .doc-body a[href^="http"]::after,
  .doc-body a[href$=".html"]::after {
    content: " (" attr(href) ")";
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
  }
}