/* Theme on top of Beer CSS (Material Design 3): a violet primary (green and red stay for yes/no votes),
   amber for warnings, readable tables, small charts. */
body.light {
  --primary: #6a4fa3; --on-primary: #ffffff; --primary-container: #ebddff; --on-primary-container: #250059;
  --secondary: #625b71; --on-secondary: #ffffff; --secondary-container: #e8def8; --on-secondary-container: #1e192b;
  --tertiary: #8a5100; --on-tertiary: #ffffff; --tertiary-container: #ffdcbe; --on-tertiary-container: #2c1600;
  --surface: #fef7ff; --surface-container: #f3edf7; --surface-container-low: #f7f2fa; --surface-container-high: #ece6f0;
}
body.dark {
  --primary: #d3bbff; --on-primary: #3b1d71; --primary-container: #523789; --on-primary-container: #ebddff;
  --secondary: #cdc2db; --on-secondary: #342d40; --secondary-container: #4b4358; --on-secondary-container: #e8def8;
  --tertiary: #ffb870; --on-tertiary: #4a2800; --tertiary-container: #693c00; --on-tertiary-container: #ffdcbe;
}
main.responsive { padding-bottom: 6rem; }
.page-title { margin: 1rem 0 0.25rem; }
.muted { color: var(--on-surface-variant, #5f6368); }
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-weight: 600; white-space: nowrap; }
table.data th, table.data td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--surface-container-high, #e0e0e0); vertical-align: top; }
table.data tr:hover td { background: var(--surface-container-low, #f5f5f5); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
table.data td:first-child { min-width: 13rem; }
table.data td.num:first-child { min-width: 0; }
table.data td a.row { white-space: normal; align-items: center; }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: var(--surface-container); }
.portrait { width: 9rem; height: 11rem; border-radius: 1rem; object-fit: cover; background: var(--surface-container); }
.bar { height: 0.5rem; border-radius: 0.25rem; background: var(--surface-container-high, #ddd); overflow: hidden; min-width: 4rem; }
.bar > span { display: block; height: 100%; background: var(--primary); }
.bar.warn > span { background: var(--tertiary); }
.stat { display: block; padding: 1rem; border-radius: 1rem; background: var(--surface-container-low); }
.stat .value { font-size: 1.75rem; font-weight: 600; line-height: 2.25rem; }
.stat .label { font-size: 0.8rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--primary-container); }
.timeline li { position: relative; padding: 0 0 1rem 1rem; }
.timeline li::before { content: ""; position: absolute; left: -1.4rem; top: 0.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--primary); }
.timeline .when { font-size: 0.8rem; font-weight: 600; color: var(--primary); }
.choice { display: inline-block; padding: 0 0.5rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.choice.green { background: #c8e6c9; color: #1b5e20; }
.choice.red { background: #ffcdd2; color: #b71c1c; }
.choice.amber { background: #ffecb3; color: #7a4f00; }
.choice.grey { background: #e0e0e0; color: #424242; }
.split { display: flex; height: 1.25rem; border-radius: 0.5rem; overflow: hidden; }
.split span { display: block; }
.split .yes { background: #43a047; } .split .no { background: #e53935; } .split .abstain { background: #fbc02d; } .split .nv { background: #9e9e9e; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 0.5rem 1rem; align-items: center; }
.section-label { margin-top: 1.5rem; }
.prose { max-width: 48rem; }
.prose p, .prose li { line-height: 1.7rem; }
.chips-scroll { display: flex; flex-wrap: wrap; gap: 0.5rem; }
mark { background: var(--tertiary-container); color: inherit; padding: 0 0.15rem; border-radius: 0.2rem; }
.htmx-request .loading-hint, .htmx-request.loading-hint { opacity: 1; }
.loading-hint { opacity: 0; transition: opacity 0.2s; }
@media (max-width: 600px) { .hide-s { display: none; } .portrait { width: 6rem; height: 7.5rem; } }

/* Biographies keep the line breaks the chamber published. */
.cv-text { white-space: pre-line; }

/* Beer gives any element with a '*-margin' child 'padding: 0.1px', which beats the card padding of
   an article; keep the card's own padding (still set through --_padding by 'small-padding'). */
article:has(> [class*="margin"]) { padding: var(--_padding); }

/* Generated plain-language summary of a bill: set apart from the official data. */
.summary { background: var(--secondary-container); color: var(--on-secondary-container); margin-block: 1rem; box-shadow: none; }
.summary h6 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
/* Long group names ("Grupul parlamentar al Partidului ...") wrap inside the chip on a phone. */
.chip.wrap-text { max-inline-size: 100%; block-size: auto; min-block-size: 2rem; white-space: normal; text-align: start; padding-block: 0.25rem; }
/* The profile heading: the text column may shrink next to the photo, long names and emails wrap. */
.member-head > .max { min-inline-size: 0; }
.member-head .chip { max-inline-size: 100%; }
.member-head .chip span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .member-head { --_margin: 0.5rem 0; }
  .member-head h4 { font-size: 1.6rem; overflow-wrap: break-word; }
}

/* A long name wraps inside its table cell instead of running over the next columns. */
table.data td a.row > span { flex: 1 1 auto; min-inline-size: 0; }

/* Foldable sections (groups of the members list, long lists on a profile). */
.fold > summary { cursor: pointer; list-style: none; margin-top: 1.5rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h6 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.fold > summary h6 > i { transition: transform 0.15s; }
.fold[open] > summary h6 > i { transform: rotate(90deg); }

/* CV entries: the first line (job, school) stands out from the details under it. */
.cv-text::first-line { font-weight: 600; }
/* A select shows its choice on one line ("Ambele camere" wrapped in narrow filter columns). */
.field > select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bold brand surfaces: the deep violet gradient of the header, the home hero and the profile head.
   Long text, lists and tables stay on the light background. */
:root { --brand-deep: #3b1d71; --brand: #6a4fa3; --brand-soft: #d3bbff; --brand-pale: #ebddff; }
.brand { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff; }
header.brand { background: linear-gradient(90deg, var(--brand-deep), var(--brand)); }
header.brand h6, header.brand i { color: #fff; }
header.brand .field > input { color: #fff; background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.45); }
header.brand .field > input::placeholder { color: var(--brand-pale); }
.hero { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2rem; margin: 1rem 0 1.5rem; }
.hero > :not(.hero-art) { position: relative; }
.hero h3, .hero h4 { color: #fff; font-weight: 700; }
.hero p, .hero .muted { color: var(--brand-pale); }
.hero a.link { color: #fff; text-decoration: underline; }
.hero .stat { background: rgb(255 255 255 / 0.1); color: #fff; }
.hero .stat:hover { background: rgb(255 255 255 / 0.18); }
.hero .stat .label { color: var(--brand-pale); }
.hero .button.border { color: #fff; border-color: rgb(255 255 255 / 0.6); }
.hero .chip { color: #fff; border-color: rgb(255 255 255 / 0.6); background: transparent; }
.hero .chip.primary { color: var(--brand-deep); background: #fff; border-color: #fff; }
.hero .chip.error { color: var(--on-error-container); background: var(--error-container); border-color: transparent; }
.hero .chip i, .hero .button i { color: inherit; }
.hero .portrait { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.85); }
.hero-art { position: absolute; right: 1.5rem; bottom: 0; width: 36%; max-width: 30rem; pointer-events: none; }
.hero-text { max-width: 62%; }
@media (max-width: 992px) {
  .hero-text { max-width: none; }
  .hero-art { width: 55%; right: -2rem; opacity: 0.2; }
}
@media (max-width: 600px) { .hero { padding: 1.25rem; border-radius: 1rem; } .hero h3 { font-size: 1.9rem; line-height: 2.3rem; } }
/* The navigation rail (and the phone's bottom bar) in the same violet, so the header and menu frame the page. */
nav.brand-rail { background: var(--brand-deep); color: var(--brand-pale); }
nav.left.brand-rail { background: linear-gradient(180deg, var(--brand-deep), #2e1660); }
nav.brand-rail a, nav.brand-rail a i { color: var(--brand-pale); }
nav.brand-rail a:hover i { background: rgb(255 255 255 / 0.12); }
nav.brand-rail a.active > i { background: #fff; color: var(--brand-deep); }
nav.brand-rail a.active > div { color: #fff; font-weight: 600; }
nav.brand-rail .logo { width: 3rem; height: 3rem; display: block; }
header.brand nav > a.max { justify-content: flex-start; }
header.brand h6 { font-weight: 600; }