/* ==========================================================================
   programs-cc.css — the Coral Compass Programs rebuild (Round 31, approved).
   Source of truth: points-relay/exchange/evidence/codex-coral-compass-
   programs-round31.html (owner revision on top of the round-30 ground-up
   redesign; see that file's own header comment / points-relay round-31
   relay docs for the three owner-directed changes this port carries:
   "Bank points" -> "Card Points", the "Can receive Chase" filter pill
   removed, and a real Status-tiers affordance on every airline/hotel row).

   Same scoping discipline as assets/strategy-cc.css / assets/wallet-cc.css:
   every rule lives under .ppPrograms so it cannot collide with the SPA's
   global styles.css or with the legacy ex-prefixed and .tabs rules that
   ship alongside it on the same page (those stay as the fallback path;
   NOTE: never write a star-slash sequence inside this comment — it
   terminates the comment early and killed this ENTIRE stylesheet once,
   parsing to zero rules; same bug class as the onboarding light-palette
   break. Spell glob-ish prose out in words instead.
   see assets/programs-cc.js's header for the delegation contract). Tokens
   on .ppPrograms{}, dark override on [data-theme="dark"] .ppPrograms{} —
   never injected from JavaScript.
   ========================================================================== */

.ppPrograms{--canvas:#f4f1e8;--surface:#fffdf8;--surface2:#e8e8dc;--ink:#0c1f1e;--muted:#566663;--line:#cad3cc;--ever:#123f3b;--coral:#e75c3c;--sea:#bfe1d7;--good:#176b55;--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"] .ppPrograms{--canvas:#0c1f1e;--surface:#132a28;--surface2:#193633;--ink:#f5f1e8;--muted:#b9c9c4;--line:#35504b;--ever:#bfe1d7;--coral:#f47a5d;--sea:#234c47;--good:#8ed8bd;--danger:#ff9b89;--shadow:0 18px 48px rgba(0,0,0,.28);color-scheme:dark}

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

/* ---- hero ---- */
.ppPrograms .ppgHero{padding:6px 0 22px}
.ppPrograms .ppgHeroGrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:28px;align-items:end}
.ppPrograms .ppgKicker,.ppPrograms .ppgPill{display:inline-flex;align-items:center;min-height:30px;border-radius:999px;background:var(--sea);color:var(--ever);padding:0 12px;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.ppPrograms .ppgPillSample{margin-left:6px;background:var(--surface2);color:var(--muted)}
.ppPrograms .ppgHero h1{max-width:720px;margin:14px 0 10px;font:700 clamp(34px,5.6vw,58px)/.96 var(--display);letter-spacing:-.04em}
.ppPrograms .ppgLead{max-width:720px;margin:0;color:var(--muted);font-size:17px}
.ppPrograms .ppgTruthRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ppPrograms .ppgTruth{display:inline-flex;align-items:center;gap:7px;min-height:32px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:0 11px;font-size:12px;font-weight:800}
.ppPrograms .ppgTruth i{width:8px;height:8px;border-radius:50%;background:var(--good);display:block}
.ppPrograms .ppgAside{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);padding:18px}
.ppPrograms .ppgAside small{display:block;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ppPrograms .ppgAside strong{display:block;margin:7px 0 6px;font:700 24px/1.06 var(--display)}
.ppPrograms .ppgAside p{margin:0;color:var(--muted);font-size:13px}

/* ---- error banner (console/QA-only scenario; see programs-cc.js) ---- */
.ppPrograms .ppgErrorBanner{display:none;margin:0 0 16px;border:1px solid var(--danger);border-radius:16px;background:var(--surface);padding:16px;box-shadow:inset 4px 0 0 var(--danger)}
.ppPrograms .ppgErrorBanner.on{display:block}
.ppPrograms .ppgErrorBanner b{display:block;color:var(--danger)}
.ppPrograms .ppgErrorBanner p{margin:4px 0 0;color:var(--muted);font-size:13px}

/* ---- search + filters ---- */
.ppPrograms .ppgSearchBox{position:relative;margin-top:20px}
.ppPrograms .ppgSearchBox label{position:absolute;left:17px;top:9px;color:var(--muted);font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.ppPrograms .ppgSearchBox input{width:100%;min-height:66px;border:1px solid var(--line);border-radius:19px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);padding:24px 54px 8px 17px;font-size:17px}
.ppPrograms .ppgSearchBox span{position:absolute;right:18px;top:20px;font-size:21px}
.ppPrograms .ppgQuick{display:flex;gap:8px;margin:12px 0 18px;overflow:auto;padding:2px 2px 6px;scrollbar-width:thin}
.ppPrograms .ppgFilter{flex:none;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:0 14px;font-size:12px;font-weight:900}
.ppPrograms .ppgFilter[aria-pressed="true"]{background:var(--ever);border-color:var(--ever);color:var(--canvas)}
[data-theme="dark"] .ppPrograms .ppgFilter[aria-pressed="true"]{color:#0c1f1e}
.ppPrograms .ppgStatusLine{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:3px 0 12px}
.ppPrograms .ppgStatusLine h2{margin:0;font:700 28px/1 var(--display)}
.ppPrograms .ppgStatusLine p{margin:6px 0 0;color:var(--muted);font-size:13px}
.ppPrograms .ppgResultCount{flex:none;color:var(--muted);font-size:12px;font-weight:900}

/* ---- shell: results + sidebar guide ---- */
.ppPrograms .ppgShell{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr);gap:18px;align-items:start}
.ppPrograms .ppgResults{display:grid;gap:9px}
.ppPrograms .ppgRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:80px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:8px}
.ppPrograms .ppgRow:hover{border-color:var(--ever)}
.ppPrograms .ppgOpen{display:grid;grid-template-columns:minmax(180px,1.4fr) .7fr .75fr 26px;gap:12px;align-items:center;min-width:0;min-height:64px;border:0;border-radius:11px;background:transparent;padding:5px 7px;text-align:left}
.ppPrograms .ppgStatusLink{display:grid;place-items:center;min-width:96px;min-height:44px;border:1px solid var(--line);border-radius:11px;color:var(--ever);padding:0 10px;font-size:11px;font-weight:950;text-align:center;text-decoration:none}
.ppPrograms .ppgStatusLink:hover{border-color:var(--ever);background:var(--surface2)}
.ppPrograms .ppgStatusLink.ppgGap{color:var(--muted);border-style:dashed}
.ppPrograms .ppgIdentity{display:flex;align-items:center;gap:11px;min-width:0}
.ppPrograms .ppgMark{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:var(--sea);color:var(--ever);font-size:11px;font-weight:950;overflow:hidden}
.ppPrograms .ppgIdentity b,.ppPrograms .ppgDatum b{display:block}
.ppPrograms .ppgIdentity b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.ppPrograms .ppgIdentity small,.ppPrograms .ppgDatum small{display:block;color:var(--muted);font-size:11px}
.ppPrograms .ppgDatum b{font-size:14px}
.ppPrograms .ppgRange{color:var(--good)}
.ppPrograms .ppgChev{color:var(--muted);font-size:22px;justify-self:end}
.ppPrograms .ppgNoResults,.ppPrograms .ppgStateNotice{border:1px dashed var(--line);border-radius:18px;background:var(--surface);padding:28px;text-align:center}
.ppPrograms .ppgNoResults h3,.ppPrograms .ppgStateNotice h2{margin:0 0 7px;font:700 25px/1 var(--display)}
.ppPrograms .ppgNoResults p,.ppPrograms .ppgStateNotice p{margin:0;color:var(--muted)}
.ppPrograms .ppgNoResults button{margin-top:14px}

.ppPrograms .ppgGuide{position:sticky;top:16px;display:grid;gap:12px}
.ppPrograms .ppgGuideCard{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:18px}
.ppPrograms .ppgGuideCard.coral{border-color:var(--coral);box-shadow:inset 4px 0 0 var(--coral)}
.ppPrograms .ppgGuideCard h3{margin:0 0 7px;font:700 21px/1.05 var(--display)}
.ppPrograms .ppgGuideCard p{margin:0;color:var(--muted);font-size:13px}
.ppPrograms .ppgRoute{display:grid;grid-template-columns:36px 1fr;gap:11px;align-items:start;margin-top:14px}
.ppPrograms .ppgRoute span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--surface2);font-weight:950}
.ppPrograms .ppgRoute b,.ppPrograms .ppgRoute small{display:block}
.ppPrograms .ppgRoute small{color:var(--muted);font-size:11px}

.ppPrograms .ppgBtn{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 15px;font-weight:900}
.ppPrograms .ppgLinkish{border-color:transparent;background:transparent;color:var(--ever);text-decoration:underline;text-underline-offset:4px;padding-inline:0;min-height:44px;display:inline-flex;align-items:center}

.ppPrograms .ppgFoot{margin:18px 0 0;color:var(--muted);font-size:12px}

/* ---- toast ---- */
.ppPrograms .ppgToast{position:fixed;z-index:80;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:.2s;max-width:min(92vw,420px);text-align:center}
.ppPrograms .ppgToast.show{transform:translate(-50%,0);opacity:1;visibility:visible}

/* ---- detail overlay (own scrim; no native <dialog>, no index.html edits;
        same technique as assets/strategy-cc.css's .ppsReceiptScrim) ---- */
.ppPrograms .ppgDetailScrim{display:none;position:fixed;inset:0;z-index:200;background:rgba(3,14,13,.62);backdrop-filter:blur(3px)}
.ppPrograms .ppgDetailScrim.on{display:block}
.ppPrograms .ppgDetail{position:fixed;inset:0 0 0 auto;width:min(510px,100%);height:100dvh;border-left:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:-24px 0 80px rgba(0,0,0,.25);display:grid;grid-template-rows:auto 1fr auto}
.ppPrograms .ppgDetailHead{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.ppPrograms .ppgDetailTitle small{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase}
.ppPrograms .ppgDetailTitle h2{margin:4px 0 0;font:700 28px/1 var(--display)}
.ppPrograms .ppgDetailClose{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:20px}
.ppPrograms .ppgDetailBody{padding:20px;overflow:auto}
.ppPrograms .ppgValueHero{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--line);border-radius:16px;background:var(--line);overflow:hidden}
.ppPrograms .ppgValueHero>div{background:var(--canvas);padding:15px}
.ppPrograms .ppgValueHero small,.ppPrograms .ppgFact small{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.ppPrograms .ppgValueHero b{display:block;margin-top:5px;font:700 23px/1 var(--display);color:var(--good)}
.ppPrograms .ppgExplain{margin:9px 0 0;color:var(--muted);font-size:11px}
.ppPrograms .ppgSection{margin-top:20px}
.ppPrograms .ppgSection h3{margin:0 0 10px;font:700 20px/1 var(--display)}
.ppPrograms .ppgSourceList{display:grid;gap:8px}
.ppPrograms .ppgSource{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:11px 12px}
.ppPrograms .ppgSource b,.ppPrograms .ppgSource small{display:block}
.ppPrograms .ppgSource small{color:var(--muted);font-size:11px}
.ppPrograms .ppgSource strong{font-size:12px;white-space:nowrap;margin-left:10px}
.ppPrograms .ppgNote{margin-top:9px;border-left:3px solid var(--coral);background:var(--surface2);padding:11px 12px;font-size:12px}

.ppPrograms .ppgFacts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ppPrograms .ppgFact{border:1px solid var(--line);border-radius:13px;padding:11px}
.ppPrograms .ppgFact b{display:block;margin-top:4px;font-size:13px}
.ppPrograms .ppgSweet{border-radius:15px;background:var(--ever);color:var(--canvas);padding:16px}
[data-theme="dark"] .ppPrograms .ppgSweet{color:#0c1f1e}
.ppPrograms .ppgSweet small{display:block;font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.ppPrograms .ppgSweet p{margin:7px 0 0;font-weight:750}
.ppPrograms .ppgSeams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ppPrograms .ppgSeam{min-height:84px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);padding:12px;text-align:left}
.ppPrograms .ppgSeam b,.ppPrograms .ppgSeam small{display:block}
.ppPrograms .ppgSeam small{margin-top:4px;color:var(--muted);font-size:11px}
.ppPrograms .ppgStatusCard{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:12px;text-decoration:none;color:var(--ink)}
.ppPrograms .ppgStatusCard:hover{border-color:var(--ever)}
.ppPrograms .ppgStatusCard.ppgGap{border-style:dashed;color:var(--muted)}
.ppPrograms .ppgDetailFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-top:1px solid var(--line)}
.ppPrograms .ppgDetailFoot span{color:var(--muted);font-size:11px}

@media(max-width:900px){
  .ppPrograms .ppgHeroGrid,.ppPrograms .ppgShell{grid-template-columns:1fr}
  .ppPrograms .ppgGuide{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .ppPrograms .ppgHero{padding-top:14px}
  .ppPrograms .ppgHero h1{font-size:42px}
  .ppPrograms .ppgLead{font-size:16px}
  .ppPrograms .ppgAside{padding:16px}
  .ppPrograms .ppgRow{grid-template-columns:1fr;min-height:92px}
  .ppPrograms .ppgOpen{grid-template-columns:1fr auto;width:100%}
  .ppPrograms .ppgOpen .ppgDatum{grid-row:2}
  .ppPrograms .ppgOpen .ppgSources{display:none}
  .ppPrograms .ppgOpen .ppgChev{grid-column:2;grid-row:1/3}
  .ppPrograms .ppgStatusLink{width:100%}
  .ppPrograms .ppgGuide{grid-template-columns:1fr}
  .ppPrograms .ppgStatusLine{align-items:start}
  .ppPrograms .ppgDetail{width:100vw;height:min(88dvh,760px);inset:auto 0 0;border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0}
  .ppPrograms .ppgDetailTitle h2{font-size:25px}
  .ppPrograms .ppgDetailBody{padding:18px}
  .ppPrograms .ppgSeams{grid-template-columns:1fr}
  .ppPrograms .ppgFacts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ppPrograms *{animation:none!important;transition:none!important}
}