/* VA Pension and Survivors Pension Calculator, page-specific presentation.
   Uses the shared token system in main.css only; no local color literals
   beyond alpha overlays on the navy result card. Prefix: pcx-. */

.pcx-main { margin: 0 auto; max-width: 1240px; padding: 2rem 1.25rem 4rem; }

/* Hero */
.pcx-hero { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.6rem; }
.pcx-eyebrow { color: var(--color-accent); font-size: .78rem; font-weight: 800; letter-spacing: .11em; margin: 0 0 .3rem; text-transform: uppercase; }
.pcx-hero h1 { color: var(--color-primary); font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
.pcx-lede { color: var(--color-text-muted); font-size: 1.02rem; line-height: 1.55; margin: .7rem auto 0; max-width: var(--prose-measure); }
.pcx-hero > div .pcx-lede { margin-left: 0; }
.pcx-rate-stamp { align-self: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text-muted); font-size: .75rem; min-width: 180px; padding: .75rem .85rem; text-align: right; }
.pcx-rate-stamp strong { color: var(--color-text); display: block; font-size: .86rem; }

/* Program chooser */
.pcx-chooser { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 1.2rem; padding: 1rem; }
.pcx-chooser h2 { font-size: .95rem; margin: 0 0 .7rem; }
.pcx-program-buttons { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcx-program-button { background: var(--color-bg-alt); border: 2px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-text); cursor: pointer; font: inherit; min-height: 74px; padding: .7rem .8rem; text-align: left; }
.pcx-program-button:hover { border-color: var(--color-primary); }
.pcx-program-button strong { color: var(--color-primary); display: block; font-size: .93rem; }
.pcx-program-button small { color: var(--color-text-muted); display: block; line-height: 1.3; margin-top: .18rem; }
.pcx-program-button[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-primary); box-shadow: inset 4px 0 0 var(--color-accent); }

/* Workspace: form left, sticky ledger right on desktop */
.pcx-workspace { align-items: start; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr); }
.pcx-worksheet { display: grid; gap: 1rem; min-width: 0; }

.pcx-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.pcx-card-head { align-items: center; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); display: flex; gap: .75rem; padding: .85rem 1rem; }
/* Explicit navy + white like the result card: the primary token goes light
   in dark mode and would sit white-on-pale. */
.pcx-count { align-items: center; background: #0e2a4d; border: 1px solid #254f7e; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: .78rem; font-weight: 800; height: 28px; justify-content: center; width: 28px; }
.pcx-card-head h2 { color: var(--color-primary); font-size: 1.02rem; margin: 0; }
.pcx-card-body { padding: 1rem; }
.pcx-helper { color: var(--color-text-muted); font-size: .82rem; line-height: 1.5; margin: 0 0 .85rem; }
.pcx-subhead { color: var(--color-primary); font-size: .92rem; margin: 1.1rem 0 .35rem; }

/* Fields */
.pcx-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcx-field { min-width: 0; }
.pcx-field.pcx-wide { grid-column: 1 / -1; }
.pcx-field label { color: var(--color-text); display: block; font-size: .8rem; font-weight: 700; margin-bottom: .28rem; }
.pcx-field input[type="number"], .pcx-field input[type="date"], .pcx-field select {
  background: var(--color-surface); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm);
  color: var(--color-text); font: inherit; min-height: 46px; padding: .6rem .7rem; width: 100%;
}
.pcx-field input:focus, .pcx-field select:focus, .pcx-main button:focus-visible {
  outline: 3px solid var(--color-accent-light); outline-offset: 2px;
}
.pcx-note { color: var(--color-text-muted); display: block; font-size: .72rem; line-height: 1.35; margin-top: .26rem; }
.pcx-money { position: relative; }
.pcx-money > span { color: var(--color-text-muted); left: .7rem; pointer-events: none; position: absolute; top: .72rem; }
/* Must out-rank .pcx-field input[type="number"] or the $ overlaps digits. */
.pcx-field .pcx-money input[type="number"] { padding-left: 1.5rem; }

/* Dynamic rows */
.pcx-rows { display: grid; gap: .7rem; }
.pcx-row { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .7rem; position: relative; }
.pcx-row .pcx-field.pcx-wide { grid-column: 1 / -1; }
.pcx-row-remove { background: transparent; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; font-size: .74rem; grid-column: 1 / -1; justify-self: end; min-height: 44px; padding: .4rem .7rem; }
.pcx-row-remove:hover { border-color: var(--color-danger); color: var(--color-danger); }
.pcx-row-annual { color: var(--color-text-muted); font-size: .74rem; grid-column: 1 / -1; }
.pcx-row-annual strong { color: var(--color-text); }
.pcx-add-row { background: var(--color-surface); border: 2px dashed var(--color-control-border); border-radius: var(--radius-sm); color: var(--color-primary); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; margin-top: .7rem; min-height: 46px; padding: .55rem .8rem; width: 100%; }
.pcx-add-row:hover { border-color: var(--color-primary); }

/* Care-facts subgroup inside a medical row */
.pcx-care-facts { border-left: 3px solid var(--color-accent); display: grid; gap: .55rem; grid-column: 1 / -1; padding: .35rem 0 .1rem .7rem; }
.pcx-care-facts .pcx-field label { font-weight: 600; }

/* Callouts */
.pcx-callout { border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); font-size: .8rem; line-height: 1.45; margin-top: .85rem; padding: .72rem .8rem; }
.pcx-callout strong { display: block; margin-bottom: .15rem; }
.pcx-callout-info { background: var(--color-bg-alt); }
.pcx-callout-warn { background: var(--color-bg-alt); border-left-color: var(--color-warning); }

/* Result panel. The navy card deliberately commits to ONE look in both
   themes, so its background is an explicit navy, NOT var(--color-primary):
   the dark theme remaps that token to a light blue (it doubles as link/text
   color there), which would put white text on a pale card. Every color
   inside the card is explicit for the same reason. */
.pcx-result-panel { min-width: 0; position: sticky; top: 1rem; }
.pcx-result-card { background: #0e2a4d; border: 1px solid #254f7e; border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: #fff; overflow: hidden; }
.pcx-result-top { border-bottom: 1px solid rgba(255, 255, 255, .16); padding: 1rem 1.05rem .9rem; }
.pcx-result-kicker { color: #cbd9e8; font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pcx-result-status { align-items: center; color: #fff; display: flex; font-size: 1.05rem; font-weight: 800; gap: .45rem; margin: .25rem 0 0; }
.pcx-status-dot { background: #67d69f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(103, 214, 159, .18); flex: 0 0 auto; height: 10px; width: 10px; }
.pcx-status-dot[data-tone="warn"] { background: #ffd36f; box-shadow: 0 0 0 4px rgba(255, 211, 111, .18); }
.pcx-status-dot[data-tone="stop"] { background: #ff9b9b; box-shadow: 0 0 0 4px rgba(255, 155, 155, .18); }
.pcx-result-amount { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; margin-top: .9rem; }
.pcx-result-amount span { font-size: .85rem; font-weight: 600; letter-spacing: 0; }
.pcx-annual-result { color: #d8e5f2; font-size: .83rem; margin-top: .35rem; }
.pcx-result-body { padding: 1rem 1.05rem 1.1rem; }
.pcx-status-explain { color: #d8e5f2; font-size: .78rem; line-height: 1.45; margin: 0 0 .8rem; }
.pcx-ledger { display: grid; gap: .48rem; margin: 0; }
.pcx-ledger-row { align-items: baseline; display: flex; gap: .5rem; justify-content: space-between; }
.pcx-ledger-row dt { color: #cbd9e8; font-size: .75rem; }
.pcx-ledger-row dd { font-size: .79rem; font-weight: 700; margin: 0; text-align: right; }
.pcx-ledger-row.pcx-total { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: .25rem; padding-top: .6rem; }
.pcx-review-box { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radius-sm); font-size: .75rem; margin-top: .9rem; padding: .72rem; }
.pcx-review-box strong { color: #ffda85; display: block; margin-bottom: .18rem; }
.pcx-review-box ul { line-height: 1.4; margin: 0; padding-left: 1.1rem; }
.pcx-review-box li + li { margin-top: .3rem; }
.pcx-result-actions { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; margin-top: .9rem; }
.pcx-result-actions button { border: 0; border-radius: var(--radius-sm); cursor: pointer; font: inherit; min-height: 44px; padding: .55rem .62rem; }
.pcx-primary-action { background: var(--color-accent-light); border: 2px solid var(--color-accent) !important; color: var(--color-on-accent); font-weight: 800; }
.pcx-secondary-action { background: transparent; border: 1px solid rgba(255, 255, 255, .48) !important; color: #fff; }
.pcx-privacy-note { color: #cbd9e8; font-size: .68rem; line-height: 1.35; margin: .72rem 0 0; text-align: center; }
.pcx-definitions { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: .76rem; line-height: 1.5; margin-top: 1rem; padding: .85rem .95rem; }
.pcx-definitions strong { color: var(--color-text); }

/* Errors */
.pcx-error { background: var(--color-bg-alt); border: 1px solid var(--color-danger); border-left-width: 4px; border-radius: var(--radius-sm); color: var(--color-danger); font-size: .85rem; padding: .75rem .85rem; }

/* Sources */
.pcx-sources { border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .78rem; margin-top: 1.6rem; padding-top: 1rem; }
.pcx-sources h2 { color: var(--color-primary); font-size: 1rem; margin: 0 0 .5rem; }
.pcx-sources ul { line-height: 1.6; margin: 0; padding-left: 1.2rem; }
.pcx-sources a { color: var(--color-primary); overflow-wrap: anywhere; }

/* Print: only the generated worksheet prints. */
.pcx-print-only { display: none; }
@media print {
  body > *:not(#print-worksheet) { display: none !important; }
  .pcx-print-only { color: #000; display: block; font-size: 11pt; }
  .pcx-print-only h1 { font-size: 15pt; margin: 0 0 4pt; }
  .pcx-print-only h2 { font-size: 12pt; margin: 10pt 0 3pt; }
  .pcx-print-only table { border-collapse: collapse; width: 100%; }
  .pcx-print-only td, .pcx-print-only th { border-bottom: 1px solid #999; padding: 3pt 4pt; text-align: left; }
  .pcx-print-only td:last-child { text-align: right; }
  .pcx-print-only ul { margin: 2pt 0; padding-left: 14pt; }
  .pcx-print-only .pcx-print-muted { color: #444; font-size: 9pt; }
}

/* Responsive: one column, result after the worksheet, nothing scrolls sideways */
@media (max-width: 980px) {
  .pcx-hero { grid-template-columns: 1fr; }
  .pcx-rate-stamp { text-align: left; width: fit-content; }
  .pcx-workspace { grid-template-columns: 1fr; }
  .pcx-result-panel { position: static; }
  .pcx-program-buttons { grid-template-columns: 1fr; }
  .pcx-program-button { min-height: 62px; }
}
@media (max-width: 620px) {
  .pcx-main { padding: 1.25rem .8rem 3rem; }
  .pcx-grid, .pcx-row { grid-template-columns: 1fr; }
  .pcx-result-actions { grid-template-columns: 1fr; }
  .pcx-card-body { padding: .85rem; }
}