/* casestudy-themes.css — per-project immersive themes for the case-study dialog.
   Scoped to .cs-dialog[data-case] only; global tokens untouched. */

/* palettes — light fields (the app is light); each project keeps its own accent */
.cs-dialog[data-case="mr"]{--p-bg:#ECF5F8;--p-surf:#FFFFFF;--p-edge:#D3E4EB;--p-ink:#151A23;--p-soft:#44586A;--p-dim:#6E8290;--p-acc:#3D89B5;--p-fill:#8DC2DD;--p-on-acc:#151A23;--p-tagbg:rgba(236,245,248,.88)}
.cs-dialog[data-case="makesens"]{--p-bg:#F1F7F4;--p-surf:#FFFFFF;--p-edge:#D6E4DC;--p-ink:#0F2B22;--p-soft:#42584F;--p-dim:#7A9187;--p-acc:#0E7A55;--p-fill:#78D8A8;--p-on-acc:#0F2B22;--p-tagbg:rgba(241,247,244,.88)}
.cs-dialog[data-case="apanio"]{--p-bg:#F8F4FC;--p-surf:#FFFFFF;--p-edge:#E4D9F0;--p-ink:#231633;--p-soft:#544766;--p-dim:#8F81A4;--p-acc:#6B21C8;--p-fill:#FF4D9A;--p-on-acc:#fff;--p-tagbg:rgba(248,244,252,.88)}
.cs-dialog[data-case="maturity"]{--p-bg:#F4F2F7;--p-surf:#FFFFFF;--p-edge:#E2DEEA;--p-ink:#1A1523;--p-soft:#4E4560;--p-dim:#8A7F9E;--p-acc:#7830F0;--p-fill:#7830F0;--p-on-acc:#fff;--p-tagbg:rgba(244,242,247,.88)}
.cs-dialog[data-case="energy"]{--p-bg:#F7F1DC;--p-surf:#FFFFFF;--p-edge:#E8E0C8;--p-ink:#231F14;--p-soft:#5C5440;--p-dim:#948A6C;--p-acc:#8A6D00;--p-fill:#E9C700;--p-on-acc:#231F14;--p-tagbg:rgba(247,241,220,.88)}
/* new projects (DEV-INSTRUCTIONS §4). ailit/extruder accents darkened one step from the
   proposal (#E4572E / #B4551B) to clear 4.5:1 on their fields; the vivid value keeps
   living as --p-fill decoration — same fallback rule the doc allows (as energy does). */
.cs-dialog[data-case="ailit"]{--p-bg:#FFF6DA;--p-surf:#FFFFFF;--p-edge:#F0E2A8;--p-ink:#1E1A0F;--p-soft:#57503B;--p-dim:#8A8163;--p-acc:#C24418;--p-fill:#F7C744;--p-on-acc:#fff;--p-tagbg:rgba(255,246,218,.88)}
.cs-dialog[data-case="contextify"]{--p-bg:#EEF2FF;--p-surf:#FFFFFF;--p-edge:#D6DEF7;--p-ink:#14193A;--p-soft:#485174;--p-dim:#7D86A8;--p-acc:#2F55D4;--p-fill:#7C9BFF;--p-on-acc:#fff;--p-tagbg:rgba(238,242,255,.88)}
.cs-dialog[data-case="extruder"]{--p-bg:#F4EFE6;--p-surf:#FFFFFF;--p-edge:#E2D8C6;--p-ink:#221C14;--p-soft:#5A5240;--p-dim:#93886F;--p-acc:#A84F19;--p-fill:#E0A96D;--p-on-acc:#fff;--p-tagbg:rgba(244,239,230,.88)}
.cs-dialog[data-case="eva"]{--p-bg:#EFF3F1;--p-surf:#FFFFFF;--p-edge:#D8E3DD;--p-ink:#14201B;--p-soft:#3F5349;--p-dim:#77897F;--p-acc:#2E6B57;--p-fill:#9AD1B8;--p-on-acc:#fff;--p-tagbg:rgba(239,243,241,.88)}
.cs-dialog[data-case="co2"]{--p-bg:#F1F7F4;--p-surf:#FFFFFF;--p-edge:#D6E4DC;--p-ink:#0F2B22;--p-soft:#42584F;--p-dim:#7A9187;--p-acc:#0E7A55;--p-fill:#78D8A8;--p-on-acc:#fff;--p-tagbg:rgba(241,247,244,.88)}

/* immersive re-skin (applies to any themed case) */
.cs-dialog[data-case]{background:var(--p-bg);color:var(--p-ink)}
.cs-dialog[data-case] .cs-bar{background:var(--p-bg);border-bottom-color:var(--p-edge)}
.cs-dialog[data-case] .cs-eyebrow,.cs-dialog[data-case] .cs-count{color:var(--p-dim)}
.cs-dialog[data-case] .cs-title-sm{color:var(--p-ink)}
.cs-dialog[data-case] .cs-ic{border-color:var(--p-edge);color:var(--p-ink)}
.cs-dialog[data-case] .cs-ic:hover{background:var(--p-acc);color:var(--p-on-acc);border-color:var(--p-acc)}
.cs-dialog[data-case] .cs-fs{color:var(--p-dim)}
.cs-dialog[data-case] .cs-fs:hover{background:var(--p-surf);color:var(--p-ink)}
.cs-dialog[data-case] .cs-body::-webkit-scrollbar-thumb{background:var(--p-edge)}
.cs-dialog[data-case] .cs-hero{background:var(--p-surf)}
.cs-dialog[data-case] .cs-hero-tag{color:var(--p-dim);background:var(--p-tagbg)}
.cs-dialog[data-case] .cs-tag{border-color:var(--p-acc);color:var(--p-acc)}
.cs-dialog[data-case] .cs-impact{color:var(--p-acc)}
.cs-dialog[data-case="energy"] .cs-impact{color:#8A6D00}
.cs-dialog[data-case] .cs-meta{border-top-color:var(--p-edge);border-bottom-color:var(--p-edge)}
.cs-dialog[data-case] .cs-meta .k,.cs-dialog[data-case] .cs-label,.cs-dialog[data-case] .cs-cap{color:var(--p-dim)}
.cs-dialog[data-case] .cs-meta .v{color:var(--p-ink)}
.cs-dialog[data-case] .cs-text{color:var(--p-soft)}
.cs-dialog[data-case] .cs-slot{background:var(--p-bg)}
.cs-dialog[data-case] .cs-phases{border-top-color:var(--p-ink)}
.cs-dialog[data-case] .cs-phase{border-right-color:var(--p-edge)}
.cs-dialog[data-case] .cs-phase .ph-d{border-color:var(--p-fill,var(--p-acc))}
.cs-dialog[data-case] .cs-phase .ph-k{color:var(--p-ink)}
.cs-dialog[data-case] .cs-phase .ph-note{color:var(--p-dim)}
.cs-dialog[data-case] .cs-metric .mval{color:var(--p-acc)}
.cs-dialog[data-case="energy"] .cs-metric .mval{color:#231F14}
.cs-dialog[data-case] .cs-metric .mnote{color:var(--p-dim)}
.cs-dialog[data-case] .cs-foot{border-top-color:var(--p-edge)}
.cs-dialog[data-case] .cs-foot .fnav .fl{color:var(--p-dim)}
.cs-dialog[data-case] .cs-foot .fnav .ft{color:var(--p-ink)}
.cs-dialog[data-case] .cs-foot .fnav:hover .ft{color:var(--p-acc)}
.cs-dialog[data-case="energy"] .cs-foot .fnav:hover .ft{color:#8A6D00}
.cs-dialog[data-case] .cs-hint{color:var(--p-dim)}

.cs-dialog[data-case] .cs-embed{border-top-color:var(--p-edge);border-bottom-color:var(--p-edge)}

/* video hero — never crop the product footage */
.cs-dialog[data-case] video.cs-hero{object-fit:contain;background:#020203}

/* native data blocks (rebuilt from the deck's data slides — scannable, on-theme) */
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-stats .st{background:var(--p-surf,var(--paper-2));border:1px solid var(--p-edge,var(--hair));border-radius:14px;padding:18px}
.cs-stats .sv{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4vw,48px);letter-spacing:-.03em;line-height:.95;color:var(--p-acc,var(--blue))}
.cs-dialog[data-case="energy"] .cs-stats .sv{color:#231F14}
.cs-stats .sn{margin-top:9px;font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--p-dim,var(--ink-55))}
.cs-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-trio .t3{background:var(--p-surf,var(--paper-2));border:1px solid var(--p-edge,var(--hair));border-radius:14px;padding:22px 18px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--p-ink,var(--ink));display:flex;align-items:center;gap:12px}
.cs-trio .t3::before{content:"";width:11px;height:11px;flex:0 0 auto;border:2px solid var(--p-acc,var(--blue));transform:rotate(45deg)}
.cs-bars{display:flex;flex-direction:column;gap:18px}
.cs-bars .bk{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:8px;color:var(--p-ink,var(--ink))}
.cs-bars .bl{position:relative;height:30px;border-radius:8px;background:var(--p-surf,var(--paper-2));border:1px solid var(--p-edge,var(--hair));margin-bottom:6px;overflow:hidden}
.cs-bars .bl i{position:absolute;inset:0 auto 0 0;background:var(--p-edge,var(--ink-14))}
.cs-bars .bl.on i{background:var(--p-fill,var(--blue))}
.cs-bars .bl span{position:relative;z-index:1;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--p-ink,var(--ink));line-height:30px;padding:0 12px}
.cs-bars .bl.on span{color:var(--p-on-acc,#fff);mix-blend-mode:normal}
@media (max-width:720px){.cs-stats,.cs-trio{grid-template-columns:1fr}}

/* Q&A rows — answer visible closed; expand for the 2-line detail */
.cs-qa{background:var(--p-surf,#fff);border:1.5px solid var(--p-edge,var(--hair));border-radius:14px;margin-bottom:10px;overflow:hidden}
.cs-qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px}
.cs-qa summary::-webkit-details-marker{display:none}
.cs-qa .qa-q{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--p-ink,var(--ink));white-space:nowrap}
.cs-qa .qa-a{flex:1;font-size:14.5px;color:var(--p-dim,var(--ink-55));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-qa .qa-x{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--p-edge);display:grid;place-items:center;color:var(--p-acc);font-weight:700;transition:transform .18s ease}
.cs-qa .qa-x .material-symbols-outlined{font-size:16px}
.cs-qa[open] .qa-x{transform:rotate(45deg);background:var(--p-fill,var(--p-acc));border-color:var(--p-fill,var(--p-acc));color:var(--p-on-acc,#fff)}
.cs-qa .qa-more{padding:0 18px 16px 18px;font-size:15px;line-height:1.55;color:var(--p-soft,var(--ink-80));max-width:64ch}
.cs-qa[open]{border-color:var(--p-fill,var(--p-acc))}
@media (max-width:720px){.cs-qa .qa-a{display:none}.cs-qa .qa-q{white-space:normal}}

/* story strip — consecutive cartoon panels sit tight so the narrative reads as one */
.cs-dialog[data-case] .cs-tight{margin-top:14px}

/* phone pill toolbar picks up the theme too */
@media (max-width:640px){
  .cs-dialog[data-case] .cs-left,.cs-dialog[data-case] .cs-right{background:var(--p-tagbg);border-color:var(--p-edge)}
  .cs-dialog[data-case] .cs-ic{color:var(--p-ink)}
  .cs-dialog[data-case] .cs-ic:hover{background:var(--p-surf);color:var(--p-ink)}
  .cs-dialog[data-case="mr"] .cs-phase,.cs-dialog[data-case="makesens"] .cs-phase,.cs-dialog[data-case="apanio"] .cs-phase{border-bottom-color:var(--p-edge)}
}