/* ═══ Tracent Feature Layer: Adaptive Dashboard + Debt Experience ═══
   Semantic CSS classes for the staged feature layer.
   Replaces inline-style sprawl in renderAdaptiveDashboard.js
   and renderDebtExperience.js.
═══════════════════════════════════════════════ */

/* ── Shared ───────────────────────────────────────────── */
.tf-card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--gray-2);
  padding: 16px;
  margin-bottom: 16px;
}
.tf-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.tf-step-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tf-step-row + .tf-step-row { margin-top: 10px; }
.tf-step-n {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,168,232,0.08);
  border: 1.5px solid rgba(0,168,232,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--teal);
  flex-shrink: 0;
}
.tf-step-text {
  font-size: 13px; color: var(--navy);
  line-height: 1.50; padding-top: 2px;
}
.tf-step-title {
  font-size: 13px; font-weight: 700; color: var(--navy);
  margin-bottom: 3px; line-height: 1.3;
}
.tf-step-detail {
  font-size: 12px;
  color: #475569; /* one step stronger than --gray-4 (#64748B); no gray-5 token exists */
  line-height: 1.65;
  margin-top: 4px;
}
/* Final step — method note; subtle inset to signal it is explanatory, not instructional */
.tf-step-row:last-child .tf-step-detail {
  border-left: 2px solid var(--gray-2);
  padding-left: 8px;
}
.tf-separator {
  height: 1px; background: var(--gray-2);
  margin: 8px 0 20px; opacity: 0.5;
}
.tf-section-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--gray-3); margin-bottom: 12px;
}

/* ── Adaptive Dashboard ───────────────────────────────── */
.tad-header {
  border-radius: var(--r-lg);
  padding: 24px 20px 20px;
  margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.tad-header-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; opacity: 0.4;
}
.tad-header-ghost-score {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--font-display); font-size: 32px;
  color: rgba(255,255,255,0.12);
}
.tad-header-title {
  font-family: var(--font-display); font-size: 22px;
  color: rgba(255,255,255,0.92); line-height: 1.25;
  margin-bottom: 8px;
}
.tad-header-sub {
  font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.55;
}
.tad-focus {
  padding: 18px 16px; margin-bottom: 16px;
}
.tad-focus-row {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}
.tad-focus-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.tad-focus-metric { font-family: var(--font-display); font-size: 16px; color: var(--navy); }
.tad-focus-action { font-size: 14px; color: var(--navy); font-weight: 600; line-height: 1.45; margin-bottom: 14px; }
.tad-cta {
  width: 100%; padding: 13px;
  background: var(--sky); color: #fff; border: none;
  border-radius: 999px; font-family: var(--font-body);
  font-size: 14px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.tad-cta:active { opacity: 0.80; }
.tad-context {
  background: var(--gray-1, #F0F4F8);
  border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 20px;
}
.tad-context-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.tad-context-cell { text-align: center; }
.tad-context-val { font-family: var(--font-display); font-size: 22px; }
.tad-context-val-sm { font-size: 13px; font-weight: 700; color: var(--navy); }
.tad-context-label { font-size: 10px; color: var(--gray-3); }

/* ── Debt Experience ──────────────────────────────────── */
.tde-emotional {
  border-radius: var(--r-lg);
  padding: 22px 20px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.tde-emotional-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--teal); opacity: 0.3;
}
.tde-emotional-text {
  font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.65;
}
.tde-pressure {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 16px;
}
.tde-pressure-cell {
  background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--gray-2); padding: 16px; text-align: center;
}
.tde-pressure-val {
  font-family: var(--font-display); font-size: 26px; color: var(--navy);
}
.tde-pressure-val span { font-size: 14px; font-weight: 400; color: var(--gray-3); }
.tde-pressure-label { font-size: 11px; color: var(--gray-3); margin-top: 3px; }
.tde-priority { padding: 18px 16px; border-left-width: 4px; border-left-style: solid; border-left-color: var(--teal); }
.tde-priority-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tde-priority-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.tde-priority-bal { font-family: var(--font-display); font-size: 22px; color: var(--navy); }
.tde-priority-why { font-size: 12px; color: var(--gray-4); line-height: 1.55; margin-bottom: 8px; }
.tde-priority-stats { display: flex; gap: 16px; font-size: 12px; }
.tde-relief {
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px;
}
.tde-relief-headline { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 5px; line-height: 1.35; }
.tde-relief-detail { font-size: 13px; color: var(--gray-4); line-height: 1.60; }
.tde-toggle-btn {
  display: block; width: 100%; padding: 12px;
  background: var(--gray-1, #F0F4F8); border: 1px solid var(--gray-2);
  border-radius: var(--r-sm); font-family: var(--font-body);
  font-size: 13px; color: var(--gray-4); cursor: pointer;
  margin-bottom: 16px; text-align: center;
}
.tde-debt-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--white);
  border: 1px solid var(--gray-2); border-radius: var(--r-sm);
  margin-bottom: 8px;
}
.tde-debt-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.tde-debt-meta { font-size: 11px; color: var(--gray-3); }
.tde-debt-bal { font-size: 14px; font-weight: 700; color: var(--navy); text-align: right; }
.tde-debt-int { font-size: 11px; color: var(--red); text-align: right; }

/* ── DEBT RANK CARDS ────────────────────────────────────────
   Priority list rendered by _0x3e799ba() into #debt-rank-list.
   Pure CSS — no class renames, no JS changes.
─────────────────────────────────────────────────────────── */
.debt-rank-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--gray-2);
  background: var(--white);
  margin-bottom: 10px;
}
.debt-rank-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-2);
  color: var(--gray-4);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.debt-rank-num.priority-1 { background: var(--teal); color: #fff; }
.debt-rank-num.priority-2 { background: var(--gray-2); color: var(--navy); }
.debt-rank-num.priority-3,
.debt-rank-num.priority-4 { background: var(--gray-1); color: var(--gray-3); }
.debt-rank-info { flex: 1; min-width: 0; }
.debt-rank-title {
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin-bottom: 4px;
}
.debt-rank-desc {
  font-size: 12px; color: var(--gray-4); line-height: 1.6;
  margin-bottom: 8px;
}
.debt-rank-bar-wrap {
  height: 4px; background: var(--gray-1);
  border-radius: 2px; overflow: hidden;
  margin-bottom: 8px;
}
.debt-rank-bar { height: 100%; border-radius: 2px; }
.debt-rank-bar.red   { background: var(--red); }
.debt-rank-bar.amber { background: var(--amber); }
.debt-rank-bar.teal  { background: var(--teal); }
.debt-rank-meta {
  display: flex; gap: 16px;
  font-size: 11px; color: var(--gray-3); font-weight: 600;
}

/* Priority-1 hero — one clear primary object */
#debt-rank-list .debt-rank-item:first-child {
  border-left: 3px solid var(--teal);
  background: rgba(20, 184, 166, 0.03);
  padding: 16px 18px;
}
#debt-rank-list .debt-rank-item:first-child .debt-rank-title {
  font-size: 16px;
}
#debt-rank-list .debt-rank-item:first-child .debt-rank-desc {
  color: #475569; /* one step stronger than --gray-4 for priority readability */
}

/* De-emphasize non-priority items — visible but secondary */
#debt-rank-list .debt-rank-item:not(:first-child) {
  opacity: 0.82;
  transition: opacity 0.25s ease;
}
#debt-rank-list .debt-rank-item:not(:first-child):hover {
  opacity: 1;
}

/* ── DEBT SAFE ZONE HIERARCHY ──────────────────────────────
   Visual hierarchy pass only. No JS, no structure changes.
   Intent: calm entry → one clear priority → secondary context.
─────────────────────────────────────────────────────────── */

/* 1. Emotional Entry — safe, soft, readable */
.tde-emotional {
  padding: 28px 22px;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 20px rgba(0,0,0,0.18);
}
.tde-emotional-text {
  line-height: 1.75;
}

/* 2. Priority Card — hero of the Debt tab */
.tde-priority {
  padding: 22px 20px;
  margin-top: 8px;
  margin-bottom: 8px;
  border-left-width: 5px;
  transform: scale(1.01);
  transform-origin: center top;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}

/* 3. De-emphasize surrounding sections — visible but secondary */
.tde-pressure,
.tf-card:not(.tde-priority),
.tde-relief {
  opacity: 0.87;
  transition: opacity 0.25s ease;
}
.tde-pressure:hover,
.tde-pressure:focus-within,
.tf-card:not(.tde-priority):hover,
.tf-card:not(.tde-priority):focus-within,
.tde-relief:hover,
.tde-relief:focus-within {
  opacity: 1;
}

/* 4. Vertical breathing room between sections */
.tde-pressure  { margin-bottom: 20px; }
.tde-relief    { margin-bottom: 20px; }
.tde-emotional { margin-bottom: 20px; }


/* ═══════════════════════════════════════════════════════════
   EXPERIENCE LAYER — archetype-driven render adaptations
   Classes applied to document.body by experienceLayer.js
═══════════════════════════════════════════════════════════ */

/* ── Debt estimation disclaimer ────────────────────────── */
.bse-dl-disclaimer {
  font-size: 11px;
  color: var(--gray-3, #9aa0ad);
  margin-top: 12px;
  padding: 0 2px;
  line-height: 1.5;
}

/* ── NBM calm note ─────────────────────────────────────── */
.xp-nbm-calm-note {
  font-size: 11px;
  color: var(--text-tertiary, #8a8f9a);
  letter-spacing: 0.01em;
  margin: 2px 0 8px;
  font-style: italic;
}

/* ── CALM mode: reduce visual density on home ──────────── */
.xp-mode-calm .bse-metrics-strip,
.xp-mode-calm .bse-driver-strip,
.xp-mode-calm .bse-mode-strategy {
  display: none !important;
}

/* ── EXPANDED mode: allow additional detail blocks ─────── */
.xp-mode-expanded .bse-dl-metrics {
  /* no overrides — base styles apply, full detail visible */
}

/* ── Retirement hero ────────────────────────────────────── */
#xp-retirement-hero {
  margin-bottom: 16px;
}
.xp-ret-hero {
  background: linear-gradient(135deg, var(--sky-dim, rgba(32,178,170,0.06)) 0%, transparent 100%);
  border: 1px solid var(--sky-border, rgba(32,178,170,0.15));
  border-radius: var(--r-card, 14px);
  padding: 20px 20px 18px;
}
.xp-ret-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal, #20b2aa);
  margin-bottom: 8px;
}
.xp-ret-headline {
  font-family: var(--font-display, Georgia, serif);
  font-size: 19px;
  color: var(--navy, #1a2340);
  line-height: 1.3;
  margin-bottom: 6px;
}
.xp-ret-sub {
  font-size: 13px;
  color: var(--gray-3, #9aa0ad);
  line-height: 1.5;
}
/* Monthly flexibility line — only shown for in_retirement with positive FCF */
.xp-ret-fcf {
  font-size: 12px;
  color: var(--teal, #20b2aa);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sky-border, rgba(32,178,170,0.12));
}
/* Stability band pill */
.xp-ret-band {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
}
.xp-ret-band--solid {
  background: rgba(16, 185, 129, 0.10);
  color: #10B981;
}
.xp-ret-band--building {
  background: rgba(0, 168, 232, 0.10);
  color: var(--sky, #00A8E8);
}
.xp-ret-band--attention {
  background: rgba(245, 158, 11, 0.10);
  color: #F59E0B;
}

/* ── Retirement mode v2: home hierarchy ─────────────────── */
/* Dense metrics grid replaced by retirement hero for full retirees */
.bse-arch-in_retirement #home-metrics { display: none !important; }
/* Verdict block reduced prominence in pre-retirement retirement mode */
.xp-mode-retirement #v21-verdict-block { opacity: 0.72; }

/* ── Retirement mode v2: NBM softer tone ────────────────── */
.xp-mode-retirement #v21-nbm-card {
  border-color: var(--sky-border, rgba(0,168,232,0.15));
  background: linear-gradient(135deg, rgba(32,178,170,0.03) 0%, transparent 100%);
}

/* ── Retirement mode v2: debt framing tone ──────────────── */
/* Orient (context paragraph) shifts to calm/teal — less urgency */
.xp-mode-retirement .bse-dl-orient {
  color: var(--teal, #20b2aa);
}
/* Section labels softer weight */
.xp-mode-retirement .bse-dl-label {
  color: var(--gray-4, #667080);
  font-weight: 500;
}
/* Reveal-more button de-emphasized */
.xp-mode-retirement .bse-dl-reveal {
  color: var(--gray-3, #9aa0ad);
  font-size: 12px;
}

/* ── Header mode rail: permanently suppressed ──────────── */
/* The visible rail is #v21-mode-rail-clone inside #v21-mode-rail-home
   (tab content). The header original is a clone source only and must
   never render — compat-bridge and BSE detail-mode both try to show it,
   creating a duplicate nav above the primary bottom-nav. */
#v21-mode-rail { display: none !important; }

/* ── xp-mode-retirement: suppress growth/career elements ── */
/* Mirrors bse-arch-in_retirement injection for age-only path */
.xp-mode-retirement #v21-mode-rail-home { display: none !important; }
.xp-mode-retirement #v21-premium-teaser { display: none !important; }
.xp-mode-retirement #ppill-career       { display: none !important; }
.xp-mode-retirement #prog-sub-career    { display: none !important; }
.xp-mode-retirement .ppill-growth-context { display: none !important; }
.xp-mode-retirement #career-compare-card,
.xp-mode-retirement #career-chart-card,
.xp-mode-retirement #career-promo-card,
.xp-mode-retirement #career-log-card,
.xp-mode-retirement #career-action-btn { display: none !important; }
.xp-mode-retirement #mode-btn-career   { display: none !important; }

/* ── Suppress internal meta chips from all user-facing views ── */
/* Data is retained in JS — only the display is suppressed */
#sbd-meta-chips { display: none !important; }

/* ── Grow: financial structure section labels ───────────── */
.grow-fs-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-3, #9aa0ad);
  margin-bottom: 12px;
}

/* ── Net worth tab edit CTA ─────────────────────────────── */
.nw-edit-cta {
  margin-top: 16px;
  text-align: center;
}
.nw-edit-btn {
  width: 100%;
  padding: 13px 20px;
  background: transparent;
  color: var(--teal, #20b2aa);
  border: 1.5px solid var(--sky-border, rgba(0,168,232,0.2));
  border-radius: var(--r-pill, 50px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  transition: background 0.15s, border-color 0.15s;
}
.nw-edit-btn:active {
  background: rgba(32,178,170,0.06);
  border-color: var(--teal, #20b2aa);
}