/* FMySchool Exit Pay Check: page styles. The form steps and the mounted letter reuse letter/letter.css.
   Colours: navy and logo blue only (no red), lime for buttons only, no gradients, no shadows. */

.tx-zh { font-size: .55em; color: var(--slate); font-weight: 700; margin-left: .3em; }
.tx-link { font: inherit; font-size: .95rem; font-weight: 700; background: none; border: 0; padding: .4rem 0; cursor: pointer; color: var(--blue-text); text-decoration: underline; text-underline-offset: .15em; min-height: 44px; }

/* No red on this page: the shared letter styles use dark red for asterisks and missing-item lists. */
.exit-page .req { color: var(--navy); }
.exit-page #exit-results .checker__errors li { color: var(--navy); }

/* Collapsible steps 1-4: shared .step-fold styles in css/styles.css. */

/* Short answers (Yes / No / Not sure) side by side; they wrap on very narrow screens. */
.checks.checks--inline { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; }
.checks.checks--inline label { white-space: nowrap; }

.exit-layout { display: grid; gap: 1.5rem; padding-bottom: 3rem; align-items: start; }
@media (min-width: 1000px) { .exit-layout { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2.5rem; } }
.exit-output { min-width: 0; }
#exit-results-section { padding: 0; }
.ex-cap { font-size: .9rem; color: var(--slate); background: var(--tint); border-radius: 6px; padding: .55rem .7rem; margin-top: .6rem; }
.exit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin: 1rem 0 .25rem; }

/* Results */
.ex-results__title { font-size: 1.6rem; margin: 0 0 .8rem; }
.ex-note { background: var(--tint); border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: .7rem .9rem; margin: 0 0 .8rem; font-weight: 600; color: var(--navy); }
.ex-note--top { border-left-color: var(--navy); border-left-width: 6px; font-weight: 700; }
.ex-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin: 0 0 .9rem; }
.ex-card--severance { border: 2px solid var(--navy); }
.ex-card h3, .ex-card h4 { margin: 0 0 .5rem; }
.ex-card p { margin: 0 0 .55rem; }
.ex-card p:last-child { margin-bottom: 0; }
.ex-items__title { font-size: 1.2rem; margin: 1.4rem 0 .6rem; }

/* Status labels: navy and blue only, all at least AA contrast. */
.ex-status { display: inline-block; font-weight: 800; font-size: .9rem; border-radius: 999px; padding: .2rem .75rem; margin: 0 0 .55rem; border: 2px solid var(--navy); }
.ex-status--owed { background: var(--navy); color: var(--white); }
.ex-status--depends { background: var(--white); color: var(--navy); border-color: var(--blue); }
.ex-status--notOwed { background: var(--tint); color: var(--navy); border-color: var(--slate); }
.ex-why { font-size: 1rem; }
.ex-keep { font-size: .95rem; color: var(--charcoal); }

.ex-figure { background: var(--tint); border-radius: 8px; padding: .75rem .9rem; margin: .3rem 0 .7rem; }
.ex-figure__label { font-weight: 700; color: var(--navy); margin: 0 0 .15rem !important; }
.ex-figure__amount { font-size: 1.8rem; font-weight: 800; color: var(--navy); line-height: 1.15; margin: 0 0 .2rem !important; font-variant-numeric: tabular-nums; }
.ex-figure__service { font-size: .9rem; color: var(--slate); margin: 0 !important; }
.ex-line { font-size: .95rem; }

.ex-how { margin: 1.2rem 0 .8rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.ex-how summary { cursor: pointer; font-weight: 800; color: var(--navy); padding: .8rem 1rem; min-height: 44px; }
.ex-how p { padding: 0 1rem; margin: 0 0 .7rem; }
.ex-final { margin-top: 1rem; max-width: none; }
.ex-next { margin-top: 1.25rem; }

/* The handed-off letter */
.exit-letter-section { padding: 2rem 0 0; border-top: 2px solid var(--line); }
.post-note-inline { background: var(--tint); border-left: 4px solid var(--blue); border-radius: 0 6px 6px 0; padding: .6rem .8rem; }

/* Focus is always visible (the site's :focus-visible outline); make sure the letter heading shows it too. */
#exit-letter-title:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Print ----------
   "Print / Save my results" sets data-printing="results": only the results print (no form, chrome or next steps).
   Printing from the letter prints only the letter (letter.css does the letter layout). */
@media print {
  .exit-page .no-print { display: none !important; }
  .exit-page[data-printing="results"] .exit-letter-section { display: none !important; }
  .exit-page.has-letter:not([data-printing="results"]) .exit-layout { display: none !important; }
  .exit-page:not(.has-letter) .exit-letter-section { display: none !important; }
  .exit-page .exit-layout { display: block !important; padding: 0 !important; }
  .exit-page .exit-letter-section { border: 0; padding: 0; }
  .ex-card, .ex-figure { break-inside: avoid; }
  .ex-how { border: 0; }
  .ex-how summary { padding: 0; }
  .ex-how p { padding: 0; }
  /* A closed "How this estimate works" still lays out its hidden paragraphs below the results,
     which pushed an empty second page. Closed: print nothing but the summary line. */
  .ex-how:not([open]) > :not(summary) { display: none !important; }
}

/* Beta banner (top of the tool and top of the printed results). */
.ex-beta { margin: 0 0 1rem; }