/* /dc/pension-calculator, approved V1 presentation (2026-09-11 design,
 * built 2026-09-13).
 *
 * SCOPED to body.pc-page. dc-pension-calculator.css is also loaded by
 * /dc/drill-pay-va-calculator and /dc/crdp-crsc-calculator, so that sheet is
 * left alone and every approved override lives here instead.
 *
 * Tokens: the approved navy/ivory palette is declared as --pc-* on the body,
 * and the site tokens the shared pcx- sheet reads (--color-primary and
 * friends) are remapped only inside <main>, so the shared navbar and footer
 * keep their own colours. Dark mode is declared with BOTH mechanisms
 * (prefers-color-scheme AND [data-theme="dark"]); light-dark() is not used
 * because older Safari drops the whole declaration.
 *
 * Typography follows the site role contract (owner, 2026-09-12): display
 * headings read the shared --font-serif (Source Serif 4, weight 600), all
 * interface text stays Inter. The mockup's Lora was superseded by that
 * decision. No visible text on this page is set below 12px (owner minimum).
 */

.pc-page {
  --pc-bg: #faf8f3; --pc-page: var(--color-page-bg, #f2efe9); --pc-paper: #fffdf9; --pc-raised: #f3efe5; --pc-ink: #173552; --pc-muted: #516172;
  --pc-line: #d4d8dd; --pc-blue: #154b7a; --pc-gold: #e7b343; --pc-selection: #f7efd9; --pc-danger: #9a2727;
  --pc-serif: var(--font-serif, 'Source Serif 4', Georgia, serif);
  background: var(--pc-page);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pc-page {
    --pc-bg: #0c1119; --pc-page: #0c1119; --pc-paper: #19212e; --pc-raised: #202b39; --pc-ink: #f2f2f0; --pc-muted: #b4c2d1;
    --pc-line: #49586a; --pc-blue: #acd4fc; --pc-selection: #303027; --pc-danger: #ffa0a0;
  }
}
:root[data-theme="dark"] .pc-page {
  --pc-bg: #0c1119; --pc-page: #0c1119; --pc-paper: #19212e; --pc-raised: #202b39; --pc-ink: #f2f2f0; --pc-muted: #b4c2d1;
  --pc-line: #49586a; --pc-blue: #acd4fc; --pc-selection: #303027; --pc-danger: #ffa0a0;
}

.pc-page .pcx-main {
  --color-primary: var(--pc-blue); --color-text: var(--pc-ink); --color-text-muted: var(--pc-muted);
  --color-surface: var(--pc-paper); --color-bg-alt: var(--pc-raised); --color-border: var(--pc-line);
  --color-control-border: var(--pc-line); --color-accent: var(--pc-gold); --color-accent-light: var(--pc-selection);
  --color-on-accent: var(--pc-ink); --color-danger: var(--pc-danger); --color-warning: var(--pc-gold);
  --radius-md: 15px; --radius-sm: 8px; --shadow-sm: none; --shadow-md: none;
  background: var(--pc-page); color: var(--pc-ink); font-family: Inter, sans-serif; font-size: 16px; line-height: 1.55;
  max-width: 1192px; padding: 25px 28px 42px; min-width: 0;
}
.pc-page .pcx-main [hidden] { display: none !important; }
.pc-page .pcx-main h1, .pc-page .pcx-main h2, .pc-page .pcx-main h3, .pc-page .pcx-main p { overflow-wrap: break-word; }
.pc-page .pcx-main a { color: var(--pc-blue); text-underline-offset: 4px; }
.pc-page .pcx-main button, .pc-page .pcx-main input, .pc-page .pcx-main select { font-family: inherit; }
.pc-page .pcx-main button, .pc-page .pcx-main summary { cursor: pointer; }
.pc-page .pcx-main img { max-width: 100%; height: auto; display: block; }

/* Focus. The shared sheet rings fields in --color-accent-light, which this
   palette remaps to a pale cream; a ring has to be seen. */
.pc-page .pcx-field input:focus, .pc-page .pcx-field select:focus,
.pc-page .pcx-main button:focus-visible, .pc-page .pcx-main summary:focus-visible, .pc-page .pcx-main a:focus-visible {
  outline: 3px solid var(--pc-blue); outline-offset: 2px;
}
.pc-page .pcx-result-card button:focus-visible, .pc-page .pcx-result-card a:focus-visible,
.pc-page .pcx-result-card summary:focus-visible, .pc-page .pc-mobile-summary a:focus-visible { outline-color: #f1c463; }
.pc-page .pcx-field input[aria-invalid="true"] { border: 2px solid var(--pc-danger); }

/* Hero */
.pc-page .pcx-hero { grid-template-columns: minmax(0, 1fr) 228px; gap: 38px; align-items: center; margin-bottom: 23px; }
.pc-page .pcx-eyebrow { font-size: 12px; letter-spacing: 2px; margin-bottom: 9px; color: var(--pc-blue); }
.pc-page .pcx-hero h1 { font: 600 clamp(30px, 3.6vw, 43px)/1.16 var(--pc-serif); color: var(--pc-ink); letter-spacing: -1.3px; max-width: 850px; }
.pc-page .pcx-lede { font-size: 15px; line-height: 1.75; margin-top: 16px; max-width: 76ch; color: var(--pc-muted); }
.pc-page .pc-hero-art { border-radius: 18px; overflow: hidden; border: 2px solid var(--pc-gold); background: #fbf0df; }
.pc-page .pc-hero-art img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pc-page .pc-meta-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 23px; padding-bottom: 20px; border-bottom: 1px solid var(--pc-line); font-size: 12px; color: var(--pc-muted); }
.pc-page .pcx-rate-stamp { border: 0; background: none; padding: 0; min-width: 0; text-align: left; box-shadow: none; display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--pc-muted); }
.pc-page .pcx-rate-stamp strong { display: inline; font-size: 12px; font-weight: 700; color: var(--pc-ink); }
.pc-page .pc-meta-privacy { display: flex; gap: 7px; align-items: center; }
.pc-page .pc-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-blue); }

/* Program chooser */
.pc-page .pcx-chooser { padding: 0; border: 0; background: none; box-shadow: none; margin-bottom: 26px; }
.pc-page .pcx-chooser h2 { font: 600 21px/1.3 var(--pc-serif); margin: 0 0 12px; color: var(--pc-ink); }
.pc-page .pcx-program-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc-page .pcx-program-button { position: relative; background: var(--pc-paper); border: 2px solid var(--pc-gold); border-radius: 12px; padding: 15px 38px 15px 18px; min-height: 80px; box-shadow: none; }
.pc-page .pcx-program-button:hover { border-color: var(--pc-blue); }
.pc-page .pcx-program-button::after { position: absolute; right: 17px; top: 19px; content: ''; border: 1.5px solid var(--pc-muted); width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box; }
.pc-page .pcx-program-button[aria-pressed="true"] { background: var(--pc-selection); border-color: var(--pc-gold); box-shadow: inset 0 -3px 0 var(--pc-gold); }
.pc-page .pcx-program-button[aria-pressed="true"]::after { background: var(--pc-blue); border: 4px solid var(--pc-selection); outline: 1.5px solid var(--pc-blue); }
.pc-page .pcx-program-button strong { color: var(--pc-ink); font-size: 16px; line-height: 1.3; }
.pc-page .pcx-program-button small { font-size: 12px; color: var(--pc-muted); margin-top: 4px; }

/* Workspace and the five groups */
.pc-page .pcx-workspace { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr); gap: 23px; align-items: start; }
.pc-page .pc-worksheet-column { min-width: 0; }
.pc-page .pc-form-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.pc-page .pc-form-top h2 { font: 600 25px/1.2 var(--pc-serif); margin: 0; color: var(--pc-ink); }
.pc-page .pc-expand-all { border: 0; background: none; color: var(--pc-blue); font-size: 12px; font-weight: 600; padding: 8px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.pc-page .pcx-worksheet { gap: 12px; }
.pc-page .pcx-card { border: 2px solid var(--pc-gold); background: var(--pc-paper); border-radius: 14px; overflow: visible; scroll-margin-top: 20px; box-shadow: none; }
.pc-page .pcx-card-head { border: 0; background: transparent; padding: 19px 20px; list-style: none; gap: 13px; align-items: center; border-radius: 12px; }
.pc-page .pcx-card-head::-webkit-details-marker { display: none; }
.pc-page .pcx-card[open] > .pcx-card-head { border-bottom: 1px solid var(--pc-line); border-radius: 12px 12px 0 0; }
.pc-page .pcx-count { height: 31px; width: 31px; color: var(--pc-ink); background: var(--pc-raised); border: 1px solid var(--pc-line); font-size: 12px; }
.pc-page .pcx-card[open] > .pcx-card-head .pcx-count { color: #fff; background: #0e2a4d; border-color: #0e2a4d; }
.pc-page .pcx-card-head h2 { font: 600 18px/1.3 var(--pc-serif); color: var(--pc-ink); margin: 0; }
.pc-page .pc-section-title { min-width: 0; flex: 1; }
.pc-page .pc-section-summary { font: 400 12px/1.4 Inter, sans-serif; display: block; margin-top: 4px; color: var(--pc-muted); }
.pc-page .pcx-card[open] .pc-section-summary { display: none; }
.pc-page .pc-chevron { font-size: 22px; line-height: 1; transition: transform .2s; color: var(--pc-blue); font-weight: 400; }
.pc-page .pcx-card[open] .pc-chevron { transform: rotate(45deg); }
.pc-page .pcx-card-body { padding: 20px; }
.pc-page .pcx-helper { font-size: 13px; line-height: 1.65; margin-bottom: 18px; }
.pc-page .pcx-grid { gap: 19px 17px; }
.pc-page .pcx-field label, .pc-page .pcx-field > .label { font-size: 13px; line-height: 1.5; margin-bottom: 7px; font-weight: 600; }
.pc-page .pcx-field input[type="number"], .pc-page .pcx-field input[type="date"], .pc-page .pcx-field select { min-height: 48px; font-size: 16px; border-radius: 8px; background: var(--pc-bg); padding: 11px 12px; min-width: 0; color: var(--pc-ink); }
.pc-page .pcx-field .pcx-money input[type="number"] { padding-left: 28px; }
.pc-page .pcx-money > span { top: 12px; font-size: 16px; }
.pc-page .pcx-note { font-size: 12px; line-height: 1.5; margin-top: 7px; color: var(--pc-muted); }
.pc-page .pcx-callout { font-size: 12px; line-height: 1.6; padding: 12px 15px; margin-top: 18px; border-radius: 0 9px 9px 0; background: var(--pc-raised); color: var(--pc-ink); }
.pc-page .pcx-callout strong { font-size: 13px; }
.pc-page .pcx-row { padding: 16px; background: var(--pc-raised); gap: 16px; border: 1px solid var(--pc-line); border-radius: 10px; }
.pc-page .pcx-row-remove { color: var(--pc-blue); border-color: var(--pc-line); font-size: 12px; padding: 8px 12px; }
.pc-page .pcx-add-row { font-size: 13px; border: 1.5px dashed var(--pc-blue); min-height: 48px; padding: 11px 15px; margin-top: 12px; color: var(--pc-blue); background: var(--pc-paper); }
.pc-page .pcx-subhead { font: 600 18px/1.4 var(--pc-serif); color: var(--pc-ink); margin: 23px 0 9px; }
.pc-page .pcx-care-facts { padding-left: 13px; gap: 16px; }
.pc-page .pcx-row-annual { font-size: 12px; }
.pc-page .pc-section-footer { display: flex; justify-content: flex-end; margin-top: 18px; }
.pc-page .pc-continue { background: #0e2a4d; color: #fff; border: 1px solid #0e2a4d; border-radius: 8px; padding: 11px 17px; font-weight: 600; font-size: 13px; min-height: 44px; }
.pc-page .pc-continue span { padding-left: 14px; }
.pc-page .pc-section-note { font-size: 12px; line-height: 1.6; background: var(--pc-selection); color: var(--pc-ink); border-left: 3px solid var(--pc-gold); padding: 11px 13px; margin-bottom: 18px; }
.pc-page .pc-child-note { margin-top: 0; }
.pc-page .pcx-error { margin-top: 3px; color: var(--pc-danger); background: var(--pc-paper); }
.pc-page .pcx-error button { display: block; margin-top: 10px; min-height: 44px; padding: 9px 14px; border: 2px solid var(--pc-danger); border-radius: 8px; background: var(--pc-paper); color: var(--pc-danger); font-weight: 600; font-size: 14px; }

/* Estimate */
.pc-page .pcx-result-panel { top: 20px; position: sticky; }
.pc-page .pcx-result-card { border: 2px solid var(--pc-gold); border-radius: 16px; background: #102e4d; color: #fff; }
.pc-page .pcx-result-top { padding: 23px 23px 18px; }
.pc-page .pcx-result-kicker { font-size: 12px; letter-spacing: 2px; color: #eac16c; margin: 0 0 12px; }
.pc-page .pcx-result-status { font: 600 22px/1.4 var(--pc-serif); color: #fff; gap: 10px; margin: 0; }
.pc-page .pcx-status-dot { height: 8px; width: 8px; }
.pc-page .pcx-result-amount { font: 600 48px/1.15 var(--pc-serif); letter-spacing: -1.5px; margin-top: 20px; color: #fff; }
.pc-page .pcx-result-amount span { display: block; font: 400 13px/1.5 Inter, sans-serif; letter-spacing: 0; margin-top: 4px; color: #d6e3f0; }
.pc-page .pcx-annual-result { font-size: 12px; line-height: 1.6; margin-top: 9px; color: #d6e3f0; }
.pc-page .pcx-result-body { padding: 19px 23px 23px; }
.pc-page .pcx-status-explain { font-size: 12px; line-height: 1.7; color: #d6e3f0; margin-bottom: 16px; }
.pc-page .pcx-main .pc-result-jump { display: block; text-decoration: none; color: #f8d486; background: #1e405f; border: 1px solid #697c87; border-radius: 8px; font-size: 12px; font-weight: 600; padding: 11px 12px; margin-bottom: 18px; min-height: 44px; }
.pc-page .pc-ledger-detail { border-block: 1px solid #ffffff35; padding: 10px 0; margin-bottom: 14px; }
.pc-page .pc-ledger-detail > summary { font-size: 13px; font-weight: 600; padding: 7px 0; color: #fff; min-height: 44px; display: flex; align-items: center; }
.pc-page .pcx-ledger { margin: 15px 0 8px; gap: 11px; }
.pc-page .pcx-ledger-row dt { font-size: 12px; line-height: 1.5; max-width: 68%; color: #cddcec; }
.pc-page .pcx-ledger-row dd { font-size: 13px; line-height: 1.5; color: #fff; }
.pc-page .pcx-review-box { font-size: 12px; line-height: 1.65; padding: 13px; margin-top: 14px; color: #eef4fb; }
.pc-page .pc-assumptions > summary { font-size: 12px; color: #d9e5f1; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.pc-page .pc-assumptions #assumptions-box { margin-top: 6px; background: none; border: 0; padding: 0 0 8px; }
.pc-page .pc-assumptions #assumptions-box > strong { display: none; }
.pc-page .pcx-result-actions { margin-top: 18px; gap: 8px; grid-template-columns: 1fr 1fr; }
.pc-page .pcx-result-actions button { font-size: 12px; font-weight: 600; }
.pc-page .pcx-primary-action { background: #f1c463; color: #122e4a; }
.pc-page .pcx-secondary-action { color: #fff; }
.pc-page .pcx-privacy-note { font-size: 12px; line-height: 1.6; text-align: left; color: #cddcec; margin-top: 18px; }
.pc-page .pcx-definitions { background: none; padding: 14px 3px; border: 0; font-size: 12px; line-height: 1.7; color: var(--pc-muted); }

/* Sources and related cards */
.pc-page .pcx-sources { padding: 0; border: 1px solid var(--pc-line); border-radius: 12px; margin: 32px 0; background: var(--pc-paper); overflow: hidden; }
.pc-page .pcx-sources > summary { padding: 16px 19px; font-size: 14px; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.pc-page .pcx-sources > summary::-webkit-details-marker { display: none; }
.pc-page .pcx-sources h2 { display: inline; font: 600 14px/1.4 Inter, sans-serif; margin: 0; color: var(--pc-ink); }
.pc-page .pcx-sources ul { padding: 0 30px 18px 40px; font-size: 12px; line-height: 1.8; }
.pc-page .pc-related-title { font: 600 27px/1.3 var(--pc-serif); margin: 0 0 15px; color: var(--pc-ink); }
.pc-page .rel-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.pc-page .rel-card { display: block; padding: 0; text-decoration: none; border: 2px solid var(--pc-gold); border-radius: 15px; overflow: hidden; background: var(--pc-paper); transition: transform .18s, border-color .12s; }
.pc-page .rel-card:hover, .pc-page .rel-card:focus-visible { transform: translateY(-3px); border-color: var(--pc-blue); }
.pc-page .rel-card .pc-rel-image { height: 132px; width: 100%; object-fit: cover; background: #fbf0df; }
.pc-page .pc-rel-content { padding: 17px; }
.pc-page .rel-card .rc-t { font: 600 18px/1.35 var(--pc-serif); color: var(--pc-ink); margin-bottom: 8px; }
.pc-page .rel-card .rc-d { font-size: 12px; line-height: 1.65; color: var(--pc-muted); }
.pc-page .pc-rel-link { font-size: 12px; font-weight: 600; color: var(--pc-blue); display: block; margin-top: 13px; }
.pc-page .pc-mobile-summary { display: none; }

/* Desktop estimate reachability (owner, 2026-09-13). With the ledger open the
   estimate is taller than the viewport, and a sticky panel taller than the
   viewport hides its own bottom until the worksheet ends. The panel is capped
   to the space under the sticky navbar and scrolls inside itself, and Print /
   Start over stay pinned to the bottom of what is visible. Text is not shrunk. */
@media (min-width: 761px) {
  .pc-page .pcx-result-panel { top: calc(var(--nav-height, 64px) + 16px); max-height: calc(100vh - var(--nav-height, 64px) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* overflow:hidden on the shared card would make IT the sticky scroller; clip keeps the rounded corners without that. */
  .pc-page .pcx-result-card { overflow: visible; overflow: clip; }
  .pc-page .pcx-result-actions { position: sticky; bottom: 0; z-index: 1; background: #102e4d; margin: 18px -23px 0; padding: 10px 23px; box-shadow: 0 -8px 12px -8px #0006; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .pc-page .pcx-hero { grid-template-columns: minmax(0, 1fr) 170px; gap: 22px; }
  .pc-page .pcx-workspace { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
  .pc-page .pcx-grid { grid-template-columns: 1fr; }
  .pc-page .rel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pc-page .pcx-main { padding: 16px 15px 25px; }
  .pc-page .pcx-hero { display: block; margin-bottom: 16px; }
  .pc-page .pcx-eyebrow { font-size: 12px; letter-spacing: 1.6px; margin-bottom: 7px; }
  .pc-page .pcx-hero h1 { font-size: 29px; line-height: 1.2; letter-spacing: -.85px; }
  .pc-page .pcx-lede { font-size: 14px; line-height: 1.7; margin-top: 12px; }
  .pc-page .pc-hero-art { display: none; }
  .pc-page .pc-meta-line { font-size: 12px; gap: 8px; margin-bottom: 20px; padding-bottom: 15px; }
  .pc-page .pcx-rate-stamp, .pc-page .pcx-rate-stamp strong, .pc-page .pc-meta-privacy { font-size: 12px; }
  .pc-page .pcx-chooser h2 { font-size: 20px; }
  .pc-page .pcx-chooser { margin-bottom: 20px; }
  .pc-page .pcx-program-buttons { gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-page .pcx-program-button { padding: 13px 8px; min-height: 75px; text-align: center; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
  .pc-page .pcx-program-button strong { font-size: 13px; line-height: 1.45; }
  .pc-page .pcx-program-button small, .pc-page .pcx-program-button::after { display: none; }
  .pc-page .pcx-workspace { display: block; }
  .pc-page .pc-form-top h2 { font-size: 23px; }
  .pc-page .pcx-card-head { padding: 16px 13px; gap: 9px; }
  .pc-page .pcx-card-head h2 { font-size: 17px; }
  .pc-page .pcx-count { width: 27px; height: 27px; font-size: 12px; }
  .pc-page .pc-section-summary { font-size: 12px; line-height: 1.5; }
  .pc-page .pcx-card-body { padding: 17px 14px; }
  .pc-page .pcx-grid, .pc-page .pcx-row { grid-template-columns: 1fr; }
  .pc-page .pcx-helper { font-size: 12px; line-height: 1.7; margin-bottom: 16px; }
  .pc-page .pcx-row { padding: 13px; }
  .pc-page .pc-continue { width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .pc-page .pcx-result-panel { position: static; margin-top: 23px; }
  .pc-page .pcx-result-top, .pc-page .pcx-result-body { padding: 20px; }
  .pc-page .pcx-result-amount { font-size: 43px; }
  .pc-page .pcx-result-status { font-size: 22px; }
  .pc-page .pc-mobile-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px));
    position: sticky; bottom: 0; margin: 24px -15px -25px;
    background: #102e4d; color: #fff; border-top: 2px solid var(--pc-gold); z-index: 8; box-shadow: 0 -4px 16px #0002;
  }
  .pc-page .pc-mobile-summary strong { display: block; font-size: 14px; line-height: 1.4; color: #fff; }
  .pc-page .pc-mobile-summary small { font-size: 12px; color: #ceddec; display: block; margin-top: 2px; line-height: 1.5; }
  .pc-page .pcx-main .pc-mobile-summary a { flex-shrink: 0; font-size: 12px; font-weight: 600; border: 1px solid var(--pc-gold); border-radius: 8px; padding: 10px 12px; color: #ffe0a0; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .pc-page[data-input-focus="true"] .pc-mobile-summary { display: none; }
  .pc-page .pcx-sources { margin: 24px 0; }
  .pc-page .pc-related-title { font-size: 24px; }
  .pc-page .rel-cards { grid-template-columns: 1fr; gap: 12px; }
  .pc-page .rel-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); min-height: 144px; }
  .pc-page .rel-card .pc-rel-image { height: 100%; min-height: 144px; object-fit: cover; }
  .pc-page .pc-rel-content { padding: 14px 12px; }
  .pc-page .rel-card .rc-t { font-size: 17px; margin-bottom: 6px; }
  .pc-page .rel-card .rc-d { font-size: 12px; line-height: 1.65; }
  .pc-page .pc-rel-link { font-size: 12px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-page .pcx-main * { scroll-behavior: auto !important; transition: none !important; }
}
.pc-page .pc-stale-note { grid-column: 1 / -1; color: var(--pc-ink); border-left: 3px solid var(--pc-gold); padding-left: 10px; }