/* Two-Country Trade Model (economics/2-country.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the shift bar, then the two markets side by side, filling
   what's left, with the sliders and the net result in a side panel (which scrolls inside itself if it
   must). On smaller screens everything stacks and the page scrolls. Theme tokens only; the page's own
   names for its diagram colours (pointing at the theme's) are below. */

:root{
  --exportc:var(--accent-b-deep);
  --importc:var(--hint);
  --demandc:var(--curve-demand);
  --supplyc:var(--curve-supply);
}

.rp-main{gap:10px}

/* ---------- the shift bar ---------- */
.tc-bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;flex:none}
.tc-bar label{font:600 12px/1 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tc-bar select{font:600 14px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:8px 10px;min-height:40px;max-width:100%;cursor:pointer}
.tc-bar select:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tc-bar .btn{min-height:40px}
.tc-bar select:disabled,.tc-bar .btn:disabled,.magnitude-btn:disabled,.tc-side input[type="range"]:disabled{opacity:.45;cursor:not-allowed}
.price-chip{margin-left:auto;font:600 13px/1 var(--font-body);background:var(--panel);border:1px solid var(--line-strong);padding:8px 14px;border-radius:999px;color:var(--ink-soft);white-space:nowrap}
.price-chip strong{font:700 16px/1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Teach mode's steps ---------- */
.teach-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;flex:none;background:var(--active-tint);border:1px solid var(--active);border-radius:6px;padding:10px 14px}
.teach-bar-main{flex:1 1 320px;min-width:0}
.teach-step-badge{display:inline-block;font:700 11px/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--active);background:var(--panel);border:1px solid var(--active);border-radius:999px;padding:4px 10px;margin-bottom:5px}
.teach-caption{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.teach-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none}
.teach-bar-actions .btn{min-height:40px}
.teach-intro{margin:0;flex:none;font-size:14px;color:var(--ink-soft);background:var(--active-tint);border-left:3px solid var(--active);border-radius:0 6px 6px 0;padding:8px 12px}

/* ---------- the two markets, with the sliders and the net result beside them ---------- */
.tc-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:12px}
.tc-diagrams{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px;padding:10px 8px 6px;min-height:0;min-width:0}
.country-panel{display:flex;flex-direction:column;min-height:0;min-width:0}
.country-head{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;margin-bottom:4px}
.country-title{font:700 17px/1.2 var(--font-display);margin:0;color:var(--ink)}
.role-badge{font:700 11.5px/1 var(--font-display);letter-spacing:.05em;padding:5px 10px;border-radius:999px}
.role-badge.exporter{background:var(--accent-b-tint);color:var(--accent-b-deep)}
.role-badge.importer{background:var(--hint-tint);color:var(--hint)}
svg.market{display:block;width:100%;height:auto}

/* the diagrams' text (sizes are in the diagram's own units, so they scale with it) */
.axis-title{fill:var(--ink);font:700 12px var(--font-body)}
.axis-tick-text{fill:var(--muted);font:9px var(--font-mono)}
.curve-label{font:13px var(--font-mono)}
.curve-label.d{fill:var(--demandc)}
.curve-label.s{fill:var(--supplyc)}
.curve-d{stroke:var(--demandc);stroke-width:2.2}
.curve-s{stroke:var(--supplyc);stroke-width:2.2}
.local-label{fill:var(--muted);font:10px var(--font-body)}
.gap-label{font:12px var(--font-body)}
.price-label{font:11px var(--font-mono)}
.e1-label{font:11px var(--font-mono)}
.ghost-curve{stroke:var(--muted);stroke-width:1.8;stroke-dasharray:4 3;opacity:.65}
.ghost-label{fill:var(--muted);font:11px var(--font-mono)}
.shift-arrow-shaft{stroke-width:11;stroke-opacity:.22}
.shift-arrowhead{fill-opacity:.22}

/* ---------- the side panel ---------- */
.tc-side{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.tc-side .panel{padding:10px 14px}
.tc-side h2{margin:0 0 6px;font:600 11.5px/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.control-group h3{font:700 14px/1.2 var(--font-display);margin:8px 0 2px;color:var(--ink)}
.control-group:first-of-type h3{margin-top:2px}
.slider-row label{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.slider-row label span{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.slider-row input[type="range"]{display:block;width:100%;height:28px;margin:0;accent-color:var(--accent);cursor:pointer}
.tc-side .reset{margin-top:8px;min-height:36px}
.welfare-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.welfare-card{border-radius:6px;padding:8px 10px;border:1px solid var(--line)}
.welfare-card.gain{background:var(--ok-tint)}
.welfare-card.loss{background:var(--bad-tint)}
.welfare-card.flat{background:var(--accent-tint)}
.welfare-card .who{font-size:12px;line-height:1.3;color:var(--muted);margin-bottom:2px}
.welfare-card .amount{font:700 17px/1.2 var(--font-mono);font-variant-numeric:tabular-nums}
.welfare-card.gain .amount{color:var(--ok)}
.welfare-card.loss .amount{color:var(--bad)}
.welfare-card.flat .amount{color:var(--muted)}
.narrative{grid-column:1/-1;flex:none;margin:4px 8px 2px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.narrative b{color:var(--ink);font-weight:600}

/* ---------- one screen: the diagrams take the height that's left ---------- */
@media (min-width:901px) and (min-height:560px){
  svg.market{flex:1 1 0;min-height:0;height:auto}
}

/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:1100px){
  .tc-work{grid-template-columns:minmax(0,1fr) 270px}
}
@media (max-width:900px){
  .tc-work{grid-template-columns:1fr}
  .tc-diagrams{grid-template-rows:none}
  .tc-side{overflow:visible}
  /* tap targets of at least 40px on a phone or tablet */
  .rp-titlebar .btn,.seg-toggle button,.tc-side .btn{min-height:40px}
  .price-chip{margin-left:0}
}
@media (max-width:640px){
  .tc-bar select{width:100%}
  .tc-diagrams{grid-template-columns:1fr;gap:14px;padding:10px 4px 6px}
  /* bigger text on a phone, where the diagram is drawn at about three quarters of its size */
  .axis-title{font-size:15px}
  .axis-tick-text{font-size:13px}
  .curve-label{font-size:16px}
  .local-label{font-size:12.5px}
  .gap-label{font-size:15px}
  .price-label,.e1-label,.ghost-label{font-size:14px}
  .slider-row input[type="range"]{height:40px}
  .tc-side .reset{min-height:40px}
}

/* the country panels' headings keep their own look (css/resource.css's .panel h2 is the small upper-case label) */
.panel h2.country-title{font:700 17px/1.2 var(--font-display);text-transform:none;letter-spacing:normal;color:var(--ink)}