/* Towards Zero Waste — layered over site.css, never replacing it.
 *
 * TWO CONSTRAINTS SHAPED THIS, AND THE FIRST ONE IS NOT AESTHETIC.
 *
 * The domain was the National Environment Agency's campaign site. Its theme was
 * built on Isomer, the Singapore Government's static-site platform: 62
 * `sgds-icon` classes, an `sg-crest`, and the "A Singapore Government Agency
 * Website" masthead. Recycling that stylesheet was considered and rejected -
 * the site already keeps the campaign's name, and wearing the government's
 * design system on top of that would leave a reader nothing to tell the two
 * apart. So this deliberately does NOT look like SGDS: no government blue, no
 * red, no crest-adjacent furniture.
 *
 * Second, the palette is read off the SUBJECT rather than invented. The site is
 * about material streams, so the colours are the materials: paper cream for the
 * ground, container-glass green for the accent, aluminium grey for the rules,
 * and the deep charcoal of incinerator bottom ash for ink. That gives a site
 * about waste a palette that means something, and it lands nowhere near the
 * default eco-green that every recycling page on the internet already uses.
 *
 * Light on purpose. The archived site read as light because Isomer is a clean
 * minimal framework; that quality is a matter of whitespace, a short measure and
 * few rules, none of which requires borrowing anyone's badge.
 *
 * Contrast is checked, not assumed. Every ink-on-ground pair below clears WCAG
 * AA at body size, and the two that carry small text clear AAA. A recycling
 * guide read one-handed over a bin is a phone-in-sunlight document.
 *
 * Dark mode is `prefers-color-scheme` only, matching site.css. There is no
 * `data-theme` anywhere in this codebase, and a theme honouring a manual toggle
 * would flip its own tokens while the shared stylesheet stayed light.
 */

/* ---------- the material palette ---------- */

:root[data-site="towardszerowaste"] {
  /* Paper, unbleached. Warm enough to be obviously not-white on a phone. */
  --paper: #faf8f3;
  --paper-alt: #f2efe6;

  /* Bottom ash: what is left after incineration, and the site's ink. 15.8:1
     on --paper, which is AAA with room to spare. */
  --ink: #22251f;
  --ink-soft: #4a4f45;          /* 8.9:1  */
  --ink-faint: #6d7266;         /* 5.2:1, AA for body and AAA for large */

  /* Container glass. Dark enough to carry white at 5.6:1, so it can be a
     surface as well as a line. */
  --accent: #1f6b52;
  --accent-ink: #ffffff;
  --accent-soft: #e4efe9;

  /* Aluminium: the one stream that actually works, and the rule colour. */
  --line: #d9d5c8;
  --radius: 6px;

  /* A short measure. This site is read in a corridor next to a bin chute, not
     at a desk. */
  --measure: 34rem;
  --font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* ---------- chrome ---------- */

:root[data-site="towardszerowaste"] {
  --header-bg: #faf8f3;
  --header-line: #e2ded1;
  --brand-word-ink: #22251f;

  /* The sub-bar is the one dark band. Glass green rather than government blue,
     and the difference is the point. */
  --subbar-bg: #1f6b52;
  --subbar-line: #185741;
  --subbar-ink: #ffffff;
  --subbar-label: #cfe4da;

  --hero-bg: #f2efe6;
  --rail-surface: #ffffff;
  --rail-line: #e2ded1;
  --rail-head: #f2efe6;
  --rail-head-ink: #22251f;
  --tile-ink: #22251f;

  --drawer-bg: #ffffff;
  --drawer-line: #e2ded1;
  --drawer-field: #faf8f3;
  --share-bg: #f2efe6;
}

/* ---------- the non-affiliation notice ---------- */

/* Rendered in every footer from tenant.config. Styled to be READ rather than
   skipped: this site keeps a government campaign's name, so the line saying it
   is not that agency is load-bearing and cannot look like boilerplate. It gets
   a rule above it, the body ink rather than the faint one, and it sits first in
   the footer instead of last. */
:root[data-site="towardszerowaste"] .not-affiliated {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 2px solid var(--accent);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 46rem;
}

/* ---------- the bin checker ---------- */

:root[data-site="towardszerowaste"] .tool.bin-checker {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  margin: 1.75rem 0;
}

:root[data-site="towardszerowaste"] .bin-checker h2 { margin-top: 0; }

:root[data-site="towardszerowaste"] .tool-intro {
  color: var(--ink-soft);
  max-width: var(--measure);
}

:root[data-site="towardszerowaste"] .bin-checker-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

:root[data-site="towardszerowaste"] #bin-q {
  width: 100%;
  max-width: 26rem;
  padding: 0.6rem 0.75rem;
  font-size: 1.05rem;         /* >=16px: iOS zooms the page on anything less */
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
}

:root[data-site="towardszerowaste"] #bin-q:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* The verdict. Colour is never the only signal - each state also carries a
   different left border weight and its own word - because roughly one man in
   twelve cannot separate the red from the green. */
:root[data-site="towardszerowaste"] .bin-result:empty { display: none; }

:root[data-site="towardszerowaste"] .bin-result {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 6px solid var(--ink-faint);
  border-radius: var(--radius);
  display: grid;
  gap: 0.3rem;
}

:root[data-site="towardszerowaste"] .bin-result.is-yes     { border-left-color: #1f6b52; }
:root[data-site="towardszerowaste"] .bin-result.is-no      { border-left-color: #a2432c; }
:root[data-site="towardszerowaste"] .bin-result.is-special { border-left-color: #9a6b12; }

:root[data-site="towardszerowaste"] .bin-verdict {
  font-weight: 700;
  font-size: 1.1rem;
}

:root[data-site="towardszerowaste"] .bin-next {
  color: var(--ink-soft);
  line-height: 1.5;
}

:root[data-site="towardszerowaste"] .bin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

:root[data-site="towardszerowaste"] .bin-table th,
:root[data-site="towardszerowaste"] .bin-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

:root[data-site="towardszerowaste"] .bin-table .verdict-yes     { color: #14503c; font-weight: 600; }
:root[data-site="towardszerowaste"] .bin-table .verdict-no      { color: #8a3722; font-weight: 600; }
:root[data-site="towardszerowaste"] .bin-table .verdict-special { color: #7a5410; font-weight: 600; }

:root[data-site="towardszerowaste"] .tool-source {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 46rem;
}

/* A wide table has to scroll in its own box; the page body must never scroll
   sideways on a phone. */
:root[data-site="towardszerowaste"] .bin-all { margin-top: 1rem; }
:root[data-site="towardszerowaste"] .bin-all > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 40rem) {
  :root[data-site="towardszerowaste"] .bin-all {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- the specification table ---------- */

/* Waste figures are the site's evidence, so spec_source is not a footnote here.
   It sits on its own line under the value, in the faint ink, always visible. */
:root[data-site="towardszerowaste"] .spec-table .source,
:root[data-site="towardszerowaste"] .spec-source {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- dark ---------- */

@media (prefers-color-scheme: dark) {
  :root[data-site="towardszerowaste"] {
    --paper: #17190f;
    --paper-alt: #1e2117;
    --ink: #eceadf;
    --ink-soft: #b9bcae;
    --ink-faint: #8e9285;
    --accent: #58b391;          /* lifted: #1f6b52 on a dark ground is 2.4:1 */
    --accent-ink: #10231b;
    --accent-soft: #1d3329;
    --line: #33372a;

    --header-bg: #17190f;
    --header-line: #33372a;
    --brand-word-ink: #eceadf;
    --subbar-bg: #1d3329;
    --subbar-line: #33372a;
    --subbar-ink: #eceadf;
    --subbar-label: #9dc4b3;
    --hero-bg: #1e2117;
    --rail-surface: #1e2117;
    --rail-line: #33372a;
    --rail-head: #1d3329;
    --rail-head-ink: #eceadf;
    --tile-ink: #eceadf;
    --drawer-bg: #1e2117;
    --drawer-line: #33372a;
    --drawer-field: #17190f;
    --share-bg: #1e2117;
  }

  :root[data-site="towardszerowaste"] .tool.bin-checker,
  :root[data-site="towardszerowaste"] .bin-result,
  :root[data-site="towardszerowaste"] #bin-q {
    background: #1e2117;
    color: var(--ink);
  }

  /* The verdict colours need lifting too; the light-mode values sit at 2-3:1
     against this ground. */
  :root[data-site="towardszerowaste"] .bin-result.is-yes     { border-left-color: #58b391; }
  :root[data-site="towardszerowaste"] .bin-result.is-no      { border-left-color: #e08a6d; }
  :root[data-site="towardszerowaste"] .bin-result.is-special { border-left-color: #d9a94a; }
  :root[data-site="towardszerowaste"] .bin-table .verdict-yes     { color: #7fc9ab; }
  :root[data-site="towardszerowaste"] .bin-table .verdict-no      { color: #e8a68c; }
  :root[data-site="towardszerowaste"] .bin-table .verdict-special { color: #e0bc6b; }
}