/* Source coverage.
 *
 * THE COLOUR RULE, WHICH IS THE ONLY DESIGN DECISION ON THIS PAGE THAT MATTERS
 *
 * There is no success colour in this file. Not one rule paints anything green,
 * and that is the point rather than an aesthetic preference: a green tile on a
 * map of the United States says "we have this state covered" to every person
 * who looks at it, and there is no state for which that sentence is true. The
 * palette is therefore neutral ink for everything that is known and a warning
 * colour for the things a reader would otherwise miss -- a jurisdiction nobody
 * has looked at, a download that failed, a stage that is empty everywhere.
 *
 * The counters are five separate labelled numbers per jurisdiction and never a
 * bar, a ratio or a fill. A bar needs a denominator and there is no honest
 * denominator here: nobody knows how many documents a state's requirements
 * live in, so "3 of N" cannot be written and "60% covered" is invented.
 *
 * Widths. The page is a single column that reflows; every measurement was
 * taken at 400px and at 1280px. Long URLs are the one thing that can push a
 * page sideways, so every field value breaks anywhere.
 */

/* style.css's `.wrap` is 1280px and this page is a column of prose and lists,
   so it is narrowed the same way admin.css narrows it. That is the only shared
   selector this file touches; everything else below is `cov-` prefixed, because
   a page that redefines shared classes breaks pages it has never heard of. */
.wrap { max-width: 68rem; margin: 0 auto; padding: 1rem; }

.cov-title {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid);
}
.cov-head-right { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.cov-back { font-size: 12px; color: var(--accent); text-decoration: underline; white-space: nowrap; }
.cov-audience {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--line); padding: .15rem .4rem;
}

/* The standing statement. Bordered on the left rather than boxed in a colour,
   so it reads as the page speaking rather than as an alert to be dismissed. */
.cov-standing {
  border-left: 3px solid var(--ink-mid); background: var(--sunk);
  padding: .85rem 1rem; margin-bottom: 1rem; font-size: 14px; line-height: 1.55;
}
.cov-standing strong { display: block; margin-bottom: .35rem; }

/* Stage cards. `auto-fit` with a 15rem floor gives five across on a desktop
   and one per row on a phone with no breakpoint of its own. */
/* Five across on a desktop and one per row on a phone, with no breakpoint of
   its own. Five across matters: the stages are a sequence and a fifth card
   orphaned onto its own row reads as a footnote rather than as the end of the
   sequence, which is the opposite of what the empty stage is for. */
.cov-stages { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cov-stage { border: 1px solid var(--line); padding: .75rem; }
.cov-stage h3 { margin: 0 0 .25rem; font-size: 13px; font-family: var(--sans);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid); }
.cov-stage .n { font-family: var(--mono); font-size: 1.7rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cov-stage .n small { font-size: .8rem; font-weight: 400; color: var(--ink-soft); }
.cov-stage p { margin: .4rem 0 0; font-size: 12.5px; line-height: 1.5; }
.cov-stage .not { color: var(--ink-mid); border-top: 1px dashed var(--line); padding-top: .4rem; }
.cov-stage .not b { color: var(--warn-ink, #8a5a00); }
/* The empty stage is drawn differently from the others so that a reader
   cannot mistake its zero for a count that happens to be low today.
   NOT named `.empty`: style.css already has a `.empty` for an empty panel and
   it centres its text and pads it by 2rem. A stage card wearing both was
   centred and twice the height of its four neighbours, which is how this
   collision was found -- in a screenshot, not in a test. */
.cov-stage.cov-stage-zero { border-style: dashed; border-color: var(--line-strong); }
.cov-stage.cov-stage-zero .n { color: var(--ink-soft); }

.cov-nouns { margin: 0; }
.cov-nouns dt { font-family: var(--mono); font-size: 12px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .06em; margin-top: .6rem; }
.cov-nouns dd { margin: .2rem 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-mid); }

.cov-failures { border-left: 3px solid var(--warn-line, #c08a2a); }
.cov-fail { border-bottom: 1px solid var(--line); padding: .5rem 0; font-size: 13px; }
.cov-fail:last-child { border-bottom: 0; }
.cov-fail .why { color: var(--ink); font-family: var(--mono); font-size: 12px;
  overflow-wrap: anywhere; }
.cov-fail .where { color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }

/* The detected panel borrows the failure panel's warning rule and NOTHING
   else. There is no success colour in this stylesheet and a detection does not
   get one either: "flagged" and "not flagged" are not good and bad, they are
   "a pattern matched" and "no pattern matched", and the second one is not a
   check that anybody performed. */
.cov-detected { border-left: 3px solid var(--warn-line, #c08a2a); }
.cov-signal { border-top: 1px dashed var(--line); padding: .45rem 0; font-size: 13px; }
.cov-signal h5 { margin: 0 0 .3rem; font-size: 13px; }
.cov-signal p { margin: .2rem 0; }
/* Same size and weight as the sentence above it: a caveat set in small grey
   type is a caveat nobody reads, and this one is the half that is load bearing. */
.cov-signal .not b { color: var(--warn-ink, #8a5a00); }
.cov-signal .why { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

/* Every link on this page is a government URL and some of them are very long.
   A URL is the one thing here that can make the page scroll sideways, so they
   break anywhere rather than pushing the layout out. Measured at 400px: an
   Alaska DEC URL reached 450px before this rule. */
.wrap a { overflow-wrap: anywhere; word-break: break-word; }

.cov-filters { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end; margin-bottom: .75rem; }
.cov-filters label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cov-filters label span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); }
.cov-filters input, .cov-filters select { width: 100%; min-width: 0; }
.cov-count { font-size: 12px; color: var(--ink-mid); margin: 0 0 .5rem; }

.cov-place { border: 1px solid var(--line); margin-bottom: .4rem; }
.cov-place > summary { cursor: pointer; padding: .55rem .7rem; list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; }
.cov-place > summary::-webkit-details-marker { display: none; }
.cov-place > summary:hover { background: var(--sunk); }
.cov-place .name { font-weight: 600; font-size: 14px; min-width: 9rem; }
/* The five counts, always all five, always labelled, always in stage order.
   A jurisdiction whose only nonzero count is `discovered` therefore looks
   different from one that has a reviewed document, without either being
   reduced to a colour. */
.cov-counts { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-mid); }
.cov-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cov-counts .zero b { color: var(--ink-soft); font-weight: 400; }
.cov-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cov-chip { font-size: var(--fs-min); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: .1rem .35rem; color: var(--ink-mid); }
.cov-chip.warn { border-color: var(--warn-line, #c08a2a); color: var(--warn-ink, #8a5a00); }
.cov-body { padding: .3rem .7rem .8rem; border-top: 1px solid var(--line); }
.cov-caveats { margin: .5rem 0; padding-left: 1.1rem; font-size: 12.5px; line-height: 1.55; }
.cov-caveats li { margin-bottom: .2rem; }

.cov-item { border: 1px solid var(--line); padding: .5rem .6rem; margin: .5rem 0; }
.cov-item h4 { margin: 0 0 .3rem; font-size: 12px; font-family: var(--sans);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mid); }
.cov-fields { display: grid; gap: .1rem .8rem; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 40rem) { .cov-fields { grid-template-columns: 14rem minmax(0, 1fr); } }
.cov-fields dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); }
.cov-fields dd { margin: 0 0 .35rem; font-size: 12.5px; overflow-wrap: anywhere;
  word-break: break-word; }
.cov-fields dd a { overflow-wrap: anywhere; }
/* A missing field says which kind of missing it is, in the cell, in words.
   An empty cell reads as "none" and neither of these means none. */
.cov-fields dd.blank, .cov-fields dd.absent, .cov-fields dd.withheld {
  color: var(--ink-soft); font-style: italic; }
.cov-fields dd .why { display: block; font-style: normal; font-size: 11.5px;
  color: var(--ink-soft); }

.cov-empty { font-size: 12.5px; color: var(--ink-soft); }
.cov-limits { margin: 0; padding-left: 1.1rem; font-size: 13px; line-height: 1.6; }
.cov-limits li { margin-bottom: .3rem; }
/* NOT style.css's `.disclaimer`, which is 11.5px in the softest ink because it
   is designed to sit quietly under a figure. The boundary statement is the most
   important paragraph on this page and is set to be read. */
.cov-boundary { font-size: 12.5px; line-height: 1.6; color: var(--ink-mid);
  border-top: 1px solid var(--line); padding: .8rem 0 2rem; }

/* The warning colour, defined here rather than in style.css so this page adds
   nothing to the shared token set. Both themes, because the page is read in
   both and an amber that works on paper is unreadable on charcoal. */
:root { --warn-line: #c08a2a; --warn-ink: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --warn-line: #8a6a2a; --warn-ink: #d9ad5e; }
}
:root[data-theme="dark"] { --warn-line: #8a6a2a; --warn-ink: #d9ad5e; }