:root { --ink:#1a1208;--paper:#f8f9fa;--cream:#f1f3f5;--navy:#1b2a4a; --red:#8b1a1a;--gold:#c4922a;--rule:#e2e6ea;--muted:#6c757d; --success:#2d6a4f;--card-bg:#ffffff;--drawer-w:520px; --lords:#5c1a6b; --shadow-sm:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.05); --shadow-md:0 4px 12px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.06); } *{box-sizing:border-box;margin:0;padding:0;} /* Reserve scrollbar gutter so chunked grid render and async content loads can't make the page width / scrollbar flicker. overflow-x:clip (not :hidden) — :hidden turns into a scroll container, which on mobile Chrome/Safari makes position:sticky descendants attach to that container instead of the visual viewport and detach mid-scroll as the URL bar shows/hides. :clip kills horizontal overflow the same way without creating a scroll context. Supported in all current browsers (Chrome 90+, Safari 16+, FF 81+). */ html{scrollbar-gutter:stable;overflow-x:clip;max-width:100%;} body{background:var(--paper);color:var(--ink);font-family:'Inter','Inter-fallback','Source Serif 4',Georgia,serif;font-size:14px;line-height:1.6;min-height:100vh;max-width:100%;display:flex;flex-direction:column;} /* ─── UTILITY CLASSES ─── Replacements for legacy inline style="..." attributes. Keeping these in one place makes a strict CSP style-src easier to ship and centralises visual defaults. */ .hidden{display:none!important;} .masthead-home-link{color:inherit;text-decoration:none;} .btn-link{text-decoration:none;} .filter-row-spacer{margin-left:10px;} .party-filters-row{display:flex;gap:5px;flex-wrap:wrap;} .margin-top-28{margin-top:28px;} /* ─── PARTY COLOUR ATTRIBUTES ─── Data-driven UK party colours, applied via [data-party] attribute selectors so renderers can emit data-party="Lab" instead of style="background:#d62828". Single source of truth for party colours across every module. */ [data-party="Lab"] { background:#d62828; color:#fff; } [data-party="Con"] { background:#0087dc; color:#fff; } [data-party="LD"] { background:#faa61a; color:#1a1208; } [data-party="Green"]{ background:#6ab023; color:#fff; } [data-party="SNP"] { background:#fff95d; color:#1a1208; } [data-party="PC"] { background:#008142; color:#fff; } [data-party="RUK"] { background:#12b6cf; color:#fff; } [data-party="DUP"] { background:#d46a4c; color:#fff; } [data-party="SF"] { background:#326760; color:#fff; } [data-party="SDLP"] { background:#2aa82c; color:#fff; } [data-party="APNI"] { background:#f6cb2f; color:#1a1208; } [data-party="UUP"] { background:#48a5ee; color:#fff; } [data-party="Ind"] { background:#808080; color:#fff; } [data-party="Spk"] { background:#222; color:#fff; } [data-party="TUV"] { background:#0095b6; color:#fff; } /* ─── DYNAMIC WIDTH BARS ─── A bar fill with a data-driven width should set --bar-w via the style attribute, not an explicit `width: X%` inline style. This keeps CSP `style-src` inline usage to a single custom property per element (tiny surface area, still pre-hashable if we go fully strict later). */ .bar-fill{width:var(--bar-w,0%);} /* ─── ETHNIC GROUP ATTRIBUTE COLOURS ─── Used by drawer ethnic group bars, map info card stacked bar, and Population tab bar chart. Single source of truth. */ [data-eth="white"]{background:#94887a;} [data-eth="asian"]{background:#b17020;} [data-eth="black"]{background:#3a2208;} [data-eth="mixed"]{background:#c4922a;} [data-eth="other"]{background:#6a5a40;} /* ─── CHOROPLETH RAMP STOPS ─── Used by the map legend so the 6-stop cream→rust ramp is declared in one place. The Leaflet polygons themselves get their fill via SVG attributes (not CSS style attrs) so they don't need this. */ [data-ramp="0"]{background:#f3efe6;} [data-ramp="1"]{background:#ecdcb0;} [data-ramp="2"]{background:#d6a84a;} [data-ramp="3"]{background:#b17020;} [data-ramp="4"]{background:#7a4510;} [data-ramp="5"]{background:#4a2508;} /* Map legend swatches — full rules in the MAP MODE section below */ /* ─── TAKEDOWN MODAL (ai.js) ─── */ .takedown-overlay{position:fixed;inset:0;background:rgba(26,18,8,0.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;} .takedown-dialog{background:#fff;max-width:520px;width:100%;max-height:90vh;overflow:auto;border:1px solid var(--rule);border-top:4px solid var(--red);border-radius:8px;padding:22px 24px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;box-shadow:var(--shadow-md);} .takedown-dialog h2{font-family:'Playfair Display',serif;font-size:1.2rem;margin-bottom:6px;color:var(--ink);} .takedown-dialog h2.takedown-ok{font-size:1.15rem;margin-bottom:10px;color:var(--success);} .takedown-blurb{font-size:0.72rem;color:var(--muted);line-height:1.55;margin-bottom:16px;} .takedown-context{background:var(--cream);border:1px solid var(--rule);padding:10px 12px;font-size:0.7rem;margin-bottom:14px;line-height:1.5;} .takedown-context-sub{color:var(--muted);margin-top:4px;} .takedown-label{display:block;font-size:0.7rem;margin-bottom:10px;} .takedown-label-reason{margin-bottom:14px;} /* Urgent auto-disable checkbox — red-tinged block so the user sees it's the "act now" option, not just another form field. */ .takedown-label-urgent{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:4px 0 14px;background:rgba(139,26,26,0.06);border:1px solid rgba(139,26,26,0.25);border-radius:6px;font-size:0.75rem;cursor:pointer;line-height:1.4;} .takedown-urgent-check{margin-top:3px;flex-shrink:0;cursor:pointer;} .takedown-urgent-label{display:block;color:var(--ink);} .takedown-urgent-label strong{display:block;color:var(--red);margin-bottom:3px;font-weight:700;} .takedown-urgent-hint{display:block;color:var(--muted);font-size:0.7rem;font-weight:400;} .takedown-field{display:block;width:100%;margin-top:3px;padding:7px 9px;border:1px solid var(--rule);border-radius:6px;font-family:inherit;font-size:0.8rem;} textarea.takedown-field{font-size:0.78rem;resize:vertical;} .takedown-msg{font-size:0.7rem;min-height:1.2em;margin-bottom:10px;} .takedown-msg.err{color:var(--red);} .takedown-actions{display:flex;gap:8px;justify-content:flex-end;} .takedown-btn-danger{border-color:var(--red)!important;color:#fff!important;background:var(--red)!important;} .takedown-ok-body p{margin-bottom:10px;line-height:1.6;font-size:0.8rem;} .takedown-ok-body p.takedown-note{font-size:0.72rem;line-height:1.55;color:var(--muted);margin-bottom:14px;} .takedown-ok-body .takedown-close-row{text-align:right;} .ai-blocked-note{background:var(--cream);border:1px solid var(--rule);padding:14px 16px;border-radius:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;line-height:1.6;color:var(--ink);} .debate-back-link-row{text-align:center;margin-top:16px;} .filters-empty-note{font-size:0.66rem;color:var(--muted);font-style:italic;} .int-parent-summary{color:var(--muted);font-style:italic;} .int-ai-disclaimer{margin-top:8px;background:rgba(27,42,74,0.04);border:1px solid var(--rule);padding:12px 14px;border-radius:6px 6px 0 0;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;color:var(--ink);line-height:1.6;} .ch-psc-sub{max-width:180px;line-height:1.3;} .ch-due-row{background:rgba(27,42,74,0.03);} /* ─── MASTHEAD — slim horizontal bar ─── */ .masthead{background:var(--navy);border-bottom:3px solid var(--gold);padding:0 24px;display:flex;align-items:center;gap:0;height:56px;flex-shrink:0;z-index:1950;position:sticky;top:0;overflow:visible;} .masthead-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;margin-right:8px;} .masthead-logo{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:-0.01em;line-height:1;} .masthead h1{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:900;color:#fff;line-height:1;display:inline;} .masthead-tagline{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:0.12em;border-left:1px solid rgba(255,255,255,0.2);padding-left:10px;} .masthead-sub{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:500;color:var(--gold);text-transform:uppercase;letter-spacing:0.12em;border-left:1px solid rgba(255,255,255,0.2);padding-left:10px;margin-left:10px;} /* Navigation */ .masthead-nav{display:flex;align-items:stretch;height:100%;gap:0;margin-left:auto;} .nav-item{position:relative;display:flex;align-items:center;} .nav-link{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;font-weight:500;color:rgba(255,255,255,0.65);text-decoration:none;padding:0 11px;height:100%;display:flex;align-items:center;gap:4px;border-bottom:3px solid transparent;transition:all 0.15s;cursor:pointer;white-space:nowrap;user-select:none;} .nav-link:hover{color:#fff;background:rgba(255,255,255,0.07);} .nav-link.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:600;} .nav-link.has-dropdown::after{content:'▾';font-size:0.6rem;opacity:0.6;margin-left:2px;} /* Dropdown menus */ .nav-dropdown{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--rule);border-radius:0 0 8px 8px;border-top:3px solid var(--gold);box-shadow:var(--shadow-md);padding:6px;display:none;z-index:9999;} /* Last two nav items: anchor dropdown to the right so it doesn't clip off-screen */ .nav-item:nth-last-child(-n+2) .nav-dropdown{left:auto;right:0;} /* Invisible bridge between the nav link and the dropdown so the mouse can travel across the gap without losing hover state. */ .nav-dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;} .nav-item:hover .nav-dropdown{display:block;} .nav-dropdown-section{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);padding:6px 10px 4px;margin-top:4px;} .nav-dropdown-section:first-child{margin-top:0;} .nav-dropdown-item{display:block;padding:7px 12px;border-radius:6px;text-decoration:none;cursor:pointer;transition:background 0.12s;} .nav-dropdown-item:hover{background:var(--cream);} .nav-dropdown-item-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:600;font-size:0.8rem;color:var(--ink);} .nav-dropdown-item-desc{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;color:var(--muted);line-height:1.3;margin-top:1px;} .nav-dropdown-divider{height:1px;background:var(--rule);margin:6px 0;} /* Long-list dropdowns (e.g. Parties — 16 entries). Cap to 70vh and scroll inside so the menu never grows past the viewport. */ .nav-dropdown.nav-dropdown-scroll{max-height:min(70vh,540px);overflow-y:auto;scrollbar-width:thin;} /* AI pill — right end of masthead */ .masthead-ai{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:20px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.67rem;color:rgba(255,255,255,0.55);white-space:nowrap;cursor:help;} .masthead-ai-dot{width:6px;height:6px;border-radius:50%;background:#4caf6e;flex-shrink:0;animation:pulse 2s infinite;} /* Keep existing ai-usage-* classes working inside the new pill */ .ai-usage-strip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:20px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.67rem;color:rgba(255,255,255,0.55);white-space:nowrap;cursor:help;} .ai-usage-label{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:700;} .ai-usage-pair{display:inline-flex;align-items:baseline;gap:4px;} .ai-usage-num{font-family:'JetBrains Mono',monospace;color:#fff;font-weight:600;font-size:0.72rem;} .ai-usage-scale{opacity:0.6;} .ai-usage-sep{opacity:0.3;} /* Hide old standalone elements that are now inside the pill */ .masthead-rule{display:none;} .masthead-date{display:none;} .masthead-feature-line{display:none;} .verified-badge{display:none;} /* HOUSE TABS */ .tab-bar{background:var(--card-bg);border-bottom:1px solid var(--rule);padding:0 24px;display:flex;align-items:stretch;flex-shrink:0;} .tab-bar-inner{display:flex;align-items:stretch;} /* Masthead search + filter tools (right-aligned in the navy bar) */ .masthead-tools{display:none;} /* Moved to status strip */ .masthead-search{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;padding:6px 13px;border-radius:20px;outline:none;width:240px;transition:all 0.15s;} .masthead-search::placeholder{color:rgba(255,255,255,0.4);} .masthead-search:focus{background:rgba(255,255,255,0.14);border-color:var(--gold);width:320px;} .masthead-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.82);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:500;padding:6px 12px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all 0.15s;} .masthead-btn:hover{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.3);} /* ─── HAMBURGER (mobile only) ─── */ .masthead-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:4px;order:6;} .masthead-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:1px;transition:all 0.2s;} .masthead.nav-open .masthead-hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg);} .masthead.nav-open .masthead-hamburger span:nth-child(2){opacity:0;} .masthead.nav-open .masthead-hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} /* ─── RESPONSIVE CHROME ─── */ @media (max-width:1200px){ .masthead-tagline{display:none;} .masthead-search{width:180px;} } @media (max-width:900px){ /* Hamburger takes over */ .masthead{overflow:visible;flex-wrap:wrap;} /* Push the hamburger to the right edge of the masthead — otherwise it sits tight against the brand link with a gap of ~dead space on the right on narrow screens. margin-left:auto works here because .masthead-tools is display:none and .masthead-nav wraps to a new row (flex-basis:100%) so the hamburger is the only visible sibling on the first row after the brand. */ .masthead-hamburger{display:flex;margin-left:auto;} .masthead-nav{display:none;order:10;flex-basis:100%;position:absolute;top:59px;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;height:auto;padding:8px 0;border-bottom:3px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,0.3);max-height:calc(100vh - 59px);overflow-y:auto;} .masthead.nav-open .masthead-nav{display:flex;} .masthead-nav .nav-item{display:block;position:static;border-top:1px solid rgba(255,255,255,0.08);} .masthead-nav .nav-item:first-child{border-top:none;} .masthead-nav .nav-link{height:auto;padding:12px 20px;border-bottom:none;font-size:0.88rem;font-weight:600;color:rgba(255,255,255,0.88);} .masthead-nav .nav-link.active{color:var(--gold);} .masthead-nav .nav-link.has-dropdown::after{margin-left:auto;} /* Dropdowns collapse by default in mobile menu — tap parent to expand. The parent's has-dropdown chevron rotates 180° when its item is open so the affordance is obvious. Keeps the menu short by default. */ .masthead-nav .nav-dropdown{position:static;display:none;background:rgba(0,0,0,0.2);border:none;border-radius:0;box-shadow:none;padding:4px 0 8px;min-width:0;} .masthead-nav .nav-item.is-open > .nav-dropdown{display:block;} .masthead-nav .nav-link.has-dropdown::after{transition:transform 0.18s;} .masthead-nav .nav-item.is-open > .nav-link.has-dropdown::after{transform:rotate(180deg);} /* The whole mobile nav already scrolls — reset the long-list cap so we don't get nested scroll containers. */ .masthead-nav .nav-dropdown.nav-dropdown-scroll{max-height:none;overflow-y:visible;} .masthead-nav .nav-dropdown-section{color:var(--gold);padding:8px 24px 4px;} .masthead-nav .nav-dropdown-item{padding:8px 24px;border-radius:0;} .masthead-nav .nav-dropdown-item:hover{background:rgba(255,255,255,0.08);} .masthead-nav .nav-dropdown-item-title{color:#fff;} .masthead-nav .nav-dropdown-item-desc{color:rgba(255,255,255,0.6);} .masthead-nav .nav-dropdown-divider{background:rgba(255,255,255,0.12);} /* Tools move above the hamburger */ .masthead-tools{order:5;margin-left:auto;margin-right:10px;padding-left:0;} .masthead-search{width:150px;} .masthead-search:focus{width:190px;} } @media (max-width:720px){ .masthead{padding:0 14px;} .masthead-tools{gap:5px;margin-right:8px;} .masthead-search{width:130px;font-size:0.72rem;} .masthead-search:focus{width:160px;} .masthead-btn{padding:5px 9px;font-size:0.66rem;} /* Status strip: stack in two tidy rows */ .status-strip{padding:8px 14px;gap:8px 12px;} .status-strip-left{flex:1 1 100%;font-size:0.7rem;} .current-house{font-size:0.88rem;} .status-strip .last-scanned{display:none;} .status-stats{gap:14px;margin-left:0;flex:1 1 100%;justify-content:space-between;} .stat-val{font-size:0.95rem;} .stat-label{font-size:0.52rem;} } @media (max-width:480px){ .status-stats .stat:nth-child(4){display:none;} /* hide Scanned */ .grid-wrap{padding:10px 12px;} .mp-grid{grid-template-columns:1fr;gap:9px;} } .tab{padding:11px 18px;cursor:pointer;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.83rem;font-weight:600;color:var(--muted);background:transparent;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;transition:all 0.15s;user-select:none;flex-shrink:0;display:flex;align-items:center;gap:7px;white-space:nowrap;} .tab:hover{color:var(--navy);} .tab.active{color:var(--navy);border-bottom-color:var(--gold);background:transparent;} .tab.lords-tab.active{color:var(--lords);border-bottom-color:var(--lords);background:transparent;} .tab .tab-count{display:inline-flex;align-items:center;justify-content:center;background:var(--cream);color:var(--muted);font-family:'Inter','Inter-fallback',sans-serif;font-size:0.62rem;font-weight:700;min-width:22px;height:18px;border-radius:10px;padding:0 6px;margin-left:7px;} .tab.active .tab-count{background:rgba(27,42,74,0.1);color:var(--navy);} .tab.lords-tab.active .tab-count{background:rgba(92,26,107,0.12);color:var(--lords);} /* TOOLBAR (legacy — kept so sub-pages that still use .toolbar don't break) */ .toolbar{background:var(--card-bg);border-bottom:1px solid var(--rule);padding:8px 24px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;flex-shrink:0;} .last-scanned{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;color:rgba(255,255,255,0.6);white-space:nowrap;} .status-bar .last-scanned{color:rgba(255,255,255,0.55);font-style:normal;} .btn{padding:6px 13px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.75rem;font-weight:500;cursor:pointer;border:1px solid var(--rule);border-radius:6px;background:var(--card-bg);color:var(--ink);transition:all 0.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;} .btn:hover{border-color:#b8c4e0;color:var(--navy);background:#f4f6fb;} .btn.btn-secondary{background:transparent;color:var(--muted);border-color:var(--rule);text-decoration:none;} .btn.btn-secondary:hover{background:var(--cream);color:var(--navy);border-color:var(--navy);} .search-input{flex:1;min-width:160px;background:var(--paper);border:1.5px solid var(--rule);padding:7px 14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.83rem;color:var(--ink);border-radius:20px;outline:none;transition:border-color 0.15s,box-shadow 0.15s;} .search-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,0.1);background:#fff;} /* STATUS STRIP (light row replacing old tab-bar + status-bar) */ .status-strip{background:var(--card-bg);border-bottom:1px solid var(--rule);padding:12px 24px;display:flex;align-items:center;gap:16px;flex-shrink:0;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;color:var(--muted);flex-wrap:wrap;} .status-strip-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .status-house-block{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15;} .current-house{font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;font-weight:700;color:var(--navy);letter-spacing:-0.005em;line-height:1.1;} .status-meta{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;color:var(--muted);line-height:1.2;padding-left:19px;} .status-text:not(:empty)::after{content:' · ';color:var(--rule);} .status-title-row{display:flex;align-items:center;gap:10px;} .status-dot{width:9px;height:9px;border-radius:50%;background:#c8c8c8;flex-shrink:0;} .status-dot.loading{background:var(--gold);animation:pulse 1s infinite;} .status-dot.done{background:#4caf6e;} .status-dot.error{background:var(--red);} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}} .status-strip .last-scanned{color:var(--muted);font-style:normal;font-size:0.7rem;} .status-stats{display:flex;gap:22px;align-items:center;margin-left:auto;} .status-tools{display:none;} /* Moved to home-search-bar */ /* Sticky search/filter stack for the home page. Stays pinned below the navy masthead so searching + filtering stays reachable while scrolling the member grid. Explicit background covers scrolled grid content bleeding through the transparent right-hand space of the search bar. */ /* Search + Filters are left-aligned so they stay visible when the 520px right-side drawer slides in over a clicked member card. Subtle bottom rule + soft shadow anchor the bar visually so it reads as "pinned" rather than floating mid-page. */ /* Search bar + filter panel are wrapped together in .home-sticky-stack so both pin as a unit directly below the masthead. Having them as two separately-sticky siblings didn't work: each child computed its own top offset, the second one's hardcoded top:106px didn't match the first's actual height, and a strip of MP cards scrolled visibly through the seam once the panel was open. */ .home-sticky-stack{position:sticky;top:56px;z-index:40;} .home-search-bar{padding:8px 24px;display:flex;align-items:center;gap:6px;justify-content:flex-start;background:var(--paper,#f7f5ef);border-bottom:1px solid var(--rule);box-shadow:0 2px 6px rgba(26,18,8,0.05);} .status-search{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;padding:6px 13px;border:1px solid var(--rule);border-radius:20px;outline:none;width:240px;background:#fff;color:var(--ink);transition:all 0.15s;} .status-search::placeholder{color:var(--muted);} .status-search:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,0.08);width:300px;} .status-filter-btn{background:var(--cream);border:1px solid var(--rule);color:var(--navy);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:600;padding:6px 14px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all 0.15s;text-decoration:none;display:inline-block;} .status-filter-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy);} .stat{display:flex;flex-direction:column;align-items:center;line-height:1.1;} .stat-val{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.1rem;font-weight:800;letter-spacing:-0.015em;color:var(--navy);} .stat-label{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.56rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-weight:600;margin-top:2px;} /* Legacy — kept so switchTab() classList calls don't error and sub-pages that still reference .status-bar don't break. */ .status-bar{background:var(--navy);color:var(--paper);padding:5px 24px;font-size:0.7rem;display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;min-height:30px;flex-shrink:0;} /* PROGRESS */ .progress-wrap{height:3px;background:var(--cream);} .progress-bar{height:100%;background:linear-gradient(90deg,var(--navy),var(--gold));width:0%;transition:width 0.4s;} /* FILTER BAR */ .filter-bar{background:var(--card-bg);padding:0;max-height:0;overflow:hidden;transition:max-height 0.35s,padding 0.35s;} .filter-bar.open{border-bottom:1px solid var(--rule);} .filter-bar.open{max-height:600px;padding:9px 18px;} .filter-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px;} .filter-row:last-child{margin-bottom:0;} .filter-label{font-size:0.63rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);min-width:50px;} .chip{padding:2px 9px;border-radius:12px;font-size:0.66rem;cursor:pointer;border:1px solid var(--rule);background:var(--paper);color:var(--muted);transition:all 0.12s;font-family:'Inter','Inter-fallback','Source Serif 4',serif;user-select:none;} .chip:hover{border-color:var(--navy);color:var(--navy);} .chip.active{background:var(--navy);color:var(--paper);border-color:var(--navy);} /* Party chips: always filled in party colour (matches the card badge). */ .chip.party-chip{font-weight:600;letter-spacing:0.02em;} .chip.party-chip:hover{filter:brightness(1.1);} /* When a party filter is active, fade the unselected chips and ring the selected one with a gold outline so it stands out. */ #partyFilters:has(.party-chip.active) .party-chip:not(.active){opacity:0.42;} .chip.party-chip.active{outline:2px solid var(--gold);outline-offset:2px;filter:brightness(1.05);box-shadow:0 1px 4px rgba(0,0,0,0.18);} select.filter-select{background:#fff;border:1px solid var(--rule);padding:4px 8px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.73rem;color:var(--ink);border-radius:6px;outline:none;cursor:pointer;} /* LAYOUT */ .tab-panel{display:none;} .tab-panel.active{display:block;flex:1;position:relative;} .grid-wrap{padding:16px 18px;} .mp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:11px;} /* CARD */ /* content-visibility:auto lets the browser skip layout + paint + IO for cards that are off-screen, then opportunistically render them as they scroll near the viewport. With 1,500 SSR'd cards in the initial HTML this knocks a large chunk off TBT + LCP on mobile. contain-intrinsic- size reserves a placeholder box per card (matching the ~94px rendered height) so the grid's overall height is accurate and the scrollbar doesn't jump as cards render in. */ .mp-card{background:var(--card-bg);border:1px solid rgba(0,0,0,0.07);border-radius:6px;padding:13px 14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all 0.15s;display:flex;align-items:flex-start;gap:12px;content-visibility:auto;contain-intrinsic-size:auto 94px;} .mp-card:hover{border-color:rgba(0,0,0,0.1);box-shadow:var(--shadow-md);transform:translateY(-1px);} .mp-card.selected{border-color:rgba(196,146,42,0.45);box-shadow:var(--shadow-md);background:#fffdf8;} .mp-card.lords .mp-name{color:var(--lords);} .mp-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;flex-shrink:0;color:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(27,42,74,0.18);} .mp-avatar img{width:100%;height:100%;object-fit:cover;object-position:top;} .mp-info{flex:1;min-width:0;} .mp-name{font-family:'Inter','Inter-fallback',sans-serif;font-size:0.88rem;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mp-meta{font-size:0.65rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mp-last-spoken{font-size:0.62rem;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0.9em;} .mp-last-spoken-label{color:var(--navy);font-weight:600;letter-spacing:0.03em;text-transform:uppercase;font-size:0.56rem;} .mp-card.lords .mp-last-spoken-label{color:var(--lords);} .mp-last-spoken-date{color:var(--ink);font-weight:600;} .mp-last-spoken-title{color:var(--muted);} .mp-last-spoken-none{color:var(--rule);font-style:italic;} .mp-topic-badge{display:inline-block;margin-top:4px;padding:2px 7px;background:var(--gold);color:var(--ink);border-radius:10px;font-size:0.62rem;font-weight:700;letter-spacing:0.03em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;} .filter-topic-input{flex:1;min-width:180px;padding:6px 10px;border:1px solid var(--rule);background:var(--cream);font-family:inherit;font-size:0.78rem;border-radius:6px;} .filter-topic-input:focus{outline:none;border-color:var(--gold);} .filter-topic-status{font-size:0.72rem;color:var(--muted);font-style:italic;margin-left:6px;} .topic-filter-banner{background:rgba(201,166,62,0.15);border:1px solid var(--rule);padding:9px 14px;margin-bottom:14px;font-size:0.78rem;color:var(--ink);border-radius:6px;} .topic-filter-banner strong{color:var(--navy);} .topic-filter-banner a{color:var(--navy);text-decoration:underline;margin-left:6px;} /* ─── COMMITTEES (profile tab) ─── */ .committee-group{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px;} .committee-row{display:flex;align-items:center;gap:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;color:var(--ink);padding:4px 0;} .committee-current .committee-name{font-weight:600;color:var(--navy);} .committee-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;} .committee-dot.past{background:var(--rule);} .committee-date{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);} .committee-past-label{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-top:12px;border-top:1px dotted var(--rule);padding-top:10px;font-weight:600;} .committee-note{font-size:0.72rem;color:var(--muted);font-style:italic;margin-top:6px;} /* ─── OVERLAPS TAB ─── */ .overlaps-wrap{padding:20px 22px 24px;} .overlaps-notice{background:#fff8ec;border:1px solid rgba(196,146,42,0.3);border:1px solid var(--rule);padding:12px 16px;margin-bottom:16px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;line-height:1.55;color:var(--ink);border-radius:8px;} .overlaps-notice strong{color:var(--navy);} .overlaps-notice em{font-style:italic;color:var(--navy);} .overlaps-summary{font-size:0.78rem;color:var(--muted);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--rule);} .overlaps-summary strong{color:var(--navy);font-size:1rem;} .overlaps-help{font-style:italic;} .overlap-block{background:#fff;border:1px solid rgba(0,0,0,0.07);padding:14px 16px;margin-bottom:11px;border-radius:8px;box-shadow:var(--shadow-sm);} .overlap-interest{margin-bottom:10px;padding-bottom:8px;border-bottom:1px dotted var(--rule);} .overlap-interest-cat{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--gold);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .overlap-confidence{display:inline-block;padding:2px 8px;border-radius:10px;font-size:0.6rem;font-weight:700;letter-spacing:0.03em;text-transform:none;} .overlap-confidence.strong{background:rgba(26,74,46,0.12);color:#1a4a2e;} .overlap-confidence.possible{background:rgba(122,74,0,0.12);color:#7a4a00;} .overlap-interest-text{font-size:0.85rem;color:var(--ink);font-weight:600;line-height:1.4;} .overlap-hits{display:flex;flex-direction:column;gap:5px;} .overlap-hit{padding:8px 10px;cursor:pointer;border-radius:6px;transition:background 0.12s;} .overlap-hit:hover{background:var(--cream);} .overlap-hit-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:0.75rem;line-height:1.5;} /* Narrow viewports (mobile drawer): stack the row vertically so the "Spoke in" pill, debate title, date and chevron each get their own line. Was: 5-element flex-wrap row that crammed the pill text into the title text on small screens. */ @media (max-width: 480px){ .overlap-hit-row{flex-direction:column;align-items:flex-start;gap:4px;} .overlap-hit-row .overlap-hit-target{width:100%;} } .overlap-hit-type{font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:10px;flex-shrink:0;letter-spacing:0.02em;} .overlap-hit-vote{background:rgba(27,42,74,0.1);color:var(--navy);} .overlap-hit-speech{background:rgba(122,74,0,0.12);color:#7a4a00;} .overlap-hit-committee{background:rgba(201,166,62,0.22);color:var(--navy);} .overlap-hit-question{background:rgba(92,26,107,0.12);color:var(--lords);} .overlap-hit-target{color:var(--ink);flex:1;min-width:0;} .overlap-hit-target a{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--muted);} .overlap-hit-target a:hover{border-bottom-style:solid;} .overlap-hit-date{color:var(--muted);font-size:0.68rem;font-family:'JetBrains Mono',monospace;} .overlap-hit-keyword{color:var(--muted);font-size:0.68rem;} .overlap-hit-keyword code{background:var(--cream);padding:1px 5px;border-radius:4px;font-size:0.66rem;} .overlap-hit-chevron{color:var(--muted);font-size:0.7rem;margin-left:4px;} .overlap-hit-detail{margin-top:10px;padding:12px 14px;background:var(--cream);border:1px solid var(--rule);border-radius:6px;font-size:0.76rem;line-height:1.55;color:var(--ink);} .overlap-hit-detail-text{white-space:pre-wrap;margin-bottom:8px;color:var(--ink);} .overlap-hit-detail-match{font-size:0.72rem;color:var(--muted);margin-bottom:6px;} .overlap-hit-detail-match code{background:var(--card-bg);padding:1px 5px;border-radius:4px;} .overlap-hit-detail-link{font-size:0.72rem;} .overlap-hit-detail-link a{color:var(--navy);font-weight:600;} .overlap-hit-more{font-size:0.68rem;color:var(--muted);font-style:italic;padding:4px 0 0 2px;} /* ─── DEBATE PAGE (debate.html) ─── */ /* ─── Drawer Speeches tab CTA ─── */ /* Prominent gold button that sticks to the bottom of the drawer scroll container while the user reads a long speech, so the "Open full debate" action is always one click away. */ .debate-cta-wrap{position:sticky;bottom:0;margin-top:14px;padding:10px 0 4px;background:linear-gradient(180deg,rgba(248,249,250,0) 0%,var(--card-bg) 30%,var(--card-bg) 100%);border-top:1px solid var(--rule);z-index:5;text-align:center;} .debate-cta{display:inline-block;background:var(--cream);color:var(--muted);border:1px solid var(--rule);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:600;font-size:0.78rem;padding:8px 16px;border-radius:10px;text-decoration:none;transition:background 0.12s,color 0.12s,border-color 0.12s;} .debate-cta:hover{background:#fff;color:var(--navy);border-color:var(--navy);} .debate-cta span{margin-left:4px;} /* ─── Debate page ─── */ .masthead-sticky{position:sticky;top:0;z-index:1100;box-shadow:0 2px 12px rgba(26,18,8,0.3);padding-top:14px;padding-bottom:14px;} .masthead-sticky .masthead-rule{margin-top:4px;} .masthead-sticky h1{font-size:1.8rem;} .masthead-sticky .masthead-sub{font-size:0.6rem;} .debate-back-link{position:absolute;top:14px;left:20px;display:inline-flex;align-items:center;gap:5px;color:var(--muted);background:transparent;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;font-weight:500;text-decoration:none;padding:6px 10px;border-radius:6px;border:1px solid transparent;transition:all 0.15s;} .debate-back-link:hover{color:var(--navy);background:var(--cream);border-color:var(--rule);} .debate-wrap{width:100%;max-width:1280px;margin:0 auto;padding:30px 28px 60px;box-sizing:border-box;flex:1 0 auto;overflow-x:clip;} .debate-breadcrumb{margin-bottom:14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;} .debate-breadcrumb a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);transition:color 0.12s,border-color 0.12s;} .debate-breadcrumb a:hover{color:var(--navy);border-bottom-color:var(--navy);} .debate-sticky-section{position:sticky;top:66px;z-index:50;display:flex;align-items:center;gap:16px;margin:0 0 22px;padding:12px 18px;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 24px rgba(27,42,74,0.14),0 2px 6px rgba(27,42,74,0.08);} .debate-sticky-section::before{content:"";position:absolute;left:calc(-50vw + 50%);right:calc(-50vw + 50%);top:-11px;height:11px;background:var(--paper);z-index:-1;} .debate-sticky-back{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:#fff;background:var(--navy);border:1px solid var(--navy);border-radius:50%;text-decoration:none;box-shadow:0 2px 6px rgba(27,42,74,0.18);transition:background 0.15s,transform 0.15s,box-shadow 0.15s;} .debate-sticky-back:hover{background:#243660;transform:translateX(-2px);box-shadow:0 3px 10px rgba(27,42,74,0.28);} .debate-sticky-back:active{transform:translateX(-1px) scale(0.96);} .debate-sticky-back svg{display:block;} .debate-sticky-section .debate-header{flex:1;min-width:0;margin-bottom:0;padding-bottom:0;padding-right:0;border-bottom:none;} .debate-sticky-section .debate-title{font-size:1.35rem;margin:0;} .debate-sticky-section .debate-title-row{margin-bottom:3px;} .debate-sticky-section .debate-meta{font-size:0.74rem;} .debate-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .debate-title-row .debate-title{margin:0;flex:0 1 auto;} .debate-sticky-section .debate-share-header-btn{position:static;flex-shrink:0;width:22px;height:22px;padding:0;border-radius:50%;justify-content:center;} .debate-sticky-section .debate-share-header-btn svg{width:11px;height:11px;} .or-share-wrap,.debate-share-wrap{position:relative;flex-shrink:0;} .debate-share-wrap-contribution{margin-left:auto;} .or-share-menu,.debate-share-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:170px;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:0 8px 24px rgba(27,42,74,0.16),0 2px 6px rgba(27,42,74,0.08);padding:4px;z-index:60;} .debate-share-wrap-contribution .or-share-menu,.debate-share-wrap-contribution .debate-share-menu, .bills-share-wrap .or-share-menu{left:auto;right:0;} .or-share-wrap.open .or-share-menu,.debate-share-wrap.open .debate-share-menu{display:block;} .or-share-menu-item,.debate-share-menu-item{display:block;width:100%;text-align:left;background:transparent;border:none;border-radius:4px;padding:8px 12px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;font-weight:500;color:var(--ink);cursor:pointer;transition:background 0.1s,color 0.1s;} .or-share-menu-item:hover,.debate-share-menu-item:hover{background:var(--cream);color:var(--navy);} .debate-sticky-section .debate-share-header-btn span{display:none;} .debate-sticky-section .debate-share-header-btn.copied::after{content:"✓";font-size:0.85rem;font-weight:700;} .debate-sticky-filter{flex-shrink:0;display:flex;align-items:center;gap:6px;} .debate-sticky-filter input[type="search"]{padding:6px 10px;border:1px solid var(--rule);border-radius:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;color:var(--ink);background:#fff;outline:none;width:200px;transition:border-color 0.12s,box-shadow 0.12s;} .debate-filter-count{display:inline-flex;align-items:center;padding:3px 9px;background:rgba(27,42,74,0.08);color:var(--navy);border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0;white-space:nowrap;} .debate-sticky-filter input[type="search"]:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,0.1);} .debate-sticky-toggle{display:inline-flex;align-items:center;gap:4px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.7rem;color:var(--muted);cursor:pointer;white-space:nowrap;} .debate-sticky-toggle[data-tip]::before{bottom:auto;top:calc(100% + 7px);} .debate-sticky-toggle[data-tip]::after{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:var(--navy);} .debate-sticky-toggle input{margin:0;accent-color:var(--navy);} .debate-sticky-toggle:hover{color:var(--navy);} .debate-sticky-clear{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#fff;border:1px solid var(--rule);border-radius:50%;color:var(--muted);cursor:pointer;font-size:0.8rem;line-height:1;padding:0;transition:all 0.12s;} .debate-sticky-clear:hover{border-color:var(--navy);color:var(--navy);background:var(--cream);} .debate-filter-empty{padding:30px 20px;text-align:center;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.85rem;color:var(--muted);font-style:italic;background:var(--cream);border:1px dashed var(--rule);border-radius:6px;margin-top:10px;} .debate-error-card{max-width:520px;margin:60px auto;padding:36px 32px;background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-md);text-align:center;font-family:'Inter','Inter-fallback',system-ui,sans-serif;} .debate-error-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:rgba(196,146,42,0.14);color:#8a5f14;border-radius:50%;font-size:1.6rem;font-weight:800;margin-bottom:16px;} .debate-error-title{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:8px;} .debate-error-msg{font-size:0.84rem;color:var(--muted);line-height:1.55;margin-bottom:20px;} .debate-error-action{display:inline-block;padding:9px 18px;background:var(--navy);color:#fff;border-radius:6px;text-decoration:none;font-size:0.78rem;font-weight:600;transition:background 0.15s;} .debate-error-action:hover{background:#243660;} .debate-contribution-count{display:inline-flex;align-items:center;max-width:max-content;margin:0 auto 16px;padding:6px 14px;background:var(--cream);border:1px solid var(--rule);border-radius:999px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;font-weight:500;color:var(--muted);} .debate-contribution-count::before{content:attr(data-count) " ";color:var(--navy);font-weight:700;margin-right:4px;} .debate-end-marker{max-width:1200px;margin:24px auto 0;padding:14px 0;text-align:center;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;border-top:1px solid var(--rule);} @media (max-width:900px){ .debate-sticky-section{flex-wrap:wrap;padding:10px 18px;margin:0 -18px 18px;} .debate-sticky-filter{width:100%;} .debate-sticky-filter input[type="search"]{flex:1;width:auto;min-width:0;} } @media (max-width:720px){ .debate-wrap{padding:24px 18px 36px;} .debate-back-link{position:static;display:inline-flex;margin:0 auto 10px;} /* The ::before strip is a decorative page-coloured band that sits behind the sticky section to disguise the seam when it pins. On a phone the sticky section already spans edge-to-edge (margin:0 -18px above) so the strip has no seam to hide and can be dropped — shrinks the sticky's inner box and helps avoid any 1-2px right- edge slop that shows up as horizontal scroll on iOS. */ .debate-sticky-section::before{display:none;} /* top:55px deliberately overlaps the 56px masthead by ~1px. A clean top:56px reliably left a sub-pixel gap through which page content scrolled — the 1px overlap is invisible but closes the seam. */ .debate-sticky-section{top:55px;} /* Share icon lives inside the meta row on mobile (moved there in debate.js), so flex the meta so the button rides on the same line as the date/house/location bits instead of hogging its own row. */ .debate-sticky-section .debate-meta{display:flex;align-items:center;flex-wrap:wrap;column-gap:6px;row-gap:2px;} .debate-sticky-section .debate-meta .debate-share-wrap{margin-left:auto;} .debate-contribution{scroll-margin-top:130px;} } .debate-loading{padding:60px 0;text-align:center;color:var(--muted);font-style:italic;} /* Upgrade legacy inline loader strings (.data-loading, .bills-loading, .loading-msg) to the OpenRealm dots pattern — any element with these classes gains an animated 3-dot indicator above its text without changing the JS. */ .data-loading,.bills-loading,.loading-msg{position:relative;padding-top:56px !important;} .data-loading::before,.bills-loading::before,.loading-msg::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:40px;height:12px;background-image:radial-gradient(circle,var(--navy) 3px,transparent 4px),radial-gradient(circle,var(--navy) 3px,transparent 4px),radial-gradient(circle,var(--navy) 3px,transparent 4px);background-size:12px 12px;background-repeat:no-repeat;background-position:0 50%,14px 50%,28px 50%;animation:or-legacy-loader-pulse 1.4s infinite ease-in-out;} @keyframes or-legacy-loader-pulse{0%,80%,100%{opacity:0.4;}40%{opacity:1;}} .debate-error{padding:40px 0;} .debate-header{position:relative;margin-bottom:20px;border-bottom:1px solid var(--rule);padding-bottom:16px;padding-right:100px;} .debate-title{font-family:'Playfair Display',serif;font-size:1.9rem;line-height:1.2;color:var(--navy);margin:0 0 8px;font-weight:900;letter-spacing:-0.01em;} .debate-meta{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;color:var(--muted);letter-spacing:0;line-height:1.4;} .debate-share-header-btn{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:7px 12px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;font-weight:600;color:var(--navy);cursor:pointer;transition:border-color 0.12s,background 0.12s,color 0.12s;} .debate-share-header-btn:hover{border-color:var(--navy);background:var(--cream);} .debate-share-header-btn.copied{background:rgba(196,146,42,0.15);border-color:var(--gold);color:#7a5010;} .debate-share-header-btn.copied::after{content:"Copied!";} .debate-share-header-btn.copied span{display:none;} .debate-share-header-btn.copied svg{display:none;} @media (max-width:640px){ .debate-header{padding-right:0;} .debate-share-header-btn{position:static;margin-top:10px;} } .debate-overlap-banner{max-width:1200px;margin:0 auto 22px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:14px 18px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;line-height:1.6;color:var(--ink);box-shadow:var(--shadow-sm);} .debate-overlap-banner::before{content:"⚠";display:inline-block;color:var(--gold);font-size:1rem;margin-right:8px;vertical-align:-1px;} .debate-overlap-banner a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px dotted var(--navy);} .debate-overlap-banner a:hover{border-bottom-style:solid;} .debate-overlap-banner-note{font-size:0.7rem;color:var(--muted);font-style:italic;margin-top:6px;} .debate-contributions{display:flex;flex-direction:column;gap:0;max-width:1200px;margin:0 auto;} .debate-timestamp{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;text-align:center;padding:14px 0 6px;margin:0;} .debate-contribution{padding:14px 0 16px;border-top:1px solid var(--rule);transition:background 0.12s;scroll-margin-top:170px;} .debate-contribution:first-child{border-top:none;padding-top:6px;} .debate-contribution:target{background:rgba(196,146,42,0.08);} .debate-speaker-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px;} .debate-speaker-avatar{position:relative;width:32px;height:32px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--cream);box-shadow:0 2px 8px rgba(27,42,74,0.18);} .debate-speaker-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;} .debate-speaker-avatar-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;font-weight:700;color:var(--navy);letter-spacing:0.02em;} .debate-speaker-avatar.no-photo{background:var(--cream);border:1px solid var(--rule);box-shadow:none;} .debate-speaker-avatar.no-photo .debate-speaker-avatar-initials{color:var(--muted);} .debate-speaker{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.95rem;font-weight:700;color:var(--navy);text-decoration:none;line-height:1.3;letter-spacing:-0.01em;} span.debate-speaker{color:var(--ink);cursor:default;} a.debate-speaker{border-bottom:1px solid transparent;cursor:pointer;} a.debate-speaker:hover{color:var(--red);border-bottom-color:var(--red);} .debate-overlap-pill{background:rgba(196,146,42,0.16);color:#7a5010;border:1px solid rgba(196,146,42,0.35);border-radius:10px;padding:2px 9px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.64rem;font-weight:700;cursor:pointer;letter-spacing:0.02em;} .debate-share-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:1px solid var(--rule);border-radius:50%;color:var(--muted);cursor:pointer;padding:0;transition:border-color 0.12s,color 0.12s,background 0.12s;} .debate-share-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--cream);} .debate-share-btn.copied{border-color:var(--gold);color:#7a5010;background:rgba(196,146,42,0.15);} .debate-overlap-pill:hover{background:var(--gold);color:var(--ink);} .debate-overlap-detail{margin:8px 0 10px;padding:10px 14px;background:var(--cream);border:1px solid var(--rule);border-radius:6px;font-size:0.78rem;line-height:1.55;color:var(--ink);} .debate-overlap-detail-row{padding:4px 0;} .debate-overlap-detail-row + .debate-overlap-detail-row{border-top:1px dotted var(--rule);margin-top:4px;} .debate-overlap-detail-cat{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);font-weight:700;} .debate-overlap-detail-sub{font-size:0.68rem;color:var(--muted);margin-top:3px;} .debate-overlap-detail-sub code{background:var(--card-bg);padding:1px 5px;border-radius:6px;} .debate-overlap-detail-sub a{color:var(--navy);font-weight:600;} .debate-body{font-family:'Source Serif 4',Georgia,serif;font-size:0.95rem;line-height:1.7;color:var(--ink);} .debate-body mark{background:rgba(196,146,42,0.22);color:inherit;padding:0 2px;border-radius:2px;font-weight:600;} .debate-body p{margin:0 0 10px;} .debate-body p:last-child{margin-bottom:0;} .debate-footer{max-width:1200px;margin:36px auto 0;padding-top:18px;border-top:1px solid var(--rule);font-size:0.72rem;color:var(--muted);line-height:1.55;} .debate-footer p{margin-bottom:10px;} .debate-footer a{color:var(--navy);} .debate-disclaimer{background:var(--cream);padding:12px 16px;border:1px solid var(--rule);border-radius:6px;margin-top:14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;line-height:1.55;color:var(--ink);} /* ─── BILLS & DIVISIONS PAGE (bills.html) ─── */ .bills-wrap{max-width:1280px;margin:0 auto;padding:24px 28px 48px;} .bills-page-header{margin-bottom:18px;} .bills-page-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px;} .bills-page-title{align-self:baseline;} .bills-filters-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:7px 14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.75rem;font-weight:600;color:var(--navy);cursor:pointer;transition:all 0.12s;} .bills-filters-toggle:hover{border-color:var(--navy);background:var(--cream);} .bills-filters-toggle.open{background:var(--navy);color:#fff;border-color:var(--navy);} .bills-filters-toggle-icon{display:inline-block;width:12px;height:12px;} .bills-filters.bills-filters-collapsed{max-height:0;overflow:hidden;padding:0;margin:0;border:none;transition:max-height 0.25s ease;} .bills-filters.bills-filters-open{max-height:500px;transition:max-height 0.35s ease;} .bills-page-title{font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;font-weight:900;color:var(--navy);margin:0;letter-spacing:-0.01em;} .bills-page-count{display:inline-flex;align-items:center;padding:5px 12px;background:var(--cream);border:1px solid var(--rule);border-radius:999px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:500;color:var(--muted);white-space:nowrap;} .bills-page-count::before{content:attr(data-count) " ";color:var(--navy);font-weight:700;margin-right:4px;} .bills-page-lede{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.88rem;color:var(--muted);line-height:1.6;margin:0;max-width:640px;} .bills-filters{margin-bottom:14px;} .bills-filters-card{margin-bottom:14px;} .bills-filter-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;} .bills-filter-label{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);font-weight:700;margin-right:4px;} .bills-filter-sep{color:var(--rule);margin:0 4px;} .bills-filter-chip{background:var(--card-bg);color:var(--ink);border:1px solid var(--rule);padding:5px 12px;font-size:0.72rem;border-radius:14px;cursor:pointer;font-family:inherit;transition:all 0.12s;} .bills-filter-chip:hover{border-color:var(--navy);} .bills-filter-chip.active{background:var(--navy);color:var(--paper);border-color:var(--navy);} .bills-search-input{flex:1;min-width:160px;max-width:280px;padding:5px 10px;border:1px solid var(--rule);background:var(--card-bg);font-family:inherit;font-size:0.74rem;border-radius:14px;} .bills-search-input:focus{outline:none;border-color:var(--navy);} .bills-date-input{padding:4px 8px;border:1px solid var(--rule);background:var(--card-bg);font-family:inherit;font-size:0.72rem;border-radius:6px;color:var(--ink);} .bills-date-input:focus{outline:none;border-color:var(--navy);} .bills-layout{display:grid;grid-template-columns:minmax(320px, 0.8fr) minmax(0, 1.2fr);gap:18px;align-items:start;} .bills-list-col{background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow-sm);padding:6px;align-self:start;} .bills-list{padding:0;display:flex;flex-direction:column;gap:0;} .bills-detail-col{align-self:start;} .bills-list{display:flex;flex-direction:column;gap:0;} .bills-loading,.bills-empty,.bills-error{padding:30px 16px;text-align:center;color:var(--muted);font-style:italic;font-size:0.85rem;} .bills-list-count-pill{display:inline-flex;align-items:center;max-width:max-content;margin:0 0 12px;padding:6px 14px;background:var(--cream);border:1px solid var(--rule);border-radius:999px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:500;color:var(--muted);} .bills-list-count-pill::before{content:attr(data-count) " ";color:var(--navy);font-weight:700;margin-right:4px;} .bills-card-empty{padding:36px 24px;background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow-sm);text-align:center;font-family:'Inter','Inter-fallback',system-ui,sans-serif;} .bills-card-empty-title{font-size:0.95rem;font-weight:700;color:var(--navy);margin-bottom:6px;} .bills-card-empty-body{font-size:0.78rem;color:var(--muted);line-height:1.5;} .bills-error{color:var(--red);} .bills-card{background:transparent;border:none;border-radius:4px;padding:10px 12px;cursor:pointer;transition:background 0.12s;position:relative;} .bills-card + .bills-card{border-top:1px solid var(--rule);} .bills-card:hover{background:var(--cream);} .bills-card.active{background:rgba(196,146,42,0.08);} .bills-card-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.9rem;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:5px;letter-spacing:-0.005em;} .bills-card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:0.68rem;color:var(--muted);} .bills-card-stage,.bills-card-house,.bills-card-type,.bills-card-votes,.bills-card-date{white-space:nowrap;} .bills-card-stage{color:var(--navy);font-weight:600;} .bills-card-updated{font-size:0.64rem;color:var(--muted);margin-top:4px;letter-spacing:0.03em;opacity:0.8;} .bills-result{font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:0.02em;} .bills-result.pass{background:rgba(27,42,74,0.1);color:var(--navy);} .bills-result.fail{background:rgba(196,146,42,0.15);color:#7a5010;} .bills-result.unk{background:var(--rule);color:var(--muted);} .bills-splitbar{height:4px;background:var(--rule);border-radius:6px;overflow:hidden;margin-top:8px;} .bills-splitbar-aye{height:100%;background:var(--navy);} .bills-detail{background:#fff;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow-sm);} .bills-detail-empty{padding:48px 24px;text-align:center;color:var(--muted);font-style:italic;} .bills-detail-inner{padding:0 24px 24px;} .bills-detail-sticky{position:sticky;top:56px;z-index:10;background:#fff;padding:16px 0 12px;margin:0 -24px 16px;padding-left:24px;padding-right:24px;border-bottom:1px solid var(--rule);box-shadow:0 2px 8px rgba(27,42,74,0.04);} .bills-detail-sticky-row{display:flex;align-items:flex-start;gap:12px;} .bills-detail-header{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--rule);} .bills-detail-title{font-family:'Playfair Display',serif;font-size:1.4rem;line-height:1.2;color:var(--navy);margin:0;font-weight:900;flex:1;min-width:0;letter-spacing:-0.01em;} .bills-detail-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:0.72rem;color:var(--muted);} .bills-share-btn,.or-share-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;background:transparent;border:1px solid var(--rule);border-radius:50%;color:var(--muted);cursor:pointer;padding:0;transition:border-color 0.12s,color 0.12s,background 0.12s;font-size:0;line-height:0;} .or-share-btn::before{content:'';display:block;width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat;} .bills-share-btn:hover,.or-share-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--cream);} .bills-share-btn.copied,.or-share-btn.copied{border-color:var(--gold);color:#7a5010;background:rgba(196,146,42,0.15);} .bills-summary{font-size:0.88rem;line-height:1.6;color:var(--ink);margin-bottom:16px;font-family:'Source Serif 4',Georgia,serif;} .bills-section-title{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);font-weight:700;margin:16px 0 8px;} .bills-sponsors{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;} .bills-sponsor{display:flex;align-items:center;gap:8px;font-size:0.82rem;padding:4px 0;flex-wrap:wrap;} .bills-sponsor-name{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px dotted var(--navy);} .bills-sponsor-name:hover{color:var(--red);border-bottom-color:var(--red);} .bills-sponsor-party{font-size:0.68rem;color:var(--muted);} .bills-overlap-pill{background:rgba(196,146,42,0.16);color:#7a5010;border:1px solid rgba(196,146,42,0.35);border-radius:10px;padding:2px 9px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.02em;margin-left:4px;} .bills-overlap-pill.small{padding:1px 7px;font-size:0.58rem;} .bills-stages{display:flex;flex-direction:column;gap:0;position:relative;} .bills-stage-row{display:flex;gap:12px;padding:8px 0;position:relative;} .bills-stage-row::before{content:'';position:absolute;left:5px;top:18px;bottom:-8px;width:2px;background:var(--rule);} .bills-stage-row:last-child::before{display:none;} .bills-stage-dot{width:12px;height:12px;border-radius:50%;background:var(--rule);flex-shrink:0;margin-top:4px;position:relative;z-index:1;} .bills-stage-row.done .bills-stage-dot{background:var(--gold);} .bills-stage-row.current .bills-stage-dot{background:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,0.2);} .bills-stage-row.done::before{background:var(--gold);} .bills-stage-body{flex:1;min-width:0;} .bills-stage-name{font-size:0.82rem;font-weight:600;color:var(--ink);} .bills-stage-row.done .bills-stage-name{color:var(--navy);} .bills-stage-row.current .bills-stage-name{color:var(--navy);font-weight:700;} .bills-stage-meta{font-size:0.68rem;color:var(--muted);margin-top:2px;} .bills-stat-row{display:flex;gap:12px;margin-bottom:16px;} .bills-stat{flex:1;background:var(--cream);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;text-align:center;} .bills-stat-num{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.015em;color:var(--navy);line-height:1.1;} .bills-stat-lbl{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-top:3px;} .or-relevant-data{margin:14px 0 18px;padding:12px 16px;background:var(--cream);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:4px;} .or-relevant-data-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px;} .or-relevant-data-links{display:flex;flex-wrap:wrap;gap:8px;} .or-relevant-data-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1px solid var(--rule);border-radius:20px;text-decoration:none;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;font-weight:600;color:var(--navy);transition:border-color 0.12s,color 0.12s,background 0.12s;} .or-relevant-data-link:hover{border-color:var(--gold);background:#fff;color:var(--gold);} .or-relevant-data-link-arrow{font-size:0.88rem;opacity:0.7;} .bills-dot-matrix{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:10px 0 16px;padding:10px 12px;background:var(--cream);border:1px solid var(--rule);border-radius:6px;} .bills-dot-matrix-side{min-width:0;} .bills-dot-matrix-label{font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px;} .bills-dot-matrix-ayes .bills-dot-matrix-label{color:#1b5a2a;} .bills-dot-matrix-noes .bills-dot-matrix-label{color:#922;} .bills-dot-matrix-teller{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);font-size:0.62rem;} .bills-dot-matrix-grid{display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start;} .bills-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 auto;background:#999;} .bills-dot[data-party="Lab"] {background:#d62828;} .bills-dot[data-party="Con"] {background:#0087dc;} .bills-dot[data-party="LD"] {background:#faa61a;} .bills-dot[data-party="Green"]{background:#6ab023;} .bills-dot[data-party="SNP"] {background:#fff95d;} .bills-dot[data-party="PC"] {background:#008142;} .bills-dot[data-party="RUK"] {background:#12b6cf;} .bills-dot[data-party="DUP"] {background:#d46a4c;} .bills-dot[data-party="SF"] {background:#326760;} .bills-dot[data-party="SDLP"] {background:#2aa82c;} .bills-dot[data-party="APNI"] {background:#f6cb2f;} .bills-dot[data-party="UUP"] {background:#48a5ee;} .bills-dot[data-party="Ind"] {background:#808080;} .bills-dot[data-party="Spk"] {background:#222;} .bills-dot[data-party="TUV"] {background:#0095b6;} @media (max-width:680px){.bills-dot-matrix{grid-template-columns:1fr;gap:12px;}} .bills-charts{display:grid;grid-template-columns:180px 1fr;gap:18px;margin-bottom:18px;align-items:start;} .bills-chart-col{min-width:0;} .bills-donut{width:100%;max-width:180px;height:auto;} .bills-party-bars{width:100%;height:auto;} .bills-voters{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .bills-voter-col{background:var(--cream);border:1px solid var(--rule);padding:10px 12px;border-radius:6px;max-height:340px;overflow-y:auto;} .bills-voter{padding:3px 0;font-size:0.74rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .bills-voter a{color:var(--navy);text-decoration:none;border-bottom:1px dotted transparent;} .bills-voter a:hover{border-bottom-color:var(--navy);} .bills-voter-party{font-size:0.62rem;color:var(--muted);} .bills-voter-empty{color:var(--muted);font-style:italic;font-size:0.72rem;} .bills-canonical{margin-top:16px;padding-top:10px;border-top:1px solid var(--rule);font-size:0.72rem;} .bills-canonical a{color:var(--navy);} .bills-cache-note{margin-top:16px;padding:10px 14px;background:#fff8ec;border:1px solid var(--rule);border-radius:6px;font-size:0.72rem;color:var(--muted);line-height:1.5;} .bills-cache-note a{color:var(--navy);font-weight:700;} .bills-bill-context{background:var(--cream);border:1px solid var(--rule);padding:12px 14px;border-radius:6px;margin-bottom:16px;} .bills-bill-context-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:4px;} .bills-bill-context-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:0.68rem;color:var(--muted);margin-bottom:8px;} .bills-bill-context-meta span{white-space:nowrap;} .bills-bill-context-stage{color:var(--navy);font-weight:600;} .bills-bill-context-summary{font-family:'Source Serif 4',Georgia,serif;font-size:0.82rem;line-height:1.6;color:var(--ink);margin-bottom:10px;} .bills-bill-context-link{font-size:0.72rem;} .bills-bill-context-link a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--navy);} .bills-bill-context-link a:hover{border-bottom-style:solid;} /* Bill detail — enriched header, pills, status, sponsor breakdown, publications, linked divisions */ .bills-long-title{font-family:'Source Serif 4',Georgia,serif;font-size:0.85rem;color:var(--muted);font-style:italic;line-height:1.45;margin:4px 0 8px;} .bills-status-row{margin:6px 0 8px;} .bills-status{display:inline-block;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.66rem;font-weight:700;padding:3px 10px;border-radius:10px;letter-spacing:0.04em;text-transform:uppercase;} .bills-status.act{background:rgba(27,42,74,0.1);color:var(--navy);} .bills-status.def{background:rgba(196,146,42,0.15);color:#7a5010;} .bills-status.wdr{background:var(--rule);color:var(--muted);} .bills-status.live{background:rgba(27,42,74,0.12);color:var(--navy);} .bills-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;} .bills-pill{font-size:0.62rem;background:var(--cream);border:1px solid var(--rule);color:var(--ink);padding:2px 8px;border-radius:10px;letter-spacing:0.02em;} .bills-pill-muted{color:var(--muted);background:transparent;} .bills-party-breakdown{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;} .bills-party-pill{font-size:0.62rem;background:rgba(27,42,74,0.06);color:var(--navy);padding:2px 9px;border-radius:10px;border:1px solid rgba(27,42,74,0.15);} .bills-party-pill strong{color:var(--navy);font-weight:700;margin-right:3px;} .bills-publications{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;} .bills-publication{padding:6px 0;border-bottom:1px dotted var(--rule);} .bills-publication:last-child{border-bottom:none;} .bills-publication-name{font-size:0.82rem;color:var(--ink);} .bills-publication-name a{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--navy);} .bills-publication-name a:hover{border-bottom-style:solid;color:var(--red);} .bills-publication-meta{display:flex;gap:8px;font-size:0.66rem;color:var(--muted);margin-top:2px;} .bills-publication-type{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;font-size:0.6rem;} .bills-publication-all{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);font-size:0.72rem;} .bills-publication-all a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--navy);} .bills-publication-all a:hover{border-bottom-style:solid;color:var(--red);} .bills-linked-divisions{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;} .bills-linked-division{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--cream);border:1px solid var(--rule);border-radius:6px;font-size:0.78rem;color:var(--ink);text-decoration:none;transition:all 0.12s;} .bills-linked-division:hover{border-color:var(--navy);background:#f4f6fb;} .bills-linked-title{flex:1;min-width:0;color:var(--navy);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bills-linked-date{color:var(--muted);font-size:0.66rem;font-family:'JetBrains Mono',monospace;} /* Bill detail — rich-info additions */ .bills-former-title{font-size:0.7rem;color:var(--muted);font-style:italic;margin:2px 0 6px;} .bills-pill-next{background:rgba(45,106,79,0.12);color:#1a4a2e;border-color:rgba(45,106,79,0.3);} .bills-lead-org{font-size:0.78rem;margin:0 0 8px;color:var(--ink);} .bills-lead-org-label{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);font-weight:700;margin-right:4px;} .bills-lead-org a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px dotted var(--navy);} .bills-lead-org a:hover{border-bottom-style:solid;color:var(--red);} .bills-sponsor-lead{display:inline-block;background:var(--gold);color:var(--ink);font-size:0.55rem;font-weight:700;letter-spacing:0.05em;padding:1px 6px;border-radius:8px;margin-right:6px;vertical-align:middle;} .bills-sponsor-from{font-size:0.66rem;color:var(--muted);} .bills-private{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .bills-private-row{font-size:0.78rem;color:var(--ink);line-height:1.5;} .bills-private-label{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);font-weight:700;display:inline-block;min-width:130px;} .bills-news{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;} .bills-news-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px dotted var(--rule);} .bills-news-row:last-child{border-bottom:none;} .bills-news-row a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--navy);font-size:0.82rem;flex:1;} .bills-news-row a:hover{border-bottom-style:solid;color:var(--red);} .bills-news-date{font-size:0.66rem;color:var(--muted);font-family:'JetBrains Mono',monospace;flex-shrink:0;} .bills-list-footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 4px;margin-top:6px;border-top:1px dotted var(--rule);} .bills-list-count{font-size:0.7rem;color:var(--muted);font-style:italic;} .bills-load-more{background:var(--cream);color:var(--muted);border:1px solid var(--rule);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:600;font-size:0.76rem;padding:8px 16px;border-radius:10px;cursor:pointer;transition:background 0.12s,color 0.12s,border-color 0.12s;} .bills-load-more:hover{background:#fff;color:var(--navy);border-color:var(--navy);} .bills-load-more:disabled{opacity:0.5;cursor:not-allowed;transform:none;} .bills-load-more-row{display:flex;justify-content:center;padding:14px 0 6px;} /* Division detail — rich-info additions */ .bills-pill-flag{background:rgba(122,74,0,0.12);color:#7a4a00;border-color:rgba(122,74,0,0.3);} .bills-double-majority{background:#fff8ec;border:1px solid var(--rule);padding:10px 14px;font-size:0.78rem;line-height:1.5;color:var(--ink);margin-bottom:14px;border-radius:6px;} .bills-cross-summary{background:var(--cream);border:1px solid var(--rule);padding:10px 14px;font-size:0.82rem;line-height:1.5;color:var(--ink);margin-bottom:14px;border-radius:6px;} .bills-cross-summary strong{color:var(--navy);font-size:1rem;} .bills-cross-summary-hint{font-size:0.7rem;color:var(--muted);font-style:italic;} .bills-tellers{margin-bottom:14px;} .bills-tellers-row{font-size:0.78rem;color:var(--ink);padding:4px 0;} .bills-tellers-label{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);font-weight:700;margin-right:6px;} .bills-tellers-note{font-size:0.66rem;color:var(--muted);font-style:italic;margin-top:4px;} .bills-teller{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--navy);} .bills-teller:hover{color:var(--red);border-bottom-color:var(--red);} .bills-voter-from{font-size:0.62rem;color:var(--muted);} .bills-voter-proxy{font-size:0.6rem;color:var(--muted);font-style:italic;background:var(--cream);padding:1px 6px;border-radius:8px;margin-left:4px;} .bills-cross-pill{display:inline-block;background:rgba(122,74,0,0.14);color:#7a4a00;border:1px solid rgba(122,74,0,0.3);font-size:0.58rem;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:4px;letter-spacing:0.02em;} .bills-novote-col{margin-bottom:14px;max-height:340px;} .bills-verified{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule);font-size:0.66rem;color:var(--muted);font-style:italic;text-align:right;font-family:'JetBrains Mono',monospace;} /* ─── PUBLICATION METADATA PAGE (publication.html) ─── */ .pub-wrap{max-width:760px;margin:0 auto;padding:36px 24px 48px;} .pub-card{background:var(--card-bg);border:1px solid var(--rule);border-radius:6px;padding:28px 32px;} .pub-type{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--gold);font-weight:700;margin-bottom:6px;} .pub-title{font-family:'Playfair Display',serif;font-size:1.7rem;line-height:1.2;color:var(--navy);margin:0 0 8px;font-weight:900;} .pub-meta-row{font-size:0.82rem;color:var(--muted);margin-bottom:14px;} .pub-type-desc{font-family:'Source Serif 4',Georgia,serif;font-size:0.88rem;line-height:1.6;color:var(--ink);background:var(--cream);border:1px solid var(--rule);padding:12px 16px;margin-bottom:20px;border-radius:6px;} .pub-open-btn{display:inline-block;background:var(--cream);color:var(--muted);border:1px solid var(--rule);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:600;font-size:0.78rem;padding:8px 16px;border-radius:10px;text-decoration:none;transition:background 0.12s,color 0.12s,border-color 0.12s;margin-bottom:18px;} .pub-open-btn:hover{background:#fff;color:var(--navy);border-color:var(--navy);} .pub-card-note{font-size:0.74rem;color:var(--muted);line-height:1.6;font-style:italic;padding-top:14px;border-top:1px solid var(--rule);} .pub-back-row{margin-top:18px;text-align:center;} .pub-back-to-bill{font-size:0.78rem;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);} .pub-back-to-bill:hover{color:var(--navy);border-bottom-color:var(--navy);} @media(max-width:720px){ .pub-wrap{padding:24px 14px 32px;} .pub-card{padding:22px 20px;} } .bills-footer{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);font-size:0.7rem;color:var(--muted);line-height:1.55;} .bills-footer p{margin-bottom:8px;} .bills-footer a{color:var(--navy);} .bills-disclaimer{background:var(--cream);padding:12px 16px;border:1px solid var(--rule);border-radius:6px;margin-top:8px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;line-height:1.55;color:var(--ink);} @media(max-width:900px){ .bills-layout{grid-template-columns:1fr;} .bills-list-col{max-height:none;} .bills-detail-col{position:static;max-height:none;} .bills-charts{grid-template-columns:1fr;} .bills-voters{grid-template-columns:1fr;} } .party-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:0.03em;margin-right:3px;} a.party-badge{text-decoration:none;cursor:pointer;} a.party-badge:hover{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(0,0,0,0.08);} .mp-int-count{text-align:right;flex-shrink:0;} .int-num{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:-0.015em;color:var(--navy);line-height:1.1;} .int-num.lords-num{color:var(--lords);} .int-num.none{color:var(--rule);} .int-lbl{font-size:0.5rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);} /* DRAWER */ .drawer-backdrop{position:fixed;inset:0;background:rgba(26,18,8,0.55);opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1900;} .drawer-backdrop.open{opacity:1;pointer-events:auto;} /* Drawer z-index must sit above Leaflet's stack (panes 200-700, controls 1000) AND the sticky masthead (1100) — otherwise the map or header renders on top of the drawer. 2000 covers both. */ /* height:100dvh (dynamic viewport height) tracks the actual visible viewport as the mobile URL bar shows/hides, instead of 100vh which always equals the *large* viewport and left the drawer's bottom content clipped below the visible area — hence the "can't scroll to the bottom of a tab until I rotate" bug the user reported. 100vh stays as a fallback for browsers pre-dating dvh (Safari <15.4). */ .drawer{position:fixed;right:0;top:0;bottom:0;height:100vh;height:100dvh;width:var(--drawer-w);max-width:96vw;background:#fff;border-left:1px solid var(--rule);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);flex-shrink:0;overflow:hidden;z-index:2000;box-shadow:-8px 0 32px rgba(0,0,0,0.12);} .drawer.open{transform:translateX(0);} .drawer-header{background:var(--navy);color:#fff;padding:16px 20px 14px;flex-shrink:0;position:relative;display:flex;align-items:flex-start;gap:14px;} .drawer-header.lords{background:var(--lords);} .drawer-header-top{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0;} .drawer-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:700;color:rgba(255,255,255,0.9);flex-shrink:0;overflow:hidden;position:relative;background:#3a4e6a;border:2px solid rgba(255,255,255,0.15);align-self:flex-start;} .drawer-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;} .drawer-mp-info{flex:1;min-width:0;padding:0 62px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:3px;} .drawer-name{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.15rem;font-weight:700;line-height:1.2;color:#fff;letter-spacing:-0.005em;} /* Force meta / verified / chips to their own rows beneath the name+salary row. */ .drawer-meta,.drawer-verified,.drawer-chips{flex-basis:100%;} .drawer-meta{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;color:rgba(255,255,255,0.6);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .drawer-salary{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;color:rgba(255,255,255,0.85);letter-spacing:0.005em;} .drawer-salary strong{color:var(--gold);font-weight:700;font-size:0.9rem;} .drawer-salary-unit{color:rgba(255,255,255,0.55);font-weight:500;font-size:0.72rem;} .drawer-salary-sub{color:rgba(255,255,255,0.55);font-size:0.66rem;font-weight:500;letter-spacing:0.01em;margin-top:2px;line-height:1.3;} .drawer-salary-outside{display:inline-block;margin-top:4px;padding:2px 8px;font-size:0.64rem;font-weight:600;background:rgba(201,166,62,0.22);color:#e8d08b;border:1px solid rgba(201,166,62,0.35);border-radius:10px;letter-spacing:0.02em;} .drawer-source{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.63rem;color:#6fcea8;margin-top:6px;display:inline-flex;align-items:center;gap:3px;} .drawer-close{position:absolute;top:12px;right:14px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:rgba(255,255,255,0.7);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;} .drawer-close:hover{background:rgba(255,255,255,0.22);color:#fff;} /* Unicode ⤢ (U+2922) is poorly supported in Android Chrome's Roboto — rendered as a spindly one-pixel-wide arrow regardless of font-size. Hide the text character with color:transparent+font-size:0 (it's still in the DOM as an a11y fallback) and paint a feather-style "maximize-2" SVG via background-image. Size is controlled with background-size so the mobile override only needs to bump that, not the font-size. */ .drawer-expand{position:absolute;top:12px;right:46px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.1) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffffcc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") center/13px no-repeat;border:none;color:transparent;font-size:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;} .drawer-expand:hover{background-color:var(--gold);} .member-full-page .drawer-expand{display:none;} /* Drawer chips (mockup): flat row of pills including the primary gold count */ .drawer-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;} .drawer-chip{padding:3px 9px;background:rgba(255,255,255,0.1);border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.64rem;font-weight:600;color:rgba(255,255,255,0.82);} .drawer-chip.gold{background:rgba(196,146,42,0.28);color:var(--gold);} /* Avatar initials overlay (visible when .no-photo) */ .drawer-avatar-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:700;color:rgba(255,255,255,0.9);opacity:0;pointer-events:none;} .drawer-avatar.no-photo .drawer-avatar-initials{opacity:1;} .drawer-avatar.no-photo img{display:none;} .drawer-verified{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.7rem;color:#6fcea8;margin-top:5px;display:inline-flex;align-items:center;gap:3px;} /* Legacy drawer-stats (used by bills/member pages before the chip refactor) */ .drawer-stat-val{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-0.015em;color:var(--gold);} .drawer-stat-lbl{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.52rem;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.55);line-height:1.3;margin-top:2px;font-weight:600;} /* Drawer tabs — 5 primary + "More ▾" overflow dropdown */ .drawer-more{margin-left:auto;padding:10px 12px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.73rem;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px;border-bottom:2px solid transparent;border-left:1px solid var(--rule);transition:all 0.15s;position:relative;flex-shrink:0;user-select:none;} .drawer-more:hover{color:var(--navy);background:var(--cream);} .drawer-more.active-parent{color:var(--navy);border-bottom-color:var(--gold);font-weight:600;} .drawer-more-dropdown{position:fixed;min-width:180px;background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-md);padding:4px;display:none;z-index:2100;} .drawer-more.open .drawer-more-dropdown{display:block;} .drawer-more-item{display:block;padding:9px 13px;border-radius:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;font-weight:500;color:var(--ink);cursor:pointer;transition:background 0.12s;white-space:nowrap;} .drawer-more-item:hover{background:var(--cream);color:var(--navy);} .drawer-more-item.active{color:var(--navy);font-weight:600;background:rgba(196,146,42,0.12);} .drawer-body{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain;} /* Disable CSS pseudo-element tooltips inside the drawer — overflow clips them. JS renders a fixed-position tooltip on document.body instead. */ .drawer-body [data-tip]::before, .drawer-body [data-tip]::after{display:none !important;} /* Fixed JS tooltip — appended to body, never clipped */ .or-tooltip{position:fixed;z-index:9999;background:var(--navy);color:#fff;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;font-weight:500;line-height:1.4;padding:7px 11px;border-radius:6px;box-shadow:var(--shadow-md);max-width:220px;text-align:center;pointer-events:none;opacity:0;transition:opacity 0.12s;} .or-tooltip.visible{opacity:1;} .or-tooltip-arrow{position:absolute;left:50%;transform:translateX(-50%);border:5px solid transparent;} .or-tooltip-arrow.above{bottom:-10px;border-top-color:var(--navy);} .or-tooltip-arrow.below{top:-10px;border-bottom-color:var(--navy);} /* Lock the background page scroll whenever a drawer is open so the wheel/touch scroll stays inside the drawer and doesn't bleed into the MP grid behind. */ /* Background stays scrollable when the drawer is open — the drawer has its own overflow-y:auto + overscroll-behavior:contain so scroll doesn't bleed through. Removed overflow:hidden to let the user continue browsing the grid behind the panel. */ .drawer-empty{padding:40px 24px;text-align:center;color:var(--muted);font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:0.83rem;line-height:1.6;} /* ─── ABOUT / METHODOLOGY (long-form editorial pages) ─── */ .about-wrap{max-width:820px;margin:0 auto;padding:30px 24px 60px;font-family:'Source Serif 4',Georgia,serif;color:var(--ink);line-height:1.65;} .about-wrap h1{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.85rem;font-weight:800;letter-spacing:-0.02em;color:var(--navy);margin:0 0 6px;line-height:1.15;} .about-wrap h2{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin:32px 0 14px;display:flex;align-items:center;gap:10px;} .about-wrap h2::after{content:'';flex:1;height:1px;background:var(--rule);} .about-wrap h3{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.95rem;font-weight:700;color:var(--navy);margin:22px 0 8px;} .about-wrap p{margin-bottom:12px;font-size:0.93rem;} .about-wrap ul,.about-wrap ol{margin:8px 0 14px 22px;font-size:0.9rem;} .about-wrap li{margin-bottom:6px;} .about-wrap a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(27,42,74,0.3);transition:color 0.15s,border-color 0.15s;} .about-wrap a:hover{color:var(--red);border-bottom-color:var(--red);} .about-lede{font-family:'Source Serif 4',Georgia,serif;font-size:1.05rem;color:var(--muted);font-style:italic;margin:6px 0 28px;line-height:1.6;} .about-back{display:inline-block;margin-bottom:14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);} .about-back:hover{color:var(--navy);border-bottom-color:var(--navy);} .about-box{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:16px 20px;margin:18px 0 22px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.86rem;line-height:1.6;color:var(--ink);box-shadow:var(--shadow-sm);} .about-box strong{color:var(--navy);font-weight:700;} .about-principle{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:14px 18px;margin:12px 0;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.86rem;line-height:1.6;color:var(--ink);box-shadow:var(--shadow-sm);} .about-principle strong{color:var(--navy);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:700;} /* ─── EDITORIAL ACCEPTANCE MODAL ─── */ .editorial-modal-backdrop{position:fixed;inset:0;background:rgba(26,18,8,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10000;opacity:0;transition:opacity 0.2s ease;} .editorial-modal-backdrop.open{opacity:1;} .editorial-modal-backdrop.closing{opacity:0;} .editorial-modal{background:#fff;border-radius:10px;box-shadow:0 24px 56px rgba(0,0,0,0.28);max-width:520px;width:100%;max-height:92vh;overflow-y:auto;padding:32px 32px 24px;transform:translateY(10px);transition:transform 0.22s ease;font-family:'Inter','Inter-fallback',system-ui,sans-serif;} .editorial-modal-backdrop.open .editorial-modal{transform:translateY(0);} .editorial-modal h2{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;font-weight:800;color:var(--navy);margin:0 0 10px;letter-spacing:-0.01em;line-height:1.2;} .editorial-modal-lede{font-size:0.92rem;line-height:1.55;color:var(--ink);margin:0 0 20px;} .editorial-modal-points{display:flex;flex-direction:column;gap:14px;margin-bottom:22px;} .editorial-modal-point{padding:2px 0 2px 14px;border-left:2px solid var(--rule);} .editorial-modal-point-warn{border-left-color:#8b1a1a;} .editorial-modal-point-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--navy);margin-bottom:4px;} .editorial-modal-point-warn .editorial-modal-point-label{color:#8b1a1a;} .editorial-modal-point-body{font-size:0.86rem;line-height:1.55;color:var(--ink);} .editorial-modal-consent{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--rule);border-radius:6px;cursor:pointer;transition:border-color 0.15s,background 0.15s;font-size:0.85rem;line-height:1.45;color:var(--ink);margin-bottom:18px;} .editorial-modal-consent:hover{border-color:var(--navy);} .editorial-modal-consent.is-checked{border-color:var(--navy);background:rgba(36,54,96,0.04);} .editorial-modal-consent input[type="checkbox"]{flex-shrink:0;width:16px;height:16px;margin-top:2px;accent-color:var(--navy);cursor:pointer;} .editorial-modal-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .editorial-modal-secondary{font-size:0.82rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;} .editorial-modal-secondary:hover{color:var(--navy);text-decoration-color:var(--navy);} .editorial-modal-btn{background:var(--navy);color:#fff;border:none;border-radius:5px;padding:10px 22px;font-family:inherit;font-size:0.88rem;font-weight:600;cursor:pointer;transition:background 0.15s,opacity 0.15s;} .editorial-modal-btn:hover:not(:disabled){background:#243660;} .editorial-modal-btn:disabled{background:var(--rule);color:var(--muted);cursor:not-allowed;} @media (max-width:540px){ .editorial-modal{padding:24px 22px 18px;} .editorial-modal h2{font-size:1.3rem;} .editorial-modal-lede{font-size:0.88rem;} .editorial-modal-actions{flex-direction:column-reverse;align-items:stretch;} .editorial-modal-btn{width:100%;padding:12px;} .editorial-modal-secondary{text-align:center;} } /* ─── COMPACT EDITORIAL NOTE (collapsible) ─── */ /* Used by the Interests tab and the Overlaps tab to keep disclaimer framing visible but compact. Built on native
so no JS required. The Overlaps variant keeps a warning-flavoured one-liner visible at all times even when collapsed — that residual is the minimum libel framing a reader needs before they see any match. */ details.editorial-note{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:0;margin:0;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;color:var(--ink);line-height:1.5;overflow:hidden;} details.editorial-note summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:12px;user-select:none;transition:background 0.12s;} .editorial-note-label{flex:1;min-width:0;line-height:1.45;} details.editorial-note summary::-webkit-details-marker{display:none;} details.editorial-note summary::before{content:'';width:15px;height:15px;flex-shrink:0;background-image:url("data:image/svg+xml;utf8,");background-size:contain;background-repeat:no-repeat;} details.editorial-note summary::after{content:'';width:12px;height:12px;flex-shrink:0;margin-left:auto;background-image:url("data:image/svg+xml;utf8,");background-size:contain;background-repeat:no-repeat;transition:transform 0.2s ease;} details.editorial-note[open] summary::after{transform:rotate(180deg);} details.editorial-note summary:hover::after{filter:brightness(0.4);} details.editorial-note[open] summary{border-bottom:1px solid var(--rule);} details.editorial-note summary strong{color:var(--navy);} details.editorial-note summary:hover{background:rgba(27,42,74,0.03);} details.editorial-note .editorial-note-body{padding:14px 16px 14px 16px;color:var(--ink);line-height:1.65;} details.editorial-note .editorial-note-body strong{color:var(--navy);} details.editorial-note .editorial-note-body em{font-style:italic;color:var(--navy);} details.editorial-note .editorial-note-body a{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--muted);} details.editorial-note .editorial-note-body a:hover{color:var(--red);border-bottom-color:var(--red);} /* Overlaps variant — warning-coloured icon + background tint */ details.editorial-note.editorial-note-warn{background:rgba(139,26,26,0.03);border-color:rgba(139,26,26,0.2);} details.editorial-note.editorial-note-warn summary::before{background-image:url("data:image/svg+xml;utf8,");} details.editorial-note.editorial-note-warn summary strong{color:#8b1a1a;} /* INTERESTS tab — now uses the shared .profile-section wrapper so it inherits the same padding, borders and zebra striping as Profile. */ .profile-section.interest-category{padding-top:22px;padding-bottom:22px;} .profile-section-title .profile-section-title-meta{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:500;margin-left:8px;} .interest-category-list{display:flex;flex-direction:column;} .interest-children{margin:2px 0 10px 14px;padding-left:14px;border-left:2px solid var(--rule);display:flex;flex-direction:column;} .interest-children-toggle{align-self:flex-start;margin:0 0 10px 14px;padding:5px 13px;background:rgba(27,42,74,0.06);color:var(--navy);border:1px solid var(--rule);border-radius:14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:500;cursor:pointer;letter-spacing:0.01em;transition:background 0.12s;} .interest-children-toggle:hover{background:rgba(27,42,74,0.12);} .interest-children-toggle.is-open{background:rgba(196,146,42,0.12);border-color:rgba(196,146,42,0.35);color:#7a5010;} /* Intro note — plain paragraph inside its own profile-section */ .profile-section-note .interests-note{background:transparent;border:none;padding:0;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;color:var(--ink);line-height:1.6;font-style:normal;} .profile-section-note .interests-note a{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--muted);} .profile-section-note .interests-note a:hover{color:var(--red);border-bottom-color:var(--red);} /* Trailing-12-month rollup strip shown at the top of the Interests tab. Four pills (outside earnings, donations, gifts & hospitality, overseas visits). Quiet header feel — not a pay cell — so the pay banner stays canonical for salary; this is register-declared flow in the rolling year. */ .profile-section-int-summary{background:var(--cream);} .int-summary-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:4px;} .int-summary-pill{background:#fff;border:1px solid var(--rule);border-radius:7px;padding:8px 10px;min-width:0;position:relative;display:flex;flex-direction:column;gap:1px;} .int-summary-pill.is-empty{opacity:0.45;} .int-summary-lbl{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.58rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;line-height:1.2;} .int-summary-val{font-family:'JetBrains Mono',monospace;font-size:0.92rem;font-weight:700;color:var(--navy);letter-spacing:-0.01em;line-height:1.2;} .int-summary-pill.is-empty .int-summary-val{color:var(--muted);font-weight:600;} .int-summary-sub{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.58rem;color:var(--muted);line-height:1.25;} .int-summary-note{font-size:0.7rem;color:var(--muted);margin-top:10px;line-height:1.5;font-style:italic;} .int-summary-pill[data-tip]{cursor:help;} .int-summary-pill[data-tip]::before,.int-summary-pill[data-tip]::after{z-index:9999;} .int-summary-pill[data-tip]::before{bottom:auto;top:calc(100% + 7px);left:0;transform:none;max-width:320px;text-align:left;white-space:normal;} .int-summary-pill[data-tip]::after{bottom:auto;top:calc(100% + 2px);left:16px;transform:none;border-top-color:transparent;border-bottom-color:var(--navy);} @media (max-width:640px){ .int-summary-row{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:420px){ .int-summary-row{grid-template-columns:1fr;} } /* Legacy .cat-header / .cat-name / .cat-count — kept in case any other renderer still emits them, but the interests tab no longer uses them. */ .cat-header{display:none;} .interest-entry{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:8px;box-shadow:var(--shadow-sm);margin-bottom:8px;overflow:hidden;transition:box-shadow 0.15s,border-color 0.15s;} .interest-entry:last-child{margin-bottom:0;} .interest-entry:hover{border-color:rgba(0,0,0,0.1);box-shadow:var(--shadow-md);} .interest-entry.open{border-color:rgba(196,146,42,0.35);box-shadow:var(--shadow-md);} /* Inside a cream-striped category section the white cards stand out; inside a white category section they still get a subtle border. */ .profile-section.interest-category .interest-category-list{display:flex;flex-direction:column;} /* Transparency disclosure — full register field dump per entry. Collapsed by default so it adds no visual weight until a reader chooses to open it and verify what OpenRealm is working from. */ .int-raw-details{margin-top:8px;} .int-raw-details[open]{margin-top:10px;} .int-raw-summary{cursor:pointer;font-size:0.65rem;color:var(--muted);letter-spacing:0.03em;padding:3px 0;list-style:none;user-select:none;display:inline-block;} .int-raw-summary::-webkit-details-marker{display:none;} .int-raw-summary::before{content:'▸ ';font-size:0.62rem;color:var(--rule);transition:transform 0.15s;display:inline-block;} .int-raw-details[open] .int-raw-summary::before{content:'▾ ';} .int-raw-summary:hover{color:var(--navy);} .int-raw-list{margin-top:6px;padding:10px 14px;background:var(--cream);border:1px solid var(--rule);border-radius:6px;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:4px 16px;font-size:0.7rem;line-height:1.5;} .int-raw-row{display:contents;} .int-raw-k{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:0.66rem;white-space:nowrap;} .int-raw-v{color:var(--ink);word-break:break-word;} .int-raw-group{grid-column:1/-1;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);font-weight:700;margin-top:8px;padding-top:6px;border-top:1px dotted var(--rule);} .int-raw-group:first-child{border-top:none;margin-top:0;padding-top:0;} .interest-header{padding:12px 16px;display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;} .interest-header.interest-header-static{cursor:default;} .interest-entry.open > .interest-header{border-bottom:1px solid var(--rule);} .interest-text{flex:1;font-family:'Source Serif 4',Georgia,serif;font-size:0.84rem;color:var(--ink);line-height:1.5;} .interest-detail{display:none;padding:14px 16px 16px;background:#fff;} .interest-entry.open > .interest-detail{display:block;} .interest-entry.open > .interest-header > .interest-toggle{transform:rotate(90deg);} .interest-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;} .interest-date{font-size:0.61rem;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px;} .interest-toggle{font-size:0.58rem;color:var(--muted);flex-shrink:0;margin-top:3px;transition:transform 0.2s;} .interest-toggle.open{transform:rotate(90deg);} .interest-kids-pill{flex-shrink:0;align-self:center;font-family:'JetBrains Mono',monospace;font-size:0.66rem;font-weight:600;color:#7a5010;background:rgba(196,146,42,0.10);border:1px solid rgba(196,146,42,0.28);padding:2px 8px;border-radius:10px;letter-spacing:0.01em;white-space:nowrap;} .ch-panel{display:none;background:rgba(27,42,74,0.03);border-top:1px dashed var(--rule);margin-top:12px;border-radius:6px;} .ch-panel.open{display:block;} /* Inside an already-open interest-entry the CH panel is always visible */ .interest-entry.open .ch-panel{display:block;} .ch-panel-inner{padding:11px 14px;} .ch-company-name{font-family:'Playfair Display',serif;font-size:0.92rem;font-weight:700;color:var(--navy);} .ch-match-quality{display:inline-block;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.02em;padding:2px 8px;border-radius:10px;margin-left:4px;text-transform:lowercase;cursor:help;} .ch-match-quality.exact{background:rgba(26,74,46,0.15);color:#1a4a2e;} .ch-match-quality.strong{background:rgba(26,74,46,0.12);color:#1a4a2e;} .ch-match-quality.medium{background:rgba(122,74,0,0.12);color:#7a4a00;} .ch-company-meta{font-size:0.65rem;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px;display:flex;gap:9px;flex-wrap:wrap;} .status-pill{font-size:0.56rem;padding:1px 6px;border-radius:8px;font-weight:600;text-transform:uppercase;} .status-pill.active{background:#d4edda;color:#155724;} .status-pill.dissolved{background:#f8d7da;color:#721c24;} .status-pill.dormant{background:#fff3cd;color:#856404;} .status-pill.other{background:#e2e3e5;color:#383d41;} .ch-section-tab{padding:6px 18px 6px 26px;font-size:0.68rem;color:var(--navy);cursor:pointer;display:flex;align-items:center;gap:5px;border-top:1px dashed var(--rule);user-select:none;transition:background 0.1s;} .ch-section-tab:hover{background:rgba(27,42,74,0.04);} .ch-section-tab .s-arrow{font-size:0.5rem;color:var(--muted);transition:transform 0.2s;} .ch-section-tab.open .s-arrow{transform:rotate(90deg);} .ch-section-tab .s-badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--muted);} .ch-section-body{display:none;} .ch-section-body.open{display:block;} .data-row{padding:5px 18px 5px 34px;font-size:0.72rem;display:flex;align-items:flex-start;gap:7px;border-top:1px solid rgba(226,230,234,0.7);} .data-row:first-child{border-top:none;} .data-row-main{flex:1;color:var(--ink);line-height:1.35;} .data-row-main.struck{text-decoration:line-through;color:var(--muted);} .data-row-sub{font-size:0.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;} .tag{font-size:0.54rem;padding:2px 6px;border-radius:4px;background:var(--cream);color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;flex-shrink:0;} .overdue{color:#8b1a1a;font-weight:600;} .ontime{color:var(--success);} .no-data,.ch-not-found,.ch-loading{padding:6px 18px 6px 34px;font-size:0.7rem;color:var(--muted);font-style:italic;} .empty-state{text-align:center;padding:24px 20px;color:var(--muted);} .home-empty-card{max-width:440px;margin:40px auto;padding:36px 32px;background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-md);font-family:'Inter','Inter-fallback',system-ui,sans-serif;} .home-empty-title{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:8px;letter-spacing:-0.01em;} .home-empty-body{font-size:0.82rem;color:var(--muted);line-height:1.55;margin-bottom:20px;} .home-empty-action{display:inline-block;padding:9px 18px;background:var(--navy);color:#fff;border:none;border-radius:6px;text-decoration:none;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;transition:background 0.15s;margin-right:6px;} .home-empty-action:hover{background:#243660;} .home-empty-action-primary{background:var(--gold);color:var(--ink);} .home-empty-action-primary:hover{background:#a8821a;color:#fff;} @keyframes spin{to{transform:rotate(360deg);}} /* INTEREST STRUCTURED FIELDS */ .int-fields{margin:8px 0 10px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:#fff;} .int-field-row{display:flex;align-items:baseline;gap:0;border-bottom:1px solid rgba(226,230,234,0.9);font-size:0.78rem;} .int-field-row:last-child{border-bottom:none;} .int-field-label{padding:8px 14px;background:transparent;border-right:1px solid rgba(226,230,234,0.9);color:var(--navy);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;min-width:120px;font-weight:700;flex-shrink:0;} .int-field-val{padding:8px 14px;color:var(--ink);flex:1;line-height:1.45;} .int-late-warning{background:#7a2a00;color:#fff;padding:6px 14px;font-size:0.72rem;font-weight:600;display:flex;align-items:flex-start;gap:6px;line-height:1.4;} .interest-header-inner{flex:1;min-width:0;} /* ─── QUESTIONS tab ─── */ .qa-flag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.05em;} .qa-flag-interest{background:rgba(139,26,26,0.12);color:var(--red);} .qa-flag-withdrawn{background:rgba(122,74,0,0.12);color:#7a4a00;} .qa-preview{margin-top:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;line-height:1.55;color:var(--ink);} .qa-preview-empty{color:var(--muted);font-style:italic;} .qa-preview-label{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-right:5px;} .qa-preview-label-q{color:var(--navy);} .qa-preview-label-a{color:var(--success);} .qa-full-text{line-height:1.55;} /* ─── SPEECHES tab ─── */ .speeches-verify-link{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;color:var(--muted);margin:0 0 12px;} .speeches-verify-link a{color:var(--navy);text-decoration:none;border-bottom:1px dotted var(--muted);} .speeches-verify-link a:hover{color:var(--red);border-bottom-color:var(--red);} .speeches-filter-bar{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap;} .speeches-filter-input{flex:1;min-width:180px;padding:8px 14px;border:1.5px solid var(--rule);border-radius:20px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;background:#fff;color:var(--ink);outline:none;transition:border-color 0.15s,box-shadow 0.15s;} .speeches-filter-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,0.1);} .speeches-filter-select{padding:7px 12px;border:1px solid var(--rule);border-radius:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;color:var(--ink);background:#fff;cursor:pointer;} .speeches-filter-count{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);} .speeches-list{display:flex;flex-direction:column;gap:8px;} .speeches-see-all{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);text-align:center;} .speeches-see-all a{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:var(--cream);color:var(--muted);border:1px solid var(--rule);border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;font-weight:600;text-decoration:none;transition:background 0.12s,color 0.12s,border-color 0.12s;} .speeches-see-all a:hover{background:#fff;color:var(--navy);border-color:var(--navy);} .speeches-see-all a:hover{background:#243660;} /* ─── HANSARD BROWSER (debate.html without ?id=) ─── */ .hansard-browser{font-family:'Inter','Inter-fallback',system-ui,sans-serif;} .hansard-browser-header{margin-bottom:22px;} .hansard-browser-title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px;} .hansard-browser-title{font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;font-weight:900;color:var(--navy);margin:0;letter-spacing:-0.01em;} .hansard-browser-count{display:inline-flex;align-items:center;padding:5px 12px;background:var(--cream);border:1px solid var(--rule);border-radius:999px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:500;color:var(--muted);white-space:nowrap;} .hansard-browser-count::before{content:attr(data-count) " ";color:var(--navy);font-weight:700;margin-right:4px;} .hansard-browser-lede{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.88rem;color:var(--muted);line-height:1.6;margin:0;max-width:640px;} .hansard-browser-filters{background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-sm);padding:10px 14px;margin-bottom:14px;} .hansard-browser-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;} .hansard-browser-field{display:flex;flex-direction:column;gap:4px;flex:1 1 140px;min-width:0;position:relative;} .hansard-browser-field-member{flex:2 1 220px;} .hansard-browser-field-q{flex:2 1 200px;} .hansard-browser-field-date{flex:0 1 130px;} .hansard-browser-field-house{flex:0 1 110px;} .hansard-browser-field-actions{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;min-width:0;} .hansard-browser-field{gap:3px;} .hansard-browser-field label{font-size:0.56rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);} .hansard-browser-field input[type="text"], .hansard-browser-field input[type="search"], .hansard-browser-field input[type="date"], .hansard-browser-field select{padding:6px 10px;border:1px solid var(--rule);border-radius:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;color:var(--ink);background:#fff;outline:none;transition:border-color 0.15s,box-shadow 0.15s;} .hansard-browser-field input:focus, .hansard-browser-field select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,0.1);} .hansard-browser-btn{background:var(--navy);color:#fff;border:none;border-radius:6px;padding:7px 14px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;font-weight:600;cursor:pointer;transition:background 0.15s;} .hansard-browser-btn:hover{background:#243660;} .hansard-browser-btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:6px;padding:7px 11px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:500;cursor:pointer;transition:all 0.15s;} .hansard-browser-btn-secondary:hover{border-color:var(--navy);color:var(--navy);} /* Member autocomplete dropdown */ .hansard-browser-member-suggest{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-md);max-height:280px;overflow-y:auto;z-index:100;} .hansard-browser-member-suggest.open{display:block;} .hb-suggest-item{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--rule);} .hb-suggest-item:last-child{border-bottom:none;} .hb-suggest-item:hover, .hb-suggest-item.active{background:var(--cream);} .hb-suggest-name{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:600;font-size:0.82rem;color:var(--ink);} .hb-suggest-meta{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;color:var(--muted);margin-top:2px;} .hb-suggest-empty{padding:12px 13px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.8rem;color:var(--muted);font-style:italic;} /* Status line + results */ .hansard-browser-status{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;color:var(--muted);margin:12px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--rule);} .hansard-browser-status .hb-count strong{display:inline-block;color:var(--navy);font-size:0.95rem;font-weight:700;letter-spacing:-0.01em;margin-right:4px;} .hb-hint{font-style:italic;} .hb-loading{font-style:italic;} .hb-error{color:var(--red);} .hb-count strong{color:var(--navy);} .hansard-browser-results{display:flex;flex-direction:column;gap:12px;transition:opacity 0.15s;} .hansard-browser-results.hb-results-loading{opacity:0.45;pointer-events:none;} .hb-row{display:block;background:#fff;border:1px solid var(--rule);border-radius:6px;padding:11px 14px;text-decoration:none;color:inherit;transition:border-color 0.12s,box-shadow 0.12s,transform 0.12s;} .hb-row:hover{border-color:rgba(0,0,0,0.1);box-shadow:var(--shadow-md);transform:translateY(-1px);} .hb-row.hb-row-visited{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,146,42,0.2),var(--shadow-md);animation:hb-row-pulse 1.2s ease-out;} @keyframes hb-row-pulse{0%{box-shadow:0 0 0 0 rgba(196,146,42,0.5),var(--shadow-md);}60%{box-shadow:0 0 0 8px rgba(196,146,42,0);}100%{box-shadow:0 0 0 3px rgba(196,146,42,0.2),var(--shadow-md);}} /* ─── OpenRealm loader ─── */ .or-data-freshness{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;color:var(--muted);padding:8px 12px;background:var(--cream);border:1px solid var(--rule);border-radius:4px;margin:6px 0 14px;line-height:1.5;} .or-data-freshness strong{color:var(--navy);text-transform:uppercase;letter-spacing:0.08em;font-size:0.62rem;font-weight:700;margin-right:4px;} .or-data-freshness-sep{color:var(--rule);} .or-data-freshness-note{font-style:italic;} .or-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:64px 24px;min-height:240px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;} .or-loader-inline{padding:32px 20px;min-height:auto;} .or-loader-compact{flex-direction:row;gap:10px;padding:14px 16px;min-height:auto;justify-content:flex-start;} .or-loader-compact .or-loader-dots span{width:5px;height:5px;} .or-loader-compact .or-loader-label{font-size:0.74rem;font-weight:600;color:var(--muted);} .or-loader-compact .or-loader-detail{display:none;} .or-loader-dots{display:flex;gap:6px;} .or-loader-dots span{width:8px;height:8px;background:var(--navy);border-radius:50%;animation:or-loader-pulse 1.4s infinite ease-in-out both;} .or-loader-dots span:nth-child(1){animation-delay:-0.32s;} .or-loader-dots span:nth-child(2){animation-delay:-0.16s;} @keyframes or-loader-pulse{0%,80%,100%{transform:scale(0.5);opacity:0.4;}40%{transform:scale(1);opacity:1;}} .or-loader-label{font-size:0.92rem;font-weight:700;color:var(--navy);letter-spacing:-0.005em;text-align:center;} .or-loader-detail{font-size:0.76rem;font-weight:500;color:var(--muted);line-height:1.5;text-align:center;max-width:360px;min-height:1em;} .or-loader-detail strong{color:var(--navy);font-weight:700;} /* ─── Reduced-motion support ─── */ @media (prefers-reduced-motion:reduce){ .hb-row,.hb-row:hover,.hb-debate,.hb-debate:hover,.mp-card,.mp-card:hover,.debate-sticky-back,.debate-sticky-back:hover,.debate-sticky-back:active{transform:none !important;} .hb-row.hb-row-visited{animation:none !important;} *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;} } .hb-row[aria-disabled="true"]{pointer-events:none;cursor:default;} .hb-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .hb-row-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.9rem;font-weight:700;color:var(--navy);line-height:1.3;margin:0;flex:1;min-width:0;} .hb-row:hover .hb-row-title{color:var(--red);} .hb-row-chips{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;} .hb-chip{display:inline-block;padding:2px 8px;border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;line-height:1.4;white-space:nowrap;} .hb-chip-commons{background:rgba(27,42,74,0.1);color:var(--navy);} .hb-chip-lords{background:rgba(196,146,42,0.15);color:#8a5f14;} .hb-chip-section{background:var(--cream);color:var(--muted);border:1px solid var(--rule);} .hb-row-meta{margin-top:4px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;color:var(--muted);line-height:1.4;} .hb-row-meta strong{color:var(--ink);font-weight:600;} .hb-row-meta-prominent{font-size:0.76rem;color:var(--ink);padding:5px 0 7px;border-bottom:1px solid var(--rule);margin-bottom:6px;} .hb-row-meta-prominent strong{color:var(--navy);font-weight:700;} .hb-row-sep{opacity:0.5;margin:0 2px;} .hb-row-body{margin-top:6px;font-family:'Source Serif 4',Georgia,serif;font-size:0.82rem;line-height:1.55;color:var(--ink);} .hb-row-body mark{background:rgba(196,146,42,0.22);color:inherit;padding:0 2px;border-radius:2px;font-weight:600;} .hansard-browser-more-wrap{margin-top:18px;text-align:center;} .speech-meta-row{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;color:var(--muted);} .speech-contribution{padding:10px 0;border-top:1px dotted var(--rule);} .speech-contribution:first-child{border-top:none;padding-top:0;} .speech-contribution-attr{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.7rem;color:var(--muted);margin-bottom:5px;} .speech-contribution-text{font-family:'Source Serif 4',Georgia,serif;font-size:0.84rem;line-height:1.65;color:var(--ink);} .speech-inline-cta{display:inline-block;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.7rem;font-weight:600;color:var(--muted);background:var(--cream);border:1px solid var(--rule);padding:2px 9px;border-radius:10px;text-decoration:none;margin-left:6px;white-space:nowrap;letter-spacing:0.01em;vertical-align:1px;transition:background 0.12s,color 0.12s,border-color 0.12s,transform 0.12s;} .speech-group-restored{box-shadow:0 0 0 2px rgba(196,146,42,0.5),var(--shadow-md);transition:box-shadow 0.3s;scroll-margin-top:20px;} .speech-inline-cta:hover{background:#fff;color:var(--navy);border-color:var(--navy);transform:translateX(2px);} /* ─── VOTES tab ─── */ .vote-row{display:flex;align-items:center;gap:10px;padding:14px 0;font-size:0.8rem;border-bottom:1px solid rgba(226,230,234,0.7);} .vote-row:last-child{border-bottom:none;} .vote-vote{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.06em;padding:2px 7px;border-radius:4px;flex-shrink:0;min-width:40px;text-align:center;} .vote-vote.vote-for{background:rgba(45,106,79,0.12);color:var(--success);} .vote-vote.vote-against{background:rgba(139,26,26,0.12);color:var(--red);} .vote-vote.vote-absent{background:rgba(0,0,0,0.06);color:var(--muted);} .vote-title{flex:1;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.8rem;color:var(--ink);line-height:1.4;min-width:0;} .vote-link{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--muted);} .vote-link:hover{color:var(--navy);border-bottom-color:var(--navy);} .vote-margin{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--muted);margin-left:7px;} .vote-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:0.05em;} .vote-tag-teller{background:rgba(196,146,42,0.2);color:#7a5010;} .vote-tag-deferred{background:rgba(122,74,0,0.12);color:#7a4a00;} /* Overlap pill — surfaced when a division title contains a declared- interest keyword for the member. Intentionally warm-red rather than brand-gold so readers don't read it as "verified"/endorsed; it's a prompt, not a judgement. */ .vote-tag-overlap{background:rgba(139,26,26,0.12);color:#8b1a1a;cursor:help;} /* Topic pill — softer signal than OVERLAP. Amber/gold because it's less specific (policy-area match, not name match). Deliberately visually distinct so readers can weight the two differently at a glance. */ .vote-tag-topic{background:rgba(196,146,42,0.16);color:#7a5010;cursor:help;} .vote-overlap-summary{background:rgba(196,146,42,0.08);border:1px solid rgba(196,146,42,0.35);border-radius:6px;padding:10px 14px;font-size:0.78rem;line-height:1.5;color:var(--ink);margin:0 0 10px;} .vote-overlap-summary strong{color:#8b1a1a;font-weight:800;} .vote-overlap-hint{color:var(--muted);font-style:italic;} /* Toggle: show only the overlapping division rows, or all votes (revert). */ .vote-overlap-toggle{font:inherit;font-size:0.72rem;background:none;border:1px solid rgba(139,26,26,0.4);color:#8b1a1a;font-weight:700;cursor:pointer;border-radius:5px;padding:2px 8px;white-space:nowrap;} .vote-overlap-toggle:hover{background:rgba(139,26,26,0.08);} .vote-overlap-toggle[aria-pressed="true"]{background:#8b1a1a;color:#fff;border-color:#8b1a1a;} .votes-overlaps-only .vote-row:not(.vote-row-overlap){display:none;} .vote-date{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--muted);flex-shrink:0;} /* ─── CONTACT tab ─── */ .contact-link-group{display:flex;flex-direction:column;gap:2px;margin-top:6px;} /* ─── OVERLAPS tab ─── */ .overlaps-list{display:flex;flex-direction:column;gap:10px;} /* AI CONFLICT ANALYSIS */ .ai-analyse-btn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 11px;background:linear-gradient(135deg,#1b2a4a,#2d4a7a);color:rgba(255,255,255,0.92);border:none;border-radius:6px;font-size:0.68rem;font-weight:500;font-family:'Inter','Inter-fallback',system-ui,sans-serif;cursor:pointer;letter-spacing:0.03em;transition:all 0.15s;} .ai-analyse-btn:hover{background:linear-gradient(135deg,#253a60,#3d5a8a);color:#fff;} .ai-analyse-btn:disabled{opacity:0.6;cursor:not-allowed;} .ai-analyse-btn .ai-icon{font-size:0.75rem;} .ai-result{margin:10px 22px 12px 22px;border-radius:8px;overflow:hidden;font-size:0.78rem;box-shadow:var(--shadow-sm);} .ai-result-header{padding:9px 14px;display:flex;align-items:center;gap:8px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-weight:600;font-size:0.72rem;} .ai-result-header.conflict{background:#8b1a1a;color:#fff;} .ai-result-header.caution{background:#c4922a;color:#fff;} .ai-result-header.clear{background:#2d6a4f;color:#fff;} .ai-result-header.unknown{background:#555;color:#fff;} .ai-result-body{padding:12px 14px;background:#fff;border:1px solid var(--rule);border-top:none;border-radius:0 0 8px 8px;} .ai-result-body p{line-height:1.5;color:var(--ink);margin-bottom:6px;} .ai-result-body p:last-child{margin-bottom:0;} .ai-result-votes{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);} .ai-result-vote-item{display:flex;align-items:flex-start;gap:6px;padding:4px 0;font-size:0.72rem;border-bottom:1px solid rgba(226,230,234,0.7);} .ai-result-vote-item:last-child{border-bottom:none;} .ai-vote-dir{font-size:0.6rem;font-weight:700;padding:1px 6px;border-radius:4px;flex-shrink:0;margin-top:1px;} .ai-vote-dir.aye{background:#d4edda;color:#155724;} .ai-vote-dir.no{background:#f8d7da;color:#721c24;} .ai-vote-title{flex:1;color:var(--ink);line-height:1.3;} .ai-vote-date{font-size:0.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace;white-space:nowrap;} /* DRAWER INNER TABS */ /* Drawer tab strip. On wide drawers (desktop ≥ 520px) each tab flexes to share the available width evenly. On narrow viewports the strip becomes horizontally scrollable with a touch-friendly swipe and a subtle right-edge fade hint, so no label is clipped or overlapped. */ .drawer-tabs{display:flex;background:var(--card-bg);flex-shrink:0;align-items:stretch;padding:0 4px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;} .drawer-tabs::-webkit-scrollbar{display:none;} /* Custom scroll track + thumb rendered via JS (.drawer-tabs-track) */ .drawer-tabs-track{height:7px;background:var(--rule);border-radius:4px;margin:4px 4px 8px;position:relative;opacity:0.5;transition:opacity 0.15s;} .drawer-tabs-track:hover{opacity:1;} .drawer-tabs-thumb{position:absolute;top:0;height:100%;background:var(--muted);border-radius:3px;min-width:20px;cursor:pointer;transition:background 0.12s;} .drawer-tabs-thumb:hover{background:var(--navy);} .drawer-tabs-wrap{flex-shrink:0;border-bottom:1px solid var(--rule);} .drawer-tab{flex:0 0 auto;padding:8px 13px 4px;font-family:'Inter','Inter-fallback',sans-serif;font-size:0.73rem;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s;user-select:none;white-space:nowrap;text-transform:none;letter-spacing:0;background:transparent;} .drawer-tab:hover{color:var(--navy);background:transparent;} .drawer-tab.active{color:var(--navy);border-bottom-color:var(--gold);font-weight:600;background:transparent;} .drawer-panel{display:none;padding:0;} .drawer-panel.active{display:block;} /* PROFILE SECTIONS */ .profile-section{padding:22px 24px;border-bottom:1px solid var(--rule);} .profile-section:last-child{border-bottom:none;} .profile-section-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:14px;font-weight:700;display:flex;align-items:center;gap:10px;} .profile-section-title::after{content:'';flex:1;height:1px;background:var(--rule);} .profile-bio{font-family:'Source Serif 4',Georgia,serif;font-size:0.88rem;line-height:1.75;color:var(--ink);} .profile-bio-compact{font-size:0.86rem;line-height:1.65;} .profile-row{display:flex;gap:10px;margin-bottom:8px;font-size:0.82rem;align-items:flex-start;} .profile-row:last-child{margin-bottom:0;} .profile-row-label{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);min-width:90px;padding-top:2px;flex-shrink:0;font-weight:600;} .profile-row-val{color:var(--ink);flex:1;line-height:1.45;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;} .profile-row-note{font-size:0.7rem;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px dashed var(--rule);display:block;line-height:1.4;} .profile-row-note a{color:var(--navy);border-bottom:1px dashed var(--muted);text-decoration:none;} .profile-row-note a:hover{border-bottom-color:var(--gold);} /* Cross-link from the per-member pay block to the full pay directory. Matches the crime / population / economy "Open in OpenRealm Data" deeplink button: full-width pill, cream fill, muted text on rest, navy on hover. Same visual weight as other in-drawer CTAs. */ .profile-row-action{margin-top:14px;} .pay-directory-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 14px;background:var(--cream);color:var(--muted);border:1px solid var(--rule);border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.76rem;font-weight:600;text-decoration:none;transition:background 0.12s,color 0.12s,border-color 0.12s;} .pay-directory-link:hover{background:#fff;color:var(--navy);border-color:var(--navy);} /* Inline income-distribution band plot in the Pay & allowances section. Quiet — the chart supplements the "Top X%" pill rather than replacing it. Sits as its own profile-row with the label in the left gutter matching the other rows. */ .profile-row-chart{margin-top:4px;} .profile-row-chart .income-dist-chart{display:block;max-width:100%;height:auto;} .profile-row-chart .income-dist-caption{font-size:0.72rem;color:var(--muted);margin-top:4px;line-height:1.4;} .profile-row-chart .income-dist-caption strong{color:var(--navy);font-weight:700;} .profile-tag{display:inline-block;padding:3px 9px;background:var(--cream);border:1px solid var(--rule);border-radius:6px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;color:var(--muted);margin:2px 3px 2px 0;font-weight:500;} .profile-tag.current{background:rgba(27,42,74,0.08);color:var(--navy);border-color:rgba(27,42,74,0.2);font-weight:600;} .timeline-item{display:flex;gap:10px;margin-bottom:8px;font-size:0.78rem;} .timeline-item:last-child{margin-bottom:0;} .timeline-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:5px;} .timeline-dot.past{background:var(--rule);} .timeline-content{flex:1;} .timeline-title{color:var(--ink);font-weight:600;line-height:1.3;} .timeline-sub{font-size:0.68rem;color:var(--muted);margin-top:1px;font-family:'JetBrains Mono',monospace;} .contact-link{display:flex;align-items:center;gap:10px;padding:9px 11px;margin:0 -11px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.8rem;color:var(--navy);text-decoration:none;border-radius:6px;transition:background 0.15s;} .contact-link + .contact-link{margin-top:2px;} .contact-link:hover{background:var(--cream);color:var(--navy);} .contact-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0;} .loading-msg{padding:32px 24px;text-align:center;color:var(--muted);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-style:italic;font-size:0.82rem;line-height:1.6;} /* FOOTER */ /* ─── HOME DASHBOARD ─── */ /* Reserve the strip's height so it doesn't shove the grid down when home-dashboard.js fills it after its fetch (CLS fix). Matches the rendered tile height: ~44px content + label + 8/10px padding. */ .home-dashboard-outer{width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;min-height:88px;} .home-dashboard-outer::-webkit-scrollbar{display:none;} .home-dashboard{padding:8px 24px 10px;display:flex;gap:6px;align-items:stretch;width:max-content;min-width:100%;} .home-dashboard:empty{display:none;} .home-dashboard-section{flex:0 0 auto;display:flex;flex-direction:column;} .home-dash-label{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.5rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:4px;white-space:nowrap;} /* Custom scrollbar track under the dashboard — matches drawer tab scrollbar */ .home-dashboard-scroll{width:100%;padding:0 24px;margin-bottom:6px;} .home-dashboard-scroll .custom-scroll-track{height:4px;background:var(--rule);border-radius:2px;position:relative;cursor:pointer;} .home-dashboard-scroll .custom-scroll-thumb{height:100%;background:var(--navy);border-radius:2px;position:absolute;top:0;left:0;min-width:30px;opacity:0.4;transition:opacity 0.15s;cursor:grab;} .home-dashboard-scroll .custom-scroll-thumb:hover,.home-dashboard-scroll .custom-scroll-thumb.dragging{opacity:0.7;} /* Indicator tiles — inline within the dashboard row */ .home-indicator-strip{display:flex;gap:4px;flex:1;} .home-indicator{background:var(--cream);border-radius:4px;padding:4px 8px;min-width:0;flex:1 1 0;text-decoration:none;color:inherit;transition:background 0.15s;} a.home-indicator:hover{background:var(--rule);} /* Disable CSS tooltips inside dashboard — they clip. JS tooltips used instead. */ .home-dashboard [data-tip]::before,.home-dashboard [data-tip]::after{display:none!important;} .home-tip{position:absolute;background:var(--navy);color:#fff;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.68rem;font-weight:500;line-height:1.4;padding:6px 10px;border-radius:6px;max-width:220px;white-space:normal;text-align:center;z-index:9500;pointer-events:none;box-shadow:var(--shadow-md);display:none;} /* Skeleton loader for tiles */ .home-skeleton{min-height:44px;min-width:80px;background:linear-gradient(90deg,var(--cream) 25%,#e8e4dc 50%,var(--cream) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:5px;} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Fade in when real content arrives */ .home-dashboard-section{animation:fadeIn 0.3s ease;} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .home-ind-val{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:800;color:var(--navy);line-height:1.2;white-space:nowrap;} .home-ind-label{font-size:0.44rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.02em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .home-ind-yoy{font-family:'JetBrains Mono',monospace;font-size:0.48rem;} .home-ind-yoy-up{color:#2d6a4f;} .home-ind-yoy-down{color:#b13b3b;} .home-ind-yoy-flat{color:var(--muted);} .home-spark{display:block;margin-top:2px;width:100%;height:14px;} /* Activity cards — inline within the dashboard row */ .home-activity-strip{display:flex;gap:4px;} .home-activity-card{background:#fff;border:1px solid var(--rule);border-radius:4px;padding:4px 8px;min-width:140px;max-width:180px;flex:0 0 auto;text-decoration:none;display:flex;flex-direction:column;gap:1px;transition:border-color 0.15s;cursor:pointer;} .home-activity-card:hover{border-color:var(--gold);} .home-activity-house{font-size:0.46rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);} .home-activity-house[data-house="commons"]{color:var(--navy);} .home-activity-house[data-house="lords"]{color:var(--lords,#5c1a6b);} .home-activity-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.64rem;font-weight:600;color:var(--navy);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .home-activity-meta{font-family:'JetBrains Mono',monospace;font-size:0.54rem;color:var(--muted);} .home-activity-date{font-size:0.5rem;color:var(--muted);} /* ─── PETITIONS PAGE ─── */ .petition-list{display:flex;flex-direction:column;gap:8px;} .petition-card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:12px 16px;transition:border-color 0.15s,box-shadow 0.15s;cursor:pointer;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;} .petition-card:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,0.06);} .petition-card.is-expanded{border-color:var(--gold);} .petition-card-detail{width:100%;padding-top:10px;border-top:1px solid var(--rule);margin-top:4px;} .petition-detail-section{margin-bottom:10px;} .petition-detail-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:4px;} .petition-detail-text{font-size:0.84rem;color:var(--ink);line-height:1.5;} .petition-detail-link{font-size:0.82rem;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;} .petition-detail-link:hover{color:var(--gold);} .petition-detail-meta{font-size:0.68rem;color:var(--muted);margin-top:8px;padding-top:6px;border-top:1px solid var(--rule);} .petition-card-main{flex:1;min-width:0;} .petition-card-action{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.88rem;font-weight:600;color:var(--navy);line-height:1.3;margin-bottom:6px;} .petition-card-bar{display:none;} .petition-card-fill{display:none;} .petition-card-badges{display:flex;flex-wrap:wrap;gap:4px;} .petition-badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.6rem;font-weight:600;letter-spacing:0.02em;} .petition-badge-debate{background:rgba(196,146,42,0.15);color:#7a5010;} .petition-badge-response{background:rgba(27,42,74,0.08);color:var(--navy);} .petition-badge-responded{background:rgba(45,106,79,0.12);color:#2d6a4f;} .petition-badge-debated{background:rgba(92,26,107,0.12);color:#5c1a6b;} .petition-card-right{text-align:center;flex-shrink:0;min-width:80px;display:flex;flex-direction:column;align-items:center;gap:4px;} .petition-card-sig-num{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.1rem;font-weight:800;color:var(--navy);line-height:1.1;} .petition-card-sig-lbl{font-size:0.56rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;} .petition-count{font-family:'JetBrains Mono',monospace;font-size:0.62rem;opacity:0.6;margin-left:4px;} .petition-card-id{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);font-weight:400;margin-left:6px;} .petition-share-btn{background:none;border:1px solid var(--rule);color:var(--muted);width:26px;height:26px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:0;line-height:0;} .petition-share-btn:hover{border-color:var(--navy);color:var(--navy);} .petition-share .or-share-menu{right:0;left:auto;} .petition-nav{display:flex;gap:8px;justify-content:center;margin-top:16px;} .pw-footer{background:var(--navy);color:rgba(255,255,255,0.72);border-top:2px solid var(--gold);padding:14px 24px;font-size:0.7rem;line-height:1.5;} .pw-footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:20px;align-items:start;} .pw-footer-col{min-width:0;} .pw-footer-col p{margin:0 0 3px;} .pw-footer-col strong, .pw-footer-col .pw-footer-title{display:block;color:var(--gold);font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin:0 0 4px;} @media (max-width:720px){.pw-footer-inner{grid-template-columns:1fr;gap:12px;}} .pw-footer a{color:var(--paper);text-decoration:underline;} .pw-footer a:hover{color:var(--gold);} @media (max-width:640px){ .tab-panel.active{flex-direction:column;height:auto;} /* Mobile: drawer goes full-screen so readers aren't fighting a narrow bottom sheet. Covers the whole viewport; the in-drawer close button and browser back both return them to where they came from. */ .drawer{position:fixed!important;inset:0!important;width:100%!important;height:100vh!important;height:100dvh!important;max-width:100%!important;border-left:none;transform:translateX(100%)!important;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);} .drawer.open{transform:translateX(0)!important;} /* Mobile touch targets: Apple HIG 44px, Material 48px. Desktop 26px is too small on a phone — thumbs miss them and hit the drawer header area instead, which reads as a dead zone. */ .drawer-close{top:10px;right:10px;width:40px;height:40px;font-size:20px;} /* Expand uses an SVG background (see base rule); bump background-size rather than font-size so the icon fills the larger mobile circle. */ .drawer-expand{top:10px;right:58px;width:40px;height:40px;background-size:20px;} .status-stats{display:none;} .pw-footer-inner{grid-template-columns:1fr;gap:14px;} } /* ─── DATA HUB (data.html) ─── */ .data-wrap{max-width:1080px;margin:0 auto;padding:24px 28px 64px;} .data-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:24px;flex-wrap:wrap;} .data-tab{background:none;border:none;padding:11px 18px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.83rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;transition:all 0.15s;} .data-tab:hover{color:var(--navy);} .data-tab.active{color:var(--navy);border-bottom-color:var(--gold);} .data-panel{min-height:400px;} .data-loading,.data-empty,.data-error{padding:32px;text-align:center;color:var(--muted);font-style:italic;} .data-error{color:#8b1a1a;font-style:normal;} .data-stub{padding:24px 28px;border:1px dashed var(--rule);background:var(--cream);} .data-stub-section{margin-bottom:18px;} .data-stub-section h3{font-family:'Inter','Inter-fallback',system-ui,sans-serif;color:var(--muted);font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;margin:0 0 10px;} .data-stub-section ul{margin:0;padding-left:20px;line-height:1.7;color:var(--ink);} .data-stub-section li{margin-bottom:4px;} .data-stub-section p{color:var(--ink);line-height:1.6;margin:0;} .data-stub-note{color:var(--muted);font-size:0.82rem;font-style:italic;padding-top:14px;border-top:1px dotted var(--rule);} .data-topic-intro{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rule);} .data-topic-intro h2{font-family:'Playfair Display',serif;color:var(--navy);font-size:1.8rem;margin:0 0 6px;font-weight:700;} .data-topic-intro p{color:var(--ink);line-height:1.6;margin:0;max-width:720px;font-size:0.9rem;} .data-topic-intro em{color:#8b1a1a;font-style:normal;font-weight:600;} .data-controls{display:flex;gap:18px;flex-wrap:wrap;padding:14px 0 22px;border-bottom:1px solid var(--rule);margin-bottom:22px;} .data-control{display:flex;flex-direction:column;gap:4px;} .data-control-label{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);} .data-control select{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.9rem;padding:7px 12px;border:1px solid var(--rule);border-radius:6px;background:#fff;min-width:220px;} .data-control-wide select{min-width:320px;} .data-result-header{margin-bottom:18px;} .data-result-eyebrow{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;} .data-result-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.015em;color:var(--navy);margin:0 0 4px;} .data-result-meta{font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--muted);} .data-stat-row{display:flex;gap:20px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:22px;} .data-stat{flex:1;text-align:center;} .data-stat-num{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:2rem;font-weight:800;letter-spacing:-0.015em;color:var(--navy);line-height:1.1;} .data-stat-lbl{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:4px;} .data-stat-full{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--muted);margin-top:2px;} .data-stat-sub{font-size:0.62rem;color:var(--muted);font-weight:400;margin-top:2px;} /* Mode bar (crime, contracts sub-modes) */ /* Crime page — title + mode tabs on one row */ .crime-header-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:14px;} .crime-header-row .hansard-browser-title{margin:0;white-space:nowrap;} .crime-header-row .data-mode-bar{margin-bottom:0;} /* Compact crime result bar — name + stats on one line */ .crime-result-bar{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--rule);margin-bottom:12px;} .crime-result-name{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.15rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;} .crime-result-stats{display:flex;gap:14px;flex-wrap:wrap;} .crime-result-stat{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;color:var(--muted);} .crime-result-stat strong{color:var(--navy);font-weight:800;font-size:0.95rem;} /* ─── Constituency dashboard (two-column) ─── */ .const-dashboard{display:flex;flex-direction:column;gap:16px;margin-top:18px;margin-bottom:18px;} /* Profile card — horizontal banner */ .const-profile{display:flex;background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:visible;box-shadow:var(--shadow-sm);} /* Mobile: tap-to-collapse banner. The hero strip (name + party) stays visible; the stats block drops out of flow when .is-collapsed is set. A chevron in the hero rotates to indicate state. */ .const-profile-chevron{display:none;margin-left:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:10px;transition:transform 0.2s;} .const-profile-chevron:hover{background:rgba(255,255,255,0.25);} .const-profile.is-collapsed .const-profile-chevron{transform:rotate(-90deg);} @media (max-width:640px){ .const-profile-chevron{display:flex;width:36px;height:36px;font-size:14px;} .const-profile.is-collapsed .const-profile-stats{display:none;} .const-profile-hero{cursor:pointer;} } .const-profile-hero{border-radius:8px 0 0 8px;} /* Navy hero (left section of banner) */ .const-profile-hero{background:var(--navy);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;} .const-hero-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#3a4e6a;border:2px solid rgba(255,255,255,0.15);position:relative;} .const-hero-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;} .const-hero-avatar.no-photo img{display:none;} .const-hero-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',Georgia,serif;font-size:0.9rem;font-weight:700;color:rgba(255,255,255,0.9);} .const-hero-avatar:not(.no-photo) .const-hero-initials{opacity:0;} .const-hero-info{min-width:0;} .const-hero-name{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.9rem;font-weight:700;line-height:1.2;color:#fff;letter-spacing:-0.005em;white-space:nowrap;} .const-hero-party{display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.6rem;font-weight:700;letter-spacing:0.04em;margin-top:3px;} .const-hero-share{margin-left:auto;flex-shrink:0;} .const-hero-share-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:0;line-height:0;} .const-hero-share-btn:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4);} .const-hero-share .or-share-menu{right:0;left:auto;} /* Stats (right section of banner, flowing horizontally) */ .const-profile-stats{display:flex;flex-wrap:wrap;flex:1;min-width:0;align-items:stretch;} /* Each stat cell uses a 3-row grid so the value, label and optional sub-pill align across every cell — otherwise cells with an extra row (e.g. IPSA with its year picker + delta chip) make the banner tall and the bare cells float vertically-centred in that space, leaving the value numbers on different baselines. Grid keeps the values on row 1, labels on row 2, sub-pills on row 3 regardless of which cells happen to carry each element. */ .const-stat-cell{padding:10px 16px;border-left:1px solid var(--rule);display:grid;grid-template-rows:auto auto 1fr;align-content:start;row-gap:2px;} .const-stat-val{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;font-weight:800;color:var(--navy);line-height:1.2;letter-spacing:-0.01em;white-space:nowrap;} .const-stat-lbl{font-size:0.56rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-top:1px;white-space:nowrap;} @media(max-width:700px){ .const-profile{flex-direction:column;} .const-profile-stats{flex-wrap:wrap;} .const-stat-cell{border-left:none;border-top:1px solid var(--rule);} } .const-profile-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:6px;} /* Data column (right — tabbed) */ .const-data-col{min-width:0;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:0;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;} /* When bars / empty states sit directly inside the card (no tab bar above, e.g. Neighbourhood + Near-a-location views), give them internal breathing room so labels and values don't touch the card edge. Tab-body views keep their own padding via .const-tab-body and aren't affected by this rule. */ .const-data-col > .const-bars, .const-data-col > .data-empty{padding:24px 28px;} .const-tab-bar{display:flex;gap:0;border-bottom:1px solid var(--rule);flex-shrink:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .const-tab-bar::-webkit-scrollbar{display:none;} .const-tab-btn{background:none;border:none;padding:10px 18px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.78rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;transition:all 0.15s;white-space:nowrap;flex-shrink:0;} .const-tab-btn:hover{color:var(--navy);} .const-tab-btn.active{color:var(--navy);border-bottom-color:var(--gold);} .const-tab-body{padding:24px 28px;flex:1;min-height:0;overflow-y:auto;} .const-tab-header{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.88rem;color:var(--ink);margin-bottom:14px;} .const-tab-header strong{font-weight:800;color:var(--navy);} .const-tab-source{font-size:0.68rem;color:var(--muted);margin-top:16px;padding-top:10px;border-top:1px solid var(--rule);} /* Constituency crime timeline — auto-loaded SVG line chart, 48 months of monthly recorded-crime totals with dashed election-date markers. Full-width of the Crime tab section with a floating tooltip on hover. */ .crime-timeline-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);} .crime-timeline{margin-top:4px;} .crime-timeline-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;} .crime-timeline-chart-wrap{position:relative;} .crime-timeline svg{width:100%;height:auto;display:block;} .crime-timeline-dot{pointer-events:none;} .crime-timeline-hit{cursor:pointer;} .crime-timeline-tooltip{position:absolute;background:var(--navy);color:#fff;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.74rem;padding:7px 10px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.18);pointer-events:none;white-space:nowrap;line-height:1.3;transform:translateY(-100%);z-index:5;} .crime-timeline-tooltip.on-right{transform:translate(8px,-100%);} .crime-timeline-tooltip.on-left{transform:translate(calc(-100% - 8px),-100%);} .crime-timeline-tooltip-month{font-weight:700;color:#fff;font-size:0.72rem;letter-spacing:0.02em;} .crime-timeline-tooltip-count{font-weight:800;font-size:1rem;color:var(--gold);margin-top:1px;} .crime-timeline-tooltip-lbl{font-size:0.62rem;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.06em;} .crime-timeline-caveat{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.7rem;color:var(--muted);line-height:1.55;margin-top:8px;} /* Economy tiles */ .const-econ-tiles{display:flex;flex-wrap:nowrap;gap:8px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;} .const-econ-tile{background:var(--cream);border-radius:5px;padding:8px 12px;flex:1 1 0;min-width:0;} /* Mobile: tiles keep their natural size and the row scrolls instead of squashing each to a thin sliver. Desktop keeps the equal- distribution flex behaviour. */ @media (max-width:640px){ .const-econ-tile{flex:0 0 auto;min-width:118px;} } .const-econ-tile-val{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.82rem;font-weight:800;color:var(--navy);letter-spacing:-0.01em;line-height:1.2;white-space:nowrap;} .const-econ-tile-lbl{font-size:0.52rem;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.03em;line-height:1.2;} .const-econ-tile-sub{font-size:0.5rem;color:var(--muted);margin-top:1px;font-style:italic;} /* Inline key-value row (demographics) */ .const-kv-row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:0.82rem;color:var(--muted);} .const-kv-row strong{color:var(--navy);font-weight:700;} /* Party-coloured election bars */ .const-bar-party[data-party="Lab"]{background:#d62828;} .const-bar-party[data-party="Con"]{background:#0087dc;} .const-bar-party[data-party="LD"]{background:#faa61a;} .const-bar-party[data-party="Green"]{background:#6ab023;} .const-bar-party[data-party="SNP"]{background:#fff95d;} .const-bar-party[data-party="PC"]{background:#008142;} .const-bar-party[data-party="RUK"]{background:#12b6cf;} .const-bar-party[data-party="DUP"]{background:#d46a4c;} .const-bar-party[data-party="SF"]{background:#326760;} .const-bar-party[data-party="SDLP"]{background:#2aa82c;} .const-bar-party[data-party="APNI"]{background:#f6cb2f;} .const-bar-party[data-party="UUP"]{background:#48a5ee;} .const-bar-party[data-party="Ind"]{background:#808080;} .const-bar-party[data-party="Spk"]{background:#222;} .const-bar-party[data-party="TUV"]{background:#0095b6;} .const-crime-total{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.88rem;color:var(--ink);} .const-crime-total strong{font-weight:800;color:var(--navy);} /* CSS bar chart */ .const-bars{display:flex;flex-direction:column;gap:8px;} .const-bar-row{display:flex;align-items:center;gap:10px;} /* Generic label used by Crime / Population / Neighbourhood bars. */ .const-bar-label{width:170px;flex-shrink:0;text-align:right;font-size:0.8rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Election bar variant — name column right-aligned so every row ends flush with the pill column. Pill column has fixed width so abbreviations line up into their own vertical gutter regardless of name length. */ .const-bar-name{width:170px;flex-shrink:0;text-align:right;font-size:0.8rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .const-bar-party-col{width:46px;flex-shrink:0;display:flex;justify-content:flex-start;} .const-bar-party-pill{display:inline-block;padding:1px 7px;border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:0.04em;text-align:center;min-width:32px;} .const-bar-track{flex:1;height:12px;background:var(--cream);border-radius:2px;overflow:hidden;} .const-bar-fill{height:100%;background:var(--navy);border-radius:2px;transition:width 0.3s ease;} /* Semantic palette per crime category so a page of bars reads as distinct categories at a glance rather than a wall of navy. Warm reds for violence/weapons, oranges for disorder, ambers/golds for theft, olives for drugs, cooler tones for property / "other". The navy default still applies when no category attribute is set. */ .const-bar-fill[data-cat="violent-crime"] {background:#8a1a1a;} .const-bar-fill[data-cat="possession-of-weapons"]{background:#6e0f0f;} .const-bar-fill[data-cat="criminal-damage-arson"]{background:#a83520;} .const-bar-fill[data-cat="robbery"] {background:#c05820;} .const-bar-fill[data-cat="burglary"] {background:#a36520;} .const-bar-fill[data-cat="anti-social-behaviour"]{background:#d88a28;} .const-bar-fill[data-cat="public-order"] {background:#c9a63e;} .const-bar-fill[data-cat="theft-from-the-person"]{background:#a08040;} .const-bar-fill[data-cat="other-theft"] {background:#b69858;} .const-bar-fill[data-cat="shoplifting"] {background:#c9b078;} .const-bar-fill[data-cat="bicycle-theft"] {background:#9aa070;} .const-bar-fill[data-cat="drugs"] {background:#7a7a30;} .const-bar-fill[data-cat="vehicle-crime"] {background:#6a7060;} .const-bar-fill[data-cat="other-crime"] {background:#1b2a4a;} .const-bar-val{width:80px;flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:0.74rem;color:var(--muted);white-space:nowrap;} .const-bar-val span{margin-left:2px;opacity:0.6;} @media(max-width:600px){ .const-bar-label,.const-bar-name{width:100px;font-size:0.7rem;} .const-bar-party-col{width:40px;} .const-bar-val{width:60px;font-size:0.66rem;} } .data-mode-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;} .data-mode-btn{background:none;border:1px solid var(--rule);padding:8px 16px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.8rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.15s;border-radius:6px;} .data-mode-sep{width:1px;align-self:stretch;background:var(--rule);flex-shrink:0;margin:0 6px;} .data-mode-btn:hover{color:var(--navy);background:var(--cream);} .data-mode-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);} .data-mode-explainer{font-size:0.76rem;color:var(--muted);line-height:1.45;margin-bottom:10px;padding:0;} /* Shared data section pieces */ .data-section-title{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--rule);display:flex;align-items:baseline;gap:8px;} .data-section-hint{font-weight:400;text-transform:none;letter-spacing:0;} .data-two-col{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:10px;font-size:0.88rem;line-height:1.5;color:var(--ink);} .data-two-col > div{flex:1;min-width:220px;} .data-inline-note{font-size:0.78rem;color:var(--muted);line-height:1.5;margin:8px 0 16px;padding:8px 12px;border-left:3px solid var(--rule);background:rgba(241,243,245,0.5);} .data-source-footer{font-size:0.72rem;color:var(--muted);margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);line-height:1.5;} .data-source-footer a{color:var(--navy);} .data-source-provenance{margin-top:6px;font-style:italic;} .data-force-desc{font-size:0.88rem;line-height:1.6;color:var(--ink);margin-bottom:18px;} .data-force-note{background:#fef5e0;border:1px solid var(--rule);padding:10px 14px;margin:10px 0 18px;font-size:0.84rem;color:var(--navy);border-radius:4px;line-height:1.5;} /* SVG bar charts */ .data-cat-bars{max-width:100%;height:auto;margin:8px 0 14px;} /* Boundary preview SVG */ .data-boundary-preview{margin:12px 0;} .data-boundary-svg{border-radius:4px;overflow:hidden;} /* Force debug panel */ .data-debug-panel{margin-top:24px;font-size:0.78rem;} .data-debug-panel > summary{cursor:pointer;color:var(--muted);padding:8px 0;} .data-debug-rows{display:flex;flex-direction:column;gap:6px;margin-top:8px;} .data-debug-row{background:var(--cream);border:1px solid var(--rule);border-radius:4px;} .data-debug-row > summary{cursor:pointer;padding:8px 12px;display:flex;gap:10px;align-items:center;} .data-debug-label{font-weight:600;color:var(--navy);} .data-debug-status{font-family:'JetBrains Mono',monospace;font-size:0.72rem;padding:1px 6px;border-radius:3px;} .data-debug-status.ok{background:rgba(45,106,79,0.12);color:#2d6a4f;} .data-debug-status.err{background:rgba(177,59,59,0.12);color:#b13b3b;} .data-debug-meta{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);} .data-debug-body{padding:8px 12px 12px;border-top:1px solid var(--rule);} .data-debug-url code{font-size:0.72rem;word-break:break-all;} .data-debug-error{color:#b13b3b;margin:4px 0;} .data-debug-pre{background:#fff;border:1px solid var(--rule);padding:8px;font-size:0.68rem;overflow-x:auto;max-height:200px;margin:6px 0 0;white-space:pre-wrap;word-break:break-all;} /* Senior officers */ .data-people{display:flex;flex-direction:column;gap:4px;} .data-person{background:#fff;border:1px solid var(--rule);border-radius:4px;} .data-person > summary{cursor:pointer;padding:8px 12px;display:flex;align-items:center;gap:8px;list-style:none;} .data-person > summary::-webkit-details-marker{display:none;} .data-person-name{font-weight:600;color:var(--navy);} .data-people-rank{font-size:0.78rem;color:var(--muted);} .data-person-chevron{margin-left:auto;color:var(--muted);font-size:0.72rem;transition:transform 0.15s;} .data-person[open] .data-person-chevron{transform:rotate(90deg);} .data-people-bio{padding:0 12px 12px;font-size:0.84rem;color:var(--ink);line-height:1.5;} /* Engagement list */ .data-engagement{list-style:none;padding:0;margin:0 0 16px;} .data-engagement li{padding:6px 0;border-bottom:1px solid var(--rule);} .data-engagement a{color:var(--navy);font-weight:600;font-size:0.88rem;} .data-engagement-desc{font-size:0.78rem;color:var(--muted);margin-left:6px;} /* ─── MAP MODE (constituencies page) ─── */ .map-layout{display:flex;flex-direction:column;gap:0;position:relative;} /* Fullscreen toggle button */ .map-fullscreen-btn{position:absolute;top:12px;right:12px;z-index:800;background:var(--navy);color:#fff;border:none;width:36px;height:36px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:background 0.15s;padding:0;} .map-fullscreen-btn:hover{background:var(--gold);} @media (max-width:640px){ /* On mobile the info card sits UNDER the map (not overlayed) so readers see both the clicked dot and its stats at once. The .map-info-card-below class is added in data-map.js when we detect a narrow viewport; we style it as a regular block beneath the Leaflet container. */ .map-main{flex-direction:column;} .map-canvas{min-height:360px;flex:0 0 auto!important;} .map-info-card-below{position:static!important;margin:0;max-width:none!important;min-width:0;max-height:none;width:100%;border-radius:0 0 8px 8px;border-top:0;box-shadow:none;} /* Bigger full-screen button hit target. */ .map-fullscreen-btn{width:44px;height:44px;top:10px;right:10px;} .map-fullscreen-btn svg{width:22px;height:22px;} } .map-fullscreen-btn:hover{background:var(--gold);} .map-fullscreen-btn svg{width:18px;height:18px;} /* Fullscreen state */ .map-layout.is-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;background:#fff;} .map-layout.is-fullscreen .map-main{min-height:0;flex:1;} .map-layout.is-fullscreen .map-canvas{min-height:0;flex:1;} .map-controls-row{display:flex;align-items:center;gap:18px;padding:12px 20px;background:var(--cream);border-bottom:1px solid var(--rule);} .map-controls-hint{font-size:0.76rem;color:var(--muted);flex:1;} .map-main{display:flex;flex:1;min-height:70vh;position:relative;} .map-canvas{flex:1;min-height:600px;z-index:0;} .map-side-panel{width:340px;flex-shrink:0;background:#fff;border-left:1px solid var(--rule);overflow-y:auto;padding:18px;display:none;} .map-side-panel.open{display:block;} .map-side-empty{color:var(--muted);font-size:0.88rem;text-align:center;padding:40px 14px;} /* Map side panel content */ .map-side-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);padding:4px;z-index:1;} .map-side-header{margin-bottom:14px;} .map-side-eyebrow{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);} .map-side-header h2{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:1.15rem;font-weight:800;color:var(--navy);margin:4px 0;line-height:1.2;} .map-side-code{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--muted);} .map-side-section-title{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--rule);} .map-side-crime-total{font-size:0.88rem;margin-bottom:10px;} .map-side-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .map-side-bar{font-size:0.78rem;} .map-side-bar-label{color:var(--navy);font-weight:600;margin-bottom:2px;} .map-side-bar-track{height:8px;background:var(--cream);border-radius:4px;overflow:hidden;} .map-side-bar-fill{height:100%;background:var(--navy);border-radius:4px;transition:width 0.3s;} .bar-fill{width:var(--bar-w,0%);} .map-side-bar-count{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);margin-top:1px;} .map-side-election{font-size:0.88rem;line-height:1.5;} .map-side-meta{font-size:0.78rem;color:var(--muted);} .map-side-source{font-size:0.66rem;color:var(--muted);margin-top:16px;padding-top:10px;border-top:1px solid var(--rule);line-height:1.4;} /* Map info card (top-right hover card) */ .map-info-card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:12px 16px;min-width:240px;max-width:320px;box-shadow:var(--shadow-md);font-size:0.82rem;line-height:1.4;} .map-info-muted{color:var(--muted);font-size:0.7rem;font-weight:400;margin-left:4px;} .map-info-placeholder{color:var(--muted);font-size:0.78rem;font-style:italic;padding:4px 0;} /* Year picker inline on const-stat-cell labels (e.g. banner's IPSA accommodation & misc cell). Stays visually part of the label — no chrome border, just a dotted underline to hint it's interactive. */ .const-stat-year-picker{background:transparent;border:none;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;padding:0 2px;cursor:pointer;border-bottom:1px dotted currentColor;outline:none;} .const-stat-year-picker:hover,.const-stat-year-picker:focus-visible{color:var(--navy);} /* Year-on-year delta — kept visually modest on purpose. We want readers to notice a £21k→£1k move, not to feel it's being editorialised. No colour-coded up/down (green/red would imply value judgement); just the muted chip, slightly bolder when the change is >=25% so patterns worth a look don't get missed. */ .const-stat-delta{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:10px;font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:0.6rem;font-weight:500;letter-spacing:0.04em;vertical-align:middle;white-space:nowrap;} .const-stat-delta-neutral{background:var(--cream);color:var(--muted);border:1px solid var(--rule);} .const-stat-delta-notable{background:rgba(196,146,42,0.12);color:#7a5010;border:1px solid rgba(196,146,42,0.35);font-weight:600;} .const-stat-sub{margin-top:6px;white-space:normal;max-width:100%;line-height:1.4;} .const-stat-sub .const-stat-delta{white-space:normal;max-width:100%;display:inline-block;vertical-align:middle;} /* Defensive re-assert — cream pill on neutral, amber on notable. Warmer cream than the base palette so the pill reads as a deliberate marker on the light paper background (QA reported the previous cream blended into the banner). */ .const-stat-sub .const-stat-delta-neutral{background:#f4ead3;color:#6b4f12;border:1px solid rgba(196,146,42,0.3);} .const-stat-sub .const-stat-delta-notable{background:rgba(196,146,42,0.12);color:#7a5010;border:1px solid rgba(196,146,42,0.35);} /* Searchable combobox for the Population hub constituency picker. Replaces the native