/* f5-11.css — the F-5-11 outstanding-ability points estimator.
   Built on the "clean premium" tokens in main.css, visually sibling to
   the F-2-7 page. Everything is inline on the page — no modal, so no
   stacking-context concerns. */

.wg-f511 { max-width: 760px; margin: 0 auto; }

.wg-f511-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-f511-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-f511-title { font-size: 1.5rem; line-height: 1.25; margin: 0 0 10px; }
.wg-f511-lead { color: var(--wg-muted); margin: 0; line-height: 1.6; }

.wg-f511-sec { margin: 26px 0; }
.wg-f511-sec h2 { font-size: 1.12rem; margin: 0 0 10px; }
.wg-f511-sec p { line-height: 1.65; margin: 0 0 12px; }
.wg-f511-muted { color: var(--wg-muted); font-size: .9rem; line-height: 1.6; }

.wg-f511-callout {
  border-left: 3px solid var(--wg-color);
  background: var(--wg-tint);
  padding: 12px 14px; border-radius: 0 10px 10px 0;
}
.wg-f511-tiers { margin: 0 0 10px; padding-left: 20px; line-height: 1.7; }
.wg-f511-tiers li { margin-bottom: 4px; }

.wg-f511-h { font-size: 1rem; margin: 22px 0 8px; }
.wg-f511-row { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.wg-f511-lab { font-weight: 600; font-size: .92rem; line-height: 1.45; }
.wg-f511-max { color: var(--wg-muted); font-weight: 500; font-size: .8rem; }
.wg-f511-sel {
  width: 100%; padding: 10px 12px; font-size: .92rem;
  border: 1px solid var(--wg-border-soft); border-radius: 10px;
  background: var(--wg-bg); color: inherit;
}
.wg-f511-sel:focus-visible { box-shadow: var(--wg-focus-ring); outline: none; }

.wg-f511-result { position: sticky; bottom: 12px; margin-top: 18px; }
.wg-f511-score {
  border: 1px solid var(--wg-border-soft); border-radius: var(--wg-radius-card);
  background: var(--wg-bg); box-shadow: var(--wg-shadow-card);
  padding: 14px 16px;
}
.wg-f511-nums { display: flex; gap: 18px; font-size: .95rem; margin-bottom: 8px; }
.wg-f511-verdict { font-weight: 700; margin: 0 0 6px; line-height: 1.5; }

/* Distance-to-tier readout (shown only while short of a pass) */
.wg-f511-gaps { margin: 10px 0 12px; }
.wg-f511-gaps-h { font-size: .86rem; font-weight: 800; margin: 0 0 6px; }
.wg-f511-gap {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px dashed var(--wg-border);
  font-size: .86rem; line-height: 1.5;
}
.wg-f511-gap:last-child { border-bottom: 0; }
.wg-f511-gap span:first-child { color: var(--wg-muted); }
.wg-f511-gap span:last-child { font-weight: 700; }
.wg-f511-gap.is-met span:last-child { color: var(--wg-color-dark); }
.wg-f511-ok  { border-left: 4px solid var(--wg-color); }
.wg-f511-mid { border-left: 4px solid #e0a800; }
.wg-f511-low { border-left: 4px solid var(--wg-border-soft); }

.wg-f511-foot { margin: 30px 0 10px; }

@media (min-width: 620px) {
  .wg-f511-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  .wg-f511-lab { flex: 1 1 55%; }
  .wg-f511-sel { flex: 1 1 45%; width: auto; }
}