/* Updated plastics/accordion stylesheet
   - Softer early blues (lower saturation, slightly higher lightness)
   - Much slower hue drift toward green (extended to 32 items)
   - Preserves adaptive text + auto-scaling triangle ramp
   - Mid-zone contrast tweak (rows 13–22) for better separation */

/* ===== Shared targets (plastics page + FAQ accordion) ===================== */
:where(#plastic-chart, .accordion) h1 { color: #fff; font-weight: 800; }
:where(#plastic-chart, .accordion) p.text-muted { color: rgba(255,255,255,.75) !important; }

/* ===== Panel base ========================================================= */
:where(#plastic-chart, .accordion) details.brand {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .5rem .75rem;
  margin-bottom: .9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);

  /* default adaptive text (overridden per row) */
  --text: #e9edf3;
  color: var(--text);

  /* gradient stops per row provided by --c1 / --c2 below */
  background: linear-gradient(180deg, var(--c1, hsl(145,55%,25%)), var(--c2, hsl(145,55%,20%)));
}

/* ===== Summary row ======================================================== */
:where(#plastic-chart, .accordion) summary {
  display: flex; align-items: center; gap: .6rem;
  list-style: none; font-weight: 700; cursor: pointer;
  padding: .35rem .25rem; user-select: none;
  color: var(--text);
}
:where(#plastic-chart, .accordion) summary::-webkit-details-marker { display: none; }

/* ===== Triangle chip ====================================================== */
:where(#plastic-chart, .accordion) .chip {
  width: 0; height: 0; display: inline-block;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid var(--tri, #ffd166);
  transform: rotate(0deg);
  transition: transform .18s ease, border-left-color .2s ease, filter .2s ease;
}
:where(#plastic-chart, .accordion) details[open] .chip { transform: rotate(90deg); filter: brightness(1.08); }

/* ===== Content list inside open panel ==================================== */
:where(#plastic-chart, .accordion) .plastics { margin: .5rem 0 0 1.75rem; padding-bottom: .75rem; }
:where(#plastic-chart, .accordion) .plastics li {
  list-style: none; margin: .25rem 0; padding: .45rem .6rem;
  border-radius: 8px; background: rgba(0,0,0,.12);
  color: var(--text);
  transition: color .2s ease;
}

/* ===== Interaction states ================================================= */
:where(#plastic-chart, .accordion) details.brand[open] {
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--c1, #1f5a47) 40%, transparent);
  filter: saturate(1.05) brightness(1.04);
}
:where(#plastic-chart, .accordion) details.brand:not([open]):hover {
  filter: brightness(1.08);
  transition: filter .18s ease;
}

/* ===== Flowing background palette (blue → teal → green, much slower) =======
   Notes:
   - Rows 1–12 linger in blue → blue-teal (H ~205→178) with lower saturation & slightly higher L.
   - Rows 13–22 (MID-ZONE CONTRAST TWEAK): +2–3% lightness, −1% saturation to brighten mids.
   - Rows 23–32 only then approach green (H ~156→146).
   - If you have fewer items, you’ll stay in the blue/teal range longer. */

/* 1–12: as before */
:where(#plastic-chart, .accordion) details.brand:nth-of-type(1)  { --c1: hsl(205,58%,48%); --c2: hsl(205,58%,42%); --text: hsl(205,18%,92%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(2)  { --c1: hsl(202,56%,47%); --c2: hsl(202,56%,41%); --text: hsl(202,18%,91%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(3)  { --c1: hsl(199,55%,46%); --c2: hsl(199,55%,40%); --text: hsl(199,18%,90%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(4)  { --c1: hsl(196,54%,45%); --c2: hsl(196,54%,39%); --text: hsl(196,18%,89%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(5)  { --c1: hsl(193,53%,44%); --c2: hsl(193,53%,38%); --text: hsl(193,17%,89%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(6)  { --c1: hsl(190,52%,43%); --c2: hsl(190,52%,37%); --text: hsl(190,17%,88%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(7)  { --c1: hsl(188,51%,42%); --c2: hsl(188,51%,36%); --text: hsl(188,16%,88%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8)  { --c1: hsl(186,50%,41%); --c2: hsl(186,50%,35%); --text: hsl(186,16%,87%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(9)  { --c1: hsl(184,50%,40%); --c2: hsl(184,50%,34%); --text: hsl(184,16%,86%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(10) { --c1: hsl(182,49%,39%); --c2: hsl(182,49%,33%); --text: hsl(182,15%,86%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(11) { --c1: hsl(180,48%,38%); --c2: hsl(180,48%,32%); --text: hsl(180,15%,85%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(12) { --c1: hsl(178,48%,37%); --c2: hsl(178,48%,31%); --text: hsl(178,15%,84%); }

/* 13–22: MID-ZONE CONTRAST TWEAK (lighter + slightly less saturated) */
:where(#plastic-chart, .accordion) details.brand:nth-of-type(13) { --c1: hsl(176,46%,38%); --c2: hsl(176,46%,32%); --text: hsl(176,14%,84%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(14) { --c1: hsl(174,46%,37%); --c2: hsl(174,46%,31%); --text: hsl(174,14%,83%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(15) { --c1: hsl(172,45%,36%); --c2: hsl(172,45%,30%); --text: hsl(172,13%,83%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(16) { --c1: hsl(170,45%,35%); --c2: hsl(170,45%,29%); --text: hsl(170,13%,82%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(17) { --c1: hsl(168,44%,34%); --c2: hsl(168,44%,28%); --text: hsl(168,12%,81%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(18) { --c1: hsl(166,44%,33%); --c2: hsl(166,44%,27%); --text: hsl(166,12%,80%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(19) { --c1: hsl(164,43%,32%); --c2: hsl(164,43%,26%); --text: hsl(164,12%,79%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(20) { --c1: hsl(162,43%,31%); --c2: hsl(162,43%,25%); --text: hsl(162,12%,78%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(21) { --c1: hsl(160,43%,31%); --c2: hsl(160,43%,25%); --text: hsl(160,12%,78%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(22) { --c1: hsl(158,43%,30%); --c2: hsl(158,43%,24%); --text: hsl(158,11%,77%); }

/* 23–32: as before */
:where(#plastic-chart, .accordion) details.brand:nth-of-type(23) { --c1: hsl(156,43%,29%); --c2: hsl(156,43%,23%); --text: hsl(156,11%,76%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(24) { --c1: hsl(154,43%,28%); --c2: hsl(154,43%,22%); --text: hsl(154,11%,76%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(25) { --c1: hsl(153,43%,28%); --c2: hsl(153,43%,22%); --text: hsl(153,11%,75%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(26) { --c1: hsl(152,43%,27%); --c2: hsl(152,43%,21%); --text: hsl(152,11%,75%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(27) { --c1: hsl(151,43%,27%); --c2: hsl(151,43%,21%); --text: hsl(151,11%,75%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(28) { --c1: hsl(150,43%,27%); --c2: hsl(150,43%,21%); --text: hsl(150,11%,75%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(29) { --c1: hsl(149,43%,26%); --c2: hsl(149,43%,20%); --text: hsl(149,11%,74%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(30) { --c1: hsl(148,43%,26%); --c2: hsl(148,43%,20%); --text: hsl(148,11%,74%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(31) { --c1: hsl(147,43%,26%); --c2: hsl(147,43%,20%); --text: hsl(147,11%,74%); }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(32) { --c1: hsl(146,43%,26%); --c2: hsl(146,43%,20%); --text: hsl(146,11%,74%); }

/* ===== Auto-scaling triangle color ramp (loops every 8) =================== */
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+1)  { --tri: #ffd166; } /* amber */
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+2)  { --tri: #ffcf5a; }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+3)  { --tri: #ffc84d; }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+4)  { --tri: #ffbf3f; }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+5)  { --tri: #ffb632; }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+6)  { --tri: #ffac26; }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+7)  { --tri: #ffa31a; }
:where(#plastic-chart, .accordion) details.brand:nth-of-type(8n+8)  { --tri: #ff9910; } /* warm orange */

/* ===== Mobile tweaks ====================================================== */
@media (max-width: 768px){
  :where(#plastic-chart, .accordion) .plastics { margin-left: 1.2rem; }
}