/* Styles for the static strain pages generated by tools/build.mjs.
   Colors and fonts mirror the variables in index.html. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-deep:#0a0c0f;
  --bg-card:#151a22;
  --border:#1e2a3a;
  --border-light:#2a3a52;
  --text-primary:#e8edf5;
  --text-secondary:#8a99b4;
  --text-muted:#7c8ca6;
  --potency-low:#7c9a6e;
  --potency-low-bg:rgba(124,154,110,.12);
  --potency-mod:#c9a84c;
  --potency-mod-bg:rgba(201,168,76,.12);
  --potency-high:#c87a3a;
  --potency-high-bg:rgba(200,122,58,.12);
  --potency-extreme:#b84040;
  --potency-extreme-bg:rgba(184,64,64,.12);
  --accent-cyan:#4ecdc4;
  --accent-glow:rgba(78,205,196,.15);
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-body:'Inter',system-ui,sans-serif;
  --radius:8px;
  --radius-lg:12px;
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);line-height:1.6;min-height:100vh}
a{color:var(--accent-cyan);text-decoration:none}
a:hover{color:#7eddd6;text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--bg-card);padding:10px 16px;border-radius:var(--radius);font-family:var(--font-mono);font-size:.8rem}
.skip-link:focus{left:8px}

.nav{position:sticky;top:0;z-index:100;background:rgba(10,12,15,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;height:60px;padding:0 40px}
.nav-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text-primary);white-space:nowrap;letter-spacing:-.02em}
.nav-logo:hover{color:var(--text-primary);text-decoration:none}
.nav-logo span{color:var(--accent-cyan);font-weight:400}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);padding:6px 12px;border-radius:6px;white-space:nowrap}
.nav-links a:hover{color:var(--accent-cyan);background:var(--accent-glow);text-decoration:none}

.container{max-width:860px;margin:0 auto;padding:0 24px}
main.container{padding-top:32px;padding-bottom:64px}
.crumbs{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);margin-bottom:28px}
.crumbs span{color:var(--text-secondary)}

.strain-head{border-left:3px solid var(--border-light);padding-left:20px;margin-bottom:40px}
.strain-head[data-tier="low"]{border-left-color:var(--potency-low)}
.strain-head[data-tier="moderate"]{border-left-color:var(--potency-mod)}
.strain-head[data-tier="high"]{border-left-color:var(--potency-high)}
.strain-head[data-tier="extreme"]{border-left-color:var(--potency-extreme)}
h1{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.4rem);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.origin{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);margin-top:8px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.lede{font-size:1.05rem;color:var(--text-secondary);max-width:64ch}

.badge{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:100px;display:inline-block;white-space:nowrap}
.tier-low{color:var(--potency-low);background:var(--potency-low-bg)}
.tier-moderate{color:var(--potency-mod);background:var(--potency-mod-bg)}
.tier-high{color:var(--potency-high);background:var(--potency-high-bg)}
.tier-extreme{color:#d86a6a;background:var(--potency-extreme-bg)}
.badge.est,.badge.plain{color:var(--text-secondary);background:rgba(255,255,255,.05);border:1px solid var(--border)}
.badge.lab{color:var(--accent-cyan);background:var(--accent-glow)}

section{margin-bottom:40px}
h2{font-family:var(--font-mono);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-cyan);margin-bottom:14px}
section h2+*{margin-top:0}
section p{color:var(--text-secondary);max-width:68ch}
.note{font-size:.82rem;color:var(--text-muted);margin-top:12px}

.facts{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:4px 20px}
.facts .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.facts .row:last-child{border-bottom:none}
.facts dt{font-size:.85rem;color:var(--text-secondary)}
.facts dd{font-family:var(--font-mono);font-size:.82rem;color:var(--text-primary);text-align:right}
.meters dd{display:flex;align-items:center;gap:12px;flex-shrink:0}
.meter{display:inline-block;width:140px;height:6px;border-radius:3px;background:var(--border);overflow:hidden}
.meter span{display:block;height:100%;background:var(--accent-cyan);border-radius:3px}
.num{min-width:3.2em;text-align:right;color:var(--text-secondary)}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px}
.tag{font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);background:rgba(255,255,255,.04);border:1px solid var(--border);padding:4px 10px;border-radius:6px}
.tag:hover{color:var(--accent-cyan);border-color:rgba(78,205,196,.3);text-decoration:none}
.similar{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.similar li{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn{font-family:var(--font-mono);font-size:.78rem;padding:11px 18px;border-radius:var(--radius);background:var(--accent-cyan);color:var(--bg-deep);font-weight:600}
.btn:hover{background:#7eddd6;color:var(--bg-deep);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent-cyan);border:1px solid rgba(78,205,196,.35);font-weight:500}
.btn.ghost:hover{background:var(--accent-glow);color:var(--accent-cyan)}

.strain-table{width:100%;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.strain-table th,.strain-table td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.05);font-size:.88rem}
.strain-table thead th{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:500}
.strain-table tbody th{font-weight:500}
.strain-table td{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary)}
.strain-table tr:last-child th,.strain-table tr:last-child td{border-bottom:none}

.footer{padding:40px 0;text-align:center;border-top:1px solid var(--border)}
.footer-name{font-family:var(--font-display);font-size:1.2rem;margin-bottom:12px}
.disclaimer{font-size:.75rem;color:var(--text-muted);line-height:1.6;max-width:720px;margin:0 auto 10px}

@media(max-width:600px){
  .nav{padding:0 16px}
  .nav-logo{font-size:1.15rem}
  .nav-links{gap:0}
  .nav-links a{padding:6px 7px;font-size:.7rem}
  .container{padding:0 16px}
  .meter{width:84px}
  .strain-table th,.strain-table td{padding:10px}
  .strain-table th:nth-child(4),.strain-table td:nth-child(4){display:none}
}