/* ---------------------------------------------------------------------------
   FABS chart
   Everything is scoped under .fabs so this file cannot fight site.css.
   (The previous version set body{margin:0} and its own font stack, which
   overrode the site shell.)

   Colour follows the site's convention from site.css: dark is the default,
   html[data-theme="light"] overrides. Series hues are the validated
   categorical palette, stepped separately for each surface rather than
   flipped automatically.
--------------------------------------------------------------------------- */

.fabs {
  /* Surface the chart sits on. Used for the hairline between stacked bands. */
  --fabs-surface: var(--bg);
  --fabs-axis:  rgba(233, 238, 252, 0.30);
  --fabs-grid:  rgba(233, 238, 252, 0.09);
  --fabs-total: var(--text);
  --fabs-label: var(--muted);

  /* Categorical slots 1-7, dark steps. Assigned in fixed stack order,
     bottom to top; never cycled, never reassigned when series are hidden.

     These are ColorBrewer Set2 re-stepped: every hue angle is held to within
     1 degree of the original, with lightness and chroma moved so adjacent
     bands actually separate. Set2 as published fails on two pairs that touch
     in this stack - pink/periwinkle at dE 1.5 under protanopia, and
     yellow/yellow-green at dE 11.8 under normal vision.

     FABCP took Set2's orange by request (it had the yellow-green). The swap
     changed which bands touch, so both modes were re-stepped and revalidated -
     the straight colour swap alone failed light mode (yellow-green landed
     beside the tan at dE 2.8 under deuteranopia).

     FABN Short-Term then left Set2 entirely for purple. Yellow-green (127 deg)
     sits wedged between its two neighbours, tan (77) and teal (171), so the
     only way to separate it was to drive it dark: L 0.630 light / 0.531 dark,
     against ~0.75 / ~0.65 for every other series. It was the one colour forced
     out of the palette's lightness band, which is what made it look drab.
     Purple at 305 deg is the widest gap left on the hue circle between
     periwinkle (266) and pink (343), and it clears the gates at the same
     lightness and chroma as everything else. Its nearest neighbour in colour
     space is the periwinkle, at dE 10.5 under normal vision. */
  --fabs-1: #a88e19;  /* FABR               <- Set2 #FFD92F yellow      */
  --fabs-2: #b6532b;  /* FABCP              <- Set2 #FC8D62 orange      */
  --fabs-3: #6b8cdd;  /* XFABN (Spinoffs)   <- Set2 #8DA0CB periwinkle  */
  --fabs-4: #c072a2;  /* XFABN (Extendible) <- Set2 #E78AC3 pink        */
  --fabs-5: #bb841f;  /* FABN (Putable)     <- Set2 #E5C494 tan         */
  --fabs-6: #a069d7;  /* FABN (Short-Term)  -- purple, see note below   */
  --fabs-7: #05a885;  /* FABN (Medium-Term) <- Set2 #66C2A5 teal        */
}

html[data-theme="light"] .fabs {
  --fabs-axis: rgba(16, 24, 40, 0.32);
  --fabs-grid: rgba(16, 24, 40, 0.10);

  --fabs-1: #ccac13;  /* FABR               <- Set2 #FFD92F yellow      */
  --fabs-2: #dd774f;  /* FABCP              <- Set2 #FC8D62 orange      */
  --fabs-3: #789cf7;  /* XFABN (Spinoffs)   <- Set2 #8DA0CB periwinkle  */
  --fabs-4: #e190c1;  /* XFABN (Extendible) <- Set2 #E78AC3 pink        */
  --fabs-5: #d7a454;  /* FABN (Putable)     <- Set2 #E5C494 tan         */
  --fabs-6: #c18afb;  /* FABN (Short-Term)  -- purple, see note below   */
  --fabs-7: #54c6a4;  /* FABN (Medium-Term) <- Set2 #66C2A5 teal        */
}

/* ---------- figure ---------- */

.fabs-figure { margin: 0 0 8px; }

.fabs-figure svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.fabs-caption {
  font-size: 13px;
  color: var(--fabs-label);
  margin: 0 0 18px;
}

/* ---------- axes & grid: recessive ---------- */

.fabs .axis path,
.fabs .axis line { stroke: var(--fabs-axis); }
.fabs .axis text { fill: var(--fabs-label); font-size: 14px; }

.fabs .grid line { stroke: var(--fabs-grid); }
.fabs .grid path { stroke: none; }

.fabs .axis-title {
  fill: var(--fabs-label);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ---------- marks ---------- */

/* Bands butt directly against each other. No separating hairline: the
   palette already clears the adjacent-pair separation gates on colour alone
   (worst pair dE 8.0 CVD / 15.0 normal vision), so an outline added visual
   noise without doing any work.

   If you ever want definition back, prefer an ink hairline over a surface or
   black one - black disappears on the dark theme:
       .fabs .area { stroke: var(--fabs-total); stroke-width: .75; stroke-opacity: .35; } */

.fabs .total-line {
  fill: none;
  stroke: var(--fabs-total);
  stroke-width: 2;
  opacity: 0.55;
}

/* ---------- annotations (ported from the R version) ---------- */

.fabs .annot-rule {
  stroke: var(--fabs-total);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  opacity: 0.5;
}
.fabs .annot-label {
  fill: var(--fabs-label);
  font-size: 13px;
}
.fabs .annot-note {
  fill: var(--fabs-total);
  font-size: 13px;
  font-weight: 600;
}
.fabs .annot-arrow {
  fill: none;
  stroke: var(--fabs-total);
  stroke-width: 1.4;
  opacity: 0.75;
}
.fabs .annot-head { fill: var(--fabs-total); opacity: 0.75; }

.fabs .focus-line { stroke: var(--fabs-total); opacity: 0.35; }
.fabs .focus-dot  { fill: var(--fabs-total); stroke: var(--fabs-surface); stroke-width: 2; }

/* ---------- legend ---------- */

.fabs .legend text {
  fill: var(--fabs-label);
  font-size: 14px;
  dominant-baseline: middle;
}

/* ---------- tooltip ---------- */

.fabs-tooltip {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  transform: translate(-50%, -115%);
}

.fabs-tooltip .t-date { font-weight: 650; margin-bottom: 5px; }
.fabs-tooltip .t-rule {
  margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--border);
}
.fabs-tooltip .t-row {
  display: flex; align-items: center; gap: 7px;
  justify-content: space-between;
}
.fabs-tooltip .t-swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
}
.fabs-tooltip .t-name { flex: 1 1 auto; }
.fabs-tooltip .t-val  { font-variant-numeric: tabular-nums; }

/* ---------- status + table view ---------- */

.fabs-status {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--fabs-label);
  font-size: 14px;
}

.fabs-coverage { margin: 0 0 18px; padding-left: 1.15rem; }
.fabs-coverage li { margin: 7px 0; }
.fabs-coverage em { color: var(--fabs-label); font-style: normal; font-weight: 650; }

.fabs-details { margin: 6px 0 22px; }
.fabs-details > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--fabs-label);
  padding: 4px 0;
}
.fabs-details > summary:hover { color: var(--text); }

.fabs-table {
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
  width: 100%;
  max-width: 560px;
}
.fabs-table th,
.fabs-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.fabs-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fabs-table .sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: baseline;
}
.fabs-table tfoot td { font-weight: 650; border-bottom: none; }

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  .fabs-tooltip { white-space: normal; max-width: 15rem; }
}