/* fif-doc.css - styles for the FIF2 documentation fragments.
 *
 * Every rule is scoped to .fif-doc, so the fragments can sit inside any page
 * or CMS template without touching the host's own elements.  Text colour,
 * background, font family and base size are inherited from the host on
 * purpose; this file only shapes figures, tables, diagrams and code.  Lines
 * and fills are derived from currentColor, so the fragments work on light and
 * dark pages alike.
 *
 * Include once per page:  <link rel="stylesheet" href="fif-doc.css">
 */

.fif-doc {
  --fif-line: color-mix(in srgb, currentColor 22%, transparent);
  --fif-soft: color-mix(in srgb, currentColor 6%, transparent);
  --fif-muted: color-mix(in srgb, currentColor 65%, transparent);
  --fif-accent: #2f6f9f;
  --fif-accent-soft: color-mix(in srgb, #2f6f9f 14%, transparent);
  --fif-warm: #b0632a;
  line-height: 1.6;
  max-width: 46rem;
}

.fif-doc h1 { line-height: 1.2; margin: 0 0 0.6em; }
.fif-doc h2 { line-height: 1.25; margin: 2.2em 0 0.6em; }
.fif-doc h3 { line-height: 1.3; margin: 1.8em 0 0.5em; }
.fif-doc p, .fif-doc ul, .fif-doc ol { margin: 0 0 1em; }
.fif-doc li { margin: 0.25em 0; }
.fif-doc .fif-lead { font-size: 1.12em; color: var(--fif-muted); }

/* part dividers in long documents */
.fif-doc .fif-part { margin: 3em 0 1em; padding-top: 1em; border-top: 3px solid var(--fif-accent); }
.fif-doc .fif-part p { margin: 0 0 0.5em; }
.fif-doc .fif-part-label { font-size: 0.85em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fif-accent); }
.fif-doc .fif-part-title { font-size: 1.6em; font-weight: 600; line-height: 1.2; }
.fif-doc .fif-part + h2 { margin-top: 1.2em; }

/* ---- figures ---------------------------------------------------------- */

.fif-doc figure { margin: 1.8em 0; }
.fif-doc figure img,
.fif-doc figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.fif-doc figure img { border-radius: 3px; }
.fif-doc figcaption {
  margin-top: 0.6em;
  font-size: 0.9em;
  color: var(--fif-muted);
  line-height: 1.5;
}
.fif-doc figcaption b { color: currentColor; }

/* Labelled panels under a comparison image: one label per panel. */
.fif-doc .fif-panels {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: 6px;
  margin-top: 0.4em;
  font-size: 0.85em;
  text-align: center;
  color: var(--fif-muted);
}
.fif-doc .fif-panels span b { color: currentColor; font-weight: 600; }

/* A row of separate images, each with its own caption line. */
.fif-doc .fif-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.8em;
}
.fif-doc .fif-row figure { margin: 0; }

/* ---- tables ----------------------------------------------------------- */

.fif-doc .fif-table {
  overflow-x: auto;
  margin: 1.4em 0;
  -webkit-overflow-scrolling: touch;
}
.fif-doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92em;
  line-height: 1.45;
}
.fif-doc th, .fif-doc td {
  text-align: left;
  vertical-align: top;
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--fif-line);
}
.fif-doc thead th {
  font-weight: 600;
  border-bottom: 2px solid var(--fif-line);
  white-space: nowrap;
}
.fif-doc tbody tr:nth-child(even) td { background: var(--fif-soft); }
.fif-doc td.num, .fif-doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fif-doc td.best { font-weight: 600; }
.fif-doc caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.6em;
  font-size: 0.88em;
  color: var(--fif-muted);
}
/* Byte-layout tables in the specification: offsets and sizes stay aligned. */
.fif-doc table.fif-layout td:nth-child(1),
.fif-doc table.fif-layout td:nth-child(2) {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}

/* ---- code ------------------------------------------------------------- */

.fif-doc code, .fif-doc pre, .fif-doc kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}
.fif-doc :not(pre) > code {
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background: var(--fif-soft);
}
.fif-doc pre {
  overflow-x: auto;
  padding: 0.9em 1.1em;
  border-radius: 4px;
  background: var(--fif-soft);
  border: 1px solid var(--fif-line);
  line-height: 1.45;
  margin: 1.2em 0;
}
.fif-doc pre .c { color: var(--fif-muted); }

/* ---- notes, definitions, formulas ------------------------------------- */

.fif-doc .fif-note {
  margin: 1.4em 0;
  padding: 0.8em 1.1em;
  border-left: 3px solid var(--fif-accent);
  background: var(--fif-accent-soft);
  border-radius: 0 4px 4px 0;
}
.fif-doc .fif-note > :last-child { margin-bottom: 0; }
.fif-doc .fif-note.warn { border-left-color: var(--fif-warm); background: color-mix(in srgb, var(--fif-warm) 12%, transparent); }

.fif-doc .fif-formula {
  margin: 1.4em 0;
  padding: 0.9em 1em;
  text-align: center;
  border-top: 1px solid var(--fif-line);
  border-bottom: 1px solid var(--fif-line);
}
.fif-doc .fif-formula math { font-size: 1.15em; }
.fif-doc .fif-formula p { margin: 0.6em 0 0; font-size: 0.9em; color: var(--fif-muted); text-align: left; }

.fif-doc dl { margin: 0 0 1em; }
.fif-doc dt { font-weight: 600; margin-top: 0.8em; }
.fif-doc dd { margin: 0.2em 0 0 1.2em; }

/* Normative keywords in the specification. */
.fif-doc .must { font-weight: 600; font-variant: small-caps; letter-spacing: 0.02em; }

/* ---- timeline --------------------------------------------------------- */

.fif-doc ol.fif-timeline {
  list-style: none;
  padding: 0;
  margin: 1.6em 0;
  border-left: 2px solid var(--fif-line);
}
.fif-doc ol.fif-timeline > li {
  position: relative;
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}
.fif-doc ol.fif-timeline > li::before {
  content: "";
  position: absolute;
  left: -0.42em;
  top: 0.45em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--fif-accent);
}
.fif-doc ol.fif-timeline .year {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- inline SVG diagrams ---------------------------------------------- */

.fif-doc svg.fif-diagram { color: inherit; font-family: inherit; overflow: visible; }
.fif-doc svg.fif-diagram text { fill: currentColor; font-size: 13px; }
.fif-doc svg.fif-diagram .small { font-size: 11px; }
.fif-doc svg.fif-diagram .muted { fill: var(--fif-muted); }
.fif-doc svg.fif-diagram .line { stroke: currentColor; stroke-opacity: 0.35; fill: none; }
.fif-doc svg.fif-diagram .box { stroke: currentColor; stroke-opacity: 0.45; fill: var(--fif-soft); }
.fif-doc svg.fif-diagram .accent { stroke: var(--fif-accent); fill: var(--fif-accent-soft); stroke-width: 2; }
.fif-doc svg.fif-diagram .warm { stroke: var(--fif-warm); fill: color-mix(in srgb, var(--fif-warm) 14%, transparent); stroke-width: 2; }
.fif-doc svg.fif-diagram .arrow { stroke: currentColor; stroke-width: 1.5; fill: none; }
.fif-doc svg.fif-diagram .optional { stroke-dasharray: 5 4; }

/* ---- small screens ---------------------------------------------------- */

@media (max-width: 36rem) {
  .fif-doc .fif-panels { font-size: 0.75em; }
  .fif-doc th, .fif-doc td { padding: 0.45em 0.5em; }
}