/* Article "US national debt" (/articles/us-national-debt/). The debt in --s1 (blue, as
   on the data page), held by the public --s2, trust funds --s3 (the data page's colors). */

.nd-plot-tr { min-height: 520px; }
.art-plot.nd-plot-world { min-height: 150px; }
.nd-unit { font-size: 0.55em; letter-spacing: 0; font-weight: 600; }

/* every trillion */
.nd-tr-bar { fill: var(--s1); fill-opacity: 0.86; }
.nd-tr-bar.est { fill-opacity: 0.38; }
.nd-tr-bar.on { fill-opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.sw-sq.nd-est { background: color-mix(in srgb, var(--s1) 40%, var(--surface)); }
.nd-tr-n { fill: var(--ink-2); font: 600 11px/1 var(--mono); }
.nd-tr-v { fill: var(--ink-2); font: 500 11px/1 var(--font); }
.nd-tr-v.in { fill: #fff; font-weight: 600; }
.nd-tr-v.in.est { fill: var(--ink); }
.nd-break { stroke: var(--surface); stroke-width: 3; fill: none; }
.nd-axis { stroke: var(--axis); stroke-width: 1; }

/* who holds the debt: a 10 x 10 waffle and the two numbers */
.nd-hold-body { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 8px 10px 4px; }
.nd-waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; aspect-ratio: 1; max-width: 300px; touch-action: pan-y; }
.nd-w { border-radius: 4px; transition: opacity 0.12s ease; }
.nd-w.pub { background: var(--s2); }
.nd-w.intra { background: var(--s3); }
.nd-w.dim { opacity: 0.25; }
.nd-hold-nums { display: flex; flex-direction: column; gap: 22px; }
.nd-hold-row { display: flex; gap: 12px; align-items: flex-start; }
.nd-hold-row .sw-sq { margin-top: 10px; flex: none; }
.nd-hold-row .art-sub { margin-top: 6px; }
.nd-hold .tip { top: 0; }
@media (max-width: 640px) {
  .nd-hold-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nd-waffle { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .nd-w { transition: none; } }

/* countries */
.nd-dot { fill: var(--line-gray); fill-opacity: 0.75; stroke: var(--surface); stroke-width: 0.8; }
.nd-dot.on { fill: var(--ink); fill-opacity: 1; }
.nd-ring { fill: none; stroke: var(--axis); stroke-width: 1; }
.nd-flag-dot.us .nd-ring { stroke: var(--ink); stroke-width: 2.5; }
.nd-flag-dot.on .nd-ring { stroke: var(--ink); stroke-width: 2.5; }
.nd-100 { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 4 4; }
.nd-lead { stroke: var(--ink); stroke-opacity: 0.5; stroke-width: 1; }
.nd-us-lbl { fill: var(--ink); font: 650 12px/1 var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.sw-sq.nd-dot { background: var(--line-gray); border-radius: 50%; }
.sw-sq.nd-dot-big { width: 13px; height: 13px; background: var(--surface-2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.sw-sq.nd-dot-us { width: 13px; height: 13px; background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.nd-flag { display: inline-block; width: 20px; height: 15px; margin-right: 7px; vertical-align: -0.2em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.art-table tr.nd-us > * { background: var(--surface-2); }
.art-table tr.nd-now > * { background: var(--surface-2); }
.tip-date .nd-flag { width: 16px; height: 12px; margin-right: 6px; }