/* The economics graph pages: the supply-and-demand stage (Externalities & Interventions, Market Intervention &
   Elasticity) and the graph styles every economics graph page shares (AD/AS, the Business Cycle, Comparative
   Advantage, Costs of Production, Labour Market, Elasticity & Revenue, Related Markets…). The page chrome is the
   one-screen layout in /css/resource.css; this is the stage: the graph (filling the height), the controls and the
   economic indicators. On a laptop or desktop it all fits one window (the side panels scroll inside
   themselves if they must); on smaller screens it stacks and the page scrolls. Theme tokens only. */

/* ---------- the graph colours: the theme's economics tokens (css/theme.css, THEME-TOKENS.md) ----------
   These short names are kept for the page stylesheets that use them; new rules use the theme tokens. They point
   at the theme, so they follow light and dark mode with no copy here. */
:root{
  --curve-d:var(--curve-demand);--curve-s:var(--curve-supply);--curve-s2:var(--curve-shift);
  --curve-msb:var(--curve-social-benefit);--curve-msc:var(--curve-social-cost);--curve-ctl:var(--curve-price);
  --area-cs:var(--area-consumer);--area-ps:var(--area-producer);--area-gov:var(--area-government);--area-dwl:var(--area-deadweight);
}

/* ---------- the stage: the graph, then the controls, then the indicators ---------- */
.rp-main{gap:10px}
.mg-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px) minmax(270px,320px);gap:12px}
.mg-panels{display:contents}

.mg-graph{display:flex;flex-direction:column;gap:6px;padding:10px 12px;min-height:0;min-width:0}
.mg-graph-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;flex:none}
.mg-svgbox{flex:1;min-height:260px;display:flex;align-items:center;justify-content:center}
.mg-svgbox svg{display:block;width:100%;height:100%;max-height:100%}
.mg-legend{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-soft);margin:0;padding:0;list-style:none}
.mg-legend li{display:flex;align-items:center;gap:6px}
.mg-legend i{width:13px;height:13px;border-radius:3px;flex:none}
.mg-legend i.mg-sw-cs{background:var(--area-consumer)}
.mg-legend i.mg-sw-ps{background:var(--area-producer)}
.mg-legend i.mg-sw-gov{background:var(--area-government)}
.mg-legend i.mg-sw-dwl{background:var(--area-deadweight)}
.mg-legend i.mg-k-ghost{height:0;border-top:2px dashed var(--muted);border-radius:0}   /* the curve before a change */
.mg-note{flex:none;margin:0;font-size:13px;color:var(--ink-soft);line-height:1.45}
.mg-note:empty{display:none}

/* show the welfare areas: a switch */
.mg-switch{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--font-display);color:var(--accent-deep);cursor:pointer;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--accent-tint);min-height:34px}
.mg-switch input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer}
.mg-switch:focus-within{outline:2px solid var(--focus);outline-offset:2px}

.mg-side{padding:12px 14px;min-height:0;min-width:0;overflow:auto;display:flex;flex-direction:column;gap:12px}
.mg-side > section{display:flex;flex-direction:column;gap:8px}
.mg-side > section + section{border-top:1px solid var(--line);padding-top:12px}
.mg-examples{display:flex;flex-wrap:wrap;gap:6px}
.mg-examples .btn{white-space:normal;text-align:left}

.mg-ctl{display:flex;flex-direction:column;gap:2px}
.mg-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 13px/1.3 var(--font-display);color:var(--ink)}
.mg-ctl label output,.mg-ctl label .v{font:500 12.5px/1.3 var(--font-mono);color:var(--accent-deep);text-align:right}
.mg-ctl input[type="range"]{width:100%;margin:0;height:26px;accent-color:var(--accent);cursor:pointer}
.mg-ctl .ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:-3px}
.mg-ctl.off{opacity:.45}
.mg-sub{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.mg-sub .seg-toggle{align-self:flex-start}
.mg-hint{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}

/* the indicators */
.mg-data{padding:12px 14px;min-height:0;min-width:0;overflow:auto}
.mg-data h2{margin-bottom:6px}
table.mg-table{font-size:13.5px}
table.mg-table th,table.mg-table td{padding:6px 6px;vertical-align:middle}
table.mg-table td:last-child{text-align:right;white-space:nowrap;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px}
table.mg-table td:first-child{font-weight:600}
.mg-table .delta{font-size:.9em;color:var(--muted)}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;font:600 11px/1.3 var(--font-body);white-space:nowrap}
.badge-blue{background:var(--accent-tint);color:var(--accent-deep)}
.badge-orange{background:var(--warn-tint);color:var(--warn)}
.badge-green{background:var(--ok-tint);color:var(--ok)}
.badge-red{background:var(--bad-tint);color:var(--bad)}
.badge-purple{background:var(--hint-tint);color:var(--hint)}

/* ---------- the graph itself ---------- */
/* an SVG element hidden from the start (hidden attribute); MG.show() clears it */
svg [hidden]{display:none}
.mg-svgbox svg{background:var(--panel);border-radius:6px}
.axis{stroke:var(--ink-soft);stroke-width:2}
.grid-line{stroke:var(--line-strong);stroke-dasharray:4 4;stroke-width:1.5}
/* a lighter grid, behind a busy graph */
.grid-line.grid-soft{opacity:.55}
.grid-line.grid-faint{stroke-width:1;stroke-dasharray:3 5;opacity:.7}
.mg-bold{font-weight:700}
.proj-social{stroke:var(--curve-msb)}
.curve-d{stroke:var(--curve-d);stroke-width:3}
.curve-s{stroke:var(--curve-s);stroke-width:3}
.curve-s-shifted{stroke:var(--curve-s2);stroke-width:3;stroke-dasharray:6 3}
.curve-msb{stroke:var(--curve-msb);stroke-width:2.5}
.curve-msc{stroke:var(--curve-msc);stroke-width:2.5}
.curve-ctl{stroke:var(--curve-ctl);stroke-width:2.5}
/* the shortage or surplus along a set price: a strong band of the gap colour */
.gap-line{stroke:color-mix(in srgb,var(--viz-4) 78%,transparent);stroke-width:7;stroke-linecap:butt}
.zone-CS{fill:var(--area-cs);stroke:var(--curve-s);stroke-width:1}
.zone-PS{fill:var(--area-ps);stroke:var(--warn);stroke-width:1}
.zone-GOV{fill:var(--area-gov);stroke:var(--curve-s2);stroke-width:1}
.zone-DWL{fill:var(--area-dwl);stroke:var(--bad);stroke-width:1}
.label-text{font-size:13px;font-weight:400;fill:var(--ink);font-family:var(--font-body)}
.zone-label{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;font-family:var(--font-body)}
.eq-point{fill:var(--ink);stroke:var(--panel);stroke-width:2}
.eq-new{fill:var(--curve-s2)}
.social-point{fill:var(--curve-msb);stroke:var(--panel);stroke-width:2}
.ctl-point{fill:var(--curve-ctl);stroke:var(--panel);stroke-width:2}
.t-d{fill:var(--curve-d)}.t-s{fill:var(--curve-s)}.t-s2{fill:var(--curve-s2)}.t-msb{fill:var(--curve-msb)}.t-msc{fill:var(--curve-msc)}.t-ctl{fill:var(--curve-ctl)}.t-soft{fill:var(--ink-soft)}
.axis-tick-text{font-size:11px;fill:var(--muted);font-family:var(--font-mono)}
.axis-title{font-size:14px;font-weight:700;fill:var(--ink);font-family:var(--font-body)}
.ghost-line{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;opacity:.6;fill:none}
.ghost-dot{fill:var(--muted);opacity:.75;stroke:var(--panel);stroke-width:2}
.ghost-label{font-size:11px;font-weight:400;fill:var(--muted);font-family:var(--font-mono)}
.shift-arrow-line{stroke:var(--hint);stroke-width:8;stroke-opacity:.22;fill:none}
.shift-arrow-head{fill:var(--hint);fill-opacity:.22}
.tax-brace{stroke:var(--ink-soft);stroke-width:2;fill:none}

/* ---------- laptops up to 1300px wide: the controls and the indicators share one scrolling column ---------- */
@media (max-width:1300px){
  .mg-stage{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}
  .mg-panels{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
  .mg-panels > .panel{overflow:visible;flex:none}
}

/* ---------- tablets and phones: everything stacks and the page scrolls ---------- */
@media (max-width:900px){
  .mg-stage{display:flex;flex-direction:column}
  .mg-panels{overflow:visible}
  .mg-svgbox{min-height:0;display:block}
  .mg-svgbox svg{height:auto}
  .rp-controls{width:100%}
  .seg-toggle button{min-height:40px}
  .btn{min-height:40px}
  .mg-switch{min-height:40px}
  .mg-switch input{width:20px;height:20px}
  .mg-ctl input[type="range"]{height:40px}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .mg-graph{padding:8px 6px}
  .mg-graph-head{padding:0 4px}
  /* the graph is drawn at 600 units wide: on a phone it's about 60% size, so its text is drawn bigger */
  .label-text,.zone-label{font-size:19px}
  .axis-tick-text{font-size:17px}
  .axis-title{font-size:20px}
  .ghost-label{font-size:17px}
  .mg-legend{font-size:13px}
  .seg-toggle button{padding:8px 10px}
}
@media (max-width:420px){
  .mg-wide{display:none}
}
@media (min-width:421px){
  .mg-narrow{display:none}
}
.seg-toggle.is-off{opacity:.45}
.seg-toggle.is-off button{cursor:default}

/* the indicators' "type" badges only where there's room for them */
@media (min-width:901px){
  table.mg-table td:nth-child(2){display:none}
}

/* laptops: slightly tighter toggles, so the title bar stays on one line where it can */
@media (min-width:901px) and (max-width:1500px){
  .rp-controls .seg-toggle button{padding:9px 12px}
  .rp-titlebar{column-gap:18px}
}