/* SFTT Side Drawer — gold (dark) / chrome (light) buttons, overlay, slide-in */

:root{
  --hdr-bg-dark:#0b0b0b; --hdr-bg-light:#ffffff;
  --gold:#bfa14a; --gold-h:#a98e3f;
  --chrome:#d4d7db; --chrome-h:#c6cacf;
  --text:#0b0b0b;
  --bd:rgba(0,0,0,.25);
  --radius:12px;
}

.sftt-header .head-bar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:12px; padding:.6rem .75rem;
  background:var(--hdr-bg-dark);
}
html[data-theme="light"] .sftt-header .head-bar{ background:var(--hdr-bg-light); }
.brand-mini{ display:flex; gap:8px; align-items:center; text-decoration:none; font-weight:700; }
.menu-toggle, .pill, .close{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .8rem; border-radius:12px; border:1px solid rgba(127,127,127,.3); background:transparent;
}

/* Drawer core */
.drawer{ position:fixed; inset:0 auto 0 0; width:88%; max-width:380px; transform:translateX(-105%);
  transition:transform .25s ease; background:var(--hdr-bg-dark); color:#eee; z-index:1100; outline:none; }
html[data-theme="light"] .drawer{ background:var(--hdr-bg-light); color:#111; }
.drawer.open{ transform:translateX(0); }
.drawer-inner{ display:flex; flex-direction:column; height:100%; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:.9rem .9rem; border-bottom:1px solid rgba(127,127,127,.2); font-weight:700; }
.drawer-links{ display:flex; flex-direction:column; gap:10px; padding:12px; overflow:auto; }
.drawer .btn{ display:flex; width:100%; justify-content:center; padding:.75rem 1rem; border:1px solid var(--bd); border-radius:var(--radius); color:var(--text); }

/* Gold in dark */
html[data-theme="dark"] .drawer .btn{ background:var(--gold); }
html[data-theme="dark"] .drawer .btn:hover{ background:var(--gold-h); transform:translateY(-1px); }

/* Chrome in light */
html[data-theme="light"] .drawer .btn{ background:var(--chrome); }
html[data-theme="light"] .drawer .btn:hover{ background:var(--chrome-h); transform:translateY(-1px); }

/* Overlay */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1099; backdrop-filter:saturate(120%) blur(1px); }

/* Desktop nicety */
@media (min-width: 1024px){
  .drawer{ max-width:420px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none; }
}