/* Shared "teaser disclosure" pattern: a <details class="data-disclosure"> whose <summary> shows a
 * real, page-computed number (not static copy) so a dense data section is worth a click before the
 * reader commits to opening it. First used on /council (meeting time, roll-call categories, pay per
 * meeting, attendance streaks, presence grid, public turnout); reuse this file on any other page
 * that groups a heavy table/chart behind a heading, rather than re-styling a new disclosure.
 *
 * Markup contract:
 *   <details class="data-disclosure" id="...">
 *     <summary><h2 or h3>Title <small class="data-disclosure-teaser">...</small><small class="data-disclosure-cue">Open for ...</small></h2 or h3></summary>
 *     <div class="data-disclosure-body">...</div>
 *   </details>
 * The heading stays the *only* child of <summary> (each teaser/cue nests inside it) so the element
 * satisfies HTML's summary content model (phrasing content, or exactly one heading) and screen-reader
 * heading navigation still finds "Average meeting length by year" etc. with the details closed.
 */

.data-disclosure {
  margin: 14px 0;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--surface);
}
.data-disclosure + .data-disclosure { margin-top: 10px; }

.data-disclosure > summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.data-disclosure > summary::-webkit-details-marker { display: none; }
.data-disclosure > summary::marker { content: ""; }
.data-disclosure > summary::before {
  content: "\25B8";
  flex: none;
  margin-top: .15em;
  color: var(--accent-dark);
  transition: transform .15s;
}
.data-disclosure[open] > summary::before { transform: rotate(90deg); }
.data-disclosure > summary:focus-visible {
  outline: 3px solid var(--blue, #1c5fd6);
  outline-offset: -3px;
}

.data-disclosure > summary > h2,
.data-disclosure > summary > h3 {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  min-width: 0;
}

.data-disclosure-teaser {
  color: var(--muted);
  font: 400 .82rem/1.4 Arial, Helvetica, sans-serif;
}
.data-disclosure-cue {
  flex: none;
  color: var(--accent-dark);
  font: 700 .66rem Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.data-disclosure[open] > summary .data-disclosure-cue { visibility: hidden; }

.data-disclosure-body { padding: 0 14px 14px; }
.data-disclosure-body > *:first-child { margin-top: 14px; }

.data-disclosure-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.data-disclosure-controls button {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-dark);
  font: 700 .74rem Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.data-disclosure-controls button:hover,
.data-disclosure-controls button:focus-visible { border-color: var(--accent-dark); }

/* Brief (the header's "Detail: Brief | Full", default Brief): a run of teaser disclosures reads
 * as one list of rows -- no gaps, one shared rule between rows, tighter padding -- and the
 * "Open for ..." cue gives way to the row's arrow and number. Full restores separate blocks with
 * their cues. docs/data-components.md section 14, "Density cases". */
:root:not([data-detail="full"]) .data-disclosure + .data-disclosure { margin-top: -15px; }
:root:not([data-detail="full"]) .data-disclosure > summary { padding-block: 9px; }
:root:not([data-detail="full"]) .data-disclosure:not([open]) > summary .data-disclosure-cue { display: none; }

@media (max-width: 480px) {
  .data-disclosure-teaser { flex-basis: 100%; }
  /* The cue may wrap on a phone rather than push the page sideways. */
  .data-disclosure-cue { flex: 0 1 auto; min-width: 0; }
}

@media print {
  .data-disclosure-controls { display: none; }
  .data-disclosure-cue { display: none; }
  .data-disclosure > summary::before { display: none; }
  /* Force every section's content to render even when its `open` attribute is absent. */
  .data-disclosure:not([open]) > summary ~ * { display: block !important; }
}