/* Costs of Production (economics/costs-of-production.php). The layout and the graph's basics come
   from market-graph.css (the stage, the panels, axes, grid, labels and badges); this adds the cost
   curves, the profit and loss shading and the economies-of-scale list. Theme tokens only, plus these
   page tokens for the curves, deeper in light mode. */

:root{
  --cp-tfc:#b45309; --cp-tvc:#2563eb; --cp-tc:#dc2626; --cp-tr:#059669; --cp-afc:#b45309; --cp-avc:#2563eb;
  --cp-atc:#dc2626; --cp-mc:#9333ea; --cp-lrac:#0e7490;
  --cp-profit:rgba(16,185,129,.26); --cp-loss:rgba(239,68,68,.26);
  --cp-econ:rgba(16,185,129,.10); --cp-dis:rgba(239,68,68,.09);
  --cp-econ-on:rgba(16,185,129,.24); --cp-dis-on:rgba(239,68,68,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cp-tfc:#fbbf24; --cp-tvc:#60a5fa; --cp-tc:#f87171; --cp-tr:#34d399; --cp-afc:#fbbf24; --cp-avc:#60a5fa;
    --cp-atc:#f87171; --cp-mc:#c084fc; --cp-lrac:#22d3ee;
    --cp-profit:rgba(52,211,153,.24); --cp-loss:rgba(248,113,113,.26);
    --cp-econ:rgba(52,211,153,.10); --cp-dis:rgba(248,113,113,.10);
    --cp-econ-on:rgba(52,211,153,.24); --cp-dis-on:rgba(248,113,113,.24);
  }
}
:root[data-theme="dark"]{
  --cp-tfc:#fbbf24; --cp-tvc:#60a5fa; --cp-tc:#f87171; --cp-tr:#34d399; --cp-afc:#fbbf24; --cp-avc:#60a5fa;
  --cp-atc:#f87171; --cp-mc:#c084fc; --cp-lrac:#22d3ee;
  --cp-profit:rgba(52,211,153,.24); --cp-loss:rgba(248,113,113,.26);
  --cp-econ:rgba(52,211,153,.10); --cp-dis:rgba(248,113,113,.10);
  --cp-econ-on:rgba(52,211,153,.24); --cp-dis-on:rgba(248,113,113,.24);
}

/* the curves */
.cp-c{fill:none;stroke-width:3;stroke-linejoin:round}
.cp-tfc{stroke:var(--cp-tfc)}.cp-tvc{stroke:var(--cp-tvc)}.cp-tc{stroke:var(--cp-tc)}.cp-tr{stroke:var(--cp-tr)}
.cp-afc{stroke:var(--cp-afc)}.cp-avc{stroke:var(--cp-avc)}.cp-atc{stroke:var(--cp-atc)}
.cp-ar{stroke:var(--cp-tr);stroke-width:2.5}
.cp-mc{stroke:var(--cp-mc);stroke-width:2.5;stroke-dasharray:9 4}
.cp-lrac{stroke:var(--cp-lrac);stroke-width:3.5}
.cp-t-tfc,.cp-t-afc{fill:var(--cp-tfc)}.cp-t-tvc,.cp-t-avc{fill:var(--cp-tvc)}.cp-t-tc,.cp-t-atc{fill:var(--cp-tc)}
.cp-t-tr{fill:var(--cp-tr)}.cp-t-mc{fill:var(--cp-mc)}.cp-t-lrac{fill:var(--cp-lrac)}
.cp-t-profit,.cp-t-ok{fill:var(--ok)}.cp-t-loss,.cp-t-bad{fill:var(--bad)}
.cp-t-tfc,.cp-t-tvc,.cp-t-tc,.cp-t-tr,.cp-t-afc,.cp-t-avc,.cp-t-atc,.cp-t-mc,.cp-t-lrac{font-weight:700}
.cp-profit{fill:var(--cp-profit)}
.cp-loss{fill:var(--cp-loss)}
.cp-grid{opacity:.55}
.cp-qline{stroke:var(--ink-soft)}
.cp-bracket{fill:none;stroke-width:2}
.cp-bracket.cp-t-tfc,.cp-bracket.cp-t-afc{stroke:var(--cp-tfc)}
.cp-bracket.cp-t-profit{stroke:var(--ok)}
.cp-bracket.cp-t-loss{stroke:var(--bad)}
.cp-blabel{font-weight:700}
.cp-small{font-size:12px}
.cp-be{font-weight:700;fill:var(--ink-soft)}
.cp-dot-tc,.cp-dot-atc{fill:var(--cp-tc);stroke:var(--panel);stroke-width:2}
.cp-dot-tvc,.cp-dot-avc{fill:var(--cp-tvc);stroke:var(--panel);stroke-width:2}
.cp-dot-tr{fill:var(--cp-tr);stroke:var(--panel);stroke-width:2}
.cp-min{stroke:var(--ink);stroke-width:1.5}
.cp-firm{fill:var(--accent)}
.cp-firm-label{font-weight:700;fill:var(--accent-deep)}
.cp-mes{cursor:pointer}

/* economies of scale: the regions either side of the MES */
.cp-region{cursor:pointer;transition:fill .2s}
.cp-region-econ{fill:var(--cp-econ)}.cp-region-econ:hover,.cp-region-econ.on{fill:var(--cp-econ-on)}
.cp-region-dis{fill:var(--cp-dis)}.cp-region-dis:hover,.cp-region-dis.on{fill:var(--cp-dis-on)}
.cp-region-label{font-weight:700;pointer-events:none}

/* the legend's swatches */
.mg-legend i.cp-k-profit{background:var(--cp-profit);border:1px solid var(--ok)}
.mg-legend i.cp-k-loss{background:var(--cp-loss);border:1px solid var(--bad)}
.mg-legend i.cp-k-econ{background:var(--cp-econ-on);border:1px solid var(--ok)}
.mg-legend i.cp-k-dis{background:var(--cp-dis-on);border:1px solid var(--bad)}
.mg-legend i.cp-k-ghost{height:0;border-top:2px dashed var(--muted);border-radius:0}

/* the lists of economies and diseconomies */
.cp-list{display:flex;flex-wrap:wrap;gap:6px}
.cp-list-head{margin-top:6px !important}
.cp-item{font:600 12.5px/1.25 var(--font-body);color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:999px;padding:6px 11px;cursor:pointer;text-align:left}
.cp-item:hover{border-color:var(--accent)}
.cp-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cp-item-econ[aria-pressed="true"]{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.cp-item-dis[aria-pressed="true"]{background:var(--bad-tint);border-color:var(--bad);color:var(--bad)}
.cp-item-ext[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-deep)}

/* the readouts */
.mg-table tr.cp-hl td:first-child{color:var(--accent-deep)}
.cp-pos{color:var(--ok)}.cp-neg{color:var(--bad)}
.cp-summary{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.mg-graph .mg-note{min-height:2.9em}

/* a short fade when the view changes */
@keyframes cp-fade{from{opacity:.25}to{opacity:1}}
#graph.cp-fade #cp-curves,#graph.cp-fade #cp-shade{animation:cp-fade .35s ease-out}
@media (prefers-reduced-motion:reduce){#graph.cp-fade #cp-curves,#graph.cp-fade #cp-shade{animation:none}.cp-region{transition:none}}

/* a short laptop window: the note keeps one line less */
@media (min-width:901px) and (max-height:700px){
  .mg-graph .mg-note{min-height:0;font-size:12.5px}
  .mg-legend{font-size:12px}
}
@media (max-width:900px){
  .cp-item{min-height:40px}
}
@media (max-width:640px){
  .cp-small{font-size:16px}
  .cp-item{font-size:14px}
}
.mg-side > section.cp-first{border-top:0;padding-top:0}
/* on a phone the graph is drawn at about half size, so its text is drawn bigger still */
@media (max-width:640px){
  #graph .axis-tick-text{font-size:21px}
  #graph .label-text{font-size:21px}
  #graph .axis-title{font-size:22px}
  #graph .cp-small{font-size:18px}
  #graph .cp-region-label{font-size:18px}
}
/* on smaller screens the list is far below the graph, so an economy's explanation shows under the list too */
.cp-item-note{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);padding:8px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line)}
.cp-item-note:empty{display:none}
@media (min-width:901px){.cp-item-note{display:none}}

/* phones: the view toggle fills the width, and a long name wraps onto two lines */
@media (max-width:640px){
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px;min-width:0}
}