/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Skip-to-main-content link — first focusable element on every page, sr-only
   by default and revealed in the top-left on keyboard focus. Lives here in
   the global stylesheet (not atlas.css) so it works on Atlas and non-Atlas
   pages alike; href target is `id="main"` on the page's <main>. Colours are
   hard-coded to the oxblood/paper brand pair rather than CSS variables so
   the rule is fully self-contained. */
.atlas-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  clip: rect(0, 0, 0, 0); /* Safari < 16 fallback */
  white-space: nowrap;
  border: 0;
  z-index: 100;
}
.atlas-skip-link:focus,
.atlas-skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  clip-path: none;
  clip: auto;
  background: #7a1f2b;
  color: #f1ece2;
  font: 12px/1 "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  outline: 0;
}

:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #66717f;
  --line: #d9dee5;
  --soft: #f7f4ef;
  --paper: #ffffff;
  --paper-warm: #fffefa;
  --civic: #1f5f6b;
  --civic-dark: #174952;
  --gold: #75520b;
  --green: #31735f;
  --red: #9f3a38;
  --blue: #2f5f9f;
  --shadow: 0 8px 26px rgba(20, 32, 45, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #eceff3;
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

a {
  color: var(--civic-dark);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--civic);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.newspaper-shell,
.page-shell {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  background: var(--soft);
  box-shadow: var(--shadow);
}

.newspaper-shell {
  min-height: 100vh;
}

.page-shell {
  min-height: 100vh;
  padding-bottom: 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: #fcfaf6;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  color: var(--ink);
  text-decoration: none;
}

.mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px;
  overflow: hidden;
}

.mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-text {
  display: grid;
  gap: 1px;
}

.brand-text strong {
  font-size: 16px;
}

.brand-text span {
  color: var(--muted);
  font-size: 12px;
}

.topbar-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 520px;
  max-width: 620px;
}

.topbar-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.topbar-search-submit {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--civic);
  border-radius: 6px;
  background: var(--civic);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.topbar-search-submit:hover {
  background: var(--civic-dark);
  border-color: var(--civic-dark);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.topbar-nav a {
  color: var(--muted);
  text-decoration: none;
}

.topbar-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 800;
}

.breadcrumb,
.inset-header,
.inset-panel {
  margin-right: 24px;
  margin-left: 24px;
}

.breadcrumb {
  margin-top: 18px;
  margin-bottom: 16px;
  color: var(--muted);
}

.page-header {
  margin-bottom: 28px;
}

.page-header h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
}

.page-header p {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--civic-dark);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.front-intro {
  display: grid;
  gap: 8px;
  padding: 28px 24px 4px;
}

.front-intro h1 {
  max-width: 90%;
  margin: 0;
  margin-bottom: 20px;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.front-intro p:last-child {
  max-width: 90%;
  margin: 0;
  color: #4d5963;
  font-size: 15px;
}

.newspaper-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 22px;
  padding: 24px;
}

.lead-card {
  display: grid;
  min-height: 292px;
  align-content: space-between;
  gap: 22px;
  padding: 24px;
  border: 1px solid #d8d1c4;
  border-radius: 8px;
  background: var(--paper-warm);
}

.lead-card h2 {
  max-width: 760px;
  margin: 16px 0 10px;
  font-size: clamp(2.1rem, 5vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.lead-card h2 a {
  color: var(--ink);
}

.lead-card p {
  max-width: 720px;
  margin: 0;
  color: #4d5963;
  font-size: 15px;
}

.lead-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mini-stack {
  display: grid;
  gap: 12px;
  /* Size to content and top-align. Without this the aside stretches to the
     (taller) left column's height and align-content: stretch balloons the
     cards. */
  align-self: start;
  align-content: start;
}

.mini-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #d8d1c4;
  border-radius: 8px;
  background: var(--paper-warm);
}

.mini-card strong {
  font-size: 14px;
}

.newspaper-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  padding: 0 24px 24px;
}

.meta,
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.meta {
  color: var(--muted);
  font-size: 12px;
}

.tags {
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  margin: 6px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #4b5563;
  font-size: 12px;
  font-weight: 650;
}

.pill.blue {
  border-color: #bfd1ea;
  background: #eef5ff;
  color: var(--blue);
}

.pill.green {
  border-color: #bfddd3;
  background: #effaf5;
  color: var(--green);
}

.pill.gold {
  border-color: #ead3a8;
  background: #fff8eb;
  color: var(--gold);
}

/* Full-width topic navigation between the Pulse intro and Pulse Changes.
   Aligns with the bands' content edges (24px inset, shell has no padding). */
.topic-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 24px 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.topic-bar-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
}

.topic-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.topic-bar .pill {
  margin: 0;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.topic-bar .pill:hover,
.topic-bar .pill:focus-visible {
  border-color: #bfddd3;
  background: #effaf5;
  color: var(--green);
}

.source-link {
  color: var(--civic-dark);
  font-size: 12px;
  font-weight: 750;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.section-title span,
.subtle {
  color: var(--muted);
  font-size: 12px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.item {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.item:last-child {
  border-bottom: 0;
}

.item-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.28;
  letter-spacing: 0;
}

.item p {
  margin: 0;
  color: #46505c;
  font-size: 13px;
}

/* Footer note inside a .card (e.g. the homepage decisions module). The last
   .item keeps its bottom border as the single divider, so this note carries no
   border of its own, just the same horizontal padding as the items. */
.card-note {
  margin: 0;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.meetings-title {
  margin-top: 22px;
}

.compact-list {
  display: grid;
  gap: 10px;
}

.meeting-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(150px, auto);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.meeting-date {
  display: grid;
  min-height: 72px;
  place-items: center;
  align-content: center;
  border-radius: 6px;
  background: #edf4f5;
  color: var(--civic-dark);
}

.meeting-date span,
.meeting-date small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.meeting-date strong {
  font-size: 24px;
  line-height: 1;
}

.meeting-row h3 {
  margin: 0;
  font-size: 17px;
}

.meeting-row p,
.meeting-status span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.meeting-status {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.topic-tile {
  min-height: 108px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.topic-tile strong {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}

.topic-tile span {
  color: var(--muted);
  font-size: 12px;
}

.section-band {
  margin-top: 24px;
  padding: 24px;
  border-top: 1px solid var(--line);
}

.section-band h2 {
  margin: 0 0 16px;
  font-size: 1.35rem;
}

.record-list,
.attachment-list {
  display: grid;
  gap: 12px;
}

.record-row,
.attachment-row {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.record-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.record-row h2,
.attachment-row h3 {
  margin: 0;
  font-size: 1.12rem;
}

.record-row p,
.attachment-row p {
  margin: 6px 0 0;
}

.record-meta,
.status-note {
  color: var(--muted);
}

.document-search-hits {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f2f6f6;
}

.document-search-hits p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.document-search-hits ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.document-search-hits li {
  color: var(--muted);
}

.document-search-hits span {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.92rem;
}

.document-search-hits mark {
  padding: 0 2px;
  background: #fff1b8;
  color: inherit;
}

.record-facts,
.detail-grid {
  display: grid;
  gap: 12px;
  margin: 0;
}

.record-facts {
  grid-template-columns: repeat(2, max-content);
  align-content: start;
}

.detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.record-facts div,
.detail-grid div {
  min-width: 0;
}

dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

dd {
  margin: 2px 0 0;
}

.search-form {
  margin-top: 0;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-warm);
}

.search-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.meeting-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 24px;
}

.meeting-controls .search-form,
.meeting-picker-form {
  margin-bottom: 0;
}

.meeting-controls .search-form {
  flex: 1 1 520px;
}

.meeting-picker-form {
  flex: 0 0 320px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.meeting-picker-form label:not(.sr-only) {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.meeting-picker-form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.meeting-picker-form select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font: inherit;
}

.meeting-picker-form input[type="submit"] {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--civic);
  border-radius: 6px;
  background: var(--civic);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-row input[type="search"] {
  min-width: min(100%, 340px);
  flex: 1 1 280px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.search-row select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font: inherit;
}

.search-row input[type="submit"],
.button-secondary {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--civic);
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
}

.search-row input[type="submit"] {
  background: var(--civic);
  color: #ffffff;
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  text-decoration: none;
}

.agenda-list,
.linked-list {
  display: grid;
  gap: 12px;
  padding-left: 24px;
}

.agenda-list li,
.linked-list li {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.agenda-list header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}

.matter-link {
  font-weight: 700;
}

.matter-pending {
  color: #75520b;
  font-weight: 650;
}

.meeting-month-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.meeting-preview {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.meeting-preview span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.meeting-preview ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.meeting-preview li span {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 400;
}

.meeting-preview-more {
  color: var(--civic-dark);
  font-size: 0.88rem;
  font-weight: 700;
}

.inline-attachments {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.inline-attachments span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.inline-attachments ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding-left: 18px;
}

.attachment-row header p {
  color: var(--muted);
  font-weight: 650;
}

.extracted-text-preview {
  margin-top: 14px;
  padding: 14px;
  background: #f2f6f6;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.extracted-text-preview h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.extracted-text-preview p {
  margin: 0;
  color: var(--ink);
}

.generated-summary {
  margin-top: 4px;
  padding: 14px;
  background: #fbfbf8;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.generated-summary header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.generated-summary h4,
.generated-summary h5 {
  margin: 0;
}

.generated-summary h4 {
  font-size: 0.95rem;
}

.generated-summary h5 {
  margin-top: 12px;
  font-size: 0.86rem;
}

.generated-summary header span,
.generated-summary-note {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.generated-summary p {
  margin: 8px 0 0;
}

.generated-summary ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
}

.generated-summary-note {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* AI meeting summary: a tinted callout card nested inside its section band so
   it shares the 24px content rhythm with the rest of the page while reading as
   clearly distinct from the white agenda cards below it. */
.event-summary {
  padding: 20px 24px;
  background: #ebf3f2;
  border: 1px solid #c6dcdb;
  border-left: 4px solid var(--civic);
  border-radius: 10px;
}

.event-summary-header {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}

.event-summary-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--civic);
}

.event-summary h2 {
  margin: 0;
  font-size: 1.2rem;
}

.event-summary h3 {
  margin: 18px 0 8px;
  font-size: 0.92rem;
}

.event-summary p {
  margin: 10px 0 0;
}

.event-summary ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
}

.event-summary .generated-summary-note {
  margin-top: 16px;
  border-top-color: #c6dcdb;
}

.empty-state {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
}

.glossary-header {
  padding-top: 28px;
}

.glossary-note {
  padding: 16px 18px;
  border: 1px solid #d8d1c4;
  border-radius: 8px;
  background: var(--paper-warm);
}

.glossary-note p {
  max-width: 900px;
  margin: 0;
  color: #4d5963;
}

.glossary-callout {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #bfddd3;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: #effaf5;
}

.glossary-callout h3 {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 1rem;
}

.glossary-callout p {
  max-width: 980px;
  margin: 0;
  color: #31483f;
}

.manual-import-notice {
  margin: 12px 0 16px;
  padding: 12px 16px;
  border: 1px solid #e8c97f;
  border-left: 5px solid #d18a1a;
  border-radius: 8px;
  background: #fff7e6;
}

.manual-import-notice p {
  margin: 0;
  color: #6b4a14;
  max-width: 980px;
}

.manual-import-notice strong {
  color: #6b4a14;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.glossary-term {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 180px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.glossary-term h3 {
  margin: 0;
  color: var(--civic-dark);
  font-size: 1rem;
}

.glossary-term p {
  margin: 0;
  color: #46505c;
}

.glossary-term code {
  font-size: 0.92em;
}

.glossary-sources {
  padding-bottom: 0;
}

.glossary-sources h2 {
  margin: 0 0 14px;
  font-size: 1.35rem;
}

.glossary-sources ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
}

.glossary-sources li {
  padding-left: 4px;
}

.glossary-sources a {
  font-weight: 700;
}

.glossary-sources span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.92rem;
}

.data-summary,
.data-section,
.data-about,
.data-empty {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.data-section h2,
.data-about h2,
.data-empty h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.data-section-note {
  margin: 12px 0 12px 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

select#pulse-body-name {
  max-width: 550px;
}

.data-summary {
  padding: 12px 20px;
  background: var(--paper-warm);
}

.data-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 0;
  font-weight: 600;
}

.data-freshness .data-source {
  margin-left: auto;
  font-weight: 500;
  color: var(--muted);
}

.data-freshness-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
}

.data-freshness-dot.green {
  background: var(--green);
}

.data-freshness-dot.amber {
  background: var(--gold);
}

.data-freshness-dot.red {
  background: var(--red);
}

.data-freshness-dot.unknown {
  background: var(--muted);
}

.data-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  margin: 0;
}

.data-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-stats dt {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.data-stats dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.data-stats dd strong {
  font-size: 1.15rem;
}

.data-stats dd span {
  color: var(--muted);
  font-size: 0.92rem;
}

.data-rate {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(170px, auto);
  align-items: baseline;
  gap: 8px 18px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.data-rate:first-of-type {
  border-top: 0;
}

.data-rate-label {
  font-weight: 600;
}

.data-rate-meter {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -1px;
  color: var(--civic);
  white-space: nowrap;
}

.data-rate-value strong {
  font-size: 1.05rem;
}

.data-rate-value span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer {
  margin: 32px 24px 0;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 10px;
  font-weight: 600;
}

.site-footer p {
  margin: 0;
}

@media (max-width: 720px) {
  .newspaper-shell,
  .page-shell {
    width: 100%;
  }

  .topbar,
  .lead-actions,
  .meeting-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .meeting-date {
    width: 72px;
  }

  .meeting-status {
    justify-items: start;
  }

  .brand {
    min-width: 0;
  }

  .topbar-search {
    width: 100%;
    max-width: none;
  }

  .topbar-nav {
    flex-wrap: wrap;
  }

  .newspaper-hero,
  .newspaper-body {
    grid-template-columns: 1fr;
    padding-right: 12px;
    padding-left: 12px;
  }

  .inset-header,
  .inset-panel,
  .breadcrumb {
    margin-right: 12px;
    margin-left: 12px;
  }

  .topic-grid {
    grid-template-columns: 1fr;
  }

  .record-row,
  .record-facts {
    grid-template-columns: 1fr;
  }

  .data-summary,
  .data-section,
  .data-about,
  .data-empty {
    margin-right: 12px;
    margin-left: 12px;
  }

  .data-freshness .data-source {
    margin-left: 0;
  }

  .data-rate {
    grid-template-columns: 1fr;
  }

  .site-footer {
    margin-right: 12px;
    margin-left: 12px;
  }
}

/* Pulse page (candidate homepage): give the selector box and the stacked
   sections room to breathe. Scoped to .pulse-page so shared components
   (e.g. the meetings search form) are untouched. */
.pulse-page .search-form {
  padding: 24px 24px 26px;
}

.pulse-page .search-form .section-title {
  margin-bottom: 16px;
}

.pulse-page .search-form .data-section-note {
  margin: 0 0 22px;
  line-height: 1.5;
}

.pulse-page .search-form label {
  margin-bottom: 12px;
}

.pulse-page .newspaper-body + .newspaper-body {
  margin-top: 12px;
}

.pulse-page .newspaper-body > div > .section-title:not(:first-child) {
  margin-top: 34px;
}

/* Monthly roundups */
.roundups-card .roundups-cta {
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--civic-dark);
}

.roundup-highlights {
  margin: 0 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.roundup-highlights li {
  color: var(--ink);
}

.roundup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.roundup-list a {
  font-weight: 600;
}

.roundup-storyline {
  color: var(--ink);
}

.roundup-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.roundup-items > li {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.roundup-items > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.roundup-item-title {
  color: var(--ink);
}

.roundup-item-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  color: var(--muted);
}

.roundup-item-blurb {
  margin: 6px 0 0;
  color: var(--ink);
}