/* f2-7.css — F-2-7 guide article + eligibility/points wizard.
   Built on the "clean premium" tokens in main.css (--wg-ease-spring,
   --wg-focus-ring, --wg-shadow-card …). The modal deliberately lives outside
   .wg-main (appended to document.body by js/f2-7.js) so no animated ancestor
   can become its containing block. */

/* ── Article ──────────────────────────────────────────────────────────── */
.wg-f27 { max-width: 760px; margin: 0 auto; }

.wg-f27-hero {
  background: linear-gradient(180deg, var(--wg-tint), var(--wg-bg));
  border: 1px solid var(--wg-border-soft);
  border-radius: var(--wg-radius-card);
  padding: 22px 20px 24px;
  box-shadow: var(--wg-shadow-card);
}
.wg-f27-kicker {
  display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wg-color-dark); background: rgba(14, 175, 76, .10);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.wg-f27-title { font-size: 1.5rem; line-height: 1.25; margin: 0 0 10px; }
.wg-f27-summary { color: var(--wg-muted); margin: 0 0 18px; line-height: 1.6; }

.wg-f27-cta {
  width: 100%; font-weight: 700; font-size: 1rem;
  padding: 14px 18px; border-radius: 12px;
  transition: transform .14s var(--wg-ease-spring), box-shadow var(--wg-dur) ease;
}
.wg-f27-cta:hover { box-shadow: var(--wg-shadow-hover); }
.wg-f27-cta:active { transform: scale(.985); }
.wg-f27-cta:focus-visible { box-shadow: var(--wg-focus-ring); outline: none; }
.wg-f27-cta-short { display: none; }

.wg-f27-sec { margin: 26px 0; }
.wg-f27-sec h2 { font-size: 1.12rem; margin: 0 0 10px; }
.wg-f27-sec p { line-height: 1.65; margin: 0 0 12px; }

.wg-f27-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.wg-f27-list li { margin-bottom: 4px; }
@media (min-width: 620px) {
  .wg-f27-list-2col { columns: 2; column-gap: 28px; }
  .wg-f27-list-2col li { break-inside: avoid; }
}

.wg-f27-callout {
  border-left: 3px solid var(--wg-color);
  background: var(--wg-tint);
  padding: 12px 14px; border-radius: 0 10px 10px 0;
}
.wg-f27-note {
  background: #fff8e6; border: 1px solid #f5e2ad;
  padding: 12px 14px; border-radius: 10px; font-size: .94rem;
}
.wg-f27-warn { background: #fff5f5; border: 1px solid #f5d0d0; border-radius: var(--wg-radius-card); padding: 18px; }
.wg-f27-source { background: var(--wg-surface); border-radius: var(--wg-radius-card); padding: 18px; }
.wg-f27-ready { background: var(--wg-tint); border: 1px solid var(--wg-border-soft); border-radius: var(--wg-radius-card); padding: 18px; }
.wg-f27-muted { color: var(--wg-muted); font-size: .9rem; }

.wg-f27-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wg-f27-links a {
  display: block; padding: 12px 14px; border: 1px solid var(--wg-border-soft);
  border-radius: 10px; background: var(--wg-bg); font-weight: 600;
  transition: background var(--wg-dur) ease, transform .14s var(--wg-ease-spring);
}
.wg-f27-links a:hover { background: var(--wg-tint); }
.wg-f27-links a:active { transform: scale(.99); }

.wg-f27-foot { border-top: 1px solid var(--wg-border); padding-top: 14px; margin-top: 24px; }
.wg-f27-reviewed { font-weight: 700; margin: 0 0 6px; }

/* ── Wizard modal ─────────────────────────────────────────────────────── */
.wg-f27-modal {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5); padding: 16px;
  animation: wg-backdrop-in .18s ease both;
}
.wg-f27-modal[hidden] { display: none; }

.wg-f27-card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 720px; max-height: 85vh;
  background: var(--wg-bg); border-radius: 18px;
  box-shadow: var(--wg-shadow-pop); overflow: hidden;
  animation: wg-modal-card-in .26s var(--wg-ease-spring) both;
}

.wg-f27-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--wg-border-soft); }
.wg-f27-head h2 { font-size: 1.08rem; margin: 0 0 4px; padding-right: 40px; }
.wg-f27-head p { color: var(--wg-muted); font-size: .9rem; margin: 0; padding-right: 40px; }
.wg-f27-x {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--wg-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background var(--wg-dur) ease, transform .14s var(--wg-ease-spring);
}
.wg-f27-x:hover { background: var(--wg-surface); color: var(--wg-text); }
.wg-f27-x:active { transform: scale(.86); }
.wg-f27-x:focus-visible { box-shadow: var(--wg-focus-ring); outline: none; }

/* Progress */
.wg-f27-prog { padding: 10px 20px 0; }
.wg-f27-prog-bar { height: 6px; border-radius: 999px; background: var(--wg-surface); overflow: hidden; }
.wg-f27-prog-fill {
  height: 100%; background: var(--wg-color); border-radius: 999px;
  transition: width .3s var(--wg-ease-out);
}
.wg-f27-prog-label { font-size: .78rem; color: var(--wg-muted); font-weight: 600; margin-top: 6px; }

/* Scrolling body — only the modal scrolls, never the page behind it. */
.wg-f27-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 20px; -webkit-overflow-scrolling: touch; }

.wg-f27-q { font-size: 1.06rem; font-weight: 700; line-height: 1.4; margin: 0 0 6px; }
.wg-f27-hint { color: var(--wg-muted); font-size: .88rem; margin: 0 0 14px; line-height: 1.5; }

/* Option cards — real radio/checkbox semantics, styled. */
.wg-f27-opts { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.wg-f27-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border: 1.5px solid var(--wg-border);
  border-radius: 12px; cursor: pointer; background: var(--wg-bg);
  font-size: .96rem; line-height: 1.4;
  transition: border-color var(--wg-dur) ease, background var(--wg-dur) ease, transform .12s var(--wg-ease-spring);
}
.wg-f27-opt:hover { border-color: var(--wg-color); background: var(--wg-tint); }
.wg-f27-opt:active { transform: scale(.995); }
.wg-f27-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Selection is shown by border + background + a check glyph, not colour alone. */
.wg-f27-opt.is-on { border-color: var(--wg-color); background: var(--wg-tint); font-weight: 600; }
.wg-f27-opt-mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--wg-border); display: inline-flex;
  align-items: center; justify-content: center; font-size: .8rem;
  color: #fff; background: transparent;
}
.wg-f27-opt[data-multi="1"] .wg-f27-opt-mark { border-radius: 6px; }
.wg-f27-opt.is-on .wg-f27-opt-mark { border-color: var(--wg-color); background: var(--wg-color); }
.wg-f27-opt.is-on .wg-f27-opt-mark::after { content: '✓'; }
.wg-f27-opt:focus-within { box-shadow: var(--wg-focus-ring); border-color: var(--wg-color); }

/* Sticky footer controls */
.wg-f27-foot-ctl {
  flex: 0 0 auto; display: flex; gap: 10px; align-items: center;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wg-border-soft); background: var(--wg-bg);
}
.wg-f27-foot-ctl .wg-btn { flex: 1 1 auto; }
.wg-f27-back {
  flex: 0 0 auto; background: none; border: 1.5px solid var(--wg-border);
  border-radius: 10px; padding: 11px 16px; font-weight: 600; cursor: pointer;
  color: var(--wg-text);
}
.wg-f27-back:hover { background: var(--wg-surface); }
.wg-f27-back:focus-visible { box-shadow: var(--wg-focus-ring); outline: none; }
.wg-f27-next[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Result screen ────────────────────────────────────────────────────── */
.wg-f27-score { text-align: center; padding: 8px 0 16px; }
.wg-f27-score-num { font-size: 2.9rem; font-weight: 800; line-height: 1; color: var(--wg-color-dark); }
.wg-f27-score-ref { color: var(--wg-muted); font-size: .9rem; margin-top: 6px; }
.wg-f27-badge {
  display: inline-block; margin-top: 12px; padding: 7px 14px;
  border-radius: 999px; font-weight: 700; font-size: .86rem;
  border: 1.5px solid currentColor;
}
.wg-f27-badge[data-tone="good"] { color: #0b8f3e; background: #eaf7ef; }
.wg-f27-badge[data-tone="warn"] { color: #a8730a; background: #fff6e5; }
.wg-f27-badge[data-tone="bad"]  { color: #b3261e; background: #fdecea; }

.wg-f27-elig { border-radius: 12px; padding: 14px; margin-bottom: 16px; border: 1px solid var(--wg-border-soft); }
.wg-f27-elig[data-tone="good"] { background: #eaf7ef; border-color: #b9e2c8; }
.wg-f27-elig[data-tone="warn"] { background: #fff6e5; border-color: #f0dcae; }
.wg-f27-elig[data-tone="bad"]  { background: #fdecea; border-color: #f2c4bf; }
.wg-f27-elig h3 { margin: 0 0 6px; font-size: 1rem; }
.wg-f27-elig p { margin: 0 0 8px; font-size: .93rem; line-height: 1.55; }

.wg-f27-rows { margin: 0 0 16px; }
.wg-f27-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--wg-border);
  font-size: .93rem;
}
.wg-f27-row:last-child { border-bottom: 0; }
.wg-f27-row.is-total { font-weight: 800; border-top: 2px solid var(--wg-border); border-bottom: 0; padding-top: 12px; }
.wg-f27-row.is-neg span:last-child { color: #b3261e; }
.wg-f27-row-unver span:last-child { color: #a8730a; }

/* Projection — "if nothing else changes" age trajectory */
.wg-f27-proj-intro { margin-bottom: 4px; }
.wg-f27-proj .wg-f27-row.is-current { font-weight: 700; }
.wg-f27-proj-val { font-variant-numeric: tabular-nums; text-align: right; }
.wg-f27-proj-val small { font-size: .8em; font-weight: 700; }
.wg-f27-proj-val small.is-neg { color: #b3261e; }
.wg-f27-proj-val small.is-pos { color: var(--wg-color-dark); }
.wg-f27-proj-val small.wg-f27-proj-under { display: block; color: #a8730a; font-weight: 600; }

.wg-f27-reclist { padding-left: 20px; line-height: 1.65; margin: 0 0 8px; }
.wg-f27-reclist li { margin-bottom: 6px; }

.wg-f27-acts { display: grid; gap: 8px; margin-top: 14px; }
.wg-f27-acts a, .wg-f27-acts button {
  display: block; width: 100%; text-align: center; padding: 12px 14px;
  border-radius: 10px; border: 1.5px solid var(--wg-border);
  background: var(--wg-bg); font-weight: 600; cursor: pointer; color: var(--wg-text);
}
.wg-f27-acts a:hover, .wg-f27-acts button:hover { background: var(--wg-surface); }
.wg-f27-provenance { font-size: .82rem; color: var(--wg-muted); margin-top: 14px; line-height: 1.5; }

/* ── Mobile: near-fullscreen bottom sheet ─────────────────────────────── */
@media (max-width: 640px) {
  .wg-f27-modal { padding: 0; align-items: flex-end; }
  .wg-f27-card {
    max-width: none; max-height: 94vh; height: 94vh;
    border-radius: 18px 18px 0 0;
    animation: wg-sheet-in .26s var(--wg-ease-out) both;
  }
  .wg-f27-title { font-size: 1.3rem; }
  .wg-f27-cta-full { display: none; }
  .wg-f27-cta-short { display: inline; }
  /* Comfortable tap targets. */
  .wg-f27-opt { padding: 15px 14px; font-size: 1rem; }
  .wg-f27-back, .wg-f27-foot-ctl .wg-btn { padding: 14px 16px; }
}

/* Never let wide content push the page sideways. */
.wg-f27, .wg-f27-body { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .wg-f27-modal, .wg-f27-card { animation: none !important; }
  .wg-f27-cta, .wg-f27-opt, .wg-f27-links a, .wg-f27-x, .wg-f27-prog-fill {
    transition: none !important;
  }
  .wg-f27-cta:active, .wg-f27-opt:active, .wg-f27-x:active, .wg-f27-links a:active {
    transform: none !important;
  }
}

/* ── "What gets scored" criteria summary (rendered from the rules table) ── */
.wg-f27-crit { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.wg-f27-crit-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--wg-border-soft);
  border-radius: 10px; background: var(--wg-bg);
}
.wg-f27-crit-item[data-kind="bonus"] { background: var(--wg-tint); }
.wg-f27-crit-label { font-weight: 600; font-size: .94rem; }
.wg-f27-crit-max {
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--wg-color-dark); flex: 0 0 auto;
}
.wg-f27-crit-item[data-kind="bonus"] .wg-f27-crit-max { color: #a8730a; }
.wg-f27-cta-note { text-align: center; margin-top: 8px; }
.wg-f27-endcta { text-align: center; }
@media (min-width: 620px) { .wg-f27-crit { grid-template-columns: 1fr 1fr; } }