/* ==========================================================================
   aidbs-embed.css · the interface-system section inside a brand's own case study
   (work/case-onebrief.html, case-black-forest.html, case-coram.html,
   case-protective-life.html, case-frontline21-2.html) · JasonWalker.design · v1.0 · 29 September 2026

   One section, built from the same R4 library files the AI-Directed Brand Systems
   case ships (assets/brand-systems/dcl/<brand>/). It takes the brand's own paper and
   ink from the library tokens, so it reads as the brand's surface inside whichever
   shell the case study wears, and it flips to the dark mode with its screens. Type
   inherits the page's face. Everything reads without the script; the script only
   swaps the mode.
   ========================================================================== */
.aie{--bg:var(--aie-bg);--panel:var(--aie-panel);--fg:var(--aie-fg);--mut:var(--aie-muted);--line:var(--aie-line);--ac:var(--aie-accent);--btn:var(--aie-button);--on:var(--aie-on);
  background:var(--bg);color:var(--fg);padding:clamp(56px,7vw,112px) 0;font-family:inherit;transition:background .25s,color .25s}
.aie[data-mode="dark"]{--bg:var(--aie-dbg);--panel:var(--aie-dpanel);--fg:var(--aie-dfg);--mut:var(--aie-dmuted);--line:var(--aie-dline);--ac:var(--aie-daccent);--btn:var(--aie-dbutton);--on:var(--aie-don)}
.aie *{box-sizing:border-box;min-width:0}
.aie-wrap{width:min(100% - 2 * clamp(16px,4vw,48px),1560px);margin:0 auto;display:grid;gap:clamp(24px,3vw,44px)}
.aie-head{display:grid;gap:clamp(12px,1.4vw,20px);align-items:end}
@media (min-width:900px){ .aie-head{grid-template-columns:minmax(0,1fr) auto} .aie-head .aie-modes{grid-column:2;grid-row:1/4;align-self:end} }
.aie-kick{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0}
.aie-h2{font-size:clamp(32px,4.2vw,64px);line-height:1.02;font-weight:300;letter-spacing:-.02em;margin:0;max-width:16ch;text-wrap:balance;color:var(--fg)}
.aie-lead{font-size:clamp(16px,1.25vw,19px);line-height:1.55;margin:0;max-width:56ch;color:var(--fg);text-wrap:pretty}
.aie-phase{font-size:14.5px;line-height:1.55;margin:0;max-width:70ch;color:var(--mut);border-left:2px solid var(--line);padding-left:14px}
.aie-phase a,.aie-files a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.aie-phase a:hover,.aie-files a:hover{border-bottom-color:currentColor}
.aie-modes{display:inline-flex;border:1px solid var(--line);padding:3px;gap:3px;justify-self:start}
.aie-modes button{appearance:none;border:0;background:transparent;color:var(--mut);font:500 12px/1 inherit;font-family:inherit;letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;min-height:38px;cursor:pointer}
.aie-modes button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.aie-modes button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.aie:not(.is-js) .aie-modes{display:none}
.aie-screens{display:grid;gap:clamp(12px,1.6vw,24px);align-items:start}
@media (min-width:760px){ .aie-screens{grid-template-columns:minmax(0,1440fr) minmax(0,430fr)} }
@media (max-width:759px){ .aie-screen--phone{order:-1} }
.aie-screen{display:grid;gap:10px;margin:0;min-width:0}
.aie-screen img{width:100%;height:auto;display:block;outline:1px solid var(--line);outline-offset:-1px;background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.aie-screen figcaption{font-size:13px;line-height:1.4;color:var(--mut)}
.aie-sample{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);list-style:none;padding:0;margin:0}
@media (max-width:759px){ .aie-sample{grid-template-columns:1fr} }
.aie-sample li{display:grid;gap:8px;min-width:0}
.aie-sample img{width:100%;height:auto;display:block;outline:1px solid var(--line);outline-offset:-1px;background:var(--panel)}
.aie-sample span{font-size:13px;line-height:1.4;color:var(--fg);font-weight:500}
.aie-sample b{font:400 11.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--mut);margin-right:6px}
.aie-doors{display:grid;gap:clamp(12px,1.4vw,20px)}
@media (min-width:760px){ .aie-doors{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} }
.aie-door{display:grid;gap:8px;align-content:start;padding:clamp(18px,2vw,28px);border:1px solid var(--fg);color:var(--fg);text-decoration:none;font-size:clamp(17px,1.4vw,21px);line-height:1.25;font-weight:500;min-height:44px;transition:background .2s,color .2s}
.aie-door span{font-size:14px;line-height:1.5;font-weight:400;color:var(--mut);text-wrap:pretty}
.aie-door:hover{background:var(--fg);color:var(--bg)}
.aie-door:hover span{color:var(--bg);opacity:.8}
.aie-door:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.aie-door--main{background:linear-gradient(160deg,var(--btn) 0 60%,color-mix(in srgb,var(--btn) 78%,#000));color:var(--on);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(0,0,0,.18)}
.aie-door--main span{color:var(--on);opacity:.86}
.aie-door--main:hover{filter:brightness(1.06);background:linear-gradient(160deg,var(--btn) 0 60%,color-mix(in srgb,var(--btn) 78%,#000));color:var(--on)}
.aie-door--main:hover span{color:var(--on)}
.aie-files{font-size:13.5px;line-height:1.8;color:var(--mut);margin:0;max-width:90ch}
.aie-truth{font-size:13.5px;line-height:1.5;margin:0;color:var(--mut);max-width:64ch;border-left:2px solid var(--line);padding-left:14px}
@media (prefers-reduced-motion:reduce){ .aie,.aie-door{transition:none} }