/* 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;
  --rd-text-muted: #aaaaaa;
  --rd-text-faint: #888888;

  --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;
}

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

.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;
}

.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;
}

.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;
}

/* 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);
}

.form-control::placeholder {
  color: var(--rd-text-faint);
}

.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;
}

.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;
}

/* ── 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-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.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: #8090a0;
  pointer-events: none;
  cursor: default;
}

.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-pto-line {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rd-warning);
  margin-bottom: 0.5rem;
}

/* 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);
}

.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;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.9rem;
}

.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);
}

/* ── 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;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.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 ────────────────────────────────────────────────── */

.rd-scenario-header {
  background-color: var(--rd-danger-dark);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 0.6rem;
  border-radius: 0.4rem;
  margin-bottom: 1rem;
}

.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.75rem;
  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.8rem;
  color: var(--rd-text-muted);
  white-space: nowrap;
}

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

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

.rd-scenario-results {
  background-color: var(--rd-modal);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.rd-scenario-results .line {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--rd-text);
}

.rd-scenario-results .caption {
  font-size: 0.7rem;
  color: var(--rd-text-faint);
  margin-bottom: 0.5rem;
}

.rd-scenario-diff {
  font-size: 1.1rem;
  font-weight: 700;
}

.rd-scenario-diff.positive { color: var(--rd-success); }
.rd-scenario-diff.negative { color: var(--rd-danger); }

/* ── 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;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.1rem 0;
}

.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;
  }
}

/* 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 live + coming-soon agencies, sitting between
   the hero and the What's Inside / Sign In cards. */
.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;
}
.rd-ticker-track {
  display: inline-flex;
  align-items: center;
  animation: rd-ticker-scroll 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);
  margin-left: 1.5rem;
}
.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); }
  to { transform: translateX(-50%); }
}
@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;
}

/* 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-dial {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(var(--rd-success) 0% var(--rd-dial-pct, 68%), rgba(255, 255, 255, 0.08) var(--rd-dial-pct, 68%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rd-preview-dial-inner {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--rd-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rd-preview-dial-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--rd-success);
  line-height: 1;
}
.rd-preview-dial-label {
  font-size: 0.6rem;
  color: var(--rd-text-muted);
  line-height: 1.15;
  margin-top: 3px;
}
.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;
}
.rd-preview-stat-num-sm {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--rd-text);
  line-height: 1.2;
}

/* 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. */
.rd-welcome-disclaimer {
  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);
}