/* ---------------------------------------------------------------------------
   Life insurers' nontraditional liabilities (FSR figure 4.9, nominal)
   Scoped under .ntl so it cannot leak into site.css.
   Follows the site's theme convention: dark is default, light overrides.
--------------------------------------------------------------------------- */

.ntl {
  --ntl-surface: var(--bg);
  --ntl-axis:  rgba(233, 238, 252, 0.30);
  --ntl-grid:  rgba(233, 238, 252, 0.09);
  --ntl-ink:   var(--text);
  --ntl-label: var(--muted);

  /* Categorical slots, bottom of the stack to top. Hues are as requested
     (chartreuse / #425a96 slate / #845c8a mauve / #611c51 plum), each
     held to within 1 degree; lightness and chroma are stepped per surface
     so adjacent bands separate.

     The mauve and the plum are only 16 degrees apart in hue and sit next to
     each other in the stack, so this palette has little headroom: worst
     adjacent pair dE 8.3 CVD / 15.4 normal vision on light, 8.5 / 15.3 on
     dark, against gates of 8.0 and 15.0. Lightened one step from the
     requested hexes, which also lifts every dark-theme series clear of 3:1. Re-validate if the stack order
     changes or a series is added. */
  --ntl-1: #54a714;  /* Repurchase agreements               chartreuse  */
  --ntl-2: #4d68ae;  /* Securities lending cash collateral  slate blue  */
  --ntl-3: #b077b9;  /* FHLB advances                       mauve       */
  --ntl-4: #8d4779;  /* Funding agreement-backed securities plum        */
}

html[data-theme="light"] .ntl {
  --ntl-axis: rgba(16, 24, 40, 0.32);
  --ntl-grid: rgba(16, 24, 40, 0.10);
  --ntl-1: #69ca24;  /* chartreuse */
  --ntl-2: #4f6cb2;  /* slate blue */
  --ntl-3: #b47abc;  /* mauve      */
  --ntl-4: #8f4a7d;  /* plum       */
}

.ntl-figure { margin: 0 0 8px; }
.ntl-figure svg { width: 100%; height: auto; display: block; overflow: visible; }

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

.ntl .axis path, .ntl .axis line { stroke: var(--ntl-axis); }
.ntl .axis text { fill: var(--ntl-label); font-size: 14px; }
.ntl .grid line { stroke: var(--ntl-grid); }
.ntl .grid path { stroke: none; }
.ntl .axis-title { fill: var(--ntl-label); font-size: 14px; letter-spacing: 0.02em; }

/* Bars butt against each other within a period; the gap between periods
   does the separating, so no outline is needed. */
.ntl .bar { shape-rendering: crispEdges; }

/* The 2006-2010 bars cover a year, not a quarter. They are drawn four times
   wider so the change in frequency is visible rather than implied. */
.ntl .freq-rule { stroke: var(--ntl-ink); stroke-dasharray: 4 4; opacity: 0.45; }
.ntl .freq-label { fill: var(--ntl-label); font-size: 12px; }

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

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

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

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

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

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