/* ============================================================================
   CryptoLwa · Terminal Skin  —  the universal shell (Sacred Daylight)
   One stylesheet + terminal-skin.js give EVERY page the identical header:
   logo · site menu · language menu · sticky TradingView ticker.
   Include on every page:
     <link rel="stylesheet" href="/assets/terminal-skin.css">
     <script src="/assets/terminal-skin.js" data-active="picks"></script>
   ========================================================================== */
:root{
  --linen:#F7F2E8; --linen-dark:#EDE5D4; --linen-mid:#F2ECD9;
  --mahogany:#2C1A0E; --mahogany-lt:#5C3A22;
  --earth:#8B4513; --gold:#C4984A; --gold-lt:#D9B870;
  --indigo:#1C3A5E; --indigo-lt:#2E5A8E;
  --botanica:#4A6741; --botanica-lt:#6A8F60;
  --text:#2C1A0E; --text-mid:#6B4C32; --text-dim:#9A7D62;
  --border:#D8CCBA; --border-lt:#E8DECE;
  --red:#C0392B; --amber:#A0720A;
  --clwa-header-h:60px;        /* topbar row only */
  --clwa-header-full:107px;    /* full injected header = topbar (60) + ticker (47); reserved on body to kill CLS. Keep in sync if the topbar/ticker heights change. */
}
.clwa-skin-loaded body{margin:0}
/* Reserve the header's height on EVERY page from first paint so the
   JS-injected header (added at body top after load) fills reserved space
   instead of shoving all content down → eliminates the ~0.34 CLS. Paired
   with position:fixed below (header out of flow, sits in the reserved band). */
body{padding-top:var(--clwa-header-full)}
/* WCAG 2.4.7 — visible keyboard-focus indicator on every interactive element,
   site-wide. Gold ring reads on both the dark and parchment grounds. Mouse
   clicks don't trigger :focus-visible, so the design is untouched for pointer users. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:2px solid #C4984A;outline-offset:2px;border-radius:2px}

/* fixed shell ----------------------------------------------------------- */
.clwa-header{position:fixed;top:0;left:0;right:0;z-index:1000;font-family:'Lora',serif}
.clwa-topbar{display:flex;align-items:center;gap:18px;height:var(--clwa-header-h);
  padding:0 28px;background:#2C1A0E;position:relative;z-index:2}
.clwa-topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,152,74,.5),transparent)}

/* brand ----------------------------------------------------------------- */
.clwa-brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.clwa-mark{width:30px;height:30px;flex-shrink:0}
.clwa-wordmark{font-family:'Cinzel',serif;font-size:15px;font-weight:700;letter-spacing:.26em;
  color:var(--gold-lt);text-transform:uppercase;line-height:1}
.clwa-brand-div{width:1px;height:18px;background:rgba(196,152,74,.3)}
.clwa-tagline{font-style:italic;font-size:11px;color:rgba(196,152,74,.62);letter-spacing:.04em;white-space:nowrap}

/* site menu ------------------------------------------------------------- */
.clwa-nav{display:flex;align-items:center;gap:2px;margin-left:14px}
.clwa-link{position:relative;background:none;border:none;cursor:pointer;
  color:rgba(247,242,232,.5);font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 13px;text-decoration:none;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.clwa-link:hover{color:rgba(247,242,232,.85)}
.clwa-link.active{color:var(--gold-lt);border-bottom-color:var(--gold)}
.clwa-has-drop{display:inline-flex;align-items:center;gap:5px}
.clwa-caret{font-size:8px;opacity:.7}

/* dropdown (pantheon) --------------------------------------------------- */
.clwa-drop{position:relative}
.clwa-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:#fff;
  border:1px solid var(--border);box-shadow:0 18px 40px -18px rgba(44,26,14,.45);
  padding:7px;display:none;flex-direction:column;gap:1px;z-index:1100}
.clwa-menu.open{display:flex}
.clwa-menu a{display:flex;align-items:baseline;gap:10px;padding:9px 11px;text-decoration:none;
  color:var(--text-mid);transition:background .15s,color .15s}
.clwa-menu a:hover{background:var(--linen-mid);color:var(--mahogany)}
.clwa-menu .glyph{font-family:'Cinzel',serif;color:var(--earth);font-size:13px;width:18px;text-align:center;flex-shrink:0}
.clwa-menu .mi-name{font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.04em}
.clwa-menu .mi-role{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);margin-left:auto;white-space:nowrap}

/* right controls -------------------------------------------------------- */
.clwa-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.clwa-ctrl{background:none;border:1px solid rgba(196,152,74,.32);color:var(--gold-lt);
  font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s}
.clwa-ctrl:hover{background:rgba(196,152,74,.12)}
.clwa-lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:#fff;
  border:1px solid var(--border);box-shadow:0 18px 40px -18px rgba(44,26,14,.45);padding:6px;display:none;z-index:1100}
.clwa-lang-menu.open{display:block}
.clwa-lang-menu button{display:flex;width:100%;align-items:center;gap:9px;background:none;border:none;
  cursor:pointer;padding:8px 10px;font-family:'Lora',serif;font-size:13px;color:var(--text-mid);text-align:left}
.clwa-lang-menu button:hover{background:var(--linen-mid);color:var(--mahogany)}
.clwa-lang-menu button.sel{color:var(--earth)}
.clwa-lang-menu .lc{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--text-dim);margin-left:auto}
.clwa-burger{display:none;background:none;border:1px solid rgba(196,152,74,.32);color:var(--gold-lt);
  font-size:14px;padding:6px 10px;cursor:pointer}

/* account (Sign in / Dashboard dropdown) -------------------------------- */
a.clwa-ctrl{text-decoration:none}
.clwa-account-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:#fff;
  border:1px solid var(--border);box-shadow:0 18px 40px -18px rgba(44,26,14,.45);padding:6px;display:none;z-index:1100}
.clwa-account-menu.open{display:block}
.clwa-account-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;
  font-family:'Lora',serif;font-size:13px;color:var(--text-mid);text-decoration:none}
.clwa-account-menu a:hover{background:var(--linen-mid);color:var(--mahogany)}

/* ticker tape ----------------------------------------------------------- */
.clwa-ticker{background:var(--linen);border-bottom:1px solid var(--border);min-height:46px;position:relative;z-index:1}
.clwa-ticker .tradingview-widget-container{margin:0}
.clwa-ticker .tradingview-widget-copyright{display:none}

/* vévé entry veil ------------------------------------------------------- */
.clwa-veil{position:fixed;inset:0;z-index:2000;background:var(--mahogany);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  transition:opacity .7s ease;will-change:opacity}
.clwa-veil.dissolving{opacity:0;pointer-events:none}
.clwa-veil.gone{display:none}
.clwa-veil canvas{width:172px;height:172px;display:block}
.clwa-veil .cl-logo{width:164px;height:164px;display:block;filter:drop-shadow(0 0 14px rgba(217,184,112,.18))}
.clwa-veil-name{font-family:'Cinzel',serif;font-size:30px;font-weight:600;letter-spacing:.22em;
  color:var(--gold-lt);text-align:center;opacity:0;animation:clwaRise .8s ease .35s forwards}
.clwa-veil-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(196,152,74,.55);text-align:center;animation:clwaBreathe 2.4s ease-in-out infinite}
@keyframes clwaBreathe{0%,100%{opacity:.32}50%{opacity:.85}}
@keyframes clwaRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.clwa-veil-name{animation:none;opacity:1}.clwa-veil-label{animation:none;opacity:.7}}

/* mobile ---------------------------------------------------------------- */
@media(max-width:860px){
  .clwa-tagline,.clwa-brand-div{display:none}
  .clwa-nav{position:absolute;top:var(--clwa-header-h);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:#2C1A0E;border-bottom:1px solid rgba(196,152,74,.25);
    margin:0;padding:6px 12px 12px;display:none}
  .clwa-nav.open{display:flex}
  .clwa-link{padding:11px 8px;border-bottom:1px solid rgba(196,152,74,.1)}
  .clwa-drop{width:100%}
  .clwa-menu{position:static;border:none;box-shadow:none;background:rgba(0,0,0,.18);padding:0 0 4px}
  .clwa-menu a{color:rgba(247,242,232,.7)} .clwa-menu a:hover{background:rgba(196,152,74,.1);color:var(--gold-lt)}
  .clwa-menu .mi-name{color:rgba(247,242,232,.85)}
  .clwa-burger{display:inline-flex}
}
/* very narrow (≈390px phones): keep 🌐 + 👤 + ☰ from overflowing */
@media(max-width:520px){
  .clwa-lang-label,.clwa-acct-label{display:none}
  .clwa-topbar{padding:0 14px;gap:10px}
  .clwa-right{gap:6px}
}
/* mobile content safety net (added 2026-07-05) — wide tables, media and code
   blocks scroll INSIDE their own box instead of forcing the whole page to
   scroll sideways. Scoped to .clwa-skin-loaded so it only touches app pages
   that load this skin; body overflow is left alone so the sticky header keeps
   working. */
@media(max-width:640px){
  .clwa-skin-loaded img,.clwa-skin-loaded svg,
  .clwa-skin-loaded video,.clwa-skin-loaded canvas,
  .clwa-skin-loaded iframe{max-width:100%}
  .clwa-skin-loaded table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .clwa-skin-loaded pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* narration "play" button on every class page — a subtle breathing gold glow so
   it catches the eye without being loud (added 2026-07-05). Applies site-wide
   since every lesson loads this skin. */
.nar-play{box-shadow:0 0 9px 1px rgba(196,152,74,.30);animation:narPlayGlow 2.8s ease-in-out infinite}
.nar-play:hover{box-shadow:0 0 17px 3px rgba(196,152,74,.55)}
.nar-play:disabled{animation:none;box-shadow:none}
@keyframes narPlayGlow{0%,100%{box-shadow:0 0 8px 1px rgba(196,152,74,.26)}50%{box-shadow:0 0 15px 3px rgba(196,152,74,.50)}}
@media(prefers-reduced-motion:reduce){.nar-play{animation:none;box-shadow:0 0 10px 1px rgba(196,152,74,.35)}}