/* mode-toggle.css. Drop-ready replacement (Upgrade 1 + layout + hint + de-dup) */

/* =========================================
   Layout: widen container (choose ONE option)
   ========================================= */

/* Option 1 (recommended): widen the whole site */
.md-grid {
  max-width: 78rem;
}

/* Option 2 (page-scoped): only if your build includes body[data-md-url]
body[data-md-url*="t-find-right-ft-application-form"] .md-grid {
  max-width: 78rem;
}
*/

/* =========================================
   Mode panel
   ========================================= */

.ssh-mode {
  margin: 1rem 0 1.25rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.85rem;
  background: var(--md-default-bg-color);
}

.ssh-mode__prompt {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.ssh-mode__controls {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 0.9rem;

  /* Desktop intent. Keep 3 pills in one row */
  flex-wrap: nowrap;
}

.ssh-mode__btn {
  flex: 1 1 0;
  min-width: 0;

  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-weight: 600;
  cursor: pointer;
  line-height: 1.15;
  text-align: center;

  /* Prevent ugly truncation behaviour */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.ssh-mode__btn[aria-pressed="true"] {
  border-color: var(--md-primary-fg-color);
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.ssh-mode__btn:focus-visible {
  outline: 3px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.ssh-mode__panel {
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ssh-mode__panel p {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.ssh-mode__panel ul {
  margin: 0.25rem 0 0.75rem 1.25rem;
}

.ssh-mode__panel li {
  margin: 0.25rem 0;
}

/* Mobile. Stack pills */
@media (max-width: 44rem) {
  .ssh-mode__controls {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .ssh-mode__btn {
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    white-space: normal;
  }
}

.ssh-mode__selected {
  margin: 0.75rem 0 0.9rem 0;
}


/* Hide duplicated prelude once a mode is selected */
body[data-ssh-mode="self"] [data-ssh-prelude],
body[data-ssh-mode="helper"] [data-ssh-prelude],
body[data-ssh-mode="pro"] [data-ssh-prelude] {
  display: none;
}

/* Hide Step 1 bullets once a mode is selected */
body[data-ssh-mode="self"] [data-ssh-step-bullets],
body[data-ssh-mode="helper"] [data-ssh-step-bullets],
body[data-ssh-mode="pro"] [data-ssh-step-bullets] {
  display: none;
}

/* =========================================
   Mode hint line (dynamic)
   ========================================= */

.ssh-mode__hint {
  margin: 0.75rem 0 0.9rem 0;
  padding: 0.55rem 0.75rem;
  border-left: 4px solid rgba(0, 0, 0, 0.22);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0.5rem;
  font-size: 0.92rem;
}

/* =========================================
   Table styling and emphasis
   ========================================= */

.ssh-ft-table {
  /* If we still run tight on small screens, allow horizontal scroll instead of crushing */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ssh-ft-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  /* Helps column widths behave predictably */
  table-layout: fixed;
  min-width: 48rem;
}

.ssh-ft-table th,
.ssh-ft-table td {
  vertical-align: top;
}

/* Column balance. Adjust if you want different weighting */
.ssh-ft-table th:nth-child(1),
.ssh-ft-table td:nth-child(1) { width: 38%; }

.ssh-ft-table th:nth-child(2),
.ssh-ft-table td:nth-child(2) { width: 24%; }

.ssh-ft-table th:nth-child(3),
.ssh-ft-table td:nth-child(3) { width: 38%; }

.ssh-ft-row {
  transition: box-shadow 180ms ease, transform 180ms ease;
}

body[data-ssh-mode] .ssh-ft-table .ssh-ft-row {
  opacity: 0.92;
}

body[data-ssh-mode] .ssh-ft-table 
.ssh-ft-row--66plus,
body[data-ssh-mode] .ssh-ft-table 
.ssh-ft-row--under66,
body[data-ssh-mode] .ssh-ft-table 
.ssh-ft-row--companion,
body[data-ssh-mode] .ssh-ft-table 
.ssh-ft-row--medical,
body[data-ssh-mode] .ssh-ft-table 
.ssh-ft-row--ni {
  opacity: 1;
}


/* =========================================
   Mode emphasis (persona-specific)
   Works with extra.css zebra striping that targets TD with !important
   Drop-in replacement for your "Mode emphasis" block
   ========================================= */

:root {
  --ssh-row-wash: rgba(0, 0, 0, 0.02);
  --ssh-row-inset: rgba(0, 0, 0, 0.14);
  --ssh-row-rail: rgba(0, 0, 0, 0.20);
}

/* 1) Reset any prior row emphasis. Target TD so we neutralize zebra effects too. */
.ssh-ft-table tr.ssh-ft-row > td {
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Optional. keep hover whisper-light and TD-based */
.ssh-ft-table tr.ssh-ft-row:hover > td {
  background-color: rgba(0, 0, 0, 0.01) !important;
}

/* 2) Shared highlight treatment. Apply to TD to override zebra striping */
body[data-ssh-mode="self"] .ssh-ft-table tr.ssh-ft-row--66plus > td,
body[data-ssh-mode="self"] .ssh-ft-table tr.ssh-ft-row--under66 > td,
body[data-ssh-mode="self"] .ssh-ft-table tr.ssh-ft-row--companion > td,
body[data-ssh-mode="helper"] .ssh-ft-table tr.ssh-ft-row--66plus > td,
body[data-ssh-mode="helper"] .ssh-ft-table tr.ssh-ft-row--under66 > td,
body[data-ssh-mode="helper"] .ssh-ft-table tr.ssh-ft-row--ni > td,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--medical > td,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--companion > td,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--ni > td {
  background-color: var(--ssh-row-wash) !important;
  box-shadow: inset 0 0 0 2px var(--ssh-row-inset) !important;
}

/* 3) Left rail. Put it on the first cell so it always renders */
body[data-ssh-mode="self"] .ssh-ft-table tr.ssh-ft-row--66plus > td:first-child,
body[data-ssh-mode="self"] .ssh-ft-table tr.ssh-ft-row--under66 > td:first-child,
body[data-ssh-mode="self"] .ssh-ft-table tr.ssh-ft-row--companion > td:first-child,
body[data-ssh-mode="helper"] .ssh-ft-table tr.ssh-ft-row--66plus > td:first-child,
body[data-ssh-mode="helper"] .ssh-ft-table tr.ssh-ft-row--under66 > td:first-child,
body[data-ssh-mode="helper"] .ssh-ft-table tr.ssh-ft-row--ni > td:first-child,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--medical > td:first-child,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--companion > td:first-child,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--ni > td:first-child {
  box-shadow:
    inset 4px 0 0 var(--ssh-row-rail),
    inset 0 0 0 2px var(--ssh-row-inset) !important;
}

/* 4) Pro mode a touch stronger */
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--medical > td,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--companion > td,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--ni > td {
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16) !important;
}

body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--medical > td:first-child,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--companion > td:first-child,
body[data-ssh-mode="pro"] .ssh-ft-table tr.ssh-ft-row--ni > td:first-child {
  box-shadow:
    inset 4px 0 0 rgba(0, 0, 0, 0.24),
    inset 0 0 0 3px rgba(0, 0, 0, 0.16) !important;
}

/* =========================
   FT chooser. highlight boost
   Add to END of mode-toggle.css
   ========================= */

/* Base. highlighted rows get a slightly stronger wash + left rail */
.md-typeset table .ssh-ft-row.ssh-ft-row--highlight td{
  background-color: rgba(47, 85, 151, 0.06) !important;
}

.md-typeset table .ssh-ft-row.ssh-ft-row--highlight td:first-child{
  box-shadow: inset 4px 0 0 rgba(47, 85, 151, 0.35) !important;
}

/* Make the row feel a touch more "chosen" */
.md-typeset table .ssh-ft-row.ssh-ft-row--highlight{
  outline: 1px solid rgba(47, 85, 151, 0.18);
  outline-offset: -1px;
}

/* Dark mode equivalent */
[data-md-color-scheme="slate"] .md-typeset table .ssh-ft-row.ssh-ft-row--highlight td{
  background-color: rgba(138, 176, 255, 0.08) !important;
}
[data-md-color-scheme="slate"] .md-typeset table .ssh-ft-row.ssh-ft-row--highlight td:first-child{
  box-shadow: inset 4px 0 0 rgba(138, 176, 255, 0.40) !important;
}
[data-md-color-scheme="slate"] .md-typeset table .ssh-ft-row.ssh-ft-row--highlight{
  outline-color: rgba(138, 176, 255, 0.22);
}

/* =========================
   Mode indicator chip
   ========================= */
.ssh-mode-indicator{
  margin: 0.35rem 0 0.65rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  font-size: 0.95rem;
  background: rgba(47, 85, 151, 0.06);
  border: 1px solid rgba(47, 85, 151, 0.14);
}
[data-md-color-scheme="slate"] .ssh-mode-indicator{
  background: rgba(138, 176, 255, 0.10);
  border-color: rgba(138, 176, 255, 0.22);
}

/* Persona mode toggle. Mobile stacking spacing fix */
@media (max-width: 600px) {
  /* Container that holds the pills */
  #ssh-mode .ssh-mode__pills,
  #ssh-mode [data-ssh-mode-pills],
  #ssh-mode .ssh-mode__controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Each pill button */
  #ssh-mode [data-set-mode] {
    width: 100%;
    justify-content: center;
    min-height: 44px; /* touch target */
    margin: 0; /* rely on gap */
  }
}