/* Retirement page — left inputs (actual employee data) / right analysis.
   Brand-true layout cloned from PACIGEA my-retirement but recoloured to
   leavefrm deep-navy. Tile gradients use the brand palette in three depth
   layers, not the AI default purple/orange. */

.ret-grid {
  display: grid;
  /* Favor the Computation Analysis card so wide peso amounts fit unhindered.
     Left form has a hard floor of 320px (10 inputs in a 2-col grid). */
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.55fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px) { .ret-grid { grid-template-columns: 1fr; } }

.ret-card {
  background: #fff;
  border: 1px solid rgba(217,224,231,.8);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.ret-card h2 {
  margin: 0 0 14px;
  font-size: var(--fs-lg); font-weight: 700; color: var(--brand);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -.005em;
}
.ret-card h2 .ret-plan {
  margin-left: auto;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  padding: 4px 12px; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #b6d2eb;
  text-transform: uppercase;
}

/* Inputs (left column) ---------------------------------------- */
.ret-form .ret-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-bottom: 12px;
}
.ret-form .ret-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ret-form .ret-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ret-form .ret-field { display: flex; flex-direction: column; gap: 4px; }
.ret-form label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .08em;
}
.ret-form input, .ret-form select {
  padding: 10px 12px; border: 1.5px solid #c9d3df; border-radius: 8px;
  font-size: var(--fs-base); background: #fff;
  box-shadow: var(--shadow-input);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ret-form input:focus, .ret-form select:focus { outline: none; border-color: var(--brand-2); box-shadow: var(--shadow-input-focus); }
.ret-form input[readonly], .ret-form input:disabled { background: #f4f7fa; color: var(--muted); }
.ret-form .ret-actions {
  display: grid; grid-template-columns: 2fr 1fr; gap: 10px;
  margin-top: 16px;
}
.ret-form .ret-toggles {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 6px 0 14px;
}
.ret-form .ret-toggles button {
  padding: 9px 8px; font-size: 12.5px; font-weight: 600;
  background: linear-gradient(180deg, #f3f7fb 0%, #e6edf3 100%);
  border: 1.5px solid #c9d3df; border-radius: 8px; cursor: pointer;
  color: var(--brand); text-align: center;
  transition: all .14s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.ret-form .ret-toggles button:hover { background: linear-gradient(180deg, #fff 0%, #ebf1f7 100%); border-color: var(--brand-2); transform: translateY(-1px); }
.ret-form .ret-help { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* ─── Leave credits spotlight ───────────────────────────────────────────────
   Reason for promotion: leave_days is the SOLE driver of Terminal Leave (the
   biggest line item after pension lump-sum). It came from the live ledger so
   it deserves a "LIVE" tag. Brand-navy left bar (Linear callout pattern), no
   gradients, no purple slop. Numeric value uses the same Arial Narrow stack
   already used on the Analysis tiles for typographic continuity. */
.ret-spotlight {
  margin: 8px 0 6px;
  padding: 10px 14px 11px 16px;
  border: 1px solid #c8dceb;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: linear-gradient(180deg, #f4f9fd 0%, #eaf2f9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(13,74,118,.06);
}
.ret-spotlight-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.ret-spotlight-title {
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .06em;
}
.ret-pill {
  display: inline-block; padding: 1px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  border-radius: 999px;
  text-transform: uppercase;
}
.ret-pill-live {
  background: #d6f0df; color: #0a6634;
  border: 1px solid #aedab7;
}
/* Pill swaps to amber/orange when operator has overridden the ledger value.
   Reason: signals "this number is no longer the ledger truth — it's your
   what-if input". Brand-consistent (no red, which would imply error). */
.ret-pill-manual {
  background: #fdf1d3; color: #7a4a06;
  border: 1px solid #f1d699;
}

.ret-restore-btn {
  appearance: none;
  font: inherit; font-size: 11px; font-weight: 600;
  color: var(--brand); background: transparent;
  border: 1px solid #c8dceb;
  padding: 2px 8px; border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.ret-restore-btn:hover {
  background: rgba(13,74,118,.06); border-color: var(--brand-2);
  transform: translateY(-1px);
}
.ret-restore-btn:active { transform: translateY(0); }

/* ─── ⓘ help-tooltip (Bisaya/Bislish nuance) ──────────────────────────────
   Native title="" handles short hints; this styled bubble carries the
   longer Bisaya explanations for technical terms (AMC, RAMC, BMP, factor).
   Pure CSS on :hover / :focus-within — no JS. */
.ret-tip {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 15px; height: 15px;
  margin-left: 4px;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--brand-2, #1e6fa8);
  border-radius: 50%;
  cursor: help;
  position: relative;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
.ret-tip--light { background: rgba(255,255,255,.85); color: var(--brand); }
.ret-tip:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }

.ret-tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 9px 11px;
  background: #082f4e;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11.5px; font-weight: 400;
  letter-spacing: .01em; line-height: 1.5;
  text-align: left;
  text-transform: none;
  border-radius: 7px;
  box-shadow: 0 10px 24px -6px rgba(8,47,78,.45), 0 2px 4px rgba(0,0,0,.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  white-space: normal;
  z-index: 100;
}
.ret-tip[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #082f4e;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 100;
}
.ret-tip:hover::after, .ret-tip:focus::after,
.ret-tip:hover::before, .ret-tip:focus::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Edit-mode affordances (scenario CRUD) ────────────────────────────────
   When ?scenario=X is in the URL the form switches from CREATE to UPDATE.
   The "EDITING" badge + amber banner makes it impossible to confuse the two
   modes; the active row in the table is highlighted to anchor the round-trip. */
.ret-edit-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  background: #fdf1d3; color: #7a4a06;
  border: 1px solid #f1d699;
  border-radius: 999px;
  text-transform: uppercase;
}
.ret-edit-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
  padding: 8px 12px;
  border: 1px solid #f1d699;
  border-left: 4px solid #d4960a;
  border-radius: 8px;
  background: linear-gradient(180deg, #fef8ea 0%, #fcefd0 100%);
  font-size: var(--fs-sm); color: #7a4a06;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.ret-edit-banner strong { color: #5e3a05; }
.ret-edit-banner small { color: rgba(122,74,6,.7); margin-left: 6px; }
.ret-edit-cancel {
  font-size: 12px; font-weight: 600; color: #7a4a06;
  text-decoration: none; padding: 4px 10px;
  border: 1px solid #e0b765; border-radius: 6px;
  background: #fff;
  transition: background .15s ease, transform .1s ease;
}
.ret-edit-cancel:hover { background: #fff6e0; transform: translateY(-1px); }

.ret-pill-editing {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  background: #fdf1d3; color: #7a4a06;
  border: 1px solid #f1d699;
  border-radius: 999px;
  text-transform: uppercase;
}
.ret-scn-row-active {
  background: linear-gradient(180deg, #fef8ea 0%, #fcefd0 100%);
}
.ret-scn-row-active td { font-weight: 600; }
.ret-scn-loan-set {
  font-weight: 700;
  color: var(--brand);
}

/* "Save Record" / "Update Record" — Save uses brand-primary; Update reuses
   the same look but the form action differs and the label changes. */
.btn-save { font-weight: 700; }

.req { color: #b13a3a; font-weight: 700; }
.ret-form label .muted { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 10.5px; }

/* ─── Birthday detail in pagehead ──────────────────────────────────────────
   Identity-level info — lives in the pagehead so the operator sees the
   employee's "where they are in their career arc" before they touch any
   numbers. ADVANCE = bday upcoming; BELATED = bday already passed this year. */
.ret-birthday-line {
  margin: 6px 0 0;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.ret-age-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(180deg, #eaf2fa 0%, #d6e6f3 100%);
  border: 1px solid #a8c7e4;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(13,74,118,.08);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ret-age-chip strong {
  font-family: var(--num-narrow); font-stretch: condensed;
  font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ret-birthday-meta { color: var(--muted); }
.ret-birthday-meta strong {
  font-family: var(--num-narrow); font-stretch: condensed;
  color: var(--brand); font-weight: 800;
}
.ret-bday-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  border-radius: 999px;
  text-transform: uppercase;
}
.ret-bday-advance { background: #d6f0df; color: #0a6634; border: 1px solid #aedab7; }
.ret-bday-belated { background: #fdf1d3; color: #7a4a06; border: 1px solid #f1d699; }
.ret-bday-today   { background: var(--brand); color: #fff;   border: 1px solid var(--brand); }
.ret-no-dob {
  color: #7a4a06;
  background: #fdf1d3;
  padding: 6px 12px;
  border-radius: 6px;
  border-left: 4px solid #d4960a;
  display: inline-block;
  margin: 6px 0 0;
  font-size: var(--fs-sm);
}
.ret-no-dob a { color: #5e3a05; font-weight: 700; }

/* ─── Bracket selector (segmented control) ────────────────────────────────
   Three-up tabs above the Inputs/Analysis grid. Each segment carries the
   GSIS rule context, not just a label — the operator picks which legal
   tier they're computing under. Active = navy fill + raised; inactive =
   ghost. No purple slop. */
.ret-bracket-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}
@media (max-width: 720px) { .ret-bracket-bar { grid-template-columns: 1fr; } }
.ret-bracket-segment {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px 13px;
  border: 1px solid #c8dceb;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdff 0%, #f0f6fb 100%);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(13,74,118,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.ret-bracket-segment:hover {
  transform: translateY(-1px);
  border-color: #98b9d4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(13,74,118,.08),
    0 10px 18px -6px rgba(13,74,118,.22);
  text-decoration: none;
}
.ret-bracket-segment.is-active {
  background: linear-gradient(180deg, #0a3d63 0%, #082f4e 100%);
  color: #fff;
  border-color: #082f4e;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.18),
    0 14px 26px -8px rgba(8,47,78,.45);
}
.ret-bracket-title {
  font-family: var(--num-narrow); font-stretch: condensed;
  font-size: 18px; font-weight: 800; letter-spacing: .04em;
  color: inherit;
}
.ret-bracket-segment.is-active .ret-bracket-title { color: #fff; }
.ret-bracket-sub {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: .82;
}
.ret-bracket-segment.is-active .ret-bracket-sub { color: rgba(255,255,255,.85); }
.ret-bracket-rule {
  font-size: 11.5px; line-height: 1.45;
  color: var(--muted);
}
.ret-bracket-segment.is-active .ret-bracket-rule { color: rgba(255,255,255,.86); }

.ret-bracket-yos {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02em;
}
.ret-bracket-yos strong {
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  font-weight: 800;
}
.ret-bracket-segment.is-active .ret-bracket-yos { color: rgba(255,255,255,.82); }
.ret-bracket-segment.is-active .ret-bracket-yos strong { color: #fff; }
.ret-bracket-yos-label,
.ret-bracket-yos strong[title] {
  cursor: help;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.ret-bracket-cap {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  background: #fdf1d3; color: #7a4a06;
  border: 1px solid #f1d699;
  border-radius: 999px;
  text-transform: uppercase;
  cursor: help;
}
.ret-bracket-segment.is-active .ret-bracket-cap {
  background: rgba(253, 224, 153, .95);
  color: #5e3a05;
  border-color: rgba(212, 150, 10, .85);
}

/* ─── Eligibility banner ───────────────────────────────────────────────────
   Above the bracket bar. Reads "CAN RETIRE NOW" / "CONTINUE SERVING" /
   "COMPULSORY" + optional ceiling advisory. Brand-true: green = eligible,
   navy = serving, red = compulsory or below-minimum, amber = ceiling note. */
.ret-elig-banner {
  margin: 14px 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(13,74,118,.06);
}
.ret-elig-headline {
  font-weight: 700;
  letter-spacing: .01em;
}
.ret-elig-ceiling {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,.12);
  font-size: 12px;
  font-weight: 500;
}
.ret-elig-ceiling strong { font-weight: 700; }

.ret-elig-eligible {
  background: linear-gradient(180deg, #d6f0df 0%, #c0e6cf 100%);
  color: #0a6634;
  border: 1px solid #aedab7;
  border-left: 4px solid #0a6634;
}
.ret-elig-serving {
  background: linear-gradient(180deg, #eaf2fa 0%, #d6e6f3 100%);
  color: var(--brand);
  border: 1px solid #a8c7e4;
  border-left: 4px solid var(--brand);
}
.ret-elig-compulsory {
  background: linear-gradient(180deg, #fde2e2 0%, #f7cfcf 100%);
  color: #8a1a1a;
  border: 1px solid #f0baba;
  border-left: 4px solid #8a1a1a;
}
.ret-elig-not_eligible {
  background: linear-gradient(180deg, #fdf1d3 0%, #fbe5b1 100%);
  color: #7a4a06;
  border: 1px solid #f1d699;
  border-left: 4px solid #d4960a;
}

/* Money inputs — right-aligned, tabular, condensed for parity with the
   Analysis tile typography. Live comma-formatted by retirement.js. */
.gstack-money-input {
  text-align: right;
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0;
  /* Explicit colors — without these, the deduction-fieldset's pale gradient
     was bleeding through and the condensed strokes looked nearly invisible.
     Force dark ink on solid white so values stay readable wherever the input
     is placed. */
  color: var(--ink) !important;
  background-color: #fff !important;
  font-size: 17px;
}
.gstack-money-input::placeholder { color: var(--muted); font-weight: 500; }
.gstack-money-input:focus {
  color: var(--ink) !important;
  background-color: #fff !important;
}

/* BMP cap badge — flashes amber inside the "Monthly pension" key tile when
   the RA 8291 90%-of-AMC cap clamps the formula. Tells the operator WHY
   raising YOS no longer moves the tile. */
.ret-cap-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  background: #fdf1d3; color: #7a4a06;
  border: 1px solid #f1d699;
  border-radius: 999px;
  vertical-align: middle;
  cursor: help;
}
.ret-tile.is-key .ret-cap-badge {
  background: rgba(253, 224, 153, .95);
  color: #5e3a05;
  border-color: rgba(212, 150, 10, .85);
}

/* ─── Additional-deductions fieldset ──────────────────────────────────────
   Sits between the standard inputs and the Leave Credits spotlight. Brand
   navy border-top to signal "this affects what the retiree actually gets
   in hand". */
.ret-deduction-fieldset {
  margin: 6px 0 8px;
  padding: 8px 12px 12px;
  border: 1px solid #c8dceb;
  border-top: 3px solid var(--brand);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
}
.ret-deduction-fieldset > legend {
  padding: 0 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}
.ret-deduction-hint {
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-size: 11px;
}

/* ─── Detalyadong Breakdown table ─────────────────────────────────────────
   The math the retiree (and HR) wants to see step-by-step: what's added,
   what's deducted, what's net. Brand-navy header bar, alternating row
   shading, condensed numerics. */
.ret-breakdown {
  margin: 8px 0 8px;
  padding: 0;
  border: 1px solid #c8dceb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(13,74,118,.06);
}
.ret-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ret-breakdown-table thead th {
  background: linear-gradient(180deg, #0a3d63 0%, #082f4e 100%);
  color: #fff;
  /* Pure white on navy. No text-shadow (was dimming the glyph edges).
     Bigger font + tighter spacing so the column names read cleanly. */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.ret-breakdown-table thead th.ret-bd-num { text-align: right; }
.ret-breakdown-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(217,224,231,.5);
  vertical-align: top;
}
/* Body-cell color rules — scoped to tbody so they don't leak into the
   navy thead and clobber the white headers. The earlier bug: this rule
   without `tbody` was overriding `thead th { color: #fff }` for the LINE
   ITEM <th class="ret-bd-label">, leaving it dark-on-dark and unreadable. */
.ret-breakdown-table tbody .ret-bd-label { color: var(--ink); }
.ret-breakdown-table tbody .ret-bd-label small { color: var(--muted); font-weight: 400; }
.ret-breakdown-table tbody .ret-bd-num {
  text-align: right;
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}
.ret-breakdown-table tbody .ret-bd-why { color: var(--muted); font-size: 11px; line-height: 1.4; }
/* Header columns keep the right-align on numeric cols + white from the
   parent thead th rule. */
.ret-breakdown-table thead th.ret-bd-num,
.ret-breakdown-table thead th.ret-bd-why { color: #fff; }

.ret-breakdown-table tr.ret-bd-add  { background: rgba(214, 240, 223, .25); }
.ret-breakdown-table tr.ret-bd-sub  { background: rgba(253, 241, 211, .35); }
.ret-breakdown-table tr.ret-bd-subtotal {
  background: linear-gradient(180deg, #eaf2fa 0%, #d6e6f3 100%);
  font-weight: 700;
}
.ret-breakdown-table tr.ret-bd-section td {
  background: #f4f7fa;
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.ret-breakdown-table tr.ret-bd-net td {
  background: linear-gradient(180deg, #0a3d63 0%, #082f4e 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.ret-breakdown-table tr.ret-bd-net .ret-bd-why { color: rgba(255,255,255,.78); font-weight: 400; font-size: 11px; }
.ret-breakdown-table tr.ret-bd-net .ret-bd-num {
  color: #fff;
  font-size: 18px;
}

.ret-bd-foot {
  padding: 8px 12px 10px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
  background: #fafcfe;
  border-top: 1px solid rgba(217,224,231,.5);
}
.ret-bd-foot strong { color: var(--brand); }

/* ─── Service-anchor lineage badge (pagehead) ─────────────────────────────
   Tells HR which date drove the YOS computation so they trust the number.
   Green = GSIS membership start date is on file (accurate).
   Amber = falling back to date_hired (transferees lose pre-LGU service).
   Red   = no date at all (YOS = 0). */
.ret-anchor-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.ret-anchor-gsis_start_date { background: #d6f0df; color: #0a6634; border: 1px solid #aedab7; }
.ret-anchor-date_hired      { background: #fdf1d3; color: #7a4a06; border: 1px solid #f1d699; }
.ret-anchor-none            { background: #fde2e2; color: #8a1a1a; border: 1px solid #f0baba; }
.ret-anchor-fix {
  margin-left: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--brand-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--brand-2);
}
.ret-anchor-fix:hover { color: var(--brand); border-bottom-style: solid; }

/* ─── Negative NET visual flag (per-cell + row context) ───────────────────
   When a NET column goes negative, the retiree literally CANNOT be paid
   out without first restructuring loans. Per-cell flagging because the
   18-mo and 60-mo columns are independent — one can be negative while
   the other is positive (high loans but big 60-mo lump-sum). */
.ret-breakdown-table tr.ret-bd-net td.ret-bd-cell-neg {
  background: linear-gradient(180deg, #8a1a1a 0%, #5e0f0f 100%);
  color: #fff;
  position: relative;
}
.ret-breakdown-table tr.ret-bd-net td.ret-bd-cell-neg::before {
  content: "⚠ ";
  color: #ffd9d9;
  font-weight: 800;
  margin-right: 2px;
}
/* When the row has ANY negative cell, soften the row's text color so the
   contrast with the dark red cell stays readable, and append the warning. */
.ret-breakdown-table tr.ret-bd-net.ret-bd-net-neg .ret-bd-why {
  color: #8a1a1a;
  font-weight: 600;
}
.ret-breakdown-table tr.ret-bd-net.ret-bd-net-neg .ret-bd-why::after {
  content: " — Deductions EXCEED gross. Loans must be restructured before retirement processing.";
}

.ret-ov-cell-neg {
  background: rgba(138, 26, 26, .08) !important;
  border-radius: 6px;
}
.ret-ov-cell-neg .ret-ov-val { color: #8a1a1a; }
.ret-ov-cell-neg .ret-ov-lbl::after {
  content: " ⚠";
  color: #8a1a1a;
}
.ret-spotlight-row {
  display: flex; align-items: baseline; gap: 8px;
}
.ret-spotlight-input {
  flex: 0 0 auto;
  width: 220px;
  padding: 8px 14px;
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-size: 28px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border: 1px solid #bcd2e3; border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 1px 2px rgba(13,74,118,.06);
}
.ret-spotlight-input:focus {
  outline: none; border-color: var(--brand-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(13,74,118,.16);
}
.ret-spotlight-input:hover { border-color: #99b9d3; cursor: text; }
.ret-spotlight-unit {
  font-size: var(--fs-sm); color: var(--muted); font-weight: 600;
}
.ret-spotlight-hint {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  margin-left: auto;
  align-self: center;
  opacity: .75;
}
.ret-spotlight-meta {
  margin-top: 6px;
  font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.45;
}
.ret-spotlight-meta strong { color: var(--brand); }
.ret-spotlight-money {
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0 4px;
}
.ret-spotlight-formula {
  display: block;
  margin-top: 2px;
  font-size: 11px; color: var(--muted);
}
.ret-spotlight-formula code {
  background: rgba(13,74,118,.06);
  padding: 0 4px; border-radius: 3px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
}

/* Computation analysis (right top) ------------------------------
   v4 — value lines must NEVER break ("PHP 0.00" stayed wrapping at
   intermediate viewports). Use fluid sizing via clamp() so the value
   shrinks gracefully before it wraps. Collapse 3-col -> 2-col -> 1-col
   based on container width, not viewport, since the sidebar now eats
   ~248px of horizontal room on desktop. */
/* v5 — currency values use a condensed font stack so wide peso amounts
   (PHP 25,609,XXX.XX / PHP 1,536,552.60) fit fully inside the tile
   without ellipsis. Tile padding reduced so the row is shorter.
   Subtle 3D (inset highlight + deeper drop shadow) added.

   --num-narrow: web-safe condensed stack. "Arial Narrow" is installed on
   most Windows machines; Roboto Condensed is the Chrome/Android default;
   Liberation Sans Narrow on Linux. font-stretch:condensed coaxes variable
   fonts (Segoe UI Variable, Inter, etc.) into a narrower axis as a final
   fallback. */
:root {
  --num-narrow: "Arial Narrow", "Helvetica Neue Condensed",
                "Roboto Condensed", "Liberation Sans Narrow",
                "PT Sans Narrow", "Open Sans Condensed",
                ui-sans-serif, system-ui, sans-serif;
}

.ret-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 1180px) { .ret-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ret-tiles { grid-template-columns: 1fr; } }
.ret-tile {
  padding: 8px 12px 9px;
  border-radius: 10px;
  border: 1px solid rgba(217,224,231,.9);
  background: linear-gradient(180deg, #fbfdff 0%, #f0f6fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(13,74,118,.06),
    0 8px 16px -6px rgba(13,74,118,.18);
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 0;
}
.ret-tile:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(13,74,118,.08),
    0 14px 24px -8px rgba(13,74,118,.26);
}
.ret-tile .ret-tile-lbl {
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .05em;
  line-height: 1.2;
  min-height: 2.4em;
}
.ret-tile .ret-tile-val {
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 700; color: var(--ink); margin: 3px 0 1px;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
}
.ret-tile .ret-tile-hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
/* Highlighted "main" tiles */
.ret-tile.is-key {
  background: linear-gradient(180deg, #eaf2fa 0%, #d6e6f3 100%);
  border-color: #a8c7e4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(13,74,118,.10),
    0 10px 20px -6px rgba(13,74,118,.28);
}
.ret-tile.is-key .ret-tile-val {
  color: var(--brand);
  font-size: clamp(20px, 1.75vw, 25px);
}

/* Retirement overview (right middle) ---------------------------- */
.ret-overview {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px; border: 1px solid rgba(217,224,231,.8); border-radius: 10px;
  background: #f7fafd;
}
.ret-overview .ret-ov-cell { padding: 8px 10px; }
.ret-overview .ret-ov-lbl {
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .06em;
}
.ret-overview .ret-ov-val {
  font-family: var(--num-narrow);
  font-stretch: condensed;
  font-size: 17px;
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.ret-overview .ret-ov-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* Milestones (right bottom) ------------------------------------- */
.ret-milestones { display: flex; flex-direction: column; gap: 8px; }
.ret-milestones .ret-mile {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 8px; background: #f7fafd;
  border: 1px solid rgba(217,224,231,.7);
}
.ret-milestones .ret-mile-lbl { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
.ret-milestones .ret-mile-val { font-family: var(--num-narrow); font-stretch: condensed; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ret-milestones .ret-mile-meta { font-size: var(--fs-xs); color: var(--muted); }
.ret-milestones .ret-mile.is-locked { background: #fff8eb; border-color: #f0dcb5; }
.ret-milestones .ret-mile.is-locked .ret-mile-val { color: var(--pending); font-style: italic; }

/* Plan formula (right footer) ---------------------------------- */
.ret-formula {
  padding: 14px 18px;
  background: linear-gradient(180deg, #0d4a76 0%, #0a3d63 100%);
  color: #f0f6fb; border-radius: 10px;
  border: 1px solid #08334d;
  margin-top: 14px;
}
.ret-formula h3 {
  margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #8ec0e4;
}
.ret-formula p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.ret-formula strong { color: #fff; }

/* Saved scenarios table (re-uses .table style) */
.ret-scn-empty {
  padding: 14px 18px; background: #f7fafd; border: 1px dashed #b6d2eb;
  border-radius: 8px; color: var(--muted); font-size: var(--fs-sm); text-align: center;
}