/* Written guides (Oct 26, 2026).
   .sbx  = the "how this page works" card near the bottom of Home, Powder,
           Accuracy and Snowpack. Static HTML in each page, not filled in by JS.
   .gd-* = the three guide pages (snow-forecast-guide, snotel-guide, snow-glossary).
   Colors come only from each page's CSS variables, so white mode (theme-light.css
   redefines the variables) works without extra rules; the few hand-tuned light
   rules live in theme-light.css under "Written guides".
   The cards and articles carry data-units="off": they explain the site's rules in
   inches and °F, and units.js would otherwise turn the worked examples into cm. */

/* ── Explainer card ── */
.sbx { max-width: 820px; margin: 40px auto 28px; background: var(--bg-card, #1a2236); border: 1px solid var(--border, #2a3550);
  border-radius: 14px; padding: 24px 24px 18px; color: var(--text-primary, #f0f4ff); text-align: left; line-height: 1.65; }
.sbx-eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-cyan, #22d3ee); margin-bottom: 6px; }
.sbx h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.3; margin: 0 0 10px; color: var(--text-primary, #f0f4ff); }
.sbx h3 { font-size: 15px; font-weight: 800; margin: 18px 0 4px; color: var(--text-primary, #f0f4ff); }
.sbx p { font-size: 14.5px; color: var(--text-secondary, #8b9cc0); margin: 0 0 10px; }
.sbx p b, .sbx p strong { color: var(--text-primary, #f0f4ff); font-weight: 700; }
.sbx a { color: var(--accent-cyan, #22d3ee); font-weight: 700; text-decoration: none; }
.sbx a:hover { text-decoration: underline; }
.sbx-faq { margin-top: 16px; border-top: 1px solid var(--border, #2a3550); }
.sbx-faq details { border-bottom: 1px solid var(--border, #2a3550); }
.sbx-faq summary { cursor: pointer; list-style: none; padding: 12px 0 12px 22px; position: relative; font-size: 14.5px; font-weight: 700; color: var(--text-primary, #f0f4ff); }
.sbx-faq summary::-webkit-details-marker { display: none; }
.sbx-faq summary::before { content: '\25B8'; position: absolute; left: 2px; top: 12px; color: var(--accent-cyan, #22d3ee); }
.sbx-faq details[open] > summary::before { content: '\25BE'; }
.sbx-faq details p { padding: 0 0 4px 22px; }
.sbx-guides { margin-top: 16px; font-size: 13.5px; color: var(--text-muted, #8492b0); }
.sbx-guides a { white-space: nowrap; }
@media (max-width: 560px) {
  .sbx { padding: 20px 16px 14px; margin: 32px auto 22px; }
  .sbx h2 { font-size: 18px; }
  .sbx-guides a { white-space: normal; }
}

/* ── Guide pages ── */
.gd-hero { text-align: center; padding: 56px 22px 28px; max-width: 820px; margin: 0 auto; }
.gd-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sb-red, #EA2F4A); margin-bottom: 14px; }
.gd-hero h1 { font-size: 38px; font-weight: 900; line-height: 1.14; letter-spacing: -0.5px; color: var(--text-primary, #f0f4ff); }
.gd-hero p { margin-top: 16px; font-size: 17px; color: var(--text-secondary, #8b9cc0); line-height: 1.6; }
.gd-article { max-width: 760px; margin: 0 auto; padding: 0 22px 40px; color: var(--text-secondary, #8b9cc0); font-size: 16px; line-height: 1.7; }
.gd-article h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.3; color: var(--text-primary, #f0f4ff); margin: 34px 0 10px; }
.gd-article h3 { font-size: 17px; font-weight: 800; color: var(--text-primary, #f0f4ff); margin: 22px 0 6px; }
.gd-article p { margin: 0 0 14px; }
.gd-article ul, .gd-article ol { margin: 0 0 16px; padding-left: 22px; }
.gd-article li { margin: 0 0 8px; }
.gd-article b, .gd-article strong { color: var(--text-primary, #f0f4ff); font-weight: 700; }
.gd-article a { color: var(--accent-cyan, #22d3ee); font-weight: 700; text-decoration: none; }
.gd-article a:hover { text-decoration: underline; }
.gd-note { background: var(--bg-card, #1a2236); border: 1px solid var(--border, #2a3550); border-radius: 12px; padding: 16px 18px; margin: 22px 0; font-size: 15px; }
.gd-note p:last-child { margin-bottom: 0; }
.gd-tags { list-style: none; padding: 0 !important; }
.gd-tags li { display: flex; gap: 12px; align-items: baseline; }
.gd-tag { flex: 0 0 auto; display: inline-block; min-width: 92px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 3px 8px;
  border-radius: 6px; border: 1px solid var(--border, #2a3550); color: var(--text-primary, #f0f4ff); background: var(--bg-secondary, #111827); }
.gd-more { border-top: 1px solid var(--border, #2a3550); margin-top: 36px; padding-top: 18px; font-size: 15px; }
/* Glossary */
.gd-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0 !important; list-style: none; }
.gd-az li { margin: 0; }
.gd-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg-card, #1a2236); border: 1px solid var(--border, #2a3550); font-size: 14px; }
.gd-gloss { margin: 0; }
.gd-letter { font-size: 15px !important; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-cyan, #22d3ee) !important;
  border-bottom: 1px solid var(--border, #2a3550); padding-bottom: 6px; margin-top: 30px !important; scroll-margin-top: 72px; }
.gd-gloss dt { font-size: 16.5px; font-weight: 800; color: var(--text-primary, #f0f4ff); margin: 16px 0 3px; scroll-margin-top: 72px; }
.gd-gloss dd { margin: 0 0 6px; }
@media (max-width: 600px) {
  .gd-hero { padding: 40px 18px 22px; }
  .gd-hero h1 { font-size: 29px; }
  .gd-hero p { font-size: 15.5px; }
  .gd-article { padding: 0 18px 32px; font-size: 15.5px; }
  .gd-article h2 { font-size: 20px; }
}