/* Drill Pay vs. VA Compensation Calculator, page-specific presentation.
   Loads AFTER dc-pension-calculator.css and reuses its pcx- worksheet chrome
   (hero, cards, fields, callouts, result card, sources, workspace grid); this
   file adds only what is unique to the drill-pay comparison. Shared tokens
   from main.css only; explicit navy appears solely where the pcx system
   already commits to one look in both themes. Prefix: dpx-. */

.dpx-records-note { margin: 0 0 1.2rem; }

/* Comparison-mode picker: real radios, BUTTON-LAW borders on the labels. */
.dpx-modeset { border: 0; margin: 0 0 1rem; padding: 0; }
.dpx-modeset legend { color: var(--color-text); font-size: .8rem; font-weight: 700; margin-bottom: .35rem; padding: 0; }
.dpx-modegrid { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpx-modechoice { background: var(--color-bg-alt); border: 2px solid var(--color-accent); border-radius: var(--radius-md); cursor: pointer; display: block; min-height: 70px; padding: .65rem .75rem; position: relative; }
.dpx-modechoice:hover { border-color: var(--color-primary); }
.dpx-modechoice input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.dpx-modechoice strong { color: var(--color-primary); display: block; font-size: .92rem; }
.dpx-modechoice small { color: var(--color-text-muted); display: block; line-height: 1.3; margin-top: .18rem; }
/* .dpx-checked is toggled by the controller as a :has() fallback so the
   selected card still reads selected on older browsers. */
.dpx-modechoice:has(input:checked), .dpx-modechoice.dpx-checked { background: var(--color-surface); border-color: var(--color-primary); box-shadow: inset 4px 0 0 var(--color-accent); }
.dpx-modechoice:has(input:focus-visible) { outline: 3px solid var(--color-accent-light); outline-offset: 2px; }

/* Section 4 live review list */
.dpx-review { display: grid; gap: .1rem; margin: 0 0 .4rem; }
.dpx-review > div { align-items: baseline; border-bottom: 1px dotted var(--color-border); display: flex; gap: 1rem; justify-content: space-between; padding: .38rem 0; }
.dpx-review dt { color: var(--color-text-muted); font-size: .8rem; }
.dpx-review dd { color: var(--color-text); font-size: .84rem; font-weight: 700; margin: 0; text-align: right; }
.dpx-review dd[data-tone="warn"] { color: var(--color-danger); }

/* Reconciliation callout: tone never carried by color alone, the text names
   the state; the border tone is reinforcement. */
#dpx-reconcile { margin-top: .6rem; }
#dpx-reconcile[data-tone="warn"] { background: var(--color-bg-alt); border-left-color: var(--color-warning); }
#dpx-reconcile[data-tone="ok"] { border-left-color: var(--color-success); }
.dpx-use-reported { align-items: center; color: var(--color-text); display: flex; font-size: .84rem; gap: .55rem; margin-top: .7rem; min-height: 44px; }
/* display:flex outranks the UA [hidden] rule, so restate it or the checkbox
   renders in every state (caught by eye on the first 1440 screenshot). */
.dpx-use-reported[hidden] { display: none; }
.dpx-use-reported input[type="checkbox"] { height: 22px; width: 22px; }

/* Result: two amount cards inside the navy pcx result card */
.dpx-columns { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dpx-amount-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); border-left: 4px solid #6cb6ff; border-radius: var(--radius-sm); padding: .75rem; }
.dpx-amount-card.dpx-va-card { border-left-color: var(--color-accent); }
.dpx-amount-card h3 { color: #cbd9e8; font-size: .74rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 .35rem; text-transform: uppercase; }
.dpx-amount { color: #fff; font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dpx-amount-sub { color: #cbd9e8; font-size: .68rem; }
.dpx-amount-note { color: #d8e5f2; font-size: .73rem; line-height: 1.4; margin: .45rem 0 0; }

.dpx-difference { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-sm); display: grid; gap: .2rem; margin-top: .7rem; padding: .75rem .8rem; }
.dpx-diff-label { color: #cbd9e8; font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dpx-difference strong { color: #fff; font-size: 1.05rem; line-height: 1.3; }
.dpx-diff-sub { color: #cbd9e8; font-size: .7rem; line-height: 1.4; }

.dpx-ledger { display: grid; gap: .45rem; margin: .9rem 0 0; }
.dpx-ledger > div { align-items: baseline; display: flex; gap: .5rem; justify-content: space-between; }
.dpx-ledger dt { color: #cbd9e8; font-size: .75rem; }
.dpx-ledger dd { color: #fff; font-size: .79rem; font-weight: 700; margin: 0; text-align: right; }
.dpx-ledger .dpx-lgroup { border-bottom: 0; color: #ffda85; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; margin-top: .45rem; text-transform: uppercase; }
#dpx-notfinal { margin-top: .8rem; }

.dpx-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.dpx-actions .btn { flex: 1; }
.dpx-privacy { color: var(--color-text-muted); font-size: .72rem; line-height: 1.45; margin: .8rem 0 0; }

/* Print: only the generated comparison sheet prints. Must out-shout the
   pension stylesheet's own print rule, which hides everything that is not
   its #print-worksheet (a node this page does not have). */
.dpx-print-only { display: none; }
@media print {
  body > #dpx-print-sheet { color: #000; display: block !important; font-size: 11pt; }
  #dpx-print-sheet h1 { font-size: 15pt; margin: 0 0 4pt; }
  #dpx-print-sheet h2 { font-size: 12pt; margin: 10pt 0 3pt; }
  #dpx-print-sheet table { border-collapse: collapse; width: 100%; }
  #dpx-print-sheet td, #dpx-print-sheet th { border-bottom: 1px solid #999; padding: 3pt 4pt; text-align: left; }
  #dpx-print-sheet td:last-child { text-align: right; }
  #dpx-print-sheet ul { margin: 2pt 0; padding-left: 14pt; }
  #dpx-print-sheet .dpx-print-muted { color: #444; font-size: 9pt; }
}

/* Phone */
@media (max-width: 760px) {
  .dpx-modegrid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dpx-columns { grid-template-columns: 1fr; }
  .dpx-actions { flex-direction: column; }
}