/* CRDP / CRSC Pay Comparison, page-specific presentation.
   Loads AFTER dc-pension-calculator.css and reuses its pcx- worksheet chrome
   (cards, fields, callouts, sources, workspace grid); this file adds only
   what is unique to the comparison layout. Shared tokens from main.css only;
   the explicit navy on the status header matches the pension result card's
   deliberate one-look-in-both-themes choice. Prefix: ccx-. */

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

/* Retirement-type picker: real radios, BUTTON-LAW borders on the labels. */
.ccx-typeset { border: 0; margin: 0 0 1rem; padding: 0; }
.ccx-typeset legend { color: var(--color-text); font-size: .8rem; font-weight: 700; margin-bottom: .35rem; padding: 0; }
.ccx-typegrid { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccx-typechoice { 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; }
.ccx-typechoice:hover { border-color: var(--color-primary); }
.ccx-typechoice input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.ccx-typechoice strong { color: var(--color-primary); display: block; font-size: .92rem; }
.ccx-typechoice small { color: var(--color-text-muted); display: block; line-height: 1.3; margin-top: .18rem; }
/* .ccx-checked is toggled by the controller as a :has() fallback so the
   selected card still reads selected on older browsers. */
.ccx-typechoice:has(input:checked), .ccx-typechoice.ccx-checked { background: var(--color-surface); border-color: var(--color-primary); box-shadow: inset 4px 0 0 var(--color-accent); }
.ccx-typechoice:has(input:focus-visible) { outline: 3px solid var(--color-accent-light); outline-offset: 2px; }
.ccx-option.ccx-higher { border-color: var(--color-success); box-shadow: inset 0 3px 0 var(--color-success); }

/* Special-situations checkboxes */
.ccx-special { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .7rem .8rem; }
.ccx-special legend { color: var(--color-text); font-size: .8rem; font-weight: 700; padding: 0 .25rem; }
.ccx-special label { align-items: center; color: var(--color-text); display: flex; font-size: .85rem; gap: .5rem; margin: .35rem 0; min-height: 30px; }
.ccx-special input[type="checkbox"] { height: 20px; width: 20px; }

/* Result panel (sticky on desktop, like the pension ledger panel) */
.ccx-result { position: sticky; top: 1rem; }
.ccx-status { background: #0e2a4d; border: 1px solid #254f7e; border-radius: var(--radius-md) var(--radius-md) 0 0; color: #fff; padding: 1rem 1.1rem; }
.ccx-status-head { color: #fff; font-size: 1.15rem; margin: 0; }
.ccx-status-sub { color: #cbd9e8; font-size: .8rem; line-height: 1.45; margin: .35rem 0 0; }
#ccx-results { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); border-top: 0; padding: 1rem; }

.ccx-columns { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ccx-option { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .75rem; }
/* "Higher before taxes" marker: border plus the text note, never color alone. */
.ccx-option h3 { color: var(--color-primary); font-size: .95rem; margin: 0 0 .4rem; }
.ccx-amount { color: var(--color-text); font-size: 1.35rem; font-weight: 800; }
.ccx-amount-sub { color: var(--color-text-muted); font-size: .7rem; }
.ccx-option-note { color: var(--color-text-muted); font-size: .74rem; line-height: 1.4; margin: .45rem 0 0; }

.ccx-ledger-list { display: grid; gap: .1rem; margin: 1rem 0 0; }
.ccx-ledger-list > div { align-items: baseline; border-bottom: 1px dotted var(--color-border); display: flex; gap: 1rem; justify-content: space-between; padding: .4rem 0; }
.ccx-ledger-list dt { color: var(--color-text-muted); font-size: .8rem; }
.ccx-ledger-list dd { color: var(--color-text); font-size: .84rem; font-weight: 700; margin: 0; text-align: right; }
.ccx-ledger-list .ccx-lgroup { border-bottom: 0; color: var(--color-primary); display: block; font-size: .78rem; font-weight: 800; letter-spacing: .05em; margin-top: .5rem; text-transform: uppercase; }

.ccx-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.ccx-actions .btn { flex: 1; }
.ccx-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). */
.ccx-print-only { display: none; }
@media print {
  body > #ccx-print-sheet { color: #000; display: block !important; font-size: 11pt; }
  #ccx-print-sheet h1 { font-size: 15pt; margin: 0 0 4pt; }
  #ccx-print-sheet h2 { font-size: 12pt; margin: 10pt 0 3pt; }
  #ccx-print-sheet table { border-collapse: collapse; width: 100%; }
  #ccx-print-sheet td, #ccx-print-sheet th { border-bottom: 1px solid #999; padding: 3pt 4pt; text-align: left; }
  #ccx-print-sheet td:last-child { text-align: right; }
  #ccx-print-sheet ul { margin: 2pt 0; padding-left: 14pt; }
  #ccx-print-sheet .ccx-print-muted { color: #444; font-size: 9pt; }
}

/* Phone */
@media (max-width: 760px) {
  .ccx-typegrid { grid-template-columns: 1fr; }
  .ccx-result { position: static; }
}
@media (max-width: 480px) {
  .ccx-columns { grid-template-columns: 1fr; }
  .ccx-actions { flex-direction: column; }
}