/* State Research & Action Hub: builds on style.css tokens */
:root {
    --action-color: #10b981;
    --action-bg: rgba(16, 185, 129, 0.14);
    --region-color: #a78bfa;
    --nation-color: #60a5fa;
    --state-color: #f97316;
}

.glass-select.pulse { animation: rhPulse 1s ease 2; }
@keyframes rhPulse { 50% { box-shadow: 0 0 0 6px rgba(249,115,22,.35); border-color: #f97316; } }

.rh-main { max-width: 1320px; margin: 0 auto; padding: 2rem 1.5rem 4rem; width: 100%; flex: 1; }

/* ---------- hero ---------- */
.rh-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.rh-kicker { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--state-color); margin-bottom: .35rem; }
.rh-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.15; font-weight: 700;
    background: linear-gradient(120deg, #fff 0%, #cbd5e1 55%, #f97316 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rh-hero p { color: var(--text-secondary); max-width: 720px; margin-top: .45rem; }
.rh-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; font-size: .82rem;
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); white-space: nowrap; }
.rh-pill strong { color: var(--text-primary); }

/* ---------- header state picker ---------- */
.state-picker-wrap { display: flex; align-items: center; gap: .4rem; }
.state-picker-wrap i { color: var(--state-color); }

/* ---------- scope tabs ---------- */
.rh-scopes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.rh-scope { position: relative; display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: 16px; cursor: pointer;
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); font: inherit; text-align: left;
    transition: var(--transition); overflow: hidden; }
.rh-scope::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.rh-scope:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.rh-scope.active { border-color: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, transparent), var(--glass-bg)); }
.rh-scope.active::after { transform: scaleX(1); }
.rh-scope .ico { font-size: 1.35rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); flex-shrink: 0; }
.rh-scope b { display: block; font-size: 1rem; }
.rh-scope small { color: var(--text-secondary); font-size: .8rem; }
.rh-scope[data-scope="regional"] { --c: var(--region-color); }
.rh-scope[data-scope="state"] { --c: var(--state-color); }
.rh-scope[data-scope="national"] { --c: var(--nation-color); }

/* ---------- toolbar ---------- */
.rh-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding: .8rem; border-radius: 16px; margin-bottom: 1.4rem;
    background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); position: sticky; top: 76px; z-index: 50; }
.rh-search { flex: 1 1 320px; position: relative; }
.rh-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.rh-search input { width: 100%; padding: .75rem 1rem .75rem 2.6rem; border-radius: 12px; border: 1px solid var(--glass-border);
    background: rgba(0,0,0,.25); color: var(--text-primary); font: inherit; transition: var(--transition); }
.rh-search input:focus { outline: none; border-color: var(--state-color); box-shadow: 0 0 0 3px rgba(249,115,22,.18); }
.rh-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.rh-chip { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.03);
    color: var(--text-secondary); cursor: pointer; font: inherit; font-size: .85rem; transition: var(--transition); display: inline-flex; gap: .4rem; align-items: center; }
.rh-chip:hover { color: var(--text-primary); border-color: rgba(255,255,255,.2); }
.rh-chip.active { color: #fff; background: rgba(249,115,22,.16); border-color: rgba(249,115,22,.55); }
.rh-chip .n { font-size: .72rem; padding: 0 .4rem; border-radius: 999px; background: rgba(255,255,255,.08); }
.rh-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text-secondary); cursor: pointer; user-select: none; }
.rh-toggle input { accent-color: var(--state-color); }

/* ---------- layout ---------- */
.rh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.6rem; align-items: start; }
@media (max-width: 1050px) { .rh-layout { grid-template-columns: 1fr; } .rh-side { position: static !important; } }
@media (max-width: 700px) { .rh-scopes { grid-template-columns: 1fr; } .rh-toolbar { position: static; } }
@media (max-width: 560px) {
    .rh-main { padding: 1.25rem 1rem 3rem; }
    .rh-search { flex: 1 1 100%; }
    .rh-card { padding: 1rem 1rem; border-radius: 14px; }
    .rh-lenses { gap: 0.4rem; }
    .rh-lens-btn { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
}

.rh-status { color: var(--text-secondary); font-size: .9rem; margin: 0 0 .9rem; min-height: 1.4em; }
.rh-items { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- item card ---------- */
.rh-card { padding: 1.25rem 1.35rem; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow); transition: var(--transition); animation: rhIn .45s ease both; }
.rh-card:hover { border-color: rgba(255,255,255,.16); }
.rh-card.is-hidden { opacity: .45; border-style: dashed; }
@keyframes rhIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rh-meta { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; font-size: .78rem; color: var(--text-secondary); margin-bottom: .55rem; }
.rh-type { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .68rem; padding: .2rem .55rem; border-radius: 6px; }
.rh-type.news { color: #fda4af; background: rgba(244,63,94,.14); }
.rh-type.document { color: #93c5fd; background: rgba(59,130,246,.14); }
.rh-type.research { color: #c4b5fd; background: rgba(139,92,246,.16); }
.rh-card h3 { font-size: 1.08rem; line-height: 1.4; margin-bottom: .4rem; }
.rh-card h3 a { color: var(--text-primary); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; }
.rh-card h3 a:hover { background-size: 100% 1px; }
.rh-snippet { color: var(--text-secondary); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rh-snippet.open { -webkit-line-clamp: unset; }

.rh-lenses { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .95rem; }
.rh-lens-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: var(--transition); }
.rh-lens-btn.steel { color: var(--steel-color); background: var(--steel-bg); }
.rh-lens-btn.straw { color: var(--straw-color); background: var(--straw-bg); }
.rh-lens-btn.action { color: var(--action-color); background: var(--action-bg); }
.rh-lens-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.rh-lens-btn[aria-expanded="true"] { border-color: currentColor; }
.rh-lens-btn.pending { color: var(--text-secondary); background: rgba(255,255,255,.05); cursor: default; }
.rh-lens-btn.propose { color: var(--text-primary); background: rgba(255,255,255,.05); margin-left: auto; }
.rh-lens-btn.hide-btn { color: #fca5a5; background: rgba(239,68,68,.1); }

.rh-panel { display: none; margin-top: .8rem; padding: .95rem 1.05rem; border-radius: 12px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); font-size: .92rem; animation: rhIn .3s ease; }
.rh-panel.open { display: block; }
.rh-panel.steel { --c: var(--steel-color); }
.rh-panel.straw { --c: var(--straw-color); }
.rh-panel.action { --c: var(--action-color); }
.rh-panel h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c); margin-bottom: .35rem; display: flex; gap: .45rem; align-items: center; }
.rh-panel ul { margin: .2rem 0 0 1.1rem; }
.rh-panel li { margin: .25rem 0; }
.rh-ai-note { margin-top: .6rem; font-size: .74rem; color: var(--text-secondary); display: flex; gap: .4rem; align-items: center; }
.rh-ai-note a { color: inherit; }

.rh-more { display: block; margin: 1.3rem auto 0; padding: .75rem 1.6rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
    background: rgba(255,255,255,.05); color: var(--text-primary); border: 1px solid var(--glass-border); transition: var(--transition); }
.rh-more:hover { background: rgba(249,115,22,.15); border-color: rgba(249,115,22,.5); }

.rh-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); border: 1px dashed var(--glass-border); border-radius: 18px; }
.rh-empty i { font-size: 2rem; margin-bottom: .6rem; display: block; color: var(--state-color); }

.rh-skel { height: 150px; border-radius: 18px; background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 70%); background-size: 300% 100%; animation: rhShimmer 1.4s infinite linear; }
@keyframes rhShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- proposals side panel ---------- */
.rh-side { position: sticky; top: 160px; padding: 1.3rem; border-radius: 18px; background: linear-gradient(170deg, rgba(16,185,129,.08), var(--glass-bg) 40%);
    border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); max-height: calc(100vh - 180px); display: flex; flex-direction: column; }
.rh-side h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.rh-side h2 i { color: var(--action-color); }
.rh-side > p { color: var(--text-secondary); font-size: .84rem; margin: .3rem 0 .9rem; }
.rh-form textarea { width: 100%; min-height: 86px; resize: vertical; padding: .75rem .85rem; border-radius: 12px; border: 1px solid var(--glass-border);
    background: rgba(0,0,0,.25); color: var(--text-primary); font: inherit; font-size: .9rem; }
.rh-form textarea:focus { outline: none; border-color: var(--action-color); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.rh-form .row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .5rem; font-size: .76rem; color: var(--text-secondary); }
.rh-form button[type=submit] { padding: .55rem 1.05rem; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem;
    color: #04130d; background: linear-gradient(135deg, #34d399, #10b981); transition: var(--transition); }
.rh-form button[type=submit]:hover { filter: brightness(1.1); transform: translateY(-1px); }
.rh-form button[disabled] { opacity: .6; cursor: wait; }
.rh-linked { display: none; margin-top: .5rem; font-size: .78rem; padding: .45rem .65rem; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--text-secondary); }
.rh-linked.on { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
.rh-linked button { background: none; border: 0; color: var(--text-secondary); cursor: pointer; font-size: 1rem; }
.rh-msg { font-size: .8rem; margin-top: .45rem; min-height: 1.1em; }
.rh-msg.err { color: #fca5a5; } .rh-msg.ok { color: #6ee7b7; }
.rh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.rh-plist-head { display: flex; gap: .5rem; align-items: center; margin: 1rem 0 .6rem; }
.rh-plist-head input { flex: 1; min-width: 0; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(0,0,0,.25); color: var(--text-primary); font: inherit; font-size: .82rem; }
.rh-seg { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 10px; overflow: hidden; }
.rh-seg button { padding: .45rem .7rem; background: none; border: 0; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: .78rem; }
.rh-seg button.active { background: rgba(16,185,129,.18); color: #fff; }
.rh-plist { overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding-right: .25rem; min-height: 80px; }
.rh-prop { display: flex; gap: .75rem; padding: .75rem; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); animation: rhIn .35s ease both; }
.rh-prop.is-hidden { opacity: .45; border-style: dashed; }
.rh-vote { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 2.6rem; gap: .1rem; padding-top: .1rem;
    background: none; border: 0; color: var(--text-secondary); cursor: pointer; font: inherit; transition: var(--transition); }
.rh-vote i { font-size: 1rem; transition: transform .2s ease; }
.rh-vote b { font-size: .92rem; color: var(--text-primary); }
.rh-vote:hover i { transform: translateY(-2px); color: var(--action-color); }
.rh-vote.voted { color: var(--action-color); }
.rh-vote.voted b { color: var(--action-color); }
.rh-vote.pop i { animation: rhPop .4s ease; }
@keyframes rhPop { 50% { transform: scale(1.5); } }
.rh-prop-body { flex: 1; min-width: 0; font-size: .88rem; }
.rh-prop-body p { word-wrap: break-word; }
.rh-prop-meta { margin-top: .3rem; font-size: .72rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.rh-prop-meta a { color: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-prop-meta button { background: none; border: 0; color: #fca5a5; cursor: pointer; font: inherit; font-size: .72rem; }

.rh-admin-bar { display: none; margin-bottom: 1rem; padding: .6rem 1rem; border-radius: 12px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fecaca; font-size: .85rem; }
.rh-admin-bar.on { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.rh-admin-bar button { background: none; border: 1px solid currentColor; color: inherit; border-radius: 8px; padding: .25rem .6rem; cursor: pointer; font: inherit; font-size: .78rem; }

mark { background: rgba(249,115,22,.3); color: inherit; border-radius: 3px; padding: 0 .1em; }