/* Page-scoped styles for the statutory deadline calculator.
   Scope is only the calculator card and the result it injects. Everything else on
   the page (hero, slide gallery, link list, FAQ, CTA) uses the shared blocks and
   their existing styling, so nothing here duplicates those.

   Kept out of editorial.src.css because most of these classes only ever appear in
   JS-injected result markup, which PurgeCSS cannot see. Mirrors the
   value-thresholds and exclusion-check card aesthetic: cream section, white card,
   cobalt top rule, mono eyebrow, hairline rules. */

.deadline-section {
  background: var(--color-cream);
  padding: 72px 0 80px;
}
.deadline-section .section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2rem;
}
/* Without this the global `h2 { font-size: 2.5rem }` and `h2, h3 { color:
   #1e40af }` in main.css win, and the heading renders as bold blue sans-serif
   instead of the editorial serif the sibling tool pages use. */
.deadline-section .section-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.deadline-section .section-header p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.72);
  max-width: 60ch;
  margin: 0 auto;
}

.deadline-card {
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-cobalt);
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.75rem 1.75rem;
}

.deadline-form__group {
  margin-bottom: 1.25rem;
}
.deadline-form__group:last-child {
  margin-bottom: 0;
}
.deadline-form__hint {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.62);
  margin: 0.45rem 0 0;
}
.deadline-card .form-label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  color: rgba(15, 23, 42, 0.68);
  margin-bottom: 0.4rem;
}
.deadline-card .form-input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-radius: 0;
}
.deadline-card .form-input:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 1px;
}

/* Sits between the form and the result, so it reads as guidance on filling the
   form rather than as part of the answer. */
.deadline-form__aside {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.66);
}

.deadline-result:empty {
  display: none;
}

.deadline-answer {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
}
.deadline-answer__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.6);
  margin: 0 0 0.35rem;
}
.deadline-answer__date {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-cobalt);
  margin: 0 0 0.5rem;
}
/* Carries the floor-versus-cutoff distinction. A statutory minimum presented as
   "the deadline" is a different legal statement from a preclusive cutoff, so this
   line is load-bearing rather than decorative. */
.deadline-answer__kind {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 0.9rem;
}
.deadline-answer__meta {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.68);
  margin: 0 0 0.35rem;
}

.deadline-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.6rem 0 0.75rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-rule);
  background: var(--color-cream);
}
.deadline-chip__label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}
.deadline-chip__value {
  font-family: var(--font-mono, monospace);
  font-size: 0.86rem;
  color: var(--color-ink);
}

.deadline-answer__statute {
  margin: 0 0 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--color-cobalt);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.86);
}
.deadline-answer__note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.72);
  margin: 0 0 0.7rem;
}

.deadline-answer__divergence {
  margin: 0 0 0.9rem;
  padding: 0.8rem 0.9rem;
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
}
.deadline-answer__readings {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.deadline-answer__skipped {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
}
.deadline-answer__skipped summary {
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.62);
}
.deadline-answer__skipped ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.75);
}

/* Sits with the result, never in a page footer. A reader who acts on a date must
   see the caveat attached to that date. */
.deadline-answer__disclaimer {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-rule);
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.6);
}

.deadline-answer--blocked .deadline-answer__blocked {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0 0 0.6rem;
}
.deadline-answer--qualitative .deadline-answer__eyebrow {
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 1rem;
  font-family: var(--font-display);
}

/* ---------- source attribution for the working-day calendar --------------- */

.deadline-sources {
  background: var(--color-cream);
  padding: 64px 0 72px;
}
.deadline-sources__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}
/* h3 rather than h2: this supports the calculator, it does not compete with the
   section headings above. The serif override is still needed because main.css
   colours every h3 cobalt and sets a sans stack. */
.deadline-sources__header h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 0.6rem;
}
.deadline-sources__header p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.72);
  margin: 0;
}

/* Two up, not three. The bodies run past 20 words, and the editorial sheet caps
   dense tiles at two columns for exactly that reason. */
.deadline-sources__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
}
.deadline-sources__card {
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-cobalt);
  padding: 1.35rem 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* !important is required, not sloppy: main.css ships `h4 { color: #2563eb
   !important }`, which beats a class selector. The shared editorial sheet
   overrides the same global the same way. */
.deadline-sources__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--color-ink) !important;
  margin: 0;
}
.deadline-sources__body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.78);
  margin: 0;
}
@media (max-width: 600px) {
  .deadline-card {
    padding: 1.5rem 1.15rem 1.25rem;
  }
  .deadline-sources__grid {
    grid-template-columns: 1fr;
  }
}