/* Cost Curve Lab (microeconomics/assets/tools/cost-lab.js). OWNED BY THIS TOOL
   ONLY (builder T2). The curves are ApMicroGraph's (mic.css, "Graphs"); this
   file links each curve's color to its table column (MC in the course ink,
   ATC blue, AVC green, AFC brown), lays the graph beside the table on a wide
   stage (one row card under the graph on a phone) and styles the table's
   points, the reached part of each curve and the drill's figure. */
.cl-fig,.cl-qfig,.ls-root{--cl-MC:var(--cink);--cl-ATC:#0B5F9E;--cl-AVC:#2B6A1E;--cl-AFC:#7A5A12;}
:root[data-theme="dark"] .cl-fig,:root[data-theme="dark"] .cl-qfig,:root[data-theme="dark"] .ls-root{--cl-ATC:#86C5F2;--cl-AVC:#A6DB8E;--cl-AFC:#E2C27A;}
.cl-fig{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:center;width:100%;max-width:1180px;margin:0 auto;}
.cl-fig.is-narrow{grid-template-columns:minmax(0,1fr);gap:4px;align-items:start;}
.mic-ls-stage>.cl-fig{flex:1 1 auto;min-height:0;}
.cl-gwrap{min-width:0;display:flex;flex-direction:column;align-items:center;}
.cl-svg{width:100%;max-width:640px;}
.cl-svg svg{display:block;width:100%;height:auto;max-height:calc(100svh - 230px);margin:0 auto;}
.cl-fig.is-narrow .cl-svg{max-width:460px;}
/* A phone: the graph takes what the stage has left after the row card. */
.mic-ls-stage>.cl-fig.is-narrow{display:flex;flex-direction:column;}
.mic-ls-stage>.cl-fig.is-narrow .cl-svg svg{max-height:max(190px,calc(62svh - 230px));}
.cl-fig.is-narrow .cl-side{width:100%;}
.cl-fig.is-narrow .cl-cards{padding-right:48px;}
.cl-c-MC{color:var(--cl-MC);} .cl-c-ATC{color:var(--cl-ATC);} .cl-c-AVC{color:var(--cl-AVC);} .cl-c-AFC{color:var(--cl-AFC);}

/* the graph (drawn by cost-lab.js on a dollar scale): color by curve; the part
   the table has reached is solid, the rest faint */
.cl-graph{font-family:var(--font-ui);overflow:visible;}
.cl-grid{stroke:var(--line);stroke-width:1;fill:none;}
.cl-axis{fill:none;stroke:var(--ink);stroke-width:1.8;}
.cl-tick{fill:var(--muted);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;}
.cl-axt{fill:var(--ink);font-weight:800;font-size:12.5px;}
.cl-faint{fill:none;stroke-width:2;stroke-opacity:.45;stroke-dasharray:5 4;}
.cl-reach{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;}
.cl-old{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-dasharray:2 5;opacity:.8;}
.cl-shift{fill:none;stroke-width:2;}
.cl-arrowhead{fill:var(--muted);}
.cl-s-MC{stroke:var(--cl-MC);} .cl-s-ATC{stroke:var(--cl-ATC);} .cl-s-AVC{stroke:var(--cl-AVC);} .cl-s-AFC{stroke:var(--cl-AFC);}
.cl-svg .cl-t-MC{fill:var(--cl-MC);} .cl-svg .cl-t-ATC{fill:var(--cl-ATC);} .cl-svg .cl-t-AVC{fill:var(--cl-AVC);} .cl-svg .cl-t-AFC{fill:var(--cl-AFC);}
.cl-cname{font-weight:900;font-size:14px;}
.cl-front{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 4;opacity:.6;}
.cl-dot{stroke:var(--white,#fff);stroke-width:1.6;}
.cl-dot.is-sel{stroke-width:2.2;}
.cl-f-MC{fill:var(--cl-MC);} .cl-f-ATC{fill:var(--cl-ATC);} .cl-f-AVC{fill:var(--cl-AVC);} .cl-f-AFC{fill:var(--cl-AFC);}
.cl-min{fill:none;stroke-width:2.2;stroke-dasharray:3 2;}
.cl-minguide{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3;fill:none;}
.cl-amark{font-weight:900;font-size:12.5px;}
.cl-sub{font-size:9.5px;}
.cl-selq{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 3;opacity:.55;}
.cl-qtag rect{fill:var(--ink);}
.cl-qtag text{fill:var(--white,#fff);font-weight:800;font-size:12px;}

/* the table */
.cl-side{min-width:0;max-width:420px;}
.cl-fig.is-narrow .cl-side{max-width:none;}
.cl-tablewrap{overflow-x:auto;}
.cl-fig.is-narrow .cl-tablewrap{display:none;}
.cl-card{display:none;}
.cl-fig.is-narrow .cl-card{display:block;}
.cl-table{border-collapse:collapse;width:100%;font:700 12.5px/1.3 var(--font-ui);font-variant-numeric:tabular-nums;}
.cl-table caption{text-align:left;font:800 12.5px var(--font-ui);color:var(--muted);padding:0 0 6px;}
.cl-table th,.cl-table td{padding:6px 3px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;}
.cl-table thead th{font-weight:900;border-bottom:2px solid var(--line);}
.cl-table abbr{text-decoration:none;}
.cl-table tbody th{text-align:center;}
.cl-table tr.is-in{cursor:pointer;}
.cl-table tr.is-in:hover{background:color-mix(in srgb,var(--cink) 6%,transparent);}
.cl-table tr.is-sel{background:var(--ctint);}
.cl-table tr.is-sel th{box-shadow:inset 3px 0 0 var(--cink);}
.cl-table tr:focus-visible{outline:3px solid var(--cink);outline-offset:-3px;}
.cl-table tr.is-out td,.cl-table tr.is-out th{color:transparent;}
.cl-table tr.is-new{animation:cl-in .5s ease-out;}
@keyframes cl-in{from{background:color-mix(in srgb,var(--cink) 22%,transparent);}}
@media (prefers-reduced-motion:reduce){.cl-table tr.is-new{animation:none;}}
.cl-na{color:var(--muted);}
.cl-dettable .cl-table tr{cursor:default;}
/* one row at a time under the graph (a phone) */
.cl-card-head{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.cl-card-t{margin:0;font:700 14px var(--font-ui);text-align:center;flex:1 1 auto;}
.cl-card-head .bt-btn{min-width:44px;min-height:40px;font-size:20px;line-height:1;padding:0;}
.cl-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:4px;}
.cl-cc{display:flex;flex-direction:column;align-items:center;padding:2px 2px;border-radius:10px;background:var(--white);border:1px solid var(--line);min-width:0;}
.cl-cc-k{font:900 11px var(--font-ui);}
.cl-cc-v{font:800 13.5px var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums;}
.cl-cc:not([class*="cl-c-"]) .cl-cc-k{color:var(--muted);}

/* the dock */
.cl-hire-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.cl-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 18px;margin-top:6px;}

/* Test yourself: the problem's table, and the graph when a step asks for it */
.cl-qfig{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;align-items:flex-start;margin:0;width:100%;}
.cl-qgraph{flex:1 1 380px;max-width:560px;min-width:0;}
.cl-qtw{flex:0 1 auto;max-width:100%;overflow-x:auto;}
.cl-qtable{border-collapse:collapse;font:700 13.5px/1.3 var(--font-ui);font-variant-numeric:tabular-nums;}
.cl-qtable caption{text-align:left;font:800 12.5px var(--font-ui);color:var(--muted);padding:0 0 6px;}
.cl-qtable th,.cl-qtable td{padding:5px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;}
.cl-qtable thead th{border-bottom:2px solid var(--line);font-weight:900;}
.cl-qtable tbody th{text-align:center;}
.cl-qtable tr.is-ask{background:var(--ctint);}
.cl-qfig .cl-qtw{width:auto;flex:0 1 auto;margin:0 auto;align-self:center;}
.cl-qfig{align-items:center;align-content:center;min-height:100%;}
.ls-root:not(.ls-phone) .cl-qtable{font-size:15px;}
.ls-root:not(.ls-phone) .cl-qtable th,.ls-root:not(.ls-phone) .cl-qtable td{padding:7px 14px;}
/* On a phone the graph and the table stack (see firm-market.css; tools review 2026-11-10). */
@media (max-width:640px){.cl-qfig{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;}.cl-qgraph{flex:0 0 auto;width:100%;max-width:100%;}.cl-qfig .cl-qtw{align-self:center;}}
.cl-hire-row[hidden],.cl-sliders[hidden]{display:none;}