/* ╔══════════════════════════════════════════════════════════════╗
   ║  CannBus Market Report — Stylesheet + HTML Structure Guide  ║
   ║  Version: v05-annotated                                      ║
   ║                                                              ║
   ║  This file is the SINGLE SOURCE OF TRUTH for both:          ║
   ║    1. CSS styling (all component rules below)                ║
   ║    2. HTML structure (⚙ STRUCTURE RULE comments embedded     ║
   ║       above each component section)                          ║
   ║                                                              ║
   ║  HOW TO USE:                                                 ║
   ║    - Attach this file as the stylesheet in your report HTML  ║
   ║    - Read the ⚙ STRUCTURE RULE comment above each CSS        ║
   ║      section to know the exact HTML skeleton required        ║
   ║    - ONLY use class names defined in this file               ║
   ║    - Do NOT invent new class names                           ║
   ║                                                              ║
   ║  VALIDATION: Run audit_html.py on any generated report to    ║
   ║  verify structural compliance before delivery.               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ============================================================
   CannBus Market Report — Stylesheet (v05)
   Base styles (v04) + merged "decision intelligence" components
   File: cannbus-market-report.css
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --black:        #0D0F0C;
  --green-deep:   #1A3A2A;
  --green-mid:    #2E6B4F;
  --green-bright: #3FA66E;
  --green-light:  #D4EDE1;
  --gold:         #C8A84B;
  --gold-light:   #F5EDCE;
  --cream:        #F8F6F0;
  --white:        #FFFFFF;
  --muted:        #6B7280;
  --border:       #E2E8E4;
  --alert:        #C0392B;
  --alert-bg:     #FDEEEC;

  --opp:          #B5572B;
  --opp-bg:       #FBEAE0;
  --opp-light:    #F7D9C8;

  --status-medical:       #4A7FB5;
  --status-medical-bg:    #E4EDF6;
  --status-adultmed:      #3FA66E;
  --status-adultmed-bg:   #D4EDE1;
  --status-prohibited:    #9B9B9B;
  --status-prohibited-bg: #ECECEC;

  /* confidence badges (new in v05) */
  --conf-high:    #2E6B4F;
  --conf-high-bg: #D4EDE1;
  --conf-med:     #8a6f30;
  --conf-med-bg:  #F5EDCE;
  --conf-low:     #9b2335;
  --conf-low-bg:  #fde8e8;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --sidebar-w: 240px;
  --topbar-h:  56px;
  --adminbar-h: 40px;
  --progress-h: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--cream); color: var(--black); font-size: 15px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — FOOTER
   ❌ WRONG: class="report-footer"
   ✅ RIGHT: <footer class="site-footer">

   HTML SKELETON:
   <footer class="site-footer">
     <div class="footer-grid">
       <div class="footer-brand">
         <div class="footer-brand-name">CannBus</div>
         <p>[Tagline]</p>
       </div>
       <div class="footer-col"><h5>Market Reports</h5><a href="#">[State]</a></div>
       <div class="footer-col"><h5>Directory</h5> ... </div>
       <div class="footer-col"><h5>Platform</h5> ... </div>
     </div>
     <div class="footer-bottom">
       <span>© 2026 CannBus — cannbus.org</span>
       <div class="footer-legal"><a href="#">Privacy</a> ...</div>
     </div>
   </footer>
══════════════════════════════════════════════════════════════ */
/* ── ADMIN BAR / SITE HEADER / FOOTER ───────────────── */
.wagtail-adminbar { position: fixed; top: 0; left: 0; right: 0; height: var(--adminbar-h); background: var(--black); color: #ccc; font-size: 12px; font-family: var(--font-mono); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 1000; border-bottom: 2px solid var(--green-bright); }
.adminbar-left { display: flex; align-items: center; gap: 16px; }
.adminbar-logo { color: var(--green-bright); font-weight: 500; letter-spacing: 0.05em; }
.adminbar-sep { color: #444; }
.adminbar-badge { background: var(--green-mid); color: white; font-size: 10px; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.08em; }
.adminbar-right { display: flex; align-items: center; gap: 12px; }
.adminbar-btn { background: var(--green-mid); color: white; border: none; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-family: var(--font-mono); cursor: pointer; transition: background 0.2s; }
.adminbar-btn:hover { background: var(--green-bright); }
.adminbar-btn.secondary { background: transparent; border: 1px solid #444; color: #aaa; }
.adminbar-btn.secondary:hover { border-color: var(--green-bright); color: var(--green-bright); }

.site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--green-deep); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 900; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.site-logo { font-family: var(--font-display); font-size: 22px; color: white; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.site-logo-leaf { width: 28px; height: 28px; background: var(--green-bright); border-radius: 50% 4px 50% 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; transition: all 0.2s; }
.site-nav a:hover, .site-nav a.active { color: white; background: rgba(255,255,255,0.12); }
.site-nav a.active { color: var(--green-bright); }
.site-nav-cta { background: var(--gold) !important; color: var(--black) !important; font-weight: 600 !important; margin-left: 8px; }
.site-nav-cta:hover { background: #d4b056 !important; }

.site-footer { background: var(--green-deep); color: rgba(255,255,255,0.65); padding: 40px 40px 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-brand-name { font-family: var(--font-display); font-size: 20px; color: white; margin-bottom: 8px; }
.footer-brand p { font-size: 12.5px; line-height: 1.65; max-width: 220px; }
.footer-col h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: white; margin-bottom: 12px; }
.footer-col a { display: block; font-size: 12.5px; color: rgba(255,255,255,0.55); text-decoration: none; margin-bottom: 7px; transition: color 0.15s; }
.footer-col a:hover { color: var(--green-bright); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-family: var(--font-mono); }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* ── PROGRESS BAR ───────────────────────────────────── */
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-bright), var(--gold)); width: 0%; transition: width 0.1s linear; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — LAYOUT SHELL
   The page MUST have exactly 3 direct children inside .layout-shell.
   Right-rail is NOT optional — omitting it breaks the 3-column layout.

   HTML SKELETON:
   <div class="layout-shell">
     <aside class="sidebar"> ... </aside>
     <main class="main-content"> ... </main>
     <aside class="right-rail"> ... </aside>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── LAYOUT SHELL ───────────────────────────────────── */
.layout-shell { display: flex; padding-top: calc(var(--adminbar-h) + var(--topbar-h) + var(--progress-h)); }
.main-content { flex: 1; max-width: 900px; padding: 36px 40px 80px; min-width: 0; }

/* ── SIDEBAR ────────────────────────────────────────── */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: white; border-right: 1px solid var(--border); position: sticky; top: calc(var(--adminbar-h) + var(--topbar-h) + var(--progress-h)); height: calc(100vh - var(--adminbar-h) - var(--topbar-h) - var(--progress-h)); overflow-y: auto; padding: 20px 0; }
.sidebar-section { margin-bottom: 24px; }
.sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 16px 8px; }
.state-filter { margin: 0 12px 4px; }
.state-filter label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.state-filter select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: var(--font-body); background: var(--cream); color: var(--black); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.quarter-filter { margin: 0 12px 4px; }
.quarter-filter label { font-size: 11px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.quarter-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.quarter-btn { padding: 5px 4px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; font-family: var(--font-mono); background: white; color: var(--muted); cursor: pointer; text-align: center; transition: all 0.15s; }
.quarter-btn:hover { border-color: var(--green-bright); color: var(--green-mid); }
.quarter-btn.active { background: var(--green-deep); color: white; border-color: var(--green-deep); }

.toc-nav a { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; transition: all 0.15s; line-height: 1.3; }
.toc-nav a:hover { color: var(--green-mid); background: var(--green-light); border-left-color: var(--green-bright); }
.toc-nav a.active { color: var(--green-deep); font-weight: 600; border-left-color: var(--green-bright); background: var(--green-light); }
.toc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.5; }
.toc-lock { margin-left: auto; font-size: 11px; opacity: 0.6; }

.related-state { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12px; color: var(--muted); text-decoration: none; transition: color 0.15s; cursor: pointer; }
.related-state:hover { color: var(--green-mid); }
.state-flag { font-size: 16px; line-height: 1; }

.status-legend-item { display: flex; align-items: center; gap: 8px; padding: 4px 16px; font-size: 11.5px; color: var(--muted); }
.status-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.swatch-medical { background: var(--status-medical); }
.swatch-adultmed { background: var(--status-adultmed); }
.swatch-prohibited { background: var(--status-prohibited); }

/* ── ROLE TOGGLE ────────────────────────────────────── */
.role-toggle-block { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.role-toggle-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); flex-shrink: 0; }
.role-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.role-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--cream); font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all 0.15s; }
.role-tab:hover { border-color: var(--green-bright); color: var(--green-mid); }
.role-tab.active { background: var(--green-deep); color: white; border-color: var(--green-deep); }
.role-toggle-hint { font-size: 11.5px; color: var(--muted); margin-left: auto; font-style: italic; }

.report-section { position: relative; transition: opacity 0.2s; margin-bottom: 44px; scroll-margin-top: calc(var(--adminbar-h) + var(--topbar-h) + var(--progress-h) + 20px); }
.report-section.role-dim { opacity: 0.4; }
.role-tags { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.role-tag { font-size: 9.5px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; background: var(--green-light); color: var(--green-deep); }

/* ── BREAKING BLOCK ─────────────────────────────────── */
.breaking-block { background: var(--alert-bg); border: 1px solid #f5c6c0; border-left: 4px solid var(--alert); border-radius: 8px; padding: 14px 18px; margin: 0; display: flex; gap: 12px; align-items: flex-start; }
.breaking-icon { background: var(--alert); color: white; font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.08em; padding: 3px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
.breaking-content strong { display: block; font-size: 13px; font-weight: 600; color: var(--alert); margin-bottom: 3px; }
.breaking-content p { font-size: 13px; color: #7a2c25; line-height: 1.5; }

/* ── REPORT HEADER ──────────────────────────────────── */
.report-header { border-bottom: 2px solid var(--green-light); padding-bottom: 28px; margin-bottom: 24px; }
.report-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.eyebrow-tag { font-size: 11px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.tag-status-adultmed { background: var(--status-adultmed-bg); color: var(--green-deep); }
.tag-status-medical { background: var(--status-medical-bg); color: #2d4f73; }
.tag-status-prohibited { background: var(--status-prohibited-bg); color: #5a5a5a; }
.tag-quarter { background: var(--black); color: white; }
.tag-refresh { background: var(--gold-light); color: #7a6020; }

.report-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 10px; }
.report-title-block { flex: 1; }
.report-title { font-family: var(--font-display); font-size: 38px; line-height: 1.15; color: var(--green-deep); margin-bottom: 6px; }
.state-nickname { font-size: 13px; font-style: italic; color: var(--muted); font-family: var(--font-display); }
.report-subtitle { font-size: 16px; color: var(--muted); margin: 14px 0 16px; max-width: 620px; }
.report-meta { display: flex; align-items: center; gap: 20px; font-size: 12px; color: var(--muted); font-family: var(--font-mono); flex-wrap: wrap; }
.meta-item { display: flex; align-items: center; gap: 5px; }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }

/* ── STATE MAP ──────────────────────────────────────── */
.state-map-block { flex-shrink: 0; width: 200px; text-align: center; }
.us-map-wrap { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.us-map-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.state-symbol { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--green-mid); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — KEY TAKEAWAYS BLOCK
   #takeaways uses .takeaways-block, NOT a .section-header.

   HTML SKELETON:
   <section class="report-section" id="takeaways">
     <div class="takeaways-block">
       <div class="takeaways-header">
         <div class="takeaways-icon">⚡</div>
         <div class="takeaways-title">Key Takeaways — [Quarter]</div>
         <div class="takeaways-sub">[N] things to know before you read on</div>
       </div>
       <div class="takeaways-list">
         <div class="takeaway-item">
           <div class="takeaway-num">01</div>
           <div class="takeaway-text"><strong>[bold lead]</strong> — [detail]</div>
         </div>
       </div>
     </div>
   </section>
══════════════════════════════════════════════════════════════ */
/* ── KEY TAKEAWAYS ──────────────────────────────────── */
.takeaways-block { background: var(--green-deep); border-radius: 14px; padding: 22px 26px; margin-bottom: 24px; color: white; position: relative; overflow: hidden; }
.takeaways-block::before { content: ''; position: absolute; top: -40%; right: -10%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(63,166,110,0.35), transparent 70%); border-radius: 50%; }
.takeaways-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; position: relative; z-index: 1; }
.takeaways-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--green-bright); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.takeaways-title { font-family: var(--font-display); font-size: 20px; }
.takeaways-sub { font-size: 11px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); letter-spacing: 0.06em; margin-left: auto; }
.takeaways-list { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.takeaway-item { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 12px 14px; }
.takeaway-num { font-family: var(--font-display); font-size: 18px; color: var(--green-bright); flex-shrink: 0; min-width: 22px; }
.takeaway-text { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.92); }
.takeaway-text a { color: var(--gold); text-decoration: none; font-weight: 600; }
.takeaway-text a:hover { text-decoration: underline; }
.takeaway-text strong { color: white; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — KEY DECISION SUMMARY
   id="decision", section-number="—". Uses decision-summary-grid (2×2 cards).
   ❌ WRONG: class="decision-grid"
   ✅ RIGHT: class="decision-summary-grid"

   HTML SKELETON:
   <section class="report-section" id="decision" data-roles="...">
     <div class="section-header">
       <span class="section-number">—</span>
       <h2 class="section-title">Key Decision Summary</h2>
       <div class="role-tags"><span class="role-tag">All Roles</span></div>
     </div>
     <div class="decision-summary-grid">
       <div class="decision-card">
         <div class="decision-kicker">Best Opportunity</div>
         <strong>[Headline]</strong>
         <p>[Description]</p>
       </div>
       <!-- repeat for Main Risk, Primary Audience, Recommended Action -->
     </div>
     <div class="so-what-box">
       <div class="so-what-title">So what?</div>
       <p>[Synthesis paragraph]</p>
     </div>
   </section>
══════════════════════════════════════════════════════════════ */
/* ── KEY DECISION SUMMARY (new in v05) ─────────────── */
.decision-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.decision-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.decision-kicker { font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-bright); margin-bottom: 6px; }
.decision-card strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--green-deep); margin-bottom: 6px; line-height: 1.3; }
.decision-card p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.so-what-box { background: var(--gold-light); border-left: 4px solid var(--gold); border-radius: 8px; padding: 16px 20px; margin-top: 16px; }
.so-what-title { font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8a6f30; margin-bottom: 6px; }
.so-what-box p { font-size: 13.5px; line-height: 1.65; color: #5a4a1a; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — STAT GRID (4 cards, sits between #decision and #overview)
   NOT a .report-section — it's a free-standing div.
   Card color modifiers: green, gold, mid, deep.

   HTML SKELETON:
   <div class="stat-grid">
     <div class="stat-card green">
       <div class="stat-value">$1.16B</div>
       <div class="stat-label">Total Sales (2025)</div>
       <div class="stat-delta delta-up">▲ 11.5% vs 2024</div>
       <div class="stat-foot">Source: [Name], [Date]</div>
     </div>
     <!-- repeat x4; delta classes: delta-up / delta-down / delta-flat -->
   </div>
══════════════════════════════════════════════════════════════ */
/* ── STAT GRID ──────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; }
.stat-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 18px 16px; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.stat-card.green::before { background: var(--green-bright); }
.stat-card.gold::before { background: var(--gold); }
.stat-card.deep::before { background: var(--green-deep); }
.stat-card.mid::before { background: var(--green-mid); }
.stat-value { font-family: var(--font-display); font-size: 28px; color: var(--green-deep); line-height: 1; margin-bottom: 4px; }
.stat-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-delta { margin-top: 8px; font-size: 11px; font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.delta-up { color: var(--green-mid); }
.delta-down { color: var(--alert); }
.delta-flat { color: var(--muted); }
.sparkline { flex-shrink: 0; }
.stat-foot { font-size: 10px; color: var(--muted); margin-top: 6px; font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — SECTION HEADER (used by sections 01–18)
   Exact child order: span.section-number → h2.section-title → div.role-tags
   ❌ WRONG: <h3>, nested divs around number+title, class="section-badge"
   ✅ RIGHT: exactly the pattern below

   HTML SKELETON:
   <div class="section-header">
     <span class="section-number">01</span>
     <h2 class="section-title">Market Overview</h2>
     <div class="role-tags">
       <span class="role-tag">Retailer</span>
       <span class="role-tag">Investor</span>
     </div>
   </div>

   For gated (Members Only) sections, add inside role-tags:
     <span class="section-lock-badge">🔒 Members Only</span>
══════════════════════════════════════════════════════════════ */
/* ── SECTION HEADER ─────────────────────────────────── */
.section-header { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.section-number { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--green-bright); padding-bottom: 2px; }
.section-title { font-family: var(--font-display); font-size: 24px; color: var(--green-deep); line-height: 1.2; }

/* ── RICH TEXT ──────────────────────────────────────── */
.rich-text p { margin-bottom: 14px; color: #2d3748; line-height: 1.75; font-size: 14.5px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ol, .rich-text ul { margin: 0 0 14px 22px; color: #2d3748; font-size: 14.5px; line-height: 1.75; }
.rich-text ol li, .rich-text ul li { margin-bottom: 6px; }
.rich-text a { color: var(--green-mid); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — DATA TABLE BLOCK
   Wrapper = div.data-table-block > div.data-table-header + table.data-table

   DATA CONFIDENCE TABLE headers (section #signals, section-number 15):
     Data Point | Source Type | As-of Date | Confidence | How We Use It
   ❌ WRONG: Section | Field | Status | Value | As-of
   ❌ NEVER put block IDs in the HTML (stat_grid_block, demographics_block, etc.)
   ✅ "Data Point" column = human-readable description ("Total cannabis sales 2025")
   ✅ Confidence column = <span class="badge badge-high/medium/low">High/Medium/Low</span>

   HTML SKELETON:
   <div class="data-table-block">
     <div class="data-table-header">
       [Table Title]
       <span class="header-note">[Source or note]</span>
     </div>
     <table class="data-table">
       <tr><th>Col 1</th><th>Col 2</th></tr>
       <tr><td>value</td><td class="num">$1.16B</td></tr>
     </table>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── DATA TABLE ─────────────────────────────────────── */
.data-table-block { background: white; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 20px 0; }
.data-table-header { background: var(--green-deep); color: white; padding: 12px 20px; font-size: 12px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.data-table-header .header-note { font-size: 10px; color: rgba(255,255,255,0.55); text-transform: none; letter-spacing: 0; font-style: italic; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--green-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-deep); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table td { padding: 10px 16px; font-size: 13.5px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: #fafcfb; }
.data-table .num { font-family: var(--font-mono); font-size: 13px; }
.data-table .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-active { background: var(--green-light); color: var(--green-deep); }
.badge-limited { background: var(--gold-light); color: #7a6020; }
.badge-capped { background: #fde8e8; color: #9b2335; }

/* confidence badges — new in v05 */
.badge-high { background: var(--conf-high-bg); color: var(--conf-high); }
.badge-medium { background: var(--conf-med-bg); color: var(--conf-med); }
.badge-low { background: var(--conf-low-bg); color: var(--conf-low); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 20px 0; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — CALLOUT BLOCKS
   Modifier classes change the colour:
     (none)       → green border  → Analyst Note, Policy Watch
     opportunity  → amber/orange  → CannBus Opportunity Signal
     blue         → blue          → Regional Outlook, For CannBus Members
     disclaimer   → muted         → Data Note, Methodology, How to Read

   HTML SKELETON:
   <div class="callout-block [modifier]">
     <div class="callout-label">[Label e.g. "Analyst Note"]</div>
     <p>[Content]</p>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── CALLOUTS ───────────────────────────────────────── */
.callout-block { background: var(--green-light); border-left: 4px solid var(--green-bright); border-radius: 8px; padding: 16px 20px; margin: 20px 0; }
.callout-block.blue { background: var(--status-medical-bg); border-left-color: var(--status-medical); }
.callout-label { font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 6px; }
.callout-block.blue .callout-label { color: #2d4f73; }
.callout-block p { font-size: 13.5px; line-height: 1.65; color: var(--green-deep); }
.callout-block.blue p { color: #2d4f73; }

.callout-block.opportunity { background: var(--opp-bg); border-left: 4px solid var(--opp); }
.callout-block.opportunity .callout-label { color: var(--opp); }
.callout-block.opportunity p { color: #7a3a1c; }
.callout-block.opportunity .opp-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--opp); text-decoration: none; border-bottom: 1px solid var(--opp); }
.callout-block.opportunity .opp-link:hover { color: #8c4520; }

/* disclaimer callout — new in v05 */
.callout-block.disclaimer { background: #F1F2F4; border-left: 4px solid var(--muted); }
.callout-block.disclaimer .callout-label { color: var(--muted); }
.callout-block.disclaimer p { color: #4a5568; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — BAR CHARTS (demographics, supply, consumer demand)
   ❌ WRONG: trend-bar, trend-label, trend-value, trend-note, chart-grid
   ✅ RIGHT: age-row / age-track / age-fill / age-label (for horizontal bars)
   For a multi-chart row: wrap in <div class="two-col"> (not "chart-grid")

   BAR CHART HTML SKELETON:
   <div class="age-bars">
     <div class="age-row">
       <span class="age-label">Label</span>
       <div class="age-track">
         <div class="age-fill bar-green" style="width:63%"><span>63%</span></div>
       </div>
     </div>
   </div>

   Available bar fill color classes:
     bar-green  bar-bright  bar-gold  bar-rose  bar-blue
     bar-slate  bar-amber   bar-deep  bar-mid   bar-light

   SALES TREND (market overview) uses: trend-row > trend-cell > trend-q + trend-v + trend-t
══════════════════════════════════════════════════════════════ */
/* ── CHART BLOCKS ───────────────────────────────────── */
.chart-block { background: white; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 20px 0; }
.chart-header { padding: 14px 20px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.chart-title { font-size: 13px; font-weight: 600; color: var(--black); }
.chart-period { font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.chart-body { padding: 16px 20px; }

.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { font-size: 12px; color: var(--muted); min-width: 90px; text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; background: var(--border); border-radius: 3px; height: 22px; position: relative; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; display: flex; align-items: center; padding-left: 8px; }
.bar-fill span { font-size: 11px; font-family: var(--font-mono); font-weight: 600; color: white; }
.bar-green { background: var(--green-mid); }
.bar-bright { background: var(--green-bright); }
.bar-gold { background: var(--gold); }
.bar-deep { background: var(--green-deep); }
.bar-light { background: #a8d5be; }
.bar-blue { background: var(--status-medical); }
.bar-rose { background: #B5708A; }
.bar-amber { background: #D9A441; }
.bar-slate { background: #7C8B99; }

.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut-svg { flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.trend-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.trend-cell { text-align: center; padding: 10px; background: var(--cream); border-radius: 8px; }
.trend-q { font-size: 10px; font-family: var(--font-mono); color: var(--muted); margin-bottom: 4px; }
.trend-v { font-family: var(--font-display); font-size: 20px; color: var(--green-deep); }
.trend-t { font-size: 10px; color: var(--muted); }

/* ── LICENSE GRID ───────────────────────────────────── */
.license-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.license-card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.license-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 6px; }
.license-count { font-family: var(--font-display); font-size: 26px; color: var(--green-deep); line-height: 1; }
.license-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.license-bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 10px; }
.license-bar-fill { height: 100%; border-radius: 2px; background: var(--green-bright); }

/* ── OUTLOOK LIST ───────────────────────────────────── */
.outlook-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.outlook-item { display: flex; gap: 14px; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.outlook-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.icon-up { background: var(--green-light); }
.icon-risk { background: #fde8e8; }
.icon-neutral { background: var(--gold-light); }
.outlook-text strong { display: block; font-size: 13px; margin-bottom: 3px; color: var(--black); }
.outlook-text p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── DEMOGRAPHICS ───────────────────────────────────── */
.demo-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 20px 0; }
.age-bars, .race-bars { display: flex; flex-direction: column; gap: 9px; }
.age-row { display: flex; align-items: center; gap: 10px; }
.age-label { font-size: 11.5px; color: var(--muted); min-width: 56px; font-family: var(--font-mono); }
.age-track { flex: 1; background: var(--border); border-radius: 3px; height: 18px; overflow: hidden; }
.age-fill { height: 100%; display: flex; align-items: center; padding-left: 8px; border-radius: 3px; }
.age-fill span { font-size: 10.5px; font-family: var(--font-mono); color: white; font-weight: 600; }
.demo-stat-list { display: flex; flex-direction: column; gap: 10px; }
.demo-stat { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.demo-stat-label { font-size: 12px; color: var(--muted); }
.demo-stat-val { font-family: var(--font-display); font-size: 18px; color: var(--green-deep); }
.race-row .age-label { min-width: 132px; text-align: left; font-family: var(--font-body); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — NEIGHBOR CARDS
   Status modifier maps to legal status:
     status-adultmed   → Adult-Use + Medical
     status-medical    → Medical Only
     status-prohibited → Prohibited / Limited
   Apply SAME class to both the card and the nested .neighbor-status span.

   HTML SKELETON:
   <div class="neighbor-grid">
     <div class="neighbor-card status-adultmed">
       <div class="neighbor-name">New York</div>
       <span class="neighbor-status status-adultmed">Adult-Use + Medical</span>
       <p class="neighbor-note">[Regional impact note]</p>
     </div>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── NEIGHBORING STATES ─────────────────────────────── */
.neighbor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.neighbor-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px; border-top: 4px solid var(--border); }
.neighbor-card.status-medical { border-top-color: var(--status-medical); }
.neighbor-card.status-adultmed { border-top-color: var(--status-adultmed); }
.neighbor-card.status-prohibited { border-top-color: var(--status-prohibited); }
.neighbor-name { font-family: var(--font-display); font-size: 17px; color: var(--black); margin-bottom: 4px; }
.neighbor-status { display: inline-block; font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; margin-bottom: 8px; }
.neighbor-status.status-medical { background: var(--status-medical-bg); color: #2d4f73; }
.neighbor-status.status-adultmed { background: var(--status-adultmed-bg); color: var(--green-deep); }
.neighbor-status.status-prohibited { background: var(--status-prohibited-bg); color: #5a5a5a; }
.neighbor-note { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — STATE INCENTIVES CARDS
   Available incentive-type classes for the badge:
     type-fee   → Fee Relief
     type-tax   → Tax Relief / Credit
     type-grant → Grant / Workforce
     type-loan  → Loan Access

   HTML SKELETON:
   <div class="incentive-grid">
     <div class="incentive-card">
       <div class="incentive-top">
         <span class="incentive-name">Social Equity Fee Reduction</span>
         <span class="incentive-type type-fee">Fee Relief</span>
       </div>
       <p>[Description of who qualifies and what it provides]</p>
     </div>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── STATE INCENTIVES ───────────────────────────────── */
.incentive-grid { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.incentive-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.incentive-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.incentive-name { font-family: var(--font-display); font-size: 16px; color: var(--green-deep); }
.incentive-type { font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; }
.type-tax { background: var(--gold-light); color: #8a6f30; }
.type-grant { background: var(--green-light); color: var(--green-deep); }
.type-fee { background: var(--status-medical-bg); color: #2d4f73; }
.type-loan { background: #f0e6f6; color: #6b3f8c; }
.incentive-card p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.county-rank { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 24px; display: inline-block; }
.county-bar-mini { display: inline-block; height: 6px; border-radius: 3px; background: var(--green-bright); vertical-align: middle; margin-left: 8px; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — GATED SECTIONS (#costbench, #vendorsignal)
   .gated-wrap MUST contain BOTH .gated-content AND .gated-overlay.
   ❌ WRONG: only .gated-content (blurred but no lock screen visible)
   ❌ WRONG: class="lock-icon" (use gated-lock-icon)

   HTML SKELETON:
   <div class="gated-wrap">
     <div class="gated-content">
       [blurred data table or placeholder content]
     </div>
     <div class="gated-overlay">
       <div class="gated-lock-icon">🔒</div>
       <div class="gated-title">Unlock [Section Name]</div>
       <div class="gated-sub">[Members CTA text]</div>
       <div class="gated-cta-row">
         <button class="gated-btn-primary">Join CannBus →</button>
         <button class="gated-btn-secondary">See Member Benefits</button>
       </div>
     </div>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── MEMBER-GATED SECTIONS ──────────────────────────── */
.gated-wrap { position: relative; border-radius: 10px; overflow: hidden; margin: 20px 0; }
.gated-content { filter: blur(5px); -webkit-filter: blur(5px); user-select: none; pointer-events: none; }
.gated-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,246,240,0.2) 0%, rgba(248,246,240,0.92) 35%, rgba(248,246,240,0.97) 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 28px 24px; text-align: center; }
.gated-lock-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--green-deep); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
.gated-title { font-family: var(--font-display); font-size: 19px; color: var(--green-deep); margin-bottom: 6px; }
.gated-sub { font-size: 13px; color: var(--muted); max-width: 420px; margin-bottom: 16px; line-height: 1.6; }
.gated-cta-row { display: flex; gap: 10px; }
.gated-btn-primary { background: var(--gold); color: var(--black); border: none; padding: 10px 22px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.gated-btn-secondary { background: transparent; color: var(--green-deep); border: 1px solid var(--border); padding: 10px 22px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.section-lock-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 10px; background: var(--green-deep); color: var(--gold); }

/* ── MARKET SIGNALS GRID (new in v05) ──────────────── */
.signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.signal-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.signal-icon { font-size: 20px; margin-bottom: 8px; }
.signal-card strong { display: block; font-size: 13.5px; color: var(--green-deep); margin-bottom: 4px; }
.signal-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — SCENARIO SNAPSHOT (section #scenario, num 16)
   ❌ WRONG: class="snapshot-block"
   ✅ RIGHT: class="snapshot-grid"
   --score CSS variable = score as % (e.g. 7.4/10 → --score:74%)

   HTML SKELETON:
   <div class="snapshot-grid">
     <div class="score-ring-wrap">
       <div class="score-ring" style="--score:74%">
         <span>7.4</span>
       </div>
       <div class="score-caption">CannBus Market Snapshot / 10</div>
     </div>
     <div class="factor-list">
       <div class="factor-row">
         <div class="factor-label">Market size & growth</div>
         <div class="factor-bar">
           <div class="factor-fill" style="width:88%"></div>
         </div>
         <div class="factor-score">8.8</div>
       </div>
     </div>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── SCENARIO FORECAST / OPPORTUNITY SNAPSHOT (new) ─── */
.snapshot-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin: 16px 0; align-items: stretch; }
.score-ring-wrap { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.score-ring {
  --score: 0%;
  width: 110px; height: 110px; border-radius: 50%;
  background: conic-gradient(var(--green-bright) var(--score), var(--border) var(--score));
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 10px;
}
.score-ring::before { content: ''; position: absolute; inset: 10px; background: white; border-radius: 50%; }
.score-ring span { position: relative; font-family: var(--font-display); font-size: 26px; color: var(--green-deep); z-index: 1; }
.score-caption { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.factor-list { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.factor-row { display: flex; align-items: center; gap: 10px; }
.factor-label { font-size: 12px; color: var(--muted); min-width: 130px; flex-shrink: 0; }
.factor-bar { flex: 1; background: var(--border); border-radius: 3px; height: 10px; overflow: hidden; }
.factor-fill { height: 100%; background: var(--green-bright); border-radius: 3px; }
.factor-score { font-family: var(--font-mono); font-size: 12px; color: var(--green-deep); min-width: 28px; text-align: right; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — MEMBER VALUE BAND + END-OF-REPORT STACK
   ❌ WRONG: class="value-cols"  ❌ WRONG: <section> wrapper around MVB directly
   ✅ RIGHT: .member-value-band > .value-column + .value-column.premium
   The whole end-of-report block lives in .end-of-report-stack (a div, not section).

   HTML SKELETON:
   <div class="end-of-report-stack">
     <section class="report-section">  ← section wraps the MVB
       <div class="section-header"> ... </div>
       <div class="member-value-band">
         <div class="value-column">
           <h4>Included in This Report</h4>
           <ul><li>...</li></ul>
         </div>
         <div class="value-column premium">
           <h4>CannBus Membership Adds</h4>
           <ul><li>...</li></ul>
         </div>
       </div>
     </section>
     <div class="breaking-block">
       <div class="breaking-icon">UPDATE</div>
       <div class="breaking-content">
         <strong>[Update headline]</strong>
         <p>[What's tracked for next refresh]</p>
       </div>
     </div>
     <div class="review-banner">
       <div class="review-text">
         <strong>Quarterly Refresh Scheduled</strong>
         <span>This report updates every 90 days. Next refresh: [Date].</span>
       </div>
       <div class="review-date">
         <div class="date-val">[Date]</div>
         <div class="date-label">Next Review Date</div>
       </div>
     </div>
   </div>
══════════════════════════════════════════════════════════════ */
/* ── MEMBER VALUE BAND (new in v05) ─────────────────── */
.member-value-band { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.value-column { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.value-column.premium { background: var(--green-deep); border-color: var(--green-deep); color: white; }
.value-column h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 10px; color: var(--green-deep); }
.value-column.premium h4 { color: var(--gold); }
.value-column ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.value-column li { font-size: 12.5px; color: #2d3748; padding-left: 18px; position: relative; line-height: 1.5; }
.value-column li::before { content: '✓'; position: absolute; left: 0; color: var(--green-bright); font-weight: 700; }
.value-column.premium li { color: rgba(255,255,255,0.9); }
.value-column.premium li::before { color: var(--gold); }

/* ── SOURCES & METHODOLOGY (new in v05) ─────────────── */
.source-list ol { margin: 12px 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.source-list li { font-size: 12.5px; color: #2d3748; line-height: 1.6; }
.source-list a { color: var(--green-mid); font-weight: 600; text-decoration: none; word-break: break-word; }
.source-list a:hover { text-decoration: underline; }
.methodology-note { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; padding: 12px 14px; background: var(--cream); border-radius: 8px; }

/* ── REVIEW / REFRESH BANNER ────────────────────────── */
.review-banner { background: var(--green-deep); color: white; border-radius: 10px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; margin: 0; flex-wrap: wrap; gap: 12px; }
.review-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.review-text span { font-size: 12px; color: rgba(255,255,255,0.65); font-family: var(--font-mono); }
.review-date { text-align: right; font-family: var(--font-mono); }
.review-date .date-val { font-size: 18px; font-weight: 600; color: var(--green-bright); }
.review-date .date-label { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }

.end-of-report-stack { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.end-of-report-stack .breaking-block { margin: 0; }

/* ══════════════════════════════════════════════════════════════
   ⚙  STRUCTURE RULE — RIGHT RAIL (3rd column — MANDATORY, never omit)
   ❌ WRONG: omitting this column entirely (produces 2-col layout)

   HTML SKELETON:
   <aside class="right-rail">
     <div class="member-progress-card">
       <div class="rail-title">Report Access</div>
       <p>You're viewing the free report — 16 of 18 sections unlocked.</p>
       <div class="member-progress-bar">
         <div class="member-progress-fill" style="width:89%;"></div>
       </div>
       <button class="download-btn">🔓 Unlock Full Report</button>
     </div>
     <div class="rail-card">
       <div class="rail-title">[State] Snapshot</div>
       <div class="rail-stat">
         <div class="rail-stat-val">[Value]</div>
         <div class="rail-stat-label">[Label]</div>
       </div>
     </div>
     <div class="cta-card">
       <h4>List Your Business in [State]</h4>
       <p>[CTA text]</p>
       <button>Join CannBus →</button>
     </div>
     <div class="rail-card">
       <div class="rail-title">Export Report</div>
       <button class="download-btn">⬇ Download PDF</button>
       <button class="download-btn">📊 Export Data (CSV)</button>
     </div>
   </aside>
══════════════════════════════════════════════════════════════ */
/* ── RIGHT RAIL ─────────────────────────────────────── */
.right-rail { width: 220px; flex-shrink: 0; padding: 36px 16px; position: sticky; top: calc(var(--adminbar-h) + var(--topbar-h) + var(--progress-h)); height: calc(100vh - var(--adminbar-h) - var(--topbar-h) - var(--progress-h)); overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.rail-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.rail-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.rail-stat { margin-bottom: 12px; }
.rail-stat:last-child { margin-bottom: 0; }
.rail-stat-val { font-family: var(--font-display); font-size: 22px; color: var(--green-deep); }
.rail-stat-label { font-size: 11px; color: var(--muted); }
.cta-card { background: var(--green-deep); border-radius: 10px; padding: 18px 16px; color: white; }
.cta-card h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; line-height: 1.3; }
.cta-card p { font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 14px; line-height: 1.5; }
.cta-card button { width: 100%; background: var(--gold); color: var(--black); border: none; padding: 9px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.download-btn { width: 100%; background: white; border: 1px solid var(--border); color: var(--black); padding: 9px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; transition: border-color 0.15s; }
.download-btn:hover { border-color: var(--green-bright); }

.member-progress-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.member-progress-card .rail-title { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; }
.member-progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 10px 0; }
.member-progress-fill { height: 100%; width: 70%; background: linear-gradient(90deg, var(--green-bright), var(--gold)); border-radius: 4px; }
.member-progress-card p { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }

/* ── SCROLLBARS ─────────────────────────────────────── */
.sidebar::-webkit-scrollbar, .right-rail::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track, .right-rail::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, .right-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── RESPONSIVE (light pass, new in v05) ────────────── */
@media (max-width: 1100px) {
  .decision-summary-grid, .member-value-band, .snapshot-grid, .signal-grid { grid-template-columns: 1fr; }
  .neighbor-grid, .license-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── LSUM (Legal Summary) OVERRIDES ─────────────────────────────────────────
   These rules apply only to Legal Summary pages (nj_lsum.html etc.)
   They do NOT affect CannMIR market report pages.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. PENALTY SEVERITY BAR — right-rail fix
   Root cause: .age-track has overflow:hidden; in the 220px right-rail a
   33%-wide fill (~73px) is too narrow to display "Warning / CAP" inside.
   Fix: labels sit ABOVE each bar (flex-direction:column), never inside fill. */
.penalty-bar-wrap  { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.penalty-bar-row   { display:flex; flex-direction:column; gap:4px; }
.penalty-bar-label { display:flex; justify-content:space-between; align-items:baseline; gap:4px; flex-wrap:wrap; }
.penalty-bar-level { font-size:11.5px; font-weight:700; color:var(--green-deep); font-family:var(--font-body); }
.penalty-bar-text  { font-size:10px; color:var(--muted); font-family:var(--font-mono); white-space:normal; overflow-wrap:break-word; }
.penalty-bar-track { width:100%; height:10px; background:var(--border); border-radius:3px; overflow:hidden; }
.penalty-bar-fill  { height:100%; border-radius:3px; transition: width 0.3s ease; }
.penalty-bar-fill.minor       { background:var(--green-bright); width:33%; }
.penalty-bar-fill.significant { background:var(--gold);         width:66%; }
.penalty-bar-fill.egregious   { background:var(--alert);        width:100%; }

/* 2. HERO — extra top padding so title never hides behind stacked fixed bars
   Stack order: wagtail-adminbar (40px fixed) + tier-banner (37px fixed)
   + site-header (56px fixed) + progress-bar (4px fixed) = ~137px total.
   The lsum-hero flows in the document after these, so it doesn't need
   margin-top — but it needs enough padding-top that the h1 is comfortable
   and not cramped against the top edge on any viewport width. */
.lsum-hero { padding-top: 48px; margin-top: calc(var(--adminbar-h) + var(--topbar-h) + var(--progress-h) + 37px); }

/* 3. HERO TITLE — full visibility, no clipping, proper line height */
.lsum-hero h1 {
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal;
  line-height: 1.25;
  margin-bottom: 14px;
  font-size: 34px;
}

/* 4. HERO META TAGS — wrap cleanly, consistent gap */
.lsum-hero-meta { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; }

/* ============================================================
   END OF FILE
   ============================================================ */