/* ============================================================
   EUPT — lifted slate-blue, a lighter blue accent, and pink used
   sparingly: for what the reader has marked and what is in motion.
   ============================================================ */

:root {
  --bg:          #121826;
  --bg-2:        #151c2e;
  --panel:       #1b2439;
  --panel-2:     #222d47;
  --panel-3:     #2b3858;

  /* Borders carry less weight than before: solid hairlines boxed everything
     in. Surfaces are separated by tone and elevation; the hairlines that
     remain are blue-tinted so they read as depth, not as grey rules. */
  --line:        rgba(150, 180, 235, .14);
  --line-soft:   rgba(150, 180, 235, .08);
  --line-strong: rgba(163, 192, 240, .24);

  --text:        #eff4fc;
  --text-dim:    #aab8d2;
  --text-faint:  #78879f;

  --accent:      #66a3ff;
  --accent-soft: #9cc5ff;
  --accent-deep: #3a72c2;
  --glow:        rgba(102, 163, 255, .22);

  /* The rare second accent. Reserved for the personal and the moving:
     watched acts, unread alerts, matched words, files in motion. */
  --pink:        #ef7fbd;
  --pink-soft:   rgba(239, 127, 189, .14);
  --glow-pink:   rgba(239, 127, 189, .10);

  --shadow-card: 0 1px 2px rgba(7, 11, 22, .5), 0 12px 32px -18px rgba(5, 9, 20, .85);
  --shadow-lift: 0 3px 10px rgba(7, 11, 22, .55), 0 22px 52px -22px rgba(5, 9, 20, .9);

  --green:       #3ddfa4;
  --amber:       #fcc63d;
  --violet:      #b39cfc;

  /* Geometric/squarish faces first for the futuristic feel, with graceful
     fallbacks. All system-installed, so the app still renders offline. */
  --font-display: -apple-system, "SF Pro Display", "Helvetica Neue",
                  "Inter", "Segoe UI", system-ui, sans-serif;

  --radius:      14px;
  --radius-lg:   22px;
  --topbar-h:    58px;
}

* { box-sizing: border-box; }

::selection { background: rgba(102, 163, 255, .32); }

/* A visitor without the access key gets the tracker, not the controls:
   anything that would change the owner's data is hidden rather than left
   to fail on click. Reading is untouched. */
body.is-readonly .btn-watch,
body.is-readonly .watch-note,
body.is-readonly #sync-btn-hero,
body.is-readonly .watch-remove { display: none !important; }

/* One focus language everywhere a keyboard lands. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* An author `display` rule outranks the hidden attribute's UA `display:none`,
   which silently left .cal-grid (display:grid) on screen in agenda mode.
   One rule so no element can ever be hidden in markup but shown in layout. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   Logo: line art rather than rendered illustration — outlines, one accent
   colour for the stars, and no drop shadows. The lens keeps its glass.
   ============================================================ */
.logo-anim { width: 196px; height: 196px; overflow: visible; margin-bottom: 2px; }

/* documents: outline only, so they read as drawing not render */
.logo-files {
  transform-box: view-box; transform-origin: 0 0;
  animation: fileBob 9s ease-in-out infinite;
}
@keyframes fileBob {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -2.5px); }
}
.file      { fill: rgba(24, 34, 56, .78); stroke: #64749a; stroke-width: 1.1; }
.file-2    { stroke: #525f80; }
.file-3    { stroke: #434e6b; }
.file-line { fill: #5b6a8d; }
/* a touch of colour so the stack isn't wholly monochrome */
.file-line.accent-gold { fill: #a8842f; }
.file-line.accent-blue { fill: #4d82ba; }

/* the magnifying glass — larger, and the glass effect kept as-is */
.logo-glass {
  transform-box: view-box; transform-origin: 0 0;
  animation: glassHover 18s ease-in-out infinite;
}
/* A wandering drift over the documents, not a 4px twitch. */
@keyframes glassHover {
  0%,  100% { transform: translate(110px, 92px); }
  25%       { transform: translate(128px, 72px); }
  50%       { transform: translate(134px, 88px); }
  75%       { transform: translate(116px, 76px); }
}
.lens-fill      { fill: url(#lensGlass); }
.lens-rim       { fill: none; stroke: #7d8db0; stroke-width: 2.4; }
.lens-rim-inner { fill: none; stroke: #46536f; stroke-width: 1; }
.lens-shine     { fill: #fff; opacity: .05; }
.glass-handle   { fill: none; stroke: #7686a8; stroke-width: 2.2; }
.eu-star        { fill: #d9b44a; }   /* the single accent colour */

/* compact mark in the top bar */
.brand-mark  { width: 29px; height: 29px; flex: none; }
.mark-ring   { fill: none; stroke: #40507a; stroke-width: 1; }
.mark-lens   { fill: rgba(163, 192, 240, .07); }
.mark-rim    { fill: none; stroke: #8d9cbd; stroke-width: 1.7; }
.mark-handle { fill: none; stroke: #7e8dae; stroke-width: 1.7; }
.mark-stars .eu-star { fill: #d9b44a; }

@media (prefers-reduced-motion: reduce) {
  .logo-glass, .logo-files { animation: none; }
}

/* ============================================================
   Top bar — deliberately quiet: mark, search, sync. Nothing else.
   ============================================================ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topbar-h);
  /* Three columns rather than an absolutely-centred nav: with six nav items
     the centred version overlapped the search box by 34px. */
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
  padding: 0 22px;
  background: rgba(19, 26, 42, .7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.topbar.scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(16, 22, 36, .9);
}

.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Initials only in the bar — the full wordmark lives on the landing page. */
.brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--text); flex: none;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 650; font-size: 15px; letter-spacing: 1.4px;
}
/* The drawer still shows the full wordmark stacked, unlike the top bar. */
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-sub {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); white-space: nowrap;
}

/* Only appears once the hero search has scrolled away. */
.topbar-search {
  flex: 1 1 auto; max-width: 300px; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text-faint);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .25s, transform .25s, border-color .15s;
}
.topbar-search.visible { opacity: 1; transform: none; pointer-events: auto; }
.topbar-search:focus-within { border-color: var(--accent-deep); }
.topbar-search input {
  border: 0; background: none; padding: 0; color: var(--text);
  font-size: 13px; width: 100%; outline: none;
}

.topbar-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.sync-state { font-size: 12px; color: var(--text-faint); }

/* ============================================================
   Buttons & inputs
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: rgba(163, 192, 240, .06);
  color: var(--text);
  padding: 9px 15px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 500; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: var(--line-strong); }
.btn:disabled { opacity: .38; cursor: default; }
.btn-quiet { background: transparent; }
.btn-block { width: 100%; justify-content: center; }
.btn-primary {
  background: linear-gradient(135deg, #79b1ff 0%, #4386e0 100%);
  border-color: transparent; color: #0d1b32; font-weight: 650;
  padding: 11px 22px; font-size: 14px;
  box-shadow: 0 8px 26px -10px rgba(102, 163, 255, .55);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8abcff 0%, #4c92ea 100%);
  border-color: transparent;
}

input, select {
  width: 100%; min-width: 0; padding: 9px 11px; font-size: 13px;
  font-family: inherit;
  background: rgba(163, 192, 240, .055); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover { border-color: var(--line-strong); }
input:focus, select:focus {
  outline: none; border-color: var(--accent-deep);
  background: rgba(163, 192, 240, .07);
  box-shadow: 0 0 0 3px rgba(102, 163, 255, .12);
}
input[type=date] { color-scheme: dark; }
input[type=search]::-webkit-search-cancel-button { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--topbar-h) + 40px) 24px 90px;
  background: var(--bg);
}
.hero-glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 800px; pointer-events: none;
  background:
    radial-gradient(ellipse at center, var(--glow) 0%, transparent 62%),
    radial-gradient(ellipse 40% 34% at 72% 30%, var(--glow-pink) 0%, transparent 70%);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.hero-title {
  margin: 0; font-family: var(--font-display);
  font-size: 50px; font-weight: 750; line-height: 1;
  /* Tracked out so the wordmark's ink width matches the line beneath it.
     text-indent is half the tracking: CSS adds a letter-space after the final
     character too, which would otherwise pull the ink left of centre. */
  letter-spacing: 5.6px; text-indent: 2.8px;
  background: linear-gradient(115deg, #f8fbff 0%, #cfe2ff 62%, #e9c7e9 108%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-sub {
  margin: 7px 0 32px;
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .26em; text-indent: .13em;
  color: var(--text-faint);
}

/* the big search */
.search-xl {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(163,192,240,.07), rgba(163,192,240,.03));
  border: 1px solid var(--line);
  box-shadow: 0 22px 54px -26px rgba(9, 14, 28, .7);
  transition: border-color .18s, box-shadow .18s;
}
.search-xl:focus-within {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px rgba(102, 163, 255, .1), 0 20px 50px -24px rgba(9, 14, 28, .7);
}
.search-xl .icon { width: 19px; height: 19px; color: var(--text-faint); }
.search-xl input {
  flex: 1; border: 0; background: none; padding: 0;
  font-size: 16px; color: var(--text); outline: none;
}
.search-xl input::placeholder { color: var(--text-faint); }
.search-xl .clear {
  border: 0; background: none; color: var(--text-faint);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.search-xl .clear:hover { color: var(--text); }

.suggestions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-top: 16px;
}
.suggestions-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
}
.suggestion {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  padding: 5px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  font-family: inherit; transition: border-color .15s, color .15s;
}
.suggestion:hover { border-color: var(--accent-deep); color: var(--accent-soft); }

/* ---------- the three hero panels ---------- */
.panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: 100%; margin-top: 34px; text-align: left;
}
.panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 118px;
  padding: 15px 17px 16px;
  background: linear-gradient(158deg, rgba(32, 44, 70, .8), rgba(22, 31, 52, .82));
  border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* hairline running along the top edge, the one flourish */
.panel::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 163, 255, .5), transparent);
}
.panel-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); font-weight: 600; margin-bottom: 13px;
}

/* Metrics run across the panel, which keeps it wide and shallow. */
.metric-strip { display: flex; align-items: stretch; margin-top: auto; }
.metric {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  padding-left: 16px; border-left: 1px solid var(--line-soft);
}
.metric:first-child { padding-left: 0; border-left: 0; }
.metric b {
  font-size: 23px; font-weight: 650; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.metric span {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint);
}

a.panel { text-decoration: none; color: inherit; transition: border-color .15s; }
a.panel:hover { border-color: var(--line-strong); }
.latest-title {
  font-size: 12.5px; line-height: 1.5; color: var(--text); margin: 8px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-foot {
  margin-top: auto; padding-top: 11px;
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}


.hero-actions {
  display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap;
  justify-content: center;
}
.hero-meta { font-size: 12px; color: var(--text-faint); }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-faint); text-decoration: none; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .1em; z-index: 1;
}
.scroll-cue:hover { color: var(--accent-soft); }
.scroll-cue svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ============================================================
   Feed layout
   ============================================================ */
.layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 26px;
  padding: 38px 48px 90px; align-items: start;
  max-width: 1560px; margin: 0 auto;
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: var(--topbar-h);
}

.sidebar {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow-card); position: sticky; top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 32px);
  overflow-y: auto;
  overflow-x: hidden;   /* the sidebar must never scroll sideways */
}
.field { margin-bottom: 20px; }
.field > label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); margin-bottom: 8px; font-weight: 600;
}
.field .hint { text-transform: none; letter-spacing: 0; opacity: .75; }

/* Two date pickers side by side overflowed the sidebar, so they stack. */
.date-stack { display: flex; flex-direction: column; gap: 7px; }
.date-row { display: flex; align-items: center; gap: 8px; }
.date-tag {
  font-size: 11px; color: var(--text-faint); width: 32px; flex: none;
}
.date-row input { flex: 1; min-width: 0; }

/* No inner scroll: a scrollable list inside an already-scrolling sidebar
   traps the wheel and is easy to miss. There are only a dozen types. */
.checklist { overflow-x: hidden; padding-right: 4px; }
.toggle, .check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-dim); cursor: pointer; padding: 3px 0;
}
.toggle input, .check input { width: auto; flex: none; accent-color: var(--accent); }
.check span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check .count {
  margin-left: auto; font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; flex: none;
}
.check:hover, .toggle:hover { color: var(--text); }

.chart { margin-top: 24px; }
.chart > label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); margin-bottom: 9px; font-weight: 600;
}
.timeline { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.timeline .bar {
  flex: 1; min-height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  opacity: .75;
}
.timeline .bar:hover { opacity: 1; }

/* ============================================================
   Results
   ============================================================ */
.results-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.result-count { font-size: 15px; font-weight: 500; color: var(--text-dim); margin: 0; }
.result-count b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.export-link {
  margin-left: auto; font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px;
  text-decoration: none; white-space: nowrap;
}
.export-link:hover { color: var(--text); border-color: var(--accent); }
.pill {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim);
  padding: 3px 10px; border-radius: 999px; font-size: 11px;
}

.list { display: flex; flex-direction: column; gap: 14px; }

.law {
  background: linear-gradient(180deg, rgba(163,192,240,.045), transparent 55%), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.law:hover {
  background: var(--panel-2); border-color: var(--line-strong);
  transform: translateY(-1px); box-shadow: var(--shadow-lift);
}
.law.is-new { border-left: 2px solid var(--green); }
.law.is-noise { opacity: .6; }

.law-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.badge {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650;
  padding: 4px 9px; border-radius: 6px; white-space: nowrap;
  background: rgba(102,163,255,.15); color: var(--accent-soft);
  border: 1px solid rgba(102,163,255,.26);
}
.badge.pipeline { background: rgba(167,139,250,.13); color: var(--violet); border-color: rgba(167,139,250,.24); }
.badge.soft_law { background: rgba(148,163,184,.11); color: var(--text-dim); border-color: var(--line); }
.badge.noise    { background: transparent; color: var(--text-faint); border-color: var(--line); }
.badge.new      { background: rgba(52,211,153,.14); color: var(--green); border-color: rgba(52,211,153,.26); }

.celex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--text-faint);
}
.law-date {
  margin-left: auto; font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.law-title { font-size: 14px; line-height: 1.5; }

.law-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.chip {
  font-size: 11px; background: rgba(163, 192, 240, .06);
  border: 1px solid var(--line);
  color: var(--text-dim); padding: 3px 10px; border-radius: 999px;
  transition: border-color .15s, color .15s;
}
.chip.topic { cursor: pointer; }
.chip.topic:hover { border-color: var(--accent-deep); color: var(--accent-soft); }
.chip.force-yes { color: var(--green); border-color: rgba(52,211,153,.28); }
.chip.force-no  { color: var(--amber); border-color: rgba(251,191,36,.28); }

.detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.detail dl { display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px; margin: 0 0 12px; }
.detail dt { color: var(--text-faint); font-size: 12px; }
.detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.detail a { color: var(--accent); text-decoration: none; }
.detail a:hover { color: var(--accent-soft); text-decoration: underline; }
.detail .changes { font-size: 12px; color: var(--text-dim); }

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 26px 0 8px; }
.muted { color: var(--text-faint); font-size: 13px; }
.empty { text-align: center; padding: 64px 20px; color: var(--text-faint); }

/* ---------- offline banner ---------- */
.offline {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 49;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: #4a1620; color: #ffdce2; border-bottom: 1px solid #6b2130;
  padding: 10px 18px; font-size: 13px;
}
.offline[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
  .topbar-search { display: none; }
  .hero-title { font-size: 36px; }
  .hero { min-height: auto; padding-bottom: 70px; }
}

/* ============================================================
   Icon buttons, slide-out menu and content pages
   ============================================================ */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); background: var(--panel-2); border-color: var(--line-strong); }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 8, 14, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .18s ease;
}
.drawer-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: 322px; max-width: 86vw;
  display: flex; flex-direction: column; padding: 18px;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -30px rgba(9, 14, 28, .7);
  animation: drawerIn .22s cubic-bezier(.22, .8, .3, 1);
}
.drawer[hidden] { display: none; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }

.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.drawer-nav { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; flex: 1; overflow-y: auto; }
.drawer-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); font-weight: 600; margin: 16px 0 5px; padding: 0 11px;
}
.drawer-group:first-child { margin-top: 8px; }
.drawer-link {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; color: var(--text-dim);
  font: inherit; font-size: 14px; padding: 9px 11px;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
}
.drawer-link:hover { background: var(--panel-2); color: var(--text); }
.drawer-link.active { background: rgba(102, 163, 255, .12); color: var(--accent-soft); }
.drawer-foot {
  padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; line-height: 1.55; color: var(--text-faint);
}

.page-overlay {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  padding: 64px 20px;
  background: rgba(4, 8, 14, .74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .18s ease;
}
.page-overlay[hidden] { display: none; }
.page-sheet {
  position: relative; max-width: 780px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 42px 46px 46px;
}
.page-close { position: absolute; top: 16px; right: 16px; }

#page-content .page-kicker {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); margin: 0 0 10px; font-weight: 600;
}
#page-content h1 {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 700; letter-spacing: .5px; margin: 0 0 18px;
}
#page-content h2 { font-size: 15px; margin: 28px 0 8px; color: var(--text); }
#page-content p, #page-content li { color: var(--text-dim); font-size: 14px; line-height: 1.68; }
#page-content ul { padding-left: 20px; margin: 8px 0; }
#page-content li { margin-bottom: 5px; }
#page-content a { color: var(--accent); text-decoration: none; }
#page-content a:hover { text-decoration: underline; }
#page-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: var(--panel-2); color: var(--accent-soft);
  padding: 2px 6px; border-radius: 5px;
}
#page-content .facts {
  display: grid; grid-template-columns: 210px 1fr; gap: 9px 18px;
  margin: 14px 0 4px; font-size: 13.5px;
}
#page-content .facts dt { color: var(--text-faint); }
#page-content .facts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
#page-content .note {
  margin-top: 26px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-dim);
}

@media (max-width: 640px) {
  .brand-sub { display: none; }
  .sync-label { display: none; }
  .page-sheet { padding: 34px 22px 30px; }
  #page-content .facts { grid-template-columns: 1fr; gap: 2px 0; }
  #page-content .facts dd { margin-bottom: 10px; }
}

/* ============================================================
   Theme chips — a coarse slice above the feed, level with the sidebar
   ============================================================ */
.theme-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.theme-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.theme-chip:hover { border-color: var(--line-strong); color: var(--text); }
.theme-chip.active { box-shadow: 0 0 18px -8px var(--glow); 
  background: rgba(102, 163, 255, .13);
  border-color: rgba(102, 163, 255, .45);
  color: var(--accent-soft);
}
.theme-chip .n {
  font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.theme-chip.active .n { color: var(--accent); }

@media (max-width: 1080px) { .panels { grid-template-columns: 1fr; } }

/* ============================================================
   Views and top-bar navigation
   ============================================================ */
.view[hidden] { display: none; }
#view-calendar, #view-watchlist, #view-act, #view-dashboard {
  max-width: 1280px; margin: 0 auto;
  padding: calc(var(--topbar-h) + 46px) 48px 96px;
}
#view-calendar { max-width: 1460px; }   /* a month grid needs the width */

/* Absolutely centred so it stays put regardless of how wide the search box
   and the right-hand controls happen to be. */
.topnav { justify-self: center; display: flex; gap: 2px; }
.topnav-link {
  position: relative; padding: 7px 12px; border-radius: 8px;
  font-size: 13px; color: var(--text-faint); text-decoration: none;
  transition: color .15s, background .15s;
}
.topnav-link:hover { color: var(--text); background: var(--panel-2); }
.topnav-link.active {
  color: var(--accent-soft); background: rgba(102, 163, 255, .12);
  box-shadow: 0 0 16px -6px var(--glow);
}
.alert-dot {
  position: absolute; top: 3px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 0 2px var(--bg);
}
.alert-dot[hidden] { display: none; }

.view-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.view-title {
  margin: 0; font-family: var(--font-display);
  font-size: 26px; font-weight: 620; letter-spacing: .2px;
}
.view-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--text-dim); }

/* ============================================================
   Calendar
   ============================================================ */
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-month {
  min-width: 168px; text-align: center; font-size: 15px; font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.cal-filters {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
}
.kind-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.kind-toggle input { width: auto; accent-color: currentColor; }
.kind-toggle.k-published span { color: #9ccbff; }
.kind-toggle.k-in_force  span { color: #7ee0b8; }
.kind-toggle.k-expires   span { color: #f5cf7a; }
.kind-toggle.k-sitting   span { color: var(--violet); }
.cal-sep { width: 1px; height: 20px; background: var(--line); }
.cal-select { width: auto; min-width: 150px; }
.cal-count { margin-left: auto; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px;
}
.cal-weekdays span {
  text-align: center; padding: 4px 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 112px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
  overflow: hidden;
}
.cal-cell:hover { border-color: var(--line-strong); }
.cal-cell.other-month { opacity: .38; }
.cal-cell.today { border-color: rgba(102, 163, 255, .55); }
.cal-cell.selected { border-color: var(--accent); background: var(--panel-2); }
.cal-daynum {
  font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.cal-cell.today .cal-daynum { color: var(--accent-soft); font-weight: 650; }

.cal-ev {
  font-size: 10.5px; line-height: 1.35; padding: 2px 6px; border-radius: 4px;
  border-left: 2px solid; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev.published { background: rgba(102, 163, 255, .12);  color: #9ccbff; border-color: var(--accent); }
.cal-ev.in_force  { background: rgba(52, 211, 153, .1);  color: #7ee0b8; border-color: #34d399; }
.cal-ev.expires   { background: rgba(251, 191, 36, .1);  color: #f5cf7a; border-color: #fbbf24; }
.cal-ev.adopted   { background: rgba(148, 163, 184, .09); color: var(--text-dim); border-color: #64748b; }
/* A sitting is not an act but the backdrop they move against: Parliament is
   in session that day. Marked, not shouted, and never clickable. */
.cal-ev.sitting {
  background: rgba(179, 156, 252, .1); color: var(--violet);
  border-color: rgba(179, 156, 252, .45); cursor: default;
  font-weight: 550;
}
.cal-ev .star { color: var(--pink); }
.cal-more { font-size: 10px; color: var(--text-faint); padding-left: 2px; }

.cal-day {
  margin-top: 20px; padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.cal-day[hidden] { display: none; }
.cal-day h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.cal-day-row {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.cal-day-row:last-child { border-bottom: 0; }
.cal-day-row:hover .cal-day-title { color: var(--accent-soft); }
.cal-day-title { font-size: 13px; color: var(--text); flex: 1; }
.kind-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.kind-tag.published { background: rgba(102, 163, 255, .15); color: #9ccbff; }
.kind-tag.in_force  { background: rgba(52, 211, 153, .13); color: #7ee0b8; }
.kind-tag.expires   { background: rgba(251, 191, 36, .13); color: #f5cf7a; }
.kind-tag.adopted   { background: rgba(148, 163, 184, .1); color: var(--text-dim); }

/* ============================================================
   Watchlist and alerts
   ============================================================ */
.alerts { margin-bottom: 24px; }
.alerts-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); font-weight: 600; margin: 0 0 9px;
}
.alert-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 15px; margin-bottom: 7px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.alert-row:hover { border-color: var(--line-strong); }
.alert-row.unread { border-color: rgba(102, 163, 255, .42); background: rgba(102, 163, 255, .08); }
.alert-when {
  font-size: 11.5px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.alert-title { flex: 1; color: var(--text); }

.watch-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color .15s;
}
.watch-card:hover { border-color: var(--line-strong); }
.watch-main { flex: 1; min-width: 0; }
.watch-title { font-size: 13.5px; line-height: 1.5; margin: 7px 0 0; }
.watch-next {
  text-align: right; white-space: nowrap;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
}
.watch-next b { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.watch-next span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); }
.watch-remove {
  border: 1px solid var(--line); background: transparent; color: var(--text-faint);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.watch-remove:hover { color: #ff9e9e; border-color: #6b2130; }

/* ============================================================
   Single act
   ============================================================ */
.act-jump {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 20px;
}
.act-jump-sep { width: 1px; height: 20px; background: var(--line); margin: 0 5px; }
.jump-btn {
  border: 1px solid var(--line); background: transparent; color: var(--text-faint);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.jump-btn:hover { color: var(--accent-soft); border-color: var(--accent-deep); background: rgba(102,163,255,.09); }
/* so a jumped-to section lands below the fixed top bar */
.act-section { scroll-margin-top: calc(var(--topbar-h) + 20px); }
.act-head { margin-bottom: 18px; }
.act-title {
  font-size: 21px; line-height: 1.42; font-weight: 550; margin: 12px 0 0;
  max-width: 900px;
}
.act-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.act-actions { margin-left: auto; display: flex; gap: 8px; }
.btn-watch.on {
  background: var(--pink-soft); border-color: rgba(239, 127, 189, .4); color: var(--pink);
}

/* Two equal boxes side by side; everything larger stands alone full width. */
.act-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
  margin-bottom: 20px;   /* the row itself carries the gap to what follows */
}
.act-row-2 > .act-section { margin-bottom: 0; min-width: 0; }
.act-summary { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0; }
.act-summary-src {
  margin: 10px 0 0; font-size: 11px; color: var(--text-faint);
}
.act-section {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 26px; margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.act-section h2 {
  margin: 0 0 14px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-faint); font-weight: 600;
}
.act-facts { display: grid; grid-template-columns: 168px 1fr; gap: 8px 16px; font-size: 13px; }
.act-facts dt { color: var(--text-faint); }
.act-facts dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

.timeline-list { position: relative; padding-left: 24px; }
.timeline-list::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
}
.tl-item { position: relative; padding: 9px 0; }
.tl-item::before {
  content: ""; position: absolute; left: -23px; top: 14px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--panel-3); border: 2px solid var(--line);
}
.tl-item.milestone::before { background: var(--accent); border-color: var(--accent); }
.tl-item.future::before { background: var(--bg); border-color: var(--accent); }
.tl-item.future .tl-label { color: var(--accent-soft); }
.tl-date { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tl-label { font-size: 13.5px; color: var(--text); margin-top: 1px; }
.tl-detail { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.tl-detail a { color: var(--accent); text-decoration: none; }
.tl-detail a:hover { text-decoration: underline; }

.rel-group { margin-bottom: 15px; }
.rel-group:last-child { margin-bottom: 0; }
.rel-group h3 {
  margin: 0 0 7px; font-size: 12px; font-weight: 600; color: var(--text-dim);
}
.rel-item {
  display: flex; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.rel-item:last-child { border-bottom: 0; }
.rel-item .celex { flex: none; }
.rel-item a { color: var(--text); text-decoration: none; }
.rel-item a:hover { color: var(--accent-soft); }
.rel-more { font-size: 11.5px; color: var(--text-faint); padding-top: 7px; }

.act-text {
  max-height: 560px; overflow-y: auto;
  font-size: 13px; line-height: 1.68;
  color: var(--text-dim); padding-right: 10px;
}
.act-text p { margin: 0 0 9px; }
.act-text p:last-child { margin-bottom: 0; }
.act-sec { margin-bottom: 20px; }
.act-sec:last-child { margin-bottom: 0; }
.act-sec > h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent-soft);
}
.act-sec.title > h3, .act-sec.closing > h3 { color: var(--text-faint); }
.act-sec.title p { color: var(--text); font-size: 13.5px; }
.act-sec details > summary {
  cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.act-sec details > summary:hover { color: var(--accent-soft); }
.act-text-meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-faint);
}

@media (max-width: 1000px) {
  .act-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 84px; }
  .topnav-link { padding: 7px 9px; font-size: 12px; }
}

/* ============================================================
   Dashboard
   ============================================================ */
.dash-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px;
}
.dash-metric {
  display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(158deg, rgba(32, 44, 70, .8), rgba(22, 31, 52, .82));
  border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px 22px;
  text-decoration: none; color: inherit;
}
a.dash-metric { transition: border-color .15s; }
a.dash-metric:hover { border-color: var(--line-strong); }
.dm-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); font-weight: 600; margin-bottom: 13px;
}
.dm-lead {
  font-size: 30px; font-weight: 650; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dm-unit { margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }
/* the smaller figures, grouped under the headline rather than each in its own box */
.dm-split {
  display: flex; gap: 24px; margin-top: auto; padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}
.dm-split > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dm-split b {
  font-size: 15px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dm-split span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); white-space: nowrap;
}

.dash-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
.dash-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 30px; margin-bottom: 22px;
  box-shadow: var(--shadow-card);
  min-width: 0;               /* grid children must be allowed to shrink */
  overflow: hidden;
}
.dash-row .dash-card { margin-bottom: 0; }
.dash-card h2 {
  margin: 0 0 16px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-faint); font-weight: 600;
}

.dash-volume { display: flex; align-items: flex-end; gap: 7px; height: 186px; }
.dash-volume .col {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 6px; height: 100%;
}
.dash-volume .val { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dash-volume .bar {
  width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 34%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  transition: box-shadow .18s, filter .18s;
}
.dash-volume .col:hover .bar {
  filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px -2px var(--glow);
}
.dash-volume .lab {
  font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em;
}

.barlist { display: flex; flex-direction: column; gap: 11px; }
.barrow { cursor: default; }
.barrow.clickable { cursor: pointer; }
.barrow .top {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--text-dim); margin-bottom: 5px;
}
.barrow .top b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.barrow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .track { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.barrow .fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-deep));
}
.barrow.clickable:hover .name { color: var(--accent-soft); }

.dash-up-row {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; cursor: pointer;
}
.dash-up-row:last-child { border-bottom: 0; }
.dash-up-row .t { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-up-row:hover .t { color: var(--accent-soft); }
.dash-up-row .d { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* The grid makes overlap impossible, so the search can simply shrink; it is
   only dropped once it would be too narrow to type in. */
@media (max-width: 1120px) { .topbar-search { display: none; } }
@media (max-width: 900px) {
  #view-calendar, #view-watchlist, #view-act, #view-dashboard { padding-left: 20px; padding-right: 20px; }
  .dash-row { grid-template-columns: 1fr; }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .topnav { position: static; transform: none; }
  .act-row-2 { grid-template-columns: 1fr; }
}

/* ---------- calendar: month picker, view toggle, export ---------- */
.cal-jump {
  width: auto; padding: 6px 10px; font-size: 12.5px; color-scheme: dark;
}
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg-btn {
  border: 0; background: transparent; color: var(--text-faint);
  font: inherit; font-size: 12.5px; padding: 7px 14px; cursor: pointer;
}
.seg-btn:hover { color: var(--text); background: var(--panel-2); }
.seg-btn.active { background: rgba(102, 163, 255, .14); color: var(--accent-soft); }
/* Files in motion are the moving half of the product — the pink half. */
.mode-switch .seg-btn[data-mode="motion"].active {
  background: var(--pink-soft); color: var(--pink);
}

.kind-toggle .kn {
  font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}

.cal-agenda[hidden] { display: none; }
.cal-agenda {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 20px 14px;
}
.agenda-day {
  display: grid; grid-template-columns: 112px 1fr; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.agenda-day:last-child { border-bottom: 0; }
.agenda-date { position: sticky; top: calc(var(--topbar-h) + 12px); align-self: start; }
.agenda-date b {
  display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
}
.agenda-date span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; }
.agenda-date.is-today b { color: var(--accent-soft); }
.agenda-events { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.agenda-row {
  display: flex; align-items: baseline; gap: 11px; cursor: pointer;
  font-size: 12.5px; min-width: 0;
}
.agenda-row .t { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row:hover .t { color: var(--accent-soft); }

/* the act's own subject-matter line, sitting under the title */
.act-lead {
  margin: 14px 0 0; max-width: 940px;
  font-size: 13.5px; line-height: 1.62; color: var(--text-dim);
}
.act-lead .src {
  display: block; margin-top: 7px; font-size: 11px; color: var(--text-faint);
}

/* ============================================================
   Search: suggestions, syntax hint, match snippets
   ============================================================ */
.search-hint {
  margin: 12px 0 0; font-size: 11px; color: var(--text-faint); text-align: center;
  opacity: .55; transition: opacity .2s;
}
.search-hint:hover, .search-wrap:focus-within ~ .search-hint { opacity: 1; }
.search-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; background: rgba(163, 192, 240, .06);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
  color: var(--text-dim);
}

.suggest-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 6px; text-align: left; max-height: 340px; overflow-y: auto;
  box-shadow: 0 20px 44px -22px rgba(9, 14, 28, .7);
}
.suggest-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.suggest-row:hover, .suggest-row.active { background: rgba(102, 163, 255, .14); }
.suggest-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 6px; flex: none;
}
.suggest-value { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* The panel anchors to the search box, not to the whole hero block —
   otherwise "top: 100%" drops it below the stat panels. */
.search-wrap { position: relative; width: 100%; }

.law-snippet {
  margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--text-dim);
  padding-left: 10px; border-left: 2px solid var(--line);
}
.law-snippet mark {
  background: var(--pink-soft); color: var(--pink);
  border-radius: 3px; padding: 0 2px;
}
.law-title-full { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-faint); }

/* ============================================================
   Bodies
   ============================================================ */
#view-bodies, #view-body, #view-person {
  max-width: 1280px; margin: 0 auto;
  padding: calc(var(--topbar-h) + 46px) 48px 96px;
}

.body-group { margin-bottom: 34px; }
.body-group-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 24px; cursor: pointer;
  background: linear-gradient(158deg, rgba(32, 44, 70, .8), rgba(22, 31, 52, .82));
  border: 1px solid var(--line); border-radius: 14px;
}
.body-group-head:hover { border-color: var(--line-strong); }
.body-group-head h2 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--text);
}
.body-group-head .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px;
}
.body-group-head .n {
  margin-left: auto; font-size: 13px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.body-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px; margin-top: 12px;
}
.body-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 15px 17px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.body-tile:hover { border-color: var(--accent-deep); background: var(--panel-2); }
.body-tile .t {
  font-size: 12.5px; color: var(--text); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.body-tile .m {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.body-tile .m b { color: var(--text-dim); font-weight: 600; }

.body-head { margin-bottom: 20px; }
.body-head h1 {
  margin: 10px 0 0; font-size: 24px; font-weight: 600; line-height: 1.35;
}
.body-head .sub { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }
.body-head .sub a { color: var(--accent); text-decoration: none; }
.body-head .sub a:hover { text-decoration: underline; }

.body-recent { display: flex; flex-direction: column; }
.body-recent-row {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: 12.5px;
}
.body-recent-row:last-child { border-bottom: 0; }
.body-recent-row .t { flex: 1; color: var(--text-dim); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.body-recent-row:hover .t { color: var(--accent-soft); }
.body-recent-row .d { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  #view-bodies, #view-body, #view-person { padding-left: 20px; padding-right: 20px; }
}

/* the body's own description, and where it came from */
.body-desc {
  margin: 14px 0 0; max-width: 780px;
  font-size: 14px; line-height: 1.62; color: var(--text-dim);
}
.body-meta { margin: 10px 0 0; font-size: 11px; color: var(--text-faint); }
.body-meta a { color: var(--accent); text-decoration: none; }
.body-meta a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  #view-calendar, #view-watchlist, #view-act, #view-dashboard,
  #view-bodies, #view-body, #view-person { padding-left: 26px; padding-right: 26px; }
  .layout { padding-left: 26px; padding-right: 26px; }
}

/* ============================================================
   Procedures and the lifecycle track
   ============================================================ */
#view-procedures, #view-procedure {
  max-width: 1280px; margin: 0 auto;
  padding: calc(var(--topbar-h) + 46px) 48px 96px;
}

.proc-card {
  display: block; padding: 18px 22px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  cursor: pointer; transition: border-color .15s;
}
.proc-card:hover { border-color: var(--line-strong); }
.proc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.proc-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--accent-soft);
}
.proc-title { font-size: 13.5px; line-height: 1.5; color: var(--text); margin: 0 0 12px; }
.proc-when { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* the track: a dot per stage, filled up to where the file has reached */
.lifecycle { display: flex; align-items: flex-start; gap: 0; }
.lc-stage {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center; min-width: 0;
}
.lc-stage::before {
  content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px;
  background: var(--line);
}
.lc-stage:first-child::before { display: none; }
.lc-stage.done::before, .lc-stage.current::before { background: var(--accent-deep); }
.lc-dot {
  width: 13px; height: 13px; border-radius: 50%; z-index: 1;
  background: var(--panel-3); border: 2px solid var(--line);
}
.lc-stage.done .lc-dot { background: var(--accent-deep); border-color: var(--accent-deep); }
.lc-stage.current .lc-dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(102, 163, 255, .22);
}
.lc-label {
  font-size: 10.5px; line-height: 1.3; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.lc-stage.done .lc-label, .lc-stage.current .lc-label { color: var(--text-dim); }
.lc-stage.current .lc-label { color: var(--accent-soft); font-weight: 600; }
.lc-date { font-size: 9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.lifecycle.large .lc-dot { width: 16px; height: 16px; }
.lifecycle.large .lc-label { font-size: 12px; white-space: normal; }
.lifecycle.large .lc-stage::before { top: 7px; }

.proc-note {
  margin-top: 16px; font-size: 11.5px; color: var(--text-faint); line-height: 1.6;
}
.proc-events { display: flex; flex-direction: column; }
.proc-event {
  display: flex; align-items: baseline; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.proc-event:last-child { border-bottom: 0; }
.proc-event .d { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; width: 88px; flex: none; }
.proc-event .l { flex: 1; color: var(--text-dim); }
.proc-event .s {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
}

@media (max-width: 900px) {
  #view-procedures, #view-procedure { padding-left: 26px; padding-right: 26px; }
  .lc-label { display: none; }
}

/* ---------- finishing touches ---------- */
::selection { background: rgba(102, 163, 255, .28); color: #fff; }

/* thin, unobtrusive scrollbars in place of the default chrome */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(163, 192, 240, .2); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(163, 192, 240, .34); background-clip: content-box; }

/* a visible focus ring for keyboard users, absent for mouse clicks */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.btn:focus:not(:focus-visible), .icon-btn:focus:not(:focus-visible) { outline: none; }

/* the panels on the landing page pick up the same elevation as everything else */
.panel { box-shadow: var(--shadow-card); }
a.panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); }

/* ============================================================
   Act page: the at-a-glance strip and its sections
   ============================================================ */
.act-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; margin-bottom: 20px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card);
}
.act-status .st {
  background: var(--panel); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.act-status .k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); font-weight: 600;
}
.act-status b {
  font-size: 14px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-status b.yes { color: var(--green); }
.act-status b.no  { color: var(--amber); }
.act-status b.none { color: var(--text-faint); font-weight: 500; }

/* who made it */
.body-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.body-chip {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 15px; border-radius: 11px;
  background: rgba(163, 192, 240, .06); border: 1px solid var(--line);
  color: inherit; text-decoration: none; min-width: 0;
  transition: border-color .15s, background .15s;
}
.body-chip:hover { border-color: var(--accent-deep); background: rgba(102,163,255,.08); }
.body-chip .n { font-size: 12.5px; color: var(--text); }
.body-chip .r {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
}

/* subjects */
.tag-group { margin-bottom: 16px; }
.tag-group:last-child { margin-bottom: 0; }
.tag-group h3 {
  margin: 0 0 9px; font-size: 11px; font-weight: 600; color: var(--text-dim);
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: 11.5px; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--text-dim); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tag:hover { border-color: var(--accent-deep); color: var(--accent-soft); }
.tag.theme { background: rgba(102,163,255,.1); border-color: rgba(102,163,255,.24); color: var(--accent-soft); }

.act-empty { font-size: 12.5px; color: var(--text-faint); line-height: 1.6; margin: 0; }

/* Published acts vs files in motion — two states of the same subject, so a
   switch inside the feed rather than a separate top-level tab. */
.mode-switch { margin-bottom: 18px; }

/* act stepper, dashboard range, watchlist notes */
.act-steps { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.act-steps .muted { font-size: 11.5px; }
.dash-range { display: flex; align-items: center; gap: 14px; }

.watch-note {
  margin-top: 10px; width: 100%; font-size: 12.5px;
  background: rgba(255,255,255,.03); border: 1px dashed var(--line);
}
.watch-note:focus { border-style: solid; }

/* ============================================================
   The people who hold the pen
   ============================================================ */
.role-block { margin-bottom: 22px; }
.role-block:last-of-type { margin-bottom: 8px; }
.role-block h3 {
  margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--text);
}
.role-note { margin: 0 0 11px; font-size: 12px; color: var(--text-faint); }

.person-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.person-chip {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(163,192,240,.05), transparent 60%), var(--panel-2);
  border: 1px solid var(--line); text-decoration: none;
  transition: border-color .15s, transform .14s, box-shadow .15s;
}
.person-chip:hover {
  border-color: var(--accent-deep); transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.person-name { font-size: 13px; font-weight: 550; color: var(--text); }
.person-meta { display: flex; gap: 7px; align-items: center; font-size: 11px; }
/* The group is the political fact; the country is context behind it. */
.person-meta .grp { color: var(--accent-soft); font-weight: 600; }
.person-meta .cty { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.committee-row { display: flex; flex-wrap: wrap; gap: 8px; }
.committee-tag {
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line);
  text-decoration: none; font-size: 12px;
}
.committee-tag:hover { border-color: var(--line-strong); }
.committee-tag .code { color: var(--text); font-weight: 600; }
.committee-tag .what { color: var(--text-faint); font-size: 11px; }
/* The committee that owns the file reads differently from those consulted. */
.committee-tag.lead { border-color: rgba(102,163,255,.42); background: rgba(102,163,255,.1); }
.committee-tag.lead .code { color: var(--accent-soft); }

/* people on a committee's own page */
.body-people { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Phones. The tablet queries above shrink the desktop layout;
   this layer rearranges it. One breakpoint, chosen where the
   topbar genuinely stops fitting rather than at a device name.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
.bottomnav { display: none; }
.filters-toggle { display: none; }

@media (max-width: 760px) {
  /* --- top bar: brand, search, sync, menu — nav moves to the bottom --- */
  .topnav { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; gap: 10px; padding: 0 12px; }
  /* Search comes BACK on phones: wider layouts hid it for lack of room, and
     without it every view but the feed had no search at all. */
  .topbar-search { display: flex !important; min-width: 0; }
  .topbar-search input { width: 100%; font-size: 16px; } /* 16px stops iOS zooming */

  /* --- bottom navigation --- */
  .bottomnav {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(20, 29, 48, .92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .bottomnav .topnav-link {
    flex: 1; text-align: center; padding: 9px 4px;
    font-size: 11.5px; border-radius: 9px;
  }
  /* room for it beneath every view */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* --- feed: filters live behind a button --- */
  .filters-toggle { display: inline-flex; }
  .sidebar { display: none; }
  .layout.filters-open .sidebar { display: block; }
  .layout.filters-open .filters-toggle,
  .filters-toggle[aria-expanded="true"] { border-color: var(--accent-deep); color: var(--accent-soft); }

  /* --- hero --- */
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero-title { font-size: 30px; letter-spacing: 4px; }
  .logo-anim { width: 150px; height: 150px; }
  .search-xl { padding: 13px 16px; }
  .search-xl input { font-size: 16px; }
  .search-hint { display: none; }   /* prefix cheatsheet is a keyboard habit */
  .layout, #view-calendar, #view-watchlist, #view-act, #view-dashboard,
  #view-bodies, #view-body, #view-person, #view-procedures, #view-procedure {
    padding-left: 14px; padding-right: 14px;
  }

  /* --- results head wraps; export stays reachable --- */
  .results-head { gap: 8px; }
  .export-link { margin-left: 0; }

  /* --- calendar: chips become dots; the day panel is the reading surface --- */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 52px; padding: 4px; border-radius: 8px; }
  .cal-cell .cal-ev {
    display: inline-block; width: 7px; height: 7px; padding: 0;
    border-radius: 50%; overflow: hidden; color: transparent;
    border-width: 0; vertical-align: middle; margin: 1px;
  }
  .cal-cell .cal-ev .star { display: none; }
  .cal-more { display: block; font-size: 9px; }
  .cal-filters { gap: 8px; }
  /* the month toolbar wraps instead of walking off the right edge */
  .view-head, .cal-nav { flex-wrap: wrap; gap: 8px; }
  /* the CELEX column starved the title down to one letter */
  .agenda-row .celex { display: none; }
  .agenda-row .t { white-space: normal; }
  .cal-day-row .celex { display: none; }

  /* --- lifecycle: dots plus the one label that matters --- */
  .lc-label { display: none; }
  .lc-stage.current .lc-label { display: block; font-size: 10px; }

  /* --- act page --- */
  .act-jump {
    overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px;
  }
  .act-jump::-webkit-scrollbar { display: none; }
  .act-status { grid-template-columns: repeat(2, 1fr); }
  .act-head-row h1 { font-size: 20px; }

  /* --- people & bodies --- */
  .person-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .body-tiles { grid-template-columns: 1fr 1fr; }

  /* --- drawer and content sheets use the whole width --- */
  .drawer { width: min(100vw, 360px); }
  .page-sheet { width: 100%; border-radius: 0; min-height: 100vh; }

  /* --- fingers, not cursors --- */
  .btn, .seg-btn, select, input[type="date"] { min-height: 40px; }
  .theme-chip, .suggestion { padding: 8px 13px; }
  a, button { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 26px; }
  .dash-metrics { grid-template-columns: 1fr; }
  .body-tiles { grid-template-columns: 1fr; }
  .act-status { grid-template-columns: 1fr 1fr; }
}