/* Production Possibility Curve (economics/ppc.php). The page chrome is the one-screen layout in
   /css/resource.css. On a laptop or desktop: the graph, with the shift buttons under it, fills what's
   left of the window, and the combination's sliders and readout sit to its right (scrolling inside
   their panel if they must). On smaller screens they stack and the page scrolls. Theme tokens only. */

.ppc-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px}

/* ---------- the graph ---------- */
.ppc-graph{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 14px 12px}
.ppc-graph-head{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;flex:none}
.ppc-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-soft)}
.ppc-legend li{display:inline-flex;align-items:center;gap:6px}
.ppc-legend i{width:11px;height:11px;border-radius:50%;flex:none}
.ppc-k-ok{background:var(--ok)}.ppc-k-warn{background:var(--warn)}.ppc-k-bad{background:var(--bad)}
.ppc-svg-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:4px 0}
/* hidden from the start (the old curve, the A–Z points): the script clears hidden to show them */
#graph [hidden]{display:none}
#graph{display:block;width:100%;height:100%;max-height:100%;overflow:visible}

.axis{stroke:var(--ink-soft);stroke-width:2}
.grid-line{stroke:var(--line-strong);stroke-dasharray:4 4;stroke-width:1}
.curve-ppc{stroke:var(--accent-deep);stroke-width:3.5;fill:none}
.curve-ppc-ghost{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;opacity:.7;fill:none}
.label-text{font-size:16px;font-weight:700;fill:var(--ink);font-family:var(--font-mono)}
.axis-tick-text{font-size:15px;fill:var(--muted);font-family:var(--font-mono)}
.axis-title{font-size:18px;font-weight:700;fill:var(--ink);font-family:var(--font-body)}
.pt-efficient{fill:var(--ok);stroke:var(--panel);stroke-width:2}
.pt-inefficient{fill:var(--warn);stroke:var(--panel);stroke-width:2}
.pt-unobtainable{fill:var(--bad);stroke:var(--panel);stroke-width:2}
.pt-label-efficient{fill:var(--ok)}
.pt-label-inefficient{fill:var(--warn)}
.pt-label-unobtainable{fill:var(--bad)}
.user-point{stroke:var(--panel);stroke-width:2.5}

/* ---------- shifting the curve ---------- */
.ppc-shifts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}
.ppc-shifts-label{font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.ppc-shift-note{flex:none;margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);min-height:2.9em}

/* ---------- the combination ---------- */
.ppc-side{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding:12px 16px 14px}
.ppc-slider label{display:flex;justify-content:space-between;gap:10px;font:600 14px/1.3 var(--font-display);color:var(--ink);margin-bottom:4px}
.ppc-slider .num{color:var(--accent-deep);font-size:15px}
.ppc-slider input[type="range"]{width:100%;margin:0;cursor:pointer;accent-color:var(--accent)}
.ppc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ppc-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.ppc-check input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}

.ppc-result{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.ppc-status{font:600 15px/1.3 var(--font-display);color:var(--ink)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font:700 13.5px/1.3 var(--font-display);margin-left:4px}
.badge-ok{background:var(--ok-tint);color:var(--ok)}
.badge-warn{background:var(--warn-tint);color:var(--warn)}
.badge-bad{background:var(--bad-tint);color:var(--bad)}
.ppc-readout{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:0}
.ppc-readout div{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:6px 9px}
.ppc-readout dt{font-size:11.5px;color:var(--muted);line-height:1.3}
.ppc-readout dd{margin:2px 0 0;font-size:17px;font-weight:700;color:var(--ink)}
.ppc-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft)}

/* ---------- a short laptop window: tighter, so it all still fits ---------- */
@media (min-width:901px) and (max-height:720px){
  .ppc-side{gap:10px}
  .ppc-shift-note{font-size:12.5px}
}

/* ---------- smaller screens: stacked, and the page scrolls ---------- */
@media (max-width:900px),(max-height:559px){
  .ppc-work{grid-template-columns:1fr;flex:none}
  .ppc-svg-box{flex:none}
  #graph{height:auto;max-height:none}
  .ppc-side{overflow:visible}
}
@media (max-width:900px){
  /* tap targets of at least 40px */
  .rp-titlebar .btn,.ppc-shifts .btn,.ppc-tools .btn,.seg-toggle button,.rp-nav .btn,.rp-nav .account-link{min-height:40px}
  .rp-nav .account-link{display:inline-flex;align-items:center}
  .ppc-slider input[type="range"]{height:40px}
  .ppc-check{min-height:40px}
  .ppc-check input{width:22px;height:22px}
}
@media (max-width:640px){
  /* the graph is drawn smaller on a phone, so its text is drawn bigger */
  .axis-tick-text{font-size:20px}
  .axis-title{font-size:23px}
  .label-text{font-size:21px}
  .ppc-graph{padding:10px 8px 12px}
  .ppc-shifts .btn{flex:1 1 calc(50% - 8px);justify-content:center;white-space:normal;text-align:center}
  .ppc-shifts-label{flex:1 1 100%}
  .seg-toggle{display:flex;width:100%}
  .seg-toggle button{flex:1;justify-content:center;white-space:normal;text-align:center;line-height:1.15}
}