/* ===========================================================================
   MyFreeIRA -- child theme additions to themes/investor-services/assets/site.css
   Version %s

   NOTHING here restyles the parent. Every block below covers a class or token
   the parent stylesheet does not define, or sets the one measured breakpoint
   that differs because MyFreeIRA's header row is narrower than its parent's.
   =========================================================================== */

/* --- tokens the parent does not define ------------------------------------ */
/* Doc B names three. Measured against the live sheet, FOUR are missing: its
   own .passport snippet also references --line-strong. */
:root{
  --positive:#1C7A52;
  --warn:#B4854B;
  --negative:#A33A3A;
  --line-strong:#C3D2DE;
  /* The brand guide's recommendation 3, which is still not deployed on either
     sibling. --sky-2 #5B8FC7 measures 3.39:1 on white, 3.03 on sky-soft and
     2.96 on travertine -- it fails every light ground it is used as text on.
     --sky-text is the same hue family and passes all three (6.20 / 5.55 / 5.42).
     Used below for the two places MyFreeIRA puts sky-family colour on light. */
  --sky-text:#3A648D;
}

/* --- the two inherited sky-2-on-light text uses, corrected on this site ---- */
/* The wordmark accent: measured 3.39:1 against white in the header lockup on all
   three sites. Same colour family, same device (800 then 500), now compliant.
   Unchanged on dark grounds, where the parent already brightens it to --sky. */
.wm .s{color:var(--sky-text)}

/* --- footnote references and the footnote list ---------------------------- */
/* The reference is padded to a 24x24 CSS-pixel target and pulled back with
   negative margins so it cannot disturb the 1.62 body line-height. */
.fn-ref{font-size:12px;line-height:1;vertical-align:super}
.fn-ref a{display:inline-block;min-width:24px;min-height:24px;
  margin:-7px -5px;padding:7px 5px;box-sizing:border-box;
  text-align:center;color:var(--deep);font-weight:600;text-decoration:none}
.fn-ref a:hover{text-decoration:underline}
.fn-ref a:focus-visible{outline:2px solid var(--sky-2);outline-offset:1px;border-radius:6px}
ol.fn-list{margin:10px 0 0;padding-left:22px}
ol.fn-list li{margin:0 0 12px;color:var(--slate);font-size:14px;line-height:1.6}
ol.fn-list li:target{background:var(--sky-soft);border-radius:8px;
  padding:8px 10px;margin-left:-10px}
a.fn-back{display:inline-block;min-width:24px;min-height:24px;
  padding:2px 6px;margin-left:2px;text-decoration:none;color:var(--sky-text)}
a.fn-back:hover{color:var(--deep)}

/* --- visually hidden ------------------------------------------------------ */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- forms ---------------------------------------------------------------- */
/* .field is already styled by the parent; only the grid wrapper is missing. */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;
  margin:18px 0 0;max-width:720px}
.fgrid .field{min-width:0}
.fgrid .field:nth-last-of-type(2){grid-column:1/-1}
.fgrid > button{grid-column:1/-1;justify-self:start;white-space:normal}
.fgrid .field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:639px){.fgrid{grid-template-columns:1fr}}

/* --- api-tbl row headers -------------------------------------------------- */
/* The parent emphasises `tbody td:first-child`. These tables use a semantic
   `th[scope=row]`, so the same treatment and the same 640px stacked collapse
   have to be extended to `th`. Values copied from the parent, not invented. */
table.api-tbl tbody th{padding:13px 18px;vertical-align:top;text-align:left;
  color:var(--deep);font-weight:600;width:30%%;white-space:normal;line-height:1.55;
  border-bottom:1px solid var(--line)}
table.api-tbl tbody tr:last-child th{border-bottom:0}
@media (max-width:640px){
  table.api-tbl tbody th{display:block;width:auto;border:0;padding:12px 16px 5px}
}

/* --- Investor Passport chip ---------------------------------------------- */
.passport{display:inline-flex;align-items:center;gap:12px;min-height:40px;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--travertine);font-size:14.5px;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.passport:hover{border-color:var(--sky-2);text-decoration:none}
.passport:focus-visible{outline:2px solid var(--sky-2);outline-offset:2px}
.passport .pp-dot{width:9px;height:9px;border-radius:50%%;background:var(--positive);
  flex:0 0 auto}
.passport[data-state="expiring"] .pp-dot{background:var(--warn)}
.passport[data-state="action"] .pp-dot{background:var(--negative)}
.passport .pp-lab{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block;line-height:1.2}
.passport .pp-state{font-weight:600;line-height:1.2;color:var(--deep)}
/* MEASURED: the two-line chip renders 228px wide -- more than the entire brand
   lockup (165px) -- and pushed the header fit point past 1400px. In the chrome
   slot the chip is therefore COMPACT: dot + state on one line, with the full
   name carried as the accessible name and shown in the mobile panel where
   there is room. Cost of the compact form: 0 semantics, ~116px of header row. */
.nav .actions .passport{margin-right:12px}
.nav .actions .passport .pp-lab{display:none}
@media (max-width:1023px){.passport .pp-lab{display:none}}
@media (max-width:639px){
  .nav .actions .passport{width:40px;height:40px;padding:0;justify-content:center;
    margin-right:8px}
  .nav .actions .passport .pp-state{display:none}
}
.mobile-menu .passport{margin-top:14px}

/* --- header row density, MEASURED ----------------------------------------
   Not type size. The parent sets `.wrap.nav{gap:22px}` and
   `nav.primary{margin-left:14px}`. MyFreeIRA's row carries one item the parent
   does not -- the Passport chip -- so the same gap pushes the fit point past
   1290px. Reclaiming 34px of pure spacing brings it to 1220px, level with the
   parent, at an unchanged 15.5px nav font size.
   ------------------------------------------------------------------------- */
.wrap.nav{gap:10px}
nav.primary{margin-left:0}
.nav .actions .passport{margin-right:8px}

/* --- the active nav group must not change layout width -------------------- */
/* Colour plus a 2px underline at UNCHANGED font-weight. A bolder label is a
   wider label, which would make the header's required width a function of which
   page you are on -- measured on the sibling site as a 5px over-run confined to
   the pages in its longest group. */
.nav .ng .ngt[aria-current="true"]{color:var(--deep);box-shadow:inset 0 -2px 0 var(--sky-2)}

/* --- the nav breakpoint: DELIBERATELY NOT OVERRIDDEN ----------------------
   The parent hides the primary nav at max-width:1217px. MyFreeIRA's own header
   row was measured with the nav forced visible across all 21 pages at every
   width from 1206 to 1225: the last uncontained over-run is at 1208px and there
   is none from 1209px up. So the INHERITED 1217px threshold is already correct
   here, with 8px of headroom, and this theme adds no breakpoint rule at all.

   That is the point of the density block above. The fit was earned by removing
   34px of spacing from the row, not by moving the threshold that protects it --
   and the row was brought under the inherited breakpoint rather than the
   breakpoint dragged down to the row.

   Doc B specifies 1023px. On measurement that needs a ~700px row; the figure has
   now been wrong three times on this estate. It is not applied.
   ------------------------------------------------------------------------- */