:root {
 --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 --accent: #3a80d8;
 --primary: #3a80d8;
 --primary-hover: #2c66b8;
 --success: #22c55e;
 --warning: #f8714a;
 --gold: #facc15;
 --muted: #9ca3af;
 --text: #e5e7eb;
 --bg: #121212;
 --surface: #1f2937;
 --surface-light: #374151;
 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --radius: 0.5rem;
}


/* Ensure search controls and help link stay on a single row and inputs shrink properly */
.controls {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 /* Keep elements packed together; avoid pushing the help-link to the far edge which can cause wrapping */
 justify-content: flex-start;
 /* Prevent wrapping so the "?" stays adjacent to the Search button; allow internal inputs to shrink via min-width:0 */
 flex-wrap: nowrap;
 width: 100%;
 box-sizing: border-box;
}
.controls > form {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 flex: 1 1 auto;
 min-width: 0;
 /* Allow the form to shrink before the help-link so the "?" remains adjacent */
 flex-shrink: 1;
}
.controls input[type="text"] {
 flex: 1 1 auto;
 min-width: 0;
}

/* Prevent the standalone help "?" from wrapping and keep it adjacent to the search form */
.help-link {
 white-space: nowrap;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0.125rem 0.45rem;
 margin-left: 0.25rem;
 color: var(--muted);
 text-decoration: none;
 border-radius: 4px;
 border: 1px solid transparent;
 background: transparent;
 /* Ensure help link does not shrink and stays visually next to the button */
 flex: 0 0 auto;
}

/* Existing issueboard rules (preserved) */
.sponsor-info {
 display: flex; gap: 1rem; align-items: center;
 margin-bottom: 1rem; font-size: 0.9rem;
}
.encourage { font-size: 0.9rem; color: var(--muted); }
.encourage a { color: var(--success); font-weight: 600; }

@media (max-width: 600px) {
 .sponsor-info { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ------------------------------------------------------------------
 Vote-Chips UI (Phase 1: CSS only, HTMX-driven, no extra JS)
 ------------------------------------------------------------------ */

/* Collapsible details row that can be injected per-issue */
.issue-details {
 background: var(--surface);
 border-left: 4px solid var(--accent);
}
.issue-details .details-inner {
 padding: 0.75rem 1rem;
}

/* Manage votes toggle button (small, subtle) */
.vote-details-toggle {
 margin-left: 0.5rem;
 font-size: 0.85rem;
 white-space: nowrap;
}

/* The container immediately following .vote-controls holds the bundles.
 When it's non-empty, flip the toggle label to "Hide" purely via CSS. */
.vote-controls .label-open { display: none; }
.vote-controls:has(+ .inline-bundles:not(:empty)) .label-closed { display: none; }
.vote-controls:has(+ .inline-bundles:not(:empty)) .label-open { display: inline; }

.vote-info {
 display: flex;
 gap: 1rem;
 font-size: 0.9rem;
 color: var(--muted);
}

.issueboard-vote-hint {
 margin-bottom: 0.75rem;
}

/* Board: three bins (Up, Neutral, Down). Stacks to one column on mobile. */
.vote-board {
 display: grid;
 grid-template-columns: repeat(3, minmax(180px, 1fr));
 gap: 0.75rem;
 margin-top: 0.75rem;
}

.vote-bin {
 background: var(--surface);
 border: 1px solid var(--accent);
 border-radius: var(--radius);
 padding: 0.75rem;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 min-height: 140px;
}

.vote-bin__title {
 font-weight: 700;
 font-size: 0.95rem;
 color: var(--text);
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.vote-bin__title .meta {
 font-weight: 600;
 font-size: 0.8rem;
 color: var(--muted);
}

.vote-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
}

.vote-chip {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.35rem 0.6rem;
 border-radius: 999px;
 font-weight: 700;
 font-size: 0.9rem;
 cursor: pointer;
 user-select: none;
 border: 1px solid transparent;
 transition: background 0.15s, border-color 0.15s, color 0.15s,
 filter 0.15s;
}

.vote-chip:hover { filter: brightness(1.05); }
.vote-chip:focus {
 outline: 2px solid var(--primary);
 outline-offset: 2px;
}

.vote-chip--neutral {
 background: var(--surface-light);
 color: var(--text);
 border-color: rgba(255,255,255,0.06);
}

.vote-chip--pos {
 background: var(--primary);
 color: #fff;
 border-color: var(--primary);
}

.vote-chip--neg {
 background: var(--warning);
 color: #fff;
 border-color: var(--warning);
}

.vote-chip__exp {
 font-weight: 600;
 font-size: 0.75rem;
 color: var(--bg);
 background: rgba(255,255,255,0.75);
 padding: 0rem 0.4rem;
 border-radius: 6px;
}

.vote-chip--neutral .vote-chip__exp {
 color: var(--muted);
 background: rgba(255,255,255,0.08);
}

/* Optional summary bar that can show distribution at-a-glance */
.vote-summary {
 display: flex;
 height: 10px;
 border-radius: 999px;
 overflow: hidden;
 background: var(--surface-light);
 border: 1px solid rgba(255,255,255,0.06);
}

.vote-summary__pos { background: var(--primary); }
.vote-summary__neu { background: var(--surface-light); }
.vote-summary__neg { background: var(--warning); }

@media (max-width: 800px) {
 .vote-board { grid-template-columns: 1fr; }
}

/* Inline Bundles panel (small, unobtrusive) */
.vote-bundles {
 margin-top: 0.5rem;
 padding: 0.6rem;
 border-radius: var(--radius);
 border: 1px solid rgba(255,255,255,0.04);
 background: var(--surface);
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

/* Bundle: stable two-column layout (left = info, right = actions) */
.bundle {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 0.75rem;
 padding: 0.45rem 0.6rem;
 border-radius: 6px;
 background: var(--bg);
 border: 1px solid rgba(255,255,255,0.02);
}

/* Stable left-side info grouping */
.bundle-info {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 flex-wrap: wrap;
}

.bundle-size {
 font-weight: 700;
 color: var(--primary);
 flex: 0 0 auto;
}

/* Expiry label as part of info (no auto-margin that pushes buttons) */
.bundle-exp {
 font-size: 0.85rem;
 color: var(--muted);
 flex: 0 0 auto;
}

/* NEW: status pill + action grouping for bundles */
.bundle-status {
 font-weight: 700;
 font-size: 0.85rem;
 padding: 0.15rem 0.5rem;
 border-radius: 999px;
 border: 1px solid rgba(255,255,255,0.08);
 color: var(--muted);
 background: rgba(255,255,255,0.06);
}
.bundle-status.is-upvote,
.bundle-status.is-applied {
 color: var(--primary);
 background: rgba(58,128,216,0.15);
 border-color: var(--primary);
}
.bundle-status.is-downvote {
 color: var(--warning);
 background: rgba(220,38,38,0.15);
 border-color: var(--warning);
}
.bundle-status.is-unassigned {
 color: var(--muted);
 background: rgba(255,255,255,0.06);
 border-color: rgba(255,255,255,0.08);
}

/* Right-aligned actions container (pushes to right without shifting left info) */
.bundle-actions {
 display: flex;
 gap: 0.5rem;
 align-items: center;
 margin-left: auto;
}

/* Smooth star update visual when OOB swaps replace the SVG */
#issueboard-content td[id^="stars-"] svg {
 transition: fill 0.30s ease-in-out, transform 0.18s ease;
 transform-origin: center;
}

.switch {
 display: inline-flex;
 gap: 0.5rem;
 align-items: center;
}
.switch input[type="radio"] { display: none; }
.switch span {
 padding: 0.2rem 0.45rem;
 border-radius: 6px;
 cursor: pointer;
 user-select: none;
}
.switch input:checked + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch input[disabled] + span { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 800px) {
 .vote-bundles { padding: 0.5rem; }
 .bundle { padding: 0.4rem; gap: 0.5rem; }
}

/* Layout tweaks for vote rows */
.vote-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: nowrap;
 gap: 1rem;
}
.vote-info {
 display: flex;
 gap: 1rem;
}
.vote-edit-toggle[disabled] {
 opacity: 0.6;
 cursor: default;
}