/* Foreign Exchange Market (economics/exchange-rates.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the graph on the left, filling the height that's left, and
   the scenarios, sliders and indicators on the right (in two columns on a wide screen; each 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{
  --demand-color:var(--curve-demand);
  --supply-color:var(--curve-supply);
  --eq-color:var(--viz-3);
  --fixed-color:var(--curve-price);
  --area-surplus:var(--viz-5-area);
  --area-shortage:var(--viz-1-area);
}
/* hidden until the script shows them (it sets display on the element) */
.er-off{display:none}

/* ---------- the graph, with the controls beside it ---------- */
.fx-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(560px,52%);gap:12px}
.fx-graph{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 14px 12px}
.fx-graph-head{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;flex:none;margin-bottom:6px}
.fx-graph-head h2{margin:0;font:700 16px/1.2 var(--font-display);color:var(--ink)}
.fx-graph-head .subtitle{font-size:13px;color:var(--muted)}
svg#graph{display:block;width:100%;height:auto;overflow:visible}

.fx-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0;min-width:0}
.fx-col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0;overflow:auto}
.fx-side .panel{padding:12px 14px}
.fx-side h2{margin:0 0 8px;font:600 11.5px/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* SVG styling */
.axis{stroke:var(--ink-soft);stroke-width:2}
.grid-line{stroke:var(--line);stroke-dasharray:4 4;stroke-width:1}
.proj-line{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1.5}
.fixed-line{stroke:var(--fixed-color);stroke-width:2;stroke-dasharray:6 3}
.curve-d{stroke:var(--demand-color);stroke-width:3}
.curve-s{stroke:var(--supply-color);stroke-width:3}
.zone-surplus{fill:var(--area-surplus);stroke:var(--demand-color);stroke-width:1}
.zone-shortage{fill:var(--area-shortage);stroke:var(--supply-color);stroke-width:1}
.axis-tick-text{font:11px var(--font-mono);fill:var(--muted)}
.label-text{font:13px var(--font-body);fill:var(--ink)}
.label-text.d{fill:var(--demand-color)}
.label-text.s{fill:var(--supply-color)}
.label-text.eq{fill:var(--eq-color)}
.label-text.fixed{fill:var(--fixed-color)}
.axis-title{font:700 14px var(--font-body);fill:var(--ink)}
.eq-point{fill:var(--eq-color);stroke:var(--panel);stroke-width:2}
/* the shift animation: greyed "before" markers left behind, and the growing shift arrows */
.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:11px var(--font-mono);fill:var(--muted)}
.shift-arrow-line{stroke:var(--active);stroke-width:13;stroke-opacity:.22;fill:none}
.shift-arrow-head{fill:var(--active);fill-opacity:.22}

.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:8px;font-size:13px;line-height:1.35;color:var(--ink-soft);flex:none}
.legend-item{display:flex;align-items:flex-start;gap:7px}
.legend-item strong{color:var(--ink)}
.color-box{width:13px;height:13px;border-radius:3px;flex:none;margin-top:2px}
.color-box.d{background:var(--demand-color)}
.color-box.s{background:var(--supply-color)}

/* ---------- scenarios ---------- */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.btn-preset{background:var(--paper);border:1px solid var(--line-strong);border-radius:5px;padding:7px 9px;min-height:40px;font:600 12.5px/1.3 var(--font-body);color:var(--ink-soft);cursor:pointer;text-align:left;transition:background .15s,color .15s,border-color .15s}
.btn-preset:hover{background:var(--accent-tint);color:var(--accent-deep);border-color:var(--accent)}
.btn-preset:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.btn-preset.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent-deep)}
.rationale-box{background:var(--ok-tint);border-left:4px solid var(--ok);padding:9px 12px;border-radius:4px;font-size:13px;color:var(--ink);line-height:1.45;margin-top:10px}
.impact-box{background:var(--accent-tint);border-left:4px solid var(--accent);padding:9px 12px;border-radius:4px;font-size:13px;color:var(--ink);line-height:1.45;margin-top:10px}

/* ---------- sliders ---------- */
.control-group{margin-bottom:8px}
.control-group:last-child{margin-bottom:0}
.control-group label{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:13px;line-height:1.3;color:var(--ink)}
.control-group label .val{font-weight:600;white-space:nowrap}
#demand-val{color:var(--demand-color)}
#supply-val{color:var(--supply-color)}
#fixed-er-val{color:var(--fixed-color)}
.control-group input[type="range"]{display:block;width:100%;height:28px;margin:0;cursor:pointer;accent-color:var(--accent)}
.fixed-panel{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:8px 10px;margin-top:4px}

/* ---------- indicators ---------- */
table.calc-table{width:100%;border-collapse:collapse;font-size:13px}
table.calc-table th,table.calc-table td{padding:6px 5px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.calc-table th{background:var(--paper)}
table.calc-table td:last-child{white-space:nowrap}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;font:700 11.5px/1.4 var(--font-mono);white-space:nowrap}
.badge-green{background:var(--ok-tint);color:var(--ok)}
.badge-red{background:var(--bad-tint);color:var(--bad)}
.badge-gray{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.badge-amber{background:var(--accent-b-tint);color:var(--accent-b-deep)}

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

/* ---------- smaller screens ---------- */
@media (max-width:1250px){
  .fx-work{grid-template-columns:minmax(0,1fr) 340px}
  .fx-side{grid-template-columns:1fr;overflow:auto}
  .fx-col{overflow:visible}
}
@media (max-width:900px){
  .fx-work{grid-template-columns:1fr}
  .fx-side{overflow:visible}
  /* tap targets of at least 40px on a phone or tablet */
  .rp-titlebar .btn,.seg-toggle button{min-height:40px}
  .control-group input[type="range"]{height:40px}
}
@media (max-width:640px){
  .legend-grid{grid-template-columns:1fr}
  .fx-graph{padding:10px 8px 12px}
  /* bigger text on a phone, where the graph is drawn at about 60% of its size */
  .axis-tick-text{font-size:16px}
  .label-text{font-size:20px}
  .axis-title{font-size:20px}
  .ghost-label{font-size:17px}
}

/* the graph's heading keeps its own look (css/resource.css's .panel h2 is the small upper-case label) */
#graphHead{text-transform:none;letter-spacing:normal}