/* ==========================================================================
   wallet-cc.css — the Coral Compass Wallet rebuild (Round 29 concept).
   Source of truth: points-relay/exchange/evidence/codex-coral-compass-
   wallet-round29.html. Same scoping pattern as assets/strategy-cc.css and
   assets/home.css: tokens on .ppWallet{}, a dark override on
   [data-theme="dark"] .ppWallet{}, every rule prefixed .ppWallet so nothing
   here can collide with styles.css or the legacy wallet.js hub markup that
   ships alongside it until a later cleanup pass. Palette matches
   strategy-cc.css exactly (same site, same concept family).
   ========================================================================== */

.ppWallet{--canvas:#f4f1e8;--surface:#fffdf8;--surface2:#ebe7dc;--ink:#0c1f1e;--muted:#536562;--line:#cdd5ce;--ever:#123f3b;--coral:#e75c3c;--sea:#bfe1d7;--good:#176b55;--warn:#956018;--danger:#a63f35;--display:Charter,"Iowan Old Style",Georgia,serif;--shadow:0 18px 48px rgba(12,31,30,.1);color-scheme:light;color:var(--ink);font:16px/1.5 var(--font,inherit)}
[data-theme="dark"] .ppWallet{--canvas:#0c1f1e;--surface:#132a28;--surface2:#193633;--ink:#f5f1e8;--muted:#b9c9c4;--line:#35504b;--ever:#bfe1d7;--coral:#f47a5d;--sea:#234c47;--good:#8ed8bd;--warn:#f1c36e;--danger:#ff9b89;--shadow:0 18px 48px rgba(0,0,0,.28);color-scheme:dark}

.ppWallet *{box-sizing:border-box}
.ppWallet button,.ppWallet a{font:inherit;color:inherit}
.ppWallet button{cursor:pointer}
.ppWallet button:focus-visible,.ppWallet a:focus-visible,.ppWallet input:focus-visible{outline:3px solid var(--ever);outline-offset:2px}
.ppWallet h1,.ppWallet h2,.ppWallet h3,.ppWallet h4{font-family:var(--display);line-height:1.05;letter-spacing:-.02em;margin:0}
.ppWallet p{margin:0}
.ppWallet .muted{color:var(--muted)}
.ppWallet .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 16px;font-weight:850}
.ppWallet .btn.primary{background:var(--coral);border-color:var(--coral);color:#0c1f1e}
.ppWallet .btn.ghost{background:transparent}
.ppWallet .actionRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---- hero ---- */
.ppWallet .ppwHero{padding:8px 0 20px}
.ppWallet .ppwKicker{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;background:var(--sea);color:var(--ever);padding:0 12px;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;margin-right:6px}
.ppWallet .ppwKicker.sample{background:var(--surface2);color:var(--muted)}
.ppWallet .ppwHero h1{margin:14px 0 8px;font-size:clamp(28px,4.2vw,42px)}
.ppWallet .ppwLead{max-width:640px;color:var(--muted);font-size:16px}
.ppWallet .ppwTruthRow{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.ppWallet .ppwTruth{display:inline-flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:0 11px;font-size:12px;font-weight:700}
.ppWallet .ppwTruth i{width:7px;height:7px;border-radius:50%;background:var(--good);display:block}

/* ---- sample data banner ---- */
.ppWallet .ppwBanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:14px;background:var(--surface2);padding:12px 16px;margin:0 0 18px;font-size:13px}
.ppWallet .ppwBanner b{color:var(--ink)}
.ppWallet .ppwBanner a{color:var(--ever);font-weight:800;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

/* ---- readiness ---- */
.ppWallet .ppwReadiness{display:grid;grid-template-columns:1.35fr repeat(3,1fr);border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow);margin:0 0 18px}
.ppWallet .ppwReadyLead{padding:20px;background:var(--ever);color:var(--canvas)}
[data-theme="dark"] .ppWallet .ppwReadyLead{color:#0c1f1e}
.ppWallet .ppwReadyLead small,.ppWallet .ppwMetric small{display:block;font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;opacity:.78}
.ppWallet .ppwReadyLead strong{display:block;margin-top:6px;font:700 20px/1.15 var(--display)}
.ppWallet #ppwNextMovesSlot .ppg-x{width:44px;height:44px;top:8px;right:8px}
.ppWallet #ppwNextMovesSlot .ppg-cta{min-height:44px;color:#fff}
.ppWallet .ppwMetric{padding:20px;border-left:1px solid var(--line)}
.ppWallet .ppwMetric b{display:block;margin-top:5px;font:700 21px/1 var(--display)}
.ppWallet .ppwMetric span{display:block;margin-top:5px;color:var(--muted);font-size:11.5px}
.ppWallet .ppwMetric .ok{color:var(--good);font:900 12px/1 var(--sans,inherit)}

/* ---- tabs ---- */
.ppWallet .ppwTabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 18px;padding:4px;background:var(--surface2);border:1px solid var(--line);border-radius:14px}
.ppWallet .ppwTab{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:850;font-size:14px}
.ppWallet .ppwTab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 10px rgba(12,31,30,.08)}
.ppWallet .ppwPane{display:none}
.ppWallet .ppwPane.on{display:block}

/* ---- shared card/grid ---- */
.ppWallet .ppwSplit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px}
.ppWallet .ppwStack{display:grid;gap:12px}
.ppWallet .ppwCard{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:20px;box-shadow:0 2px 0 rgba(12,31,30,.02)}
.ppWallet .ppwCard h2{font-size:28px;margin:0 0 6px}
.ppWallet .ppwCard h3{font-size:20px;margin:0 0 6px}
.ppWallet .ppwEyebrow{display:block;color:var(--coral);font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px}

/* ---- Ready: decision card ---- */
.ppWallet .ppwDecision{border-color:var(--coral);box-shadow:inset 4px 0 0 var(--coral)}
.ppWallet .ppwDecisionGrid{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.ppWallet .ppwGain{text-align:right;white-space:nowrap}
.ppWallet .ppwGain b{display:block;color:var(--good);font:700 26px/1 var(--display)}
.ppWallet .ppwGain span{color:var(--muted);font-size:12px}
/* A-07 (2026-08-03): on an exact tie the slot reads "Even", not a signed
   "$0.00/mo" gain. --good is the "you are ahead by this much" colour and a
   tie is not a gain, so the tied variant drops to the normal ink. Nothing
   else about the slot changes -- same box, same position, same size. */
.ppWallet .ppwGain.tied b{color:var(--ink)}
.ppWallet .ppwCapSwitch{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--surface2);margin-top:14px}
.ppWallet .ppwCapSwitch button{min-height:44px;border:0;border-radius:9px;background:transparent;padding:0 12px;font-size:12px;font-weight:900}
.ppWallet .ppwCapSwitch button[aria-pressed="true"]{background:var(--surface);box-shadow:0 2px 8px rgba(12,31,30,.08)}
.ppWallet .ppwEquation{margin:12px 0;padding:13px;border-radius:12px;background:var(--surface2);font-weight:850;font-size:14px}
/* Receipt delta structure (owner spec 2026-07-30): higher-earning card,
   current card, then the explicit Left-on-the-table subtraction. */
.ppWallet .ppwRcptRow{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px}
.ppWallet .ppwRcptRow small{display:block;color:var(--muted);font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.ppWallet .ppwRcptLine{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:5px 0 2px}
.ppWallet .ppwRcptLine strong{font-size:18px;white-space:nowrap}
.ppWallet .ppwRcptRow p{margin:2px 0 0;font-size:12.5px}
.ppWallet .ppwRcptWin{background:var(--surface2)}
.ppWallet .ppwRcptDelta{border-color:var(--good);box-shadow:inset 4px 0 0 var(--good)}
.ppWallet .ppwRcptDelta strong{color:var(--good)}
.ppWallet .ppwReceiptBtn{margin-top:6px;min-height:44px;display:inline-flex;align-items:center;border:0;background:transparent;color:var(--ever);padding:0;font-weight:900;text-decoration:underline;text-underline-offset:4px;font-size:13px}
.ppWallet .ppwDataCard{background:var(--ever);color:var(--canvas)}
[data-theme="dark"] .ppWallet .ppwDataCard{color:#0c1f1e}
/* A-01 (2026-08-02, measured): .ppwReceiptBtn above paints color:var(--ever)
   and .ppwDataCard paints background:var(--ever) -- the SAME token. The
   "Inspect every balance" button inside the Wallet-floor card therefore
   rendered at contrast ratio 1.00 in BOTH themes (light rgb(18,63,59) on
   rgb(18,63,59); dark rgb(191,225,215) on rgb(191,225,215)), at every
   viewport: present, 147.53x44, focusable, clickable, and completely
   invisible. It was the only route from Summary into Holdings on that card.
   The button now takes the card's own ink colour, the one already chosen to
   read on --ever, so it can never drift from the background again. Scoped to
   .ppwDataCard on purpose: the OTHER .ppwReceiptBtn ("See the calculation
   receipt", on the light decision card) already measured 11.48 / 10.77 and
   is left exactly as it was. */
.ppWallet .ppwDataCard .ppwReceiptBtn{color:inherit}
.ppWallet .ppwDataCard .muted{color:inherit;opacity:.74}
.ppWallet .ppwPlainList{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ppWallet .ppwPlainList li{padding-top:10px;border-top:1px solid var(--line)}
.ppWallet .ppwPlainList b{display:block;font-size:13.5px}
.ppWallet .ppwPlainList span{font-size:12.5px;color:var(--muted)}
.ppWallet .ppwLock{border:1px dashed var(--line);background:transparent}
.ppWallet .ppwLockBadge{display:inline-flex;min-height:26px;align-items:center;border-radius:999px;background:var(--surface2);padding:0 10px;font-size:10.5px;font-weight:900;margin-bottom:8px}
.ppWallet .ppwPaidStack{display:grid;gap:10px}
.ppWallet .ppwPaidMove{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.ppWallet .ppwPaidMove strong{color:var(--good)}
.ppWallet .ppwPaidMove small{display:block;color:var(--muted)}

/* ---- section head + segmented ---- */
.ppWallet .ppwSectionHead{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.ppWallet .ppwSectionHead h2{margin:0;font:700 28px/1 var(--display)}
.ppWallet .ppwSectionHead p{margin:6px 0 0;color:var(--muted)}
.ppWallet .ppwSegmented{display:flex;border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:3px}
.ppWallet .ppwSegmented button{min-height:44px;border:0;border-radius:9px;background:transparent;padding:0 12px;font-size:12px;font-weight:900}
.ppWallet .ppwSegmented button[aria-pressed="true"]{background:var(--surface);box-shadow:0 2px 8px rgba(12,31,30,.08)}

/* ---- Holdings ---- */
.ppWallet .ppwHoldSummary{display:grid;grid-template-columns:1.2fr repeat(3,1fr);border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;margin-bottom:14px}
.ppWallet .ppwHoldSummary--empty{grid-template-columns:1fr}
.ppWallet .ppwHoldSummary>div{padding:16px;border-left:1px solid var(--line)}
.ppWallet .ppwHoldSummary>div:first-child{border-left:0}
.ppWallet .ppwHoldSummary small{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ppWallet .ppwHoldSummary b{display:block;margin-top:5px;font:700 22px/1 var(--display)}
.ppWallet .ppwHoldSummary span{display:block;margin-top:5px;color:var(--muted);font-size:10.5px;line-height:1.3}
.ppWallet .ppwHoldList{display:grid;gap:10px}
.ppWallet .ppwHoldRow{display:grid;grid-template-columns:minmax(200px,1.3fr) .72fr .8fr 1fr;gap:16px;align-items:center;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 16px}
.ppWallet .ppwHoldRow.dollarsMode{grid-template-columns:minmax(200px,1.3fr) 1fr}
.ppWallet .ppwProgram{display:flex;align-items:center;gap:11px;min-width:0}
.ppWallet .ppwMark{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--sea);color:var(--ever);font-size:10.5px;font-weight:950;overflow:hidden}
.ppWallet .ppwMark img{width:20px;height:20px;object-fit:contain}
.ppWallet .ppwProgram b,.ppWallet .ppwCell b,.ppWallet .ppwHeldCard b{display:block}
.ppWallet .ppwProgram b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A-02 / A-06 (2026-08-02, measured): .ppwProgram is min-width:0, but the
   text <div> BETWEEN it and the <b> computed min-width:auto. Because the <b>
   is white-space:nowrap, that div's min-content width was the whole
   untruncated string (311.34px for "American Express Membership Rewards"),
   so the div never shrank and the ellipsis on <b> could never fire. Two
   symptoms, one cause: at 768/1440 the name painted straight across its
   siblings (768: 456.17px^2 over the "Balance" label -- 100% of it -- and
   98.83px^2 over "703,000"; 1440: 188.87 and 25.75), and at 390, where
   .ppwProgram spans the full row, it ran 60.34px past its own card and
   17.34px past the viewport, hard-cut by html/body overflow-x:clip with no
   ellipsis ("American Express Membership R"). min-width:0 restores the
   shrink the ellipsis was always waiting on. */
.ppWallet .ppwProgram>.ppwProgramText{min-width:0}
.ppWallet .ppwProgram small,.ppWallet .ppwCell small,.ppWallet .ppwHeldCard small{display:block;color:var(--muted);font-size:11px}
.ppWallet .ppwCell.value b{color:var(--good)}
.ppWallet .ppwReadingList{display:grid;gap:6px;margin-top:6px}
.ppWallet .ppwReadingList>span{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ppWallet .ppwReadingList>span>small{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em}
.ppWallet .ppwReadingList>span>b{font-size:13px;white-space:normal;text-align:right}
.ppWallet .ppwReadingList>span.missing>b{max-width:150px;color:var(--muted);font-size:10.5px;line-height:1.2}
.ppWallet .ppwReadingList--inverse>span>b{color:inherit}
.ppWallet .ppwHeldCards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.ppWallet .ppwHeldCard{min-height:110px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--surface),var(--surface2));padding:14px}
/* A-05 (2026-08-02, measured): the display:block pair above used to name only
   .ppwProgram and .ppwCell. .ppwHeldCard was never added, so its <b> and
   <small> both computed display:inline and all 6 tiles painted their two
   labels with a 0.00px gap -- "Chase Sapphire ReserveChase Ultimate Rewards",
   "American Express PlatinumAmerican Express Membership Rewards", and four
   more. .ppwHeldCard now joins the same two selector lists rather than
   getting a third rule of its own; the colour-only declaration below is what
   it always had and is unchanged. */
.ppWallet .ppwHeldCard small{color:var(--muted)}

/* ---- Spending ---- */
.ppWallet .ppwSpendSummary{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.ppWallet .ppwSpendMeter{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:16px}
.ppWallet .ppwSpendMeter i{height:38px;border-radius:8px;background:var(--surface2);position:relative;overflow:hidden;display:block;font-style:normal}
.ppWallet .ppwSpendMeter i em{content:"";position:absolute;left:0;right:0;bottom:0;display:block;background:var(--coral);font-style:normal}
.ppWallet .ppwSpendRows{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.ppWallet .ppwSpendRow{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px}
.ppWallet .ppwSpendRow b,.ppWallet .ppwSpendRow small{display:block}
.ppWallet .ppwSpendRow small{color:var(--muted);font-size:11px}
.ppWallet .ppwSpendRow.notSet{border-style:dashed}
.ppWallet .ppwSpendRow.notSet b{color:var(--muted)}
.ppWallet .ppwComing{border:1px solid var(--line);border-radius:18px;background:var(--surface2);padding:18px}
.ppWallet .ppwComing h3{margin:0 0 6px;font:700 21px/1 var(--display)}

/* ---- empty / error preview states ---- */
.ppWallet .ppwEmptyGrid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px;margin-bottom:16px}
.ppWallet .ppwStepNum{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--coral);color:#0c1f1e;font-weight:950;margin-bottom:8px}
.ppWallet .ppwSetupSteps{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}
.ppWallet .ppwSetupSteps li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.ppWallet .ppwSetupSteps b,.ppWallet .ppwSetupSteps span{display:block}
.ppWallet .ppwSetupSteps span{font-size:12px;color:var(--muted)}
.ppWallet .ppwManualOnly{background:var(--ever);color:var(--canvas)}
[data-theme="dark"] .ppWallet .ppwManualOnly{color:#0c1f1e}
.ppWallet .ppwManualOnly .muted{color:inherit;opacity:.75}
.ppWallet .ppwErrorBox{border-color:var(--danger);box-shadow:inset 4px 0 0 var(--danger)}
.ppWallet .ppwErrorBox strong{color:var(--danger)}
.ppWallet .ppwSafeInventory{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.ppWallet .ppwSafeInventory div{border:1px solid var(--line);border-radius:13px;padding:11px}
.ppWallet .ppwSafeInventory b,.ppWallet .ppwSafeInventory small{display:block}
.ppWallet .ppwSafeInventory small{color:var(--muted)}

/* ---- foot ---- */
.ppWallet .ppwFoot{margin-top:18px;color:var(--muted);font-size:12px;line-height:1.5}

/* ---- overlay dialogs (own scrim, no native <dialog>, no index.html edits) ---- */
.ppWallet .ppwScrim{display:none;position:fixed;inset:0;z-index:200;background:rgba(3,14,13,.6);align-items:center;justify-content:center;padding:14px}
.ppWallet .ppwScrim.on{display:flex}
.ppWallet .ppwDialog{width:min(620px,100%);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.36)}
.ppWallet .ppwDialogHead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;border-bottom:1px solid var(--line)}
.ppWallet .ppwDialogHead h2{font-size:24px}
.ppWallet .ppwDialogClose{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:18px}
.ppWallet .ppwDialogBody{padding:18px}
.ppWallet .ppwDialogFoot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.ppWallet .ppwChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ppWallet .ppwChoice{min-height:64px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);padding:10px 12px;text-align:left}
.ppWallet .ppwChoice[aria-pressed="true"]{border-color:var(--coral);box-shadow:inset 4px 0 0 var(--coral)}
.ppWallet .ppwChoice b,.ppWallet .ppwChoice small{display:block}
.ppWallet .ppwChoice small{color:var(--muted)}
.ppWallet .ppwField{display:grid;gap:6px;margin-top:14px}
.ppWallet .ppwField span{font-size:12px;font-weight:900}
.ppWallet .ppwField input{min-height:46px;width:100%;border:1px solid var(--line);border-radius:11px;background:var(--canvas);color:var(--ink);padding:8px 11px;font-size:16px}
.ppWallet .ppwManageRows{display:grid;gap:8px}
.ppWallet .ppwManageRow{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:9px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface2) 58%,transparent)}
.ppWallet .ppwManageRow input{min-height:44px;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--canvas);color:var(--ink);padding:8px;font-size:16px}
/* R88: helper copy wraps instead of ellipsizing because the earning cards and
   removal consequence are part of the decision, not decoration. min-width:0
   keeps that copy inside the flexible name column. */
.ppWallet .ppwManageRow>span{min-width:0}
.ppWallet .ppwManageRow>span>small{display:block;margin-top:4px;font-size:12px;font-weight:700;line-height:1.4;color:var(--muted)}
.ppWallet .ppwManageRow.confirming{grid-template-columns:1fr}
.ppWallet .ppwConfirmBar{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed var(--danger);border-radius:10px;padding:8px 10px;background:color-mix(in srgb,var(--danger) 8%,transparent)}
.ppWallet .ppwRemove{min-width:44px;min-height:44px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:11px;background:var(--surface);color:var(--danger);padding:8px 12px;font-weight:900}
.ppWallet .ppwManageDialog{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
.ppWallet .ppwManageDialog .ppwDialogHead{position:relative;z-index:4;background:var(--surface)}
.ppWallet .ppwManageNav{position:relative;z-index:3;padding:12px 18px 10px;background:var(--surface)}
.ppWallet .ppwManageIntro{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.45}
.ppWallet .ppwManageTabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.ppWallet .ppwManageTab{min-width:44px;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:900}
.ppWallet .ppwManageTab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 10px rgba(12,31,30,.1)}
.ppWallet .ppwManageScroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 18px;scrollbar-gutter:stable}
.ppWallet .ppwManagePanel{padding:0}
.ppWallet .ppwManagePanel[hidden]{display:none}
.ppWallet .ppwManagePanelCopy{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.ppWallet .ppwManageActions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ppWallet .ppwManageRow--card{grid-template-columns:minmax(0,1fr) auto}
.ppWallet .ppwManageAction{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:8px 12px;font-weight:900}
.ppWallet .ppwManagePointer{grid-column:1/-1;margin:0;padding:10px 12px;border-left:4px solid var(--coral);border-radius:8px;background:color-mix(in srgb,var(--coral) 9%,transparent);font-size:13px;line-height:1.45}
.ppWallet .ppwManageConfirm{grid-template-columns:1fr;border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.ppWallet .ppwConfirmCopy{line-height:1.5}
.ppWallet .ppwManageConfirmActions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.ppWallet .ppwManageEmpty{padding:22px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center}
.ppWallet .ppwManageUndo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid var(--good);border-radius:12px;background:color-mix(in srgb,var(--good) 9%,var(--surface))}
.ppWallet .ppwManageUndoCopy{font-size:14px;font-weight:850;line-height:1.4}
.ppWallet .ppwManageUndo .btn{min-width:44px;min-height:44px}
.ppWallet .ppwSavedTag{font-size:11px;font-weight:800;color:var(--good);opacity:0;transition:opacity .2s ease}
.ppWallet .ppwSavedTag.show{opacity:1}
.ppWallet .ppwToast{position:fixed;z-index:220;left:50%;bottom:22px;transform:translate(-50%,120px);opacity:0;visibility:hidden;pointer-events:none;background:var(--ink);color:var(--canvas);border-radius:999px;padding:11px 17px;font-weight:850;box-shadow:var(--shadow);transition:transform .2s ease,opacity .2s ease}
.ppWallet .ppwToast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---- R86 bank connections ----------------------------------------------
   TWO new components, and only two. The design spec approved exactly these
   because nothing existing represents them:

     .ppwProgress / .ppwProgressStep  — one honest FOUR-STAGE ordered process
       (token mint, Plaid's window, exchange, first sync). Ordinal only: there
       is no percentage here because we cannot know one, and a fake bar is a
       lie told slowly. Completed steps carry a check, the current one is coral
       and also says "Current step" in text (colour is never the only signal),
       upcoming ones use --surface2.
     .ppwBankRow — a READ-ONLY modifier of .ppwManageRow. The base row is a
       three-column editable form row; bending it into a fake input for a bank
       name would have been the same mistake as the pm-prefixed classes.

   Everything else on this surface reuses .ppwCard, .ppwHero, .ppwSetupSteps,
   .ppwHeldCards, .ppwTruth, .ppwErrorBox, .ppwConfirmBar and .ppwDialog*.
   Tokens only — no literal light background, dark text or warning red, so the
   [data-theme="dark"] override above is the single palette switch. */
.ppWallet.ppBankConnections{padding:28px 24px 40px}
/* The onboarding shell wraps the shared core in .obWaysRow (the flag-independent
   marker build/check-plaid-gate.mjs proves both its arms reached the screen
   with). That class is a multi-column grid; the shared core is one column
   inside onboarding's 760px reading width, so this neutralises it for this
   root only. Higher specificity than the bare .obWaysRow in styles.css, and
   this sheet loads after it. */
.ppWallet.ppBankConnectionFlow{display:block;margin:0 0 16px}
.ppWallet .ppBankBack{margin:0 0 18px}
.ppWallet .ppwProgress{border:1px solid var(--line);border-radius:16px;background:var(--surface2);padding:16px;margin-top:14px}
.ppWallet .ppwProgressSteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.ppWallet .ppwProgressStep{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:0 12px;border-left:1px solid var(--line)}
.ppWallet .ppwProgressStep:first-child{border-left:0;padding-left:0}
.ppWallet .ppwProgressStep b{display:block;font-family:var(--font,inherit);font-size:13px;font-weight:850;line-height:1.2}
.ppWallet .ppwProgressMark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-weight:950;font-size:13px}
.ppWallet .ppwProgressStep.is-done .ppwProgressMark{background:var(--good);border-color:var(--good);color:var(--surface)}
.ppWallet .ppwProgressStep.is-now .ppwProgressMark{background:var(--coral);border-color:var(--coral);color:#0c1f1e;animation:ppwPulse 1.4s ease-in-out infinite}
.ppWallet .ppwProgressStep.is-now b{color:var(--ink)}
.ppWallet .ppwProgressStep.is-next b{color:var(--muted)}
.ppWallet .ppwProgressNow{display:block;font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--coral)}
.ppWallet .ppwProgressSay{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);min-height:44px}
.ppWallet .ppwProgressCopy{font-weight:850;transition:opacity .16s ease}
.ppWallet .ppwProgressSlow{margin-top:5px;color:var(--muted);font-size:13px;transition:opacity .16s ease}
@keyframes ppwPulse{0%,100%{opacity:1}50%{opacity:.72}}
.ppWallet .ppwConnecting{min-height:320px}
.ppWallet .ppwDisclose{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.ppWallet .ppwDisclose summary{min-height:44px;display:flex;align-items:center;font-weight:850;cursor:pointer}
.ppWallet .ppwFlowActs{margin-top:16px}
.ppWallet .ppwFactsHead{margin-top:14px;font-size:16px}
.ppWallet .ppwFactsWhat{margin-top:6px}
.ppWallet .ppwDataCard .obSecList{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px;font-size:13px}
/* .ppwBankRow — the read-only modifier. No third action cell ever, because
   there is no per-bank action: the deployed disconnect removes every Item. */
.ppWallet .ppwBankRow{grid-template-columns:minmax(0,1fr) auto minmax(0,auto);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px}
.ppWallet .ppwTruth--warn i{background:var(--warn)}
.ppWallet .ppwTruth--warn{border-color:var(--warn);color:var(--warn)}
.ppWallet .ppwRelink{border:1px solid var(--danger);border-radius:14px;padding:14px;margin-bottom:14px}
.ppWallet .ppwDisconnect{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ppWallet .ppwConfirmBar{flex-direction:column;align-items:stretch;gap:12px;margin-top:12px;padding:14px}
.ppWallet .ppwMapRow{gap:6px}
.ppWallet .ppwMapProv{align-self:flex-start}
.ppWallet .ppwMapDefer{margin-top:12px;font-size:13px}

@media(max-width:840px){
  .ppWallet.ppBankConnections{padding:24px 20px 40px}
  /* DOM order stays 1->4; this is two columns by two rows, never a scroller. */
  .ppWallet .ppwProgressSteps{grid-template-columns:1fr 1fr;gap:12px}
  .ppWallet .ppwProgressStep{border-left:0;padding:0}
  .ppWallet .ppwSplit,.ppWallet .ppwEmptyGrid{grid-template-columns:1fr}
  .ppWallet .ppwReadiness{grid-template-columns:1fr 1fr}
  .ppWallet .ppwReadyLead{grid-column:1/-1}
  .ppWallet .ppwMetric:nth-child(odd){border-left:0}
  .ppWallet .ppwHoldRow{grid-template-columns:1.2fr .8fr 1fr}
  .ppWallet .ppwHoldRow .ppwRate{display:none}
  .ppWallet .ppwHeldCards{grid-template-columns:1fr 1fr}
  .ppWallet .ppwSpendSummary{grid-template-columns:1fr}
  .ppWallet .ppwSafeInventory{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .ppWallet.ppBankConnections{padding:20px 16px 40px}
  /* A vertical four-step rail at 390/440: a 34px marker column plus flexible
     text, matching .ppwSetupSteps. Completed AND upcoming stages stay visible
     so the user can see where they are, and .ppwConnecting keeps its 320px
     minimum so the page does not jump as the status copy changes. */
  .ppWallet .ppwProgressSteps{grid-template-columns:1fr;gap:10px}
  .ppWallet .ppwProgressStep{align-items:start}
  .ppWallet .ppwBankRow{grid-template-columns:1fr;gap:6px}
  .ppWallet .ppwFlowActs{flex-direction:column;align-items:stretch}
  .ppWallet .ppwFlowActs .btn{width:100%}
  .ppWallet .ppwTabs{grid-template-columns:1fr 1fr 1fr}
  .ppWallet .ppwDecisionGrid{grid-template-columns:1fr}
  .ppWallet .ppwGain{text-align:left}
  .ppWallet .ppwSectionHead{flex-direction:column;align-items:stretch}
  .ppWallet .ppwSegmented{width:100%}
  .ppWallet .ppwSegmented button{flex:1}
  .ppWallet .ppwHoldSummary{grid-template-columns:1fr}
  .ppWallet .ppwHoldSummary>div{border-left:0;border-top:1px solid var(--line)}
  .ppWallet .ppwHoldSummary>div:first-child{border-top:0}
  .ppWallet .ppwHoldRow{grid-template-columns:1fr 1fr;padding:13px}
  .ppWallet .ppwHoldRow .ppwProgram{grid-column:1/-1}
  .ppWallet .ppwHoldRow .ppwRate{display:block}
  .ppWallet .ppwHoldRow .ppwCell.value{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .ppWallet .ppwHeldCards{grid-template-columns:1fr}
  .ppWallet .ppwSpendRows{grid-template-columns:1fr 1fr}
  .ppWallet .ppwSafeInventory{grid-template-columns:1fr}
  .ppWallet .ppwChoiceGrid{grid-template-columns:1fr}
  .ppWallet .ppwManageRow{grid-template-columns:minmax(0,1fr) 128px}
  .ppWallet .ppwManageRow--card{grid-template-columns:minmax(0,1fr) auto}
  .ppWallet .ppwDialog{position:fixed;inset:auto 0 0;width:100%;margin:0;border-radius:22px 22px 0 0;max-height:92vh}
  .ppWallet .ppwManageDialog{max-height:calc(100dvh - env(safe-area-inset-top));overflow:hidden}
  .ppWallet .ppwManageDialog .ppwDialogHead{padding:10px 14px}
  .ppWallet .ppwManageNav{padding:9px 14px 8px}
  .ppWallet .ppwManageScroll{padding:4px 14px 14px}
  .ppWallet .ppwManageActions{grid-column:1/-1}
  .ppWallet .ppwManageActions,.ppWallet .ppwManageConfirmActions{display:grid;grid-template-columns:1fr}
  .ppWallet .ppwManageActions button,.ppWallet .ppwManageConfirmActions button{width:100%}
  .ppWallet .ppwManageUndo{grid-template-columns:1fr auto}
  .ppWallet .ppwManageUndoCopy{grid-column:1/-1}
  .ppWallet .ppwDialogFoot{flex-direction:column;align-items:stretch}
  .ppWallet .ppwManageDialog .ppwDialogFoot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  .ppWallet .ppwDialogFoot .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ppWallet *{transition:none!important;animation:none!important}
}