/* Moved from websites/templates/websites/website_active_pages.html (redesign checklist: local CSS out of the templates).
   Loaded only by that page, at the place its <style> stood. */

/* Data status: one row per prioritization signal. Same meter as the
   reports, sized for a coverage percentage rather than a score. */
.signal-meter {
  display: inline-block; width: 110px; height: 8px; border-radius: 999px;
  background: var(--color-neutral-300); overflow: hidden;
  vertical-align: middle;
}
.signal-meter > span { display: block; height: 100%; border-radius: 999px; }
.signal-meter--good > span { background: var(--mint); }
.signal-meter--warn > span { background: var(--amber); }
.signal-meter--bad  > span { background: var(--coral); }
.signals-table td { vertical-align: top; }
.signals-table .signal-what { max-width: 380px; }
.signal-count { display: block; font-size: 0.85em; }
.workfirst-cell { white-space: nowrap; }
.active-table td { vertical-align: top; }
.page-cell-title { font-weight: 600; }
.page-cell-path { display: block; font-size: 0.85em; overflow-wrap: anywhere; }
.promo-form { display: inline; }
/* The rest of the row, opened under it. The disclosure is a checkbox
   rather than a script: :has() is already how the UI kit reads a
   checked input (.seg-opt), and a table row cannot be a <details>. */
.row-open { width: 1%; }
/* td, not .row-open: the heading cell carries the same class for the
   column width and its span is the screen-reader label, not a marker. */
td.row-open input { position: absolute; opacity: 0; width: 0; height: 0; }
td.row-open span { display: inline-block; padding: 2px 7px; cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }
td.row-open span::before { content: "\25B8"; }
td.row-open:hover span { color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent); }
td.row-open:has(input:checked) span::before { content: "\25BE"; }
td.row-open:has(input:focus-visible) span { outline: 2px solid var(--color-accent); }
tr.row-detail { display: none; }
tr:has(.row-open input:checked) + tr.row-detail { display: table-row; }
tr.row-detail > td { background: var(--color-neutral-100);
  border-bottom: 2px solid var(--color-divider); }
.row-detail-grid { display: grid; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3) var(--space-4); }
.row-detail-grid dt { font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.row-detail-grid dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
/* The help text that used to live only in a tooltip and in the
   collapsed block at the foot of the page. */
.row-detail-grid dd small { display: block; margin-top: 2px;
  font-weight: 400; font-size: 11px; line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }
@media print {
  tr.row-detail, .row-open { display: none !important; }
}