/* ============================================================================
   [v-help-1] Triumvirate Help Center -- shared styles for the how-to guides.
   Path: public/help/help.css

   Self-contained palette using the SAME CSS variable names that
   public/lib/theme.js flips for light mode, so every help page supports the
   global light/dark toggle with no per-page work.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#111009;--surface:#1a1813;--surface2:#201e17;--surface3:#252117;
  --panel:#1a1813;--panel2:#201e17;
  --border:#2a2820;--border2:#373430;--border3:#454037;--line:#2a2820;
  --text:#ede8dc;--text2:#9a9080;--text3:#6a6356;--muted:#9a9080;
  --gold:#c9a84c;--gold-soft:#e8c96a;--gold-dim:rgba(201,168,76,0.10);--gold-rim:rgba(201,168,76,0.28);
  --clay:#cf8a63;--clay-dim:rgba(207,138,99,0.12);--clay-rim:rgba(207,138,99,0.32);
  --green:#5ca875;--red:#b85c5c;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-soft)}

/* Header */
.hc-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;background:rgba(20,18,16,0.94);border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hc-brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.hc-mark{width:32px;height:32px;border-radius:50%;background:var(--gold-dim);border:1px solid var(--gold-rim);
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--serif);font-size:15px}
.hc-brand b{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.01em;display:block}
.hc-brand i{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);display:block;margin-top:1px}
.hc-header-links{display:flex;gap:18px;align-items:center}
.hc-header-links a{font-size:13px;color:var(--text2)}
.hc-header-links a:hover{color:var(--gold)}
@media(max-width:680px){.hc-header-links a.opt{display:none}}

/* Page shell: sidebar + content */
.hc-shell{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:240px 1fr;gap:40px;padding:36px 28px 90px}
@media(max-width:880px){.hc-shell{grid-template-columns:1fr;gap:20px;padding:22px 18px 70px}}

/* Sidebar nav */
.hc-nav{position:sticky;top:84px;align-self:start}
.hc-nav .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin:0 0 12px}
.hc-nav ul{list-style:none}
.hc-nav li{margin:1px 0}
.hc-nav a{display:block;padding:8px 12px;border-radius:7px;color:var(--text2);font-size:14px;border:1px solid transparent}
.hc-nav a:hover{color:var(--text);background:var(--surface2)}
.hc-nav a.active{color:var(--gold);background:var(--gold-dim);border-color:var(--gold-rim)}
@media(max-width:880px){
  .hc-nav{position:static;border:1px solid var(--border2);border-radius:12px;background:var(--surface);padding:14px}
  .hc-nav ul{display:flex;flex-wrap:wrap;gap:6px}
  .hc-nav a{font-size:13px;padding:6px 11px}
}

/* Content */
.hc-main{min-width:0}
.hc-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.hc-main h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.01em;margin-bottom:12px}
.hc-lead{font-size:17px;color:var(--text2);max-width:64ch;margin-bottom:8px}
.hc-main h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:42px 0 8px;padding-top:18px;border-top:1px solid var(--border);scroll-margin-top:84px}
.hc-main h2:first-of-type{border-top:none;padding-top:0}
.hc-main h3{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.01em;margin:24px 0 6px;color:var(--text)}
.hc-main p{margin:10px 0;max-width:70ch}
.hc-main ul,.hc-main ol{margin:10px 0 10px 4px;padding-left:22px;max-width:70ch}
.hc-main li{margin:6px 0}
.hc-main ol{counter-reset:step}
.hc-main strong{color:var(--text);font-weight:600}
.hc-main code{font-family:var(--mono);font-size:.86em;background:var(--surface2);border:1px solid var(--border2);border-radius:4px;padding:1px 6px;color:var(--gold-soft)}
.hc-main kbd{font-family:var(--mono);font-size:.82em;background:var(--surface3);border:1px solid var(--border3);border-bottom-width:2px;border-radius:5px;padding:1px 7px;color:var(--text)}

/* Pills row (used to label real UI buttons) */
.ui{display:inline-block;font-size:.86em;font-weight:500;background:var(--surface2);border:1px solid var(--border3);border-radius:6px;padding:1px 8px;color:var(--text);white-space:nowrap}

/* Callouts */
.note{border:1px solid var(--border2);border-left:3px solid var(--gold);background:var(--surface);border-radius:8px;padding:14px 16px;margin:18px 0;font-size:14.5px;color:var(--text2)}
.note.tip{border-left-color:var(--clay)}
.note.warn{border-left-color:var(--red)}
.note b{color:var(--text)}

/* Index cards */
.hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:26px}
.hc-card{display:block;background:var(--surface);border:1px solid var(--border2);border-radius:13px;padding:20px;transition:border-color .15s,transform .15s}
.hc-card:hover{border-color:var(--gold-rim);transform:translateY(-2px)}
.hc-card .ic{font-size:22px;margin-bottom:10px;display:block}
.hc-card h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--text);margin:0 0 4px}
.hc-card p{font-size:14px;color:var(--text2);margin:0;max-width:none}
.hc-card .go{display:inline-block;margin-top:12px;font-size:13px;color:var(--gold)}

/* Footer */
.hc-foot{border-top:1px solid var(--border);padding:26px 28px;text-align:center;color:var(--text3);font-size:13px}
.hc-foot a{color:var(--text2)}
.hc-foot a:hover{color:var(--gold)}

/* Back link */
.hc-back{display:inline-block;font-size:13px;color:var(--text2);margin-bottom:6px}
.hc-back:hover{color:var(--gold)}

/* [v-help-admin-gate-1] admin-only elements hidden until the gate reveals them */
.hc-admin-hidden{display:none !important}
.hc-gatemsg{font-size:14px;color:var(--text2);padding:40px 0}