/* ============================================================
   case.css — brings the case studies into the homepage's world
   ------------------------------------------------------------
   The case studies were built on the KYB prototype's own tokens (a light,
   blue ConnectAndHeal theme with a navy dark mode). Everything on those pages
   reads through ~20 custom properties, so this file re-points the properties
   and restyles only the frame — top bar, hero, panels, footer. The pages'
   own markup, diagrams and copy are untouched.

   Loaded after each page's inline <style>, so equal-specificity rules here win.
   Dark is the default (set in each page's script); light stays behind the toggle.
   ============================================================ */

/* ---- tokens: light (behind the toggle) — the page's layout, the homepage's accent and type */
:root{
  --accent:#8744F2; --accent-ink:#6A2FD0; --accent-soft:#F1E8FE; --brand-deep:#5A22B6; --brand-l:#EEE5FD;
  --serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  /* the homepage's type scale; the pages' own rules read through these */
  --t-1:12px;--t-2:14px;--t-3:16px;--t-4:20px;--t-5:clamp(22px,1.8vw,26px);--t-6:clamp(32px,3.4vw,46px);
}

/* ---- tokens: dark (the default) — the homepage's own values */
[data-theme="dark"]{
  --paper:#000; --paper-2:#0b0b0e; --surface:#0e0e11;
  --ink:#eae7e0; --ink-2:#a9a49a; --ink-3:#7f7a71;
  --line:rgba(234,231,224,.09); --line-2:rgba(234,231,224,.16);
  /* text-sized accents need the light violet to hold contrast on black; fills use the deep one */
  --accent:#C693F9; --accent-ink:#D8B6FB; --accent-soft:rgba(135,68,242,.16); --brand-deep:#C693F9; --brand-l:rgba(135,68,242,.14);
  --warn:#F0A65A; --warn-soft:rgba(240,166,90,.12);
  --bad:#F08A80; --bad-soft:rgba(240,138,128,.12);
  --good:#6FCB9A; --good-soft:rgba(111,203,154,.12);
  --wire:rgba(234,231,224,.16); --wire-fill:#0b0b0e;
  --shadow:0 24px 60px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}
body{letter-spacing:.005em}

/* ---- type: the homepage's serif for display, which only comes in one weight ---- */
h1,h2{font-weight:400;letter-spacing:-.015em;line-height:1.04}
.hero h1{font-weight:400;font-size:clamp(44px,6vw,78px);letter-spacing:-.02em;line-height:1}
.hero h1 em{font-style:italic;color:var(--accent)}
.sec h2{font-weight:400;font-size:var(--t-6);letter-spacing:-.015em}
.pull{font-weight:400;font-style:italic;font-size:var(--t-5);line-height:1.3}
.pull em{font-style:italic}
.ex-notes .rule{font-weight:400;font-size:var(--t-5)}
.wallet .big,.met .v,.imp .v,.f-v,.f-txt .f-q{font-weight:400}
.persona .mono-avatar{font-weight:400;font-size:var(--t-5)}
.sec-head .n{color:var(--accent)}

/* ---- top bar → the homepage's floating glass pill ---- */
.top{top:12px;margin:12px auto 0;width:min(calc(100% - 32px),1180px);padding:8px 8px 8px 10px;border:0;border-radius:100px;
  background:color-mix(in oklab,var(--paper) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
[data-theme="dark"] .top{background:rgba(12,13,16,.72);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -24px rgba(0,0,0,.8)}
.top::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(to bottom right,rgba(20,18,10,.22) 0%,rgba(20,18,10,.06) 22%,transparent 40%,transparent 60%,rgba(20,18,10,.06) 78%,rgba(20,18,10,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-theme="dark"] .top::before{
  background:linear-gradient(to bottom right,rgba(255,255,255,.6) 0%,rgba(255,255,255,.16) 22%,transparent 40%,transparent 60%,rgba(255,255,255,.16) 78%,rgba(255,255,255,.6) 100%)}
.top .name{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 6px;border-radius:100px;font-size:var(--t-2);font-weight:500;color:var(--ink-2);transition:color .2s var(--ease),background-color .2s var(--ease)}
.top .name:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
.top .name .mark{width:28px;height:28px;display:block}
.top .name span{margin:0;color:inherit;font-weight:500}
/* the monogram is white; on the light bar it's inverted to read */
:root:not([data-theme="dark"]) .top .name .mark{filter:invert(1)}
.tweaks button{height:36px;border-radius:100px;font-weight:500}
[data-theme="dark"] .tweaks button{background:rgba(255,255,255,.04);border-color:var(--line-2)}
.tweaks button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rail{top:84px;height:calc(100vh - 84px)}
.sec{scroll-margin-top:84px}

/* ---- hero: the blue wash becomes a soft accent glow from the top ---- */
.hero,[data-theme="dark"] .hero{
  background:radial-gradient(60% 55% at 50% 0%,var(--brand-l),transparent 72%),var(--paper);border-bottom-color:var(--line)}
.hero{padding-top:72px}

/* ---- panels: in the dark theme they become the homepage's glass, with its corner-lit rim ---- */
[data-theme="dark"] :is(.brief > div,.card,.opt,.sheet,.explorer,figure.shot,figure.plate,.wallet){
  position:relative;border-color:transparent;
  background:linear-gradient(180deg,rgba(14,14,17,.92) 0%,rgba(9,9,11,.86) 100%)}
[data-theme="dark"] :is(.brief > div,.card,.opt,.sheet,.explorer,figure.shot,figure.plate,.wallet)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom right,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 22%,transparent 40%,transparent 60%,rgba(255,255,255,.1) 78%,rgba(255,255,255,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* the chosen option keeps a visible accent edge */
[data-theme="dark"] .opt.chosen{border-color:rgba(198,147,249,.45);background:linear-gradient(180deg,rgba(135,68,242,.14),rgba(14,14,17,.9))}
[data-theme="dark"] figure.ph{background:#0b0b0e}
[data-theme="dark"] :is(.sheet-bar,thead th,.ex-tabs){background:#0b0b0e}
[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.03)}
/* hard-coded navies in the page styles */
figure.plate{background:#0b0b0e}
figure.plate figcaption{background:#08080a;color:var(--ink-3)}
[data-theme="dark"] :is(.rf-turn,.finding){background:linear-gradient(180deg,rgba(135,68,242,.12),rgba(14,14,17,.9));box-shadow:inset 0 0 0 1px rgba(198,147,249,.2)}

/* ---- footer: the homepage's horizon line ---- */
footer{position:relative;border-top:0;padding-top:64px}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent 8%,color-mix(in oklab,var(--accent) 60%,transparent) 50%,transparent 92%)}
footer::after{content:"";position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none;
  background:radial-gradient(ellipse 42% 100% at 50% 0%,color-mix(in oklab,var(--accent) 10%,transparent),transparent 70%)}
footer .in{position:relative;z-index:1}
footer .links a:first-child{font-family:var(--serif);font-size:var(--t-5);font-weight:400;color:var(--ink)}
footer .links{align-items:baseline}

/* ---- small things ---- */
#progress{background:linear-gradient(90deg,#8744F2,#C693F9);box-shadow:0 0 12px rgba(135,68,242,.6)}
[data-theme="dark"] #totop{background:rgba(12,13,16,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
::selection{background:rgba(135,68,242,.35);color:var(--ink)}

/* ---- hero image: the project's device render on the homepage cards' lit stage ---- */
.hero-art.stage{position:relative;aspect-ratio:16/10;padding:0;border:0;border-radius:24px;overflow:hidden;align-self:center;
  background:radial-gradient(62% 46% at 50% 104%,rgba(135,68,242,.42),rgba(135,68,242,.12) 55%,transparent 80%),
             radial-gradient(55% 55% at 50% 45%,rgba(198,147,249,.07),transparent 70%),#0b0b0e;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.hero-art.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0;
  filter:drop-shadow(0 26px 28px rgba(0,0,0,.6))}
.hero-art.stage::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(to bottom right,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 22%,transparent 40%,transparent 60%,rgba(255,255,255,.14) 78%,rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* KYB: two components share the class .st, and the pattern-state card's `.st b{display:block}`
   was breaking the bold words in "Why this project existed" onto their own lines */
.rf-steps .st p b{display:inline;margin:0;font-size:inherit;font-weight:600}

/* ---- outcomes at a glance, in the hero: the results before the story ---- */
.glance{margin-top:30px}
/* the auto-fit grid below has a definite max-width, so its min-content size is a full
   four-card row (504px). Once the hero collapses to a single `1fr` column (min = auto)
   that floor widens the whole page on phones — let the column shrink instead. */
.hero-in > *{min-width:0}
.glance ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;max-width:620px}
.glance li{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 14px 15px;border-radius:14px;
  background:color-mix(in oklab,var(--surface) 88%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.glance b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.015em;color:var(--accent);white-space:nowrap}
.glance span{font-size:var(--t-1);line-height:1.35;color:var(--ink-2)}
.glance-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:500 var(--t-2) var(--sans);
  color:var(--ink-2);text-decoration:none;transition:color .2s var(--ease)}
.glance-go:hover{color:var(--accent)}
.glance-go span{transition:transform .2s var(--ease)}
.glance-go:hover span{transform:translateY(2px)}