/* Free Trade Agreement Explorer (economics/fta-explorer.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the steps and the step's diagrams on the left, filling the
   height; the numbers and the growing explanation on the right (scrolling inside). On smaller screens they
   stack and the page scrolls. Theme tokens only, with the diagrams' names for them below. */

/* the diagrams' colours: the theme's economics tokens, under this page's names */
:root{
  --fx-d:var(--curve-demand);    /* demand */
  --fx-s:var(--curve-supply);    /* supply */
  --fx-new:var(--curve-price);   /* after the agreement */
  --fx-gain:var(--viz-3-area);
  --fx-tariff:var(--viz-5-area);
}

.fx-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-template-rows:minmax(0,1fr);gap:12px}

/* ---------- the stage ---------- */
.fx-stage{display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px;min-width:0;min-height:0}
.fx-steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;flex:none}
.fx-step{display:inline-flex;align-items:center;gap:7px;font:600 13px/1.2 var(--font-display);padding:6px 11px 6px 6px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);cursor:pointer;min-height:34px}
.fx-step .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-strong);font:700 12px/1 var(--font-mono);color:var(--ink-soft)}
.fx-step.done .num{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.fx-step.on{border-color:var(--accent);background:var(--accent-tint);color:var(--ink)}
.fx-step.on .num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fx-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.fx-diagrams{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fx-diagrams.single{grid-template-columns:1fr}
.fx-diagrams[hidden],.fx-groups[hidden]{display:none}
.fx-box{position:relative;min-height:0;min-width:0;transition:opacity .25s}
.fx-box.dim{opacity:.55}
.fx-box[hidden]{display:none}
.fx-box svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;--k:1}

.fx-box .fx-axis{stroke:var(--ink-soft);stroke-width:2}
.fx-box .fx-drop{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.fx-box .fx-d,.fx-box .fx-d1{stroke:var(--fx-d);stroke-width:3}
.fx-box .fx-s,.fx-box .fx-s1{stroke:var(--fx-s);stroke-width:3}
.fx-box .fx-d1,.fx-box .fx-s1{stroke-dasharray:9 4}
.fx-box .fx-faint{opacity:.45}
.fx-box .fx-old{stroke:var(--muted);stroke-width:2;stroke-dasharray:6 4}
.fx-box .fx-new{stroke:var(--fx-new);stroke-width:2.6}
.fx-box .fx-gain{fill:var(--fx-gain)}
.fx-box .fx-tariff{fill:var(--fx-tariff)}
.fx-box .fx-br{stroke:var(--ink-soft);stroke-width:1.6}
.fx-box .fx-br.new{stroke:var(--fx-new)}
.fx-box .fx-head{fill:var(--ink-soft)}
.fx-box text{font-family:var(--font-mono)}
.fx-box .fx-title{font:700 calc(13.5px * var(--k)) var(--font-display);fill:var(--ink)}
.fx-box .fx-ax{font:600 calc(11.5px * var(--k)) var(--font-body);fill:var(--ink-soft)}
.fx-box .fx-lbl{font-size:calc(11.5px * var(--k));fill:var(--ink);paint-order:stroke;stroke:var(--panel);stroke-width:3px}
.fx-box .fx-lbl.old{fill:var(--muted)}
.fx-box .fx-lbl.new{fill:var(--fx-new);font-weight:700}
.fx-box .fx-lbl.d,.fx-box .fx-lbl.d1{fill:var(--fx-d);font-weight:700}
.fx-box .fx-lbl.s{fill:var(--fx-s);font-weight:700}
.fx-box .fx-br-t{font-size:calc(11.5px * var(--k));font-weight:700;fill:var(--ink-soft);paint-order:stroke;stroke:var(--panel);stroke-width:3px}
.fx-box .fx-br-t.new{fill:var(--fx-new)}
.fx-box .fx-tick{font-size:calc(10.5px * var(--k));fill:var(--muted)}
.fx-box .fx-dot-old{fill:var(--muted);stroke:var(--panel);stroke-width:2}
.fx-box .fx-dot-new{fill:var(--fx-new);stroke:var(--panel);stroke-width:2}

.fx-groups{flex:1;min-height:0;overflow:auto}
.fx-group-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fx-g{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:0 6px 6px 0;border-left:4px solid var(--line-strong);background:var(--panel-2);font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.fx-g b{font:700 14px/1.25 var(--font-display);color:var(--ink)}
.fx-g-dir{font:700 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.fx-g.up{border-left-color:var(--ok)} .fx-g.up .fx-g-dir{color:var(--ok)}
.fx-g.down{border-left-color:var(--bad)} .fx-g.down .fx-g-dir{color:var(--bad)}
.fx-g.mixed{border-left-color:var(--warn)} .fx-g.mixed .fx-g-dir{color:var(--warn)}

.fx-step-text{margin:0;font-size:14px;line-height:1.45;color:var(--ink-soft);flex:none}
.fx-step-text b{color:var(--ink)}
.fx-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none}
.fx-key{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.fx-key i{display:inline-block;width:18px;height:0;border-top:2.5px solid}
.fx-key i.old{border-color:var(--muted);border-top-style:dashed}
.fx-key i.new{border-color:var(--fx-new)}

/* ---------- the side panel ---------- */
.fx-side{padding:12px 14px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
.fx-facts{margin:0;line-height:1.45;flex:none}
.fx-facts b{color:var(--ink)}
table.fx-nums{font-size:13px;flex:none}
table.fx-nums th,table.fx-nums td{padding:4px 6px}
table.fx-nums td{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
table.fx-nums td:last-child{color:var(--fx-new);font-weight:700}
table.fx-nums th[scope=row]{font:600 12.5px/1.3 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink)}
table.fx-nums thead th{text-align:right}
table.fx-nums thead th:first-child{text-align:left}
.fx-chain-head{display:flex;align-items:center;justify-content:space-between;flex:none}
.fx-chain-box{flex:1;min-height:0;overflow:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.fx-chain-box p{margin:0 0 9px;font-size:14px;line-height:1.5;color:var(--ink)}
.fx-chain-box p:last-child{margin-bottom:0}
.fx-chain-box .fx-more{color:var(--muted);font-style:italic}

/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:1180px){
  .rp-controls{gap:8px}
}
@media (max-width:900px),(max-height:559px){
  .fx-main{grid-template-columns:1fr;grid-template-rows:none}
  .fx-diagrams{flex:none}
  .fx-box{aspect-ratio:420/360}
  .fx-chain-box{flex:none;max-height:none}
  .fx-groups{flex:none;overflow:visible}
}
@media (max-width:900px){
  .fx-scn button,.fx-way button,.fx-step,.fx-nav .btn,#fxCopy{min-height:40px}
}
@media (max-width:640px){
  .fx-diagrams{grid-template-columns:1fr}
  .fx-group-list{grid-template-columns:1fr}
  .fx-stage{padding:10px}
  .fx-scn{max-width:100%}
  .fx-scn button{padding:8px 10px;font-size:13px}
  .fx-key{margin-left:0}
}
.fx-step-text .fx-note{color:var(--muted);font-size:13px}

/* ---------- short or narrow laptop windows: keep every part reachable ---------- */
.fx-stage{overflow:auto}
.fx-diagrams{min-height:210px}
.fx-groups{min-height:170px}
.fx-side{overflow:auto}
.fx-chain-box{min-height:140px}
@media (max-width:1100px) and (min-width:641px){
  .fx-step:not(.on){padding-right:6px}
  .fx-step:not(.on) span:not(.num){display:none}
}
.fx-facts-box{flex:none}
.fx-facts-box summary{cursor:pointer;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:4px 0}
.fx-facts-box[open] summary{margin-bottom:4px}
@media (max-width:900px){.fx-facts-box summary{min-height:40px;display:flex;align-items:center}}