/* 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;
}

/* ---------- language switcher ---------- */
/* Each item carries its own `lang`, so a screen reader pronounces "Espanol"
   in Spanish rather than reading it with an English voice. That is why the
   labels are written in their own language and not translated. */
.lang-switch ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fp-ink-soft);
}
.lang-switch a[aria-current] { color: var(--fp-ink); font-weight: 650; }

/* ---------- figure widths ---------- */
/* base.css gives a figure the content column and nothing wider. A screenshot
   whose detail is the point needs more room than prose does, so `shots` can ask
   for one of three widths. The choice also selects which image widths get
   generated, so these rules and the srcset stay in step. */

/* Slightly wider than the text column, still inset from the edge. */
.wrap-wide {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* To the viewport edges. Note that `column` above already fills the content
   container: this is the rarer case of running past it. `100vw` would overflow
   by the scrollbar's width on desktop,
   which produces a horizontal scrollbar on a page that has no wide content;
   sizing to the section and letting it fill avoids that entirely. */
.shot-bleed {
  width: 100%;
}
.shot-bleed .shot img {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
/* A caption is prose, so it keeps a measure and stays in the text column even
   when the picture above it does not. */
.shot-bleed .shot figcaption {
  max-width: var(--fp-wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------- 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;
}