/* Exchange Rate Chain Reaction (economics/exchange-rate-chain.php). The page chrome is the one-screen layout in
   /css/resource.css and the graph's look is economics/market-graph.css; this is the stage: the triggers and the
   graph on the left, and the chain, the links and the feedback on the right. One window on a laptop or desktop
   (the panels scroll inside themselves); on a phone it stacks. Theme tokens only. */

.erc-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:12px}
.erc-stage h2{margin:0;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- the left: the triggers, then the graph ---------- */
.erc-left{display:flex;flex-direction:column;gap:8px;padding:12px;min-height:0;min-width:0;overflow:auto}
.erc-triggers{position:relative;flex:1;min-height:96px;overflow:auto;display:flex;flex-direction:column;gap:5px;padding:2px}
.erc-trig{flex:none;display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:600 13px/1.25 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;cursor:pointer;min-height:36px}
.erc-trig:hover{border-color:var(--accent)}
.erc-trig:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.erc-trig.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-deep)}
.erc-trig-text{flex:1;min-width:0}
.erc-trig-nzd{flex:none;font:700 10.5px/1 var(--font-mono);padding:3px 5px;border-radius:4px;white-space:nowrap}
.erc-trig-nzd.up,.erc-lead-nzd.up{background:var(--ok-tint);color:var(--ok)}
.erc-trig-nzd.down,.erc-lead-nzd.down{background:var(--bad-tint);color:var(--bad)}
.erc-trig-done{flex:none;font:700 11px/1 var(--font-mono);color:var(--ok)}

.erc-graph{flex:none;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.erc-graph svg{display:block;width:100%;height:auto;max-height:240px;background:var(--panel)}
/* the graph is drawn 600 wide and shown about 280 wide: its text is drawn bigger to stay readable */
.erc-graph .label-text{font-size:28px;font-weight:600}
.erc-graph .ghost-label{font-size:24px}
.erc-graph .axis-title{font-size:26px}
.erc-graph .curve-d,.erc-graph .curve-s{stroke-width:5}
.erc-graph .ghost-line{stroke-width:4}
.erc-graph .grid-line.erc-e1{stroke:var(--curve-s2)}
.erc-shift{stroke:var(--hint);stroke-width:7;stroke-linecap:round}
.erc-arrowhead{fill:var(--hint)}
.erc-cap{margin:0;font-size:12.5px;line-height:1.4;color:var(--ink-soft)}

/* ---------- the right: the trigger, the chains, then the chain beside the links ---------- */
.erc-main{display:flex;flex-direction:column;min-height:0;min-width:0;padding:12px 14px;gap:10px}
.erc-head{flex:none;display:flex;flex-direction:column;gap:8px}
.erc-lead{margin:0;font:600 15px/1.4 var(--font-display);color:var(--ink)}
.erc-lead-nzd{display:inline-block;font:700 11.5px/1 var(--font-mono);padding:4px 7px;border-radius:4px;margin-right:4px;vertical-align:1px}
.erc-tabs{display:flex;flex-wrap:wrap;gap:6px}
.erc-tab{font:600 13px/1.2 var(--font-display);padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink-soft);cursor:pointer;min-height:34px}
.erc-tab:hover{border-color:var(--accent);color:var(--ink)}
.erc-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.erc-tab.done:not([aria-selected="true"]){border-color:var(--ok);color:var(--ok)}
.erc-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.erc-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px}
.erc-chain{min-height:0;overflow:auto;display:flex;flex-direction:column;padding:2px 4px 2px 2px}
.erc-side{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:2px}

.erc-fixed{display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:6px;background:var(--panel-2);border:1px dashed var(--line-strong)}
.erc-fixed-lab{font:600 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.erc-fixed-text{font:600 14px/1.3 var(--font-body);color:var(--ink)}
.erc-dirword{white-space:nowrap}
.erc-dirword.up{color:var(--ok)}
.erc-dirword.down{color:var(--bad)}
.erc-link{align-self:center;line-height:1;font-size:13px;color:var(--muted);padding:1px 0}

.erc-slot{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding:5px 6px;border-radius:7px;border:1.5px dashed var(--line-strong);background:var(--panel)}
.erc-slot.filled{border-style:solid}
.erc-slot.target:not(.filled){border-color:var(--accent)}
.erc-slot.over{border-color:var(--accent);background:var(--accent-tint)}
.erc-slot.m-ok,.erc-slot.locked{border-color:var(--ok);background:var(--ok-tint)}
.erc-slot.m-dir,.erc-slot.m-wrong{border-color:var(--bad);background:var(--bad-tint)}
.erc-slot.m-order{border-color:var(--warn);background:var(--warn-tint)}
.erc-num{font:700 12px/1 var(--font-mono);color:var(--muted);text-align:center}
.erc-drop{display:flex;align-items:center;gap:4px;min-width:0}
.erc-empty{flex:1;min-height:34px;border:0;background:transparent;color:var(--muted);font:500 13px/1.2 var(--font-body);text-align:left;cursor:pointer;border-radius:4px;padding:0 4px}
.erc-empty:focus-visible{outline:2px solid var(--focus)}
.erc-x{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;font-size:16px;line-height:1}
.erc-x:hover{color:var(--bad);border-color:var(--bad)}
.erc-dir{display:flex;gap:4px}
.erc-d{font:600 12px/1 var(--font-display);padding:6px 8px;min-height:34px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.erc-d:disabled{opacity:.4;cursor:default}
.erc-d.up[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--on-viz)}
.erc-d.down[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:var(--on-viz)}
.erc-d:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.erc-slot.locked .erc-d:not([aria-pressed="true"]){display:none}
.erc-slot.locked .erc-d{opacity:1}
.erc-note{grid-column:2/-1;font-size:12.5px;line-height:1.35}
.erc-note .ok{color:var(--ok)}.erc-note .bad{color:var(--bad)}.erc-note .warn{color:var(--warn)}.erc-note .muted{color:var(--muted)}

.erc-card{display:block;width:100%;text-align:left;font:600 13.5px/1.25 var(--font-body);color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-left:4px solid var(--accent);border-radius:6px;padding:7px 10px;cursor:grab;min-height:36px;touch-action:manipulation;user-select:none}
.erc-card:hover{border-color:var(--accent)}
.erc-card:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.erc-card.selected{background:var(--accent-tint);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.erc-card.dragging{opacity:.35}
.erc-card.fixed{cursor:default;background:transparent;border:0;border-left:4px solid var(--ok);padding:5px 8px}
.erc-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;box-shadow:var(--shadow);opacity:.95}
body.erc-dragging,body.erc-dragging *{cursor:grabbing !important;user-select:none}

.erc-tray-wrap{display:flex;flex-direction:column;gap:6px}
.erc-hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.erc-tray{display:flex;flex-direction:column;gap:6px;border-radius:6px;padding:2px}
.erc-tray.target{outline:2px dashed var(--accent);outline-offset:3px;cursor:pointer}
.erc-tray.over{background:var(--accent-tint)}
.erc-tray-empty{margin:0;font-size:13px;color:var(--ink-soft)}

.erc-result{display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.erc-result h3{margin:4px 0 0;font:700 13px/1.2 var(--font-display);color:var(--accent-deep)}
.erc-score{margin:0;color:var(--ink)}
.erc-para{margin:0;padding:10px 12px;border-left:3px solid var(--ok);background:var(--panel-2);border-radius:0 6px 6px 0;color:var(--ink)}
.erc-para mark.erc-model{background:var(--accent-b-tint);color:inherit;padding:0 2px;border-radius:2px}
.erc-sub{margin:0;font-size:13px;color:var(--muted)}
.erc-tiers{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:t}
.erc-tiers li{padding:7px 10px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.erc-tiers li.on{border-color:var(--ok);background:var(--ok-tint);color:var(--ink)}
.erc-tiers li.on b::before{content:"✓ ";color:var(--ok)}
.erc-disclaim{margin:0;font-size:12px;color:var(--muted)}

.erc-actions{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.erc-actions #ercNext{margin-left:auto}

/* the model answer: no links to place */
.erc-model-mode .erc-slot{border-style:solid}

/* ---------- narrower laptops: the chain and the links share one scrolling column ---------- */
@media (max-width:1180px) and (min-width:901px){
  .erc-stage{grid-template-columns:230px minmax(0,1fr)}
  .erc-d span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .erc-d{padding:6px 9px}
}
@media (max-height:700px) and (min-width:901px){
  .erc-graph svg{max-height:150px}
  .erc-link{font-size:10px;line-height:.9}
  .erc-lead{font-size:14px}
  .erc-tab{min-height:30px;padding:5px 10px}
}

/* ---------- tablets and phones: everything stacks and the page scrolls ---------- */
@media (max-width:900px){
  .erc-stage{display:flex;flex-direction:column}
  .erc-left{padding:10px}
  .erc-triggers{flex-direction:row;overflow-x:auto;overflow-y:hidden;min-height:0;padding-bottom:6px;scroll-snap-type:x proximity}
  .erc-trig{flex:none;width:auto;max-width:230px;min-height:44px;scroll-snap-align:start}
  .erc-graph svg{max-height:none;max-width:420px;margin:0 auto}
  .erc-body{grid-template-columns:1fr}
  .erc-chain,.erc-side{overflow:visible}
  .erc-main{scroll-margin-top:70px}
  .erc-tab,.erc-d,.erc-trig,.erc-card,.erc-empty,.btn{min-height:44px}
  .erc-x{width:40px;height:40px}
}
@media (max-width:560px){
  .erc-main{padding:10px}
  .erc-slot{grid-template-columns:18px minmax(0,1fr);}
  .erc-dir{grid-column:2/-1}
  .erc-d{flex:1}
  .erc-actions .btn{flex:1 1 auto;justify-content:center}
}