/* fn-calc-rail.css -- shared calculator page template pieces, pilot 2026-09-14
   Brief: _BRIEF_CALCULATOR_PAGE_TEMPLATE_CALCNET_SHAPE_2026-09-14.md
   Three additive components, built to sit on top of the existing
   .fn-page-wrap / .fn-main-col / .fn-sidebar grid in fn-styles.css:
     1. .calc-split      -- inputs left / result right, first viewport
     2. .related-pills-wrap -- pill restyle of the existing .fn-related
        fieldset (wrapper class only; the fieldset itself keeps its bare
        class="fn-related" so the FN06 legend-count check still parses it)
     3. .calc-rail       -- ad slot + search + category box inside .fn-sidebar
   Nothing here overrides fn-styles.css tokens; same --petrol/--accent/etc. */

/* 1. Result panel beside inputs, tool first on mobile */
@media (min-width: 900px) {
  .calc-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .calc-result-col {
    position: sticky;
    top: 96px;
  }
}

/* 2. Related pills, directly under the calculator */
.related-pills-wrap {
  margin: 20px 0 24px;
}
.related-pills-wrap .fn-related {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  align-items: center;
}
.related-pills-wrap .fn-related legend {
  width: 100%;
  padding: 0 0 8px;
  font-size: 11px;
}
.related-pills-wrap .fn-related a {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 1.5px solid var(--petrol);
  color: var(--petrol);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.related-pills-wrap .fn-related a:hover {
  background: var(--petrol);
  color: var(--paper);
}
/* dark-mode-only override: --petrol on the pill's --paper-soft background
   measures 3.66:1 in dark theme (below the 4.5:1 text floor); --teal-deep
   measures 5.06:1+ there, same fix already shipped on the Personal Finance
   and Real Estate hub pages (see their own dark-mode CSS comments). Light
   mode petrol already clears 7.89:1 on this background, so it stays the
   default and is only overridden here. Found and fixed 2026-09-14 while
   templating the Personal Finance cluster; this file is shared by every
   templated calculator page, so the fix applies fleet-wide. */
[data-theme="dark"] .related-pills-wrap .fn-related a {
  color: var(--teal-deep);
  border-color: var(--teal-deep);
}
[data-theme="dark"] .related-pills-wrap .fn-related a:hover {
  background: var(--teal-deep);
  color: var(--paper);
}
/* the middle-dot separators the shared fieldset markup still renders
   between <a> tags read oddly between pills; fold them into the gap */
.related-pills-wrap .fn-related {
  font-size: 0;
}

/* 2b. Rail follows the visitor at desktop (Tomi HARD RULE, 2026-09-14): the
   ad slot and category box must stay beside the tool/result panel as the
   page scrolls, not just sit at the top of the grid column next to the
   hero. fn-styles.css already makes .fn-sidebar position:sticky; top:80px
   (confirmed live, own Browser tab: after scrolling so .calc-split's top
   reaches the viewport, the rail's sticky top and the panel's top land
   within about 16px of each other on 401k). This rule is the calc-rail
   component's own explicit, scoped declaration of that same contract
   (aside.calc-rail's specificity wins over the generic .fn-sidebar rule),
   so the rail's sticky behavior does not depend on an unrelated shared
   selector staying unchanged. No ancestor between aside.calc-rail and
   .fn-page-wrap sets overflow:hidden (checked live: fn-page-wrap, body,
   html are all overflow:visible), so sticky is not defeated anywhere in
   this chain. Below 960px the existing @media (max-width:960px) block in
   fn-styles.css already forces .fn-sidebar to position:static and stacks
   it, unchanged by this rule. */
@media (min-width: 960px) {
  aside.calc-rail {
    position: sticky;
    top: 1rem;
    align-self: start;
  }
}

/* 3. Right rail contents: ad slot + search + category box */
.calc-rail .rail-search {
  margin: 0 0 16px;
}
.calc-rail .rail-search form {
  display: flex;
  gap: 8px;
}
.calc-rail .rail-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--paper-soft);
  color: var(--ink);
}
.calc-rail .rail-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}
.calc-rail .rail-search button {
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: var(--petrol);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.calc-rail .rail-search button:hover {
  background: var(--accent);
  color: var(--ink);
}
.calc-rail .rail-category-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--paper);
}
.calc-rail .rail-category-box h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--ink);
  border-top: none;
  padding-top: 0;
  display: block;
}
.calc-rail .rail-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.calc-rail .rail-cat-grid li {
  font-size: 13px;
}
.calc-rail .rail-cat-grid a {
  color: var(--petrol);
  text-decoration: none;
  font-weight: 600;
}
.calc-rail .rail-cat-grid a:hover {
  text-decoration: underline;
}
.calc-rail .rail-cat-more {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.calc-rail .rail-cat-more:hover {
  text-decoration: underline;
}

/* Mobile: rail already falls after the full article (DOM order, see
   fn-styles.css .fn-page-wrap collapse at 960px). The category box
   restates the same links as the related pills, so it is hidden below
   960px rather than shown twice on one page. */
@media (max-width: 960px) {
  .calc-rail .rail-category-box {
    display: none;
  }
}

/* Ad-slot debug outline: hidden by default (fn-ad-slot:empty already
   collapses it), shown with a dashed placeholder only when fn-calc-rail.js
   detects ?ads=1 in the URL, for review screenshots. */
.fn-ad-slot.fn-ad-debug {
  display: flex !important;
}

/* In-prose links (Tomi HARD RULE, 2026-09-14): every H2 section of the
   article carries at least one in-sentence link to a genuine next-question
   calculator. Styled as part of the sentence, not a button or pill,
   distinct from the teal default body-copy link color used elsewhere on
   the page.

   Contrast fix (2026-09-14, fleet finding 2 / Nehemiah's PR #240 audit,
   G07): the original var(--accent) (brand orange, #F28B30 light /
   #FF9E4A dark) measured 2.41:1 against --paper and 2.33:1 against
   --paper-soft in light mode, on all 20 pages that load this file and use
   the class, under the 4.5:1 floor. var(--accent) is also only defined
   per-page (most of the 20 pages set --accent: var(--orange) locally; 4 of
   them define no --accent at all, so the old rule silently fell back to an
   inherited color on those 4 -- see the evidence file). --petrol clears
   4.5:1 against both light surfaces by a wide margin (8.14:1 / 7.89:1,
   computed, not guessed) and is already the page's brand-trust color, so
   light mode now uses it directly instead of the per-page --accent alias.
   Dark mode was measured too: --orange (referenced directly now instead of
   the sometimes-undefined --accent) already clears the floor there
   (7.62:1 / 5.47:1), so dark mode is left as brand-orange, unchanged.
   Hover: --coral fails the same light-mode floor (2.66:1 / 2.58:1); --ink
   passes everywhere (16.98:1 / 16.44:1 light, 12.96:1 / 9.30:1 dark) and
   reads as a natural "link darkens on hover" step from --petrol. Dark
   mode's hover keeps its already-passing --coral (6.84:1 / 4.90:1),
   unchanged. Underline is untouched in every case, so the link stays
   recognizable as a link regardless of color. No background token
   touched. Full numbers: 02_Content_and_Articles/
   _EVIDENCE_INLINE_LINK_LIGHT_CONTRAST_2026-09-14.md. */
.fn-inline-link {
  color: var(--petrol);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.fn-inline-link:hover {
  color: var(--ink);
}
[data-theme="dark"] .fn-inline-link {
  color: var(--orange);
}
[data-theme="dark"] .fn-inline-link:hover {
  color: var(--coral);
}

/* Whitespace pass (Tomi HARD RULE, 2026-09-14): .fn-ad-row is display:flex
   in fn-styles.css, which blocks its own top/bottom margins from collapsing
   through it when its ad slot is empty (the normal pre-monetization state).
   That turns one 28px margin into a 56px dead gap between whatever sits
   above and below an empty ad row. Scoped to the four pilot pages only
   (this stylesheet isn't loaded elsewhere) rather than touching the
   shared .fn-ad-row rule fleet-wide.
   728x90 and other ad-slot variants already self-center via
   margin-left/right:auto in fn-styles.css, so block display still centers
   correctly once an ad actually fills the slot. */
.fn-ad-row {
  display: block;
  text-align: center;
}

/* .fn-ad-slot.size-300x250/336x280 rely on the parent .fn-ad-row's
   justify-content:center for horizontal centering (unlike size-728x90,
   which already has margin:auto of its own). Now that .fn-ad-row is block
   display on these four pages, give the two fixed-width variants their
   own centering too, so a slot that later fills with a real ad still
   lands centered instead of left-hugging. */
.fn-ad-slot.size-300x250,
.fn-ad-slot.size-336x280 {
  margin-left: auto;
  margin-right: auto;
}