/* Styles the engine's components need that base.css v2 does not define.
   ==================================================================
   Every rule here is a v3 candidate, listed in MARKUP.md. None of it is one
   site's business: a disclosure, a table, an aside, a quotation, a definition
   list and a logo row are general content, and each was found the moment a
   component needed it and the class allowlist refused to let it ship.

   This file exists so those rules live in one place rather than being copied
   into every site's site.css. When base.css v3 lands, this file empties and
   sites stop linking it.

   Written in --fp-* tokens only, so every rule follows the dark-band remap. */

/* ---------- intrinsic dimensions ---------- */
/* base.css v2 sets `max-width: 100%` on images and never sets `height: auto`.
   That combination distorts any image carrying width and height attributes:
   the width scales down and the height attribute holds, so the image stretches
   vertically. It went unnoticed because the hand-authored site only ever put
   images inside .shot, which set height itself.

   The engine emits width and height on every image, because without them the
   page reflows as each one loads. So this rule is not optional here, and it is
   the first thing v3 must fix. Found by comparing a rebuilt page against the
   live one: a 1800x1012 screenshot was rendering at 493x1012. */
img,
svg,
video,
canvas {
  height: auto;
}

/* ---------- standalone link targets ---------- */
/* WCAG 2.5.5 exempts a link "in a sentence, or whose size is otherwise
   constrained by the line-height of non-target text". A link that is the whole
   content of its list item or paragraph is neither, so it needs a 44px target
   like any other standalone control. A jump list, a module name, or a bare URL
   on its own line all land here.

   Inline links inside running prose are untouched: they keep the line-height
   of the text around them, which is what the exception is for. */
li > a:only-child,
p > a:only-child,
dd > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

/* ---------- disclosure ---------- */
.plain-summary {
  border: 1px solid var(--fp-rule);
  border-radius: var(--fp-radius);
  padding: 1rem 1.15rem;
  background: var(--fp-bg-card);
  margin: 1rem 0;
}
.plain-summary > summary {
  font-weight: 650;
  color: var(--fp-ink);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.plain-summary > :not(summary):last-child { margin-bottom: 0; }

/* ---------- tables ---------- */
.scroller { overflow-x: auto; margin: 1.5rem 0; }
.scroller table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.95rem; }
.scroller caption {
  text-align: left;
  font-family: var(--fp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fp-ink-mute);
  padding-bottom: 0.7rem;
}
.scroller th,
.scroller td {
  text-align: left;
  padding: 0.7rem 1.2rem 0.7rem 0;
  border-bottom: 1px solid var(--fp-rule);
  vertical-align: top;
}
.scroller thead th {
  font-family: var(--fp-mono);
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-ink-mute);
}
.scroller tbody th { font-weight: 650; color: var(--fp-ink); }

/* ---------- callout ---------- */
/* Severity is carried by the visible label as well as the colour, because
   colour alone is not information (WCAG 1.4.1). */
.callout {
  border-left: 3px solid var(--fp-accent);
  background: var(--fp-bg-alt);
  border-radius: 0 var(--fp-radius-sm) var(--fp-radius-sm) 0;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.callout-note { /* the default: teal rule on the alternate ground, set above */ }
.callout-warning { border-left-color: var(--fp-bronze); background: var(--fp-amber-wash); }
.callout-critical { border-left-color: var(--fp-route-red); }
.callout-label {
  font-family: var(--fp-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fp-ink-mute);
  margin: 0 0 0.4rem;
}
.callout > p:last-child { margin-bottom: 0; }

/* ---------- quote ---------- */
.quote { margin: 1.75rem 0; padding-left: 1.15rem; border-left: 3px solid var(--fp-rule); }
.quote blockquote { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--fp-ink); }
.quote figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--fp-ink-mute); }

/* ---------- definition list ---------- */
.defs { margin: 1.5rem 0; }
.defs dt {
  font-weight: 650;
  color: var(--fp-ink);
  margin-top: 1.25rem;
  scroll-margin-top: 6.5rem;
}
.defs dt:first-child { margin-top: 0; }
.defs dd { margin: 0.35rem 0 0; color: var(--fp-ink-soft); }

/* ---------- logo row ---------- */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.logo-row img { max-height: 2rem; }
/* A logo link is a standalone target, so it gets the 44px minimum in both
   directions rather than the size of the mark inside it. Height alone is not
   enough: a narrow mark leaves the link under 44px wide, which fails 2.5.5
   just as surely. */
.logo-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.25rem;
}