/* Eligibility tool — tool-specific layer.
   Loads AFTER ../../design/tokens.css and ../../design/components.css.
   Only styling particular to this tool belongs here: screen switching,
   the 660px question column, and entry-screen copy treatments. Anything
   another MDGSI tool could reuse goes in design/components.css instead. */

/* Single-page screen switching */
.screen[hidden] { display: none; }

/* Desktop contact uses an on-page inquiry; narrow screens keep call/text. */
.contact-block .contact-actions.mobile-contact, body .mobile-contact { display: none; }
.header-message {
  background: none; border: 0; padding: 8px 0; font: inherit;
  color: var(--teal); font-weight: 600; cursor: pointer;
}
.header-message:hover { text-decoration: underline; }
.contact-block > .desktop-contact { width: 100%; }
#bill-message-panel[hidden], #bill-message-form[hidden] { display: none; }
#bill-message-panel { scroll-margin-top: var(--space-5); }
#bill-message-context { overflow-wrap: anywhere; }
#message-question {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px;
  font: inherit; color: var(--navy); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius-control);
  padding: 12px; line-height: 1.5;
}
#message-question:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 620px) {
  body .desktop-contact { display: none; }
  body .mobile-contact { display: flex; gap: var(--space-2); }
  .header-contact .mobile-contact { display: inline; }
  .contact-block .contact-actions.mobile-contact { display: grid; }
}

/* Keep the exact-date controls on one row without changing the shared system. */
#screen-timing .date-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: var(--space-2);
}
#screen-timing .date-row select { width: 100%; min-width: 0; }
@media (max-width: 380px) {
  #screen-timing .date-row { gap: var(--space-1); grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0, 1fr); }
  #screen-timing .date-row select { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* The tool runs in a narrow reading column; the footer text matches it. */
main {
  max-width: 660px;
  padding: var(--space-6) 0 var(--space-9);
}
.site-footer__inner { max-width: 660px; }

/* Entry-screen copy treatments */
.promise { color: var(--muted); font-size: 15px; margin: var(--space-3) 0 var(--space-2); }
.promise + .search-wrap { margin-top: var(--space-5); }

/* Entry-screen institution panel, directly under the search. */
.entry-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 0;
}
.entry-panel h2 { font-size: 18px; margin: 0; }
.programs-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-5);
  font-size: 14px;
}
.programs-list li { break-inside: avoid; padding: 3px 0; }
.programs-toggle { display: none; }
.gme-notice { margin: var(--space-2) 0 0; }
@media (max-width: 620px) {
  .entry-panel { padding: var(--space-4); }
  /* Mobile: collapsed behind the toggle, heading stays visible. */
  .programs-list { columns: 1; display: none; }
  .programs-panel.is-open .programs-list { display: block; }
  .programs-toggle {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 6px 0;
    background: none; border: 0;
    font: inherit; font-weight: 600; color: var(--teal);
    cursor: pointer;
  }
  .programs-toggle:hover { text-decoration: underline; }
}

/* The search prompt is the most important element on the page. */
.search-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: var(--space-3);
}

/* Program-confirmation hero: the offer must be unmissable. */
.confirm-hero {
  text-align: center;
  background: var(--white);
  border: 1.5px solid var(--positive);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-5);
}
.confirm-check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--positive-soft);
  color: var(--positive);
  font-size: 30px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.confirm-hero h1 { font-size: clamp(28px, 4vw, 38px); }
.confirm-hero p:not(.eyebrow) { max-width: 46ch; margin-left: auto; margin-right: auto; }
.confirm-nav { justify-content: center; }
@media (max-width: 620px) { .confirm-nav { flex-direction: column-reverse; } }

/* Managed result headline: the verdict, enlarged. */
.result-headline { font-size: clamp(30px, 4.5vw, 44px); }

/* Quote actions use logo blue to stand apart from the green benefit panel. */
#managed-cta, #generic-cta.btn-cta-major {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--white);
  box-shadow: 0 10px 28px rgba(22, 97, 167, .22);
}
#managed-cta:hover, #generic-cta.btn-cta-major:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  box-shadow: 0 13px 30px rgba(22, 97, 167, .28);
}
#screen-result .lead-form button[type="submit"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
#screen-result .lead-form button[type="submit"]:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}
.managed-next-step { border-top: 4px solid var(--navy); }

/* Entry-screen information sections */
.entry-info { margin-top: var(--space-9); }

.entry-section { margin-top: var(--space-8); }
.entry-section:first-child { margin-top: 0; }
.entry-section h2 { margin-bottom: var(--space-3); }
.entry-section > p { font-size: 15px; }

@media (max-width: 620px) {
  main { padding-top: var(--space-5); }
  .entry-info { margin-top: var(--space-8); }
}

/* Institution pages retain the shared question and result layout. */
.institution-mode #screen-entry, .institution-mode #screen-confirm { display: none; }
.institution-scope { padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--color-border, #ccd6d6); border-radius: 8px; background: #f3f8f7; }
.institution-scope p { margin: .5rem 0 0; }
.embed-mode .site-header { display: none; }
.embed-mode body { min-height: 0; }
.embed-mode main { padding-top: 1rem; }
/* The host page supplies the outer gutter, so the embed uses a slimmer one. */
html.embed-mode { --container: min(1180px, calc(100% - 1.5rem)); }
.embed-mode main { padding-bottom: 0; }
.embed-mode .site-footer { background: transparent; color: var(--muted, #4a5a68); margin-top: var(--space-6); }
.embed-mode .site-footer__inner { padding: var(--space-4) 0 var(--space-2); border-top: 1px solid var(--line, #ccd6d6); font-size: 13px; }
.institution-mode [hidden] { display: none !important; }