/* Elasticity Lab (microeconomics/assets/tools/elasticity-lab.js). OWNED BY THIS TOOL ONLY
   (builder T3). The demand curve is ApMicroGraph's (mic.css, "Graphs"); this
   file colors the elastic and inelastic halves, point A and its total revenue
   (the rectangle on the demand graph and the point on the total revenue curve
   share a color), lays the two graphs side by side (one at a time on a narrow
   stage) and styles the drill's figure. */
.el-fig,.el-qfig{--el-el:#2563B8;--el-in:#B4531A;--el-a:var(--cink);--el-b:#5B6472;--el-tr:#1F7A45;}
:root[data-theme="dark"] .el-fig,:root[data-theme="dark"] .el-qfig{--el-el:#7FB2F5;--el-in:#F5A36B;--el-b:#A9B2C0;--el-tr:#6FD39A;}
.el-fig{margin:0;display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;position:relative;}
.mic-ls-stage>.el-fig{flex:1 1 auto;min-height:0;justify-content:center;justify-content:safe center;}
.el-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 18px;align-items:center;max-width:980px;width:100%;margin:0 auto;}
.el-fig[data-view="income"] .el-panels,.el-fig[data-view="cross"] .el-panels{grid-template-columns:minmax(0,1fr);max-width:520px;}
.el-fig[data-view="income"] .el-p-tr,.el-fig[data-view="cross"] .el-p-tr,.el-fig[data-view="income"] .el-tabs,.el-fig[data-view="cross"] .el-tabs{display:none !important;}
.el-p{min-width:0;display:flex;justify-content:center;}
.el-d,.el-trp{width:100%;max-width:480px;}
.el-d{touch-action:none;}
.el-d svg,.el-trp svg{display:block;width:100%;height:auto;}
.el-tabs{display:none;gap:6px;}
.el-fig.is-narrow .el-tabs{display:flex;}
.el-fig.is-narrow .el-panels{grid-template-columns:minmax(0,1fr);}
.el-fig.is-narrow[data-panel="d"] .el-p-tr,.el-fig.is-narrow[data-panel="tr"] .el-p-d{display:none;}
.el-tab{min-height:44px;}
.el-tab.on,.el-view.on,.el-kind.on{background:var(--cink);border-color:var(--cink);color:var(--white,#fff);}
:root[data-theme="dark"] .el-tab.on,:root[data-theme="dark"] .el-view.on,:root[data-theme="dark"] .el-kind.on{color:#2a0b22;}

/* on the demand graph */
.el-half{fill:none;stroke-width:9;stroke-linecap:round;opacity:.28;pointer-events:none;}
.el-elastic{stroke:var(--el-el);}
.el-inelastic{stroke:var(--el-in);}
.el-rlab{font:800 12px var(--font-ui);}
.el-rsub{font:700 10.5px var(--font-ui);fill:var(--muted);}
.el-elastic-t{fill:var(--el-el);}
.el-inelastic-t{fill:var(--el-in);}
.el-mid{fill:var(--white);stroke:var(--ink);stroke-width:2;}
.el-mid-t{fill:var(--ink);font-size:11.5px;}
.el-tr{fill:color-mix(in srgb,var(--el-tr) 20%,transparent);stroke:none;}
.el-tr2{fill:none;stroke:var(--el-b);stroke-width:1.4;stroke-dasharray:4 4;}
.el-pt{fill:var(--el-a);stroke:var(--white);stroke-width:2;cursor:grab;}
.el-pt.is-b{fill:var(--el-b);cursor:default;}
.mic-gr-guide.el-g1{stroke:var(--el-a);}
.mic-gr-guide.el-g2{stroke:var(--el-b);}
.mic-gr-mark.el-m1{fill:var(--el-a);}
.mic-gr-mark.el-m2,.mic-gr-mark.el-m0{fill:var(--el-b);}
.el-plab{font-size:13px;}

/* the price view: demand over total revenue on one quantity axis (drawn by elasticity-lab.js) */
.el-fig[data-view="price"] .el-panels{grid-template-columns:minmax(0,1fr);max-width:900px;}
.el-fig[data-view="price"] .el-p-tr,.el-fig[data-view="price"] .el-tabs{display:none !important;}
.el-fig[data-view="price"] .el-d{max-width:none;}
.el-stack{display:block;width:100%;height:auto;max-height:calc(100svh - 250px);margin:0 auto;font-family:var(--font-ui);overflow:visible;}
.el-band-el{fill:color-mix(in srgb,var(--el-el) 7%,transparent);}
.el-band-in{fill:color-mix(in srgb,var(--el-in) 7%,transparent);}
.el-grid{stroke:var(--line);stroke-width:1;fill:none;}
.el-axis{fill:none;stroke:var(--ink);stroke-width:1.8;}
.el-unit{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 4;opacity:.45;fill:none;}
.el-dline{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;}
.el-stack .el-half{stroke-width:12;opacity:.32;}
.el-stack .el-trc{fill:none;stroke:var(--el-tr);stroke-width:3;}
.el-guide{fill:none;stroke-width:1.3;stroke-dasharray:4 3;}
.el-drop{fill:none;stroke-width:1.3;stroke-dasharray:2 4;}
.el-guide.el-g1,.el-drop.el-g1{stroke:var(--el-a);}
.el-guide.el-g2,.el-drop.el-g2{stroke:var(--el-b);}
.el-tick{fill:var(--muted);font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;}
.el-tick.is-a{fill:var(--el-a);font-weight:900;}
.el-tick.is-b{fill:var(--el-b);font-weight:900;}
.el-axt{fill:var(--ink);font-weight:800;font-size:13px;}
.el-cname{fill:var(--ink);font-weight:900;font-size:15px;}
.el-cname.el-trn{fill:var(--el-tr);}
.el-hint{font-weight:800;font-size:12.5px;opacity:.9;}
.el-stack .el-rlab{font-size:14.5px;}
.el-stack .el-rsub{font-size:12px;}
.el-stack .el-mid-t{font-size:12.5px;}
.el-stack .el-plab{font-weight:900;font-size:16px;}
.el-plab.el-m1{fill:var(--el-a);} .el-plab.el-m2{fill:var(--el-b);}
.ls-root.ls-phone .el-fig[data-view="price"] .el-d svg{width:100%;height:auto;max-height:100%;}

/* the total revenue curve (ApMicroPlot) */
.el-trp .el-trc{stroke:var(--el-tr);stroke-width:2.6;fill:none;}
.el-trp .el-tra{fill:var(--el-a);}
.el-trp .el-trb{fill:var(--el-b);}

/* readouts under the graphs */
.el-read{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;}
.el-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px;border-radius:999px;background:var(--ctint);color:var(--ink);font:700 13px var(--font-ui);}
.el-chip b{font-variant-numeric:tabular-nums;}
.el-c-tr{background:color-mix(in srgb,var(--el-tr) 16%,transparent);}

/* the dock */
.el-ctl{display:grid;gap:10px;min-width:0;}
.el-views,.el-kinds{display:flex;flex-wrap:wrap;gap:6px;}
.el-view,.el-kind{min-height:44px;}
.el-ntbl tr.is-a th,.el-ntbl tr.is-a td{background:var(--ctint);}
.el-ntbl tr.is-b th,.el-ntbl tr.is-b td{background:color-mix(in srgb,var(--el-b,#5B6472) 12%,transparent);}

/* a phone: the graph scales into the stage, the readouts stay one line */
.ls-root.ls-phone .mic-ls-stage>.el-fig{height:100%;justify-content:flex-start;padding-bottom:44px;box-sizing:border-box;}
.ls-root.ls-phone .el-fig.is-narrow .el-tabs{min-height:44px;}
.ls-root.ls-phone .el-panels{flex:1 1 auto;min-height:0;}
.ls-root.ls-phone .el-p{height:100%;min-height:0;}
.ls-root.ls-phone .el-d,.ls-root.ls-phone .el-trp{height:100%;display:flex;justify-content:center;}
.ls-root.ls-phone .el-d svg,.ls-root.ls-phone .el-trp svg{width:auto;height:100%;max-width:100%;}
.ls-root.ls-phone .el-chip{font-size:12px;padding:2px 10px;}

/* Test yourself */
.el-qfig{margin:0;}
.el-qtbl,.el-qfig>.table-wrap{max-width:480px;width:100%;margin:auto;align-self:center;}
.el-tbl tr.is-pick th,.el-tbl tr.is-pick td{background:var(--ctint);}
.ls-root.ls-phone .el-qfig .mic-gr-controls{padding-right:48px;box-sizing:border-box;}