/* Theme variables */
:root {
  --bg: #0b1020;
  --fg: #f7f7fb;
  --muted: #c7c9d1;
  --accent: #ffd24d;
  --error: #b91c1c;
  --uk-labour-red: #d7263d;
}

/* Base layout */
body {
  margin: 0;
  background: linear-gradient(180deg, #f4ece4 0, #f4ece4 180px, #ffffff 210px);
  color: #111;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Page backgrounds by type */
.page-home {
  background: linear-gradient(180deg, #f4ece4 0, #f4ece4 180px, #ffffff 210px);
  background: #f4ece4;
}
.page-generic {
  /* background: linear-gradient(180deg, #eef2ff 0, #eef2ff 180px, #ffffff 260px); */
  background: #f4ece4;
}
.page-report {
  background: linear-gradient(180deg, #f4f8f4 0, #f4f8f4 180px, #ffffff 260px);
}
.page-posts-index {
  /* background: linear-gradient(180deg, #fef3c7 0, #fef3c7 180px, #ffffff 260px); */
  background: #f4ece4;
}

header.site-header {
  position: sticky;
  top: 0;
  background: #eee;
  color: #111;
  padding: .5rem 1rem;
  z-index: 2;
}
header.site-header {
  /* Oxford Blue */
  background: linear-gradient(180deg, #002147 0%, #0d1b2a 100%);
  color: #f4ece4;

  /* Brick */
  background: linear-gradient(180deg, #7f1d1d 0%, #b91c1c 100%);
  color: #f4ece4;

  /* Racing Green */
  background: linear-gradient(180deg, #0b3d2e 0%, #145c3f 100%);
  color: #f4ece4;

  /* Deep Navy Blue */
  background: linear-gradient(180deg, #2b3a67 0%, #1b2432 100%);
  color: #f4ece4;
}
header .nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

header .brand {
  font-weight: 700;
  color: #000;
  text-decoration: none;
}

main {
  max-width: unset;
  margin: 2rem 0;
  padding: 0 1rem;
  flex: 1 0 auto;
}

/* Homepage hero layout: logo left, text right */
.home-hero {
  display: grid;
  grid-template-columns: minmax(160px, 320px) 1fr;
  align-items: center;
  gap: 2rem;
  text-align: left;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.home-hero img { max-width: 100%; height: auto; display: block; }
.home-hero .title {
  font-size: 42px; 
  line-height: 1.12; 
  margin: 0; 
  margin-bottom: .5rem; 
  color: #2b3a67;
}
.home-hero .subtitle { color: #6b7280; margin: .25rem 0 0 0; font-weight: 600; margin-left: 3px; }
.home-hero .lead { color: #6b7280; font-size: 18px; line-height: 1.6; margin: .5rem 0 0 0; margin-left: 3px;}
@media (max-width: 640px) {
  .home-hero { grid-template-columns: 1fr; text-align: center; }
}

/* Report list grid */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: .5rem 0 1rem;
}
.report-card {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .75rem .9rem;
  background: #fff;
  transition: box-shadow .15s ease, transform .05s ease;
}
.report-card a { color: inherit; border-bottom: none; }
.report-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.report-card .card-title { font-weight: 600; margin: 0 0 .25rem 0; }
.report-card .card-meta { color: #6b7280; font-size: .9em; }

/* Disabled but clickable appearance */
.report-card.is-disabled,
.report-card.placeholder {
  opacity: .88; 
  filter: brightness(0.8);
  /* background: #f7f7f7; */
}
.report-card.placeholder::after,
.report-card.is-disabled::after {
  content: "Not yet available";
  display: inline-block;
  margin-top: .5rem;
  font-size: .78em;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: .35rem;
  padding: .15rem .5rem;
}

section {
  margin: 2.5rem 0;
}

section > h1,
section > h2 {
  scroll-margin-top: 4rem;
}

.tag {
  background: #f0f2f6;
  border-radius: .25rem;
  padding: .1rem .35rem;
  margin: 0 .15rem;
  font-size: .85em;
  color: #374151;
}

.tag-codes code {
  background: #f0f2f6;
  border-radius: .25rem;
  padding: .1rem .35rem;
  margin: 0 .15rem;
  font-size: .85em;
  color: #374151;
}

.footnotes {
  font-size: .9em;
  color: #374151;
  border-top: 1px solid #e5e7eb;
  margin-top: 2rem;
  padding-top: 1rem;
}

footer.site-footer {
  border-top: 1px solid #e5e7eb;
  margin-top: 3rem;
  padding: 1rem;
  color: #374151;
  font-size: .9em;
  text-align: center;
}

/* Citations */
.citation {
  display: inline-block;
  text-decoration: none;
  margin: 0 .1rem;
  color: #111;
  border: 1px solid #d1d5db;
  border-radius: .25rem;
  padding: .05rem .25rem;
  font-size: .85em;
  line-height: 1;
}
.citation-arrow { margin-right: .25rem; }
.citation-text { display: inline; color: #374151; font-size: .9em; }
.citations-collapsed .citation-text { display: none; }

/* Button & helper UI */
.btn { padding: .25rem .5rem; border-radius: .25rem; border: 1px solid #e5e7eb; background: transparent; color: #111; cursor: pointer; font-size: .9em; }
.btn:hover { background: #f8fafc; }
.muted { color: #6b7280; margin-left: .5rem; font-size: .9em; }
.citations-toggle-row { display: flex; align-items: center; gap: .5rem; }

.citation:hover {
  background: #f3f4f6;
}

details[class^="citations-level-"] {
  margin: 1rem 0;
}

details[class^="citations-level-"] > summary {
  cursor: pointer;
  font-weight: 600;
}

summary.section-summary > h1 {
  display: inline-block;
  margin: 0;
  margin-left: 1rem;
  padding: 0;
}

details .details-body {
  padding: .5rem 0 0 0;
}

.citations-controls {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin: .5rem 0;
}

.citations-table {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0 1rem;
}

.citations-table th,
.citations-table td {
  border: 1px solid #e5e7eb;
  padding: .4rem .5rem;
  text-align: left;
}

.citations-table code {
  background: #f3f4f6;
  border-radius: .2rem;
  padding: .05rem .3rem;
}

/* Report layout */
.report-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 2rem;
  align-items: start;
  overflow: hidden;
}

.report-sidebar {
  position: sticky;
  top: 24px;
  border-right: 1px solid #e5e7eb;
  padding-right: 1rem;
}

.report-sidebar .sidebar-toggle {
  display: none;
  margin: .5rem 0;
}

.report-sidebar ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.report-sidebar li {
  margin: .25rem 0;
}

.report-sidebar a {
  text-decoration: none;
  color: #111;
  word-break: break-word;
}

.report-content {
  min-width: 0;
}

.report-title {
  font-size: 2.25rem;
  margin: 0 0 .25rem 0;
}
.report-subtitle { margin: 0 0 1rem 0; color: #6b7280; font-size: 1rem; }
.report-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0 1rem; }
.report-heading { max-width: 80ch; }
.title-controls { white-space: nowrap; }
.font-switch { display: inline-flex; align-items: center; gap: .4rem; }
.font-icon { font-weight: 700; }

/* Font themes */
.font-theme-default { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
.font-theme-serif { font-family: Georgia, "Times New Roman", Times, serif; }
.font-theme-accessible { font-family: 'OpenDyslexic', system-ui, -apple-system, sans-serif; }
.font-theme-sans { font-family: Arial, Helvetica, sans-serif; }

/* Apply theme to main content */
body.font-theme-default #content,
body.font-theme-serif #content,
body.font-theme-accessible #content,
body.font-theme-sans #content { font: inherit; }

/* Stack title and controls on small screens */
@media (max-width: 720px) {
  .report-header { flex-direction: column; align-items: stretch; gap: .5rem; }
  .title-controls { align-self: stretch; width: 100%; display: flex; justify-content: flex-end; }
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 50;
  display: none;
  padding: .5rem .75rem;
  border-radius: .5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  cursor: pointer;
}

.back-to-top.show {
  display: inline-block;
}

@media (max-width: 900px) {
  .back-to-top {
    padding: .4rem .5rem;
    border-radius: .4rem;
    min-width: 36px;
    text-align: center;
  }
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .report-layout {
    grid-template-columns: 1fr;
  }
  .report-sidebar {
    position: relative;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
  }
  .report-sidebar .sidebar-toggle {
    display: inline-block;
  }
  .report-sidebar[aria-hidden="true"] ul {
    display: none;
  }
}

/* Sidebar header layout */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.sidebar-header h3 { margin-bottom: 0; }
.sidebar-controls { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.sidebar-toggle {
  margin-left: auto;
}

#sidebar-state { display: none; }
@media (max-width: 900px) {
  #sidebar-state { display: inline-block; margin-left: .5rem; }
}

/* Sidebar controls visibility */
.report-sidebar[aria-hidden="true"] .sidebar-global-controls {
  display: none;
}

.report-sidebar[aria-hidden="false"] .sidebar-global-controls {
  display: block;
  margin: .25rem 0 .5rem;
}

.citations-controls {
  float: right;
}
.sidebar-global-controls {
  text-align: left;
}
.citations-controls button,
.sidebar-global-controls button {
  padding: .25rem .5rem;
  border-radius: .25rem;
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #111;
  cursor: pointer;
  font-size: .9em;
}

/* Outcome score colouring */
.score--2 { background: #fee2e2; }
.score--1 { background: #ffe8cc; }
.score-0  { background: #fff; }
.score-1  { background: #e9f7ef; }
.score-2  { background: #d1fae5; }
.score-help { padding: .1rem .25rem; }

.report-sidebar li.policy { border-radius: .25rem; padding: .1rem .25rem; }

/* Score chip before policy items */
.score-chip {
  display: inline-block;
  width: 1.75rem; /* fixed width for alignment */
  margin-right: .35rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #374151;
}

.policy-card {
  padding-top: 40px;
  page-break-before: always;
  break-before: page;
  -webkit-region-break-inside: avoid;
}

/* Score summary panel */
.score-summary {
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: 1rem;
  margin: 0 0 1.5rem 0;
  background: #fafafa;
}
.score-summary-title { margin: 0 0 .5rem 0; }
.score-totals { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.score-groups { width: 100%; border-collapse: collapse; }
.score-groups th, .score-groups td { border: 1px solid #e5e7eb; padding: .4rem .5rem; text-align: left; }
.group-col { width: 66%; }
.score-col { width: 34%; text-align: right; }
.group-badge { text-align: right; }
.score-badge { display: inline-block; min-width: 3rem; text-align: center; border-radius: .5rem; padding: .2rem .4rem; background: #f0f2f6; font-weight: 600; }

/* Score summary two-column layout */
.score-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
.score-grid-left { min-width: 0; }
/* Adjust right summary column and explainer */
.score-grid-right { min-width: 0; display: block; }
.overall-score { width: 100%; }
.overall-explainer { font-size: .95rem; color: #374151; margin-bottom: .75rem; }

/* Overall badge sub-panel */
.overall-badge-wrapper {
  display: block;
  margin: .5rem 0 .75rem 0;
  padding: .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #fff;
  text-align: center;
}
.overall-badge-wrapper .overall-badge {
  display: inline-block;
  margin: 0 auto .5rem auto;
}
.overall-badge-wrapper .overall-meta {
  margin-top: 0;
  text-align: center;
  display: grid;
  gap: .25rem;
  justify-items: center;
}

@media (max-width: 900px){
  .score-grid { grid-template-columns: 1fr; }
  .score-grid-right { justify-content: flex-start; }
}

/* Score scale colouring (-2..+2) */
.score-badge.score-scale--2 { background: #fee2e2; color: #7f1d1d; }
.score-badge.score-scale--1 { background: #ffe8cc; color: #7c2d12; }
.score-badge.score-scale-0  { background: #f3f4f6; color: #111827; }
.score-badge.score-scale-1  { background: #e9f7ef; color: #065f46; }
.score-badge.score-scale-2  { background: #d1fae5; color: #065f46; }

/* Circular overall badge */
.score-badge--overall {
  border-radius: 999px;
  width: 4.5rem;
  height: 4.5rem;
  line-height: 4.5rem;
  font-size: 1.5rem;
  display: inline-block;
}

/* Overall total score range bar */
.score-range { position: relative; margin-top: .75rem; margin-bottom: .75rem; }
.score-range__bar { height: .75rem; border-radius: .5rem; background: linear-gradient(90deg, #dc2626 0%, #f3f4f6 50%, #059669 100%); }
.score-range__marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid #111; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }

header.site-header a,
.site-footer a,
#content a,
.report-content a {
  color: #0a66c2;
  text-decoration: none;
  border-bottom: 1px solid rgba(10,102,194,.35);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  /* padding: .05rem .1rem; */
  border-radius: .2rem;
}

/* RSS link alignment */
.rss-link { display: inline-flex; align-items: center; gap: .35rem; }
.rss-icon { height: 18px; width: 18px; display: inline-block; vertical-align: middle; }
header.site-header a:visited,
.site-footer a:visited,
#content a:visited,
.report-content a:visited {
  color: #0a66c2;
}

/* Group link styling in score table */
.group-link {
  color: #0a66c2;
  text-decoration: none;
  border-bottom: 1px solid rgba(10,102,194,.35);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  padding: 0;
  border-radius: .2rem;
}
.group-link:visited {
  color: #0a66c2; /* keep consistent, no purple */
}
.group-link:hover {
  color: #084e9b;
  border-bottom-color: rgba(8,78,155,.6);
  background-color: rgba(10,102,194,.08);
}
.group-link:focus-visible {
  outline: 2px solid #0a66c2;
  outline-offset: 2px;
  text-decoration: none;
}


.citation.citation-error {
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}

.report-title-highlight {
  color: var(--uk-labour-red);
}

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 16px; top: 12px; width: auto; height: auto; padding: .4rem .6rem; background: #fff; border: 2px solid #0a66c2; border-radius: .25rem; z-index: 1000; }

/* Dark mode (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0e1116 !important;
    background: linear-gradient(180deg, #0e1116 0, #0e1116 160px, #111418 240px) !important; 
    color: #e6e6ea;
  }
  
  .page-home {
    background: #0e1116 !important;
  }
  .page-generic {
    background: #0e1116 !important;
  }
  .page-report {
    background: linear-gradient(180deg, #0e1116 0, #0e1116 160px, #111418 240px) !important;
  }
  .page-posts-index {
    background: #0e1116 !important;
  }
  
  header.site-header { 
    background: #111418; 
    color: #e6e6ea; 
  }
  
  .report-card { 
    background: #0f1318; 
    border-color: #2a2f39; 
  }
  .report-card:hover { 
    box-shadow: 0 2px 12px rgba(0,0,0,.35); 
  }
  
  .report-sidebar { 
    border-right-color: #262a33; 
  }
  .report-sidebar a { 
    color: #e6e6ea; 
  }
  
  .report-content a, #content a, header.site-header a, .site-footer a { 
    color: #7db9ff; 
    border-bottom-color: rgba(125,185,255,.35); 
  }
  
  /* Policy links in score-colored backgrounds need different colors */
  .policy.score--2 a { color: #dc2626 !important; border-bottom-color: rgba(220,38,38,.4); }
  .policy.score--1 a { color: #ea580c !important; border-bottom-color: rgba(234,88,12,.4); }
  .policy.score-0 a { color: #1c589c !important; border-bottom-color: rgba(125,185,255,.35); }
  .policy.score-1 a { color: #059669 !important; border-bottom-color: rgba(5,150,105,.4); }
  .policy.score-2 a { color: #047857 !important; border-bottom-color: rgba(4,120,87,.4); }
  
  .score-summary { 
    background: #161a20; 
    border-color: #2a2f39; 
  }
  .overall-badge-wrapper { 
    background: #0f1318; 
    border-color: #2a2f39; 
  }
  .citations-table th, .citations-table td { 
    border-color: #2a2f39; 
  }
  .back-to-top { 
    background: #0f1318; 
    color: #e6e6ea; 
    border-color: #2a2f39; 
  }
  .overall-explainer { 
    color: #cbd5e1; 
  }
  .score-help { 
    color: #464a4f; 
  }
  
  /* Citation chips */
  .citation { 
    color: #e6e6ea; 
    border-color: #2a2f39; 
    background: transparent; 
  }
  .citation:hover { 
    background: #0f1318; 
  }
  .citation-text { 
    color: #9aa3ad; 
  }
  
  /* Buttons */
  .btn,
  .sidebar-global-controls button,
  .citations-controls button {
    background: transparent;
    color: #e6e6ea;
    border-color: #2a2f39;
  }
  .btn:hover,
  .sidebar-global-controls button:hover,
  .citations-controls button:hover {
    background: #0f1318;
  }
  .btn:focus-visible,
  .sidebar-global-controls button:focus-visible,
  .citations-controls button:focus-visible {
    outline: 2px solid #7db9ff;
    outline-offset: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

header.site-header a:visited,
header.site-header a {
  /* border-bottom: none; */
  color: #f6eee2;
}
header.site-header a:hover {
  color: #fff9ea;
  border-bottom-color: rgba(10,102,194,.35);
  background-color: rgba(10,102,194,.08);
}
header.site-header a:focus-visible {
  outline: 2px solid #7db9ff;
  outline-offset: 2px;
  text-decoration: none;
}