/* Business Cycle & Growth (economics/business-cycle.php). The stage, controls and indicators are
   market-graph.css's (shared, not changed here); this adds the time-series graph and the cursor's
   readout. Theme tokens only, plus page tokens for the lines and the recession shading. */
:root{
  --bc-actual:#1d4ed8;--bc-trend:#475569;--bc-nominal:#c2410c;--bc-rec:rgba(220,38,38,.10);
  --bc-bar:#2563eb;--bc-bar-neg:#dc2626;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bc-actual:#93c5fd;--bc-trend:#cbd5e1;--bc-nominal:#fdba74;--bc-rec:rgba(248,113,113,.14);
    --bc-bar:#60a5fa;--bc-bar-neg:#f87171;
  }
}
:root[data-theme="dark"]{
  --bc-actual:#93c5fd;--bc-trend:#cbd5e1;--bc-nominal:#fdba74;--bc-rec:rgba(248,113,113,.14);
  --bc-bar:#60a5fa;--bc-bar-neg:#f87171;
}

/* the lines */
.bc-actual{fill:none;stroke:var(--bc-actual);stroke-width:3;stroke-linejoin:round}
.bc-trend{fill:none;stroke:var(--bc-trend);stroke-width:2;stroke-dasharray:7 5}
.bc-nominal{fill:none;stroke:var(--bc-nominal);stroke-width:2.5;stroke-linejoin:round}
.bc-rec{fill:var(--bc-rec)}
.bc-bar{fill:var(--bc-bar)}
.bc-bar-neg{fill:var(--bc-bar-neg)}
.bc-year-line{stroke:var(--line);stroke-width:1}
.bc-tp-peak{fill:var(--ok);stroke:var(--panel);stroke-width:2}
.bc-tp-trough{fill:var(--hint);stroke:var(--panel);stroke-width:2}
.bc-tp-text{font-size:11.5px;font-weight:700;fill:var(--ink-soft);font-family:var(--font-body)}

/* the phases: the strip under the graph and the badge in the readout */
.bc-ph{stroke:var(--panel);stroke-width:1}
.bc-ph-text{font-size:10.5px;font-weight:700;font-family:var(--font-body);fill:var(--ink);pointer-events:none}
rect.bc-ph-boom{fill:var(--ok-tint)}
.bc-phase-key{flex:none;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--ink-soft)}
.bc-phase-key li{display:flex;align-items:center;gap:5px}
.bc-sw{width:14px;height:10px;border-radius:2px;border:1px solid var(--line-strong)}
.bc-sw.bc-ph-boom{background:var(--ok-tint)}.bc-sw.bc-ph-peak{background:var(--ok)}.bc-sw.bc-ph-downturn{background:var(--warn-tint)}
.bc-sw.bc-ph-recession{background:var(--bad-tint)}.bc-sw.bc-ph-trough{background:var(--hint)}.bc-sw.bc-ph-recovery{background:var(--accent-tint)}
#growth-trend-label{paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
table.mg-table.bc-table td,table.mg-table.bc-ind td{padding-top:4px;padding-bottom:4px}
rect.bc-ph-peak{fill:var(--ok)}
rect.bc-ph-downturn{fill:var(--warn-tint)}
rect.bc-ph-recession{fill:var(--bad-tint)}
rect.bc-ph-trough{fill:var(--hint)}
rect.bc-ph-recovery{fill:var(--accent-tint)}
rect.bc-ph-steady{fill:var(--panel-2)}
.bc-phase{margin:6px 0 4px}
.bc-phase-badge{display:inline-block;padding:4px 12px;border-radius:999px;font:700 15px/1.3 var(--font-display);border:1px solid var(--line-strong)}
.bc-phase-badge.bc-ph-boom,.bc-phase-badge.bc-ph-peak{background:var(--ok-tint);color:var(--ok)}
.bc-phase-badge.bc-ph-downturn{background:var(--warn-tint);color:var(--warn)}
.bc-phase-badge.bc-ph-recession{background:var(--bad-tint);color:var(--bad)}
.bc-phase-badge.bc-ph-trough{background:var(--hint-tint);color:var(--hint)}
.bc-phase-badge.bc-ph-recovery{background:var(--accent-tint);color:var(--accent-deep)}
.bc-phase-badge.bc-ph-steady{background:var(--panel-2);color:var(--ink)}
.bc-phase-text{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}

/* the cursor */
.bc-cursor line{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.bc-cursor-dot{fill:var(--ink);stroke:var(--panel);stroke-width:2}
.bc-knob{fill:var(--accent);stroke:var(--panel);stroke-width:2}
#drag-area{cursor:ew-resize;touch-action:pan-y}
.bc-cursor{pointer-events:none}
.bc-time{flex:none;padding:0 2px}

/* the legend */
.bc-legend .bc-key{width:18px;height:0;border-radius:0;border-top:3px solid}
.bc-key-actual{border-color:var(--bc-actual)!important}
.bc-key-trend{border-top:2px dashed var(--bc-trend)!important}
.bc-key-nominal{border-color:var(--bc-nominal)!important}
.bc-legend .bc-key-rec{height:12px;width:14px;border:0;border-radius:3px;background:var(--bc-rec);outline:1px solid var(--bad-tint)}
.bc-legend li[hidden]{display:none}

/* the readout */
.bc-sub{margin-top:12px!important;margin-bottom:4px!important}
table.mg-table.bc-table td:last-child{white-space:nowrap}
table.mg-table.bc-ind td:first-child{width:38%;vertical-align:top}
table.mg-table.bc-ind td:last-child{text-align:left;white-space:normal;font-family:var(--font-body);font-size:13px;line-height:1.35}
/* market-graph.css hides each indicator table's second column on a laptop: these tables have only two */
@media (min-width:901px){
  table.mg-table.bc-table td:nth-child(2),table.mg-table.bc-ind td:nth-child(2){display:table-cell}
}
.bc-arrow{display:inline-block;width:1.1em;font-size:.8em}
.bc-arrow-up,.bc-arrow-down{color:var(--accent-deep)}
.bc-arrow-flat{color:var(--muted)}
.bc-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink);background:var(--accent-tint);border-radius:5px;padding:8px 10px}
.bc-note:empty{display:none}

@media (min-width:901px) and (max-height:720px){
  .mg-ctl .ends{display:none}
  .bc-phase-text{font-size:12.5px}
}
@media (max-width:900px){
  .bc-time input[type="range"]{height:40px}
}
@media (max-width:640px){
  .bc-tp-text{font-size:15px}
  .bc-ph-text{font-size:13px}
}
.bc-legend{min-width:0}
@media (max-width:640px){
  .bc-legend{width:100%}
  .bc-phase-key{font-size:13px}
}