/* 01 — DESIGN TOKENS & SITE STYLES
   Base and derived colours for the household waste dashboard. */
/* Nine editable base colours; all other colours are aliases or derived. */
:root {
  /* Page: paper, text, supporting text, rules */
  --paper: #faf9f6;
  --ink: #302d29;
  --muted: #706960;
  --line: #d6d0c7;

  /* Data: interpolation endpoints and a distinct no-data state */
  --chart-dark: #48443f;
  --chart-light: #c9c2b9;
  --chart-empty: #f1eee9;

  /* Editorial annotations */
  --accent-blue: #367bc0;
  --accent-orange: #e58b4b;
  --accent-green: #73a581;
  --highlight-opacity: 40%;
  --highlight-height: 40%;
  --highlight-duration: 320ms;

  /* Derived roles: not independently selected colours */
  --white: var(--paper);
  --pale: color-mix(in srgb, var(--ink) 5%, var(--paper));
  --chart-selection: var(--ink);
  --chart-cell-stroke: var(--line);
  --ui-disabled-text: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --ui-disabled-fill: var(--pale);
  --ui-disabled-edge: var(--line);
  --ui-legend-muted: var(--chart-light);
  --ui-rule-light: var(--line);
  --ui-shadow: rgb(0 0 0 / 13%);
  --ui-error: #824d46; /* Reserved semantic error colour */
  --tooltip-background: var(--ink);
  --tooltip-text: var(--paper);
  --tooltip-muted: color-mix(in srgb, var(--paper) 75%, var(--ink));
  --tooltip-rule: color-mix(in srgb, var(--paper) 20%, transparent);
  --tooltip-rule-strong: color-mix(in srgb, var(--paper) 40%, transparent);
  --tooltip-rule-footer: var(--tooltip-rule-strong);
  --publication-fill: var(--pale);
  --publication-edge: var(--line);
  --chart-mid: color-mix(in lab, var(--chart-dark) 50%, var(--chart-light));
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--chart-empty);
  color: var(--ink);
  font-family: "Source Serif 4",Georgia,serif;
}
.page {
  background: var(--paper);
  max-width: 1150px;
  margin: auto;
  padding: 40px clamp(18px,4vw,48px) 65px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.sans,.eyebrow,.meta,.num,.unit,.controls,.caption,details,.foot,.tooltip {
  font-family: "Source Sans 3",Arial,Helvetica,sans-serif;
}
.mast {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 17px;
  gap: 15px;
}
.mast-left { min-width:0; }
.mast .meta { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.mast .meta-stack { display:flex; flex-direction:column; align-items:flex-end; line-height:1.65; white-space:nowrap; }
.mast .meta .recycling-icon { width:23px; height:23px; margin:0; margin-left:3px; vertical-align:inline-block; vertical-align:-4px; }
.eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}
h1 {
  font-size: clamp(28px,3.5vw,43px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 15px 0 0;
}
.mast h1 span {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.mast h1 span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.03em;
  right: -0.03em;
  bottom: -0.02em;
  height: 0.4em;
  background: color-mix(
    in srgb,
    var(--mark-colour) var(--highlight-opacity),
    transparent
  );
  clip-path: polygon(0 12%, 98% 0, 100% 82%, 2% 100%);
  pointer-events: none;
}
.mast h1 .title-blue {
  --mark-colour: var(--accent-blue);
}
.mast h1 .title-blue::after {
  transform: rotate(2deg);
}
.mast h1 .title-orange {
  --mark-colour: var(--accent-orange);
}
.mast h1 .title-orange::after {
  transform: rotate(1deg);
}
.mast h1 .title-green {
  --mark-colour: var(--accent-green);
}
.mast h1 .title-green::after {
  transform: rotate(-2deg);
}
.meta {
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
/* 03 — PUBLICATION BAND (self-contained; mobile rules kept adjacent) */
/* Publication record */
.publication-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  margin: 0 0 18px;
  padding: 7px 0;
  background: var(--publication-fill);
  color: var(--ink);
  font: 11px "Source Sans 3", Arial, sans-serif;
  border-left: 2px solid var(--publication-edge);
  border-right: 2px solid var(--publication-edge);
}

.publication-band[hidden] {
  display: none;
}

.publication-band-cell {
  min-width: 0;
  padding: 0 13px;
  white-space: nowrap;
}

.publication-band-cell:nth-child(1) {
  text-align: left;
}

.publication-band-cell:nth-child(2) {
  text-align: center;
}

.publication-band-cell:nth-child(3) {
  text-align: right;
}

.publication-band-heading {
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
}

.publication-label {
  color: var(--muted);
}

.publication-band strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

@media (max-width: 780px) {
  .publication-band {
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 0 0 18px;
    padding: 8px 0;
  }

  .publication-band-cell {
    text-align: left !important;
  }
}

.atlas-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
  margin-bottom: 22px;
  align-items: stretch;
}
.module {
  min-width: 0;
  position: relative;
}
.wide {
  grid-column: span 2;
}
.narrow {
  grid-column: span 1;
}
.module-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.num,.unit {
  font-size: 10px;
  color: var(--muted);
}
h2 {
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -.02em;
  margin: 0;
}
.unit {
  white-space: nowrap;
}
.module-header h2 { font-size:20px; }
.controls {
  font-size: 11px;
  margin-bottom: 12px;
}
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 33px;
}
.control-row+.control-row {
  border-top: 0;
}
.control-row label,.control-label {
  color: var(--muted);
  flex: 1;
  min-width: 85px;
}
.choices {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  flex-wrap: wrap;
}
.choices button,select {
  border: 1px solid var(--line);
  background-color: #fbfbf8;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.choices button:disabled {
  cursor: not-allowed;
  color: var(--ui-disabled-text);
  border-color: var(--ui-disabled-edge);
  background: repeating-linear-gradient(135deg,var(--ui-disabled-fill) 0,var(--ui-disabled-fill) 3px,var(--ui-disabled-edge) 3px,var(--ui-disabled-edge) 4px);
}
.choices button:disabled:hover {
  border-color: var(--publication-edge);
}
.choices button[aria-pressed=true] {
  background: var(--chart-dark);
  color: white;
  border-color: var(--chart-dark);
}
select {
  max-width: 180px;
  width: auto;
  min-width: 115px;
}
button:hover,select:hover {
  border-color: var(--chart-mid);
}
button:focus-visible,select:focus-visible,summary:focus-visible,.chart svg rect:focus-visible {
  outline: 2px solid var(--chart-dark);
  outline-offset: 3px;
}
.chart {
  min-height: 235px;
  position: relative;
}
.chart svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.chart svg text {
  font-family: "Source Sans 3",Arial,Helvetica,sans-serif;
}
.caption {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 0 0;
}
.tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  background: var(--tooltip-background);
  color: var(--tooltip-text);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 2px 9px var(--ui-shadow);
  max-width: 340px;
  min-width: 175px;
}
.tip-total {
  font-weight: 600;
}
.tooltip[hidden] {
  display: none;
}



.details-layout {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr);
  gap: 28px;
  align-items: start;
}
.details-layout .table-scroll {
  grid-column: 1;
  grid-row: 1;
}
.details-layout .method-copy {
  grid-column: 2;
  grid-row: 1;
}
summary {
  cursor: pointer;
  width: max-content;
  padding: 7px 0;
}
details p {
  line-height: 1.6;
  max-width: 75ch;
}
.table-scroll {
  overflow: auto;
  max-height: 205px;
  margin: 9px 0 14px;
}
table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
th,td {
  padding: 5px 20px 5px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  text-align: left;
}
th {
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--paper);
}
.numeric {
  text-align: right;
}
.foot {
  display: flex;
  justify-content: space-between;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
}
.foot-right { text-align:right; }
.foot-left {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
}
.foot a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.error {
  font: 12px/1.5 "Source Sans 3",Arial,sans-serif;
  color: var(--ui-error);
  padding: 15px 0;
}
.legend {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font: 10px "Source Sans 3",Arial,sans-serif;
  color: var(--muted);
  margin-top: 4px;
}
.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  background: var(--chart-dark);
  vertical-align: middle;
}
.swatch.provisional {
  background: var(--ui-legend-muted);
}
.filter-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(155px,220px);
  gap: 16px 20px;
  align-items: start;
  margin-bottom: 12px;
}
.filter-layout .controls {
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.filter-layout .control-row {
  justify-content: start;
  gap: 10px;
  display: grid;
  grid-template-columns: 112px 168px;
}
.filter-layout .control-label,.filter-layout .control-row>label {
  flex: none;
  min-width: 0;
}
.filter-layout .choices {
  justify-content: flex-start;
  width: 168px;
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
}
.filter-layout .legend {
  margin: 7px 0 0;
  display: grid;
  justify-content: flex-start;
  align-content: start;
  gap: 10px 12px;
  line-height: 1.45;
  justify-self: end;
  grid-template-columns: repeat(2,minmax(0,1fr));
  width: 100%;
  font-size: 11px;
}
.filter-layout .legend span {
  white-space: normal;
  display: flex;
  align-items: center;
  gap: 7px;
}
select:disabled {
  cursor: not-allowed;
  color: var(--ui-disabled-text);
  background: repeating-linear-gradient(135deg,var(--ui-disabled-fill) 0,var(--ui-disabled-fill) 3px,var(--ui-disabled-edge) 3px,var(--ui-disabled-edge) 4px);
}
.filter-layout .choices button {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.filter-layout select {
  width: 168px;
  min-width: 0;
  max-width: none;
}
.filter-layout .legend .swatch {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 0;
}
.tip-table {
  border-collapse: collapse;
  width: auto;
  max-width: none;
  margin: 6px 0 2px;
  color: var(--tooltip-text);
  font: 11px/1.45 "Source Sans 3",Arial,Helvetica,sans-serif;
  font-variant-numeric: tabular-nums;
}
.tip-table th,.tip-table td {
  border: 0;
  border-bottom: 1px solid var(--tooltip-rule);
  background: transparent;
  padding: 3px 9px 3px 0;
  color: var(--tooltip-text);
  font-weight: 400;
  position: static;
  white-space: nowrap;
}
.tip-table thead th {
  font-size: 10px;
  color: var(--tooltip-muted);
  border-bottom: 1px solid var(--tooltip-rule-strong);
}
.tip-table th:first-child,.tip-table td:first-child {
  text-align: left;
}
.tip-table th:not(:first-child),.tip-table td:not(:first-child) {
  text-align: right;
  padding-left: 10px;
}
.tip-table tfoot td {
  font-weight: 600;
  border-top: 1px solid var(--tooltip-rule-footer);
  border-bottom: 0;
}

/* RESPONSIVE OVERRIDES — existing cascade order intentionally preserved. */
@media (max-width:750px) {
.details-layout {
  grid-template-columns: 1fr;
  gap: 5px;
}
.details-layout .table-scroll,.details-layout .method-copy {
  grid-column: 1;
  grid-row: auto;
}
.atlas-row {
  gap: 18px;
}
.control-row {
  align-items: start;
  flex-direction: column;
  padding: 6px 0;
  gap: 5px;
}
.choices {
  justify-content: flex-start;
}

}
@media (max-width:780px) {
.page {
  padding-top: 24px;
}
.atlas-row {
  display: block;
}
.module {
  margin-bottom: 28px;
}

.control-row {
  flex-direction: row;
  align-items: center;
}
.choices {
  justify-content: flex-end;
}
.foot {
  gap: 10px;
  flex-wrap: wrap;
}
}
@media (prefers-reduced-motion:reduce) {
* {
  scroll-behavior: auto !important;
}
}
@media (max-width:850px) {
.filter-layout {
  grid-template-columns: 1fr;
  gap: 9px;
}
.filter-layout .control-row {
  flex-direction: row;
  align-items: center;
}
.filter-layout .legend {
  margin-top: 2px;
  justify-self: start;
  grid-template-columns: repeat(2,max-content);
  width: auto;
  gap: 8px 18px;
}
}
@media (max-width:430px) {
.filter-layout .control-label,.filter-layout .control-row>label {
  flex-basis: 96px;
  min-width: 96px;
}
.filter-layout .control-row {
  grid-template-columns: 100px minmax(0,168px);
}
.filter-layout .choices,.filter-layout select {
  width: 100%;
}
}

/* 05 — FIGURE 02 — controls share the Figure 01 button/select components. */
[data-chart-id="yearly-material-comparison"] .chart { min-height: 250px; }
[data-chart-id="yearly-material-comparison"] .chart svg { display: block; }
[data-chart-id="yearly-material-comparison"] .chart .compare-series { transition: opacity .12s ease; }
[data-chart-id="yearly-material-comparison"] .chart .comparison-focus-line:focus-visible { outline: none; }
[data-chart-id="yearly-material-comparison"] .tooltip { min-width: 170px; max-width: 270px; }
[data-chart-id="yearly-material-comparison"] .tip-table { margin-top: 5px; }
@media(max-width:430px) {
}

/* Figure 02 tooltip overlays the right-hand label gutter, not the slopes. */
[data-chart-id="yearly-material-comparison"] .tooltip { position: fixed; z-index: 100; pointer-events: none; max-width: min(340px, calc(100vw - 12px)); }
[data-chart-id="yearly-material-comparison"] .tip-table td:last-child { text-align: right; }
[data-chart-id="yearly-material-comparison"] .tip-range { color: var(--tooltip-muted); font-size: 10px; }
/* Tablet: do not let the category selector exceed its column. */
@media (min-width: 781px) and (max-width: 900px) {
}
/* Mobile: preserve the same compact vertical rhythm as desktop. */
@media (max-width: 750px) { .control-row { padding-top: 0; padding-bottom: 0; } }

/* 06 — SHARED ACCESSIBLE DISCLOSURES */

.disclosure-toggle { display: inline-flex; align-items: center; gap: 5px; justify-self: start; border: 0; border-radius: 0; padding: 7px 0; margin: 0; background: transparent; color: var(--muted); font: 12px "Source Sans 3",Arial,sans-serif; cursor: pointer; text-align: left; }
.disclosure-toggle:nth-child(2) { justify-self: end; }
.disclosure-toggle:hover { color: var(--ink); }
.disclosure-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.disclosure-chevron { display: inline-block; width: 10px; font-size: 11px; transition: transform .12s ease; }
.disclosure-toggle[aria-expanded="true"] .disclosure-chevron { transform: rotate(90deg); }
.disclosure-panel { padding: 0 0 2px; }
.disclosure-panel[hidden] { display: none; }
.disclosure-panel .details-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 28px; align-items: start; }
.disclosure-panel .method-copy { grid-column: 1; grid-row: 1; min-width: 0; font: 12px/1.6 "Source Sans 3",Arial,sans-serif; color: var(--muted); }
.disclosure-panel .method-copy p { margin: 7px 0; max-width: none; }
.disclosure-panel .table-scroll { grid-column: 2; grid-row: 1; min-width: 0; margin: 7px 0; max-height: 205px; }
/* Keep the scrolling box beside its content, without changing the 1:2 grid tracks. */
.disclosure-panel .table-scroll {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  scrollbar-gutter: stable;
}

@media (max-width: 750px) {
  .disclosure-panel .details-layout { grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 14px; }
  
}
@media (max-width: 780px) {
  
  .disclosure-toggle { font-size: 11px; }
  /* Allow wide tables to scroll inside the disclosure, not enlarge the mobile grid. */
  .disclosure-panel .details-layout { grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
  .disclosure-panel .method-copy, .disclosure-panel .table-scroll { grid-column: 1; grid-row: auto; }
}
/* Compact disclosure tables: keep columns near their intrinsic content width. */
.disclosure-panel table { width: max-content; max-width: none; }
/* Equal disclosure trigger slots avoid squeezing Figure 02 into a 1/3 column. */
@media (max-width: 850px) {
  
  .disclosure-toggle { white-space: nowrap; }
}
@media (max-width: 780px) {
  
  .disclosure-toggle { font-size: 10px; letter-spacing: -.15px; }
  .disclosure-chevron { width: 8px; }
}
@media (max-width: 355px) {
  .disclosure-toggle { white-space: normal; }
}

/* Prevent Figure 02 controls colliding with the Measurement label at tablet widths. */
@media (min-width: 781px) and (max-width: 1050px) {
}

/* Chart and disclosure elements share one grid, allowing responsive ordering. */
.chart-disclosure-grid { row-gap: 0; }
.chart-disclosure-grid > .module { margin-bottom: 0; }
.disclosure-trigger { min-width: 0; border-top: 1px solid var(--line); }
.disclosure-trigger-1 { grid-column: 1 / span 2; grid-row: 2; }
.disclosure-trigger-2 { grid-column: 3; grid-row: 2; text-align: right; }
.disclosure-trigger-2 .disclosure-toggle { justify-self: end; }
.chart-disclosure-grid > .disclosure-panel { grid-column: 1 / -1; grid-row: 3; padding: 0 0 2px; }
.chart-disclosure-grid > .disclosure-panel[hidden] { display: none; }
.chart-disclosure-grid > [data-chart-id="monthly-material-weights"] { grid-column: 1 / span 2; grid-row: 1; }
.chart-disclosure-grid > [data-chart-id="yearly-material-comparison"] { grid-column: 3; grid-row: 1; }
.disclosure-panel .method-copy p { margin-top: 7px; }
/* Maintain the same 20px right cell padding even on narrow screens. */
.disclosure-panel table th, .disclosure-panel table td { padding-right: 20px; }
@media (max-width: 780px) {
  .chart-disclosure-grid { display: grid; grid-template-columns: minmax(0,1fr); row-gap: 0; }
  .chart-disclosure-grid > [data-chart-id="monthly-material-weights"] { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .disclosure-trigger-1 { grid-column: 1; grid-row: 2; }
  .chart-disclosure-grid > .disclosure-panel-1 { grid-column: 1; grid-row: 3; }
  .chart-disclosure-grid > [data-chart-id="yearly-material-comparison"] { grid-column: 1; grid-row: 4; margin-top: 24px; margin-bottom: 0; }
  .disclosure-trigger-2 { grid-column: 1; grid-row: 5; text-align: left; }
  .disclosure-trigger-2 .disclosure-toggle { justify-self: start; }
  .chart-disclosure-grid > .disclosure-panel-2 { grid-column: 1; grid-row: 6; }
}

/* INTRODUCTION — initial styles; later grid refinement retained in cascade position. */
.intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr);
  align-items: start;
  margin: -5px 0 33px;
  color: var(--muted);
  font: 12px/1.55 "Source Sans 3", Arial, sans-serif;
}
.intro-opening, .intro-explanation { min-width: 0; }
.intro-explanation { column-count: 2; column-gap: 28px; column-fill: balance; }
.intro p { margin: 0; }
/* Match the first methodology text baseline to the table header baseline. */
/* Header and methodology use the same font metrics and text baseline.
   Both containers begin 7px down; the 5px inset matches the th top padding. */
.disclosure-panel .method-copy { padding-top: 5px; }
.disclosure-panel .method-copy p,
.disclosure-panel .method-copy p:first-child { margin-top: 0; }
@media (max-width: 780px) {
  .intro { display: block; margin-bottom: 27px; }
  .intro-explanation { column-count: 1; margin-top: 12px; }
}

/* Small baseline correction without changing table typography. */
.disclosure-panel .table-scroll { margin-top: 1px; }

/* Figure 03: reuse the established selector and disclosure styling. */
[data-chart-id="overall-recycling-rate"] .chart { min-height: 250px; display: flex; justify-content: center; align-items: center; }
[data-chart-id="overall-recycling-rate"] .chart svg { width: min(100%, 260px); height: auto; overflow: visible; }
[data-chart-id="overall-recycling-rate"] .chart .rate-value { fill: var(--ink); font-size: 30px; font-weight: 400; letter-spacing: -.045em; }
[data-chart-id="overall-recycling-rate"] .chart .rate-caption { fill: var(--muted); font-size: 11px; }
[data-chart-id="overall-recycling-rate"] .chart .arc-recycled { fill: var(--chart-dark); }
[data-chart-id="overall-recycling-rate"] .chart .arc-general { fill: var(--chart-light); }




/* Figure 03: numeric data and headings use the shared right-alignment convention. */
#recycling-table th:not(:first-child), #recycling-table td:not(:first-child) { text-align: right; }

/* Figure 04: fixed weekday gutter and horizontally scrollable continuous calendar. */
.calendar-controls { display:flex; flex-direction:column; flex-wrap:nowrap; gap:0; padding-top:0; }
.calendar-controls .control-row { flex-direction:row; align-items:center; gap:7px; min-height:33px; justify-content:space-between; }
.calendar-key { display:flex; align-items:center; flex-wrap:wrap; font-size:10px; color:var(--muted); margin:12px 0 0; justify-content:flex-end; max-width:250px; gap:8px; }
.calendar-key .swatch { display:inline-block; border:0; margin-right:0; flex-grow:0; flex-shrink:0; width:13px; height:13px; flex-basis:13px; }
.calendar-layout { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; min-width:0; }
.calendar-weekdays { display:grid; grid-template-rows:32px repeat(7, 18px); font:10px/18px "Source Sans 3",Arial,sans-serif; color:var(--muted); }
.calendar-weekdays span { white-space:nowrap; }
.calendar-scroll { overflow-x:auto; overflow-y:hidden; min-width:0; padding-bottom:7px; scrollbar-width:thin; position:relative; }
.calendar-scroll:focus-visible { outline:2px solid var(--chart-dark); outline-offset:2px; }
[data-chart-id="daily-material-weights"] .chart { width:max-content; }
[data-chart-id="daily-material-weights"] .chart svg { display:block; max-width:none; height:auto; font-family:"Source Sans 3",Arial,sans-serif; }
#calendar-table th:last-child, #calendar-table td:last-child { text-align:right; }

/* Shared grid/disclosure structure for the second chart pair. */
.chart-disclosure-grid-secondary > [data-chart-id="overall-recycling-rate"] { grid-column:1 / span 2; grid-row:1; }
.chart-disclosure-grid-secondary > [data-chart-id="daily-material-weights"] { grid-column:3; grid-row:1; }
.chart-disclosure-grid-secondary .disclosure-trigger-3 { grid-column:1 / span 2; grid-row:2; }
.chart-disclosure-grid-secondary .disclosure-trigger-4 { grid-column:3; grid-row:2; text-align:right; }
.chart-disclosure-grid-secondary .disclosure-trigger-4 .disclosure-toggle { justify-self:end; }
.chart-disclosure-grid-secondary > .disclosure-panel { grid-column:1 / -1; grid-row:3; }
.calendar-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; min-height:91px; }
.calendar-weekdays span { font:inherit; }
[data-chart-id="daily-material-weights"] .chart svg { font:10px "Source Sans 3",Arial,sans-serif; }
[data-chart-id="daily-material-weights"] .chart svg text { fill:var(--muted); font:10px "Source Sans 3",Arial,sans-serif; }
[data-chart-id="daily-material-weights"] .chart-tooltip { position:fixed; z-index:100; pointer-events:none; max-width:min(310px,calc(100vw - 12px)); }
@media (max-width:780px) {
 .chart-disclosure-grid-secondary > [data-chart-id="overall-recycling-rate"] { grid-column:1; grid-row:1; margin-bottom:0; }
 .chart-disclosure-grid-secondary .disclosure-trigger-3 { grid-column:1; grid-row:2; }
 .chart-disclosure-grid-secondary > #recycling-disclosure { grid-column:1; grid-row:3; }
 .chart-disclosure-grid-secondary > [data-chart-id="daily-material-weights"] { grid-column:1; grid-row:4; margin-top:24px; margin-bottom:0; }
 .chart-disclosure-grid-secondary .disclosure-trigger-4 { grid-column:1; grid-row:5; text-align:left; }
 .chart-disclosure-grid-secondary .disclosure-trigger-4 .disclosure-toggle { justify-self:start; }
 .chart-disclosure-grid-secondary > #calendar-disclosure { grid-column:1; grid-row:6; }
 .calendar-top { flex-wrap:wrap; }
 .calendar-key { justify-content:flex-start; margin:0 0 8px; }
}

/* Figure-specific layout corrections; shared chart rules remain above. */
.chart-disclosure-grid-secondary > [data-chart-id="overall-recycling-rate"] { grid-column:1; }
.chart-disclosure-grid-secondary > [data-chart-id="daily-material-weights"] { grid-column:2 / span 2; }
.chart-disclosure-grid-secondary .disclosure-trigger-3 { grid-column:1; }
.chart-disclosure-grid-secondary .disclosure-trigger-4 { grid-column:2 / span 2; }
@media (max-width:780px) {
  .chart-disclosure-grid-secondary > [data-chart-id="daily-material-weights"] { grid-column:1; }
  .chart-disclosure-grid-secondary .disclosure-trigger-4 { grid-column:1; }
}
/* Figure 04 controls inherit the established Figure 03 control dimensions. */
.calendar-controls .control-row label { min-width:72px; }
@media (max-width:780px) {
 .calendar-controls select { min-width:0; max-width:100%; }
}

/* Calendar key and introduction refinements (responsive overrides retained in place). */
.intro p { margin-bottom: 9px; }
.intro p:last-child { margin-bottom: 0; }
.calendar-key .key-gap { width:12px; }
@media (max-width:780px) { .mast .meta { gap:7px; } .mast .meta .recycling-icon { width:21px; height:21px; } .eyebrow { letter-spacing:.06em; } }

/* Narrow screens: centre both full-width footer sections. */
@media (max-width:780px) {
  .foot { flex-direction:column; align-items:stretch; gap:10px; }
  .foot-left, .foot-right { width:100%; text-align:center; }
}

/* Initial chart placeholder; reused for errors by showChartError. */
.chart-status { font: 12px/1.5 "Source Sans 3",Arial,sans-serif; color: var(--muted); padding: 15px 0; }
.chart-status.error { color: var(--ui-error); }

/* Shared chart shell: static heading, JS controls, status/visualisation. */
.module > .chart-controls { min-width: 0; }
.module > .chart-content { min-width: 0; position: relative; }
.chart-content > .chart-status { margin: 0; }
/* Preserve existing calendar control and legend placement inside its JS scaffold. */
[data-chart-id="daily-material-weights"] .calendar-top { margin-bottom: 0; }
/* Loading and error messages always begin at the chart area's top edge. */
[data-chart-id="overall-recycling-rate"] .chart:has(> .chart-status) {
  justify-content: flex-start;
  align-items: flex-start;
}

/* Accessible selection and focus: mark geometry, not the full SVG. */
.chart svg rect.is-selected { stroke: var(--ink, var(--chart-selection)); stroke-width: 2px; vector-effect: non-scaling-stroke; }
[data-chart-id="monthly-material-weights"] svg rect.is-selected { fill: transparent; }
[data-chart-id="overall-recycling-rate"] svg path.is-selected { stroke: none; }
[data-chart-id="overall-recycling-rate"] svg path:focus-visible { outline: 2px solid var(--ink, var(--chart-selection)); outline-offset: 2px; }
.disclosure-panel .table-scroll:focus-visible { outline: 2px solid var(--ink, var(--chart-selection)); outline-offset: 2px; }

/* The monthly selection follows the plotted bar, not its full-height hit target. */
[data-chart-id="monthly-material-weights"] .bar-selection { stroke: var(--ink, var(--chart-selection)); stroke-width: 2; vector-effect: non-scaling-stroke; }
[data-chart-id="monthly-material-weights"] svg g[aria-label="Monthly values"] > rect:focus-visible { outline: none; }
/* The calendar has one keyboard entry point; selection is drawn on the active cell. */
[data-chart-id="daily-material-weights"] .calendar-scroll:focus-visible { outline: none; }
[data-chart-id="daily-material-weights"] .calendar-scroll:focus-visible svg rect.is-selected { stroke-width: 2; }


/* Chart 1: compact tooltip; stabilise only the numeric column. */
[data-chart-id="monthly-material-weights"] .chart-tooltip .tip-table {
  width: auto;
  min-width: 0;
}
[data-chart-id="monthly-material-weights"] .chart-tooltip .tip-table :is(th, td):nth-child(2) {
  min-width: 44px;
}

/* Chart 2: one grid column shared by the select and the two-button group. */
[data-chart-id="yearly-material-comparison"] .chart-controls .control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 168px);
  gap: 7px;
  align-items: center;
  min-width: 0;
}
[data-chart-id="yearly-material-comparison"] .chart-controls .choices,
[data-chart-id="yearly-material-comparison"] .chart-controls select {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  justify-self: stretch;
}
[data-chart-id="yearly-material-comparison"] .chart-controls .choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}
[data-chart-id="yearly-material-comparison"] .chart-controls .choices button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-inline: 3px;
}
[data-chart-id="yearly-material-comparison"] .comparison-selection-path {
  stroke: var(--chart-selection);
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
@media (max-width: 355px) {
  [data-chart-id="yearly-material-comparison"] .chart-controls .control-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 48vw);
  }
}

/* Figure 01: keep the material key on one full-width row below controls on narrow screens. */
@media (max-width: 780px) {
  [data-chart-id="monthly-material-weights"] .filter-layout .legend,
  [data-chart-id="monthly-material-weights"] .chart-legend {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
  }
  [data-chart-id="monthly-material-weights"] .filter-layout .legend > span,
  [data-chart-id="monthly-material-weights"] .chart-legend > span {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    gap: 4px;
  }
  [data-chart-id="monthly-material-weights"] .filter-layout .legend .swatch,
  [data-chart-id="monthly-material-weights"] .chart-legend .swatch {
    flex-shrink: 0;
  }
}

/* Annotated-publication highlights: typography and layout remain unchanged. */
.module { --annotation-colour: var(--accent-blue); }
.module[data-chart-id="yearly-material-comparison"],
.module[data-chart-id="daily-material-weights"] { --annotation-colour: var(--accent-orange); }
.heading h2 .title-mark {
  position:relative; display:inline-block; isolation:isolate;
}
.heading h2 .title-mark::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:calc(-1 * var(--mark-extend) + var(--mark-shift));
  width:calc(100% + 2 * var(--mark-extend));
  bottom:0.03em; height:var(--highlight-height);
  background:color-mix(in srgb,var(--annotation-colour) var(--highlight-opacity),transparent);
  clip-path:polygon(0 0,98.7% 0,100% 100%,1.3% 100%);
  transform-origin:left center;
  transform:rotate(var(--mark-angle)) scaleX(0);
  transition:transform var(--highlight-duration) ease;
}
.module:hover .title-mark::before,
.module.is-keyboard-attended .title-mark::before,
.module.is-disclosure-attended .title-mark::before {
  transform:rotate(var(--mark-angle)) scaleX(1);
}
.disclosure-trigger { --annotation-colour:var(--accent-blue); }
.disclosure-trigger-2,.disclosure-trigger-4 { --annotation-colour:var(--accent-orange); }
.disclosure-toggle .disclosure-label,
.foot a { --link-mark-colour:var(--accent-orange); position:relative; background-image:linear-gradient(to right,
 color-mix(in srgb,var(--link-mark-colour) var(--highlight-opacity),transparent),
 color-mix(in srgb,var(--link-mark-colour) var(--highlight-opacity),transparent));
 background-repeat:no-repeat; background-position:0 100%; background-size:0 var(--highlight-height);
 transition:background-size var(--highlight-duration) ease;
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.disclosure-toggle .disclosure-label { --link-mark-colour:var(--annotation-colour); }
.disclosure-trigger.is-disclosure-attended .disclosure-label,
.disclosure-toggle:hover .disclosure-label,
.disclosure-toggle.is-keyboard-attended .disclosure-label,
.foot a:hover,.foot a:focus-visible { background-size:100% var(--highlight-height); }
.foot a.profile-link { --link-mark-colour:var(--accent-blue); }
.foot a { color: var(--ink); text-decoration:underline; text-underline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
 .heading h2 .title-mark::before,.disclosure-toggle .disclosure-label,.foot a {transition:none;}
}


/* Editorial refresh: a shared three-column grid, equal-weight copy, and quiet figure observations. */
.mast .meta { align-items: center; justify-content: flex-end; gap: 12px; }
.mast .meta .recycling-icon { margin: 0; flex: none; }
.mast .meta-stack { text-align: right; align-items: flex-end; line-height: 1.55; }
.mast .meta-stack { font-weight: 400; }
.intro { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px;
  margin: 0 0 29px; padding: 27px 0 0; color: var(--ink);
  font: 13px/1.55 "Source Sans 3",Arial,sans-serif; }
.intro p { margin: 0; min-width: 0; }
.module-header { padding-top: 10px; padding-bottom: 10px; }
@media (max-width:780px) {
  .intro { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; margin-bottom: 25px; }
}
@media (max-width:430px) {
  .mast .meta { display: flex; gap: 7px; }
  .mast .meta .recycling-icon { width: 19px; height: 19px; }
  .mast .meta-stack { font-size: 10px; white-space: normal; }
}

/* Editorial controls and footer refinements. */
.foot a { text-decoration: none; }
/* Broad hand-drawn green marker behind the recycling symbol. */
.mast .meta .recycling-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: none;
  isolation: isolate;
}
.mast .meta .recycling-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -2px;
  right: -2px;
  top: 9px;
  height: 23px;
  background: color-mix(in srgb, var(--accent-green) var(--highlight-opacity), transparent);
  clip-path: polygon(0 14%, 98% 0, 100% 83%, 3% 100%);
  transform: rotate(-7deg);
}
.mast .meta .recycling-mark .recycling-icon {
  display: block;
  margin: 0;
  width: 23px;
  height: 23px;
}
@media (max-width: 780px) {
  .mast .meta .recycling-mark { width: 23px; height: 23px; }
  .mast .meta .recycling-mark::before { height: 21px; top: 8px; }
  .mast .meta .recycling-mark .recycling-icon { width: 19px; height: 19px; }
}