/* AFPM lab: cost investigation (default scenario), simulation controls, before/after and the
   "3D Graphics" switch. Loaded after afpm.css; reuses its tokens (--s1..--s3, --amber, --cyan, --muted). */

/* ---------- Clickable cost figures (the metric tiles in the cost scenario). */
.m-tiles--cost{grid-template-columns:repeat(5,minmax(0,1fr))}
.mt--btn{padding:0;position:relative}
.mt--btn dt{margin:0}
.mt-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 14px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.mt-b:hover .mt-v,.mt-b:focus-visible .mt-v{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mt-b:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:8px}
.mt-v{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:19px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.25}
.mt-v i{font-style:normal;font-size:13px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:none}
.mt--btn .mt-h{padding:0 14px 10px;margin:2px 0 0}
.mt--btn.mt--warn .mt-v{color:#ffc867}.mt--btn.mt--warn .mt-v i{background:rgba(242,169,59,.2)}
.mt--btn.mt--bad .mt-v{color:#ff9a7a}.mt--btn.mt--bad .mt-v i{background:rgba(238,122,92,.2)}
.mt--btn::after{content:'';position:absolute;right:10px;top:12px;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);opacity:.6}
.mt--btn.is-open{background:var(--s3);box-shadow:inset 0 -2px 0 var(--amber)}
.mt--btn.is-open::after{transform:rotate(45deg);border-color:var(--amber);opacity:1}
.lc-est-inline{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;border:1px solid rgba(242,169,59,.45);color:#ffc867;font-size:10.5px;line-height:16px;white-space:nowrap}

/* ---------- Inspector: breakdown, cost tree, agent cost, calls. */
.lc-est{border-color:rgba(242,169,59,.45)!important;color:#ffc867!important}
.lc-p{margin:8px 0;font-size:13px;line-height:1.45;color:var(--body,#b8c3d4)}
.lc-small{font-size:12px;color:var(--muted)}
.lc-copy{margin:12px 0 0;padding:8px 10px;border-left:2px solid var(--obs,#b48cff);font-size:12px;line-height:1.45;color:var(--muted);background:rgba(120,90,200,.07)}
.lc-tree{margin:12px 0 0;padding:10px;border-radius:12px;background:rgba(6,13,28,.6);box-shadow:inset 0 0 0 1px var(--hair,rgba(160,185,220,.1))}
.lc-tree ul{list-style:none;margin:0;padding:0}
.lc-tree ul ul{margin-left:14px;border-left:1px solid var(--hair,rgba(160,185,220,.14));padding-left:6px}
.lc-mission{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.lc-mission b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.lc-agent{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;align-items:center;gap:8px;width:100%;min-height:34px;padding:4px 6px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.lc-agent:hover,.lc-agent:focus-visible{background:rgba(30,80,140,.35);outline:none}
.lc-node.is-sel>.lc-agent{background:rgba(242,169,59,.14);box-shadow:inset 2px 0 0 var(--amber)}
.lc-name{min-width:0;overflow-wrap:anywhere}
.lc-tag{display:block;font-size:10.5px;color:#ffc867}
.lc-bar{position:relative;height:6px;border-radius:6px;background:rgba(160,185,220,.12);overflow:hidden}
.lc-bar i,.lc-bar b{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.lc-bar i{background:var(--cyan)}
.lc-bar b{background:repeating-linear-gradient(135deg,#f2a93b 0 3px,rgba(242,169,59,.35) 3px 6px)}
.lc-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.lc-num small{display:block;font-weight:400;font-size:10.5px;color:var(--muted)}
.lc-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 0;font-size:11px;color:var(--muted)}
.lc-key i{display:inline-block;width:12px;height:6px;border-radius:3px}
.lc-key i.u{background:var(--cyan)}.lc-key i.r{background:repeating-linear-gradient(135deg,#f2a93b 0 3px,rgba(242,169,59,.35) 3px 6px)}
.lc-req{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px}
.lc-req li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:4px 8px;border-radius:8px;background:rgba(6,13,28,.5);color:var(--muted)}
.lc-req li>span{width:16px;text-align:center}
.lc-req li.is-done{color:var(--ink)}.lc-req li.is-done>span{color:#8ff0c6}
.lc-req li.is-miss{color:#ff9a7a}
.lc-req small{margin-left:auto;font-size:11px;color:var(--muted)}
.lc-spark{margin:10px 0 0}
.lc-spark svg{display:block;width:100%;height:64px;border-radius:8px;background:rgba(6,13,28,.55)}
.lc-sp-s{fill:none;stroke:#f2a93b;stroke-width:2;vector-effect:non-scaling-stroke}
.lc-sp-p{fill:none;stroke:#58dcf8;stroke-width:2;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.lc-spark figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:11px;color:var(--muted)}
.lc-spark figcaption i{display:inline-block;width:14px;height:0;margin-right:4px;vertical-align:middle;border-top:2px solid #f2a93b}
.lc-spark figcaption i.p{border-top:2px dashed #58dcf8}
.lc-agentcost{margin-top:10px}
.lc-facts th{white-space:nowrap}
.lc-kids{list-style:none;margin:0 0 8px;padding:0}
.lc-kids .lc-agent{grid-template-columns:minmax(0,1fr) auto}
.lc-calls{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}
.lc-call{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:rgba(6,13,28,.5);color:var(--ink);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.lc-call:hover,.lc-call:focus-visible,.lc-calls li.is-sel .lc-call{background:rgba(30,80,140,.4);outline:none}
.lc-call code{font-size:11px;color:var(--muted)}
.lc-call-l{flex:1 1 140px;min-width:0}
.lc-call-r{font-variant-numeric:tabular-nums;color:var(--muted)}
.lc-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px;margin:8px 0 0}
.lc-dl div{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;background:rgba(6,13,28,.5);font-size:12px}
.lc-dl dt{color:var(--muted)}.lc-dl dd{margin:0}

/* ---------- Before / after section. */
.lab-cost{margin-top:16px;padding:20px 22px;border-radius:16px;background:linear-gradient(180deg,rgba(14,27,54,.82),rgba(8,16,34,.9));box-shadow:inset 0 0 0 1px var(--line2,rgba(88,160,230,.2));outline:none;scroll-margin-top:84px}
.lab-cost[hidden]{display:none}
.lc-head h3{margin:0 0 4px;font-size:20px;font-weight:600}
.lc-sub{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.lc-grid{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr);gap:20px;align-items:start}
.lc-ctls{margin:0;padding:12px;border:1px solid var(--hair,rgba(160,185,220,.14));border-radius:12px;display:grid;gap:8px;min-width:0}
.lc-ctls[disabled]{opacity:.55}
.lc-ctls legend{padding:0 6px;font-size:13px;font-weight:600}
.lc-not{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(242,169,59,.14);color:#ffc867;font-size:11px;font-weight:500}
.lc-ctl{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;background:rgba(6,13,28,.5);font-size:13px;cursor:pointer}
.lc-ctl input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:#f2a93b}
.lc-ctl small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}
.lc-ctl--radio{flex-direction:column;gap:6px;cursor:default}
.lc-ctl--radio label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.lc-run{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.lc-run button[disabled]{opacity:.5;cursor:not-allowed}
.lc-lock{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(160,185,220,.08);font-size:13px;color:var(--muted)}
.lc-tablewrap{max-width:100%;overflow-x:auto}
.lc-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.lc-table th,.lc-table td{padding:7px 8px;border-bottom:1px solid var(--line,rgba(160,185,220,.14));text-align:left;vertical-align:top}
.lc-table thead th{font-weight:500;color:var(--muted);font-size:12px}
.lc-table tbody th{font-weight:400;color:var(--muted)}
.lc-d{color:#ffc867;white-space:nowrap}
.lc-verdict{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(160,185,220,.08);font-size:13.5px}
.lc-verdict p{margin:0 0 4px}.lc-verdict small{color:var(--muted);font-size:12px}
.lc-vk{font-weight:600}
.lc-verdict.is-ok{box-shadow:inset 3px 0 0 #5fd6a4}.lc-verdict.is-ok .lc-vk{color:#8ff0c6}
.lc-verdict.is-bad{box-shadow:inset 3px 0 0 #ee7a5c;background:rgba(238,122,92,.08)}.lc-verdict.is-bad .lc-vk{color:#ff9a7a}
.lc-verdict.is-warn{box-shadow:inset 3px 0 0 #f2a93b;background:rgba(242,169,59,.08)}.lc-verdict.is-warn .lc-vk{color:#ffc867}
.lc-basis{margin-top:14px;padding:10px 12px;border-radius:12px;background:rgba(6,13,28,.5);font-size:13px}
.lc-basis summary{cursor:pointer;font-weight:600}
.lc-basis p{margin:8px 0;color:var(--body,#b8c3d4);line-height:1.5}
.lc-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px;margin:8px 0}
.lc-kinds div{padding:8px;border-radius:8px;background:rgba(160,185,220,.06)}
.lc-kinds dt{font-weight:600;font-size:12.5px}.lc-kinds dd{margin:4px 0 0;font-size:12px;color:var(--muted)}
.btn-next--ghost{background:none!important;box-shadow:inset 0 0 0 1px var(--line2,rgba(88,160,230,.3))!important;color:var(--ink)!important;margin-top:6px}

/* ---------- "3D Graphics" switch and the poster fallback. */
.tb--gfx .sw-state{min-width:2.4em}
.lab-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}

@media (max-width:1365px){ .m-tiles--cost{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:899px){
  .m-tiles--cost{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-tiles--cost .mt--btn:last-child{grid-column:1/-1}
  .mt-v{font-size:17px}
  .mt-b{min-height:44px}
  .lab-cost{padding:16px 14px}
  .lc-grid{grid-template-columns:minmax(0,1fr)}
  .lc-table{font-size:12px}
  .lc-table th,.lc-table td{padding:6px 3px}
  .lc-table .lc-est{display:none}
  .lc-agent{grid-template-columns:minmax(0,1fr) 44px auto;min-height:44px}
  .lc-call{min-height:44px}
  .lc-ctl input{width:20px;height:20px}
}