/* Waste as Resource: this site's look. Says only what differs from site.css. */

:root {
  --accent: #1a5a3a;
  --measure: 52rem;
  --font-heading: Georgia, "Times New Roman", serif;
  --amber: #e8a735;
  --amber-ink: #2a1c05;
  --src: #1a5a3a;  --src-bg: #e7f3ec;
  --liv: #0b5c8a;  --liv-bg: #e4f1f8;
  --est: #7a4a00;  --est-bg: #fff2d6;
  --bad: #8a3b12;  --bad-bg: #fdeee3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #7bd6a3;
    --src: #7bd6a3;  --src-bg: #17301f;
    --liv: #7cc4ee;  --liv-bg: #10293a;
    --est: #ffd47a;  --est-bg: #3a2d0c;
    --bad: #ffb084;  --bad-bg: #3a1f10;
  }
}

/* --- The correction strip, full width above everything --- */
.correction {
  width: 100vw;
  margin: -2rem 0 1.5rem calc(50% - 50vw);
  padding: 0.55rem 1.25rem;
  background: var(--amber);
  color: var(--amber-ink);
  font-size: 0.9rem;
  text-align: center;
}
.correction a { color: var(--amber-ink); font-weight: 600; }

/* --- Header: logo with the diagonal ribbon, wordmark, nav, search --- */
html { scroll-padding-top: 6rem; } /* a #link lands below the bar, not under it */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.75rem;
  margin-bottom: 2rem;
  padding-top: 0.6rem;
  background: var(--bg);
}
.menu-toggle {
  display: none;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { background: var(--surface); }
.brand {
  position: relative;
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: #0a0604;
}
.brand img { display: block; width: 100%; height: 100%; }
.ribbon {
  position: absolute;
  top: 11px;
  left: -24px;
  width: 96px;
  background: var(--amber);
  color: var(--amber-ink);
  font: 700 8px/15px var(--font-body);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-45deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* a longer word on the ribbon (Welsh): a little smaller */
.ribbon-long { font-size: 6.4px; letter-spacing: 0.03em; }
.wordmark { color: var(--text); font-weight: 700; line-height: 1.2; text-decoration: none; }
.wordmark small { display: block; color: var(--muted); font-size: 0.8rem; font-weight: 400; }

/* On a phone the navigation takes its own row under the logo, search stays beside the wordmark,
   and the language switcher comes last, so no word of the nav is broken across lines. */
/* Below this the links no longer fit on one line beside the logo and search. */
@media (max-width: 64rem) {
  .topbar { row-gap: 0.4rem; }
  .topbar .brand { zoom: 0.8; }
  .topbar .wordmark { flex: 1; font-size: 0.95rem; }
  .menu-toggle { order: 1; }
  .topbar .search { order: 2; }
  .topbar > nav { flex: 1 1 100%; order: 3; }
  .topbar .languages { order: 4; }
  /* With the script running, the links fold behind Menu. Without it they are all shown. */
  body.menu-js .menu-toggle { display: inline-block; }
  body.menu-js .topbar > nav, body.menu-js .topbar .languages { display: none; }
  body.menu-js .topbar.menu-open > nav { display: block; }
  body.menu-js .topbar.menu-open .languages { display: flex; }
  body.menu-js .topbar.menu-open { max-height: calc(100vh - 1rem); overflow-y: auto; }
}

/* --- Footer --- */
.site-footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
.site-footer p { margin: 0.3rem 0; }

/* --- Figures: sourced, live or estimate, never unlabelled --- */
.chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.55rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.chip.sourced, .chip.ffynhonnell { background: var(--src-bg); color: var(--src); }
.chip.live, .chip.byw { background: var(--liv-bg); color: var(--liv); }
.chip.estimate, .chip.amcangyfrif { background: var(--est-bg); color: var(--est); }
.chip.verdict { background: var(--bad-bg); color: var(--bad); }

.items { display: block; }
.figure { margin: 1.25rem 0; padding: 0.9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.figure h3, .figure h1 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.figure p { margin: 0.3rem 0; }
.figure-value strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.figure .period, .figure .conf { margin-left: 0.6rem; color: var(--muted); font-size: 0.85rem; }
.figure .note, .figure .attribution, .figure .source { font-size: 0.9rem; color: var(--muted); }
.figure .attribution::before { content: "Whose claim: "; font-weight: 600; }
.figure .ref::before { content: " · "; }
.figure .ref:empty::before { content: none; }
.figure .working { margin-top: 0.5rem; padding: 0.45rem 0.7rem; border-radius: var(--radius); background: var(--est-bg); color: var(--text); font-size: 0.9rem; }
.figure .working::before { content: "How we got this: "; font-weight: 600; }
.figure :is(.note, .attribution, .working):empty { display: none; }
.figure .source:has(a[href=""]) { display: none; }
.figure-page h1 { font-size: 1.5rem; }

/* --- Retired claims --- */
.claim { margin: 1rem 0; padding: 0.8rem 1.1rem; border-left: 4px solid var(--amber); background: var(--surface); font-style: italic; }
.statement { margin: 1rem 0; padding: 0.9rem 1.1rem; border-left: 4px solid var(--amber); background: var(--surface); }
.meta { color: var(--muted); font-size: 0.9rem; }
del.retracted { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.noscript { margin: 0.5rem 0; }

/* --- The live map and lists on the home page --- */
.live-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin: 1rem 0; }
@media (min-width: 46rem) { .live-grid { grid-template-columns: 18rem minmax(0, 1fr); } }
.wales-map image { opacity: 0.14; }
.wales-map { display: block; width: 100%; max-width: 20rem; height: auto; margin: 0 auto; background: var(--surface); border-radius: var(--radius); }
.wales-map .d { fill: var(--muted); opacity: 0.55; }
.wales-map .recent { fill: var(--amber); opacity: 0.95; }
.wales-map .on { fill: #e5484d; stroke: #fff; stroke-width: 1.5; }
.wales-map .bw-excellent { fill: #22c55e; }
.wales-map .bw-good { fill: #60a5fa; }
.wales-map .bw-sufficient { fill: #fbbf24; }
.wales-map .bw-poor { fill: #ef4444; }
.wales-map .bw { opacity: 0.8; stroke: var(--bg); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.6rem 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--muted); }
.legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; border-radius: 50%; vertical-align: -1px; }
.big { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
ol.sites { padding-left: 1.3rem; }
ol.sites li { margin: 0.3rem 0; }
ol.sites .hours { font-variant-numeric: tabular-nums; font-weight: 700; margin-left: 0.4rem; }
.pending { color: var(--muted); font-style: italic; }

@media (prefers-color-scheme: dark) { .wales-map image { filter: invert(1); opacity: 0.18; } }

/* --- Tables of numbers --- */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer-email { cursor: pointer; text-decoration: underline dotted; }

/* Seven links on one line at laptop width: a little tighter than the base. */
.topbar ul.nav { gap: 0.25rem 1.1rem; font-size: 0.95rem; }