/* ── Fonts ────────────────────────────────────────────────────────────────────
   IBM Plex Sans  400/600  — headings, UI chrome
   Source Serif 4 400/ital — body prose (About page, homepage tagline)
   IBM Plex Mono  500      — all tags, dates, labels, nav, tracker chrome
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Custom properties ────────────────────────────────────────────────────── */

:root {
  --paper:    #F6F7F5;
  --ink:      #12181F;
  --teal:     #0F6E56;
  --hairline: #D7DBDD;

  --sans:  'IBM Plex Sans',  system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono:  'IBM Plex Mono',  'Courier New', monospace;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

nav {
  padding: 1.25rem 0 0;
}

nav .nav-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 2rem;
}

nav .site-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

nav a {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

nav a:hover {
  color: var(--teal);
  text-decoration: none;
}

nav a.active {
  color: var(--teal);
}

/* ── Nav rule ─────────────────────────────────────────────────────────────── */

nav::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--teal);
}

/* ── Page layout ──────────────────────────────────────────────────────────── */

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

footer {
  border-top: 1px solid var(--hairline);
  padding: 1.25rem 0;
  margin-top: 3rem;
}

footer .footer-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-linkedin {
  display: flex;
  align-items: center;
  color: #999;
}

.footer-linkedin:hover {
  color: var(--teal);
  text-decoration: none;
}

/* ── Typography ───────────────────────────────────────────────────────────── */

h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

p {
  margin-bottom: 1rem;
}

ul, ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.3rem;
}

hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}

/* ── Homepage hero ────────────────────────────────────────────────────────── */

.hero {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2rem;
}

.hero h1 {
  font-size: 2.75rem;
  line-height: 1.08;
}

.hero .tagline {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.75;
  color: #555;
  margin-top: 0.85rem;
  margin-bottom: 0;
}

/* ── Homepage sections ────────────────────────────────────────────────────── */

.home-section {
  margin-bottom: 0.5rem;
}

/* Section masthead ("Policy" / "Politics" on the homepage, "Open
   Consultations" / "Tracker" on policy.html) — reuses the site's existing
   mono/uppercase/letter-spaced "data chrome" language already applied to
   tags, nav, and tracker-meta, rather than a new style, but sized larger
   than that meta-text convention so it reads clearly as a masthead. */
.section-heading {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}

/* Trailing descriptive clause folded into the same heading line (e.g.
   "Policy — Latest Publications from DCMS, DBIST and Ofcom") — a full
   sentence in uppercase tracked mono reads as a wall of shouting, so the
   detail half drops the caps/tracking/weight and picks up a muted colour,
   leaving only the short label ("Policy") as the bold masthead. */
.section-heading-detail {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: #888;
}

.home-item {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ── Tracker page ─────────────────────────────────────────────────────────── */

.tracker-meta {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 1.5rem;
}

.source-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.source-filters button {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.source-filters button:hover,
.source-filters button.active {
  background: var(--teal);
  color: var(--paper);
  border-color: var(--teal);
}

.tracker-notice {
  border-left: 3px solid var(--teal);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #777;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

#feed-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feed-item {
  border-top: 1px solid var(--hairline);
  padding: 1rem 0;
}

.feed-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.feed-item-meta {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: baseline;
}

.feed-item-meta .source-tag {
  color: var(--ink);
}

.feed-item-meta .type-tag {
  color: #999;
}

.feed-item h3 {
  margin-bottom: 0.3rem;
}

.feed-item h3 a {
  color: var(--ink);
  text-decoration: none;
}

.feed-item h3 a:hover {
  color: var(--teal);
}

/* Politics tracker: combined member-name + topic headline/link, coloured
   by house — deliberately muted/deeper than the deadline bar's bright
   red/amber/green so it can't be misread as a status indicator. The
   House word in the meta line below stays plain (no colour, no
   underline), matching the other meta-line elements. */
.feed-item h3.pq-house-commons a {
  color: #2f5233;
  text-decoration: underline;
}

.feed-item h3.pq-house-lords a {
  color: #6d1f2f;
  text-decoration: underline;
}

/* Sitting status — small coloured dot, deliberately muted/distinct from
   both the deadline bar's bright red/green and the pq-house colours
   above, so it reads as its own signal rather than a house indicator. */
.sitting-status-line {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sitting-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sitting-dot-sitting {
  background: #3d7a52;
}

.sitting-dot-recess {
  background: #9c3b3b;
}

.feed-item p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
}

.no-results {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #aaa;
}

/* ── Deadline bar ─────────────────────────────────────────────────────────────
   Status colours (green/amber/red) are functional and unchanged.
   The track background uses --hairline to match the rest of the palette.
   ─────────────────────────────────────────────────────────────────────────── */

.deadline-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.deadline-bar-track {
  flex: 1;
  height: 6px;
  background: var(--hairline);
  border-radius: 3px;
  overflow: hidden;
}

.deadline-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.deadline-bar-fill.bar-green { background: #4caf50; }
.deadline-bar-fill.bar-amber { background: #e08c00; }
.deadline-bar-fill.bar-red   { background: #c62828; }

.deadline-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
}

.deadline-label.deadline-past {
  color: #c62828;
}

/* ── Bill stage tracker ───────────────────────────────────────────────────────
   A continuous row of pill-shaped segments — deliberately NOT the deadline
   bar's time-based percentage fill or red/amber/green status colours, since
   a bill's position in the legislative process isn't a countdown to a
   deadline. Uses the site's neutral chrome tokens (--ink for reached
   stages, --hairline for upcoming ones) rather than a fourth
   semantically-loaded colour family, so "progress" reads as structural
   rather than urgency-coded. The combined current-stage/next-milestone
   status line lives in the item's normal .feed-item-meta above this
   tracker, not a separate caption here.
   ─────────────────────────────────────────────────────────────────────────── */

.stage-tracker {
  margin-top: 0.75rem;
}

.stage-tracker-track {
  display: flex;
  align-items: center;
  gap: 2px;
}

.stage-dot {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--paper);
  border: 1px solid var(--hairline);
}

.stage-dot-complete {
  background: var(--ink);
  border-color: var(--ink);
}

.stage-dot-current {
  height: 9px;
}

/* House colouring — only ever applied to a stage once it's actually been
   reached (see renderStageTracker's `reached` check); upcoming stages
   never get these classes, so they stay neutral hollow segments
   regardless of which House they'll eventually belong to. Reuses the
   exact same colours as the pq-house-commons/lords headline classes
   elsewhere on the Politics tracker, rather than introducing a new hue.
   Declared after .stage-dot-complete/.stage-dot-current so they take
   priority when combined with either. */
.stage-dot-commons {
  background: #2f5233;
  border-color: #2f5233;
}

.stage-dot-lords {
  background: #6d1f2f;
  border-color: #6d1f2f;
}

.stage-dot-upcoming {
  background: var(--paper);
  border-color: var(--hairline);
}

@media (max-width: 600px) {
  .deadline-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }
}

/* ── Load more ────────────────────────────────────────────────────────────── */

.load-more-wrap {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

#load-more-btn {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--teal);
  background: var(--paper);
  color: var(--teal);
  cursor: pointer;
}

#load-more-btn:hover:not(:disabled) {
  background: var(--teal);
  color: var(--paper);
}

#load-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#load-more-status {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #999;
}

/* ── Analysis page ────────────────────────────────────────────────────────── */

.analysis-intro {
  font-family: var(--serif);
  color: #555;
  margin-bottom: 2rem;
}

.analysis-item {
  border-top: 1px solid var(--hairline);
  padding: 1.5rem 0;
}

.analysis-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.analysis-item-meta {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.4rem;
}

.analysis-item h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.analysis-item h2 a {
  color: var(--ink);
  text-decoration: none;
}

.analysis-item h2 a:hover {
  color: var(--teal);
}

.analysis-item .excerpt {
  font-family: var(--serif);
  color: #555;
  font-size: 0.95rem;
}

.placeholder-message {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #aaa;
  border: 1px dashed var(--hairline);
  padding: 2rem;
  text-align: center;
}

/* ── About page ───────────────────────────────────────────────────────────── */

.about-content p,
.about-content li {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.8;
}

.about-content li {
  margin-bottom: 0.5rem;
}

.about-content h2 {
  font-size: 1.3rem;
}

.about-content em {
  font-style: italic;
}

/* ── Wide layout (homepage + Tracker) ────────────────────────────────────────
   About page stays at 800px — prose reads better narrow.
   Homepage and Tracker widen to 1050px: these pages are scanned as lists,
   not read as prose, so the standard readability width doesn't apply.
   The extra room lets headlines sit on fewer lines and gives deadline bars
   meaningful space to function as progress indicators.
   ─────────────────────────────────────────────────────────────────────────── */

body.wide nav .nav-inner,
body.wide main,
body.wide footer .footer-inner {
  max-width: 1050px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .hero h1 {
    font-size: 2rem;
  }
}