/* Canopy shared components.
 *
 * SCOPE, deliberately narrow: page-agnostic component structure only. The design
 * tokens are NOT here and should not move here.
 *
 *   1. tests/test_css_var_definitions.py is a ratchet requiring every bare var(--x)
 *      to be defined on the page that uses it. It reads each page's own text, because
 *      an undefined variable paints nothing rather than failing loudly, which has
 *      already cost this repo a live defect on pa.html.
 *   2. Each page carries its own accent palette (--pace, --risk, --ccs, --nf, ...),
 *      so there is no single token set to share.
 *   3. Inline CSS cannot fail to load. A stylesheet can. Keeping the tokens inline
 *      means a fetch failure degrades one component rather than every page's ground.
 *
 * So: every var() below carries a literal fallback, and this file only ever holds
 * rules that degrade gracefully if it never arrives.
 *
 * Pages set --collapse-accent to their own accent. Local overrides (a width, a
 * padding) stay on the page, after the link to this file.
 */

/* --- .site-collapse -------------------------------------------------------
 * The block-level disclosure shipped in #823-#827 for Tony's density feedback.
 * It had been copy-pasted onto 11 pages and drifted into 6 variants before this.
 */
.site-collapse {
  background: var(--bg2, #fafaf8);
  border: 1px solid var(--border, #e8e8e5);
  border-left: 3px solid var(--collapse-accent, #1a4a2e);
  border-radius: 10px;
  margin: 10px auto;
  overflow: hidden;
}

@media (max-width: 768px) {
  .site-collapse { margin-left: 12px; margin-right: 12px; }
}

.site-collapse > summary {
  cursor: pointer;
  color: var(--text, #1a1a18);
  padding: 14px 18px;
  list-style: none;
  user-select: none;
  font-size: 15px;
}

.site-collapse > summary strong { font-weight: 600; }

.site-collapse > summary::-webkit-details-marker { display: none; }

/* width keeps the label from shifting when the triangle rotates */
.site-collapse > summary::before {
  content: "\25B8";
  display: inline-block;
  width: 11px;
  margin-right: 8px;
  transition: transform 0.15s;
  color: var(--text-dim, #999896);
  font-size: 11px;
}

.site-collapse[open] > summary::before { transform: rotate(90deg); }

.site-collapse > summary:hover { color: var(--collapse-accent, #1a4a2e); }

.site-collapse[open] > summary { border-bottom: 1px solid var(--border, #e8e8e5); }

.site-collapse > summary:focus-visible {
  outline: 2px solid var(--collapse-accent, #1a4a2e);
  outline-offset: -2px;
}

/* --- .page-lede -----------------------------------------------------------
 * The house opener, lifted from cwatch.html's .hero-bul: labelled bullets saying
 * what a page shows, how to read it, and what it does not tell you, above the
 * first table or chart.
 */
.page-lede { list-style: none; padding: 0; margin: 18px 0 14px; max-width: 720px; }

.page-lede li {
  font-size: 14.5px;
  color: var(--text-muted, #5f5e5a);
  line-height: 1.65;
  padding-left: 19px;
  position: relative;
}

.page-lede li + li { margin-top: 10px; }

.page-lede li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--collapse-accent, #1a4a2e);
}

.page-lede b { color: var(--text, #1a1a18); font-weight: 600; }

.page-lede a { color: var(--collapse-accent, #1a4a2e); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .site-collapse > summary::before { transition: none; }
}