/* Tariff Impact Simulator and Import Quota Simulator (economics/tariff.php, economics/quota.php). The page
   chrome is the one-screen layout in /css/resource.css. On a laptop or desktop: the diagram on the left,
   filling the height, and the sliders and who-gains-who-loses tables on the right (scrolling inside the
   panel if they must). On smaller screens the two stack and the page scrolls. Theme tokens only. */

/* the diagram's colours: the theme's economics tokens (css/theme.css), under the names this diagram uses */
:root{
  --curve-d:var(--curve-demand);   /* demand */
  --curve-s:var(--curve-supply);   /* domestic supply */
  --curve-w:var(--curve-world);    /* world supply, Sw */
  --curve-t:var(--curve-price);    /* the price after the tariff or quota */
  --curve-q:var(--viz-4);          /* domestic supply + quota */
  --zone-a:var(--viz-1-area);      /* A: producer surplus gain */
  --zone-b:var(--area-deadweight); /* B: production deadweight loss */
  --zone-c:var(--area-government); /* C: tariff revenue (the quota page makes it quota rent, purple) */
  --zone-d:var(--viz-7-area);      /* D: consumption deadweight loss */
}
body.tp-quota{--zone-c:var(--viz-4-area)}

/* ---------- the stage: diagram | controls and results ---------- */
.tp-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);grid-template-rows:minmax(0,1fr);gap:12px}
.tp-graph{display:flex;flex-direction:column;padding:10px 12px 10px;min-width:0;min-height:0}
.tp-graph-box{flex:1;min-height:0;position:relative}
.tp-graph-box svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.tp-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-soft);flex:none}
.tp-legend li{display:inline-flex;align-items:center;gap:6px}
.tp-legend b{color:var(--ink);font-family:var(--font-mono)}
.sw{display:inline-block;width:13px;height:13px;border-radius:3px;flex:none;vertical-align:-2px}
.sw-a{background:var(--zone-a);border:1px solid var(--curve-s)}
.sw-b{background:var(--zone-b);border:1px solid var(--curve-d)}
.sw-c{background:var(--zone-c);border:1px solid var(--curve-w)}
body.tp-quota .sw-c{border-color:var(--curve-q)}
.sw-d{background:var(--zone-d);border:1px solid var(--curve-t)}

.tp-side{padding:12px 14px;min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
.tp-side h2{margin:4px 0 0;font:600 11.5px/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tp-sliders{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.tp-slider{display:flex;flex-direction:column;gap:2px}
.tp-slider label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 14px/1.3 var(--font-display);color:var(--ink)}
.tp-slider output{font:600 15px/1 var(--font-mono);color:var(--accent-deep)}
.tp-slider input[type=range]{width:100%;height:30px;margin:0;cursor:pointer;accent-color:var(--accent)}
.tp-alert{font-size:13.5px;line-height:1.45;border-radius:5px;padding:8px 11px;border-left:3px solid}
.tp-alert strong{display:block}
.tp-alert.bad{background:var(--bad-tint);border-color:var(--bad);color:var(--ink)}
.tp-alert.warn{background:var(--warn-tint);border-color:var(--warn);color:var(--ink)}

/* who gains and who loses; the quantities */
table.tp-table{width:100%;border-collapse:collapse;font-size:13.5px}
table.tp-table th,table.tp-table td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
table.tp-table th{font:600 10.5px/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.tp-table td:last-child{text-align:right;white-space:nowrap}
table.tp-table td.who{font-weight:600;color:var(--ink)}
table.tp-table td .areas{display:block;font:500 11.5px/1.3 var(--font-mono);color:var(--muted)}
table.tp-table td .areas .sw{width:10px;height:10px;vertical-align:-1px;margin-right:1px}
table.tp-table tr.total td{border-bottom:0;font-weight:700}
.val{font:600 14px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.val small{display:block;font:500 11.5px/1.3 var(--font-body);color:var(--muted)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font:600 11.5px/1.4 var(--font-body);white-space:nowrap}
.badge.up{background:var(--ok-tint);color:var(--ok)}
.badge.down{background:var(--bad-tint);color:var(--bad)}
.badge.none{background:var(--panel-2);color:var(--muted)}
.badge.rent{background:var(--active-tint);color:var(--active)}

.tp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tp-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:6px 8px;display:flex;flex-direction:column;gap:1px;min-width:0}
.tp-stat .lab{font:600 12px/1.25 var(--font-display);color:var(--ink)}
.tp-stat .areas{font:500 10.5px/1.3 var(--font-mono);color:var(--muted)}
.tp-stat .val{margin-top:auto;font-size:13.5px}

/* ---------- the diagram (an SVG drawn in user units; js/trade-policy.js sets --k so text stays readable) ---------- */
.tp-svg{--k:1}
/* an SVG element hidden from the start (hidden attribute); TradeGraph.show() clears it */
.tp-svg [hidden]{display:none}
.tp-svg .axis{stroke:var(--ink-soft);stroke-width:2}
.tp-svg .grid-line{stroke:var(--line-strong);stroke-dasharray:4 4;stroke-width:1}
.tp-svg .drop-line{stroke:var(--muted);stroke-dasharray:3 4;stroke-width:1.2}
.tp-svg .curve-d{stroke:var(--curve-d);stroke-width:3}
.tp-svg .curve-s{stroke:var(--curve-s);stroke-width:3}
.tp-svg .curve-q{stroke:var(--curve-q);stroke-width:2.5;stroke-dasharray:7 3;fill:none}
.tp-svg .price-w{stroke:var(--curve-w);stroke-width:2.2;stroke-dasharray:6 4}
.tp-svg .price-t{stroke:var(--curve-t);stroke-width:2.2}
.tp-svg .zone-A{fill:var(--zone-a);stroke:var(--curve-s);stroke-width:1}
.tp-svg .zone-B{fill:var(--zone-b);stroke:var(--curve-d);stroke-width:1}
.tp-svg .zone-C{fill:var(--zone-c);stroke:var(--curve-w);stroke-width:1}
body.tp-quota .tp-svg .zone-C{stroke:var(--curve-q)}
.tp-svg .zone-D{fill:var(--zone-d);stroke:var(--curve-t);stroke-width:1}
.tp-svg text{font-family:var(--font-mono)}
.tp-svg .label-text{font-size:calc(13px * var(--k));fill:var(--ink)}
.tp-svg .zone-label{font-size:calc(17px * var(--k));font-weight:700;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.tp-svg .axis-tick-text{font-size:calc(11px * var(--k));fill:var(--muted)}
.tp-svg .axis-title{font:700 calc(14px * var(--k)) var(--font-body);fill:var(--ink)}
.tp-svg .lbl-d{fill:var(--curve-d)} .tp-svg .lbl-s{fill:var(--curve-s)} .tp-svg .lbl-w{fill:var(--curve-w)}
.tp-svg .lbl-t{fill:var(--curve-t)} .tp-svg .lbl-q{fill:var(--curve-q)}
.tp-svg .ghost-line{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;opacity:.6;fill:none}
.tp-svg .ghost-dot{fill:var(--muted);opacity:.8;stroke:var(--panel);stroke-width:2}
.tp-svg .ghost-label{font-size:calc(12px * var(--k));fill:var(--muted)}
.tp-svg .eq-dot{fill:var(--accent-b-deep);stroke:var(--panel);stroke-width:2}
.tp-svg .eq-label{font-size:calc(13px * var(--k));font-weight:700;fill:var(--accent-b-deep)}

/* ---------- smaller screens (or a short window): stack, and let the page scroll ---------- */
@media (max-width:900px),(max-height:559px){
  .tp-main{grid-template-columns:1fr;grid-template-rows:none}
  .tp-graph-box{flex:none;aspect-ratio:600/510;position:relative}
  .tp-side{overflow:visible}
}
@media (max-width:900px){
  /* tap targets of at least 40px */
  .tp-scenarios button{min-height:40px}
  .rp-actions .btn{min-height:40px}
  .tp-slider input[type=range]{height:40px}
}
@media (max-width:640px){
  .tp-sliders{grid-template-columns:1fr}
  .tp-stat .areas{font-size:10px}
  .tp-graph{padding:8px 6px}
  .tp-side{padding:12px}
  .rp-controls{width:100%}
  .tp-scenarios{max-width:100%}
  .tp-scenarios button{padding:8px 10px;font-size:13px}
  table.tp-table{font-size:13px}
}