/* prices.html — AI Price History. Page-specific only; shared base + theme
   live in css/base.css (loaded first). */
.sub.bright{color:var(--ink)}
/* shared "Seat logic / Cost logic" disclosures (mirror the region one) */
.logic-disclose{font-size:.84rem;color:var(--muted)}
.logic-disclose summary{cursor:pointer;color:var(--link);width:max-content}
/* Blended Usage wrapper + collapsed service cards */
.blended-summary{cursor:pointer}
.blended-summary .sub{font-size:.84rem}
/* provider group headers spanning the card grid */
.trk-group{grid-column:1/-1;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:8px 0 -4px;padding-left:2px}
/* compact, BI-style service cards (each card is a <details> expandable) */
/* align-items:start — grid rows stretch by default, so opening one card's
   "More detail" would visually expand every card in the row */
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:10px;align-items:start}
.svc{border:1px solid var(--line);border-radius:9px;padding:0;background:var(--panel2)}
/* fixed min-height so 1-line and 2-line names produce identical collapsed boxes */
.svc summary.thead{display:flex;align-items:center;gap:8px;padding:10px 11px;cursor:pointer;list-style:none;min-height:58px}
/* name block reserves exactly two lines so every collapsed card is identical */
.svc .nm{flex:1;min-width:0;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;align-content:center;overflow-wrap:anywhere}
.svc .badge,.svc .inflag{flex:0 0 auto}
.svc summary.thead::-webkit-details-marker{display:none}
.svc summary.thead::after{content:'▾';margin-left:auto;color:var(--faint);font-size:.7rem}
.svc[open] summary.thead::after{content:'▴'}
.svc .inflag{font-size:.85rem;font-weight:700;color:var(--accent)}
.svc-inner{display:flex;flex-direction:column;gap:6px;padding:0 11px 11px;border-top:1px dashed var(--line);padding-top:9px}
.svc-range{width:100%;accent-color:var(--warn)}
.svc-inner output{font-family:var(--mono);color:var(--warn)}
.svc input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.svc .nm{font-weight:600;font-size:.9rem}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.svc label.f{font-size:.76rem}
.svc input[type=number]{padding:7px 9px;font-size:.9rem}
.svc.off{opacity:.45}
.svc .more{background:transparent;border:0;color:var(--link);font-size:.78rem;cursor:pointer;padding:6px 0 0;margin-top:2px}
.more-body{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.svc-sel{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:7px 9px;font-size:.85rem}
.svc .chk{display:flex;gap:6px;align-items:center;font-size:.78rem;color:var(--muted);cursor:pointer}
.svc .chk em{color:var(--ink);font-style:normal;font-weight:600}
/* minmax(0,1fr) + min-width:0 let native month inputs shrink instead of
   spilling out of narrow cards */
.ro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ro-grid input{min-width:0}
.controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.chk-inline{display:flex;gap:6px;align-items:center;cursor:pointer}
.chk-inline input{accent-color:var(--accent)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.chartbox{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
/* per-service "right now" snapshot: cost + footprint for every model, side by side */
.snap-head{margin-top:16px}
.snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.snap-card{border:1px solid var(--line);border-radius:9px;padding:12px 13px;background:var(--panel)}
.snap-card .nm{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;margin-bottom:9px}
.snap-card .cost{font-family:var(--mono);font-size:1.4rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.snap-card .cost small{font-size:.7rem;color:var(--faint);font-family:var(--sans);letter-spacing:0}
.snap-fp{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)}
.snap-fp div{display:flex;flex-direction:column;gap:2px}
.snap-fp .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);display:flex;align-items:center;gap:4px}
.snap-fp .k i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.snap-fp .v{font-family:var(--mono);font-size:.8rem;color:var(--ink);white-space:nowrap}
.snap-note{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);font-size:.74rem;color:var(--muted)}
canvas{width:100%!important;max-height:380px}
@media(max-width:680px){
  .tracks{grid-template-columns:1fr}
  .ro-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .svc input[type=checkbox]{width:20px;height:20px}
  canvas{max-height:300px}
  .controls{gap:10px}
}

/* ---- decision chart (js/pricelab.js): licence vs model + footprint ---- */
.lab-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0}
/* top row: the two dropdowns get a full half-width each so their option text
   is readable without opening them (must come after .lab-controls to win) */
.lab-controls-top{grid-template-columns:1fr 1fr;margin:14px 0 0}
.lab-controls select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:8px 10px;font-size:.9rem}
.lab-chartbox{position:relative}
.lab-chartbox svg{width:100%;height:auto;display:block;overflow:visible;max-height:none}
.vflag{border-bottom:1px dotted var(--faint);cursor:help}
.lab-gridline{stroke:#222732}
.lab-axis{fill:var(--faint);font-size:10px}
/* cost lines SOLID; footprint overlays dashed (each a different dash type) */
.ser-lic{stroke:var(--warn);fill:none;stroke-width:2.5}
.ser-api{stroke:var(--hot);fill:none;stroke-width:2.2}
.ser-energy{stroke:var(--accent);fill:none;stroke-width:1.6;stroke-dasharray:7 4}
.ser-co2{stroke:#b18cff;fill:none;stroke-width:1.6;stroke-dasharray:2 4}
.ser-water{stroke:#54c8e8;fill:none;stroke-width:1.6;stroke-dasharray:10 4 2 4}
.lab-mk{fill:var(--panel);stroke:var(--warn);stroke-width:2;cursor:pointer}
.lab-mklab{fill:var(--muted);font-size:9.5px}
.lab-band{fill:rgba(224,179,65,.07);stroke:rgba(224,179,65,.25);stroke-dasharray:3 3}
.lab-bandlab{fill:var(--warn);font-size:9.5px}
/* break-even shaded zones (drawn when the API overlay is on) */
.lab-zone-api{fill:rgba(91,209,166,.08)}
.lab-zone-lic{fill:rgba(224,179,65,.08)}
.lab-zonelab{font-size:9.5px}
.lab-zonelab.zapi{fill:var(--accent)}
.lab-zonelab.zlic{fill:var(--warn)}
.lab-be{stroke:var(--faint);stroke-dasharray:2 3}
.lab-belab{fill:var(--muted);font-size:9.5px}
.lab-tip{position:absolute;pointer-events:none;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11.5px;color:var(--ink);max-width:230px;opacity:0;transition:opacity .1s;transform:translate(-50%,-112%)}
.lab-tip b{color:var(--warn)}
.lab-toggles{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.lab-chip{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--muted);padding:5px 12px;font-size:.8rem;cursor:pointer}
.lab-chip[aria-pressed=true]{color:var(--ink);border-color:var(--warn);background:rgba(224,179,65,.10)}
.lab-chip .dot{display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:middle}
.lab-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:.78rem;color:var(--muted)}
.lab-legend i{display:inline-block;width:16px;height:0;border-top:2px solid;margin-right:6px;vertical-align:middle}
.lab-readout{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px}
.lab-readout div{display:flex;flex-direction:column}
.lab-k{font-size:.72rem;color:var(--faint)}
.lab-v{font-size:1.15rem;font-family:var(--mono);color:var(--ink)}
.lab-chip-cost[aria-pressed=true]{border-color:var(--hot);background:rgba(255,107,87,.12);color:var(--ink)}
.lab-cursor{stroke:var(--faint);stroke-dasharray:2 3}
.lab-hover{margin:8px 2px 0;min-height:1.2em;font-family:var(--mono);font-size:.82rem;color:var(--ink)}
/* confidence tags + sources */
.conf{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.conf.sourced{color:var(--accent);border-color:var(--accent)}
.conf.verify{color:var(--warn);border-color:var(--warn)}
.conf.assumption{color:#b98cff;border-color:#b98cff}
/* pricing-mode chips (§0.3): how the local price arises */
.badge.mode-regional_list{color:var(--muted)}
.badge.mode-usd_fx{color:#7db7ff;border-color:#7db7ff}
.badge.mode-usd_metered{color:var(--accent);border-color:var(--accent)}
.lab-v .badge{font-size:.56rem;vertical-align:3px;margin-left:4px}
/* input/output ratio chips + per-prompt impact strip */
.mix-panel{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.mix-panel .mix-lab{font-size:.82rem;color:var(--muted)}
.env-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.env-strip .cell{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.env-strip .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.env-strip .v{font-family:var(--mono);font-size:1.05rem;color:var(--ink);margin-top:2px}
.env-note{font-size:.78rem;color:var(--muted);margin-top:8px}
.host-row{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-top:12px}
.host-row .f{display:block}
.host-row select,.host-row input[type=number]{min-width:170px}
.chk-td{font-size:.82rem;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.chk-td[aria-disabled=true]{opacity:.45;cursor:help}
@media(max-width:680px){ .lab-controls{grid-template-columns:1fr 1fr} .lab-controls-top{grid-template-columns:1fr} }