/* fn-next-step.css
   Shared styles for the wrong-landing rescue line, the Next step strip (with
   its one-time glint and site search), the sticky Calculate bar, and the
   compact above-the-fold tool layout on every calculator page.
   Colors are explicit per theme (html[data-theme]) so contrast does not depend
   on a page's own tokens: strip and rescue text are checked at 4.5:1 or more
   in both themes by scripts/test-next-step-fleet.mjs. */

:root {
  --fnns-bg: #FFF3D1;
  --fnns-border: #D9B648;
  --fnns-text: #1F1F1F;
  --fnns-link: #0A4C58;
  --fnns-quiet-bg: #F1E8CF;
  --fnns-quiet-text: #3B3B3B;
  --fnns-field-bg: #FFFFFF;
  --fnns-field-text: #1F1F1F;
  --fnns-field-border: #7A6A2E;
  --fnns-btn-bg: #0A4C58;
  --fnns-btn-text: #FFFFFF;
}
html[data-theme="dark"] {
  --fnns-bg: #2B2A22;
  --fnns-border: #8A7A3A;
  --fnns-text: #F4F1E6;
  --fnns-link: #8FE3EE;
  --fnns-quiet-bg: #262626;
  --fnns-quiet-text: #D8D5CA;
  --fnns-field-bg: #17171A;
  --fnns-field-text: #F4F1E6;
  --fnns-field-border: #B8A85A;
  --fnns-btn-bg: #8FE3EE;
  --fnns-btn-text: #0B1F24;
}

/* ---------- rescue line (quiet, under the H1) ---------- */
.fn-rescue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 8px 0 0;
  padding: 2px 10px;
  border-radius: 10px;
  background-color: var(--fnns-quiet-bg);
  color: var(--fnns-quiet-text);
  font-size: 13px;
  line-height: 1.3;
}
.fn-rescue .fn-rescue-label { font-weight: 600; padding-right: 2px; }
.fn-rescue a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 5px;
  color: var(--fnns-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fn-rescue a:hover { text-decoration-thickness: 2px; }

/* ---------- Next step strip ---------- */
.fn-nextstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--fnns-border);
  border-radius: 12px;
  background-color: var(--fnns-bg);
  color: var(--fnns-text);
  /* resting state has no visible band: the glint gradient sits off to the right */
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 320% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
.fn-nextstrip[hidden] { display: none; }
html[data-theme="dark"] .fn-nextstrip {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 62%);
}
.fn-ns-main { flex: 1 1 280px; min-width: 0; font-size: 17px; line-height: 1.4; }
.fn-ns-kicker { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; margin-right: 6px; }
.fn-ns-main a { color: var(--fnns-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fn-ns-search { flex: 1 1 300px; display: flex; gap: 8px; margin: 0; }
/* containment: the form may shrink to the strip's width (its natural 295 px overflowed narrow phones) and the input flexes back to fill the row */
.fn-ns-search { min-width: 0; flex-basis: 100%; }
.fn-ns-search input[type="search"] { width: 0; }
.fn-ns-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  font-size: 16px;
  border: 2px solid var(--fnns-field-border);
  border-radius: 10px;
  background-color: var(--fnns-field-bg);
  color: var(--fnns-field-text);
}
.fn-ns-search input[type="search"]::placeholder { color: var(--fnns-quiet-text); opacity: 1; }
.fn-ns-search button {
  min-height: 52px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  background-color: var(--fnns-btn-bg);
  color: var(--fnns-btn-text);
  cursor: pointer;
}

/* one glint across the strip when it first appears, then static forever.
   Motion only for visitors who have not asked to reduce it. */
@media (prefers-reduced-motion: no-preference) {
  .fn-nextstrip:not([data-ns-done]) {
    animation: fn-ns-glint 1.2s ease-out 1;
  }
}
@keyframes fn-ns-glint {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* ---------- Join the list for new calculators ---------- */
.fn-resultmail {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--fnns-border);
  border-radius: 12px;
  background-color: var(--fnns-quiet-bg);
  color: var(--fnns-quiet-text);
}
.fn-resultmail[hidden] { display: none; }
.fn-rm-title { display: block; margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--fnns-text); }
.fn-rm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-resultmail input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border: 2px solid var(--fnns-field-border);
  border-radius: 10px;
  background-color: var(--fnns-field-bg);
  color: var(--fnns-field-text);
}
.fn-resultmail input[type="email"]::placeholder { color: var(--fnns-quiet-text); opacity: 1; }
.fn-resultmail button {
  min-height: 48px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  background-color: var(--fnns-btn-bg);
  color: var(--fnns-btn-text);
  cursor: pointer;
}
.fn-resultmail button:disabled { opacity: 0.6; cursor: default; }
.fn-rm-fine { margin: 8px 0 0; font-size: 14px; line-height: 1.4; }
.fn-rm-fine a { color: var(--fnns-link); text-decoration: underline; text-underline-offset: 2px; }
.fn-rm-msg { margin: 6px 0 0; font-size: 14px; min-height: 0; }
.fn-rm-msg.is-ok { font-weight: 700; color: var(--fnns-text); }
.fn-rm-msg.is-error { font-weight: 700; color: var(--fnns-text); }

/* ---------- sticky Calculate bar (shown only while the real button is off screen) ---------- */
.fn-quickcalc {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 60;
  min-height: 48px;
  max-width: calc(100vw - 32px);
  padding: 0 24px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  background-color: var(--fnns-btn-bg);
  color: var(--fnns-btn-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fn-quickcalc.is-on { display: inline-flex; align-items: center; }
.fn-quickcalc.is-measure { display: inline-flex; visibility: hidden; }
.fn-quickcalc.is-typing { display: none; }
/* a field scrolled into view by focus or Tab always lands above the sticky bar */
html { scroll-padding-bottom: 84px; }
@media (max-width: 430px) {
  .fn-rescue .fn-rs-extra { display: none; }
  .fn-rescue { font-size: 12.5px; gap: 0 2px; padding: 0 8px; }
  .fn-rescue a { padding: 0 4px; }
}
@media print { .fn-quickcalc, .fn-nextstrip, .fn-resultmail, .fn-rescue { display: none !important; } }

/* ---------- compact tool-first layout: first field in view without scrolling ----------
   Nothing is removed. The decorative hero art steps aside on small screens, and
   the hero and the tool's intro line tighten so the first input (and the sticky
   Calculate bar) land inside a 390x844 and a 1280x800 window. Selectors carry
   html body so they beat each page's own inline hero rules. */
@media (max-width: 700px) {
  html body .hero-art { display: none; }
  html body header.hero > svg { display: none; }
  html body .hero,
  html body .fn-page-hero,
  html body header.hero { padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; }
  html body .hero-inner { gap: 0; }
  html body .hero h1,
  html body .fn-page-hero h1 { font-size: 23px; line-height: 1.12; margin: 2px 0 4px; }
  html body .hero h1 .accent,
  html body .fn-page-hero h1 .accent { display: block; font-size: 14px; line-height: 1.3; margin-top: 4px; }
  html body .eyebrow,
  html body .hero-eyebrow,
  html body .fn-eyebrow { font-size: 11px; letter-spacing: 0.05em; margin: 0 0 2px; padding-top: 0; padding-bottom: 0; }
  html body .hero p[style*="font-size:11px"],
  html body .fn-page-hero p[style*="font-size:11px"] { margin-top: 2px !important; }
  html body .trust-strip { margin: 6px 0 0; padding: 0; gap: 6px; }
  html body .trust-strip li { font-size: 11px; padding: 3px 8px; line-height: 1.2; }
  html body .fn-editorial-byline { font-size: 12px; line-height: 1.3; margin: 2px 0 4px; }
  html body .hero,
  html body .fn-page-hero { padding-left: 14px; padding-right: 14px; }
  html body .print-bar { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  html body .print-btn { padding: 8px 14px; font-size: 14px; }
  html body .print-bar .mode-note { font-size: 12px; line-height: 1.3; }
  html body .ws-section-desc { font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
  html body .ws-section-title { font-size: 18px; line-height: 1.2; }
  html body .dr-asset-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  html body .dr-asset-tabs > * { min-height: 40px; }
  html body .fn-field-help { font-size: 12.5px; line-height: 1.3; margin: 0 0 6px; }
  html body .calc-title { margin-bottom: 4px; font-size: 17px; line-height: 1.25; }
  html body .calc-sub { font-size: 14px; line-height: 1.35; margin-bottom: 10px; }
  html body .fn-breadcrumb { padding-top: 4px; padding-bottom: 4px; }
  html body header.bar { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  html body header.bar nav a { font-size: 14px; padding-left: 6px; padding-right: 6px; }
  html body .fn-breadcrumb ol { font-size: 12.5px; }
  html body .hero,
  html body .fn-page-hero,
  html body header.hero { padding-top: 4px; padding-bottom: 4px; }
  html body .hero h1 .accent,
  html body .fn-page-hero h1 .accent { font-size: 13px; margin-top: 2px; }
  html body .calc-sub { font-size: 13px; margin-bottom: 8px; }
}
@media (min-width: 701px) {
  html body .hero,
  html body .fn-page-hero,
  html body header.hero { padding-top: 14px; padding-bottom: 14px; }
  html body .hero-art { max-height: 84px; }
  html body .hero-art svg { max-height: 84px; width: auto; }
  html body .hero h1,
  html body .fn-page-hero h1 { margin-bottom: 4px; }
  html body .calc-sub { margin-bottom: 12px; }
}

/* Retirement goal picker stays expanded on wide screens (the 2026-09-14 decision); it only gets tighter
   spacing and slightly smaller pills so the tool still starts in the first screen. */
@media (min-width: 1024px) {
  html body .fn-goal-picker { margin-bottom: 6px; }
  html body .fn-goal-picker-body { padding: 6px 10px 8px; }
  html body .fn-goal-picker-q { font-size: 14px; }
  html body .fn-goal-picker-sub { margin-bottom: 2px; font-size: 12px; line-height: 1.25; }
  html body .fn-goal-hub-link { font-size: 12px; }
  html body .fn-goal-pills { gap: 4px; }
  html body .fn-goal-pill { font-size: 12px; padding: 4px 9px; }
  html body .hero:has(.fn-goal-picker) h1 { font-size: 32px; line-height: 1.05; margin-bottom: 2px; }
  html body .hero:has(.fn-goal-picker) h1 .accent { font-size: 18px; margin-top: 2px; }
  html body .hero:has(.fn-goal-picker) { padding-top: 6px; padding-bottom: 6px; }
  html body .hero:has(.fn-goal-picker) .calc-sub { display: block; }
}