:root { --bg:#101014; --bg2:#1c1c22; --panel:#22222a; --white:#f2f2f5; --grey:#969ba0;
        --red:#e23636; --green:#4aaa6c; --purple:#a874e2; }
* { margin:0; box-sizing:border-box; }
body { background:linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--white);
       font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh; }

nav { display:flex; align-items:center; gap:6px; padding:10px 16px; background:#0c0c10;
      border-bottom:3px solid var(--red); position:sticky; top:0; z-index:10; flex-wrap:wrap; }
nav img { width:46px; height:46px; margin-right:8px; }
nav .brand { font-weight:900; font-size:1.05rem; letter-spacing:.02em; margin-right:auto; }
nav a { color:var(--grey); text-decoration:none; font-weight:700; padding:10px 14px;
        border-radius:8px; }
nav a:hover { color:var(--white); background:var(--panel); }
nav a.active { color:var(--white); background:var(--red); }

.hero { position:relative; }
.hero img { display:block; width:100%; max-height:420px; object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0;
               background:linear-gradient(180deg,transparent 50%,var(--bg) 100%); }

.wrap { max-width:960px; margin:0 auto; padding:40px 16px; }
.center { text-align:center; }
h1 { font-size:clamp(1.8rem,5vw,2.8rem); margin-bottom:8px; }
h2 { font-size:1.5rem; margin:34px 0 14px; color:var(--purple); }
.tag { color:var(--purple); font-size:1.15rem; font-style:italic; }
.bar { width:200px; height:4px; background:var(--red); margin:24px auto; border-radius:2px; }
p.lead { color:var(--grey); font-size:1.08rem; line-height:1.65; max-width:680px; margin:0 auto 30px; }

a.btn { display:inline-block; background:var(--red); color:#fff; text-decoration:none;
        font-weight:800; font-size:1.1rem; padding:13px 32px; border-radius:40px; margin:6px; }
a.btn.ghost { background:transparent; border:2px solid var(--grey); color:var(--white); }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;
         margin:30px 0; text-align:left; }
.card { background:var(--panel); border-radius:12px; padding:20px; border-left:5px solid var(--red); }
.card h3 { color:var(--red); font-size:1.35rem; margin-bottom:6px; }
.card p { line-height:1.45; }
.card.green { border-color:var(--green); } .card.green h3 { color:var(--green); }
.card.purple { border-color:var(--purple); } .card.purple h3 { color:var(--purple); }

.episode { background:var(--panel); border-radius:12px; padding:22px; margin-bottom:16px;
           text-align:left; }
.episode .ep-num { color:var(--red); font-weight:900; letter-spacing:.06em; font-size:.9rem; }
.episode h3 { font-size:1.3rem; margin:6px 0 8px; }
.episode p { color:var(--grey); line-height:1.5; }
.episode .video { margin-top:14px; aspect-ratio:16/9; width:100%; border:0; border-radius:10px; }

footer { color:var(--grey); font-size:.85rem; line-height:1.6; padding:24px 16px 40px;
         border-top:1px solid #333; max-width:780px; margin:30px auto 0; text-align:center; }
footer a { color:var(--purple); }

/* "More" menu: <details> works on phones with no JavaScript */
nav details { position:relative; }
nav summary { list-style:none; cursor:pointer; color:var(--grey); font-weight:700;
              padding:10px 14px; border-radius:8px; }
nav summary::-webkit-details-marker { display:none; }
nav summary:hover, nav details[open] summary { color:var(--white); background:var(--panel); }
nav summary.active { color:var(--white); background:var(--red); }
nav .menu { position:absolute; right:0; top:46px; background:#0c0c10; border:1px solid #333;
            border-top:3px solid var(--red); border-radius:10px; padding:6px; min-width:190px;
            display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,.5); }
nav .menu a { padding:11px 14px; }

/* countdowns */
.countdown { font-family:Consolas,'Courier New',monospace; font-weight:800; font-size:1.25rem;
             color:var(--white); letter-spacing:.02em; margin-top:8px; }
.countdown.live { color:var(--green); }
.next-date { background:var(--panel); border-radius:12px; padding:14px 18px; margin:26px auto 0;
             max-width:640px; border:1px solid #333; text-align:center; }
.next-date .label { color:var(--grey); font-size:.85rem; font-weight:700; letter-spacing:.08em; }
.next-date .what { font-weight:700; margin-top:4px; }

/* headlines */
.headlines { list-style:none; padding:0; text-align:left; }
.headlines li { background:var(--panel); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.headlines a { color:var(--white); text-decoration:none; font-weight:700; line-height:1.4; }
.headlines a:hover { color:var(--purple); }
.headlines .meta { color:var(--grey); font-size:.85rem; margin-top:6px; }
.chip { display:inline-block; font-size:.75rem; font-weight:800; padding:2px 9px; border-radius:12px;
       background:#33334a; color:var(--white); margin-right:5px; }
.chip.federal { background:var(--purple); color:#0c0c10; }
.filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 22px; }
.filters button { background:var(--panel); color:var(--grey); border:1px solid #444; border-radius:20px;
                  padding:7px 14px; font-weight:700; cursor:pointer; }
.filters button.on { background:var(--red); color:#fff; border-color:var(--red); }

/* ask form */
form.ask { text-align:left; max-width:640px; margin:0 auto; }
form.ask label { display:block; font-weight:700; margin:16px 0 6px; }
form.ask input, form.ask select, form.ask textarea { width:100%; background:var(--panel); color:var(--white);
       border:1px solid #444; border-radius:10px; padding:12px; font:inherit; }
form.ask textarea { min-height:150px; resize:vertical; }
form.ask button { margin-top:20px; border:0; cursor:pointer; }
.note { color:var(--grey); font-size:.9rem; line-height:1.5; margin-top:10px; }

/* explainer articles */
article { text-align:left; max-width:720px; margin:0 auto; line-height:1.7; }
article h1 { margin-bottom:6px; }
article .dek { color:var(--grey); font-size:1.15rem; margin-bottom:24px; }
article h2 { margin:30px 0 10px; }
article p, article li { margin-bottom:12px; color:#dcdce2; }
article ul { padding-left:22px; }
article .box { background:var(--panel); border-left:5px solid var(--purple); border-radius:10px;
               padding:16px 18px; margin:22px 0; }
article .reviewed { color:var(--grey); font-size:.85rem; margin-top:30px; }

/* Shorts page: vertical 9:16 players in a grid */
.shorts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin-top:20px; }
.short { background:var(--panel); border-radius:12px; padding:12px; }
.short[hidden] { display:none; }
.short iframe { width:100%; aspect-ratio:9/16; border:0; border-radius:10px; display:block; }
.short h3 { font-size:1rem; margin:10px 0 4px; }
.short a { color:var(--purple); font-size:.9rem; }

/* site-wide federal hemp-ban countdown banner (injected by countdown.js) */
#hemp-banner { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 18px;
               padding:7px 14px; background:#1d1013; border-bottom:1px solid #3d1d24;
               color:var(--white); font-size:.88rem; text-decoration:none; }
#hemp-banner:hover { background:#26141a; }
#hemp-banner .hb-label { color:var(--red); font-weight:800; letter-spacing:.06em; }
#hemp-banner b { font-family:Consolas,'Courier New',monospace; }
#hemp-banner b.live { color:var(--green); }
#hemp-banner .hb-more { color:var(--purple); font-weight:700; }

/* election night page */
.el-card { background:var(--panel); border-radius:12px; padding:18px 20px; margin-top:18px; }
.el-card h2 { font-size:1.25rem; margin:4px 0 12px; }
.el-place { color:var(--red); font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.el-pending { background:#16161c; border:1px dashed #3a3a46; border-radius:10px; padding:12px; text-align:center;
              color:var(--grey); font-weight:700; }
.el-res { background:#16161c; border-radius:10px; padding:12px 14px; }
.el-row { display:grid; grid-template-columns:44px 1fr 64px; gap:10px; align-items:center; margin:6px 0; font-weight:800; }
.el-bar { height:14px; background:#2b2b35; border-radius:7px; overflow:hidden; }
.el-bar i { display:block; height:100%; }
.el-bar i.y { background:var(--green); } .el-bar i.n { background:var(--red); }
.el-row b { text-align:right; font-family:Consolas,'Courier New',monospace; }
.el-meta { color:var(--grey); font-size:.85rem; margin-top:6px; }
.el-call { margin-left:8px; font-weight:900; padding:2px 8px; border-radius:6px; }
.el-call.yes { background:#173a24; color:var(--green); } .el-call.no { background:#3a171c; color:var(--red); }
.el-yn { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 8px; }
.el-yn > div { background:#1a1a21; border-radius:10px; padding:10px 12px; }
.el-yn p { margin:6px 0 0; color:var(--grey); font-size:.92rem; line-height:1.45; }
.el-ctx { color:var(--grey); font-size:.92rem; line-height:1.5; }
@media (max-width:600px) { .el-yn { grid-template-columns:1fr; } }

/* "Is it legal in my state?" checker */
.chk-pick { max-width:420px; margin:20px auto 0; }
.chk-pick label { display:block; font-weight:800; margin-bottom:6px; }
.chk-pick select { width:100%; padding:12px; font-size:1.05rem; border-radius:10px; border:1px solid #3a3a46;
                   background:var(--panel); color:var(--white); }
.chk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:14px; }
.chk-card { background:var(--panel); border-radius:12px; padding:14px 16px; border-top:4px solid #3a3a46; }
.chk-card.ok { border-top-color:var(--green); } .chk-card.mid { border-top-color:var(--purple); }
.chk-card.bad { border-top-color:var(--red); }
.chk-head { color:var(--grey); font-size:.78rem; font-weight:800; letter-spacing:.08em; }
.chk-verdict { font-size:1.15rem; font-weight:900; margin:6px 0; }
.chk-card p { color:var(--grey); font-size:.92rem; line-height:1.45; margin:0; }

/* Texas bill tracker */
.bt-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.bt-tabs button { background:var(--panel); color:var(--grey); border:1px solid #3a3a46; border-radius:999px;
                  padding:9px 16px; font-weight:800; cursor:pointer; }
.bt-tabs button.on { background:var(--red); color:#fff; border-color:var(--red); }
.bt-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
.bt-stats div { background:var(--panel); border-radius:12px; padding:12px; text-align:center; }
.bt-stats b { display:block; font-size:1.7rem; }
.bt-stats span { color:var(--grey); font-size:.8rem; font-weight:700; }
.bt-tools { display:flex; gap:10px; margin:16px 0 6px; flex-wrap:wrap; }
.bt-tools input, .bt-tools select { flex:1 1 220px; padding:11px; border-radius:10px; border:1px solid #3a3a46;
                                    background:var(--panel); color:var(--white); font-size:.95rem; }
.bt-bill { background:var(--panel); border-radius:12px; padding:14px 16px; margin-top:12px; }
.bt-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bt-head a { color:var(--white); font-weight:900; font-size:1.1rem; text-decoration:none; }
.bt-head a:hover { color:var(--purple); }
.bt-st { font-size:.75rem; font-weight:900; padding:3px 9px; border-radius:6px; background:#2b2b35; color:var(--grey); }
.bt-st.law { background:#173a24; color:var(--green); } .bt-st.dead { background:#3a171c; color:var(--red); }
.bt-st.live { background:#2a1f3d; color:var(--purple); }
.bt-cap { margin:8px 0 10px; line-height:1.45; }
.bt-bar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bt-bar i { height:8px; border-radius:4px; background:#2b2b35; }
.bt-bar i.on { background:var(--purple); } .bt-bar i.x { background:#6b2a32; }
.bt-steps { display:flex; justify-content:space-between; color:var(--grey); font-size:.72rem; margin-top:4px; }
.bt-meta { color:var(--grey); font-size:.85rem; margin:8px 0 0; }
.bt-how li { margin:6px 0; line-height:1.5; }
@media (max-width:600px) { .bt-stats { grid-template-columns:repeat(2,1fr); } }
