/* Terms of Trade Lab (economics/terms-of-trade.php). The page chrome is the one-screen layout in
   /css/resource.css. Three views, one at a time: Calculate and Over time have their working on the left,
   filling the height, and their controls on the right (scrolling inside the panel if they must);
   Practice is js/challenges.js. On smaller screens they stack and the page scrolls. Theme tokens only,
   plus the page's own tokens below. */

:root{
  --tt-x:var(--viz-3);     /* export prices */
  --tt-m:var(--viz-4);     /* import prices */
  --tt-tot:var(--viz-7);   /* the terms of trade */
}

.rp-main{gap:10px}
.objective .tt-centre{text-align:center}
.tt-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:12px}
.tt-work[hidden],.tt-practice[hidden]{display:none}
.panel h3{margin:0 0 6px;font:700 14px/1.2 var(--font-display);color:var(--ink)}
.panel h3 .small{font-weight:400;font-family:var(--font-body)}

/* ---------- Calculate ---------- */
.tt-stage{display:flex;flex-direction:column;gap:12px;padding:14px 18px;min-width:0;min-height:0;overflow:auto}
.tt-formula{font:700 clamp(16px,1.6vw,21px)/1.3 var(--font-display) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--ink) !important;text-align:center}
.tt-formula .x{color:var(--tt-x)}
.tt-formula .m{color:var(--tt-m)}
.tt-qs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}
.tt-q{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tt-q.now{border-color:var(--tt-tot)}
.tt-q .lab{font:600 11.5px/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tt-big{font:700 clamp(22px,2.4vw,32px)/1.1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.tt-q.now .tt-big{color:var(--tt-tot)}
.tt-wk{font:500 12.5px/1.35 var(--font-mono);color:var(--ink-soft)}
.tt-wk b{color:var(--ink)}
.tt-arrow{align-self:center;font:700 22px/1 var(--font-mono);color:var(--muted)}
.tt-q.verdict .badge{align-self:flex-start;font-size:15px;padding:4px 12px;margin:3px 0}
.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);border:1px solid var(--line)}

.tt-meaning p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.tt-meaning p b{color:var(--ink)}
.tt-meaning .tt-cap{margin:2px 0 0;font-size:12px}
.tt-bars{display:flex;flex-direction:column;gap:5px}
.tt-bar-row{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;gap:10px;align-items:center}
.tt-bar-row .lab{font:600 12.5px/1.2 var(--font-display);color:var(--ink)}
.tt-bar-row .num{font:700 14px/1 var(--font-mono);color:var(--ink);text-align:right}
.tt-bar{height:18px;border-radius:4px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.tt-bar i{display:block;height:100%;background:var(--muted);transition:width .35s cubic-bezier(.3,.7,.2,1)}
.tt-bar-row.now .tt-bar i{background:var(--tt-tot)}

.tt-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:step}
.tt-step{position:relative;background:var(--panel-2);border:1px solid var(--line);border-top:3px solid var(--line-strong);border-radius:5px;padding:7px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tt-step.up{border-top-color:var(--ok)}
.tt-step.down{border-top-color:var(--bad)}
.tt-step + .tt-step::before{content:"→";position:absolute;left:-9px;top:50%;transform:translate(-50%,-50%);font:700 14px/1 var(--font-mono);color:var(--muted)}
.tt-step .lab{font:600 13px/1.25 var(--font-display);color:var(--ink)}
.tt-step .lab small{display:block;font:500 11px/1.3 var(--font-body);color:var(--muted)}
.tt-step .val{font:600 13px/1.3 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.tt-chain-why{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.tt-chain-why b{color:var(--ink)}

/* ---------- the side panels ---------- */
.tt-side{padding:12px 14px;min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px}
.tt-sec{display:flex;flex-direction:column;gap:6px}
.tt-presets{display:flex;flex-wrap:wrap;gap:6px}
.tt-presets .btn{min-height:32px}
.tt-story{margin:0;line-height:1.4}
.tt-grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.tt-ctl{display:flex;flex-direction:column;gap:2px}
.tt-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 13.5px/1.3 var(--font-display);color:var(--ink)}
.tt-ctl output{font:600 14px/1 var(--font-mono);color:var(--accent-deep)}
.tt-ctl input[type=range]{width:100%;height:28px;margin:0;cursor:pointer;accent-color:var(--accent)}
.tt-note{margin:0}
.tt-btns{display:flex;gap:8px;flex-wrap:wrap}
table.tt-table{font-size:13px}
table.tt-table th,table.tt-table td{padding:4px 6px;text-align:right}
table.tt-table th:first-child,table.tt-table td:first-child{text-align:left}

/* ---------- Over time ---------- */
.tt-time{gap:6px}
.tt-head{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;flex:none}
.tt-head h2{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)}
.tt-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-soft)}
.tt-legend li{display:inline-flex;align-items:center;gap:6px}
.tt-legend i{width:18px;height:0;border-top:3px solid;flex:none}
.lg-tot i{border-color:var(--tt-tot);border-top-width:4px}.lg-x i{border-color:var(--tt-x)}.lg-m i{border-color:var(--tt-m)}
.tt-svg-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.tt-svg-box svg{display:block;width:100%;height:100%;overflow:visible;--k:1}
#ttChart .tt-grid{stroke:var(--line);stroke-width:1}
#ttChart .tt-base{stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:6 4}
#ttChart .tt-axis{stroke:var(--ink-soft);stroke-width:2}
#ttChart .tt-tick{font:500 calc(12px * var(--k)) var(--font-mono);fill:var(--muted)}
#ttChart path{fill:none;stroke-linejoin:round}
#ttChart .tt-ln-tot{stroke:var(--tt-tot);stroke-width:4}
#ttChart .tt-ln-x{stroke:var(--tt-x);stroke-width:2.2;stroke-dasharray:6 4}
#ttChart .tt-ln-m{stroke:var(--tt-m);stroke-width:2.2;stroke-dasharray:2 4}
#ttChart .tt-ln-tot-dot{fill:var(--tt-tot);stroke:var(--panel);stroke-width:2}
#ttChart .tt-ln-x-dot{fill:var(--tt-x)}
#ttChart .tt-ln-m-dot{fill:var(--tt-m)}
#ttChart .tt-end-lbl{font:700 calc(13px * var(--k)) var(--font-mono);fill:var(--tt-tot);paint-order:stroke;stroke:var(--panel);stroke-width:4px}
.tt-time-note{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);flex:none}

/* ---------- Practice ---------- */
.tt-practice{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.tt-review-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:none}
.tt-quiz{flex:1;min-height:0}
.tt-rev{border-bottom:1px solid var(--line);padding:8px 0}
.tt-rev-q{margin:0 0 6px;font-weight:600;color:var(--ink)}
.tt-rev ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.tt-rev li{padding:6px 10px;border-radius:0 5px 5px 0;border-left:3px solid;font-size:14px;color:var(--ink-soft)}
.tt-rev li b{color:var(--ink)}
.tt-rev li.bad{border-color:var(--bad);background:var(--bad-tint)}
.tt-rev li.ok{border-color:var(--ok);background:var(--ok-tint)}

/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:1100px){
  .tt-chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-step:nth-child(3)::before{display:none}
}
@media (max-width:900px),(max-height:559px){
  .tt-work{grid-template-columns:1fr}
  .tt-stage,.tt-side{overflow:visible}
  .tt-svg-box{flex:none;aspect-ratio:640/400}
  .tt-quiz{min-height:520px}
}
@media (max-width:900px){
  .tt-presets .btn,.tt-btns .btn,.tt-review-bar .btn{min-height:40px}
  .tt-ctl input[type=range]{height:40px}
  .tt-views button{min-height:40px}
}
@media (max-width:640px){
  .tt-qs{grid-template-columns:1fr 1fr}
  .tt-arrow{display:none}
  .tt-q.verdict{grid-column:span 2}
  .tt-chain{grid-template-columns:1fr}
  .tt-step + .tt-step::before{display:none}
  .tt-stage{padding:12px}
  .tt-bar-row{grid-template-columns:84px minmax(0,1fr) 54px}
}
@media (max-width:1100px) and (min-width:641px){
  .tt-qs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .tt-q.verdict{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px}
}