/* ==========================================================================
   strategy-cc.css — the Coral Compass Strategy rebuild (Round 28 concept).
   Source of truth: points-relay/exchange/evidence/codex-coral-compass-
   strategy-round28.html. All rules below are scoped under .ppStrat so they
   cannot collide with the SPA's global styles.css or with the legacy
   st2- and strat-prefixed rules that ship alongside it (build plan §5.3 —
   those stay until a later cleanup pass). NOTE: never write a star-slash
   sequence inside this comment. One here ate the ENTIRE .ppStrat light
   token rule in production (transparent receipt dialog, off-palette light
   mode) — build/check-css-comments.mjs now guards this, but spell glob-ish
   prose in words anyway. Mirrors assets/home.css's scoping
   pattern exactly: tokens on .ppStrat{}, a dark override on
   [data-theme="dark"] .ppStrat{}, and every rule prefixed .ppStrat.
   ========================================================================== */

.ppStrat{--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"] .ppStrat{--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}

.ppStrat *{box-sizing:border-box}
.ppStrat button,.ppStrat a{font:inherit;color:inherit}
.ppStrat button{cursor:pointer}
.ppStrat button:focus-visible,.ppStrat a:focus-visible{outline:3px solid var(--ever);outline-offset:2px}
.ppStrat h1,.ppStrat h2,.ppStrat h3,.ppStrat h4{font-family:var(--display);line-height:1.05;letter-spacing:-.02em;margin:0}
.ppStrat p{margin:0}
.ppStrat .muted{color:var(--muted)}

/* ---- hero ---- */
.ppStrat .ppsHero{padding:8px 0 22px}
.ppStrat .ppsKicker{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}
.ppStrat .ppsHero h1{margin:14px 0 8px;font-size:clamp(28px,4.2vw,42px)}
.ppStrat .ppsLead{max-width:640px;color:var(--muted);font-size:16px}
.ppStrat .ppsTruthRow{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.ppStrat .ppsTruth{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}
.ppStrat .ppsTruth i{width:7px;height:7px;border-radius:50%;background:var(--good);display:block}

/* ---- sample / partial-data banner ---- */
.ppStrat .ppsBanner{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}
.ppStrat .ppsBanner b{color:var(--ink)}
.ppStrat .ppsBanner a{color:var(--ever);font-weight:800;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

/* ---- scoreboard ---- */
.ppStrat .ppsScoreboard{display:grid;grid-template-columns:1.35fr repeat(3,1fr);border:1px solid var(--line);background:var(--surface);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;margin:0 0 18px}
.ppStrat .ppsScoreIntro{padding:20px;background:var(--ever);color:var(--canvas)}
[data-theme="dark"] .ppStrat .ppsScoreIntro{color:#0c1f1e}
.ppStrat .ppsScoreIntro small,.ppStrat .ppsMetric small{display:block;font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;opacity:.76}
.ppStrat .ppsScoreIntro strong{display:block;margin-top:6px;font:700 21px/1.15 var(--display)}
.ppStrat .ppsMetric{padding:20px;border-left:1px solid var(--line)}
.ppStrat .ppsMetric b{display:block;margin-top:4px;font:700 22px/1 var(--display)}
.ppStrat .ppsMetric span{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}

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

/* ---- layout / cards ---- */
.ppStrat .ppsGrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:16px}
.ppStrat .ppsStack{display:grid;gap:12px}
.ppStrat .ppsCard{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:18px}
.ppStrat .ppsCard h3{font-size:20px;margin:0 0 6px}
.ppStrat .ppsCard h4{font-size:16px}

/* ---- Next: priority cards ---- */
.ppStrat .ppsPriority{position:relative;display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:start}
.ppStrat .ppsRank{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--sea);color:var(--ever);font-weight:900}
.ppStrat .ppsPriority.main{border-color:var(--coral);box-shadow:inset 4px 0 0 var(--coral)}
.ppStrat .ppsPriority p{margin:5px 0 0}
.ppStrat .ppsValue{white-space:nowrap;text-align:right}
.ppStrat .ppsValue b{display:block;color:var(--good);font-size:18px}
.ppStrat .ppsValue small{color:var(--muted);font-size:11px}
.ppStrat .ppsEyebrow{color:var(--coral);font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ppStrat .ppsReceiptBtn{margin-top:11px;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}

.ppStrat .ppsAsideTitle{margin:0 0 4px;font:700 20px/1 var(--display)}
.ppStrat .ppsPlainList{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ppStrat .ppsPlainList li{padding-top:10px;border-top:1px solid var(--line)}
.ppStrat .ppsPlainList b{display:block;font-size:13.5px}
.ppStrat .ppsPlainList span{font-size:12.5px;color:var(--muted)}
.ppStrat .ppsDataCard{background:var(--ever);color:var(--canvas)}
[data-theme="dark"] .ppStrat .ppsDataCard{color:#0c1f1e}
.ppStrat .ppsDataCard .muted{color:inherit;opacity:.74}

.ppStrat .ppsLock{border:1px dashed var(--line);background:transparent}
.ppStrat .ppsLockBadge{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}
.ppStrat .ppsLock h3{margin-top:2px}

/* ---- Earn: category rows ---- */
.ppStrat .ppsTableCard{padding:0;overflow:hidden}
.ppStrat .ppsTableHead,.ppStrat .ppsEarnRow{display:grid;grid-template-columns:1fr 1.3fr .7fr;gap:12px;align-items:center;padding:14px 18px}
.ppStrat .ppsTableHead{background:var(--surface2);font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ppStrat .ppsEarnRow+.ppsEarnRow{border-top:1px solid var(--line)}
.ppStrat .ppsCatName b,.ppStrat .ppsPick b{display:block}
.ppStrat .ppsCatName span,.ppStrat .ppsPick span,.ppStrat .ppsEarnValue span{display:block;color:var(--muted);font-size:11.5px}
.ppStrat .ppsEarnValue{text-align:right}
.ppStrat .ppsEarnValue b{color:var(--good)}
.ppStrat .ppsWinner{display:inline-flex;align-items:center;gap:9px}
.ppStrat .ppsMark{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--sea);color:var(--ever);font-size:9.5px;font-weight:950}

/* ---- secondary matrix tool wrapper ---- */
.ppStrat .ppsMatrixWrap{margin-top:16px}
.ppStrat .ppsMatrixWrap summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.ppStrat .ppsMatrixWrap[open] summary{border-radius:14px 14px 0 0}
.ppStrat .ppsMatrixWrap .ppsMatrixInner{border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:16px 18px;background:var(--surface)}

/* ---- Redeem: goal hero ---- */
.ppStrat .ppsGoalHero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:linear-gradient(145deg,var(--ever),color-mix(in srgb,var(--ever) 76%,var(--coral)));color:var(--canvas)}
[data-theme="dark"] .ppStrat .ppsGoalHero{color:#0c1f1e}
.ppStrat .ppsGoalHero h3{font-size:26px}
.ppStrat .ppsGoalMath{border-radius:14px;background:color-mix(in srgb,var(--canvas) 14%,transparent);padding:16px;text-align:right}
.ppStrat .ppsGoalMath b{display:block;font-size:22px}
.ppStrat .ppsMove{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center}
.ppStrat .ppsMove .route{font-weight:900}
.ppStrat .ppsMove .route span{display:block;color:var(--muted);font-size:11.5px}
.ppStrat .ppsDecision{font-weight:900;color:var(--good);white-space:nowrap}

/* ---- Protect: alerts + checks ---- */
.ppStrat .ppsAlert{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:start}
.ppStrat .ppsAlertIcon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:var(--warn);font-weight:950}
.ppStrat .ppsAlert time{font-size:11.5px;color:var(--muted)}
.ppStrat .ppsTag{border-radius:999px;padding:5px 8px;background:var(--surface2);font-size:10.5px;font-weight:900;white-space:nowrap}

/* ---- empty / error states ---- */
.ppStrat .ppsEmptyGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.ppStrat .ppsStepNum{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--coral);color:#0c1f1e;font-weight:950;margin-bottom:8px}
.ppStrat .ppsErrorBox{border-color:var(--danger);box-shadow:inset 4px 0 0 var(--danger)}
.ppStrat .ppsErrorBox strong{color:var(--danger)}

/* ---- receipt overlay (own scrim; no native <dialog>, no index.html edits) --- */
.ppStrat .ppsReceiptScrim{display:none;position:fixed;inset:0;z-index:200;background:rgba(3,14,13,.6);align-items:center;justify-content:center;padding:14px}
.ppStrat .ppsReceiptScrim.on{display:flex}
.ppStrat .ppsReceiptDialog{width:min(560px,100%);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.35)}
.ppStrat .ppsDialogHead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.ppStrat .ppsDialogHead h3{font-size:20px}
.ppStrat .ppsDialogBody{padding:18px}
.ppStrat .ppsEquation{padding:14px;border-radius:12px;background:var(--surface2);font-weight:850}
.ppStrat .ppsEquation b{color:var(--good)}
/* Receipt delta structure (owner spec 2026-07-30): higher-earning card,
   current card, then the explicit Left-on-the-table subtraction. */
.ppStrat .ppsRcptRow{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px}
.ppStrat .ppsRcptRow small{display:block;color:var(--muted);font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.ppStrat .ppsRcptLine{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:5px 0 2px}
.ppStrat .ppsRcptLine strong{font-size:18px;white-space:nowrap}
.ppStrat .ppsRcptRow p{margin:2px 0 0;font-size:12.5px}
.ppStrat .ppsRcptWin{background:var(--surface2)}
.ppStrat .ppsRcptDelta{border-color:var(--good);box-shadow:inset 4px 0 0 var(--good)}
.ppStrat .ppsRcptDelta strong{color:var(--good)}
.ppStrat .ppsDialogClose{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:18px}

/* R33 P1-04: on phones the receipt is the approved edge-to-edge bottom
   sheet (left 0, right = viewport, bottom = viewport, top corners only),
   not a centered inset modal. Desktop/tablet keep the centered dialog. */
@media(max-width:620px){
  .ppStrat .ppsReceiptScrim{padding:0;align-items:flex-end;justify-content:stretch}
  .ppStrat .ppsReceiptDialog{width:100vw;max-width:none;max-height:min(88dvh,760px);border-left:0;border-right:0;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -18px 60px rgba(0,0,0,.35)}
}

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

@media(max-width:820px){
  .ppStrat .ppsScoreboard{grid-template-columns:1fr 1fr}
  .ppStrat .ppsScoreIntro{grid-column:1/-1}
  .ppStrat .ppsMetric:nth-child(odd){border-left:0}
  .ppStrat .ppsGrid{grid-template-columns:1fr}
  .ppStrat .ppsPriority{grid-template-columns:38px 1fr}
  .ppStrat .ppsPriority .ppsValue{grid-column:2;text-align:left}
  .ppStrat .ppsMove{grid-template-columns:1fr}
  .ppStrat .ppsGoalHero{grid-template-columns:1fr}
  .ppStrat .ppsGoalMath{text-align:left}
  .ppStrat .ppsEmptyGrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .ppStrat .ppsTabs{grid-template-columns:repeat(2,1fr)}
  .ppStrat .ppsTableHead{display:none}
  .ppStrat .ppsEarnRow{grid-template-columns:1fr auto;padding:14px}
  .ppStrat .ppsEarnRow .ppsPick{grid-column:1/-1;padding-top:8px;border-top:1px solid var(--line)}
  .ppStrat .ppsAlert{grid-template-columns:38px 1fr}
  .ppStrat .ppsAlert .ppsTag{grid-column:2;justify-self:start}
}