/* Circular Flow of Income (economics/circular-flow.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the diagram, with the readouts under it, fills what's left
   of the window, and the sliders, the rounds chart and the presets sit to its right (scrolling inside
   their panel if they must). On smaller screens they stack, the diagram turns portrait and the page
   scrolls. Theme tokens only, plus the diagram's own page tokens below. */

/* ---------- page tokens: the four kinds of flow, deeper in light mode ---------- */
:root{
  --flow-money:#b45309;   /* income and spending */
  --flow-real:#2563eb;    /* factor services, goods and services */
  --flow-w:#dc2626;       /* withdrawals: S, T, M */
  --flow-j:#059669;       /* injections: I, G, X */
  --flow-dash:rgba(255,255,255,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--flow-money:#fbbf24;--flow-real:#60a5fa;--flow-w:#f87171;--flow-j:#34d399;--flow-dash:rgba(15,23,42,.55)}
}
:root[data-theme="dark"]{--flow-money:#fbbf24;--flow-real:#60a5fa;--flow-w:#f87171;--flow-j:#34d399;--flow-dash:rgba(15,23,42,.55)}

.rp-main{gap:10px}
.cf-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,350px);gap:12px}
.panel h2{margin:0;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- the diagram ---------- */
.cf-graph{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 14px 12px;gap:6px}
.cf-head{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;flex:none}
.cf-legend{list-style:none;margin:0 auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-soft);flex:none}
.cf-legend li{display:inline-flex;align-items:center;gap:6px}
.cf-legend i{width:18px;height:5px;border-radius:3px;flex:none}
.lg-money i{background:var(--flow-money)}.lg-real i{background:var(--flow-real)}.lg-w i{background:var(--flow-w)}.lg-j i{background:var(--flow-j)}
.cf-svg-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#cfDiagram{display:block;width:100%;height:100%;max-height:100%;overflow:visible}

.cf-flow .flow-line{fill:none;stroke-linejoin:round;transition:stroke-width .3s ease}
.cf-flow .flow-dash{fill:none;stroke:var(--flow-dash);stroke-dasharray:3 15;stroke-linecap:round;animation:cf-flow 1.1s linear infinite}
@keyframes cf-flow{to{stroke-dashoffset:-36}}
.cf-money .flow-line{stroke:var(--flow-money)}.ah-money{fill:var(--flow-money)}
.cf-real .flow-line{stroke:var(--flow-real)}.ah-real{fill:var(--flow-real)}
.cf-w .flow-line{stroke:var(--flow-w)}.ah-w{fill:var(--flow-w)}
.cf-j .flow-line{stroke:var(--flow-j)}.ah-j{fill:var(--flow-j)}
.cf-flow,.cf-box,.empty-note{transition:opacity .45s ease}
.cf-flow.is-off{opacity:.08}
.cf-flow.is-dim{opacity:.22}
.cf-flow.is-out,.cf-box.is-out,.empty-note.is-out{opacity:0;pointer-events:none}
.cf-flow.is-off .flow-dash,.cf-flow.is-out .flow-dash{animation:none}
.cf-box rect{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:2}
.cf-box-h rect,.cf-box-f rect{fill:var(--accent-tint);stroke:var(--accent-deep);stroke-width:2.5}
.box-title{font:700 22px var(--font-display);fill:var(--ink)}
.box-title-sm{font-size:17px}
.box-sub{font:500 14px var(--font-body);fill:var(--ink-soft)}
.flow-label{font:600 17px var(--font-body);fill:var(--ink)}
.cf-money .flow-label{fill:var(--flow-money)}
.cf-real .flow-label{fill:var(--flow-real)}
.jw-label{font:700 15px var(--font-body);fill:var(--ink)}
.jw-amount{font:600 15px var(--font-mono);fill:var(--ink-soft)}
.cf-w .jw-label{fill:var(--flow-w)}.cf-j .jw-label{fill:var(--flow-j)}
.empty-note{font:italic 500 15px var(--font-body);fill:var(--muted)}
/* the portrait diagram, for narrow screens: drawn smaller, so its text is drawn bigger */
.cf-port .box-title{font-size:24px}
.cf-port .box-title-sm{font-size:16px}
.cf-port .flow-label{font-size:17px}
.cf-port .jw-label{font-size:18px}
.cf-port .jw-amount{font-size:15px}
.cf-port .empty-note{font-size:18px}

/* the readouts under the diagram */
.cf-readouts{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cf-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-stat .lab{font:600 11.5px/1.25 var(--font-display);color:var(--muted)}
.cf-stat .val{font:700 18px/1.2 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.st-j{border-left:4px solid var(--flow-j)}.st-w{border-left:4px solid var(--flow-w)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font:700 14px/1.35 var(--font-display)}
.badge-rising{background:var(--ok-tint);color:var(--ok)}
.badge-falling{background:var(--bad-tint);color:var(--bad)}
.badge-stable{background:var(--accent-tint);color:var(--accent-deep)}
.cf-eq{flex:none;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);min-height:2.9em}
.cf-eq b{font-family:var(--font-display);color:var(--ink)}

/* ---------- the side panel ---------- */
.cf-side{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;overflow:auto;padding:12px 14px}
.cf-sec{display:flex;flex-direction:column;gap:6px}
.cf-sec + .cf-sec,.cf-side > .cf-check + .cf-sec{border-top:1px solid var(--line);padding-top:10px}
.cf-sec[hidden],.cf-ctl[hidden]{display:none}
.cf-ctl{display:flex;flex-direction:column;gap:1px}
.cf-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 13.5px/1.3 var(--font-display);color:var(--ink)}
.cf-ctl output{font:600 13.5px/1.3 var(--font-mono);color:var(--accent-deep)}
.cf-ctl input[type="range"]{width:100%;margin:0;height:26px;accent-color:var(--accent);cursor:pointer}
#secJ .cf-ctl input{accent-color:var(--flow-j)}
#secW .cf-ctl input{accent-color:var(--flow-w)}
.cf-check{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1.3 var(--font-display);color:var(--ink-soft);cursor:pointer}
.cf-check input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
.cf-hint{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.cf-hint:empty{display:none}
#cfRounds{display:block;width:100%;height:auto;max-height:190px}
#cfRounds .axis{stroke:var(--ink-soft);stroke-width:1.5}
#cfRounds .tick{font:500 11px var(--font-mono);fill:var(--muted)}
#cfRounds .ax-title{font:600 11.5px var(--font-body);fill:var(--ink-soft)}
#cfRounds .eq-line{stroke:var(--accent-deep);stroke-width:1.5;stroke-dasharray:5 4}
#cfRounds .eq-text{font:600 11.5px var(--font-body);fill:var(--accent-deep)}
#cfRounds .run-line{fill:none;stroke:var(--flow-money);stroke-width:2.5;stroke-linejoin:round}
#cfRounds .run-dot{fill:var(--flow-money);stroke:var(--panel);stroke-width:1.5}
#cfRounds .run-dot.now{fill:var(--ink)}
.cf-step{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cf-round{font:600 13px var(--font-mono);color:var(--muted);margin-left:auto}
.cf-presets{display:flex;flex-wrap:wrap;gap:6px}
.cf-presets .btn{white-space:normal;text-align:left}
.cf-presets .btn[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .cf-flow .flow-dash{animation:none;display:none}
  .cf-flow,.cf-box,.empty-note,.cf-flow .flow-line{transition:none}
}

/* ---------- a short laptop window: tighter, so it all still fits ---------- */
@media (min-width:901px) and (max-height:720px){
  .cf-side{gap:9px}
  .cf-stat .val{font-size:16px}
  .cf-eq{font-size:12.5px}
  #cfRounds{max-height:150px}
}

/* ---------- smaller screens: stacked, and the page scrolls ---------- */
@media (max-width:900px),(max-height:559px){
  .cf-work{grid-template-columns:1fr;flex:none}
  .cf-svg-box{flex:none;display:block}
  #cfDiagram{height:auto;max-height:none}
  .cf-side{overflow:visible}
}
@media (max-width:900px){
  /* tap targets of at least 40px */
  .rp-titlebar .btn,.cf-side .btn,.seg-toggle button,.rp-nav .btn,.rp-nav .account-link{min-height:40px}
  .rp-nav .account-link{display:inline-flex;align-items:center}
  .cf-ctl input[type="range"]{height:40px}
  .cf-check{min-height:40px}
  .cf-check input{width:22px;height:22px}
}
@media (max-width:640px){
  .cf-graph{padding:10px 8px 12px}
  .cf-readouts{grid-template-columns:1fr 1fr}
  .rp-controls .seg-toggle,.cf-head .seg-toggle{display:flex;width:100%}
  .seg-toggle button{flex:1;justify-content:center;white-space:normal;text-align:center;line-height:1.15}
  #cfRounds .tick{font-size:13px}
  #cfRounds .ax-title,#cfRounds .eq-text{font-size:13px}
}

/* laptops: the legend gives way so the flows toggle stays on the heading's line (the flows' labels are in their colours) */
@media (min-width:901px) and (max-width:1400px){
  .cf-legend{display:none}
}

/* small laptops: a narrower side panel and tighter readouts, so the diagram keeps the room */
@media (min-width:901px) and (max-width:1150px){
  .cf-work{grid-template-columns:minmax(0,1fr) 290px}
  .cf-readouts{gap:6px}
  .cf-stat{padding:4px 8px}
  .cf-stat .lab{font-size:10.5px}
  .cf-stat .val{font-size:15px}
}