/* Playbook chrome for the Indicator Guide.
   The site's own dark theme is forced on (data-theme="dark" in the markup); this file
   aligns its palette with playbook.tqeacademy.com and matches the header, buttons and footer.
   Page layouts are untouched. */

:root[data-theme="dark"]{
  --ground:#0b0b0c;          /* playbook --ink   */
  --surface:#141416;         /* playbook --surface */
  --surface-sunk:#1c1c1f;    /* playbook --surface-2 */
  --ink:#ece9e3;             /* playbook --paper */
  --ink-soft:#b8b5ae;
  --ink-mute:#96938c;
  --rule:#2a2a2e;
  --rule-strong:#3a3a40;
  --gold:#e5b84b;
  --gold-hi:#f0cd6a;
  --gold-lo:#8a6d28;
  --gold-soft:#1a1813;
  --on-gold:#0b0b0c;
}

::selection{background:rgba(229,184,75,.28);color:#fff}

/* top bar: the Playbook's translucent sticky header */
.topbar{background:rgba(11,11,12,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.wordmark{font-family:Archivo,system-ui,sans-serif;font-weight:900;letter-spacing:.05em}
.navlink,.crumbs,.crumbs a{font-family:Archivo,system-ui,sans-serif;font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.navlink{color:var(--ink-mute)}
.navlink:hover{color:var(--ink);text-decoration:none}

/* buttons: square, uppercase Archivo, gold fill */
.btn{border-radius:2px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1.5rem}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn--primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn--primary:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--on-gold);filter:none}

/* footer */
.sitefoot{background:var(--surface);border-top:1px solid var(--rule)}

/* cross-site strip — the same component on all four TQE sites */
.sites-strip{margin:1.25rem auto}
.sites-strip .foot-free{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:46rem){.sites-strip .foot-free{grid-template-columns:repeat(3,1fr)}}
.sites-strip .foot-free li{background:var(--surface)}
.sites-strip .foot-free a{display:block;padding:.9rem 1.05rem;text-decoration:none}
.sites-strip .foot-free a:hover{background:var(--surface-sunk)}
.sites-strip .foot-free b{display:block;font-family:Archivo,system-ui,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.sites-strip .foot-free span{font-size:.85rem;color:var(--ink-mute)}

/* Discord in the top bar — matches the Playbook's button */
.navlink--discord{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);border:1px solid var(--rule);padding:.4rem .8rem;border-radius:2px;font-weight:700;white-space:nowrap;margin-left:0}
.navlink--discord svg{width:1rem;height:auto;display:block;flex:none}
.navlink--discord:hover{border-color:#5865f2;color:#fff;background:rgba(88,101,242,.14)}
@media(max-width:34rem){.navlink--discord span{display:none}.navlink--discord{padding:.4rem .55rem}}
/* Base.css hides .navlink below 560px; Discord stays, as an icon */
@media(width<=560px){.navlink--discord{display:inline-flex}}