/* Backbenchr v4: the SaaS re-skin.
   Warm paper ground, Bricolage Grotesque display, Instrument Sans UI, one
   ultramarine accent kept clear of every party colour. Semantic vote colours
   (FOR green, AGAINST red) unchanged. Party palette unchanged (mid-tones,
   legible on light ground); it is data, not decoration. The signature is the
   pulse strip: data currency, worn on the outside of every page. */

:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --raised: #f2f2ec;
  --hover: #f6f6f1;
  --line: #ebebe3;
  --line2: #dededb;
  --ink: #101110;
  --muted: #585b55;
  --faint: #9b9e96;
  --accent: #3038dd;
  --accent-hover: #262cb8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(48, 56, 221, .08);
  --mint: #14894e;            /* semantic: FOR / aligned */
  --mint-ink: #ffffff;
  --mint-soft: rgba(20, 137, 78, .10);
  --ochre: #b25317;           /* semantic: caution / debate-time */
  --ochre-soft: rgba(178, 83, 23, .09);
  --no: #c9302a;              /* semantic: AGAINST */
  --g-labor: #E05348;
  --g-coalition: #5B8DE8;
  --g-greens: #2FAE63;
  --g-onenation: #D07B1F;
  --g-minor: #9678D2;
  --g-independent: #1FA6B0;
  /* dark marketing surfaces (hero, cta band, footer) */
  --dk-bg: #0e0f16;
  --dk-panel: #171927;
  --dk-line: rgba(255, 255, 255, .09);
  --dk-ink: #f2f3f7;
  --dk-muted: #a2a6b8;
  --dk-accent: #7a83ff;
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(14, 14, 14, .05) 5px 7px);
  --ease: cubic-bezier(.22, .8, .3, 1);
  --shadow-card: 0 1px 2px rgba(16, 17, 16, .04);
  --shadow-pop: 0 12px 32px rgba(16, 17, 16, .14);
  --r-card: 12px;
  --r-ctl: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
/* Full-bleed sections overshoot the viewport by half a scrollbar on each
   side; clip (not hidden, which would break the sticky masthead) keeps the
   page from ever scrolling sideways over it. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- chrome ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 0 1.4rem;
  min-height: 60px;
  background: color-mix(in srgb, #ffffff 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line2);
}
.brand { display: flex; align-items: center; gap: .5rem; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 19px; fill: var(--ink); }
.brand-mark .mark-accent { fill: var(--accent); }
.brand-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -.02em;
}
.nav { display: flex; gap: .1rem; margin-left: auto; align-items: center; }
.nav a {
  color: var(--muted); font-size: .86rem; font-weight: 500; white-space: nowrap;
  padding: .45rem .5rem; border-radius: var(--r-ctl);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.nav a.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--r-ctl) var(--r-ctl) 0 0; }

/* the More dropdown */
.nav-more { position: relative; }
.nav-more summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--muted); font-size: .9rem; font-weight: 500;
  padding: .45rem .65rem; border-radius: var(--r-ctl);
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " ▾"; font-size: .7em; color: var(--faint); }
.nav-more summary:hover { color: var(--ink); background: var(--hover); }
.nav-more[open] summary { color: var(--ink); }
.nav-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 220px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  animation: rise .16s var(--ease) both;
}
.nav-more-menu a { padding: .5rem .7rem; border-radius: var(--r-ctl); }
.menu-label {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint); padding: .55rem .7rem .15rem;
}

/* auth area */
.nav-auth { display: flex; gap: .5rem; align-items: center; margin-left: .6rem; padding-left: .9rem; border-left: 1px solid var(--line2); }
.nav-auth .btn { font-size: .88rem; }
.nav-auth .whoami { color: var(--muted); font-size: .85rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hamburger: hidden on desktop, drawer trigger on mobile */
.nav-burger {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; flex: none;
}
.nav-burger span {
  display: block; height: 2px; background: var(--ink); border-radius: 1px;
  margin: 5px 0; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(14, 14, 16, .38);
}
body.nav-open { overflow: hidden; }
body.nav-open .masthead { z-index: 90; }

/* Nine destinations plus the account corner: the name pill gives way first,
   then the whole nav folds into the drawer. */
@media (max-width: 1400px) {
  .nav-auth .whoami { display: none; }
}
@media (max-width: 1200px) {
  /* backdrop-filter on the masthead would trap the fixed drawer inside it,
     so the mobile header goes solid instead of blurred */
  .masthead { backdrop-filter: none; -webkit-backdrop-filter: none; background: #ffffff; }
  .nav-burger { display: block; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: min(320px, 85vw);
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 4.2rem 1.1rem 2rem;
    background: #ffffff; box-shadow: -12px 0 32px rgba(14, 14, 14, .18);
    transform: translateX(105%); transition: transform .28s var(--ease);
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav a {
    font-size: .95rem; padding: .85rem .4rem; border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent; border-radius: 0;
  }
  .nav a.active { box-shadow: none; border-left-color: var(--accent); padding-left: .7rem; }
  .nav-more { width: 100%; }
  .nav-more summary { padding: .85rem .4rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-more-menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 .6rem; min-width: 0; }
  .nav-auth { margin: 1rem 0 0; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line2); flex-wrap: wrap; }
  .nav-auth .btn { border-bottom: 0; }
}

/* the pulse strip: data currency worn on the outside of every page */
.pulse {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .38rem 1.4rem;
  background: var(--raised); border-bottom: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}
.pulse a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.pulse a:hover { color: var(--accent); }
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none;
  animation: pulse 3.2s ease-in-out infinite;
}
.pulse-dot.recess { background: var(--ochre); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

main { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.4rem 5rem; outline: none; }
.loading { color: var(--muted); font-family: var(--mono); font-size: .9rem; }

/* full-bleed section inside the centred main column: symmetric negative
   margins, so both edges pass the viewport edge and the clip on body eats
   the scrollbar-width overshoot */
.bleed { margin-inline: calc(50% - 50vw); }

/* ---------- footer ---------- */
.footer { background: var(--dk-bg); color: var(--dk-muted); margin-top: 2rem; font-size: .88rem; }
.foot-grid {
  max-width: 1120px; margin: 0 auto; padding: 2.6rem 1.4rem 1.4rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 1.6rem;
}
.foot-brand .brand-text { color: var(--dk-ink); font-size: 1.1rem; }
.foot-brand p { margin: .7rem 0 0; max-width: 34ch; }
.foot-updated { color: color-mix(in srgb, var(--dk-muted) 75%, transparent); font-size: .8rem; }
.foot-grid h3 {
  margin: 0 0 .7rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--dk-ink);
}
.foot-grid a { display: block; color: var(--dk-muted); padding: .22rem 0; }
.foot-grid a:hover { color: var(--dk-ink); text-decoration: none; }
.foot-legal {
  max-width: 1120px; margin: 0 auto; padding: 1.2rem 1.4rem 2rem;
  border-top: 1px solid var(--dk-line); font-size: .78rem;
  color: color-mix(in srgb, var(--dk-muted) 80%, transparent);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* view entrance */
.view { animation: rise .3s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: fadeout .16s ease both; }
::view-transition-new(root) { animation: fadein .2s ease both; }
@keyframes fadeout { to { opacity: 0 } }
@keyframes fadein { from { opacity: 0 } }

/* ---------- type ---------- */
.eyebrow { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 .5rem; }
.eyebrow a { color: var(--muted); }
h1 {
  font-family: var(--display);
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  margin: 0 0 .5rem;
}
h2 {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  margin: 2.2rem 0 .9rem; color: var(--ink);
  display: flex; align-items: center; gap: .55rem;
}
h2::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.lede { color: var(--muted); max-width: 64ch; margin: 0 0 1.4rem; font-size: 1.02rem; }
.hint { color: var(--faint); font-size: .82rem; }
.note { color: var(--muted); font-size: .9rem; }
.mono { font-family: var(--mono); }

/* ---------- surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  padding: 1rem 1.15rem; box-shadow: var(--shadow-card);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.callout {
  background: var(--ochre-soft); border: 1px solid color-mix(in srgb, var(--ochre) 30%, transparent);
  border-radius: var(--r-ctl); padding: .75rem 1rem; margin: 1rem 0; font-size: .92rem;
}
.callout strong { color: var(--ochre); }

/* ---------- badges & chips ---------- */
.badge {
  display: inline-block; font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
  padding: .12rem .5rem; border-radius: 4px; border: 1px solid var(--line2);
  color: var(--muted); white-space: nowrap; vertical-align: middle; background: var(--raised);
}
.badge.guillotine { background: var(--hatch), var(--raised); }
/* A ministerial or shadow office. Wraps, unlike every other badge: portfolio
   titles are long and a nowrap badge would force the spend table wider than
   the viewport on a phone. */
.badge.office {
  margin: .18rem 0; white-space: normal; text-transform: none; letter-spacing: .02em;
  color: var(--ink); border-color: var(--line2); background: var(--raised);
}
.badge.contested { color: var(--no); border-color: color-mix(in srgb, var(--no) 40%, transparent); background: rgba(201, 48, 42, .06); }
.badge.scoredb { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); background: var(--mint-soft); }
/* A curated call the desk itself marked low confidence. Sits inside the ochre
   "why it's tagged this way" callout, so it keeps the raised background to
   stay legible against it. */
.badge.loose { color: var(--ochre); border-color: rgba(178, 83, 23, .4); background: var(--raised); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line2); border-radius: 999px;
  padding: .32rem .85rem; cursor: pointer; user-select: none;
  transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chip:hover { transform: translateY(-1px); border-color: var(--accent); text-decoration: none; }
.chip:active { transform: translateY(0) scale(.97); }
.chip.on {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chip .x { font-weight: 700; opacity: .7; }
.chip .k { font-family: var(--mono); font-size: .64rem; opacity: .6; letter-spacing: .06em; }
.chip.linkchip { background: transparent; }
.cloud { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Party chips carry their group's colour as a left edge rather than as a fill.
   A filled chip in six saturated colours turns the rail into bunting and,
   worse, makes the selected state (.chip.on, which is a fill) unreadable
   against it. The edge identifies the party, the fill stays available to mean
   "this one is selected", and the two never compete. */
.chip.party { border-left-width: 3px; border-left-color: var(--line2); }
.chip.party.labor { border-left-color: var(--g-labor); }
.chip.party.coalition { border-left-color: var(--g-coalition); }
.chip.party.greens { border-left-color: var(--g-greens); }
.chip.party.onenation { border-left-color: var(--g-onenation); }
.chip.party.minor { border-left-color: var(--g-minor); }
.chip.party.independent { border-left-color: var(--g-independent); }
.chip.party.on { border-left-color: var(--accent); }
.party-rail .cloud { max-height: 7rem; }

.chip-cat {
  display: inline-block; font-size: .78rem; border-radius: 4px; padding: .12rem .55rem;
  margin: 0 .3rem .3rem 0; background: var(--mint-soft); color: var(--mint);
  border: 1px solid transparent; transition: border-color .15s var(--ease);
}
.chip-cat:hover { border-color: var(--mint); text-decoration: none; }
.chip-cat.against { background: var(--ochre-soft); color: var(--ochre); }
.chip-cat.against:hover { border-color: var(--ochre); }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
input[type="search"], input[type="text"], input[type="email"], input[type="password"], select, textarea {
  font: inherit; color: var(--ink); padding: .5rem .75rem;
  border: 1px solid var(--line2); border-radius: var(--r-ctl); background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.seg button {
  font-size: .85rem; border: 0; background: transparent; color: var(--muted);
  padding: .42rem .8rem; cursor: pointer; border-right: 1px solid var(--line);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); background: var(--hover); }
.seg button.on { background: var(--ink); color: #fff; font-weight: 600; }
.btn {
  display: inline-block;
  font-size: .88rem; font-weight: 500; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line2); border-radius: var(--r-ctl); padding: .45rem .9rem; cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); text-decoration: none; }
.btn.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; }
.btn.big { font-size: 1rem; padding: .7rem 1.5rem; border-radius: 10px; }
.btn.danger:hover { border-color: var(--no); color: var(--no); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- board (leaderboard) ---------- */
.board-hero { padding: 1.6rem 0 .4rem; }
.board-hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); max-width: 24ch; }
.searchwrap { position: relative; max-width: 560px; margin: 1.1rem 0 .8rem; }
.searchwrap input {
  width: 100%; font-size: 1.05rem; padding: .8rem 1rem .8rem 2.6rem;
  border-radius: 10px; background: var(--surface);
}
.searchwrap .mag { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  max-height: 320px; overflow-y: auto; box-shadow: var(--shadow-pop);
  animation: rise .18s var(--ease) both;
}
.suggest-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); padding: .6rem .9rem; cursor: pointer; border-bottom: 1px solid var(--line); }
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover, .suggest-item.sel { background: var(--hover); }
.suggest-item .s-name { font-weight: 600; }
.suggest-item .s-stance { color: var(--muted); font-size: .84rem; }
.suggest-item .k { float: right; }

.board-summary { margin: .8rem 0 1rem; }
.board-summary .stance-line { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin: .2rem 0; }

/* leaderboard rows */
.lb { border: 1px solid var(--line2); border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.lb-head, .lb-row {
  display: grid; grid-template-columns: 3rem minmax(180px, 1.4fr) 5.2rem minmax(140px, 1fr) 3.6rem 6.4rem;
  gap: .8rem; align-items: center; padding: .55rem .9rem;
}
.lb-nv { line-height: 1.35; }
.lb-head { font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid var(--line2); background: var(--raised); }
.lb-item { border-bottom: 1px solid var(--line); transition: background .15s var(--ease); will-change: transform; }
.lb-item:last-child { border-bottom: 0; }
.lb-item:hover { background: var(--hover); }
.lb-item.open { background: var(--raised); }
.namebtn {
  background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; font-size: inherit;
  cursor: pointer; text-align: left;
}
.namebtn:hover { color: var(--accent); }
.namebtn .caret { color: var(--faint); font-size: .7rem; }
.lb-detail {
  padding: .3rem 1rem 1rem 3.8rem;
  animation: rise .25s var(--ease) both;
  border-top: 1px dashed var(--line2);
}
.lbd-bill { margin: .6rem 0; }
.lbd-title { margin: 0 0 .3rem; font-size: .92rem; }
.lbd-title a { color: var(--ink); font-weight: 600; }
.lbd-title a:hover { color: var(--accent); }
.lbd-narrative { margin: .1rem 0 .35rem; font-size: .88rem; color: var(--muted); }
.nverdict { font-weight: 700; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.nverdict.for { color: var(--mint); }
.nverdict.against { color: var(--no); }
.nverdict.split { color: var(--ochre); }
.nverdict.na { color: var(--faint); }
.lbd-div { display: flex; gap: .8rem; align-items: baseline; padding: .18rem 0; font-size: .86rem; }
.lbd-div .d { color: var(--faint); font-size: .76rem; min-width: 6rem; }
.mark.with { color: var(--mint); font-size: .8rem; }
.mark.against { color: var(--no); font-size: .8rem; }
.lb-rank { font-family: var(--mono); color: var(--faint); font-size: .85rem; }
.avatar {
  border-radius: 50%; object-fit: cover; object-position: top;
  border: 1px solid var(--line2); background: var(--raised); flex: none;
}
.lb-name.with-av { display: flex; align-items: center; gap: .65rem; }
.lb-name-txt { min-width: 0; }
.profile-head .avatar { border-width: 2px; }
.lb-name a { color: var(--ink); font-weight: 600; }
.lb-name a:hover { color: var(--accent); }
.lb-name .sub { display: block; color: var(--muted); font-size: .8rem; }
.lb-name .outlier { display: block; color: var(--ochre); font-size: .78rem; margin-top: .1rem; }
.lb-pct { font-family: var(--mono); font-weight: 700; font-size: 1rem; text-align: right; }
.lb-nv { font-family: var(--mono); color: var(--faint); font-size: .78rem; text-align: right; }
.flipping .lb-row { transition: transform .45s var(--ease), background .15s var(--ease); }

/* meters */
.meter-track { height: 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.meter-fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 70%, #7dc9a4), var(--mint)); transition: width .5s var(--ease); }

/* ---------- division strip ---------- */
.strip { margin: .4rem 0; }
.strip-bar { display: flex; align-items: center; gap: .6rem; }
.strip-count { font-family: var(--mono); font-weight: 700; min-width: 2.3rem; }
.strip-count.noes { text-align: right; }
.strip-track { flex: 1; display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--raised); border: 1px solid var(--line2); }
.strip-side { display: flex; height: 100%; }
.strip-side.noes { justify-content: flex-end; }
.strip-gutter { width: 2px; background: var(--ink); flex: none; }
.seg-pg { height: 100%; border-right: 2px solid var(--bg); transition: filter .15s var(--ease); }
.seg-pg:hover { filter: brightness(1.1); }
.strip-side.noes .seg-pg { border-right: 0; border-left: 2px solid var(--bg); opacity: .45; }
.strip-labels { display: flex; justify-content: space-between; font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: .2rem; }
.strip.hatched .strip-track { background: var(--hatch), var(--raised); }
.strip.hatched .seg-pg { opacity: .3; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; font-size: .82rem; color: var(--muted); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .55rem; border-bottom: 1px solid var(--line); }
th { font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--raised); border-bottom: 1px solid var(--line2); }
th.sortable { cursor: pointer; user-select: none; transition: color .15s var(--ease); white-space: nowrap; }
th.sortable:hover { color: var(--accent); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }
.sortarrow { color: var(--accent); font-size: .6rem; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s var(--ease); }
tbody tr:hover { background: var(--hover); }
td.num, th.num { text-align: right; font-family: var(--mono); }
td.num .hint { white-space: normal; }
/* Numbers never wrap, and the columns holding them only need room for the
   figure, so the reading columns keep the width instead. */
td.num, th.num { white-space: nowrap; padding-left: .35rem; }

/* ---------- the expenses nudge ---------- */
/* Fixed, not absolute, and parked on body rather than in the cell: .tablewrap
   scrolls horizontally, which makes its overflow-y computed value clip too,
   so anything sitting above the first row inside it is cut off. app.js holds
   it over the figure and hides it when that figure leaves the screen. */
.spend-nudge {
  position: fixed; z-index: 30;
  display: flex; align-items: center;
  padding: .1rem .1rem .1rem .62rem;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(16, 17, 16, .22);
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  animation: nudge-in .34s var(--ease) both, nudge-bob 2.6s var(--ease) .34s infinite;
}
.spend-nudge.off { opacity: 0; visibility: hidden; }
.spend-nudge a { color: var(--accent-ink); padding: .22rem .12rem; }
.spend-nudge a:hover { text-decoration: underline; text-underline-offset: 2px; }
.spend-nudge button {
  background: none; border: 0; cursor: pointer; border-radius: 999px;
  color: color-mix(in srgb, var(--accent-ink) 65%, transparent);
  font-size: .95rem; line-height: 1; padding: .22rem .42rem;
}
.spend-nudge button:hover { color: var(--accent-ink); background: rgba(255, 255, 255, .18); }
/* The stem drops from the bubble to the figure at --tail-x, which app.js keeps
   aimed at the middle of that figure even after the bubble has been clamped to
   the viewport, and --stem-h long enough to reach it over the column heading. */
.spend-nudge::before {
  content: ""; position: absolute; top: 100%; left: var(--tail-x, 50%);
  margin-left: -1px; width: 2px; height: var(--stem-h, 0px); background: var(--accent);
}
.spend-nudge::after {
  content: ""; position: absolute; top: calc(100% + var(--stem-h, 0px)); left: var(--tail-x, 50%);
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--accent);
}
@keyframes nudge-in { from { opacity: 0; transform: translateY(-7px); } }
@keyframes nudge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.tile { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card); padding: .8rem 1rem; box-shadow: var(--shadow-card); }
.tile .v { font-family: var(--mono); font-size: 1.55rem; font-weight: 700; color: var(--ink); }
.tile .l { color: var(--muted); font-size: .8rem; }

/* ---------- record rows ---------- */
.reclist { border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
.rec { display: grid; grid-template-columns: 6.4rem 1fr auto; gap: .3rem 1rem; align-items: baseline; padding: .55rem .95rem; border-bottom: 1px solid var(--line); transition: background .15s var(--ease); }
.rec:hover { background: var(--hover); }
.rec:last-child { border-bottom: 0; }
.rec.hatched { background: var(--hatch); }
.rec.hatched:hover { background: var(--hatch), var(--hover); }
.rec .d { font-family: var(--mono); color: var(--faint); font-size: .78rem; white-space: nowrap; }
.rec .t a { color: var(--ink); font-weight: 550; }
.rec .t a:hover { color: var(--accent); }
.rec .meta { color: var(--faint); font-size: .8rem; }
.votechip { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .74rem; padding: .1rem .5rem; border-radius: 4px; min-width: 2.8rem; text-align: center; }
.votechip.aye { background: var(--mint-soft); color: var(--mint); }
.votechip.no { background: rgba(201, 48, 42, .1); color: var(--no); }
.rebel-flag { color: var(--ochre); font-weight: 700; }

/* division page */
.votecols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin-top: 1rem; }
.votecols .card h3 { margin: 0 0 .4rem; font-size: .92rem; }
.votecols ul { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.votecols li { padding: .12rem 0; }
.votecols li a { color: var(--ink); }
.votecols li a:hover { color: var(--accent); }
blockquote.question {
  font-family: var(--display); font-size: 1.1rem; font-weight: 500; margin: 1rem 0; padding: .8rem 1.1rem;
  border-left: 4px solid var(--accent); background: var(--raised); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
}
.result-line { font-weight: 600; margin: .6rem 0; }
.result-line .passed { color: var(--mint); }
.result-line .failed { color: var(--no); }

/* ---------- say vs do panel ---------- */
.saydo { display: grid; gap: .8rem; }
.sd-row { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card); padding: .8rem 1rem; box-shadow: var(--shadow-card); }
.sd-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.sd-head a { color: var(--ink); font-weight: 700; }
.sd-head a:hover { color: var(--accent); }
.badge.sd-differ { color: var(--ochre); border-color: rgba(178, 83, 23, .4); background: var(--ochre-soft); }
.sd-grid { display: grid; grid-template-columns: 6.5rem minmax(120px, 220px) 1fr; gap: .35rem .8rem; align-items: center; }
.sd-label { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.sd-word { font-size: .88rem; }
.vbar { position: relative; display: block; height: 10px; background: var(--raised); border: 1px solid var(--line2); border-radius: 5px; overflow: hidden; }
.vbar-fill { position: absolute; top: 0; bottom: 0; }
.vbar-fill.pos { background: var(--mint); }
.vbar-fill.neg { background: var(--no); }
.vbar-mid { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; background: var(--ink); opacity: .35; }
.sd-quotes { margin-top: .5rem; }
.sd-quotes summary { cursor: pointer; color: var(--muted); font-size: .85rem; user-select: none; }
.sd-quotes summary:hover { color: var(--accent); }
.sd-quote { margin: .35rem 0 0 .4rem; font-size: .88rem; }
.sdq-pos { color: var(--mint); }
.sdq-neg { color: var(--no); }
@media (max-width: 560px) {
  .sd-grid { grid-template-columns: 5rem 1fr; }
  .sd-word { grid-column: 2; }
}

/* member profile */
.profile-head {
  display: flex; align-items: center; gap: .9rem; flex-wrap: nowrap; margin-bottom: .4rem;
}
.profile-head .avatar { flex: none; }
.profile-head .ph-main { flex: 1 1 auto; min-width: 0; }
.profile-head h1 { margin: 0; }
.profile-head .ph-chamber { flex: none; margin-left: auto; text-align: right; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; color: var(--muted); margin: 0 0 1rem; font-size: .95rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
@media (max-width: 640px) {
  .profile-head { flex-wrap: wrap; }
  .profile-head .ph-chamber { margin-left: 0; }
}
.scorelist { display: grid; gap: .5rem; max-width: 680px; }
.scorerow { display: grid; grid-template-columns: minmax(160px, 240px) 1fr 3.4rem auto; gap: .8rem; align-items: center; }
.scorerow .cat a { color: var(--ink); font-size: .92rem; }
.scorerow .cat a:hover { color: var(--accent); }
.scorerow .pct { font-family: var(--mono); font-weight: 700; text-align: right; }
.scorerow .n { color: var(--faint); font-size: .76rem; font-family: var(--mono); white-space: nowrap; }

/* initials avatar, so a member without a portrait still reads as a person */
.avatar.initials {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; letter-spacing: .02em;
  border: 1px solid rgba(14, 14, 14, .12);
  text-transform: uppercase; overflow: hidden;
}

/* ---------- bill journey ---------- */
.verdict { font-family: var(--display); font-size: 1.25rem; font-weight: 700; margin: 1rem 0 .4rem; }
.verdict.passed { color: var(--mint); }
.verdict.failed { color: var(--no); }
.verdict.pending { color: var(--muted); }
.journey { display: grid; gap: 1rem; }
.jhouse { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card); padding: 1rem 1.15rem; box-shadow: var(--shadow-card); }
.jhead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; font-size: 1rem; }
.joutcome { font-family: var(--mono); font-size: .78rem; margin-left: auto; }
.joutcome.passed { color: var(--mint); }
.joutcome.blocked, .joutcome.defeated { color: var(--no); }
.joutcome.advanced, .joutcome.none { color: var(--muted); }
.jstep { border-left: 3px solid var(--line2); padding: .35rem 0 .55rem .9rem; margin: .4rem 0; }
.jlabel { margin: 0 0 .25rem; font-weight: 600; }
.jresult { margin: .25rem 0 0; font-size: .9rem; }
.jresult .passed { color: var(--mint); font-weight: 700; }
.jresult .failed { color: var(--no); font-weight: 700; }
details.jmore { margin-top: .6rem; }
details.jmore summary {
  cursor: pointer; color: var(--muted); font-size: .88rem;
  padding: .4rem .6rem; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: var(--surface);
  list-style: none; user-select: none; transition: border-color .15s var(--ease);
}
details.jmore summary::-webkit-details-marker { display: none; }
details.jmore summary::before { content: "▸ "; color: var(--faint); }
details.jmore[open] summary::before { content: "▾ "; }
details.jmore summary:hover { border-color: var(--accent); color: var(--ink); }

/* ---------- quiz ---------- */
.quiz-wrap { max-width: 720px; margin: 0 auto; padding-top: 1.5rem; animation: rise .3s var(--ease) both; }
.quiz-progress { height: 6px; background: var(--raised); border-radius: 3px; overflow: hidden; margin-bottom: 1.6rem; }
.quiz-progress-fill { height: 100%; background: var(--accent); transition: width .35s var(--ease); }
.quiz-q { font-family: var(--display); font-size: clamp(1.3rem, 3.2vw, 1.7rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: .4rem 0 1.6rem; min-height: 4.5em; }
.quiz-opts { display: flex; gap: .7rem; flex-wrap: wrap; }
.quiz-opts.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.quiz-opt { font-size: .95rem; padding: .8rem .5rem; border-radius: var(--r-ctl); text-align: center; }
/* spectrum: strong disagree -> strong agree */
.quiz-opt.ln1:hover, .quiz-opt.ln1.on { border-color: var(--no); box-shadow: 0 0 0 3px rgba(201, 48, 42, .18); }
.quiz-opt.ln0_5:hover, .quiz-opt.ln0_5.on { border-color: color-mix(in srgb, var(--no) 60%, var(--line2)); box-shadow: 0 0 0 3px rgba(201, 48, 42, .1); }
.quiz-opt.l0:hover, .quiz-opt.l0.on { border-color: var(--line2); background: var(--hover); }
.quiz-opt.l0_5:hover, .quiz-opt.l0_5.on { border-color: color-mix(in srgb, var(--mint) 60%, var(--line2)); box-shadow: 0 0 0 3px var(--mint-soft); }
.quiz-opt.l1:hover, .quiz-opt.l1.on { border-color: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
@media (max-width: 640px) {
  .quiz-opts.likert { grid-template-columns: 1fr 1fr; }
  .quiz-opts.likert .l0 { grid-column: 1 / -1; }
}
.quiz-opts.choice { display: grid; gap: .55rem; max-width: 480px; }
.quiz-opt.copt { text-align: left; padding: .75rem 1rem; }
.quiz-opt.copt:hover, .quiz-opt.copt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.voice-card { border-color: color-mix(in srgb, var(--ochre) 40%, var(--line2)); }
.quiz-start { font-size: 1.1rem; padding: .8rem 1.8rem; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.quiz-start:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(48, 56, 221, .3); background: var(--accent-hover); }

/* ---------- newsroom ---------- */
.news-head { display: flex; align-items: baseline; gap: 1rem; margin: .4rem 0 1.2rem; border-bottom: 1px solid var(--line2); padding-bottom: .5rem; }
.news-head h1 { font-size: 1.6rem; margin: 0; }
.news-head .hint { margin-left: auto; }
.news-cat {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: .22rem .55rem; border-radius: 4px; margin-bottom: .5rem;
}
a.news-cat:hover { text-decoration: none; background: var(--accent-hover); }
.news-cat.opinion { background: var(--ink); }
a.news-cat.opinion:hover { background: #33352f; }

/* The secondary tags beside it: which parliament the piece is about, and which
   party it is about when it is about one. They are deliberately quieter than
   the category badge, because they answer a different question. The badge says
   what KIND of piece this is, which changes how the claims in it should be
   read; these two say what it is ON, which is what a reader scanning a grid of
   nine parliaments is actually filtering for. Same geometry, outline instead
   of a fill, so the row reads as one label with two qualifiers rather than as
   three competing badges. */
.news-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.news-tags .news-cat { margin-bottom: 0; }
.news-tag {
  display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; padding: .22rem .55rem; border-radius: 4px;
  color: var(--muted); background: var(--raised); border: 1px solid var(--line2);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
a.news-tag:hover { text-decoration: none; color: var(--ink); border-color: var(--accent); }
/* The party colour is a left edge, never a fill, the same rule the chips in
   the filter rails follow: six saturated fills on a grid of cards is bunting,
   and the edge identifies the party just as well. */
.news-tag.party { border-left-width: 3px; border-left-color: var(--line2); }
.news-tag.party.labor { border-left-color: var(--g-labor); }
.news-tag.party.coalition { border-left-color: var(--g-coalition); }
.news-tag.party.greens { border-left-color: var(--g-greens); }
.news-tag.party.onenation { border-left-color: var(--g-onenation); }
.news-tag.party.minor { border-left-color: var(--g-minor); }
.news-tag.party.independent { border-left-color: var(--g-independent); }
.news-meta { color: var(--faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.news-meta .by { color: var(--muted); }

.news-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4rem; align-items: center; margin-bottom: 2rem; }
.news-feat .thumb { display: block; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line2); }
.news-feat .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s var(--ease); }
.news-feat .thumb:hover img { transform: scale(1.03); }
.news-feat h3 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.18; margin: .2rem 0 .5rem; }
.news-feat h3 a { color: var(--ink); }
.news-feat h3 a:hover { color: var(--accent); text-decoration: none; }
.news-feat .excerpt { color: var(--muted); margin: 0 0 .7rem; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.news-card .thumb { display: block; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line2); margin-bottom: .7rem; }
.news-card .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s var(--ease); }
.news-card .thumb:hover img { transform: scale(1.03); }
.news-card h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 650; line-height: 1.25; margin: .2rem 0 .4rem; }
.news-card h3 a { color: var(--ink); }
.news-card h3 a:hover { color: var(--accent); text-decoration: none; }
.news-card .excerpt { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }

/* article page */
.art-wrap { max-width: 780px; margin: 0 auto; }
.art-wrap h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.art-dek { font-family: var(--display); font-weight: 500; font-size: 1.12rem; color: var(--muted); line-height: 1.5; margin: .2rem 0 1rem; }
.art-byline {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
  font-size: .78rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); padding: .6rem 0; margin: 0 0 1.6rem;
}
.art-byline .ai-chip { color: var(--ochre); border: 1px solid color-mix(in srgb, var(--ochre) 40%, transparent); border-radius: 4px; padding: .1rem .45rem; background: var(--ochre-soft); }
.art-body { font-size: 1.02rem; line-height: 1.7; }
.art-body p { margin: 0 0 1.15rem; }
.art-body h2 {
  font-family: var(--display); font-size: 1.35rem; font-weight: 700; text-transform: none; letter-spacing: -.01em;
  margin: 2rem 0 .8rem; display: block;
}
.art-body h2::before { content: none; }
.art-body a.mp { color: var(--ink); font-weight: 700; border-bottom: 1px dashed var(--line2); }
.art-body a.mp:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.art-fig { margin: 0 0 1.4rem; }
.art-fig svg, .art-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line2); border-radius: var(--r-card); }
.art-fig figcaption { font-size: .8rem; color: var(--faint); margin-top: .45rem; }
.art-fig .fig-label {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ochre);
  margin-bottom: .4rem;
}
.art-quote {
  font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.55; color: var(--ink);
  margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--accent); max-width: 44rem;
}
.art-quote .who { display: block; margin-top: .5rem; font-family: var(--sans); font-size: .78rem; color: var(--faint); }
.factbox { margin: 1.6rem 0; }
.receipt { margin: 1.4rem 0; }
.rrow { display: grid; grid-template-columns: 110px 1fr 90px; gap: .7rem; align-items: center; margin-bottom: .45rem; font-size: .85rem; }
.rbar { height: 12px; border-radius: 3px; background: var(--raised); overflow: hidden; border: 1px solid var(--line2); }
.rbar > div { height: 100%; }
.rnum { font-family: var(--mono); color: var(--muted); text-align: right; }
.srcbox { background: var(--raised); border: 1px solid var(--line2); border-radius: var(--r-card); padding: 1.1rem 1.2rem; margin-top: 2.2rem; font-size: .88rem; color: var(--muted); }
.srcbox ul { margin: .3rem 0 .9rem; padding-left: 1.1rem; }
.srcbox li { margin-bottom: .3rem; }
.srcbox .method { border-top: 1px dashed var(--line2); padding-top: .8rem; font-size: .8rem; color: var(--faint); margin: .6rem 0 0; }

/* opinion pieces argue a position; the label says so before the first word */
.opinion-note {
  display: flex; gap: .6rem; align-items: baseline;
  background: var(--raised); border: 1px solid var(--line2); border-left: 4px solid var(--ink);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  padding: .6rem .9rem; margin: 0 0 1.4rem; font-size: .88rem; color: var(--muted);
}

@media (max-width: 760px) {
  .news-feat { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lb-head, .lb-row { grid-template-columns: 2.2rem 1fr 4.5rem 3.2rem; }
  .lb-head :nth-child(3), .lb-row > :nth-child(3), .lb-head :nth-child(6), .lb-row > :nth-child(6) { display: none; }
  .rec { grid-template-columns: 1fr auto; }
  .rec .d { grid-column: 1 / -1; }
  h1 { font-size: 1.7rem; }
}

/* every sortable heading advertises that it sorts */
th.sortable .sortarrow { color: var(--faint); font-size: .72rem; opacity: .55; transition: opacity .15s var(--ease), color .15s var(--ease); }
th.sortable:hover .sortarrow { opacity: 1; color: var(--accent); }
th.sortable.active .sortarrow { color: var(--accent); opacity: 1; font-size: .6rem; }

/* ---- chamber badges: solid colour, chamber named in white ---- */
.badge.reps, .badge.senate, .badge.state {
  color: #fff;
  border: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 4px;
}
.badge.reps { background: #157a48; }
.badge.senate { background: #b95c28; }
.badge.state { background: #5a4fa3; }
.badge.state.la { background: #5a4fa3; }
.badge.state.lc { background: #7a5aa8; }
.badge.state.ha { background: #45559c; }
a .badge.reps, a .badge.senate, a .badge.state { text-decoration: none; }

/* explainer card, used on Divisions and Spend */
.card.explainer { background: var(--raised); margin: 1rem 0 1.4rem; max-width: 78ch; }
.card.explainer p { font-size: .93rem; }

/* reading guide */
.readguide { list-style: none; margin: .6rem 0 1.2rem; padding: 0; max-width: 70ch; }
.readguide li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.readguide li:last-child { border-bottom: 0; }
.readguide .badge, .readguide .votechip { margin-right: .5rem; }

/* Australia's MP */
.amp-hero { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin: 1.2rem 0; }
.amp-hero .avatar { border-width: 3px; border-color: var(--accent); }
.amp-match { font-size: 1.05rem; margin: 0 0 .2rem; }
.amp-match strong { font-family: var(--display); font-size: 2.1rem; color: var(--accent); }
.amp-sub { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 1.2rem 0 .5rem; }
.cta-card { margin: 2rem 0 0; border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); background: linear-gradient(180deg, var(--accent-soft), transparent 70%); }
.cta-card .quiz-start { display: inline-block; text-decoration: none; }
.cta-card .quiz-start:hover { text-decoration: none; }

/* newsroom filters */
.news-filters { margin: 0 0 1.6rem; }
.seg.juris { flex-wrap: wrap; max-width: 100%; }
.seg.juris button { font-size: .78rem; }
.mp-rail { margin-top: .8rem; }
.rail-label { display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .4rem; }
.mp-rail .chip { font-size: .8rem; padding: .26rem .7rem; }
.mp-rail .chip .k { font-size: .62rem; }
.mp-rail .chip.more { background: var(--raised); color: var(--muted); font-weight: 600; }
.mp-rail .cloud { max-height: 9.5rem; overflow: auto; }

/* people named in a story */
.people-box { margin-top: 2rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.people-box .chip { padding-left: .3rem; gap: .45rem; }
.people-box .chip .avatar { width: 22px; height: 22px; }
.people-box .chip .k { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* spending rows reuse the article receipt bars */
.rrow a { color: var(--ink); font-weight: 600; }
.rrow a:hover { color: var(--accent); }

/* ---------- parliamentary work expenses ---------- */
.tile-link { display: block; color: inherit; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.tile-link:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.tile-link .v { color: var(--accent); }
.spend-cats { display: grid; gap: .3rem; }
.spend-cat {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 7rem 3rem;
  gap: .7rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--line);
}
.spend-cat:last-child { border-bottom: 0; }
.sc-name { font-size: .9rem; }
.sc-bar { height: 10px; background: var(--raised); border: 1px solid var(--line2); border-radius: 5px; overflow: hidden; }
.sc-fill { display: block; height: 100%; background: var(--accent); }
.sc-fill.neg { background: var(--mint); }
.sc-amt { font-family: var(--mono); font-size: .88rem; text-align: right; }
.sc-pct { font-family: var(--mono); font-size: .78rem; text-align: right; }
table.ledger td { vertical-align: top; font-size: .88rem; }
table.ledger .nowrap { white-space: nowrap; }
.amt-neg { color: var(--mint); }
@media (max-width: 640px) {
  .spend-cat { grid-template-columns: 1fr 5.5rem; }
  .spend-cat .sc-bar, .spend-cat .sc-pct { display: none; }
}

/* A nine column table is the widest thing on the site. Below a roomy desktop
   the cells give up padding before the page gives up and scrolls sideways,
   which is the one thing a table of comparisons must never do: a column you
   have to drag into view is a column nobody compares. */
@media (max-width: 1180px) {
  .tablewrap th, .tablewrap td { padding-left: .4rem; padding-right: .4rem; }
}

/* Categorise bills: a curation screen, two panes. The list stays put and the
   editor scrolls, because the job is one bill at a time against a long
   taxonomy, and losing your place in the list every time you tag something is
   what makes that job unbearable. */
.cat-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 22rem) 1fr;
  gap: 1.2rem;
  align-items: start;
}
.cat-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  max-height: 78vh;
  overflow: auto;
}
.cat-bill {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .7rem;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cat-bill:hover { background: var(--hover); }
.cat-bill.on { background: var(--accent-soft); }
.cat-bill.dirty { border-left-color: var(--ochre); }
.cat-bill .t { display: block; font-weight: 600; line-height: 1.25; }
.cat-bill .meta { display: block; color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.cat-edit {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 1rem 1.1rem;
}
.cat-edit h2 { margin: 0 0 .3rem; font-size: 1.15rem; line-height: 1.3; text-transform: none; letter-spacing: 0; display: block; font-family: var(--display); }
.cat-edit h2::before { content: none; }

/* The review card is the point of the screen: it is what you check before you
   commit a judgment, so it stays on screen while you work down the taxonomy
   rather than scrolling away above it. Both directions are always shown, even
   when empty, so recording one and forgetting the other is a visible gap. */
.cat-review {
  position: sticky;
  top: .5rem;
  z-index: 2;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: .7rem .8rem;
  margin: .9rem 0 0;
  box-shadow: var(--shadow-card);
}
.cat-review.dirty { border-color: var(--ochre); }
.rev-head {
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.rev-flag {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: .78rem;
  color: #fff;
  background: var(--ochre);
  border-radius: 999px;
  padding: .05rem .5rem;
}
.rev-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: .5rem;
  align-items: start;
  padding: .35rem 0;
  border-top: 1px solid var(--line);
}
.rev-label { font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.rev-label .n {
  font-weight: 700;
  color: var(--ink);
  background: var(--hover);
  border-radius: 999px;
  min-width: 1.4rem;
  text-align: center;
  padding: 0 .3rem;
}
.rev-row.adv .rev-label .n { background: var(--mint); color: var(--mint-ink); }
.rev-row.agn .rev-label .n { background: var(--ochre); color: #fff; }

/* A chosen stance is a button that removes itself, so the review area is also
   where you correct a mistake. */
.pick {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .15rem .3rem .15rem .6rem;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .1rem .25rem .1rem 0;
}
.pick.adv { background: var(--mint-soft); border-color: var(--mint); color: var(--mint-ink); }
.pick.agn { background: var(--ochre-soft); border-color: var(--ochre); color: var(--ink); }
.pick .x { opacity: .55; font-size: 1rem; line-height: 1; }
.pick:hover .x { opacity: 1; }

.cat-note { display: block; margin: .6rem 0 .4rem; }
.cat-note textarea {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  resize: vertical;
}
.cat-contested { display: flex; gap: .45rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.cat-save { display: flex; gap: .7rem; align-items: center; margin: .7rem 0 0; flex-wrap: wrap; }

/* The taxonomy list. Each row carries the colour of the side it is on, so the
   choices already made are visible while scrolling past the ones not taken. */
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: .1rem .9rem;
  margin-top: .5rem;
}
.st-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .2rem .35rem;
  border-left: 3px solid transparent;
  border-radius: 5px;
}
.st-row.adv { background: var(--mint-soft); border-left-color: var(--mint); }
.st-row.agn { background: var(--ochre-soft); border-left-color: var(--ochre); }
.st-name { font-size: .88rem; line-height: 1.2; }
.st-name .k { color: var(--muted); font-size: .72rem; margin-left: .35rem; }
.st-btns { display: flex; gap: .25rem; flex: 0 0 auto; }
.st-b {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  padding: .12rem .5rem;
  line-height: 1.4;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  white-space: nowrap;
}
.st-b:hover { border-color: var(--accent); color: var(--ink); }
.st-b.adv.on { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); font-weight: 600; }
.st-b.agn.on { background: var(--ochre); border-color: var(--ochre); color: #fff; font-weight: 600; }

@media (max-width: 980px) {
  .cat-wrap { grid-template-columns: 1fr; }
  .cat-list { max-height: 34vh; }
  .cat-review { position: static; }
  .rev-row { grid-template-columns: 1fr; }
}

/* Articles that mention this member, bill or issue. The forward link and the
   backlink come from the same pass, so a reader who lands on a card can reach
   the reporting that used it. */
ul.related { list-style: none; margin: .4rem 0 1rem; padding: 0; }
ul.related li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
ul.related li a { font-weight: 600; }
ul.related .hint { display: block; margin-top: .15rem; }

/* A bill or an issue named in an article reaches its record, the same way a
   member's name does. Underlined on hover only, so a table of bills does not
   read as a wall of blue. */
a.billref, a.issueref { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent); }
a.billref:hover, a.issueref:hover { color: var(--accent); border-bottom-style: solid; }

/* The board showing a stance inverted. Marked, not merely reworded, because
   "Against tighter firearms laws" and "For tighter firearms laws" differ by one
   word and rank the same people in opposite orders. */
.stance-line.inverted { border-left: 3px solid var(--accent); padding-left: .5rem; }

/* A stance with a single scoreable bill. The whole leaderboard under it comes
   from one division, and eleven of these cannot be improved by categorising
   more bills because the chamber has only divided on them once. */
.chip.one-bill { border-style: dashed; }
.chip.one-bill .k { color: var(--accent); }

/* Right of reply. Set apart from the reporting above it, because it is the
   subject's voice and not ours, and because the absence of a reply is a
   finding the reader should be able to see at a glance. */
.ror-box p { margin: .6rem 0; }
.ror-reply { margin: .8rem 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--ink); }
.ror-reply .eyebrow { margin: 0 0 .3rem; }
.ror-reply blockquote { margin: 0; font-size: 1.02rem; }

/* ================= v4: the SaaS surfaces ================= */

/* ---------- landing ---------- */
.home { padding-top: 0; }
.hero {
  background:
    radial-gradient(90rem 40rem at 70% -20%, rgba(122, 131, 255, .16), transparent 60%),
    var(--dk-bg);
  color: var(--dk-ink);
  padding: 4.5rem 1.4rem 0;
  overflow: hidden;
}
.hero-inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--dk-muted);
  border: 1px solid var(--dk-line); border-radius: 999px; padding: .3rem .9rem;
  background: rgba(255, 255, 255, .03);
}
.hero-eyebrow .pulse-dot { width: 6px; height: 6px; }
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin: 1.2rem auto .9rem;
  max-width: 20ch;
  text-wrap: balance;
}
.hero h1 .for { color: #4ade8c; }
.hero h1 .against { color: #ff7a70; }
.hero-sub { color: var(--dk-muted); font-size: 1.12rem; max-width: 56ch; margin: 0 auto 1.6rem; text-wrap: balance; }
.hero-ctas { display: flex; gap: .9rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-ctas .btn.big.solid { background: var(--dk-accent); border-color: var(--dk-accent); color: #0e0f16; font-weight: 700; }
.hero-ctas .btn.big.solid:hover { background: #939bff; border-color: #939bff; }
.hero-ctas .arrowlink { color: var(--dk-ink); font-weight: 600; }
.hero-ctas .arrowlink:hover { color: var(--dk-accent); text-decoration: none; }

/* the hero shows the actual product: real rows, real numbers, cropped at the fold */
.hero-shot {
  max-width: 980px; margin: 0 auto; text-align: left;
  background: var(--dk-panel); border: 1px solid var(--dk-line); border-bottom: 0;
  border-radius: 14px 14px 0 0;
  padding: 1rem 1.1rem 0;
  box-shadow: 0 -20px 80px rgba(122, 131, 255, .12);
}
.hero-shot .hs-bar { display: flex; gap: .45rem; align-items: center; margin-bottom: .8rem; }
.hero-shot .hs-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dk-line); }
.hero-shot .hs-bar .hs-url {
  flex: 1; max-width: 320px; margin: 0 auto; text-align: center;
  font-family: var(--mono); font-size: .7rem; color: var(--dk-muted);
  background: rgba(255, 255, 255, .04); border-radius: 6px; padding: .2rem .8rem;
}
.hero-rows { display: grid; gap: 1px; background: var(--dk-line); border: 1px solid var(--dk-line); border-bottom: 0; border-radius: 8px 8px 0 0; overflow: hidden; }
.hero-row {
  display: grid; grid-template-columns: 2.4rem 1fr 4.2rem minmax(120px, 220px) 3.5rem;
  gap: .8rem; align-items: center;
  background: var(--dk-panel); padding: .55rem .9rem;
  font-size: .88rem; color: var(--dk-ink);
}
.hero-row .hr-rank { font-family: var(--mono); color: var(--dk-muted); font-size: .8rem; }
.hero-row .hr-sub { display: block; color: var(--dk-muted); font-size: .76rem; }
.hero-row .hr-pct { font-family: var(--mono); font-weight: 700; text-align: right; }
.hero-row .hr-n { font-family: var(--mono); color: var(--dk-muted); font-size: .76rem; text-align: right; }
.hero-row .meter-track { border-color: var(--dk-line); background: rgba(255, 255, 255, .06); }
@media (max-width: 640px) {
  .hero-row { grid-template-columns: 1.6rem 1fr 3.6rem; }
  .hero-row > :nth-child(4), .hero-row > :nth-child(5) { display: none; }
}

.hero-stats { background: var(--dk-bg); border-top: 1px solid var(--dk-line); }
.hero-stats-inner {
  max-width: 1120px; margin: 0 auto; padding: 1.4rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;
}
.hstat { text-align: center; }
.hstat .v { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--dk-ink); display: block; }
.hstat .l { color: var(--dk-muted); font-size: .8rem; }

.home-section { padding: 3.4rem 0 0; }
.home-section > .eyebrow { text-align: center; }
.home-section > h2 {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
  letter-spacing: -.02em; text-transform: none; display: block; text-align: center;
  margin: 0 auto .4rem; max-width: 30ch;
}
.home-section > h2::before { content: none; }
.home-section > .lede { text-align: center; margin: 0 auto 2rem; }

.feat-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.4rem; align-items: center; margin: 2.6rem 0; }
.feat-row.flip { grid-template-columns: 1.25fr 1fr; }
.feat-row.flip .feat-copy { order: 2; }
.feat-copy h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; margin: .3rem 0 .5rem; }
.feat-copy p { color: var(--muted); max-width: 46ch; }
.feat-copy .arrowlink { font-weight: 600; }
.feat-kicker { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.feat-shot {
  border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface);
  padding: 1rem; box-shadow: var(--shadow-card); overflow: hidden;
}
.feat-shot .lb { box-shadow: none; }
@media (max-width: 860px) {
  .feat-row, .feat-row.flip { grid-template-columns: 1fr; gap: 1.2rem; }
  .feat-row.flip .feat-copy { order: 0; }
}

.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.persona h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 700; margin: 0 0 .35rem; }
.persona p { color: var(--muted); font-size: .92rem; margin: 0; }

.cta-band {
  background: var(--dk-bg); color: var(--dk-ink);
  border-radius: var(--r-card);
  padding: 2.6rem 2rem; text-align: center; margin: 3.4rem 0 0;
}
.cta-band h2 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; text-transform: none; display: block; margin: 0 0 .5rem; letter-spacing: -.02em; }
.cta-band h2::before { content: none; }
.cta-band p { color: var(--dk-muted); margin: 0 0 1.4rem; }
.cta-band .btn.solid { background: var(--dk-accent); border-color: var(--dk-accent); color: #0e0f16; font-weight: 700; }

.arrowlink { font-weight: 600; white-space: nowrap; }
.arrowlink::after { content: " →"; }

/* ---------- pricing ---------- */
.pricing-head { text-align: center; max-width: 640px; margin: 1.5rem auto 2rem; }
.pricing-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.plans-tabs { display: flex; justify-content: center; margin: 0 0 1.8rem; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: stretch; }
.plan {
  position: relative;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  padding: 1.3rem 1.3rem 1.5rem; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.plan.popular { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card); }
.plan-badge {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border-radius: 999px; padding: .18rem .7rem; white-space: nowrap;
}
.plan h3 { margin: 0 0 .1rem; font-size: 1rem; font-weight: 600; }
.plan .price { font-family: var(--display); font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; margin: .3rem 0 0; }
.plan .price .cur { font-size: 1.1rem; font-weight: 600; color: var(--muted); vertical-align: .5em; margin-right: .1rem; }
.plan .per { color: var(--faint); font-size: .82rem; margin: 0 0 .6rem; }
.plan .blurb { color: var(--muted); font-size: .9rem; min-height: 3em; margin: 0 0 .9rem; }
.plan ul { list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); font-size: .89rem; flex: 1; }
.plan li { padding: .26rem 0 .26rem 1.3rem; position: relative; color: var(--muted); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.plan li.plus { color: var(--ink); font-weight: 500; }
.plan li.plus::before { content: "+"; color: var(--accent); }
.plan .btn { width: 100%; text-align: center; margin-top: 1rem; }
.pricing-note { text-align: center; color: var(--faint); font-size: .85rem; margin: 1.6rem auto; max-width: 62ch; }

/* The pricing matrix IS the pricing page: features down the left, one
   column per plan, price and button in the header. The first column and the
   header are both sticky so the comparison survives scrolling either way. */
.matrix { max-width: 1000px; margin: .4rem auto 0; }
.matrix table { min-width: 680px; }
.matrix th.m-cell, .matrix td.m-cell { text-align: center; vertical-align: middle; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.matrix th:first-child, .matrix td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  min-width: 210px; max-width: 260px;
}
.matrix .m-sub {
  display: block; font-weight: 400; font-size: .74rem; color: var(--faint);
  line-height: 1.35; margin-top: .15rem; max-width: 24rem;
}
.matrix thead th.m-corner { z-index: 3; }
.matrix .m-plan { padding: .9rem .7rem .8rem; min-width: 118px; }
.matrix .m-badge {
  display: block; margin: 0 auto .35rem; width: fit-content;
  background: var(--accent); color: var(--accent-ink);
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  border-radius: 999px; padding: .12rem .55rem;
}
.matrix .m-name { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.matrix .m-price { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); font-size: .72rem; margin: .25rem 0 .55rem; line-height: 1.3; }
.matrix .m-price strong { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.matrix .btn { font-size: .78rem; padding: .3rem .7rem; text-transform: none; letter-spacing: 0; }
.matrix td.m-popcol { background: var(--accent-soft); }
.matrix th.m-popcol { box-shadow: inset 0 3px 0 var(--accent); }
.matrix tr.m-blurb td { border-bottom: 1px solid var(--line2); }
.matrix tr.m-blurb td span { display: inline-block; font-size: .74rem; color: var(--muted); max-width: 140px; line-height: 1.35; }
.matrix tr.m-group td {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); background: var(--raised) !important; padding-top: .6rem;
}
.matrix tfoot td { border-top: 1px solid var(--line2); border-bottom: 0; text-align: center; padding: .7rem .55rem; }
.matrix tfoot td:first-child { text-align: left; }
.matrix .tick { color: var(--accent); font-weight: 700; font-size: 1rem; }
.matrix .dashx { color: var(--faint); }
@media (max-width: 640px) {
  .matrix th:first-child, .matrix td:first-child { min-width: 124px; font-size: .78rem; }
  .matrix .m-plan { min-width: 104px; }
}
.pricing-faq { max-width: 720px; margin: 2.5rem auto 0; }
.pricing-faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.pricing-faq summary { cursor: pointer; font-weight: 600; padding: .55rem 0; list-style: none; }
.pricing-faq summary::-webkit-details-marker { display: none; }
.pricing-faq summary::before { content: "▸ "; color: var(--faint); }
.pricing-faq details[open] summary::before { content: "▾ "; }
.pricing-faq p { color: var(--muted); margin: .2rem 0 .8rem; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 420px; margin: 2.5rem auto; }
.auth-wrap h1 { text-align: center; }
.auth-wrap .lede { text-align: center; }
.auth-card { padding: 1.5rem; }
.field { display: block; margin: 0 0 .9rem; }
.field span { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.field input, .field select { width: 100%; }
.form-error {
  background: rgba(201, 48, 42, .07); border: 1px solid color-mix(in srgb, var(--no) 40%, transparent);
  color: var(--no); border-radius: var(--r-ctl); padding: .55rem .8rem; font-size: .88rem; margin: 0 0 .9rem;
}
.form-ok {
  background: var(--mint-soft); border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent);
  color: var(--mint); border-radius: var(--r-ctl); padding: .55rem .8rem; font-size: .88rem; margin: 0 0 .9rem;
}
.auth-alt { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 1rem; }

/* Single sign-on. Deliberately NOT .btn.solid: the accent-blue button is the
   one thing on the card that commits the form, and two of them competing above
   it is how a person ends up pressing Google when they meant to type a
   password. These read as the alternative route they are. */
.sso-block { display: grid; gap: .55rem; margin: 0 0 .9rem; }
.sso-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 600; text-transform: none; letter-spacing: 0;
}
.sso-btn svg { flex: none; }
.sso-btn[disabled] { opacity: .6; }
.sso-terms { font-size: .78rem; color: var(--muted); margin: 0 0 .9rem; text-align: center; }
/* A rule with the word sitting in it, rather than a bare line: the divider has
   to say which side is which or it reads as a form that ended early. */
.sso-or { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; color: var(--muted); font-size: .78rem; }
.sso-or::before, .sso-or::after { content: ""; height: 1px; background: var(--line2); flex: 1; }
.sso-h { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1rem 0 .2rem; }
.sso-links { display: grid; gap: .5rem; margin: .6rem 0 0; }
.sso-link-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sso-link-row .who { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.sso-link-row .btn { margin-left: auto; }
.acct-type { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1rem; }
.acct-type button {
  text-align: left; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-ctl);
  padding: .7rem .8rem; cursor: pointer;
}
.acct-type button.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.acct-type .t { display: block; font-weight: 600; }
.acct-type .d { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }

/* ---------- dashboard ---------- */
.dash-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 1.4rem; }
.dash-head h1 { margin: 0; }
.dash-head .planpill {
  font-size: .78rem; font-weight: 600; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft); border-radius: 999px; padding: .2rem .7rem;
}
.dash-head .planpill.requested { color: var(--ochre); border-color: color-mix(in srgb, var(--ochre) 40%, transparent); background: var(--ochre-soft); }
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }
.ss-list { display: grid; gap: .6rem; }
.ss-row {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  padding: .7rem .95rem;
}
.ss-row .ss-name { font-weight: 600; }
.ss-row .ss-name a { color: var(--ink); }
.ss-row .ss-name a:hover { color: var(--accent); }
.ss-row .ss-meta { color: var(--faint); font-size: .8rem; }
.ss-kind {
  display: inline-block; font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); background: var(--raised);
  border: 1px solid var(--line2); border-radius: 4px; padding: .08rem .4rem; margin-right: .45rem;
}
.ss-actions { display: flex; gap: .4rem; align-items: center; }
.ss-actions .btn { font-size: .78rem; padding: .3rem .6rem; }
.alert-on { color: var(--mint); font-weight: 600; font-size: .8rem; }
.alert-off { color: var(--faint); font-size: .8rem; }
.usage { margin: .6rem 0; }
.usage .u-row { display: flex; justify-content: space-between; font-size: .84rem; color: var(--muted); margin-bottom: .25rem; }
.usage .u-bar { height: 6px; border-radius: 3px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; margin-bottom: .7rem; }
.usage .u-fill { height: 100%; background: var(--accent); }
.usage .u-fill.hot { background: var(--ochre); }
.dash-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; border: 1px dashed var(--line2); border-radius: var(--r-card); }

/* ---------- comments ---------- */
.comments { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.comments h2 { display: flex; }
.comment { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.comment:last-child { border-bottom: 0; }
.c-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .84rem; }
.c-head .c-name { font-weight: 700; color: var(--ink); }
.c-head .c-when { color: var(--faint); }
.c-badge {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 4px; padding: .06rem .4rem;
  color: var(--muted); background: var(--raised); border: 1px solid var(--line2);
}
.c-badge.supporter { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.c-body { margin: .3rem 0 0; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-form { margin-top: 1rem; }
.c-form textarea { width: 100%; min-height: 90px; resize: vertical; }
.c-form .c-actions { display: flex; gap: .7rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.c-signin { background: var(--raised); border: 1px dashed var(--line2); border-radius: var(--r-card); padding: 1rem 1.2rem; color: var(--muted); margin-top: 1rem; }
.c-del { background: none; border: 0; color: var(--faint); font-size: .78rem; cursor: pointer; padding: 0; }
.c-del:hover { color: var(--no); text-decoration: underline; }

/* ---------- diary ---------- */
.diary-controls { margin-bottom: 1.4rem; }
.diary-day { margin: 1.4rem 0 .6rem; display: flex; align-items: baseline; gap: .7rem; }
.diary-day .dd-date { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.diary-day .dd-rel { color: var(--faint); font-size: .8rem; }
.diary-list { display: grid; gap: .5rem; }
.diary-item {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  padding: .65rem .9rem;
}
.di-kind {
  font-family: var(--mono); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 4px; padding: .14rem .5rem; white-space: nowrap;
}
.di-kind.sitting { color: var(--mint); background: var(--mint-soft); }
.di-kind.estimates { color: #5a4fa3; background: rgba(90, 79, 163, .1); }
.di-kind.cutoff { color: var(--no); background: rgba(201, 48, 42, .08); }
.di-kind.hearing { color: var(--accent); background: var(--accent-soft); }
.di-kind.deadline { color: var(--ochre); background: var(--ochre-soft); }
.di-kind.event { color: var(--muted); background: var(--raised); }
/* The follow feed reuses the diary's day-grouped list. Its four kinds keep to
   the site's meanings: mint is the record (a vote), accent is evidence (their
   own words), ink is ours (an article), ochre is outside and unverified by us
   (a mention), with a quoted mention a shade firmer than a bare one. */
.di-kind.vote { color: var(--mint); background: var(--mint-soft); }
.di-kind.quote { color: var(--accent); background: var(--accent-soft); }
.di-kind.article { color: var(--ink); background: var(--raised); border: 1px solid var(--line2); }
.di-kind.mention { color: var(--ochre); background: var(--ochre-soft); }
.di-kind.mention.quoted { color: #fff; background: var(--ochre); }
.feed-item .sd-quote { font-size: .95rem; }
.feed-item .sd-quote cite { display: block; font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.feed-item .votechip { vertical-align: baseline; margin-left: .3rem; }
.follow-rail { margin-bottom: .8rem; }
.feed-seg { flex-wrap: wrap; }
.feed-seg button { border-bottom: 1px solid var(--line); }
.diary-item .di-title { font-weight: 550; }
.diary-item .di-detail { display: block; color: var(--muted); font-size: .86rem; margin-top: .1rem; }
.diary-item .di-detail a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line2); }
.diary-item .di-detail a:hover { color: var(--accent); }

/* ---------- coverage ---------- */
.cov-ok { color: var(--mint); font-weight: 700; }
.cov-warn { color: var(--ochre); font-weight: 700; }
.freshness-list { display: grid; gap: .35rem; margin: .8rem 0; }
.fresh-row {
  display: grid; grid-template-columns: minmax(10rem, 16rem) auto 1fr; gap: .8rem; align-items: baseline;
  padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.fresh-row:last-child { border-bottom: 0; }
.fresh-row .f-when { font-family: var(--mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.fresh-row .f-detail { color: var(--faint); font-size: .82rem; }
@media (max-width: 640px) { .fresh-row { grid-template-columns: 1fr auto; } .fresh-row .f-detail { grid-column: 1 / -1; } }

/* ---------- gate modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 14, 16, .45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
  background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop); max-width: 460px; width: 100%; padding: 1.4rem 1.5rem;
  animation: rise .2s var(--ease) both;
}
.modal h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; }
.modal p { color: var(--muted); margin: 0 0 1rem; }
.modal ul { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; padding-left: 1.2rem; }
.modal .m-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }

/* locked content silhouette: prove the data exists, hide the numbers */
.locked-blur { position: relative; }
.locked-blur .locked-body { filter: blur(5px); pointer-events: none; user-select: none; }
.locked-blur .locked-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}

/* save-search affordance */
.save-search { margin-left: auto; }
@media (max-width: 640px) { .save-search { margin-left: 0; } }

/* ================= v5: the workspace ================= */

/* feature pages share one header grammar */
.intel-head { margin: .4rem 0 1.2rem; }
.intel-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.intel-note {
  background: var(--raised); border: 1px solid var(--line2); border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  padding: .6rem .9rem; margin: 1rem 0; font-size: .88rem; color: var(--muted);
}

/* the locked state: show the shape of the thing, name the plans that open it */
.lockpanel {
  border: 1px dashed var(--line2); border-radius: var(--r-card);
  padding: 2.2rem 1.6rem; text-align: center; margin: 1.4rem 0;
  background: var(--raised);
}
.lockpanel h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin: 0 0 .4rem; }
.lockpanel p { color: var(--muted); max-width: 52ch; margin: 0 auto 1rem; }
.lockpanel .m-actions { justify-content: center; display: flex; gap: .7rem; flex-wrap: wrap; }

/* workspace card grid (dashboard and feature indexes) */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; margin: 1rem 0; }
.ws-card {
  display: block; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-card);
  padding: .9rem 1rem; color: var(--ink); box-shadow: var(--shadow-card);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.ws-card:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.ws-card .ws-name { font-family: var(--display); font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.ws-card .ws-blurb { display: block; color: var(--muted); font-size: .84rem; margin-top: .3rem; }
.ws-card .ws-plans { display: block; color: var(--faint); font-size: .74rem; margin-top: .45rem; }
.ws-card.locked { opacity: .75; }
.ws-badge {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  border-radius: 4px; padding: .1rem .4rem;
}
.ws-badge.on { color: var(--mint); background: var(--mint-soft); }
.ws-badge.off { color: var(--faint); background: var(--raised); border: 1px solid var(--line2); }

/* whip count */
.whip-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.pred {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: .12rem .5rem; white-space: nowrap;
}
.pred.for { background: var(--mint-soft); color: var(--mint); }
.pred.against { background: rgba(201, 48, 42, .1); color: var(--no); }
.pred.lean-for { background: var(--mint-soft); color: var(--mint); opacity: .75; }
.pred.lean-against { background: rgba(201, 48, 42, .08); color: var(--no); opacity: .75; }
.pred.uncertain { background: var(--ochre-soft); color: var(--ochre); }
.conf-track { height: 5px; border-radius: 3px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; min-width: 60px; }
.conf-fill { height: 100%; background: var(--accent); }
.basis { font-family: var(--mono); font-size: .68rem; color: var(--faint); }

/* persuadables */
.move-row { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .8rem; align-items: start; padding: .7rem .95rem; border-bottom: 1px solid var(--line); }
.move-row:last-child { border-bottom: 0; }
.move-score { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--accent); }
.reasons { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.reason {
  font-size: .74rem; color: var(--muted); background: var(--raised);
  border: 1px solid var(--line2); border-radius: 999px; padding: .08rem .55rem;
}

/* federation view */
.fed-section { margin: 1.6rem 0; }
.fed-section h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .6rem; }
.fed-section h3 .k { color: var(--faint); font-size: .8rem; font-family: var(--mono); }
.fed-groups { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; color: var(--muted); margin-top: .2rem; }

/* ask + prime: the chat surfaces */
.chat-wrap { max-width: 780px; margin: 0 auto; }
.chat-log { display: grid; gap: .8rem; margin: 1.2rem 0; }
.chat-msg { border-radius: var(--r-card); padding: .8rem 1rem; max-width: 92%; }
.chat-msg.user { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); justify-self: end; }
.chat-msg.assistant { background: var(--surface); border: 1px solid var(--line2); justify-self: start; box-shadow: var(--shadow-card); }
.chat-msg p { margin: 0 0 .7rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-input { display: flex; gap: .6rem; align-items: flex-end; }
.chat-input textarea { flex: 1; min-height: 64px; resize: vertical; }
.chat-thinking { color: var(--faint); font-family: var(--mono); font-size: .82rem; animation: pulse 1.6s ease-in-out infinite; }
.src-list { margin: .6rem 0 0; padding: .6rem 0 0; border-top: 1px dashed var(--line2); font-size: .8rem; color: var(--muted); }
.src-list a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line2); }
.src-list a:hover { color: var(--accent); }
.src-tag { font-family: var(--mono); font-size: .68rem; color: var(--accent); margin-right: .3rem; }

/* the brief: on screen and on paper */
.brief-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .brief-grid { grid-template-columns: 1fr; } }
.brief-q { border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .9rem; margin: .8rem 0; }
@media print {
  .masthead, .pulse, .footer, .nav-backdrop, .profile-actions, .controls, .btn, .save-search { display: none !important; }
  main { padding: 0; max-width: none; }
  body { font-size: 12px; }
  a { color: inherit; text-decoration: none; }
}

/* ================= v5: mobile redesign ================= */
@media (max-width: 640px) {
  main { padding: 1rem .9rem 3.5rem; }
  h1 { font-size: 1.55rem; }
  .lede { font-size: .95rem; }

  /* the pulse strip earns one line, not three */
  .pulse { padding: .3rem .9rem; font-size: .72rem; gap: .4rem; }
  .pulse .pulse-detail { display: none; }

  /* chrome */
  .masthead { padding: 0 .9rem; min-height: 54px; }
  .brand-text { font-size: 1.1rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; padding: 1.8rem .9rem 1rem; gap: 1.2rem; }
  .foot-brand { grid-column: 1 / -1; }

  /* landing */
  .hero { padding: 2.6rem .9rem 0; }
  .hero h1 { font-size: 2.1rem; }
  .hero-sub { font-size: .98rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn.big { width: 100%; text-align: center; }
  .hero-shot { padding: .7rem .7rem 0; }
  .hero-stats-inner { grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: 1rem .9rem; }
  .hstat .l { font-size: .68rem; }
  .home-section { padding-top: 2.4rem; }
  .cta-band { padding: 1.8rem 1.1rem; }

  /* controls that overflow scroll sideways inside themselves, never the page */
  .seg { max-width: 100%; overflow-x: auto; }
  .seg button { white-space: nowrap; }
  .controls { gap: .45rem; }

  /* the board's stance clouds are capped, not endless */
  #board-body .cloud { max-height: 12.5rem; overflow-y: auto; padding-right: .3rem; }
  .board-hero { padding-top: .9rem; }
  .searchwrap input { font-size: .95rem; }

  /* density */
  .tiles { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .tile { padding: .6rem .75rem; }
  .tile .v { font-size: 1.25rem; }
  th, td { padding: .45rem .35rem; font-size: .82rem; }
  .news-head .hint { display: none; }
  .news-grid { gap: 1rem; }
  .profile-actions .btn { flex: 1 1 auto; text-align: center; }
  .dash-head { gap: .5rem; }
  .plan .price { font-size: 1.8rem; }
  .modal { padding: 1.1rem 1.2rem; }
  .chat-msg { max-width: 100%; }
  .move-row { grid-template-columns: 2rem 1fr; }
  .move-row .conf-track { display: none; }
  .whip-tally { grid-template-columns: repeat(2, 1fr); }
  .diary-item { grid-template-columns: 1fr; gap: .25rem; }
  .di-kind { justify-self: start; }
}

/* Inferred readings.
   A number the site worked out from ADJACENT stances has to look different
   from a number a member actually voted for, everywhere it appears, or the
   whole point of naming the basis is lost. Dashed border and the ochre used
   elsewhere for "uncertain", never the accent, which means evidence. */
.basis.inferred { color: var(--ochre); }
.via { display: inline-block; margin-top: .15rem; font-size: .68rem; line-height: 1.35; max-width: 22ch; }
.reason.inferred {
  border-style: dashed; border-color: var(--ochre); color: var(--ochre);
  background: color-mix(in srgb, var(--ochre) 8%, transparent);
}
.intel-note.subtle { border-left-color: var(--ochre); font-size: .82rem; }

/* A switched-off workspace card.
   It is greyed and it carries the way to switch it on, so the reader is never
   shown a feature with no route to it. The card stops being a link, because
   the destination is a lock panel: the button IS the action now. Text stays at
   full contrast while the card recedes, so "Off" is legible rather than
   dimmed into unreadability along with the chrome. */
.ws-card.locked {
  opacity: 1;
  background: var(--raised);
  border-style: dashed;
  cursor: default;
}
.ws-card.locked:hover { border-color: var(--line2); transform: none; }
.ws-card.locked .ws-name,
.ws-card.locked .ws-blurb { color: var(--faint); }
.ws-card .ws-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.btn.sm { font-size: .76rem; padding: .28rem .6rem; }

/* "Where this division sits": the structural context panel.
   Deliberately not styled like the generated explainer next to it. Everything
   in here is a count taken from the record, so it gets the accent rule that
   means evidence, where the model's paragraph gets the plain note treatment. */
.ctx-panel {
  border: 1px solid var(--line2); border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  background: var(--raised); padding: .8rem 1rem; margin: 1.1rem 0;
}
.ctx-panel h2 { margin: 0 0 .5rem; font-size: 1rem; }
.ctx-panel p { margin: .35rem 0; font-size: .88rem; color: var(--muted); }
.ctx-k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint); margin-right: .3rem;
}
.ctx-k.warn { color: var(--ochre); }
.ctx-seq { margin: .6rem 0; border-top: 1px solid var(--line); }
.ctx-seq-row {
  display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .6rem; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .82rem;
}
.ctx-seq-row .t { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.ctx-seq-row .r { font-family: var(--mono); font-size: .75rem; white-space: nowrap; }
.ctx-seq-row .r.passed { color: var(--mint); }
.ctx-seq-row .r.failed { color: var(--no); }
.ctx-seq-row.here { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* The federation grid: nine parliaments as rows, party groups as columns.
   Bars, not a heat map. A colour scale reading green-for-yes would tell the
   reader "this party supports it", which a keyword search cannot support. */
.fedgrid th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.fedgrid th[scope="row"] .hint { font-family: var(--mono); font-size: .68rem; margin-left: .35rem; }
.fg-cell { text-align: right; white-space: nowrap; vertical-align: middle; }
.fg-cell.empty { color: var(--faint); }
.fg-bar {
  display: inline-block; width: 46px; height: 7px; vertical-align: middle;
  background: color-mix(in srgb, var(--no) 30%, transparent);
  border-radius: 3px; overflow: hidden; margin-right: .35rem;
}
.fg-aye { display: block; height: 100%; background: var(--mint); }
.fg-aye.warm { background: var(--ochre); }
.fg-aye.cool { background: var(--accent); }
.fg-num { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.fg-sep { color: var(--faint); margin: 0 .1em; }
.fg-cell.agree { border-right: 2px solid var(--line2); }

/* Article kind on a newsroom card. Opinion already had its own colour; a
   forward-looking piece needs one too, because it is the one kind whose
   claims are about things that have not happened yet.

   It is a FILL, like the other two. This set the text colour and a border on a
   badge whose base rule is a solid ultramarine fill, so the label came out
   ochre on ultramarine at about 1.5:1 and was, in practice, unreadable on
   every week-ahead card. Ochre behind the same white ink the badge already
   uses is 5:1 and says the same thing. */
.news-cat.week-ahead { background: var(--ochre); }
a.news-cat.week-ahead:hover { background: #96450f; }
/* A forward piece carries the same standing note as an opinion piece, in the
   colour used everywhere else on the site for "not yet settled". */
.opinion-note.ahead { border-left-color: var(--ochre); }
.opinion-note.ahead strong { color: var(--ochre); }

/* A count that is still open. Sits inside the article body, directly under the
   quote card, so a reader meets it before the first figure it applies to
   rather than in the sources box at the bottom. Ochre, the same colour the
   site already uses for "this is about something that has not settled yet". */
.provisional {
  display: flex; gap: .6rem; align-items: baseline;
  background: var(--ochre-soft); border: 1px solid transparent;
  border-left: 4px solid var(--ochre);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  padding: .6rem .9rem; margin: 0 0 1.4rem; font-size: .88rem; color: var(--muted);
}
.provisional strong { color: var(--ochre); white-space: nowrap; }

/* A member's own response, printed on the article above our sources.
   Deliberately not styled like a pull quote: this is somebody answering back,
   not the masthead selecting a line it liked. */
.mp-reply {
  border: 1px solid var(--line2);
  border-left: 4px solid var(--mint);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  background: var(--raised);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}
.mp-reply p { margin: 0 0 .6rem; }
.mp-reply footer { display: flex; flex-direction: column; gap: .1rem; font-size: .82rem; color: var(--muted); }
.mp-reply footer strong { color: var(--ink); }
.mp-body {
  width: 100%; margin-top: .5rem; padding: .6rem .7rem;
  border: 1px solid var(--line2); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .9rem; resize: vertical;
}

/* Whip count: the bill index and the per-member forecast.
   A stance matched from a bill's summary rather than its title is a weaker
   link, and looks weaker, because the reader has to be able to disagree with
   the match before they trust the number built on it. */
.hint.weak { color: var(--ochre); }
.fc-link { display: inline-block; margin-top: .2rem; font-size: .74rem; }
.t-shell { border: 1px solid var(--line2); background: var(--surface); }

/* The two selling points on the front page: the assistant and the API.
   Given more room than a workspace card because they are the two things a
   buyer is deciding between, and they are read rather than scanned. */
.twoup { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.feature-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line2);
  border-radius: var(--r-card, 10px); padding: 1.4rem 1.5rem;
  text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.feature-card:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.feature-card h3 { font-family: var(--display); font-size: 1.2rem; margin: 0; }
.feature-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.fc-tag {
  align-self: flex-start; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  border: 1px solid currentColor; border-radius: 2px; padding: .12rem .45rem;
}
.feature-card .arrowlink { margin-top: .3rem; font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .feature-card:hover { transform: none; } }

/* API docs */
.col-wide { max-width: 52rem; margin: 0 auto 2rem; display: flex; flex-direction: column; gap: .8rem; }
.codeblock {
  background: var(--raised); border: 1px solid var(--line2); border-radius: var(--r-ctl);
  padding: .8rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: .8rem;
  line-height: 1.55; margin: 0; color: var(--ink);
}
.ep-row { border-top: 1px solid var(--line); padding: .8rem 0; display: flex; flex-direction: column; gap: .25rem; }
.ep-row p { margin: 0; color: var(--muted); font-size: .9rem; }
.ep-method {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--mint);
  border: 1px solid currentColor; border-radius: 2px; padding: .08rem .35rem; vertical-align: .1em;
}
.ep-path { font-family: var(--mono); font-size: .85rem; background: var(--accent-soft); padding: .1em .4em; border-radius: 2px; word-break: break-all; }

/* ---------------------------------------------------------------- reg wall */
/* The article stops mid-flow and the ask sits where the reading was. The fade
   above it is doing real work: it says the text continues rather than that the
   article ended, which is the difference between a wall and a dead end. */
.art-body .regwall {
  position: relative;
  margin: 0;
  padding: 2.2rem 1.6rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}
.art-body .regwall::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -5.5rem;
  height: 5.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.art-body .regwall h2 { margin: .35rem 0 .6rem; font-size: 1.35rem; }
.art-body .regwall p { max-width: 44ch; margin-inline: auto; }
.regwall-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.1rem 0 .8rem; }
.meter-note { margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--line); }

/* Consent controls. Deliberately NOT styled as fine print: the terms line and
   the newsletter line are the same size and weight as each other, because one
   of them is a condition of the account and the other is a choice, and dressing
   the choice down is how a tickbox becomes something nobody remembers making. */
.consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .5rem 0;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}
.consent input { margin-top: .2rem; flex: none; width: 1rem; height: 1rem; accent-color: var(--accent); }
.consent span { flex: 1; }

/* ------------------------------------------------------------- legal docs */
/* Long-form contract text. Narrower than an article and with more air between
   headings, because a reader is scanning for a clause rather than reading a
   story, and a wall of 19 numbered sections at article width is unreadable. */
.legal-doc .art-body { max-width: 38rem; }
.legal-doc .art-body h2 {
  margin: 2.6rem 0 .7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 1.35rem;
}
.legal-doc .art-body h2:first-child { border-top: 0; padding-top: 0; margin-top: .4rem; }
.legal-doc .art-body h3 { margin: 1.7rem 0 .4rem; font-size: 1.05rem; }
.legal-doc .art-body p, .legal-doc .art-body li { line-height: 1.68; }
.legal-doc .art-body ul, .legal-doc .art-body li { margin-bottom: .35rem; }
.legal-doc .art-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.legal-version { margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------------- right of reply: the letter's page, and updates ---------------- */
.ror-page .ror-card { padding: 1.4rem 1.6rem; max-width: 72ch; }
.ror-page .ror-article { font-size: 1.05rem; margin: .3rem 0 0; }
.ror-claims { margin: .4rem 0 0; padding-left: 1.2rem; }
.ror-claims li { margin: 0 0 .55rem; line-height: 1.5; }
.ror-question { margin: .4rem 0 0; padding: .6rem 1rem; border-left: 3px solid var(--accent); background: var(--raised); }
.ror-question p { margin: 0 0 .5rem; font-size: 1.02rem; }
.ror-published { margin: 1.2rem 0 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.ror-published blockquote { margin: .3rem 0; }
.ror-form { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.ror-form textarea { width: 100%; font: inherit; }
.ror-box .hint a { text-decoration: underline; }
.art-update { margin: .2rem 0 1.2rem; padding: .7rem 1rem; border-left: 3px solid var(--ochre); background: var(--ochre-soft); border-radius: 0 8px 8px 0; }
.art-update .eyebrow { margin: 0 0 .3rem; color: var(--ochre); }
.art-update ul { margin: 0; padding-left: 1.1rem; }
.art-update li { margin: 0 0 .35rem; font-size: .95rem; line-height: 1.5; }
.art-byline .updated-chip, .news-meta .updated-chip { color: var(--ochre); border: 1px solid color-mix(in srgb, var(--ochre) 40%, transparent); border-radius: 4px; padding: .1rem .45rem; background: var(--ochre-soft); white-space: nowrap; }

/* ---------------- a member answered: the stand-out tag ---------------- */
.responded-tag { display: inline-block; font: 600 .78rem/1.3 inherit; letter-spacing: .01em; color: #fff; background: var(--accent); border-radius: 4px; padding: .18rem .55rem; text-decoration: none; margin: .1rem .35rem .1rem 0; white-space: nowrap; }
.responded-tag:hover { background: var(--accent-hover); color: #fff; }
.news-tags .responded-tag { vertical-align: middle; }
.responded-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .7rem; }
.ror-signed { margin: .35rem 0 0; }