/* =============================================================================
   branchdiff.css — slide layout + theme for the Branchdiff feature decks.
   Extracted from the canonical <style> that was duplicated across 01–07.
   Chrome controls (progress / chrome pill / nav / lightbox / overview) live in
   deck-chrome.css and use the --dk-* aliases defined below. This file holds
   only slide content + the Branchdiff theme.
   ===================================================================== */
:root{
  --bg:#0D1117; --bg-elev-1:#161B22; --bg-elev-2:#1C2230; --bg-code:#0A0E14;
  --border:#30363D; --border-soft:#21262D;
  --text:#E6EDF3; --muted:#8B949E; --dim:#6E7681;
  --accent:#00E3A8; --accent-soft:rgba(0,227,168,.12); --accent-glow:rgba(0,227,168,.28);
  --warn:#F2CC60; --danger:#FF7B72; --info:#79C0FF; --purple:#BC8CFF;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* shared-chrome aliases (deck-chrome.css reads these) */
  --dk-bg:var(--bg); --dk-surface:var(--bg-elev-1); --dk-elevated:var(--bg-elev-2);
  --dk-border:var(--border); --dk-border-soft:var(--border-soft);
  --dk-text:var(--text); --dk-muted:var(--muted); --dk-dim:var(--dim);
  --dk-accent:var(--accent); --dk-accent-soft:var(--accent-soft); --dk-accent-glow:var(--accent-glow);
  --dk-danger:var(--danger); --dk-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden;
  background-image:
    radial-gradient(900px 500px at 88% -12%, rgba(0,227,168,.07), transparent 60%),
    radial-gradient(700px 420px at 4% 6%, rgba(121,192,255,.045), transparent 55%);
}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--info);text-decoration:none}

/* deck + slides */
.deck{position:relative;height:100vh;width:100vw}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:7vh 6vw 11vh;opacity:0;transform:translateX(40px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;overflow-y:auto}
.slide.active{opacity:1;transform:none;pointer-events:auto}
.slide.prev{transform:translateX(-40px)}
.slide::-webkit-scrollbar{width:8px}
.slide::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}

/* hero */
.hero-slide{justify-content:center}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(0,227,168,.3);padding:6px 14px;border-radius:999px;align-self:flex-start}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
h1.title{font-size:clamp(36px,5.6vw,66px);line-height:1.04;font-weight:800;letter-spacing:-.03em;margin:20px 0;max-width:18ch}
h1.title em{font-style:normal;color:var(--accent)}
h2.subtitle{font-size:clamp(17px,1.9vw,23px);color:var(--muted);font-weight:400;max-width:60ch}
.hero-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 26px;color:var(--dim);font-size:13.5px}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta .mono{color:var(--accent)}

/* content slide chrome */
.slide-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h3.section{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin-bottom:22px;max-width:22ch}
h3.section em{font-style:normal;color:var(--accent)}
.lead-p{color:var(--muted);font-size:clamp(15px,1.4vw,18px);max-width:70ch;margin-bottom:24px}

/* bullets */
ul.bullets{list-style:none;display:flex;flex-direction:column;gap:13px}
ul.bullets li{position:relative;padding-left:26px;color:var(--text);font-size:clamp(14px,1.25vw,16.5px)}
ul.bullets li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
ul.bullets li b{color:var(--text);font-weight:600}
ul.bullets li .muted{color:var(--muted)}
ul.checklist{list-style:none;display:flex;flex-direction:column;gap:12px}
ul.checklist li{position:relative;padding-left:30px;color:var(--text);font-size:clamp(14px,1.2vw,16px)}
ul.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;font-family:'JetBrains Mono',monospace}

/* layout grids */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cols-3-2{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start}
@media(max-width:880px){.two-col,.three-col,.cols-3-2{grid-template-columns:1fr}}

/* problem | solve */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vs .box{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:12px;padding:20px}
.vs .box.problem{border-color:rgba(255,123,114,.3)}
.vs .box.solve{border-color:rgba(0,227,168,.32);background:linear-gradient(180deg,var(--accent-soft),transparent 60%),var(--bg-elev-1)}
.vs .box h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.vs .problem h4{color:var(--danger)} .vs .solve h4{color:var(--accent)}
.vs .box p{color:var(--muted);font-size:14px}
@media(max-width:760px){.vs{grid-template-columns:1fr}}

/* code block (terminal window) */
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:11px;overflow:hidden;font-family:'JetBrains Mono',monospace;font-size:13px}
.code-head{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--bg-elev-1);border-bottom:1px solid var(--border-soft)}
.code-head .d{width:11px;height:11px;border-radius:50%}
.code-head .r{background:#ff5f57}.code-head .y{background:#febc2e}.code-head .g{background:#28c840}
.code-head .file{margin-left:8px;color:var(--dim);font-size:11.5px}
.code-body{padding:14px 16px;color:var(--text);overflow-x:auto;line-height:1.65}
.code-body .prompt{color:var(--accent)}
.code-body .c{color:var(--dim)}.code-body .k{color:var(--purple)}.code-body .s{color:var(--accent)}
.code-body .f{color:var(--info)}.code-body .n{color:var(--warn)}

/* callout */
.callout{border-left:3px solid var(--info);background:rgba(121,192,255,.07);padding:14px 18px;border-radius:0 9px 9px 0;font-size:14px;color:var(--text);margin:6px 0}
.callout.accent{border-color:var(--accent);background:var(--accent-soft)}
.callout.danger{border-color:var(--danger);background:rgba(255,123,114,.08)}
.callout b{color:var(--text)}

/* stats */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.stat{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.stat .num{font-family:'JetBrains Mono',monospace;font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--accent);line-height:1}
.stat .label{font-size:13px;color:var(--text);font-weight:600;margin-top:8px}
.stat .desc{font-size:12.5px;color:var(--muted);margin-top:4px}

/* figure */
.fig{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fig img{width:100%;display:block;cursor:zoom-in}
.fig-caption{padding:11px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--border-soft);font-family:'JetBrains Mono',monospace}

/* keyboard table */
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.key{display:flex;align-items:center;gap:10px;background:var(--bg-elev-1);border:1px solid var(--border);border-radius:9px;padding:9px 13px;font-size:13px;color:var(--muted)}
kbd{font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--bg-elev-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:3px 8px;color:var(--text);min-width:22px;text-align:center}

/* deck end */
.end-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.end-links a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:10px;font-weight:600;font-size:14px;transition:.2s}
.end-links a.primary{background:var(--accent);color:#031b14}
.end-links a.primary:hover{box-shadow:0 0 24px var(--accent-glow)}
.end-links a.ghost{border:1px solid var(--border);color:var(--text)}
.end-links a.ghost:hover{border-color:var(--accent);color:var(--accent)}