/* Phrasebook: Bosnian.
   Pilot book aesthetic: hairline rules, editorial type hierarchy, no bubble cards.
   Fonts are deliberately from the system stack. A web font would either need the
   network (which this app cannot have) or would eat most of the payload budget.
   Character comes from the type scale, the colour and the rules instead. */

:root {
  color-scheme: light dark;

  /* Warm paper, cool ink. Light scheme. */
  --paper: #f7f4ee;
  --paper-sunk: #efeae1;
  --rule: #ddd6c9;
  --rule-strong: #c3b9a6;
  --ink: #14171b;
  --ink-soft: #4e5560;
  --ink-faint: #7b8290;

  /* The blue of the Bosnian flag, with its yellow as the secondary. */
  --accent: #002f6c;
  --accent-ink: #ffffff;
  --accent-wash: rgba(0, 47, 108, 0.09);
  --accent-warm: #d9a520;

  --focus: #0a63d6;

  --font-ui: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  /* Iowan Old Style and Palatino are present on Apple platforms and give the
     target phrase a bookish, high legibility look at arm's length. */
  --font-target: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                 Georgia, ui-serif, serif;
  --font-pron: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --tap: 3rem;              /* 48 px, the minimum for the phrase rows and stars */
  --tap-small: 2.5rem;      /* 40 px, for the header chips and the search box */
  --gap: 0.75rem;
  --page: min(46rem, 100%);
  --radius: 0.375rem;
  --bar-shadow: 0 0.5rem 1.25rem rgba(20, 23, 27, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Genuinely dark. This gets used on deck at night, so the background is
       near black rather than the usual mid grey. */
    --paper: #07090b;
    --paper-sunk: #0e1216;
    --rule: #1e252e;
    --rule-strong: #33404e;
    --ink: #eceae5;
    --ink-soft: #a3adba;
    --ink-faint: #737e8c;

    /* The flag blue is far too dark against near black, so it lifts to a sky blue. */
    --accent: #7fa8ff;
    --accent-ink: #07090b;
    --accent-wash: rgba(127, 168, 255, 0.13);
    --accent-warm: #f3cb5c;

    --focus: #8fbcff;
    --bar-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.65);
  }
}

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

/* Author display rules beat the user agent [hidden] rule, so say it again here.
   Without this, anything hidden via the attribute but given a display value below
   (the search clear button, the home screen hint) stays visible. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  /* Nothing here should ever scroll sideways, at any zoom level. */
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

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

.skip {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  font-weight: 650;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 0.5rem; }

:where(button, input, a):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- header */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--bar-shadow);
  padding: max(0.5rem, env(safe-area-inset-top)) 0 0.5rem;
}

.bar__row {
  width: var(--page);
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  gap: var(--gap);
  align-items: baseline;
  flex-wrap: wrap;
}

.bar__row--title { justify-content: space-between; }

.bar__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bar__row--controls {
  align-items: stretch;
  margin-top: 0.5rem;
}

.wordmark {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.1;
}
.wordmark__main {
  font-family: var(--font-target);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.wordmark__sub {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.status {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}
.status[data-state="ready"] { color: var(--ink-soft); }
.status[data-state="ready"]::before { background: #2f9e5f; }
.status[data-state="working"]::before { background: #d99518; }
.status[data-state="none"]::before { background: var(--rule-strong); }

/* Segmented language control. The active side takes its flag colour. */
.lang {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  min-height: var(--tap-small);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lang__hint {
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Search */
.find {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.find__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}
.find__input {
  appearance: none;
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: var(--tap-small);
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.find__input::-webkit-search-cancel-button { display: none; }
.find__clear {
  position: absolute;
  right: 0.2rem;
  bottom: 0;
  width: 2rem;
  height: var(--tap-small);
  display: grid;
  place-items: center;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.25rem;
  cursor: pointer;
}

/* Filter chips */
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: flex-end; }
.chip {
  appearance: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  min-height: var(--tap-small);
  padding: 0.3rem 0.7rem;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.chip__star { font-size: 0.9em; }
.chip__count { font-variant-numeric: tabular-nums; opacity: 0.8; }

/* Very narrow viewports. This is also what the page looks like at a 200 percent
   zoom on a phone, so everything here has to reflow rather than scroll sideways. */
@media (max-width: 20rem) {
  .lang__hint { display: none; }
  .lang { font-size: 0.8rem; }
  .wordmark__main { font-size: 1.2rem; }
  .status { font-size: 0.62rem; white-space: normal; }
  .row__target { font-size: 1.2rem; }
  .bar__row { padding-inline: 0.6rem; }
  .list { padding-inline: 0.6rem; }
  .guide { padding-inline: 0.6rem; }
  /* The Hear it pill has no room beside the text at this width, so it drops below. */
  .pick { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .pick__play { grid-column: 2; justify-self: start; margin-top: 0.35rem; }
}

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

.list {
  width: var(--page);
  margin: 0 auto;
  padding: 0.5rem 1rem 4rem;
}
.list:focus { outline: none; }

.loading, .empty {
  color: var(--ink-faint);
  font-size: 0.95rem;
  padding: 2rem 0;
  text-align: center;
}

.cat { margin: 2rem 0 0; }
.cat:first-child { margin-top: 0.75rem; }

.cat__head {
  margin: 0 0 0.25rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.cat__count {
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tap);
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
.row.is-playing {
  border-left-color: var(--accent);
  background: var(--accent-wash);
}

/* The whole row, apart from the star, is the play control. */
.row__main {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap);
  min-height: 4.25rem;
  padding: 0.65rem 0.5rem 0.65rem 0.75rem;
  min-width: 0;
  /* Stops iOS turning a long press into a text selection or a callout. */
  -webkit-touch-callout: none;
  user-select: none;
}

.row__text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }

.row__en {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow-wrap: break-word;
}

.row__target {
  font-family: var(--font-target);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: break-word;
}

.row__pron {
  font-family: var(--font-pron);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}
/* An accent dot, drawn rather than typed. It used to be a bullet character in
   generated content, but axe counts pseudo-element text as part of the element's
   visible label, so the bullet made every row fail WCAG 2.5.3 Label in Name: the
   accessible name cannot reasonably contain a decorative bullet. Empty content with
   a background is visually identical and contributes no text. */
.row__pron::before {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.45em;
  vertical-align: 0.14em;
}

/* Play button. Drawn in CSS, because an icon font or SVG sprite would be
   another file to cache for no gain. */
.row__play {
  flex: none;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.row__play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 0.2rem;
  border-left: 0.85rem solid currentColor;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
}
@media (hover: hover) {
  .row__main:hover .row__play { border-color: var(--accent); background: var(--accent-wash); }
}
.row__main:active .row__play { transform: scale(0.94); }

.row.is-playing .row__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  animation: ring 1.1s ease-out infinite;
}
.row.is-playing .row__play::after {
  /* Two bars while it speaks, so the active row reads at a glance. */
  border: 0;
  width: 0.8rem; height: 0.95rem;
  margin-left: 0;
  background:
    linear-gradient(currentColor, currentColor) left / 0.26rem 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 0.26rem 100% no-repeat;
}
.row.is-slow .row__play { animation-duration: 1.6s; }

@keyframes ring {
  0%   { box-shadow: 0 0 0 0 var(--accent-wash); }
  70%  { box-shadow: 0 0 0 0.7rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.row__fav {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: var(--tap);
  min-height: var(--tap);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--rule-strong);
  transition: color 0.15s ease, transform 0.12s ease;
}
.row__fav:active { transform: scale(0.88); }
.row__fav[aria-pressed="true"] { color: #e0a112; }
@media (prefers-color-scheme: dark) {
  .row__fav[aria-pressed="true"] { color: #ffc857; }
}

.row__missing {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.3rem 0.45rem;
  text-align: center;
  width: 3.25rem;
}

/* ---------------------------------------------------------------- guide page */

.backlink {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  white-space: nowrap;
}
@media (hover: hover) {
  .backlink:hover { background: var(--accent-wash); }
}

.guide {
  width: var(--page);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.guide h2 {
  margin: 2.25rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-target);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.guide h3 {
  margin: 1.5rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.guide p { margin: 0 0 0.8rem; max-width: 38rem; }
.guide a { color: var(--accent); }
.guide [lang="nb"] { font-family: var(--font-target); font-weight: 600; }

.guide__lede {
  font-family: var(--font-target);
  font-size: 1.1rem;
  line-height: 1.45;
}

.guide__note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule-strong);
  padding: 0.15rem 0 0.15rem 0.8rem;
}

/* The fifteen */
.picks { list-style: none; margin: 1rem 0 1.5rem; padding: 0; }

.pick {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.pick__num {
  font-family: var(--font-pron);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pick__body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }

.pick__bs {
  font-family: var(--font-target);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.pick__say {
  font-family: var(--font-pron);
  font-size: 0.75rem;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}
.pick__en {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pick__play {
  flex: none;
  min-height: var(--tap-small);
  display: inline-flex;
  align-items: center;
  padding: 0 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .pick__play:hover { border-color: var(--accent); background: var(--accent-wash); }
}

/* Practicalities */
.facts { margin: 1rem 0 1.5rem; }
.facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0.3rem 0 0; max-width: 38rem; color: var(--ink-soft); }

.three { margin: 0.75rem 0 0; padding-left: 1.3rem; max-width: 38rem; }
.three li { margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------- misc */

.legend, .foot {
  width: var(--page);
  margin: 0 auto;
  padding: 0 1rem 1rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.legend { padding-top: 0.5rem; }
.legend strong { color: var(--ink-soft); }
.foot { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }

.a2hs {
  width: var(--page);
  margin: 0 auto 1rem;
  padding: 0.9rem 1rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.a2hs h2 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}
.a2hs p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.a2hs__dismiss {
  appearance: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  min-height: var(--tap-small);
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------- print

   A paper backup of whatever is on screen. Two columns, no controls, and the
   filter you have applied is what gets printed. */

@media print {
  :root {
    --paper: #ffffff;
    --paper-sunk: #ffffff;
    --ink: #000000;
    --ink-soft: #333333;
    --ink-faint: #555555;
    --rule: #bbbbbb;
    --rule-strong: #888888;
    --accent: #000000;
    --accent-wash: transparent;
  }

  @page { margin: 12mm; size: A4 portrait; }

  body { background: #fff; color: #000; font-size: 9pt; overflow: visible; }

  .bar__row--controls,
  .status,
  .legend,
  .foot,
  .a2hs,
  .skip,
  .row__play,
  .row__fav,
  .row__missing,
  .cat__count,
  .backlink,
  .pick__play,
  .pick__num { display: none !important; }

  .bar {
    position: static;
    box-shadow: none;
    backdrop-filter: none;
    border-bottom: 1.5pt solid #000;
    padding: 0 0 3pt;
    margin-bottom: 4pt;
  }
  .bar__row { width: auto; padding: 0; display: block; }
  .wordmark { display: block; }
  .wordmark__main { font-size: 15pt; }
  .wordmark__sub { font-size: 7pt; color: #444; }

  .list { width: auto; padding: 0; columns: 2; column-gap: 10mm; column-rule: 0.5pt solid #ccc; }

  .cat { margin: 0 0 3.5pt; break-inside: avoid; }
  .cat:first-child { margin-top: 0; }
  .cat__head { font-size: 7pt; border-bottom: 1pt solid #000; margin-bottom: 1.5pt; break-after: avoid; }

  .row {
    display: block;
    border-left: 0;
    border-bottom: 0.4pt solid #ddd;
    break-inside: avoid;
    background: none !important;
  }
  .row__main {
    display: block;
    min-height: 0;
    padding: 1.1pt 0;
    background: none;
  }
  /* On paper these stack as one flowing line per phrase, so they need explicit
     separation: as inline spans they would otherwise butt straight up against
     each other. */
  .row__text { display: block; }
  .row__en {
    display: block;
    font-size: 6.2pt;
    letter-spacing: 0.05em;
    color: #555;
    line-height: 1.1;
  }
  .row__target { font-size: 9.5pt; line-height: 1.12; margin-right: 3pt; }
  /* No nowrap here: a long respelling has to be allowed to break rather than
     overflow a narrow column and get clipped by the page edge. */
  .row__pron { font-size: 6.5pt; color: #333; overflow-wrap: break-word; }
  /* On paper the dot becomes brackets, which read better in print. */
  .row__pron::before {
    content: "[";
    color: #333;
    font-family: inherit;
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    margin-right: 0;
    display: inline;
    vertical-align: baseline;
  }
  .row__pron::after { content: "]"; }

  /* The guide on paper. Two columns, because it is a lot of prose for one sheet, and
     the fifteen collapse to one line each. */
  .guide { width: auto; padding: 0; columns: 2; column-gap: 8mm; font-size: 8.5pt; }
  .guide h2 {
    font-size: 9.5pt;
    margin: 6pt 0 2pt;
    padding-bottom: 1pt;
    border-bottom: 0.8pt solid #000;
    break-after: avoid;
  }
  .guide h3 { font-size: 8pt; margin: 4pt 0 1pt; color: #000; break-after: avoid; }
  .guide p { margin: 0 0 3pt; max-width: none; }
  .guide a { color: #000; text-decoration: none; }
  .guide__lede { font-size: 9pt; }
  .guide__note { border-left: 0.8pt solid #999; padding-left: 4pt; font-size: 7.5pt; }

  .picks { margin: 3pt 0 5pt; }
  .pick {
    display: block;
    padding: 1.5pt 0;
    border-bottom: 0.4pt solid #ddd;
    break-inside: avoid;
  }
  .pick__body { display: block; }
  .pick__bs { font-size: 9.5pt; margin-right: 3pt; }
  .pick__say { font-size: 7pt; }
  .pick__say::before { content: "["; }
  .pick__say::after { content: "] "; }
  .pick__en { font-size: 6.8pt; color: #555; display: block; }

  .facts { margin: 3pt 0 5pt; }
  .facts dt { font-size: 7.5pt; margin-top: 4pt; padding-top: 2pt; border-top: 0.4pt solid #ccc; break-after: avoid; }
  .facts dd { font-size: 8pt; color: #222; max-width: none; break-inside: avoid; }
  .three { font-size: 8pt; padding-left: 10pt; max-width: none; }
}