/* Compass — quiet plan pages (2026-10-06, the user: "clean and sophisticated … too much text should be handled
   by a ?"). The explanations live behind a small filled ? (js/47): on section and group titles always, on field
   labels when the field is hovered or focused (always on touch screens). In the first-declared layer, so these
   win over the older underline rules in every theme. Colors are theme tokens only. */
@layer compassNavTop {
  /* The ? itself: a small filled circle in the theme's accent. */
  html body .qm { display:inline-flex !important; align-items:center; justify-content:center; flex:none;
    width:15px !important; height:15px !important; min-width:0 !important; min-height:0 !important; margin:0 0 0 6px !important; padding:0 !important;
    border:0 !important; border-radius:50% !important; background:var(--teal) !important; color:var(--c-gray-99) !important;
    -webkit-text-fill-color:var(--c-gray-99) !important; font-family:inherit !important; font-size:10px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:0 !important;
    vertical-align:2px; cursor:help; box-shadow:none !important; text-transform:none !important; font-style:normal !important; text-shadow:none !important;
    background-clip:border-box !important; -webkit-background-clip:border-box !important; background-image:none !important; filter:none !important; opacity:.9; transition:opacity .15s, transform .15s; }
  html body .qm:hover, html body .qm:focus-visible { opacity:1; transform:scale(1.08); }
  html body .qm:focus-visible { outline:2px solid var(--teal) !important; outline-offset:2px; }
  html body h2 .qm, html body h3 .qm { vertical-align:3px; }

  /* Field labels in the plan: no dotted underline; the same ? after the text, drawn by CSS (the label keeps its
     tooltip). Hidden until the field is hovered or focused on a computer; always shown on touch screens. */
  html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) label.has-tip, html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .ofl > label.has-tip:first-child { text-decoration:none !important; border-bottom:0 !important; cursor:default; }
  html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .field > label.has-tip::after, html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .ofl > label.has-tip:first-child::after {
    content:'?'; display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; margin-left:5px; border-radius:50%;
    background:var(--teal); color:var(--c-gray-99); -webkit-text-fill-color:var(--c-gray-99); font-family:inherit; font-size:9px; font-weight:800; line-height:1; letter-spacing:0; vertical-align:1px;
    opacity:0; transition:opacity .15s; cursor:help; }
  html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .field:hover > label.has-tip::after, html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .field:focus-within > label.has-tip::after,
  html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .ofl:hover > label.has-tip:first-child::after, html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .ofl:focus-within > label.has-tip:first-child::after { opacity:.85; }
  @media (hover:none), (pointer:coarse){
    html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .field > label.has-tip::after, html body :is(#toolView, #rothView, #expensesView, #scenariosView, #stressView, #acaView) .ofl > label.has-tip:first-child::after { opacity:.7; }
  }
  /* "optional": plain small grey text, not a pill. */
  html body :is(#toolView, #rothView, #expensesView, #scenariosView) .fld-opt { background:none !important; border:0 !important; padding:0 !important; margin-left:5px !important; font-size:10.5px !important; font-weight:500 !important; color:var(--muted2) !important; letter-spacing:0; }

  /* Retirement details (2026-10-06, the user: fields of different sizes, rows not lined up): every group sits on
     the same 3-column grid, so each field lines up under the one above in every group (About you, Contributions,
     Employer match, Social Security, Assumptions, Spending). Fields that hold a whole row keep it. Per month / Per
     year use the same columns as the row under them. Balance is only a copy of the Accounts total: not shown here. */
  html body #toolView .rd-group > .inputs-grid { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:12px !important; align-items:start; }
  html body #toolView .rd-group > .inputs-grid > * { grid-column:auto !important; min-width:0; max-width:none !important; width:auto !important; margin:0 !important; }
  html body #toolView .rd-group > .inputs-grid > :is(.contrib-field, .spend-source-field, .rd-wd) { grid-column:1 / -1 !important; }
  html body #toolView .rd-spend-grid { display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:12px !important; width:100% !important; max-width:none !important; }
  html body #toolView .rd-spend-grid > * { min-width:0; max-width:none !important; width:auto !important; margin:0 !important; }
  html body #toolView .rd-spend-grid > .ofl > .unit-box, html body #toolView .rd-spend-grid > .ofl > input { flex:1 1 auto !important; align-self:stretch !important; width:100% !important; max-width:none !important; }
  html body #toolView .rd-you .field:has(#curBal) { display:none !important; }
  @media (max-width:700px){
    html body #toolView .rd-group > .inputs-grid, html body #toolView .rd-spend-grid { grid-template-columns:minmax(0, 1fr) !important; }
  }
  /* Text that moved behind a ? is hidden (it stays in the page for search and the Guide). */
  html body .q-folded { display:none !important; }
  html body .q-sr { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }

  /* The tooltip: a calm dark card. */
  html body #tooltipBubble { max-width:300px !important; padding:10px 12px !important; border-radius:10px !important; font-size:12.5px !important; line-height:1.5 !important; }

  /* "How you'll pay for retirement" (2026-10-06): a compact ranked list — number, name, tax pill, balance, arrows. */
  html body .pay-plan { padding:18px 20px !important; border-radius:16px !important; background:var(--c-gray-99) !important; }
  html body .pay-plan-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
  html body .pay-plan-head h3 { margin:0 !important; font-size:16px !important; font-weight:750; display:flex; align-items:center; }
  html body .pay-order { gap:0 !important; border:1px solid var(--line, var(--c-gray-90)); border-radius:12px; overflow:hidden; }
  html body .pay-order li { grid-template-columns:26px 1fr auto auto !important; gap:12px !important; padding:11px 12px !important; border:0 !important; border-top:1px solid var(--line, var(--c-gray-90)) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  html body .pay-order li:first-child { border-top:0 !important; }
  html body .pay-rank { width:22px !important; height:22px !important; font-size:11.5px !important; }
  html body .pay-body { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
  html body .pay-body strong { font-size:14px !important; font-weight:650; display:inline-flex; align-items:center; }
  html body .pay-body .qm { margin-left:4px !important; }
  html body .pay-tax { margin:0 !important; padding:2px 8px !important; font-size:11px !important; font-weight:600 !important; }
  html body .pay-note { display:none !important; }
  html body .pay-bal { font-size:14px !important; font-variant-numeric:tabular-nums; text-align:right; min-width:84px; }
  html body .pay-move { flex-direction:row !important; gap:4px !important; }
  html body .pay-move button { width:28px !important; height:28px !important; border-radius:8px !important; font-size:10px !important; }
  /* Presets: one small segmented control in the header. */
  html body .pay-presets { display:inline-flex !important; flex-wrap:wrap; gap:0 !important; margin:0 !important; padding:3px; border-radius:10px; background:var(--c-gray-95); }
  html body .pay-presets > span { display:none !important; }
  html body #payOrderPanel .pay-presets .preset-btn { margin:0 !important; padding:6px 11px !important; min-height:30px; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; font-size:12.5px !important; font-weight:650 !important; color:var(--muted) !important; }
  html body #payOrderPanel .pay-presets .preset-btn.is-on { background:var(--c-gray-99) !important; color:var(--teal) !important; box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), .14) !important; }
  html body #withdrawalOrderNote:empty { display:none !important; }
  html body #rmdSurplusWrap { margin-top:14px !important; }
  @media (max-width:700px){
    html body .pay-plan { padding:14px 12px !important; }
    html body .pay-order li { grid-template-columns:22px 1fr auto !important; }
    html body .pay-rank { align-self:start; margin-top:3px; }
    html body .pay-bal { margin-top:-2px; }
    html body .pay-bal { grid-column:2 !important; grid-row:2 !important; text-align:left; min-width:0; font-weight:600 !important; }
    html body .pay-move { grid-column:3 !important; grid-row:1 !important; flex-direction:row !important; align-self:start; }
    html body .pay-presets { display:flex !important; width:100%; }
    html body #payOrderPanel .pay-presets .preset-btn { flex:1 1 auto; padding:6px 6px !important; font-size:12px !important; }
  }

  /* Quick estimate, Social Security (2026-10-07): "When will you start Social Security?" as three choices, then the
     benefit for that age (js/05 qsSSChoose). The row uses the step's own 3 columns. */
  html body .qs-ss-field .qs-ss-q { display:block; margin:2px 0 8px; font-size:14px; font-weight:700; color:var(--c-slate-30); }
  html body .qs-ss-chips { display:inline-flex; flex-wrap:wrap; padding:3px; border-radius:12px; background:var(--c-gray-95); }
  html body .qs-ss-chips button { min-height:36px; padding:6px 14px; border:0; border-radius:9px; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:var(--c-slate-45); cursor:pointer; white-space:nowrap; }
  html body .qs-ss-chips button.is-on { background:var(--c-gray-99); color:var(--c-teal-40); box-shadow:0 1px 3px rgba(var(--c-shadow-rgb), .16); }
  html body .qs-ss-chips button:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
  /* The benefit and start age sit in the step's own columns (subgrid), right under Balance and Contributions. */
  html body .qs-inputs-grid > .qs-ss-field { display:grid !important; grid-template-columns:subgrid; row-gap:12px; align-items:start; }
  html body .qs-inputs-grid > .qs-ss-field.rn-stage-hidden { display:none !important; } /* other steps hide it (js/17) */
  html body .qs-ss-field > .qs-ss-when { grid-column:1 / -1; }
  html body .qs-ss-row { display:contents; }
  html body .qs-ss-row > .field { margin:0 !important; min-width:0; }
  html body .qs-ss-row > .field, html body .qs-ss-row > .field > :is(input, .unit-box) { width:100% !important; max-width:none !important; align-self:stretch !important; box-sizing:border-box; }
  html body .qs-ss-row > .field[hidden] { display:none !important; }
  @media (max-width:700px){
    html body .qs-ss-chips { display:flex; width:100%; }
    html body .qs-ss-chips button { flex:1 1 auto; padding:6px 8px; font-size:13px; }
  }
}

/* A tapped ? shows its bubble on touch screens too (2026-10-10). Hover-only tooltips stay hidden on touch (styles.css);
   this one was asked for, so it beats those rules by specificity. */
html body #tooltipBubble.visible.is-tap { display:block !important; opacity:1 !important; }