/* ============================================================
   ZOPDEV EBOOK CORE — the locked brand kernel.
   Every eBook design system imports this file unchanged.
   Versions may layer their own styles but must NOT override
   these tokens or chrome components.
   ============================================================ */

:root{
  /* Brand palette — locked */
  --zop-blue:#2A4494;
  --zop-orange:#F58549;
  --zop-orange-hover:#ef7637;
  --zop-green:#7FB236;
  --zop-green-dark:#3f6320;
  --paper:#FAF7EC;
  --ink:#0A0A0A;
  --g-50:#F0EBDB;
  --g-100:#ECE7D7;
  --g-200:#E2DDCD;
  --g-300:#C9C4B5;
  --g-400:#A3A3A3;
  --g-500:#707070;
  --g-600:#525252;
  --g-700:#2a2a2a;
  --line:#D9D3BF;

  /* Typography system — locked */
  --font:'Space Grotesk',sans-serif;
  --body:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Selection — locked */
::selection{background:var(--zop-orange);color:var(--ink)}

/* Scrollbar — locked */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--g-100)}
::-webkit-scrollbar-thumb{background:var(--g-300);border-radius:5px;border:2px solid var(--g-100)}
::-webkit-scrollbar-thumb:hover{background:var(--zop-orange)}

/* ============ READING PROGRESS BAR — locked ============ */
.zd-progress{position:fixed;top:0;left:0;height:3px;background:var(--zop-orange);width:0;z-index:200;transition:width .1s linear}

/* ============ TOPBAR / LOGO — locked ============ */
.zd-topbar{position:fixed;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 170px 0 28px;z-index:150;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.16em;pointer-events:none}
.zd-topbar .zd-brand{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;pointer-events:auto;font-weight:500}
.zd-topbar .zd-brand::before{content:'';width:10px;height:10px;background:var(--zop-orange);flex-shrink:0}
.zd-topbar .zd-wm{opacity:.65}
.zd-topbar .zd-pg{opacity:.85}
@media(max-width:720px){.zd-topbar{padding-right:150px}.zd-topbar .zd-wm{display:none}}

/* ============ DOWNLOAD FAB — locked ============ */
.zd-fab{position:fixed;top:10px;right:22px;z-index:210;display:inline-flex;align-items:center;gap:9px;background:var(--zop-orange);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;padding:11px 18px;text-decoration:none;transition:transform .25s,background .25s}
.zd-fab:hover{transform:translateY(-2px);background:var(--zop-orange-hover)}

/* ============ CHAPTER RAIL (right-side nav) — locked ============ */
.zd-rail{position:fixed;right:0;top:0;height:100vh;z-index:140;display:flex;align-items:center;justify-content:flex-end}
.zd-rail .zd-track{position:absolute;right:13px;top:14vh;bottom:14vh;width:3px;background:var(--g-200);border-radius:3px;overflow:hidden;pointer-events:none;transition:opacity .25s}
.zd-rail .zd-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--zop-orange);border-radius:3px;transition:height .12s linear}
.zd-rail .zd-items{display:flex;flex-direction:column;gap:6px;max-height:84vh;overflow:hidden;padding:16px 30px 16px 22px;pointer-events:none}
.zd-rail:hover .zd-items{pointer-events:auto;overflow-y:auto}
.zd-rail:hover .zd-track{opacity:0}
.zd-rail .zd-it{display:flex;align-items:center;justify-content:flex-end;gap:10px;cursor:pointer;background:none;border:0;padding:2px 0;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--zop-orange);white-space:nowrap;opacity:0;transition:opacity .18s,font-size .18s}
.zd-rail .zd-it::after{content:'';width:11px;height:2px;background:currentColor;border-radius:2px;flex-shrink:0;transition:width .18s}
.zd-rail:hover .zd-it{opacity:.75}
.zd-rail:hover .zd-it:hover{opacity:1;font-size:12px;font-weight:700}
.zd-rail:hover .zd-it:hover::after{width:18px}
/* current-chapter item: emphasized, but only revealed with the rest of the
   nav on hover, so no label floats over empty space when idle. */
.zd-rail .zd-it.active{font-weight:700;font-size:12px}
.zd-rail:hover .zd-it.active{opacity:1}
.zd-rail .zd-it.active::after{width:24px}
.zd-rail .zd-items::-webkit-scrollbar{width:0}
@media(max-width:820px){.zd-rail .zd-items{display:none}.zd-rail .zd-track{right:7px}}

/* ============ BUTTONS — locked ============ */
.zd-btn{display:inline-flex;align-items:center;gap:14px;background:var(--zop-orange);color:var(--ink);border:none;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:0.18em;padding:16px 26px;cursor:pointer;transition:transform .3s,background .3s;text-decoration:none}
.zd-btn:hover{transform:translateY(-3px);background:var(--zop-orange-hover)}
.zd-btn.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.zd-btn.ghost:hover{border-color:var(--zop-orange);color:var(--zop-orange);background:transparent}
.zd-btn.sm{padding:11px 18px;font-size:11px}

/* ============ KICKER (section eyebrow) — locked ============ */
.zd-kicker{font-family:var(--mono);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.18em;color:var(--zop-orange);display:flex;align-items:center;gap:11px}
.zd-kicker::before{content:'';width:11px;height:11px;background:var(--zop-orange);flex-shrink:0}

/* ============ REVEAL ANIMATION UTILITY ============ */
.zd-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.zd-reveal.in{opacity:1;transform:none}
.zd-reveal.d1{transition-delay:.08s}
.zd-reveal.d2{transition-delay:.16s}
.zd-reveal.d3{transition-delay:.24s}
.zd-reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .zd-reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============ PRINT / PDF EXPORT ============ */
@media print{
  .zd-progress,.zd-topbar,.zd-fab,.zd-rail{display:none !important}
  /* Scroll-revealed content must be fully visible in the exported PDF,
     even sections that were never scrolled into view before printing. */
  .zd-reveal,[data-reveal]{opacity:1 !important;transform:none !important}
  /* Keep brand colours (accent panels, dark sections) in the PDF. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}