/* Deficit spending lesson. All rules scoped under .dfs-* */

.dfs-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dfs-sc > svg { display: block; width: 100%; height: auto; max-height: 46vh; overflow: visible; }
.dfs-hero { width: min(90%, 360px); }
.dfs-hero img { width: 100%; display: block; }
.dfs-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the year */
.dfs-yearbox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dfs-yearbox svg { display: block; width: 100%; height: auto; max-height: 40vh; overflow: visible; }
.dfs-read { display: flex; flex-direction: column; align-items: center; padding: 6px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.dfs-read span { font-size: 12px; color: var(--dim); font-weight: 600; text-align: center; }
.dfs-read b { font: 800 20px var(--serif); color: var(--violet-bright); }
.dfs-zero { stroke: var(--line-strong); stroke-width: 2; }
.dfs-bar { transition: height .25s, y .25s; }
.dfs-bar.def { fill: var(--violet-bright); }
.dfs-bar.sur { fill: var(--mint); }
.dfs-mon { font: 700 12px var(--sans); fill: var(--faint); text-anchor: middle; }
.dfs-mon.now { fill: var(--text); }
.dfs-key { display: flex; gap: 14px; font-size: 12px; font-weight: 700; }
.dfs-key .up { color: var(--mint); }
.dfs-key .dn { color: var(--violet-bright); }
.dfs-dlab { font: 700 13px var(--sans); fill: var(--mint); }
.dfs-val { font: 800 13px var(--sans); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.dfs-val.def { fill: var(--violet-bright); }
.dfs-val.sur { fill: var(--mint); }

/* spent vs collected */
.dfs-out { fill: #3A3570; stroke: var(--violet-bright); stroke-width: 1.5; }
.dfs-in { fill: rgba(94, 234, 180, .22); stroke: var(--mint); stroke-width: 1.5; }
.dfs-gapbox { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 5 4; }
.dfs-iou rect { fill: var(--gold); }
.dfs-iou text { font: 800 14px var(--sans); fill: #1A1405; text-anchor: middle; }
.dfs-iou text.sm { font-size: 13px; }
.dfs-gapq { font: 800 26px var(--serif); fill: var(--dim); text-anchor: middle; }
.dfs-cv { font: 800 16px var(--serif); fill: var(--text); text-anchor: middle; }
.dfs-cl { font: 700 14px var(--sans); fill: var(--dim); text-anchor: middle; }

/* the tub */
.dfs-tub .dfs-pipe { fill: none; stroke: #8C86C8; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.dfs-tap { fill: var(--gold); }
.dfs-tlab { font: 700 13px var(--sans); fill: var(--gold); }
.dfs-stream { fill: var(--gold); opacity: .85; }
.dfs-water { fill: rgba(252, 192, 80, .55); }
.dfs-tubwall { fill: none; stroke: var(--text); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.dfs-drop { fill: var(--mint); }
.dfs-drain .dfs-pipe { stroke: var(--mint); stroke-width: 6; opacity: .7; }
.dfs-lvl { font: 800 17px var(--serif); fill: var(--gold); }
.dfs-lvlname { font: 700 12px var(--sans); fill: var(--dim); }

/* draw the debt */
.dfs-row { font: 800 13px var(--sans); fill: var(--dim); }
.dfs-dbar { fill: var(--violet-bright); }
.dfs-pane { fill: rgba(169, 155, 255, .06); stroke: var(--line); stroke-width: 1; }
.dfs-col { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.dfs-yr { font: 700 12px var(--sans); fill: var(--faint); text-anchor: middle; }
.dfs-you { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 5; }
.dfs-truth { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dfs-pt { fill: var(--violet-bright); stroke: var(--bg); stroke-width: 2; }
.dfs-pt0 { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.dfs-tl { font: 800 13px var(--sans); fill: var(--gold); text-anchor: end; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.dfs-draw { touch-action: none; }

/* 2022 */
.dfs-pair { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.dfs-pair > div { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; align-items: center; justify-items: center; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); row-gap: 2px; }
.dfs-pair span { grid-column: 1 / 4; font-size: 13px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.dfs-pair b { font: 800 26px var(--serif); color: var(--violet-bright); }
.dfs-pair b.up { color: var(--gold); }
.dfs-pair i { font-style: normal; color: var(--faint); font-size: 20px; }
.dfs-pair small { grid-column: 1 / 4; font-size: 13px; color: var(--dim); }

@media (max-height: 700px) {
  .dfs-sc > svg { max-height: 38vh; }
  .dfs-sc > svg.dfs-tub { max-height: 31vh; }
  .dfs-yearbox svg { max-height: 28vh; }
  .dfs-read { padding: 4px 12px; }
  .dfs-read b { font-size: 18px; }
  .dfs-hero { width: min(72%, 270px); }
  .dfs-pair b { font-size: 22px; }
}