/* Mod Check: what Pico doesn't cover. Built on Pico's custom properties, so light and dark
   both work from one set of rules. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--pico-h1-color);
  text-decoration: none;
}
.brand img { width: 1.5rem; height: 1.5rem; display: block; }

header > nav { border-bottom: 1px solid var(--pico-muted-border-color); }

section { scroll-margin-top: 1rem; }
section + section {
  margin-top: calc(var(--pico-block-spacing-vertical) * 2);
  padding-top: calc(var(--pico-block-spacing-vertical) * 2);
  border-top: 1px solid var(--pico-muted-border-color);
}

.lede { font-size: 1.125rem; max-width: 46rem; }
.muted, .hint { color: var(--pico-muted-color); }
.hint { font-size: .875rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.actions > * { margin: 0; }

/* Visually hidden, still read by screen readers. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

fieldset { margin-bottom: calc(var(--pico-block-spacing-vertical) * 1.25); }
legend { margin-bottom: .5rem; }

/* --- expected losses by year ----------------------------------------- */

.years__head,
.years__row {
  display: grid;
  grid-template-columns: 9rem 1fr 1fr;
  gap: .75rem;
  align-items: center;
}
.years__head { font-size: .875rem; color: var(--pico-muted-color); margin-bottom: .35rem; }
.years__row input { margin-bottom: .6rem; }
.years__label { padding-bottom: .6rem; }
@media (max-width: 576px) {
  .years__head, .years__row { grid-template-columns: 5.5rem 1fr 1fr; gap: .5rem; }
  .years__head { font-size: .75rem; }
  .years__label { font-size: .875rem; }
}

/* --- claim rows --------------------------------------------------------- */

.claim {
  display: grid;
  grid-template-columns: 9rem 1fr 1fr auto;
  gap: .75rem;
  align-items: end;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1rem;
}
.claim label { margin-bottom: 0; font-size: .875rem; }
.claim input, .claim select { margin-bottom: .5rem; }
.claim .check { align-self: center; padding-top: 1.25rem; }
.claim .check input { margin-bottom: 0; }
.claim .remove { margin-bottom: .5rem; padding: .5rem .75rem; font-size: .875rem; }
@media (max-width: 576px) {
  .claim { grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
  .claim .remove { justify-self: start; }
  .claim .check { padding-top: 0; }
}

button.submit { width: 100%; }
@media (min-width: 768px) { button.submit { width: auto; padding-inline: 2.5rem; } }

.errors {
  padding: var(--pico-spacing);
  margin-bottom: var(--pico-block-spacing-vertical);
  border: 1px solid var(--pico-del-color);
  border-radius: var(--pico-border-radius);
}
.errors p, .errors ul { margin-bottom: .25rem; }

/* --- results ------------------------------------------------------------ */

.stats { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 0 0 var(--pico-spacing); }
.stats div { margin: 0; }
.stats dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pico-muted-color); }
.stats dd { margin: .25rem 0 0; font-weight: 700; color: var(--pico-h1-color); }
.stats .big { font-size: 2.25rem; line-height: 1.1; }

.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 30rem; }

.target { margin-top: var(--pico-spacing); }
.target label { margin-bottom: 0; }

.offer { margin-top: calc(var(--pico-block-spacing-vertical) * 1.5); }

.features { padding-left: 0; }
.features li {
  position: relative;
  list-style: none;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
}
.features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--pico-primary);
}

details { margin-bottom: 1rem; }

footer.container small { color: var(--pico-muted-color); }

@media print {
  header, footer, #hero, #worksheet, #how, #where, #questions, .no-print { display: none !important; }
  #results { border-top: 0; margin-top: 0; padding-top: 0; }
}