@font-face {
  font-family: AreaNormal;
  src: url("/fonts/AreaNormal-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: AreaNormal;
  src: url("/fonts/AreaNormal-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --navy: #002c48;
  --base-400: #33566d;
  --ocean-50: #edf6fc;
  --ocean-100: #d2e8f6;
  --ocean-300: #9fceec;
  --ocean-500: #6fb6e3;
  --mint: #cffdc0;
  --text-md: 1.125rem;
  --leading-md: 1.75rem;
  --text-xl: 1.875rem;
  --leading-xl: 2.625rem;
  --text-2xl: 2.625rem;
  --leading-2xl: 3.5rem;
  --text-3xl: 3.625rem;
  --leading-3xl: 4.5rem;
  --ink: light-dark(var(--navy), #edf6fc);
  --muted: light-dark(var(--base-400), #bed3e2);
  --line: light-dark(var(--ocean-100), #496477);
  --control-line: light-dark(var(--ocean-100), #7592a6);
  --paper: light-dark(#fff, #233b4d);
  --surface: light-dark(#fff, #1c3243);
  --footer: light-dark(var(--navy), #203747);
  --accent: light-dark(var(--navy), var(--ocean-300));
  --wash: light-dark(var(--ocean-50), #2a4558);
  --focus: light-dark(var(--base-400), var(--ocean-300));
  --pill: light-dark(var(--navy), var(--mint));
  --pill-text: light-dark(var(--mint), var(--navy));
  font: 400 1rem/1.5 AreaNormal, system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body, h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button, input, select, summary { color: var(--ink); }
label { display: grid; gap: .25rem; }
input:not([type="checkbox"]), select {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--control-line);
  border-radius: .45rem;
  padding: .5rem .65rem;
  background: var(--paper);
}
input[type="checkbox"] { accent-color: var(--accent); flex-shrink: 0; }

.skip-link {
  position: absolute;
  z-index: 5;
  top: .5rem;
  left: .5rem;
  background: var(--paper);
  padding: .5rem .75rem;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.site-header { background: var(--paper); }
.container {
  width: min(calc(100% - 3rem), 68rem);
  margin-inline: auto;
}
.site-header-inner {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.site-header-inner picture { flex: 0 1 14.35rem; min-width: 0; }
.account-actions { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: .5rem 1rem; font-size: .84rem; }
.brand-logo {
  display: block;
  width: min(14.35rem, 100%);
  height: auto;
}
.workspace { padding-block: .75rem 2.75rem; }
.hero, .auth-intro { position: relative; overflow: hidden; background: var(--wash); }
.hero::after, .auth-intro::after {
  position: absolute;
  width: clamp(9rem, 20vw, 16rem);
  aspect-ratio: 282 / 247;
  background: url("/brand-hexagon.svg") center / contain no-repeat;
  content: "";
  pointer-events: none;
}
.hero::after { right: max(calc((100vw - 68rem) / 2 - 12rem), -7rem); top: 50%; transform: translateY(-50%); }
.page-intro {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem 1.5rem;
  padding-block: 1.65rem 1.75rem;
}
.product-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.6rem, 2vw, 1rem);
  min-width: 0;
}
.product-mark { display: block; width: clamp(2rem, 7vw, 3rem); height: auto; }
.eyebrow {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}
h1 { font-size: var(--text-xl); font-weight: 400; line-height: var(--leading-xl); margin-block: .3rem; overflow-wrap: anywhere; }
h2 { font-size: var(--text-xl); font-weight: 400; line-height: var(--leading-xl); }
h3 { font-size: var(--text-md); line-height: var(--leading-md); }
.subtitle { color: var(--muted); font-size: var(--text-md); line-height: var(--leading-md); }
.source-status { display: grid; justify-items: end; gap: .35rem; color: var(--muted); font-size: .8rem; }
#source-status span { display: block; }
.secondary, .primary {
  min-height: 3.25rem;
  padding: .5rem 1rem;
  border: 2px solid var(--pill);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 700;
}
.secondary { border-color: var(--accent); }
.secondary:hover { background: var(--pill); color: var(--pill-text); }
.primary { background: var(--pill); color: var(--pill-text); }
.primary:hover, .primary:focus-visible { background: var(--pill-text); border-color: var(--pill-text); color: var(--pill); }
.views { display: flex; gap: .5rem; margin-top: .35rem; border-bottom: 1px solid var(--line); }
.views button {
  min-height: 2.75rem;
  padding: .45rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-size: var(--text-md);
  line-height: var(--leading-md);
}
.views button[aria-pressed="true"] { border-bottom-color: var(--ocean-500); color: var(--ink); background: var(--wash); font-weight: 700; }
.views button:hover { background: var(--wash); }

.filter-area {
  margin-top: .9rem;
  padding: clamp(.7rem, 2vw, 1.05rem);
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--wash);
}
.filter-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.filter-grid > * { grid-column: span 2; min-width: 0; }
.filter-grid label, .dossier-field { font-size: .82rem; font-weight: 700; }
.filter-grid :is(input, select), .dossier-picker summary { font-size: .94rem; font-weight: 400; }
.filter-grid .search-field { grid-column: span 5; }
.filter-grid .jurisdiction-field { grid-column: span 3; }
.filter-grid .dossier-field { grid-column: span 4; display: grid; gap: .25rem; }
.filter-grid .date-range { grid-column: span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .75rem; }
.period-shortcuts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.period-shortcuts button {
  min-height: 2.1rem;
  padding: .28rem .66rem;
  border: 1px solid var(--control-line);
  border-radius: 1rem;
  background: var(--paper);
  font-size: .78rem;
}
.period-shortcuts button:not(:disabled):hover { border-color: var(--accent); }
.period-shortcuts button[aria-pressed="true"] { border-color: var(--pill); color: var(--pill-text); background: var(--pill); }
.dossier-picker { position: relative; min-width: 0; }
.dossier-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .5rem .65rem;
  border: 1px solid var(--control-line);
  border-radius: .45rem;
  background: var(--paper);
  list-style: none;
}
.dossier-picker summary::-webkit-details-marker { display: none; }
.dossier-picker summary::after {
  content: '';
  width: .42rem;
  height: .42rem;
  flex: none;
  border: solid currentColor;
  border-width: 0 .12rem .12rem 0;
  transform: translateY(-.12rem) rotate(45deg);
}
.dossier-picker[open] summary::after { transform: translateY(.12rem) rotate(225deg); }
.dossier-options {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(100% + .3rem);
  inset-inline-end: 0;
  width: min(24rem, calc(100vw - 3rem));
  min-width: 100%;
  max-height: min(22rem, 55dvh);
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid var(--control-line);
  border-radius: .45rem;
  background: var(--paper);
  box-shadow: 0 .45rem 1.1rem #002c4829;
}
.dossier-options label, #milestone-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
}
.dossier-options label { padding-inline: .45rem; border-radius: .3rem; overflow-wrap: anywhere; }
.dossier-options label:hover, .dossier-options label:focus-within { background: var(--wash); }
.date-error { grid-column: 1 / -1; font-size: .82rem; color: light-dark(#922d24, #ffb8af); }
input[aria-invalid="true"] { border-color: light-dark(#922d24, #ffb8af); }
.filter-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem .75rem; margin-top: .65rem; padding-top: .35rem; border-top: 1px solid var(--line); }
.active-filters { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.filter-chip, .label {
  border: 0;
  border-radius: 1rem;
  color: var(--ink);
  background: var(--wash);
  padding: .18rem .58rem;
  font-size: .77rem;
  overflow-wrap: anywhere;
}
.filter-chip { min-height: 2rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.filter-chip:hover { text-decoration: underline; }
.result-bar { min-height: 2.75rem; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding-block: .55rem; color: var(--muted); font-size: .86rem; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .85rem; }
.sort-field { display: flex; align-items: center; gap: .5rem; }
.sort-field select { width: auto; }
.text-button { border: 0; min-height: 2.75rem; background: transparent; color: var(--accent); text-decoration: underline; padding-inline: .1rem; }
#clear { margin-left: auto; }
.notice { margin-block: .25rem .75rem; padding: .6rem .75rem; border-left: .2rem solid var(--ocean-500); background: var(--wash); color: var(--muted); }
.result-group + .result-group { margin-top: 1.15rem; }
.result-group > h2 { margin-bottom: .45rem; }
.event-list { list-style: none; padding: 0; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: .375rem; }
.event {
  display: grid;
  grid-template-columns: 6.1rem minmax(0, 1fr) auto;
  gap: .6rem;
  padding: .7rem .8rem;
  align-items: start;
}
.event + .event { border-top: 1px solid var(--line); }
.event time, .event-meta, .event-note, .event-source { color: var(--muted); font-size: .83rem; }
.event time { font-variant-numeric: tabular-nums; }
.event-source { color: var(--accent); white-space: nowrap; }
.event h3 { margin-block: .15rem; overflow-wrap: anywhere; }
.event-note { overflow-wrap: anywhere; }
.labels { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .35rem; }
.label.tag { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.label.topic { text-decoration: none; }
.label.topic:hover, .label.topic:focus-visible { text-decoration: underline; }
.timeline .event-info { border-left: 2px solid var(--ocean-300); padding-left: .75rem; }
.empty { border-top: 1px solid var(--line); padding: .55rem 0; color: var(--muted); }
.more { margin-top: .65rem; }
.agenda-controls { margin-bottom: .65rem; }
.agenda-toolbar, .agenda-navigation, .agenda-modes, .agenda-legend {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.agenda-toolbar { flex-wrap: wrap; gap: .55rem 1rem; }
.agenda-toolbar h2 { margin-right: auto; }
.agenda-navigation button, .agenda-modes button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem .65rem;
  border: 1px solid var(--line);
  border-radius: .375rem;
  color: var(--ink);
  background: var(--paper);
}
.agenda-modes [aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.agenda-legend {
  flex-wrap: wrap;
  gap: .3rem 1rem;
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: .78rem;
}
[data-agenda-type="Debat"] { --event-color: var(--accent); }
[data-agenda-type="Stemming"] { --event-color: light-dark(#67439c, #d5b9ff); }
[data-agenda-type="Consultatiedeadline"] { --event-color: light-dark(#8a5200, #ffd288); }
[data-agenda-type="Ingangsdatum"] { --event-color: light-dark(#176244, #8ce0b2); }
.agenda-legend li::before {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: var(--event-color);
  content: "";
}
.agenda-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.agenda-weekday { padding-inline: .4rem; color: var(--muted); font-size: .78rem; }
.agenda-day {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  min-height: 5.8rem;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: .375rem;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}
.agenda-grid[data-mode="week"] .agenda-day { min-height: 7rem; }
.agenda-day:hover, .agenda-day[aria-pressed="true"] { border-color: var(--accent); background: var(--wash); }
.agenda-day[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.agenda-day[aria-current="date"] .agenda-day-number { color: var(--accent); text-decoration: underline; }
.agenda-other-month { background: transparent; color: var(--muted); }
.agenda-day-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .15rem; }
.agenda-day-number { font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-day-count { border-radius: 1rem; padding: 0 .3rem; background: var(--wash); color: var(--ink); font-size: .72rem; }
.agenda-item {
  width: 100%;
  padding-inline-start: .27rem;
  border-inline-start: 2px solid var(--event-color, transparent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .73rem;
}
.agenda-more { color: var(--muted); }
.agenda-details { margin-block: 1rem; }
.agenda-details > h3 { margin-bottom: .4rem; }
.agenda-jump { margin-top: .3rem; }
.page-footer { background: var(--footer); color: white; padding-block: 1.5rem; font-size: .875rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .9rem 2rem; }
.page-footer a { color: white; }
.page-footer a:hover { color: var(--mint); }
.page-footer a:focus-visible { outline-color: var(--ocean-300); }
#source-list[open] { flex-basis: 100%; }
#legislation-sources { display: grid; gap: .55rem; margin: .5rem 0 0; padding-inline-start: 1.25rem; }

.auth-body { min-height: 100vh; background: var(--surface); }
.auth-layout {
  width: min(calc(100% - 3rem), 58rem);
  margin: clamp(1.25rem, 5vw, 4rem) auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: .375rem;
  background: var(--paper);
}
.auth-layout-single { width: min(calc(100% - 3rem), 34rem); grid-template-columns: 1fr; }
.auth-intro, .auth-panel { padding: clamp(1.2rem, 4vw, 2.4rem); }
.auth-intro { border-radius: .375rem 0 0 .375rem; }
.auth-intro::after { right: -6.5rem; bottom: -3.5rem; }
.auth-intro > * { position: relative; z-index: 1; }
.auth-intro p:last-child, .auth-panel > p { color: var(--muted); }
.auth-panel h2 { margin-bottom: .45rem; }
.auth-panel form { display: grid; gap: .75rem; margin-top: 1.15rem; }
.auth-panel form label { font-weight: 700; }
.auth-panel input { font-weight: 400; }
.auth-error { font-size: .9rem; }
.auth-panel .auth-error { margin-top: .7rem; color: light-dark(#922d24, #ffb8af); }
.admin-views { flex-wrap: wrap; margin-block: .65rem 1rem; }
.admin-views a { padding: .55rem .75rem; border-bottom: 2px solid transparent; text-decoration: none; }
.admin-views a:is(:hover, [aria-current="page"]) { background: var(--wash); }
.admin-views a[aria-current="page"] { border-bottom-color: var(--ocean-500); font-weight: 700; }
.admin-panel { border: 1px solid var(--line); border-radius: .6rem; background: var(--paper); padding: clamp(.8rem, 2.5vw, 1.4rem); }
.admin-panel h2 { font-size: var(--text-md); line-height: var(--leading-md); font-weight: 700; margin-bottom: .45rem; }
.admin-panel p, .account-detail { color: var(--muted); }
.account-detail { font-size: .8rem; font-weight: 400; }
.account-detail:empty { display: none; }
.account-table :is(th, td) .account-detail:last-child { display: block; }
.account-table .account-detail:empty:last-child { display: none; }
.account-table th[scope="row"] { min-width: 9rem; max-width: 18rem; overflow-wrap: anywhere; }
.account-table td:last-child { min-width: 12rem; }
.account-badge { display: inline-block; padding: .12rem .5rem; border-radius: 1rem; background: var(--wash); }
.account-badge[data-active="1"] { background: light-dark(#e0f4da, #254e44); color: light-dark(#185434, #bcf0c7); }
.account-row-actions, .admin-dialog-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.account-row-actions button { min-height: 2.75rem; padding: .28rem .6rem; }
.account-security { display: grid; gap: .45rem; margin-top: .85rem; }
.account-security p { max-width: 65ch; margin-top: .35rem; }
#account-dialog {
  width: min(35rem, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  overflow: auto;
  padding: clamp(.9rem, 3vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--paper);
  color: var(--ink);
}
#account-dialog::backdrop { background: #001f34ab; }
.admin-dialog-header { display: flex; gap: .7rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.admin-dialog-header h2 { overflow-wrap: anywhere; }
.admin-dialog-header button { flex: none; min-width: 2.75rem; }
.admin-dialog-actions { justify-content: flex-end; }
.admin-form { display: grid; gap: .8rem; margin-top: .75rem; }
.admin-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.admin-wide { grid-column: 1 / -1; }
.admin-form label, .admin-audit-filter label { font-weight: 700; font-size: .88rem; }
.admin-form :is(input, select), .admin-audit-filter select { font-weight: 400; }
.admin-error { margin-top: .6rem; color: light-dark(#922d24, #ffb8af); }
.admin-secret { display: block; padding-block: .45rem; overflow-wrap: anywhere; color: var(--ink); }
.totp-qr { display: block; max-width: 100%; height: auto; margin-block: .8rem; border-radius: .25rem; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .65rem 1rem; margin-bottom: .75rem; }
.admin-audit-filter { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.admin-audit-filter button { min-height: 2.75rem; }
.admin-table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .88rem; }
.admin-table :is(th, td) { padding: .55rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.admin-table thead { background: var(--wash); }
.admin-table time { white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .hero::after, .auth-intro::after { opacity: .24; }
  input::placeholder { color: var(--muted); opacity: .8; }
}
@media (min-width: 701px) {
  .page-intro h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
  .primary { min-height: 3.75rem; padding-inline: 1.25rem; font-size: var(--text-md); line-height: var(--leading-md); }
}
@media (min-width: 701px) and (max-width: 860px) {
  .auth-intro .product-brand h1 { font-size: clamp(1.45rem, 3.7vw, var(--text-xl)); line-height: 1.25; }
}
@media (min-width: 1024px) {
  .page-intro h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
}
@media (max-width: 930px) {
  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-grid > *, .filter-grid .jurisdiction-field, .filter-grid .dossier-field { grid-column: span 1; }
  .filter-grid .search-field, .filter-grid .date-range { grid-column: span 2; }
  .dossier-options { inset-inline: 0 auto; }
}
@media (max-width: 700px) {
  .agenda-item { display: none; }
  .agenda-grid[data-mode] .agenda-day { min-height: 3rem; }
  .page-intro { align-items: start; flex-direction: column; }
  .source-status { justify-items: start; }
  .auth-layout { grid-template-columns: 1fr; margin-block: 1.25rem; }
  .auth-intro { border-radius: .375rem .375rem 0 0; }
}
@media (max-width: 620px) {
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .filter-grid .committee-field { grid-column: 1 / -1; }
  .filter-grid .date-range { column-gap: .6rem; }
  .dossier-options { inset-inline: auto 0; }
}
@media (max-width: 460px) {
  .product-brand h1 { font-size: clamp(1.45rem, 6.5vw, var(--text-xl)); line-height: 1.25; }
  .admin-form fieldset { grid-template-columns: minmax(0, 1fr); }
  .views button { padding-inline: .65rem; }
  .agenda-grid { gap: .2rem; }
  .agenda-weekday, .agenda-day { padding-inline: .22rem; }
  .container, .auth-layout { width: calc(100% - 1.5rem); }
  .site-header-inner picture { flex-basis: 11rem; }
  .account-actions { font-size: .78rem; }
  .event { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; }
  .event-info { grid-column: 1 / -1; grid-row: 2; }
  .event-source { grid-column: 2; grid-row: 1; }
}