/* Coverage Watch toolkit: components on top of tokens.css and site.css */

.tk-nav { border-bottom: 1px solid var(--color-rule); background: var(--color-band); }
.tk-nav ul { list-style: none; display: flex; gap: var(--space-2) var(--space-4); overflow-x: auto; padding-block: var(--space-3); scrollbar-width: thin; }
.tk-nav a { white-space: nowrap; font-size: var(--text-small); color: var(--color-text); text-decoration: none; padding-block: var(--space-1); border-bottom: 2px solid transparent; }
.tk-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); font-weight: 600; }
.tk-nav a:hover { border-bottom-color: var(--color-rule); }

.tk-hero { padding-block: var(--space-7) var(--space-6); }
.tk-hero h1 { font-size: var(--text-h2); line-height: var(--leading-heading); max-width: 22em; }
@media (min-width: 64rem) { .tk-hero h1 { font-size: 3rem; } }
.tk-hero .lead { margin-top: var(--space-4); }
.eyebrow { font-size: var(--text-small); font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-3); display: block; }

.notice-box { border-left: 4px solid var(--color-accent); background: var(--color-band); padding: var(--space-4); max-width: 46rem; font-size: var(--text-small); }
.notice-box strong { color: var(--color-text); }
.notice-box p + p { margin-top: var(--space-2); }

.tk-section { padding-block: var(--space-7); border-top: 1px solid var(--color-rule); }
.tk-section h2 { font-size: var(--text-h2); line-height: var(--leading-heading); max-width: 24em; }
.tk-section h3 { font-size: var(--text-h3); line-height: var(--leading-heading); margin-top: var(--space-6); }
.tk-section h3:first-child { margin-top: 0; }
.tk-body > * + * { margin-top: var(--space-4); }
.tk-body p, .tk-body li { max-width: var(--measure); }
.tk-body ul, .tk-body ol { padding-left: 1.25em; }
.tk-body li + li { margin-top: var(--space-2); }

.dates { list-style: none; padding: 0 !important; display: grid; gap: 0; max-width: 46rem; }
.dates li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--color-rule); margin: 0 !important; max-width: none; }
.dates li:last-child { border-bottom: 1px solid var(--color-rule); }
.dates .when { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 30rem) { .dates li { grid-template-columns: 1fr; gap: var(--space-1); } }

.tk-table-wrap { overflow-x: auto; max-width: 52rem; }
.tk-table { border-collapse: collapse; width: 100%; font-size: var(--text-small); }
.tk-table th, .tk-table td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--color-rule); }
.tk-table th { font-weight: 600; background: var(--color-band); }
.tk-table td:first-child { font-weight: 600; min-width: 11rem; }

.cards { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards li { margin: 0 !important; max-width: none; border: 1px solid var(--color-rule); padding: var(--space-4); background: var(--color-bg); }
.cards h3 { margin-top: 0 !important; font-size: var(--text-body); font-family: var(--font-sans); font-weight: 600; }
.cards p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text-muted); }
.cards a { font-weight: 600; }

.role { border-top: 1px solid var(--color-rule); padding-top: var(--space-5); margin-top: var(--space-6) !important; }
.role h3 { margin-top: 0; }
.role .who { color: var(--color-text-muted); font-size: var(--text-small); margin-top: var(--space-1); }
.role details { margin-top: var(--space-3); }

details { border: 1px solid var(--color-rule); padding: var(--space-3) var(--space-4); max-width: 46rem; background: var(--color-bg); }
details + details { margin-top: var(--space-2) !important; }
summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
details[open] summary { margin-bottom: var(--space-3); }
details > *:not(summary) + * { margin-top: var(--space-3); }

.checklist { list-style: none; padding: 0 !important; }
.checklist li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2); align-items: start; margin: 0 !important; padding-block: var(--space-2); border-bottom: 1px dotted var(--color-rule); }
.checklist input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.3rem; accent-color: var(--color-accent); }
.checklist label { cursor: pointer; }

.script { border-left: 3px solid var(--color-rule); padding-left: var(--space-4); font-style: normal; max-width: 44rem; }
.script p + p { margin-top: var(--space-2); }
.script .say { display: block; font-size: var(--text-small); font-weight: 600; color: var(--color-text-muted); }

/* Forms */
.form { display: grid; gap: var(--space-5); max-width: 46rem; }
.field { display: grid; gap: var(--space-2); }
.field label, .field legend { font-weight: 600; }
.field .hint { font-size: var(--text-small); color: var(--color-text-muted); }
.field input[type="text"], .field input[type="date"], .field select, .field textarea {
  font: inherit; font-size: var(--text-body); color: var(--color-text); background: var(--color-bg);
  border: 1px solid #8A8A86; border-radius: 4px; padding: 0.6rem 0.75rem; width: 100%; max-width: 32rem; min-height: 2.75rem;
}
.field textarea { min-height: 6rem; max-width: 44rem; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.options { display: grid; gap: var(--space-2); }
.options label { font-weight: 400; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2); align-items: start; cursor: pointer; }
.options input { width: 1.25rem; height: 1.25rem; margin-top: 0.3rem; accent-color: var(--color-accent); }
.row-2 { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .row-2 { grid-template-columns: 1fr 1fr; } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn { font: inherit; font-size: var(--text-small); font-weight: 600; border-radius: 999px; padding: 0.65rem 1.4rem; min-height: 2.75rem; cursor: pointer; border: 1px solid var(--color-text); background: var(--color-text); color: var(--color-bg); }
.btn--ghost { background: var(--color-bg); color: var(--color-text); }
.status { font-size: var(--text-small); color: var(--color-accent); min-height: 1.5em; }

.result { border: 2px solid var(--color-text); padding: var(--space-5); max-width: 46rem; background: var(--color-bg); }
.result h2 { font-size: var(--text-h3); }
.result h3 { font-size: var(--text-body); font-family: var(--font-sans); margin-top: var(--space-5); }
.result ul { padding-left: 1.25em; }
.result li + li { margin-top: var(--space-2); }
.result .path { border-top: 1px solid var(--color-rule); padding-top: var(--space-4); margin-top: var(--space-4); }

.letter { border: 1px solid var(--color-rule); padding: var(--space-6); max-width: 46rem; background: #FFFFFF; font-family: var(--font-sans); white-space: normal; }
.letter p + p { margin-top: var(--space-3); }
.letter ul { padding-left: 1.25em; margin-top: var(--space-2); }

.lang-switch { font-size: var(--text-small); }
.pill-group { display: inline-flex; border: 1px solid var(--color-rule); border-radius: 999px; overflow: hidden; }
.pill-group button { font: inherit; font-size: var(--text-small); border: 0; background: var(--color-bg); color: var(--color-text); padding: 0.4rem 1rem; min-height: 2.75rem; cursor: pointer; }
.pill-group button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }

.plan-card { border: 2px dashed var(--color-text-muted); padding: var(--space-5); max-width: 40rem; }
.plan-card .line { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--space-3); align-items: end; padding-block: var(--space-2); }
.plan-card .line span:last-child { border-bottom: 1px solid var(--color-text-muted); min-height: 1.6em; }
@media (max-width: 30rem) { .plan-card .line { grid-template-columns: 1fr; } }

.updated { font-size: var(--text-small); color: var(--color-text-muted); }

@media print {
  .site-header, .tk-nav, .site-footer, .btn-row, .no-print, .skip-link { display: none !important; }
  body { font-size: 12pt; }
  .tk-section { padding-block: 12pt; border: 0; }
  .letter { border: 0; padding: 0; }
  details { border: 0; padding: 0; }
  details > * { display: block !important; }
  a { color: #000; }
  .print-only { display: block !important; }
}
.print-only { display: none; }