/* Dark theme ported from the CustomTkinter desktop app. Accent color switches by employee
   track (body gets .track-sworn / .track-non_sworn / .track-general) - same convention the
   desktop app uses to re-theme itself around Sworn/Non-Sworn/General users. */

:root {
  --rd-bg: #2b2b2b;
  --rd-card: #3c3f41;
  --rd-modal: #1e1e1e;
  --rd-row: #2b3540;
  --rd-border: #555555;
  --rd-border-soft: #444444;
  --rd-text: #eaeaea;
  /* Raised 2026-09-25: the old greys (#aaa / #888) were hard to read on the #3c3f41 cards
     (#888 only ~3:1). Both now clear WCAG AA (~7:1 / ~6:1) while staying a step below
     --rd-text so headings and big numbers still stand out. */
  --rd-text-muted: #d6d6d6;
  --rd-text-faint: #c4c4c4;

  --rd-success: #2ecc71;
  --rd-success-dark: #27ae60;
  --rd-danger: #e74c3c;
  --rd-danger-dark: #c0392b;
  --rd-warning: #e67e22;
  --rd-info: #3498db;
}

body.track-sworn {
  --rd-accent: #1a3a5c;
  --rd-accent-dark: #1a2a3a;
  --rd-badge: #2980b9;
}

body.track-non_sworn {
  --rd-accent: #7d2d00;
  --rd-accent-dark: #4d1800;
  --rd-badge: #d35400;
}

body.track-general {
  --rd-accent: #145a32;
  --rd-accent-dark: #0d3d1f;
  --rd-badge: #27ae60;
}

body {
  background-color: var(--rd-bg);
  color: var(--rd-text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--rd-info);
}

.rd-navbar {
  background-color: var(--rd-accent-dark);
  border-bottom: 3px solid var(--rd-badge);
}

.rd-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  /* The logo's navy is close in tone to the navbar's own dark background - without a light
     plate behind it, the navy parts of the mark (and the "Active Shift" text) would nearly
     disappear against rd-accent-dark. Pure white was too stark against the dark navbar and
     washed out the logo's gold - a muted warm ivory reads softer and lets the gold hold its
     own color instead of bleaching toward pale yellow. */
  background: #efe8d8;
  padding: 6px 14px;
  border-radius: 8px;
  line-height: 0;
}

.rd-navbar .navbar-brand .rd-brand-accent {
  color: var(--rd-badge);
}

.rd-navbar-logo {
  height: 32px;
  width: auto;
  display: block;
}

.rd-logout-link {
  color: var(--rd-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.rd-logout-link:hover {
  color: #fff;
}

.rd-hero {
  background-color: var(--rd-accent);
  color: #fff;
  padding: 2.25rem 0;
  margin-bottom: 2rem;
}

.rd-hero h1 {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.rd-hero p {
  color: #d6dee6;
  margin-bottom: 0;
}

.rd-badge {
  display: inline-block;
  background-color: var(--rd-badge);
  color: #fff;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 0.3rem;
  padding: 0.2rem 0.6rem;
}

.rd-card {
  background-color: var(--rd-card);
  border: none;
  border-radius: 0.5rem;
  border-top: 4px solid var(--rd-badge);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  height: 100%;
  color: var(--rd-text);
}

/* .rd-card's height:100% is for cards sitting side-by-side in an equal-height row (dashboard
   grids, checklist columns). Cards meant to stack vertically inside one column - like the
   welcome page's info cards - need to opt back out, or Bootstrap's row flex-stretch on the
   column makes each stacked card try to fill the whole column instead of its own content. */
.rd-card-stack .rd-card {
  height: auto;
}

/* Planned Service Credit Purchase's Pension Benefit Impact card - month and year side by side
   instead of stacked, so the card doesn't grow taller to show both numbers. */
.rd-sc-benefit-annual {
  border-left: 1px solid var(--rd-border-soft);
  padding-left: 1rem;
  margin-left: 1rem;
}

/* Planned Service Credit Purchase's collapsible "estimate cost" drawer - a step down from the
   card it lives inside, so it reads as a nested helper tool rather than another top-level card. */
.rd-sc-drawer {
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.4rem;
}

/* The PEPRA "Classic Restoration" alert - an opportunity worth noticing, not a warning, so it
   gets its own accent (amber) rather than reusing --rd-badge (the current-track color already
   used everywhere else) or --rd-danger. */
.rd-sc-restoration-alert {
  border-top-color: var(--rd-warning);
}
.rd-sc-restoration-alert .card-body h2 {
  color: var(--rd-warning);
}

.rd-card .card-body,
.rd-card.card-body,
.rd-stat-card .card-body {
  color: var(--rd-text);
  padding: 1.35rem 1.5rem;
}

.rd-stat-card {
  background-color: var(--rd-row);
  border: none;
  border-radius: 0.5rem;
  border-top: 4px solid var(--rd-success-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  height: 100%;
  color: var(--rd-text);
}

.rd-stat-card h2 {
  color: var(--rd-text-muted);
}

.rd-divider {
  border: none;
  border-top: 2px solid var(--rd-border);
  margin: 1rem 0;
}

.rd-section-header {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.rd-section-header.text-info { color: var(--rd-info) !important; }
.rd-section-header.text-warning { color: var(--rd-warning) !important; }
.rd-section-header.text-success { color: var(--rd-success) !important; }

.rd-field-help {
  color: var(--rd-text-faint);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Bold sub-labels on the dark Leave & Schedule card (Sick Leave:, Retiree Health / Medical
   Bank:, Cash Payout at Retirement:, etc.). Bootstrap's .text-body renders near-black here and
   is hard to read, so these carry .rd-strong-label to sit at full-strength white instead. */
.rd-strong-label {
  color: var(--rd-text) !important;
  font-weight: 700;
}

/* The Retiree Health / Medical Bank lead sentence is important enough to read at muted rather
   than faint weight. */
.rd-field-help.rd-mb-lead {
  color: var(--rd-text-muted);
}

.rd-back-link {
  color: var(--rd-text-muted);
  text-decoration: none;
  font-weight: 600;
}

.rd-back-link:hover {
  color: var(--rd-badge);
}

.rd-footer-corner {
  display: block;
  padding: 1rem 0.75rem;
  color: var(--rd-text-faint);
  font-size: 0.75rem;
}
.rd-footer-corner a {
  color: var(--rd-text-faint);
  text-decoration: underline;
}
.rd-footer-corner a:hover {
  color: var(--rd-text-muted);
}

/* Form controls need a dark skin too - Bootstrap's defaults assume a light page */
.form-control,
.form-select {
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  color: var(--rd-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--rd-row);
  border-color: var(--rd-badge);
  color: var(--rd-text);
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* --rd-text-faint (#888888) only measures ~3:1 against these dark inputs - WCAG AA needs
   4.5:1 for text this size. --rd-text-muted (#aaaaaa) measures 4.57-5.36:1 depending on
   surface and is already part of the palette, so placeholder text uses that instead - found
   2026-09-12 while reviewing the sign-up page redesign. */
.form-control::placeholder {
  color: var(--rd-text-muted);
  opacity: 1;
}

.form-label {
  color: var(--rd-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Bootstrap's list-group defaults to a light theme (white bg, near-black text) - the FAQ
   question list used it with .bg-transparent, which just left the dark card behind near-black
   .text-body text, making it hard to read. */
.list-group-item {
  background-color: transparent;
  color: var(--rd-text);
  border-color: var(--rd-border-soft);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--rd-row);
  color: var(--rd-text);
}

.list-group-item.active {
  background-color: var(--rd-badge);
  border-color: var(--rd-badge);
  color: #fff;
}

.btn-rd-primary {
  background-color: var(--rd-badge);
  border-color: var(--rd-badge);
  color: #fff;
}

.btn-rd-primary:hover {
  background-color: var(--rd-accent);
  border-color: var(--rd-accent);
  color: #fff;
}

/* Nav "Sign In" - a real button now (matching Sign Up's visual weight) but green rather than
   the blue Sign Up uses, so a returning member and a brand-new signup read as two distinctly
   different actions at a glance, not the same button twice. */
.btn-rd-green {
  background-color: var(--rd-success-dark);
  border-color: var(--rd-success-dark);
  color: #fff;
}

.btn-rd-green:hover {
  background-color: var(--rd-success);
  border-color: var(--rd-success);
  color: #fff;
}

.alert-danger {
  background-color: #4d1f1c;
  border-color: var(--rd-danger-dark);
  color: #f5c6c2;
}

.alert-success {
  background-color: #1c4d2e;
  border-color: var(--rd-success-dark);
  color: #c2f5d6;
}

.alert-info {
  background-color: #1c3a4d;
  border-color: var(--rd-info);
  color: #b8e2f5;
}

/* ── Dashboard-specific pieces ───────────────────────────────────────── */

.rd-topbar {
  background-color: var(--rd-accent);
  color: #fff;
  padding: 0.6rem 0;
}

.rd-tier-ribbon {
  background-color: var(--rd-warning);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0;
}

.rd-topbar .rd-topbar-heading {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.rd-topbar .rd-topbar-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.rd-topbar .rd-topbar-context {
  font-size: 0.82rem;
  font-weight: 600;
  color: #cdd9e5;
}

.rd-topbar-link {
  color: #d6dee6;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 1.25rem;
  white-space: nowrap;
}

.rd-topbar-link:hover {
  color: #fff;
}

.rd-topbar-link.disabled {
  color: #a8b4c0;
  pointer-events: none;
  cursor: default;
}

/* Glows for roughly a month after a new dated checklist phase (3 Years Out, 1 Year Out, etc.)
   opens up, as long as that phase still has unchecked items - see
   misc_views.checklist_needs_attention for exactly when this turns on/off. Uses the same
   per-track --rd-badge accent as everything else keyed to "this track's color" (blue/orange/
   green), so it reads as this app's own attention state, not a generic red notification dot. */
.rd-topbar-link-pulse {
  position: relative;
  color: #fff;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  animation: rd-checklist-pulse 1.8s ease-in-out infinite;
}

@keyframes rd-checklist-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rd-badge) 55%, transparent);
    background-color: transparent;
  }
  50% {
    box-shadow: 0 0 12px 3px color-mix(in srgb, var(--rd-badge) 70%, transparent);
    background-color: color-mix(in srgb, var(--rd-badge) 35%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-topbar-link-pulse {
    animation: none;
    background-color: color-mix(in srgb, var(--rd-badge) 30%, transparent);
    box-shadow: 0 0 0 2px var(--rd-badge);
  }
}

.rd-target-date {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.rd-days-shifts-line {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.rd-grand-total {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.rd-mid-stat {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.rd-divider-v {
  border-left: 1px solid var(--rd-border-soft);
}

.rd-breakdown-list {
  max-height: 130px;
  overflow-y: auto;
  font-size: 0.85rem;
}

.rd-breakdown-list li {
  padding: 0.15rem 0;
}

/* More than 3 agencies: split into 2 columns instead of growing the card taller (up to ~6
   items stays compact this way; beyond that it grows evenly across both columns instead of
   scrolling, which reads better than a scrollbar buried inside a card). */
.rd-breakdown-cols {
  max-height: none;
  column-count: 2;
  column-gap: 1.5rem;
}

.rd-breakdown-cols li {
  break-inside: avoid;
}

.rd-banner-blended {
  background-color: var(--rd-warning);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  border: 0;
  text-align: center;
  width: 100%;
}

.rd-banner-blended:hover {
  filter: brightness(1.08);
}

.rd-walkaway-banner {
  background-color: var(--rd-accent);
  border-radius: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.rd-walkaway-banner .rd-walkaway-label {
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0.85;
}

.rd-walkaway-banner .rd-walkaway-date {
  font-size: 1.8rem;
  font-weight: 700;
}


.rd-takehome-amount {
  font-size: clamp(2.1rem, 11cqi, 3.2rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
}

.rd-stat-card .card-body {
  container-type: inline-size;
}

.rd-progress {
  height: 10px;
  border-radius: 5px;
  background-color: var(--rd-row);
}

.rd-progress-bar {
  background-color: var(--rd-badge);
}

.rd-flsa-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--rd-text);
  background-color: transparent;
}

.rd-flsa-table thead th {
  background-color: var(--rd-accent-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  border: none;
  padding: 0.5rem 0.75rem;
}

.rd-flsa-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--rd-border-soft);
  color: var(--rd-text);
}

.rd-flsa-table tr.rd-flsa-current td {
  color: var(--rd-success);
  font-weight: 600;
}

.rd-flsa-status {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.rd-flsa-vacation-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rd-text-muted);
}

.rd-flsa-pto-line {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rd-warning);
  margin-bottom: 0.15rem;
}

/* Stacked team/months lines inside a table cell (used when 2+ teams tie for the year) - each
   team gets its own line instead of being crammed into one run-on sentence. */
.rd-flsa-team-line {
  line-height: 1.6;
}

.rd-flsa-team-line + .rd-flsa-team-line {
  margin-top: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px dashed var(--rd-border-soft);
}

/* Timeline / Crossover / COLA cards - forced to a matching height so the short Timeline
   card doesn't get dwarfed by the taller columns next to it (and vice versa). */
.rd-card-fixed-h {
  height: 320px !important;
  display: flex;
  flex-direction: column;
}

.rd-card-fixed-h .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rd-chart-box {
  position: relative;
  flex: 1;
  min-height: 0;
}

.rd-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}

.rd-myth-card {
  background-color: var(--rd-row);
  border-left: 4px solid var(--rd-border-soft);
  border-radius: 0.4rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.rd-myth-card-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.rd-milestone {
  background-color: var(--rd-row);
  border-radius: 0.4rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--rd-badge);
}

.rd-milestone-badge {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  border-radius: 0.3rem;
  padding: 0.1rem 0.5rem;
  margin-right: 0.5rem;
}

.rd-milestone ul {
  font-size: 0.8rem;
  color: var(--rd-text-muted);
  margin-bottom: 0;
  padding-left: 1.1rem;
}

.rd-milestone-dots {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.rd-milestone-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--rd-border-soft);
  cursor: pointer;
}

.rd-milestone-dot.active {
  background-color: var(--rd-badge);
}

/* Checklist page "doesn't apply to me" state (retirement/misc_views.py's checklist_na
   mechanism) - greys the item out without hiding it, so it's still visible as "handled" rather
   than looking like it silently disappeared. */
.checklist-item-na .form-check-label {
  color: var(--rd-text-muted) !important;
  text-decoration: line-through;
}
.checklist-item-na .checklist-item-desc {
  opacity: 0.55;
}
.na-toggle {
  color: var(--rd-text-muted) !important;
  text-decoration: underline;
}

/* ── Retirement Checklist: countdown/view-mode toolbar + phase timeline ──────────────────── */
/* misc_views.checklist_view builds a "phase" per surviving CATEGORY_PHASES category, each with
   a status (done/active/upcoming) it resolved from the member's real days-to-retirement. The
   old design put every category in an equal-width Bootstrap column, so a 6-task phase and a
   1-task phase looked the same height, which meant text got crammed and the page had huge
   uneven whitespace. This replaces that with one wide column of full-width phase sections plus
   a slim sticky rail that always shows where the member is in the timeline as they scroll. */
.rd-checklist-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem;
}

.rd-checklist-countdown-date {
  font-size: 0.95rem;
  color: var(--rd-text-muted);
}

.rd-checklist-countdown-big {
  font-size: 2rem;
  font-weight: 700;
  color: var(--rd-badge);
  line-height: 1.15;
}

.rd-checklist-countdown-shifts,
.rd-checklist-countdown-progress {
  font-size: 0.95rem;
  color: var(--rd-text-muted);
}

/* Sourcing/scope disclaimer for the checklist itself (distinct from rd-welcome-disclaimer's
   financial-advice disclaimer at the very bottom of the page) - sits right under the progress
   line so it's seen without needing to scroll all the way down. */
.rd-checklist-source-note {
  max-width: 32rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--rd-text-faint);
}

.rd-view-toggle .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
}

.rd-view-toggle-sub {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.8;
}

.rd-checklist-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.rd-checklist-rail {
  flex: 0 0 220px;
  width: 220px;
}

.rd-checklist-rail-sticky {
  position: sticky;
  top: 1.25rem;
}

.rd-phase-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* The connecting timeline line - a single absolutely-positioned bar behind every dot, so it
   reads as one continuous line running top-to-bottom rather than separate disconnected dots. */
.rd-phase-stepper {
  position: relative;
  padding-left: 2rem;
}
.rd-phase-stepper::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background-color: var(--rd-border-soft);
  border-radius: 2px;
}

.rd-phase-step {
  position: relative;
  padding-bottom: 1.85rem;
}
.rd-phase-step:last-child {
  padding-bottom: 0;
}

.rd-phase-step-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--rd-text-muted);
  width: 100%;
}

.rd-phase-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 0.1rem;
  margin-left: -2rem;
  background-color: var(--rd-border-soft);
  border: 3px solid var(--rd-bg);
  box-shadow: 0 0 0 2px var(--rd-border-soft);
}

.rd-phase-step-done .rd-phase-dot {
  background-color: var(--rd-success);
  box-shadow: 0 0 0 2px var(--rd-success);
}
.rd-phase-step-done .rd-phase-step-label {
  color: var(--rd-text-muted);
}

.rd-phase-step-active .rd-phase-dot {
  background-color: var(--rd-badge);
  box-shadow: 0 0 0 4px var(--rd-badge);
}
.rd-phase-step-active .rd-phase-step-label {
  color: var(--rd-text);
  font-weight: 700;
}

.rd-phase-step-label {
  display: block;
  font-size: 1.05rem;
}
.rd-phase-step-count {
  display: block;
  font-size: 0.82rem;
  color: var(--rd-text-faint);
}

/* Scrollspy state - whichever phase section currently sits at the top of the viewport, tracked
   separately from rd-phase-step-active (the member's true current phase by date), so scrolling
   the Full Career Roadmap doesn't make it look like their real progress changed. */
.rd-phase-step-viewing .rd-phase-step-btn {
  color: var(--rd-text);
}
.rd-phase-step-viewing .rd-phase-dot {
  outline: 3px solid var(--rd-info);
  outline-offset: 2px;
}

.rd-checklist-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rd-phase-section {
  background-color: var(--rd-card);
  border-radius: 0.6rem;
  border: 2px solid transparent;
  border-top: 4px solid var(--rd-border-soft);
  overflow: hidden;
}
.rd-phase-status-done { border-top-color: var(--rd-success-dark); }

/* The member's current phase - a full ring in the member's own track color (var(--rd-badge):
   blue for sworn, orange for non_sworn, green for general - see body.track-* at the top of this
   file) plus a soft glow, not just the thin top-border every other card already gets, so it's
   unmistakable which card they're on at a glance. color-mix() derives the glow's translucency
   straight from the same track color instead of a hand-picked rgba fallback, so it stays in
   sync if a track's color is ever retuned. */
.rd-phase-status-active {
  border-color: var(--rd-badge);
  border-top-color: var(--rd-badge);
  box-shadow: 0 0 0 1px var(--rd-badge), 0 0 26px color-mix(in srgb, var(--rd-badge) 50%, transparent);
}
.rd-phase-status-active .rd-phase-banner {
  background-color: var(--rd-accent);
}

.rd-phase-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: none;
  border: none;
  padding: 1.35rem 1.75rem;
  cursor: pointer;
  color: var(--rd-text);
  text-align: left;
}

.rd-phase-banner-left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.rd-phase-banner-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rd-text-faint);
}

.rd-phase-status-active .rd-phase-banner-eyebrow {
  color: var(--rd-badge);
}

.rd-phase-banner-title {
  font-size: 1.6rem;
  font-weight: 700;
}

.rd-phase-banner-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.rd-phase-banner-count {
  font-size: 0.95rem;
  color: var(--rd-text-muted);
  white-space: nowrap;
}

.rd-phase-banner-chevron {
  font-size: 1.2rem;
  transition: transform 0.15s ease;
}
.rd-phase-collapsed .rd-phase-banner-chevron {
  transform: rotate(-90deg);
}

.rd-phase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  padding: 0 1.75rem 1.75rem;
}
.rd-phase-collapsed .rd-phase-grid {
  display: none;
}

.rd-task-card {
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.5rem;
  padding: 1.15rem 1.4rem;
}

.rd-task-card .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.rd-task-card .form-check-label {
  font-size: 1.08rem;
}

.rd-task-card .checklist-item-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--rd-text-muted) !important;
  margin-top: 0.5rem !important;
}

.rd-task-card .btn-link.btn-sm {
  font-size: 0.85rem !important;
}

@media (max-width: 991.98px) {
  .rd-checklist-layout {
    flex-direction: column;
  }
  .rd-checklist-rail {
    width: 100%;
    flex: none;
    order: -1;
  }
  .rd-checklist-rail-sticky {
    position: static;
  }
  /* Below desktop, the vertical dotted-line stepper becomes a horizontal scroll strip - each
     step is a small centered pill (dot above label) instead of a dot-left/text-right row, since
     there's no room for a left-hand rail once the page is a single column. */
  .rd-phase-stepper {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.75rem 0.5rem;
    gap: 1.5rem;
  }
  .rd-phase-stepper::before {
    left: 0.5rem;
    right: 0.5rem;
    top: 1.1rem;
    bottom: auto;
    height: 2px;
    width: auto;
  }
  .rd-phase-step {
    padding-bottom: 0;
    flex: 0 0 auto;
  }
  .rd-phase-step-btn {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: auto;
  }
  .rd-phase-dot {
    margin-left: 0;
    margin-top: 0;
  }
  .rd-phase-step-text {
    text-align: center;
  }
  .rd-phase-grid {
    grid-template-columns: 1fr;
  }
}

.rd-paystub-line {
  font-size: 0.85rem;
  display: flex;
  align-items: baseline;
}

.rd-paystub-line::before {
  content: "▶";
  font-size: 0.65rem;
  margin-right: 0.4rem;
  color: var(--rd-badge);
}

.rd-paystub-line.rd-deduct::before {
  color: var(--rd-danger);
}

.rd-paystub-line.rd-deduct {
  color: var(--rd-danger);
}

.rd-paystub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0;
  column-gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
}

/* flex-wrap (not shrinking both spans in place) is what actually fixes narrow cards: when the
   label's natural single-line width plus the value's width don't both fit, the value - being
   the second flex item - drops to its own line instead of squeezing the label into a tiny
   sliver that word-wraps into an unreadable single-letter-per-line mess. margin-left:auto pins
   the value to the right whether it's sharing the label's line or on its own below it.
   :not(:only-child) so a row with just one span (no separate value) is untouched. */
.rd-paystub-row span:first-child:not(:only-child) {
  flex: 1 1 auto;
  min-width: 0;
}

.rd-paystub-row span:last-child:not(:only-child) {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
}

.rd-year-row {
  font-size: 0.82rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rd-border-soft);
}

.rd-year-row:last-child {
  border-bottom: none;
}

.rd-chip-btn {
  background: none;
  border: none;
  color: var(--rd-info);
  font-size: 0.8rem;
  padding: 0;
}

.rd-disabled-btn {
  opacity: 0.5;
  pointer-events: none;
}

.modal-content.rd-modal {
  background-color: var(--rd-card);
  color: var(--rd-text);
}

.modal-content.rd-modal .modal-header,
.modal-content.rd-modal .modal-footer {
  border-color: var(--rd-border-soft);
}

.modal-content.rd-modal .btn-close {
  filter: invert(1);
}

/* When a <form> wraps .modal-body + .modal-footer (so it's the direct child of
   .modal-content instead of them), the form itself has to be the flex column,
   otherwise a scrollable dialog clips the footer and its Cancel/Submit buttons
   drop off-screen. */
.modal-dialog-scrollable .modal-content.rd-modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Seniority accrual tables can run 10+ rows - cap the height and scroll so the
   card stays short; JS scrolls the member's current tier into view. */
.rd-tier-scroll {
  max-height: 208px;
  overflow-y: auto;
}

/* ── Track picker (first login + Change Track) ──────────────────────── */

.rd-track-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: var(--rd-card);
  border: none;
  border-top: 4px solid var(--rd-border-soft);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 1.75rem 1.25rem;
  color: var(--rd-text);
  cursor: pointer;
  font: inherit;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rd-track-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.rd-track-card.track-sworn { border-top-color: #2980b9; }
.rd-track-card.track-non_sworn { border-top-color: #d35400; }
.rd-track-card.track-general { border-top-color: #27ae60; }

.rd-track-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.rd-track-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.rd-track-subtitle {
  font-size: 0.8rem;
  color: var(--rd-text-muted);
  white-space: pre-line;
  margin-bottom: 0.75rem;
}

.rd-track-desc {
  font-size: 0.85rem;
  color: var(--rd-text-faint);
  flex-grow: 1;
  margin-bottom: 0.75rem;
}

.rd-track-select-label {
  font-weight: 700;
  font-size: 0.85rem;
}

.rd-track-card.track-sworn .rd-track-select-label { color: #2980b9; }
.rd-track-card.track-non_sworn .rd-track-select-label { color: #d35400; }
.rd-track-card.track-general .rd-track-select-label { color: #27ae60; }

.rd-track-current {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.rd-track-current-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background-color: var(--rd-success-dark);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 0.3rem;
  padding: 0.15rem 0.5rem;
}

/* ── Profile wizard ──────────────────────────────────────────────────── */

.rd-wizard-steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.rd-wizard-step {
  flex: 1;
  display: block;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: 0.35rem;
  background-color: var(--rd-row);
  color: var(--rd-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

a.rd-wizard-step {
  cursor: pointer;
}

a.rd-wizard-step:hover {
  background-color: var(--rd-border-soft);
  color: var(--rd-text);
}

.rd-wizard-step.active {
  background-color: var(--rd-badge);
  color: #fff;
}

a.rd-wizard-step.active:hover {
  background-color: var(--rd-badge);
  color: #fff;
}

.rd-wizard-step.done {
  background-color: var(--rd-success-dark);
  color: #fff;
}

a.rd-wizard-step.done:hover {
  background-color: var(--rd-success);
  color: #fff;
}

.rd-wizard-divider {
  height: 2px;
  border: none;
  background-color: var(--rd-badge);
  margin: 0.5rem 0 1.25rem;
}

.rd-wizard-section-header {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.rd-wizard-intro {
  color: #d6dee6;
  font-size: 0.9rem;
}

.rd-wizard-hint {
  color: var(--rd-text-faint);
  font-size: 0.8rem;
  font-style: italic;
}

.rd-wizard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  flex-wrap: wrap;
}

.rd-wizard-row > label {
  font-weight: 600;
  min-width: 260px;
}

.rd-wizard-row input,
.rd-wizard-row select {
  max-width: 220px;
}

.rd-custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

/* Step 2 pensionable-pay icon (replaces the old always-visible sentence) - hover/tap the icon
   for the specific reason via its title attribute; a legend above the total explains the two
   icons in general. */
.pension-icon {
  cursor: help;
  font-weight: 700;
  margin-left: 0.15rem;
}

/* The "I've confirmed this is pensionable" checkbox - a real child of its row (not a sibling
   paragraph) so it survives row-removal cleanup and JS can find it reliably at submit time via
   row.querySelector(). flex-basis:100% (with .rd-custom-row's flex-wrap above) drops it onto
   its own line under the row's inputs instead of squeezing into the same line. The left border +
   indent visually nests it under the specific item it belongs to, echoing the &#8505; icon above it,
   instead of reading as a free-floating checkbox. */
.pension-confirm-check {
  flex-basis: 100%;
  margin: 0.15rem 0 0.3rem 2.25rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rd-border-soft);
}

.rd-pension-legend {
  font-size: 0.75rem;
  color: var(--rd-text-muted);
  background-color: var(--rd-row);
  border-radius: 0.4rem;
  padding: 0.75rem 1rem;
}

/* The description/label cell runs plain (no box) from the left edge to the $ amount, matching
   Current Base Hourly Rate's row - only the amount itself is boxed, so a row never reads as two
   separate side-by-side boxes. */
.rd-custom-row-label,
.rd-custom-row .desc[readonly] {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.375rem 0;
  background-color: transparent;
  border: none;
  color: var(--rd-text);
  font-weight: 600;
}

/* A free-text "Description of pay" input (not yet readonly - the member is still typing it)
   otherwise inherits Bootstrap's .form-control width:100%, which - inside this flex row - grabs
   the whole line and pushes the amount box/remove button onto their own row below. Giving it
   the same flex-basis as the readonly/label cell above keeps every row (named field, known
   custom item, or a brand new blank "Additional Pay Item" row) on one line consistently. */
.rd-custom-row .desc {
  flex: 1 1 auto;
  min-width: 140px;
}

/* One consistent width for every dollar box in this list - named fields and custom items alike
   (previously named fields ran a wider 220px while custom items had their own inline 130px,
   so the two visibly didn't match). */
.rd-custom-row .amount {
  flex: 0 0 130px;
  max-width: 130px;
}

.rd-agency-block {
  border-radius: 0.4rem;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.rd-agency-block.recip {
  background-color: var(--rd-badge);
  color: #fff;
}

.rd-agency-block.non-recip {
  background-color: #d35400;
  color: #fff;
}

.rd-wizard-footer {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0 0.5rem;
}

.rd-wizard-cancel {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* ── Scenario sandbox ────────────────────────────────────────────────── */

/* Pinned baseline-reference banner at the top of the page - always visible, always the
   member's real saved target, regardless of whatever scenario is currently loaded below it. */
.rd-scenario-pin {
  display: inline-block;
  background-color: var(--rd-row);
  border: 1px solid var(--rd-badge);
  color: var(--rd-text);
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: 2rem;
}

/* "Should I work [+1 Year] or [-1 Year]? I think I will move to [state]." - the quick-action
   sentence replacing the old separate button row, so each control reads in the context of the
   real question it answers instead of a bare label. */
.rd-scenario-sentence {
  font-size: 1.05rem;
  color: var(--rd-text);
}
.rd-scenario-sentence .btn,
.rd-scenario-sentence select {
  vertical-align: middle;
  margin: 0 0.15rem;
}

.rd-scenario-raise-slider {
  display: inline-block;
  width: 140px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* Post-Retirement Income / Life Scenarios - collapsed by default so the left column reads as
   a compact list of headings until the member actually needs one of them, instead of every
   field being open and visible (and competing for attention) all the time. */
.rd-scenario-section-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 0.4rem 0;
  cursor: pointer;
  text-align: left;
}
.rd-scenario-section-collapsible .rd-scenario-section-toggle {
  margin-bottom: 0;
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 0.4rem;
}
.rd-scenario-section-collapsible .collapse.show,
.rd-scenario-section-collapsible .collapsing {
  padding-top: 0.6rem;
}
.rd-scenario-chevron {
  font-size: 0.7rem;
  color: var(--rd-text-muted);
  transition: transform 0.15s ease;
}
.rd-scenario-section-toggle.rd-scenario-section-open .rd-scenario-chevron {
  transform: rotate(-180deg);
}

/* Results table - BASELINE / SCENARIO / DIFF side by side, replacing the old stacked
   paragraph blocks so every row is scannable without re-reading a label each time.
   !important on color/border here because Bootstrap's own .table styles assume a LIGHT theme
   (near-black text) and otherwise win the cascade tie against these same-specificity rules,
   which is why the numbers were unreadable against this app's dark cards. */
.rd-scenario-table {
  --bs-table-color: var(--rd-text);
  --bs-table-bg: transparent;
  color: var(--rd-text) !important;
  font-size: 0.95rem;
}
.rd-scenario-table thead th {
  color: var(--rd-text-muted) !important;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rd-border-soft) !important;
  font-weight: 700;
}
.rd-scenario-table td {
  border-color: var(--rd-border-soft) !important;
  color: var(--rd-text) !important;
  background-color: transparent !important;
}
/* Metric label column - "Net Monthly Take-Home" etc. were wrapping onto a second line and
   reading like two different rows; nowrap keeps each label on one line (the table's own
   .table-responsive wrapper scrolls horizontally on a narrow screen instead). */
.rd-scenario-table td:first-child {
  white-space: nowrap;
}
.rd-scenario-table-highlight td {
  background-color: var(--rd-row) !important;
}
.rd-scenario-diff-box {
  display: inline-block;
  border: 1px solid var(--rd-success-dark);
  color: var(--rd-success) !important;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
}
.rd-scenario-diff-box.rd-scenario-diff-box-negative {
  border-color: var(--rd-danger-dark);
  color: var(--rd-danger) !important;
}

.rd-scenario-highlight-box {
  background-color: var(--rd-success-dark);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  font-size: 1.05rem;
}
.rd-scenario-highlight-box.rd-scenario-highlight-negative {
  background-color: var(--rd-danger-dark);
}

.rd-scenario-print-only { display: none; }

/* Print This Scenario - the browser's native print dialog, scoped by hiding every control/nav
   element and force-expanding the two collapsed sections so their values are actually captured
   on paper even if the member never clicked them open on screen. */
@media print {
  @page { margin: 0.4in; }
  .rd-navbar, .rd-topbar, .rd-tier-ribbon, .rd-scenario-no-print { display: none !important; }
  .rd-scenario-section-collapsible .collapse { display: block !important; height: auto !important; }
  .rd-scenario-print-only { display: block; }
  body { background: #fff !important; color: #000 !important; }
  .rd-scenario-page { padding: 0 !important; max-width: none !important; }
  .rd-scenario-page h1 { font-size: 1.3rem; margin-bottom: 0.5rem !important; }
  /* The Sandbox Controls column is hidden entirely (.rd-scenario-no-print above) - the
     Results column is the only one left in that row, so it can take the FULL printable
     width instead of staying pinned to its on-screen 50% (which was clipping the Scenario
     and Diff columns off the right edge of the page instead of actually hiding them).
     :not(.rd-scenario-no-print) matters here: without it, this rule's higher specificity
     (two classes vs. one) was overriding display:none on the Long-Term Career Planning row,
     which is ALSO a .row - it re-appeared in print despite being marked no-print. */
  .rd-scenario-page .row:not(.rd-scenario-no-print) { display: block !important; }
  .rd-scenario-page .col-lg-5:not(.rd-scenario-no-print),
  .rd-scenario-page .col-lg-6:not(.rd-scenario-no-print),
  .rd-scenario-page .col-lg-7:not(.rd-scenario-no-print) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .card.rd-card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    color: #000 !important;
  }
  .card.rd-card .card-body { padding: 0.75rem 1rem !important; }
  .rd-scenario-table, .rd-scenario-table td, .rd-scenario-table th,
  .rd-scenario-highlight-box, .rd-scenario-pin { color: #000 !important; background: #fff !important; -webkit-print-color-adjust: exact; }
  .rd-scenario-diff-box { border-color: #000 !important; color: #000 !important; }
  .rd-scenario-table { font-size: 0.82rem; }
  .rd-scenario-table td, .rd-scenario-table th { padding: 0.35rem 0.5rem !important; }
  .rd-scenario-highlight-box { padding: 0.6rem 0.85rem !important; margin-bottom: 0.6rem !important; }
  .rd-scenario-pin { padding: 0.3rem 0.9rem !important; font-size: 0.9rem; }
  .rd-welcome-disclaimer { font-size: 0.65rem !important; }
  table, .rd-scenario-highlight-box, .rd-scenario-pin { page-break-inside: avoid; }
}

.rd-scenario-section {
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.4rem;
  padding: 0.75rem 1rem 1rem;
  margin-bottom: 0.75rem;
}

.rd-scenario-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}

.rd-scenario-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 1rem 0.25rem 0;
}

.rd-scenario-field label {
  font-size: 0.9rem;
  color: var(--rd-text-muted);
  white-space: nowrap;
}

.rd-scenario-field input[type="text"],
.rd-scenario-field select {
  width: 110px;
  padding: 0.3rem 0.55rem;
  font-size: 0.95rem;
}

.rd-scenario-field input[type="checkbox"] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* A field whose help text is too long to sit inline with its (nowrap) label without pushing
   the actual input off the edge of the card - e.g. Promotion Raise's long explainer. The label
   and input stay on their own compact .rd-scenario-field row (so the input never disappears off
   the right edge no matter how long the help text is); the help text moves to its own full-width
   line below, free to wrap normally like .rd-scenario-field-check's checkbox hints already do. */
.rd-scenario-field-wrap {
  width: 100%;
  margin: 0.25rem 1rem 0.35rem 0;
}
.rd-scenario-field-wrap .rd-scenario-field {
  margin: 0 0 0.15rem;
}
.rd-scenario-field-wrap .rd-field-help {
  white-space: normal;
}

/* Checkbox rows can carry a long inline hint - let them take the full panel
   width and wrap instead of running past the section's right edge. */
.rd-scenario-field.rd-scenario-field-check {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-right: 0;
}

.rd-scenario-field.rd-scenario-field-check label {
  white-space: normal;
}

/* ── Detailed Paystub ────────────────────────────────────────────────── */

.rd-ps-card-hdr {
  background-color: var(--rd-modal);
  border-radius: 0.4rem 0.4rem 0 0;
  padding: 0.5rem 0.85rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.rd-ps-section {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--rd-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0.6rem 0 0.2rem;
}

.rd-ps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0;
  column-gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.1rem 0;
}

/* Same wrap-safety as .rd-paystub-row: the value drops to its own line (pinned right via
   margin-left:auto) instead of squeezing the label into an unreadable sliver. :not(:only-child)
   so single-span rows (e.g. a lone formula string) aren't forced into conflicting flex rules. */
.rd-ps-row span:first-child:not(:only-child) {
  flex: 1 1 auto;
  min-width: 0;
}

.rd-ps-row span:last-child:not(:only-child) {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
}

.rd-ps-row.deduct { color: var(--rd-danger); }

.rd-ps-row.total {
  font-weight: 700;
  color: var(--rd-text);
}

.rd-ps-sep {
  border: none;
  border-top: 1px solid var(--rd-border-soft);
  margin: 0.35rem 0;
}

.rd-ps-sep.thick {
  border-top: 2px solid var(--rd-border);
}

.rd-ps-nettitle {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 0.4rem;
}

.rd-ps-netval {
  text-align: center;
  font-weight: 700;
  font-size: 1.3rem;
}

.rd-ps-summary-box {
  background-color: var(--rd-row);
  border-radius: 0.4rem;
  text-align: center;
  padding: 0.6rem 0.5rem 0.8rem;
  height: 100%;
}

.rd-ps-summary-box .stripe {
  height: 4px;
  border-radius: 2px;
  margin-bottom: 0.5rem;
}

.rd-ps-summary-box .lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rd-text-muted);
}

.rd-ps-summary-box .val {
  font-size: 1.4rem;
  font-weight: 700;
}

.rd-ps-col-hdr {
  border-radius: 0.4rem;
  text-align: center;
  padding: 0.6rem;
  color: #fff;
}

.rd-ps-col-hdr .title {
  font-weight: 700;
  font-size: 1.1rem;
}

.rd-ps-col-hdr .subtitle {
  font-size: 0.75rem;
  opacity: 0.85;
}

.rd-ps-savings-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.15rem 0;
}

/* ── Mobile-only fixes (phone screenshots, real-device iPhone Safari testing) ──────────────
   Everything below is scoped to a max-width media query so desktop is never touched - each
   rule only kicks in below the stated breakpoint. */

/* Top navbar: brand text + Account/Sign Out links were both fighting for one row and getting
   clipped off the right edge on phones. Letting the row wrap puts the links on their own line
   instead of running off-screen. */
@media (max-width: 767.98px) {
  .rd-navbar .container {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .rd-navbar .navbar-brand {
    font-size: 1rem;
    padding: 4px 10px;
  }
  .rd-navbar-logo {
    height: 26px;
  }
}

/* Sub-nav bar (Retirement Checklist / FAQ / Print Report / About): links already wrap onto
   multiple lines on narrow screens, but with no vertical breathing room the wrapped rows sit
   right on top of each other, making adjacent links easy to mis-tap. */
@media (max-width: 767.98px) {
  .rd-topbar-link {
    display: inline-block;
    padding: 0.35rem 0;
    margin-left: 0.9rem;
  }
}

/* Scenario Sandbox: the Survivor Benefit <select> has an inline width:280px (needed on desktop
   so the long option text doesn't truncate) that overflows a phone screen. Below the point
   where the field row already stacks (.rd-scenario-field is inline-flex, so several fields
   share a row until they don't fit), let every field take the full row width instead. */
@media (max-width: 575.98px) {
  .rd-scenario-field {
    display: flex;
    width: 100%;
    margin-right: 0;
  }
  .rd-scenario-field input[type="text"],
  .rd-scenario-field select {
    width: auto;
    flex: 1 1 auto;
    max-width: 100%;
  }
  #survivor_choice {
    width: 100% !important;
  }
  /* Reset Scenario / Run Simulation / Close were a bare justify-content-between row with no
     gap, so on a phone-width flex-wrap they'd sit edge-to-edge with no breathing room. */
  .rd-scenario-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .rd-scenario-actions .btn {
    flex: 1 1 auto;
  }
}

/* Dashboard: on phones the 3-column grid already stacks to one column (Bootstrap's col-lg-4
   breakpoint), in left/middle/right DOM order - which buries "Target Retirement Date" (first
   card in the middle column) below the whole left column's cards. Reordering just the middle
   column ahead of the left one on mobile brings it near the top, without touching desktop's
   side-by-side layout or DOM order at all. */
@media (max-width: 991.98px) {
  .rd-col-target {
    order: -1;
  }
}

/* Sign-in page: full-width scrolling ticker of the launched ("Now Available") agencies,
   sitting between the hero and the What's Inside / Sign In cards. (The .rd-ticker-stacked /
   .rd-ticker-label-soon rules below are kept for a possible second bar but are currently
   unused - the Coming Soon line was removed as too busy.) */
.rd-ticker {
  overflow: hidden;
  background-color: var(--rd-card);
  border-top: 2px solid var(--rd-badge);
  border-bottom: 2px solid var(--rd-badge);
  margin: 1.25rem 0;
  white-space: nowrap;
}
/* the second bar butts directly against the first - drop the doubled-up border and the gap */
.rd-ticker-stacked {
  margin-top: 0;
  border-top: none;
}
.rd-ticker-track {
  display: inline-flex;
  align-items: center;
  /* duration is set per-line from the template (--rd-ticker-dur, scaled to the number of
     items) so a short "Now Available" line and a long "Coming Soon" line scroll at the same
     visual speed instead of a fixed 40s making the long one a blur. */
  animation: rd-ticker-scroll var(--rd-ticker-dur, 40s) linear infinite;
  will-change: transform;
}
.rd-ticker:hover .rd-ticker-track {
  animation-play-state: paused;
}
.rd-ticker-label {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 0.5rem;
  white-space: nowrap;
}
.rd-ticker-label-live {
  color: var(--rd-success);
}
.rd-ticker-label-soon {
  color: var(--rd-text-muted);
}
.rd-ticker-item {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--rd-text);
  white-space: nowrap;
}
.rd-ticker-item::after {
  content: "\2022";
  margin-left: 1rem;
  color: var(--rd-text-faint);
}
@keyframes rd-ticker-scroll {
  from { transform: translateX(0); }
  /* the track renders its content 3x back-to-back; -33.3333% advances by exactly one copy,
     so the loop is seamless and at least two copies are always on screen (no blank gap on a
     short list). */
  to { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  .rd-ticker-track {
    animation: none;
  }
  .rd-ticker {
    overflow-x: auto;
  }
}

/* Sign-in page: the left/informational column used to put every section in an identical
   boxed card, so nothing stood out - now it's plain text on the page background, letting the
   boxed cards on the right (the actual sign-in/sign-up actions) be the only thing that reads
   as "click me." */
.rd-plain-section {
  padding: 0 0.25rem;
}
.rd-plain-stack > .rd-plain-section:not(:last-child) {
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 1.5rem;
}

/* Right-column cards get a lighter shade than the plain-text left column's background, so the
   action side visually "pops" instead of blending in - same border/radius as .rd-card, just a
   lighter fill. */
.rd-card-pop {
  background-color: #45494c;
}

/* Account page's Danger Zone - the two irreversible actions (switch department, delete account)
   get a muted red top border instead of the current track's own accent color, so they read as
   a distinct, separate zone from the rest of the page even at a glance, without being as loud
   as a full red-filled alert box. */
.rd-danger-zone {
  border-top: 4px solid var(--rd-danger-dark);
}

/* The Account page leans on .rd-field-help for nearly every line of real content (not just
   fine-print captions the way it's used elsewhere), so its normal --rd-text-faint/0.75rem
   reads as too dim and too small here - bumped to the same bright body-text color and a
   larger size, scoped to this page only so every OTHER page's genuine fine print is unaffected. */
.rd-account-page .rd-field-help {
  color: var(--rd-text);
  font-size: 0.9rem;
}

/* Owner Dashboard and every owner-only page under it (MOU Coverage, Legislative Watches,
   Founding Codes, etc.) use .rd-field-help heavily for real content (pillar-card labels, table
   help text), not just fine print - the default faint grey (--rd-text-faint, #888) read as too
   hard to read against these dark cards. Bumped to the same bright body-text color as every
   other page's actual content; genuine fine print elsewhere is unaffected since this is scoped
   to pages wrapped in .rd-owner-dash. */
.rd-owner-dash .rd-field-help {
  color: var(--rd-text);
}

/* Front-page "What You Get Here That Your Pension Portal Doesn't" comparison - a static
   side-by-side (it used to be a 3.5s rotator, but visitors scan in a couple of seconds and missed
   most of the points). The portal side is recessed and muted; the dashboard side carries the same
   green tint + green rail as the Active Shift column on the Pricing page's comparison table. */
.rd-cal-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  table-layout: fixed;
}
.rd-cal-compare th,
.rd-cal-compare td {
  padding: 0.55rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--rd-border-soft);
}
.rd-cal-compare tbody tr:last-child td { border-bottom: 0; }
.rd-cal-compare th { font-size: 0.8rem; font-weight: 700; }
.rd-cal-compare .rd-cal-them {
  width: 44%;
  color: var(--rd-text-faint);
  background-color: rgba(0, 0, 0, 0.2);
}
.rd-cal-compare .rd-cal-us {
  color: #fff;
  font-weight: 600;
  background-color: rgba(46, 204, 113, 0.14);
  box-shadow: inset 3px 0 0 var(--rd-success);
}
.rd-cal-compare th.rd-cal-us { background-color: var(--rd-success-dark); }
.rd-cal-sub { font-weight: 400; white-space: nowrap; }
.rd-cal-x { color: var(--rd-danger); margin-right: 0.35rem; }
.rd-cal-check { margin-right: 0.35rem; }

/* A small, honest, CSS-only stand-in for a real dashboard screenshot ("show, don't tell") -
   clearly labeled as an example so it's never mistaken for a signed-in user's real numbers. */
.rd-preview-panel {
  position: relative;
  padding: 1.5rem;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(46, 204, 113, 0.10), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(46, 204, 113, 0.25);
}
.rd-preview-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-text-faint);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
}
.rd-preview-stat-label {
  font-size: 0.75rem;
  color: var(--rd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rd-preview-stat-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--rd-success);
  line-height: 1.2;
}

/* A compact 4-tile echo of the real dashboard's own cards (Target Retirement Date, PTO
   Walk-Away Day banner, take-home stat tiles) - same color language as the live dashboard's
   .rd-target-date/.rd-walkaway-banner/.rd-stat-card, but sized and scoped for this small
   marketing panel rather than reusing those classes directly. */
.rd-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
@media (max-width: 420px) {
  .rd-preview-grid {
    grid-template-columns: 1fr;
  }
}
.rd-preview-card {
  background-color: var(--rd-row);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.rd-preview-card-accent {
  background-color: var(--rd-accent);
}
.rd-preview-card-stat {
  border-top: 3px solid var(--rd-success-dark);
  text-align: center;
}
.rd-preview-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-text-muted);
  margin-bottom: 0.3rem;
}
.rd-preview-card-accent .rd-preview-card-label {
  color: rgba(255, 255, 255, 0.75);
}
.rd-preview-card-date {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rd-text);
  line-height: 1.2;
}
.rd-preview-card-accent .rd-preview-card-date {
  color: #fff;
}
.rd-preview-progress {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 0.5rem 0 0.4rem;
}
.rd-preview-progress-bar {
  height: 100%;
  background-color: var(--rd-badge);
  transition: width 1.2s ease;
}
.rd-preview-card-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rd-text-muted);
}
.rd-preview-card-accent .rd-preview-card-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* Fifth preview tile - a full-width strip teasing the Scenario Sandbox (move to another state,
   stay an extra year, etc.). Spans both grid columns since it's introducing a different feature
   rather than echoing one more dashboard number, and gets its own dashed/info-blue treatment so
   it visually reads as "try this tool" rather than "here's another stat." */
.rd-preview-card-scenario {
  grid-column: 1 / -1;
  background-color: rgba(52, 152, 219, 0.08);
  border: 1px dashed rgba(52, 152, 219, 0.45);
}
.rd-preview-scenario-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.rd-preview-scenario-if {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rd-text);
  transition: opacity 0.4s ease;
}
.rd-preview-scenario-arrow {
  color: var(--rd-info);
  font-weight: 700;
}
.rd-preview-scenario-result {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--rd-info);
  transition: opacity 0.4s ease;
}

/* Disclaimer demoted from its own highlighted card (competing for attention right next to the
   Sign In button) down to small, unboxed footer text at the very bottom of the page. Centered
   and width-capped so a long line of legal text doesn't stretch edge-to-edge on wide monitors. */
.rd-welcome-disclaimer {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.72rem;
  color: var(--rd-text-faint);
  line-height: 1.5;
  border-top: 1px solid var(--rd-border-soft);
  padding-top: 1rem;
}
.rd-welcome-disclaimer strong {
  color: var(--rd-text-muted);
}

/* ── Welcome page redesign (2026-09-12 reorg): the "What You Get Here That CalPERS Doesn't"
   rotator elevated from plain text into an intentional high-contrast callout card; the
   "Still 15-20 Years Out?" spotlight and "Built for the Line" section pulled out of the plain
   left-column text stack into their own width-capped, centered sections below the hero row. */
.rd-cal-callout {
  background-color: var(--rd-card);
  border: 1px solid var(--rd-border-soft);
  border-left: 4px solid var(--rd-success);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}

.rd-spotlight {
  max-width: 850px;
  margin: 0 auto;
  background-color: var(--rd-card);
  border-left: 4px solid var(--rd-badge);
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.rd-bottom-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.rd-bottom-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 767.98px) {
  .rd-bottom-cards {
    grid-template-columns: 1fr;
  }
}
.rd-bottom-card {
  background-color: var(--rd-card);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  height: 100%;
}


/* ── Sign Up page redesign (2026-09-12) ───────────────────────────────────────────────── */
/* Scoped contrast bump: --rd-field-help's site-wide default (--rd-text-faint, ~3:1 against
   these dark surfaces) reads fine at a glance but fails WCAG AA's 4.5:1 for text this small -
   raised only within the sign-up form for now (--rd-text-muted, 4.57-5.36:1) rather than
   changing the shared class everywhere at once; worth the same fix site-wide later. */
.rd-signup-card .rd-field-help {
  color: var(--rd-text-muted);
}

/* A small caps label above each logical group (Your Details / Your Department / Account
   Security) instead of one undifferentiated stack of inputs. */
.rd-form-section + .rd-form-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rd-border-soft);
}
.rd-form-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-badge);
  margin-bottom: 0.85rem;
}

/* Access Code / Referral Code collapsed behind a link by default - most sign-ups have
   neither, so two blank "optional" boxes just make the form look twice as long. Sized up
   (not a small buried link) since a referred/access-code visitor needs to actually notice
   this, not scan past it - and it auto-expands (see signup.html's inline aria-expanded/hidden
   defaults) whenever a code arrived pre-filled via ?ref=/?code= or survived a validation
   error, so that visitor never wonders where their code went. */
.rd-code-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rd-text);
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.4rem;
  padding: 0.6rem 0.9rem;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.25rem;
  width: 100%;
}
.rd-code-toggle:hover {
  border-color: var(--rd-badge);
  color: #fff;
}
.rd-code-toggle .plus {
  font-weight: 700;
  color: var(--rd-badge);
  font-size: 1.15rem;
  line-height: 1;
}
.rd-code-panel {
  margin-top: 1rem;
}

/* Password field's Show/Hide toggle - same pattern as the Sign In modal's password field. */
.rd-pw-wrap {
  position: relative;
}
.rd-pw-wrap input {
  padding-right: 3rem;
}
.rd-pw-eye {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--rd-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}
.rd-pw-eye:hover {
  color: var(--rd-text);
}

/* One clean line under the Create Account button instead of three separate payment
   paragraphs stacked around it - swaps to a green confirmation line via JS once an access
   code is entered (see signup.html's syncSubmitNote()). */
.rd-submit-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--rd-text-muted);
  margin-top: 0.75rem;
}
.rd-submit-note.rd-code-applied {
  color: var(--rd-success);
  font-weight: 600;
}

/* Right column: "What You Get" trimmed to its 5 heavy hitters (a bold one-line title plus a
   supporting sentence) instead of a ten-item bullet wall, with the rest pushed into a
   one-line footnote. */
.rd-hitter {
  margin-bottom: 0.9rem;
}
.rd-hitter:last-child {
  margin-bottom: 0;
}
.rd-hitter-title {
  font-weight: 700;
  color: var(--rd-text);
}
.rd-hitter-body {
  color: var(--rd-text-muted);
  font-size: 0.85rem;
}

.rd-footnote {
  font-size: 0.75rem;
  color: var(--rd-text-muted);
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rd-border-soft);
}

/* "Is My Data Safe?" - bold lead-in label per bullet instead of a plain sentence, easier to
   scan for members who care specifically about privacy/security. */
.rd-security-item {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--rd-text-muted);
}
.rd-security-item:last-child {
  margin-bottom: 0;
}
.rd-security-item strong {
  color: var(--rd-text);
}

/* The "questions about signing up" support-email mention, moved out of the middle of the
   form (where a mailto: link gave visitors an exit ramp mid-signup) down to a footer line
   under the card instead. */
.rd-page-footer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--rd-text-muted);
  padding: 1rem 0.5rem 0;
}
.rd-page-footer a {
  color: var(--rd-text-muted);
  text-decoration: underline;
}

/* ── Supported Agencies page ──────────────────────────────────────────────────────────── */
.rd-agency-list > * + * {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rd-border-soft);
}
/* Agency/group header - collapsed to just its name + track or department count by default, so
   a multi-unit employer's 7-8 departments (or a multi-track agency's own 2-3 tracks) don't all
   dump onto the page at once. Click to expand into the track/department card grid below it -
   the SAME card component either way (see .rd-agency-track-card), so a standalone multi-track
   agency and a multi-unit employer no longer use two different interaction models. Named
   .rd-agency-* throughout (not the shorter .rd-track-*) specifically to avoid colliding with
   the UNRELATED .rd-track-card/.rd-track-grid classes the employee-track picker
   (track_select.html - Sworn/Non-Sworn/General) already owned. */
.rd-agency-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  color: var(--rd-text);
  text-align: left;
  cursor: pointer;
}
.rd-agency-group-count {
  color: var(--rd-text-muted);
  font-size: 0.8rem;
}
.rd-agency-group-chevron {
  margin-left: auto;
  color: var(--rd-badge);
  transition: transform 0.15s ease;
}
.rd-agency-group-toggle[aria-expanded="true"] .rd-agency-group-chevron {
  transform: rotate(180deg);
}

/* One card per track (a standalone agency) or per unit-track (a multi-unit employer like SF) -
   a 3-column grid either way, real MOU text as the visible body copy (no more "click to reveal
   the legal text" toggle) but clamped to a few lines so 3 columns of cards stay a uniform,
   scannable height - "Read full details" (see the page's own JS) reveals the rest in place.
   Deliberately NOT auto-summarized into separate Unit/Term/Covered fields: a quick test against
   Campbell's own real MOU text found a naive parser would show the ORIGINAL Dec 31, 2025 sworn
   contract end date and miss the real side-letter extension to June 30, 2026 - exactly the kind
   of wrong-date mistake this app can't afford, so the full verified text stays the source of
   truth and is just visually shortened, never rewritten. */
.rd-agency-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0 0.25rem;
}
.rd-agency-track-card {
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.rd-agency-track-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.rd-agency-track-card-title {
  font-weight: 700;
  color: var(--rd-text);
}
.rd-agency-track-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.rd-agency-track-card-desc.rd-agency-track-card-desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.rd-agency-track-card-more {
  font-size: 0.75rem;
}

/* ── Pricing page redesign (2026-09-12) ───────────────────────────────────────────────── */
.rd-plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
}
.rd-plan-toggle .rd-toggle-label {
  color: var(--rd-text-muted);
}
.rd-plan-toggle .rd-toggle-label.active {
  color: var(--rd-text);
}
.rd-toggle-switch {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--rd-border);
  border: none;
  cursor: pointer;
  padding: 0;
}
.rd-toggle-switch.on {
  background-color: var(--rd-badge);
}
.rd-toggle-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}
.rd-toggle-switch.on .knob {
  left: 24px;
}
.rd-save-badge {
  color: var(--rd-success);
  font-weight: 700;
}

.rd-price-num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}
.rd-price-sub {
  color: var(--rd-text-muted);
  font-size: 0.85rem;
}
.rd-hitter-check {
  color: var(--rd-success);
  font-weight: 700;
  margin-right: 0.4rem;
}

/* Comparison table: category header rows, and the Active Shift column highlighted green as
   the clear "winner" the way a recommended-plan column is highlighted on a pricing table -
   plus every checkmark green and every "not included" dash red, so the table reads at a
   glance instead of requiring the reader to parse each cell's text. */
.rd-cmp-cat td {
  background-color: var(--rd-row);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-badge);
}
.rd-cmp-winner-col {
  background-color: var(--rd-success-dark) !important;
  color: #fff !important;
  font-weight: 700;
}
/* The whole Active Shift column is tinted green and edged with a green rail on both sides so
   the eye tracks straight down it; the free-estimate column is recessed (darker, dimmer text)
   so it reads as the "baseline" rather than competing for attention. Box-shadow insets draw the
   rails because Bootstrap 5.3's .table-bordered owns the real cell borders. */
table.rd-cmp-table td.rd-cmp-winner-cell {
  background-color: rgba(46, 204, 113, 0.16);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--rd-success), inset -3px 0 0 var(--rd-success);
}
table.rd-cmp-table th.rd-cmp-winner-col {
  box-shadow: inset 3px 0 0 var(--rd-success), inset -3px 0 0 var(--rd-success), inset 0 3px 0 var(--rd-success);
}
table.rd-cmp-table tbody tr:last-child td.rd-cmp-winner-cell {
  box-shadow: inset 3px 0 0 var(--rd-success), inset -3px 0 0 var(--rd-success), inset 0 -3px 0 var(--rd-success);
}
table.rd-cmp-table tbody tr:not(.rd-cmp-cat) td:nth-child(2),
table.rd-cmp-table thead th:nth-child(2) {
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--rd-text-faint);
  font-size: 0.875em;
}
table.rd-cmp-table tbody tr:not(.rd-cmp-cat) td:nth-child(2).rd-cmp-no {
  color: var(--rd-danger);
}
.rd-cmp-yes {
  color: var(--rd-success);
  font-weight: 700;
}
.rd-cmp-no {
  color: var(--rd-danger);
}
.rd-cmp-partial {
  color: var(--rd-text-muted);
}
/* The one Active Shift cell that's "not applicable" (certified estimate letters) stays muted
   instead of bright white, so it doesn't read as a win. */
table.rd-cmp-table td.rd-cmp-winner-cell.rd-cmp-partial {
  color: var(--rd-text-muted);
  font-weight: 400;
}

/* ── Union & Group Inquiry redesign (2026-09-12) ──────────────────────────────────────── */
/* Same scoped contrast bump as .rd-signup-card - see that comment above. */
.rd-group-inquiry-card .rd-field-help {
  color: var(--rd-text-muted);
}

.rd-rail-card {
  background-color: var(--rd-row);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.rd-rail-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-badge);
  margin-bottom: 1.1rem;
}
.rd-rail-item {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.rd-rail-item:last-child {
  margin-bottom: 0;
}
.rd-rail-check {
  color: var(--rd-success);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1.3;
}
.rd-rail-item-title {
  font-weight: 700;
  color: var(--rd-text);
  margin-bottom: 0.15rem;
}
.rd-rail-item-body {
  color: var(--rd-text-muted);
  font-size: 0.83rem;
}

/* ── Idle / auto sign-out warning (base.html) ─────────────────────────────────────────── */
.rd-idle-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
}
/* Beat Bootstrap's non-!important [hidden] rule (style.css loads after Bootstrap). */
.rd-idle-overlay[hidden] {
  display: none;
}
.rd-idle-dialog {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
  background: var(--rd-modal);
  border: 1px solid var(--rd-border);
  border-top: 3px solid var(--rd-badge);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.rd-idle-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rd-text);
}
.rd-idle-desc {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--rd-text-muted);
}
.rd-idle-desc strong {
  color: var(--rd-text);
  font-variant-numeric: tabular-nums;
}
.rd-idle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ── Print Reports index (2-column document catalog) ───────────────────── */

.rd-report-category-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
}

/* The whole card is the link (not just a button inside it) - clicking the title, the
   description, or empty card space all open the same report. */
.rd-report-card {
  display: block;
  background-color: var(--rd-card);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--rd-text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.rd-report-card:hover,
.rd-report-card:focus {
  border-color: var(--rd-badge);
  color: var(--rd-text);
  transform: translateY(-2px);
}
.rd-report-card-action {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rd-badge);
  white-space: nowrap;
}

/* Supported Agencies - real pension-system stats strip (counts computed live from the Agency
   table, never hardcoded - see views._pension_system_stats). */
.rd-agency-stats {
  background-color: var(--rd-row);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.rd-agency-stats-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 0.6rem;
}
.rd-agency-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.rd-agency-stat {
  text-align: center;
  min-width: 90px;
}
.rd-agency-stat-count {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--rd-badge);
  font-variant-numeric: tabular-nums;
}
.rd-agency-stat-name {
  font-size: 0.8rem;
  color: var(--rd-text-muted);
}

/* Marketing poster builder - the on-screen preview renders the poster at its REAL physical
   print size (8.5in x 11in) and then scales the whole thing down visually with a CSS
   transform, rather than maintaining two separate sets of dimensions/font-sizes for
   "screen version" vs "print version". That guarantees what you see in the browser is exactly
   what comes out of the printer - the transform is simply removed at print time. */
.rd-poster-preview-wrap {
  width: 400px;
  height: 517px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: #20262d;
  border-radius: 10px;
  padding: 12px;
  box-sizing: content-box;
}
.rd-poster {
  width: 8.5in;
  height: 11in;
  transform-origin: top left;
  transform: scale(0.49);
  background: #fdfaf3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5in 0.7in 0.4in;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.rd-poster-logo {
  width: 2.1in;
  height: auto;
  margin-bottom: 0.16in;
}
.rd-poster-headline {
  font-size: 38pt;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #1a2a3a;
  line-height: 1.02;
  max-width: 6.8in;
  margin-bottom: 0.16in;
}
.rd-poster-subhead {
  font-size: 14pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a3a5c;
  margin-bottom: 0.18in;
}
.rd-poster-agency {
  font-size: 13pt;
  font-weight: 700;
  color: #a3791f;
  margin: -0.06in 0 0.16in;
}
/* The dashboard screenshot sits in a dark rounded "tablet" bezel. No drop shadow - a blurred
   shadow prints as a flat grey box in some PDF viewers. */
.rd-poster-device {
  background: #15191e;
  padding: 0.13in;
  border-radius: 0.28in;
  margin-bottom: 0.26in;
}
.rd-poster-app-preview {
  display: block;
  width: 4.1in;
  height: auto;
  border-radius: 0.14in;
}
.rd-poster-points {
  list-style: none;
  padding: 0;
  margin: 0 0 0.2in;
  width: 6.9in;
  text-align: left;
}
.rd-poster-points li {
  position: relative;
  padding-left: 0.3in;
  font-size: 12pt;
  line-height: 1.35;
  color: #33414f;
  margin-bottom: 0.08in;
}
.rd-poster-points li::before {
  content: "";
  position: absolute;
  left: 0.02in;
  top: 0.07in;
  width: 0.12in;
  height: 0.12in;
  border-radius: 50%;
  background: #a3791f;
}
.rd-poster-point-label {
  font-weight: 800;
  text-transform: uppercase;
  color: #1a2a3a;
  margin-right: 0.04in;
}
.rd-poster-cta-box {
  margin-top: auto;
  width: 6.9in;
  display: flex;
  align-items: center;
  gap: 0.3in;
  background: #f1ece0;
  border: 1px solid #e4dcc6;
  border-radius: 0.12in;
  padding: 0.16in 0.26in;
  text-align: left;
}
.rd-poster-cta-box img,
.rd-poster-cta-box canvas {
  width: 1.15in !important;
  height: 1.15in !important;
  background: #fff;
  padding: 0.06in;
  box-sizing: content-box;
}
.rd-poster-cta {
  font-size: 14.5pt;
  font-weight: 800;
  text-transform: uppercase;
  color: #1a2a3a;
  line-height: 1.15;
  margin-bottom: 0.08in;
}
.rd-poster-pricing {
  font-size: 11pt;
  color: #33414f;
  line-height: 1.35;
}
.rd-poster-url {
  font-size: 12pt;
  font-weight: 700;
  color: #a3791f;
  margin-top: 0.08in;
}
.rd-poster-footer {
  font-size: 10.5pt;
  font-style: italic;
  color: #7a7060;
  margin-top: 0.16in;
}
.rd-poster-disclaimer {
  font-size: 7.5pt;
  color: #8a8070;
  line-height: 1.3;
  max-width: 6.6in;
  margin-top: 0.06in;
}

/* Newsletter ad builder - same real-size-then-scale approach as the poster. Width/height and
   the text scale --s are set from JS per ad size; every size below is in physical units times
   --s so one set of rules works from a 5"x2" strip up to a full page. */
.rd-ad-preview-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  outline: 12px solid #20262d;
  border-radius: 2px;
}
.rd-ad {
  --s: 1;
  --qr: calc(0.9in * var(--s));
  transform-origin: top left;
  background: #fdfaf3;
  border: 1.5pt solid #1a3a5c;
  box-sizing: border-box;
  padding: calc(0.12in * var(--s)) calc(0.15in * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.12in * var(--s));
  text-align: center;
  overflow: hidden;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.rd-ad--row {
  flex-direction: row;
  text-align: left;
}
.rd-ad--grayscale { filter: grayscale(1); }
.rd-ad-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.06in * var(--s));
}
.rd-ad--row .rd-ad-main { align-items: flex-start; align-self: stretch; }
.rd-ad-logo {
  height: calc(0.3in * var(--s));
  width: auto;
}
.rd-ad-headline {
  font-size: calc(13pt * var(--s));
  font-weight: 800;
  color: #1a3a5c;
  line-height: 1.12;
}
.rd-ad-subtext {
  font-size: calc(7.5pt * var(--s));
  color: #33414f;
  line-height: 1.35;
}
.rd-ad-app-preview,
.rd-ad-footer { display: none; }
.rd-ad--large .rd-ad-app-preview {
  display: block;
  max-width: 100%;
  width: calc(1.9in * var(--s));
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #e4dcc6;
  margin-top: calc(0.06in * var(--s));
}
.rd-ad--large .rd-ad-footer {
  display: block;
  font-size: calc(6.5pt * var(--s));
  font-style: italic;
  color: #7a7060;
}
.rd-ad-disclaimer {
  font-size: calc(4.8pt * var(--s));
  color: #8a8070;
  line-height: 1.25;
}
.rd-ad-qr-block {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: calc(var(--qr) + 0.35in * var(--s));
}
.rd-ad--row .rd-ad-qr-block { align-self: stretch; }
/* Stacked layouts: the QR sits beside its caption instead of above it, which saves the
   height that tall-but-narrow sizes don't have to spare. */
.rd-ad:not(.rd-ad--row) .rd-ad-qr-block {
  flex-direction: row;
  width: auto;
  text-align: left;
  gap: calc(0.12in * var(--s));
}
.rd-ad:not(.rd-ad--row) .rd-ad-qr-text { max-width: calc(1.9in * var(--s)); }
.rd-ad-qr-block img,
.rd-ad-qr-block canvas {
  width: var(--qr) !important;
  height: var(--qr) !important;
  background: #fff;
  padding: calc(0.05in * var(--s));
  box-sizing: content-box;
}
.rd-ad-cta {
  font-size: calc(7.5pt * var(--s));
  font-weight: 700;
  color: #1a2a3a;
  line-height: 1.2;
  margin-top: calc(0.05in * var(--s));
}
.rd-ad-url {
  font-size: calc(7pt * var(--s));
  font-weight: 700;
  color: #a3791f;
  margin-top: calc(0.02in * var(--s));
}
.rd-ad-fineprint {
  font-size: calc(5.5pt * var(--s));
  color: #7a7060;
  line-height: 1.4;
  margin-top: calc(0.03in * var(--s));
}

/* Business card builder. Each side is 3.75" x 2.25" = the 3.5" x 2" card + 1/8" bleed all
   round; content stays inside a further 1/8" safe margin so trimming can't clip it. Shown at
   real size on screen (it's small enough), with a dashed guide where the trim falls. */
.rd-bcard-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.rd-bcard-frame {
  padding: 10px;
  background: #20262d;
  border-radius: 8px;
}
.rd-bcard {
  position: relative;
  width: 3.75in;
  height: 2.25in;
  box-sizing: border-box;
  padding: 0.28in 0.3in;
  overflow: hidden;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.rd-bcard-trim {
  position: absolute;
  inset: 0.125in;
  border: 1px dashed rgba(200, 60, 60, 0.7);
  pointer-events: none;
}
.rd-bcard-front {
  background: #fdfaf3;
  display: flex;
  flex-direction: column;
}
.rd-bcard-logo {
  height: 0.4in;
  width: auto;
  align-self: flex-start;
  margin-bottom: 0.12in;
}
.rd-bcard-name {
  font-size: 12.5pt;
  font-weight: 800;
  color: #1a2a3a;
  line-height: 1.1;
}
.rd-bcard-title {
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a3791f;
  margin-top: 0.03in;
}
.rd-bcard-contact {
  margin-top: auto;
  margin-bottom: 0.08in;
  font-size: 7.5pt;
  color: #33414f;
  line-height: 1.4;
}
.rd-bcard-contact div:empty { display: none; }
.rd-bcard-web {
  font-weight: 700;
  color: #1a3a5c;
}
/* Navy band along the bottom, running into the bleed so it trims clean. */
.rd-bcard-stripe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.27in;
  background: #1a3a5c;
}
.rd-bcard-back {
  background: #1a3a5c;
  color: #fdfaf3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rd-bcard-back-row {
  display: flex;
  align-items: center;
  gap: 0.16in;
}
.rd-bcard-back img,
.rd-bcard-back canvas {
  width: 0.95in !important;
  height: 0.95in !important;
  background: #fff;
  padding: 0.04in;
  box-sizing: content-box;
  border-radius: 3px;
}
.rd-bcard-back-headline {
  font-size: 11pt;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.08;
}
.rd-bcard-back-cta {
  font-size: 7pt;
  color: #e3c98a;
  font-weight: 700;
  margin-top: 0.07in;
}
.rd-bcard-disclaimer {
  font-size: 5pt;
  line-height: 1.3;
  color: rgba(253, 250, 243, 0.7);
  margin-top: 0.1in;
}

@media print {
  .rd-navbar, .rd-topbar, .rd-tier-ribbon, .rd-poster-no-print, footer.rd-footer-corner { display: none !important; }
  @page { size: letter; margin: 0; }
  body { background: #fff !important; }
  /* The poster's column is still inside Bootstrap's .container-fluid/.row/.col-lg-7 grid,
     which would otherwise cap it at that column's ~58% max-width instead of the full page -
     strip every container/grid constraint back to plain 100% for this one column's chain. */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  .rd-owner-dash, .rd-owner-dash .row, .rd-poster-print-col {
    max-width: none !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .rd-poster-preview-wrap {
    width: auto; height: auto; overflow: visible; position: static;
    background: none; padding: 0; border-radius: 0; margin: 0;
  }
  .rd-poster {
    transform: none;
    box-shadow: none;
    margin: 0 auto;
  }
}

/* ── Retirement Budget worksheet (retirement_budget.html) ─────────────────────────────── */
.rd-budget-fact { background: var(--rd-card); border-radius: 0.5rem; padding: 0.7rem 1rem;
  border-left: 4px solid var(--rd-badge); height: 100%; }
.rd-budget-fact-label { font-size: 0.75rem; color: var(--rd-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rd-budget-fact-val { font-size: 1.25rem; font-weight: 700; color: var(--rd-text); }
.rd-budget-table { width: 100%; border-collapse: collapse; }
.rd-budget-table th { background: var(--rd-accent); color: #fff; font-size: 0.85rem; padding: 0.6rem 1rem; }
.rd-budget-table thead th:first-child { border-top-left-radius: 0.3rem; }
.rd-budget-table td { padding: 0.45rem 1rem; border-bottom: 1px solid var(--rd-border-soft); vertical-align: middle; }
.rd-budget-table .r { text-align: right; width: 9.5rem; }
.rd-budget-table .rd-budget-input { text-align: right; max-width: 8.5rem; margin-left: auto; }
.rd-budget-help { font-size: 0.75rem; color: var(--rd-text-faint); margin-top: 0.1rem; }
.rd-budget-total td { background: var(--rd-row); font-weight: 700; border-bottom: none; }
.rd-budget-auto td { background: rgba(52, 152, 219, 0.08); }
.rd-budget-auto td.r { font-weight: 700; color: var(--rd-success); }
.rd-budget-summary { height: auto; position: sticky; top: 1rem; }
.rd-budget-sum-table { width: 100%; font-size: 0.9rem; }
.rd-budget-sum-table th { color: var(--rd-text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; padding-bottom: 0.3rem; }
.rd-budget-sum-table td { padding: 0.3rem 0; }
.rd-budget-sum-table .r { text-align: right; padding-left: 0.75rem; }
.rd-budget-sum-bottom td { border-top: 1px solid var(--rd-border); font-weight: 700; padding-top: 0.5rem; }
.rd-budget-verdict { font-size: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 0.4rem; background: var(--rd-row); }
.rd-budget-verdict-ok { background: rgba(46, 204, 113, 0.15); border-left: 3px solid var(--rd-success); }
.rd-budget-verdict-short { background: rgba(231, 76, 60, 0.15); border-left: 3px solid var(--rd-danger); }
@media (max-width: 575.98px) {
  .rd-budget-table td, .rd-budget-table th { padding-left: 0.6rem; padding-right: 0.6rem; }
  .rd-budget-table .r { width: 6.5rem; }
}
.rd-budget-helper-btn { padding: 0 0 0 0.5rem; font-size: 0.75rem; vertical-align: baseline; text-decoration: none; color: var(--rd-info); }
.rd-budget-helper-btn:hover { text-decoration: underline; }
.rd-budget-note-row td { background: rgba(230, 126, 34, 0.12); font-size: 0.8rem; color: var(--rd-text); }
.rd-budget-proj-head td { font-size: 0.75rem; text-transform: uppercase; color: var(--rd-text-muted); font-weight: 600; }
.rd-budget-gap { padding-left: 1.1rem; color: var(--rd-text); }
.rd-budget-gap li { margin-bottom: 0.3rem; }
.rd-budget-essentials:empty { display: none; }
/* No native spinner arrows on the budget's money boxes - they sat on top of the digits. */
.rd-budget-input { -moz-appearance: textfield; appearance: textfield; padding-right: 0.5rem; }
.rd-budget-input::-webkit-outer-spin-button,
.rd-budget-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-budget-input-big { border-color: var(--rd-warning) !important; box-shadow: 0 0 0 1px var(--rd-warning); }
.rd-budget-verdict-warn { background: rgba(230, 126, 34, 0.15); border-left: 3px solid var(--rd-warning); }


/* Vesting progress bar in the dashboard's Retirement and Service Snapshot. */
.rd-vest-bar { height: 0.6rem; background: var(--rd-row); }
.rd-vest-bar .progress-bar { background: var(--rd-success); }

/* Career Trajectory: dashboard highlight + 10+-years-out callout. */
/* Slow, soft "breathing" glow on whichever of Career Trajectory / Retirement Scenarios fits the
   member's years to retirement - deliberately slower and dimmer than the checklist's pulse so it
   draws the eye without competing with it. Static glow for reduced-motion users. */
.rd-btn-glow {
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.35), 0 0 10px rgba(52, 152, 219, 0.35);
  animation: rd-btn-breathe 4s ease-in-out infinite;
}
@keyframes rd-btn-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.30), 0 0 6px rgba(52, 152, 219, 0.25); }
  50%      { box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.55), 0 0 16px 2px rgba(52, 152, 219, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .rd-btn-glow { animation: none; }
}
.rd-career-callout { background: var(--rd-card); border-left: 4px solid var(--rd-info); border-radius: 0.5rem; padding: 0.8rem 1rem; }
.rd-tabs { border-bottom-color: var(--rd-border); }
.rd-tabs .nav-link { color: var(--rd-text-muted); border: 1px solid transparent; }
.rd-tabs .nav-link:not(.active) { background: transparent !important; border-color: transparent !important; }
.rd-tabs .nav-link:hover { color: var(--rd-text); }
.rd-tabs .nav-link.active { color: #fff; background: var(--rd-card); border-color: var(--rd-border) var(--rd-border) var(--rd-card); border-top: 3px solid var(--rd-badge); }

/* ── Career Trajectory page ── */
.rd-career-lead { font-size: 0.95rem; color: var(--rd-text); max-width: 60rem; }
.rd-howto { list-style: none; padding: 0; margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--rd-text-muted); }
.rd-howto li { margin-bottom: 0.3rem; }
.rd-howto strong { color: var(--rd-text); }
.rd-result { font-size: 0.95rem; padding: 0.75rem 0.9rem; border-radius: 0.4rem; background: var(--rd-row); }
.rd-result-ok { background: rgba(46, 204, 113, 0.12); border-left: 3px solid var(--rd-success); }
.rd-result-warn { background: rgba(230, 126, 34, 0.15); border-left: 3px solid var(--rd-warning); }
.rd-big-num { font-size: 1.75rem; font-weight: 800; color: var(--rd-success); line-height: 1.15; }
.rd-big-unit { font-size: 0.95rem; font-weight: 600; margin-left: 0.2rem; color: var(--rd-text-muted); }
.rd-big-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rd-text-muted); }
.rd-big-sub { font-size: 0.95rem; }
.rd-result-card .rd-big-num { font-size: 2.1rem; }
.rd-lever-num { font-size: 1.25rem; font-weight: 800; }
.rd-chip { display: inline-block; background: var(--rd-row); border-radius: 1rem; padding: 0.1rem 0.6rem; margin: 0.15rem 0.2rem 0 0; font-size: 0.78rem; color: var(--rd-text); }
.rd-sp-row { display: grid; grid-template-columns: 1fr 9rem auto auto; gap: 0.5rem; align-items: center; margin-bottom: 0.45rem; }
@media (max-width: 575.98px) { .rd-sp-row { grid-template-columns: 1fr 7.5rem auto; } .rd-sp-row .sp-pen-wrap { grid-column: 1 / 3; } }
.rd-bar-over { background: var(--rd-warning) !important; }
.rd-career input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.rd-career input[type=number]::-webkit-outer-spin-button,
.rd-career input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-card-dim { opacity: 0.7; }
.rd-podium { background: var(--rd-row); border-radius: 0.5rem; padding: 1rem; text-align: center; height: 100%; border-top: 3px solid var(--rd-border); }
.rd-podium-top { border-top-color: #f1c40f; background: rgba(241, 196, 15, 0.08); }
.rd-podium-medal { font-size: 2rem; line-height: 1; }
.rd-podium-label { font-weight: 600; margin-top: 0.4rem; font-size: 0.9rem; }
.rd-podium-total { font-size: 1.15rem; font-weight: 700; color: var(--rd-text); }

/* Print ad: optional free-access promo code line (under the CTA, beside the QR). */
.rd-ad-promo {
  font-size: calc(6.5pt * var(--s));
  color: #1a2a3a;
  line-height: 1.3;
  margin-top: calc(0.04in * var(--s));
}
.rd-ad-promo-code {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: calc(1px * var(--s)) dashed #a3791f;
  padding: 0 calc(0.03in * var(--s));
  border-radius: calc(2px * var(--s));
  color: #1a2a3a;
}
.rd-ad-promo-date { font-size: calc(5.5pt * var(--s)); color: #7a7060; }
.rd-promo-box { border: 1px solid var(--rd-border-soft); border-radius: 0.4rem; padding: 0.75rem; }
.rd-nowrap { white-space: nowrap; }

/* ── Phone Card (owner_marketing_phone.html) ─────────────────────────────────────────────
   Every size inside the card is in container units (cqw), so the on-page preview, the
   full-screen view, and the saved 390x844 image all lay out identically. Light, high-contrast
   colors so the QR scans reliably off a phone screen. */
.rd-phone-frame { max-width: 380px; margin: 0 auto; padding: 10px; background: #111; border-radius: 34px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.rd-pcard {
  container-type: size;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: #fbf8f1;
  color: #1a2a3a;
  border-radius: 26px;
  overflow: hidden;
  cursor: default;
}
.rd-pcard-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 5cqh 7cqw 3.5cqh; text-align: center;
}
.rd-pcard-logo { width: 42cqw; height: auto; }
.rd-pcard-headline { font-size: 8.4cqw; font-weight: 900; line-height: 1.08; text-transform: uppercase; letter-spacing: -0.01em; }
.rd-pcard-sub { font-size: 4cqw; color: #3c4a58; line-height: 1.3; }
.rd-pcard-points { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 4.1cqw; font-weight: 600; line-height: 1.35; }
.rd-pcard-points li { padding-left: 5.5cqw; position: relative; margin: 0.6cqh 0; }
.rd-pcard-points li::before { content: "\2713"; position: absolute; left: 0; color: #a3791f; font-weight: 900; }
.rd-pcard-qr { width: 58cqw; background: #fff; padding: 3cqw; border-radius: 3cqw; box-shadow: 0 0 0 0.6cqw #e6dcc7; }
.rd-pcard-qr img, .rd-pcard-qr canvas { width: 100% !important; height: auto !important; display: block; }
.rd-pcard-cta { font-size: 5cqw; font-weight: 800; line-height: 1.2; }
.rd-pcard-promo { font-size: 4.4cqw; line-height: 1.35; }
.rd-pcard-code { display: inline-block; font-weight: 900; letter-spacing: 0.05em; border: 0.5cqw dashed #a3791f; padding: 0 1.5cqw; border-radius: 1cqw; }
.rd-pcard-promo-date { font-size: 3.3cqw; color: #6c6250; }
.rd-pcard-url { font-size: 4.3cqw; font-weight: 800; color: #a3791f; }
.rd-pcard-footer { font-size: 3.2cqw; font-style: italic; color: #3c4a58; }
.rd-pcard-disclaimer { font-size: 2.5cqw; color: #7a7060; line-height: 1.3; }
.rd-pcard-hint {
  position: absolute; left: 50%; bottom: 2cqh; transform: translateX(-50%);
  background: rgba(26,42,58,.85); color: #fff; font-size: 3.4cqw; padding: 1cqh 4cqw; border-radius: 99px;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.rd-pcard-hint.on { opacity: 1; }
/* Full-screen mode: only the card is visible, filling the screen (dvh follows mobile browser bars). */
html.rd-phone-show, html.rd-phone-show body { overflow: hidden; background: #fbf8f1; }
html.rd-phone-show .rd-phone-frame { position: fixed; inset: 0; width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; background: #fbf8f1; box-shadow: none; z-index: 5000; }
html.rd-phone-show .rd-pcard { width: min(100%, 52vh); width: min(100%, 52dvh); height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; cursor: pointer; margin: 0 auto; }
/* Promo code return-on-investment tiles (owner_promo_codes.html). */
.rd-roi { background: var(--rd-row); border-radius: 0.4rem; padding: 0.6rem 0.4rem; height: 100%; }
.rd-roi-n { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.rd-roi-l { font-size: 0.75rem; color: var(--rd-text-muted); }
.rd-roi-key { border: 1px solid var(--rd-success); }
.rd-roi-key .rd-roi-n { color: var(--rd-success); }

/* Pricing page: guarantee badges + billing FAQ accordion (native <details>, no JS). */
.rd-guarantee {
  background: var(--rd-card);
  border: 1px solid var(--rd-border-soft);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.rd-guarantee-title { font-weight: 600; margin-bottom: 0.25rem; }
.rd-faq-item { border-top: 1px solid var(--rd-border-soft); }
.rd-faq-item:last-of-type { border-bottom: 1px solid var(--rd-border-soft); }
.rd-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 1.5rem 0.75rem 0;
  font-weight: 600;
  position: relative;
}
.rd-faq-item summary::-webkit-details-marker { display: none; }
.rd-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.6rem;
  font-size: 1.2rem;
  color: var(--rd-text-muted);
}
.rd-faq-item[open] summary::after { content: "\2212"; }
.rd-faq-body { padding: 0 0 0.9rem; color: var(--rd-text); }

/* Welcome page "15-20 Years Out?" spotlight: three scannable win rows (icon + bold takeaway +
   one or two lines) in place of the old single dense paragraph. */
.rd-spotlight-lede { color: var(--rd-text-muted); }
.rd-win {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rd-border-soft);
}
.rd-win-icon { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.rd-win-title { font-weight: 700; margin-bottom: 0.2rem; }
.rd-win-body { font-size: 0.9rem; color: var(--rd-text-muted); }

/* Signup-flow step tracker (retirement/_signup_steps.html, built by signup_steps.py) - shown on
   the signup form, check-your-email, start-trial, and first-time track picker pages. The "next"
   line is deliberately high-contrast: a member once missed this guidance as small muted help text
   and got stuck trying to sign in before ever picking a plan or track. */
.rd-steps-wrap { margin-bottom: 1.25rem; }
.rd-steps-count {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-success);
  margin-bottom: 0.4rem;
}
.rd-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--rd-text-faint);
}
.rd-steps li { display: flex; align-items: center; gap: 0.35rem; }
.rd-steps .rd-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--rd-border);
  font-weight: 700;
}
.rd-steps li.done { color: var(--rd-text-muted); }
.rd-steps li.done .rd-step-num { border-color: var(--rd-success); color: var(--rd-success); }
.rd-steps li.active { color: var(--rd-text); font-weight: 700; }
.rd-steps li.active .rd-step-num { background: var(--rd-success-dark); border-color: var(--rd-success); color: #fff; }
.rd-steps-next {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--rd-info);
  background: rgba(52, 152, 219, 0.12);
  border-radius: 0.35rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}
.rd-trust-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rd-trust-badge {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.4);
  color: var(--rd-text);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Paystub pension column: small explanatory lines under the retiree health deduction. */
.rd-ps-note { font-size: 0.75rem; color: var(--rd-text-muted); margin: 0.1rem 0 0.35rem; }

/* Cash flow projection: clickable year rows that expand to months. */
.rd-cf-table .rd-cf-year-row { cursor: pointer; }
.rd-cf-table .rd-cf-year-row:hover td { background-color: rgba(255, 255, 255, 0.04); }
.rd-cf-table .rd-cf-month td { font-size: 0.85rem; color: var(--rd-text-muted); }
.rd-budget-linked { display: block; font-size: 0.7rem; color: var(--rd-info); text-align: right; margin-top: 2px; }
.rd-cf-guide { border-left: 4px solid var(--rd-info); }
.rd-cf-budget-card { border-left: 4px solid var(--rd-success); }

/* Page title bar with an action button pinned right (Paystub, Cash Flow pages) - drops under
   the title on narrow screens. */
.rd-topbar-with-action { position: relative; }
.rd-topbar-action { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-weight: 600; }
@media (max-width: 767.98px) {
  .rd-topbar-action { position: static; transform: none; margin-bottom: 0.5rem; }
}
.rd-cf-irmaa { border-left: 4px solid var(--rd-warning); }

/* Hide the browser's up/down spinner on number fields - it sits on top of the digits in our
   right-aligned, narrow inputs, and a stray click nudges the value (e.g. an empty "Until age"
   jumping to its minimum of 40). Typing still works exactly the same. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Myth Buster ("Should I stay another 6 months?") - dark tables + the green headline card.
   !important for the same reason as .rd-scenario-table: Bootstrap's light-theme .table cell
   backgrounds otherwise paint bright white boxes inside the dark modal. */
.rd-myth-table { --bs-table-bg: transparent; --bs-table-color: var(--rd-text); color: var(--rd-text) !important; }
.rd-myth-table th, .rd-myth-table td {
  background-color: transparent !important;
  color: var(--rd-text) !important;
  border-bottom: 1px solid var(--rd-border-soft) !important;
  padding: 0.3rem 0.4rem !important;
}
.rd-myth-table thead th { color: var(--rd-text-muted) !important; font-size: 0.78rem; }
.rd-myth-table tr:last-child td { border-bottom: 0 !important; }

.rd-myth-hero {
  background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%);
  color: #fff;
  border-radius: 0.6rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.9rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35);
}
.rd-myth-hero-lead { font-size: 1rem; font-weight: 600; opacity: 0.95; }
.rd-myth-hero-amount { font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: 0.3rem 0; letter-spacing: -0.01em; }
.rd-myth-hero-amount small { font-size: 1.1rem; font-weight: 700; opacity: 0.9; }
.rd-myth-hero-sub { font-size: 0.9rem; opacity: 0.95; }
.rd-myth-hero-note { font-size: 0.78rem; opacity: 0.85; margin-top: 0.5rem; }
.rd-myth-hero.rd-myth-hero-flat { background: linear-gradient(135deg, #34495e 0%, #4a6278 100%); box-shadow: none; }
@media (max-width: 480px) { .rd-myth-hero-amount { font-size: 2.1rem; } }

/* Myth Buster: "The myth / The full picture" callout above the green headline card. */
.rd-myth-callout {
  border: 1px solid var(--rd-border-soft);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.03);
}

/* Pricing comparison table, collapsed to its highlights (pricing.html's "See all features"
   toggle adds .rd-cmp-collapsed with JS - without JS every row shows). The "The Highlights"
   header only shows while collapsed; the regular category headers only while expanded. */
.rd-cmp-highlights-head { display: none; }
table.rd-cmp-table.rd-cmp-collapsed .rd-cmp-highlights-head { display: table-row; }
table.rd-cmp-table.rd-cmp-collapsed tbody tr:not(.rd-cmp-top):not(.rd-cmp-highlights-head) { display: none; }
table.rd-cmp-table tbody tr.rd-cmp-lastvis td.rd-cmp-winner-cell {
  box-shadow: inset 3px 0 0 var(--rd-success), inset -3px 0 0 var(--rd-success), inset 0 -3px 0 var(--rd-success);
}

/* ── Public demo (demo.py): striped "example numbers" banner + pulsing free-trial button ── */
.rd-demo-banner {
  margin: 10px 12px 0;
  border-radius: 8px;
  padding: 10px 16px 12px;
  color: #fff;
  text-align: center;
  background: repeating-linear-gradient(135deg, #b5462a 0 22px, #93341d 22px 44px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.rd-demo-banner-title {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.rd-demo-banner-sub { font-size: .8rem; font-weight: 600; opacity: .95; }
.rd-demo-banner .form-select { background-color: rgba(255, 255, 255, .95); color: #1f2933; }
.rd-demo-sticky { position: sticky; top: 0; z-index: 1030; }

@keyframes rd-cta-pulse {
  0%   { background-color: #f5a623; box-shadow: 0 0 0 0 rgba(245, 166, 35, .75); }
  50%  { background-color: #ffd23f; box-shadow: 0 0 0 10px rgba(245, 166, 35, 0); }
  100% { background-color: #f5a623; box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}
.btn.rd-cta-pulse {
  background-color: #f5a623;
  border-color: #f5a623;
  color: #1f1300;
  font-weight: 800;
  animation: rd-cta-pulse 1.8s ease-in-out infinite;
}
.btn.rd-cta-pulse:hover, .btn.rd-cta-pulse:focus { background-color: #ffd23f; color: #1f1300; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .btn.rd-cta-pulse { animation: none; }
}

/* ── Before-tax vs. take-home side by side (Top Step, Specialty Pay Stacker, Promotion) ── */
.rd-tax-grid {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr 1fr;
  gap: 2px 14px;
  align-items: baseline;
  margin-bottom: 8px;
}
.rd-tax-head {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rd-text-muted, #9aa5b1);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.rd-tax-head-after { color: #ffd166; border-bottom-color: rgba(255, 209, 102, .5); }
.rd-tax-label { font-size: .85rem; color: var(--rd-text-muted, #9aa5b1); padding-top: 4px; }
.rd-tax-before, .rd-tax-after { font-size: 1.45rem; font-weight: 800; line-height: 1.25; padding-top: 4px; }
.rd-tax-before { color: #e6edf3; }
.rd-tax-after { color: #ffd166; }
.rd-tax-unit { font-size: .8rem; font-weight: 600; opacity: .8; margin-left: 2px; }
@media (max-width: 420px) {
  .rd-tax-before, .rd-tax-after { font-size: 1.15rem; }
}