
/* ==========================================================================
   PARTNER PASSES — an eighth tab inside My Rhythm
   Uses the page's own tokens; the tab button borrows the island's own classes
   so it is indistinguishable from the seven that were already there.
   ========================================================================== */
#ppassPanel{
  --ppass-navy:#243447; --ppass-ink:#2B2B2B; --ppass-muted:#657482;
  --ppass-line:#E8E4DC; --ppass-sage:#5F7350; --ppass-sage-soft:#EEF4EC;
  --ppass-cafe:#F3E9DC; --ppass-food:#EAF1E6; --ppass-well:#EDEAF4; --ppass-rec:#F7EAEA;
  --ppass-page:#5B8A8F;                  /* My Rhythm page background */
  --ppass-gold:#CF9E3F;
  font-family:'Nunito',system-ui,-apple-system,sans-serif; margin-top:20px;
}
#ppassPanel *{ box-sizing:border-box; }
#ppassPanel [hidden]{ display:none !important; }

.ppass-sec{ margin-bottom:34px; }
.ppass-eyebrow{ font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 8px;
  color:var(--ppass-sage) !important; -webkit-text-fill-color:var(--ppass-sage) !important; }
.ppass-h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(1.2rem,2.2vw,1.55rem);
  line-height:1.2; margin:0 0 6px;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-sub{ font-size:.9rem; line-height:1.65; margin:0 0 16px; max-width:70ch;
  color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }
.ppass-fine{ font-size:.8rem; line-height:1.6; color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }

/* intro */
.ppass-intro{ background:#fff; border:1px solid var(--ppass-line); border-radius:24px; padding:24px; }
.ppass-pill{ display:inline-flex; align-items:center; border-radius:999px !important; padding:8px 16px !important; min-height:30px;
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.35;
  background:var(--ppass-page) !important; border:1px solid rgba(0,0,0,.06); margin-bottom:14px;
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.ppass-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ppass-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:.86rem; font-weight:800; border-radius:999px; padding:12px 20px;
  min-height:44px; border:1px solid rgba(18,33,58,.18); background:#fff;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important;
  transition:background .16s, border-color .16s, transform .16s; }
.ppass-btn:hover{ background:var(--ppass-sage-soft); border-color:#9DBE97; transform:translateY(-1px); }
.ppass-btn--primary{ background:var(--ppass-navy) !important; border-color:var(--ppass-navy) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.ppass-btn--primary:hover{ background:#31465F !important; }
.ppass-btn--sm{ min-height:44px; padding:9px 14px; font-size:.79rem; }
.ppass-btn--ghost{ background:none; border:0; text-decoration:underline; padding:8px;
  color:var(--ppass-sage) !important; -webkit-text-fill-color:var(--ppass-sage) !important; }
.ppass-btn:focus-visible,.ppass-chip:focus-visible,.ppass-card:focus-visible,.ppass-menu-btn:focus-visible{
  outline:3px solid var(--ppass-gold); outline-offset:2px; }

/* metric strip */
.ppass-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ppass-metric{ background:#fff; border:1px solid var(--ppass-line); border-radius:18px; padding:16px 18px; }
.ppass-metric b{ display:block; font-size:1.6rem; font-weight:800; line-height:1.1;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-metric span{ display:block; margin-top:4px; font-size:.78rem; line-height:1.4;
  color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }

/* pass cards */
.ppass-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ppass-card{ position:relative; background:#fff; border:1px solid var(--ppass-line); border-radius:22px;
  padding:18px; display:flex; flex-direction:column; gap:9px; }
.ppass-card-top{ display:flex; align-items:flex-start; gap:12px; }
.ppass-ic{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:1.35rem; flex:none; }
.ppass-card--cafe .ppass-ic{ background:var(--ppass-cafe); }
.ppass-card--food .ppass-ic{ background:var(--ppass-food); }
.ppass-card--wellness .ppass-ic{ background:var(--ppass-well); }
.ppass-card--recovery .ppass-ic{ background:var(--ppass-rec); }
.ppass-name{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.05rem; margin:0;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-cat{ display:inline-flex; align-items:center; margin-top:4px; border-radius:999px !important; padding:7px 15px !important;
  min-height:28px; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.35;
  background:var(--ppass-page) !important; border:1px solid rgba(0,0,0,.06);
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.ppass-menu{ margin-left:auto; position:relative; }
.ppass-menu-btn{ width:44px; height:44px; border-radius:50%; border:1px solid transparent; background:none;
  cursor:pointer; font-size:1.05rem; line-height:1;
  color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }
.ppass-menu-btn:hover{ background:#F4F4F1; }
.ppass-menu-pop{ position:absolute; right:0; top:40px; z-index:20; background:#fff; border:1px solid var(--ppass-line);
  border-radius:14px; padding:6px; min-width:150px; box-shadow:0 14px 34px rgba(36,52,71,.14); }
.ppass-menu-pop button{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.84rem; padding:9px 10px; border-radius:9px; min-height:40px;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-menu-pop button:hover{ background:var(--ppass-sage-soft); }

/* progress */
.ppass-bar{ height:9px; border-radius:999px; background:#EFEEE9; overflow:hidden; }
.ppass-bar > span{ display:block; height:100%; border-radius:999px; background:var(--ppass-sage); transition:width .35s ease; }
.ppass-prog-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:.8rem; }
.ppass-prog-row b{ font-weight:800; color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-prog-row span{ color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }
.ppass-reward{ font-size:.85rem; font-weight:700; margin:0;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-habit{ font-size:.8rem; line-height:1.5; margin:0; padding:9px 12px; border-radius:12px;
  background:#FAFAF8; border:1px solid var(--ppass-line);
  color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }
.ppass-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }

/* insight */
.ppass-insight{ background:#fff; border:1px solid var(--ppass-line); border-radius:24px; padding:24px;
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:26px; align-items:center; }
.ppass-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.ppass-chip-static{ border-radius:999px; padding:5px 12px; font-size:.75rem; font-weight:700;
  background:var(--ppass-sage-soft); border:1px solid #DCE7D8;
  color:var(--ppass-sage) !important; -webkit-text-fill-color:var(--ppass-sage) !important; }
.ppass-flow{ display:grid; gap:8px; }
.ppass-flow-step{ display:flex; align-items:center; gap:10px; background:#FAFAF8; border:1px solid var(--ppass-line);
  border-radius:14px; padding:11px 14px; font-size:.84rem; font-weight:700;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-flow-step i{ font-style:normal; width:24px; height:24px; border-radius:50%; background:var(--ppass-sage-soft);
  display:grid; place-items:center; font-size:.72rem; flex:none;
  color:var(--ppass-sage) !important; -webkit-text-fill-color:var(--ppass-sage) !important; }

/* nearly unlocked */
.ppass-near{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ppass-near-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--ppass-line);
  border-radius:20px; padding:16px; }
.ppass-near-b{ flex:1; min-width:0; }
.ppass-stamps{ display:flex; gap:5px; margin-top:7px; }
.ppass-stamp{ width:16px; height:16px; border-radius:50%; border:1.5px solid #D9D5CC; }
.ppass-stamp.is-on{ background:var(--ppass-sage); border-color:var(--ppass-sage); }

/* discovery */
.ppass-chips-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ppass-chip{ cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:700; border-radius:999px;
  padding:9px 15px; min-height:44px; border:1px solid var(--ppass-line); background:#fff;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-chip:hover{ background:var(--ppass-sage-soft); border-color:#9DBE97; }
.ppass-chip.is-on{ background:var(--ppass-navy); border-color:var(--ppass-navy); color:#fff !important; -webkit-text-fill-color:#fff !important; }
.ppass-disc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ppass-disc-card{ background:#fff; border:1px solid var(--ppass-line); border-radius:20px; padding:18px;
  display:flex; flex-direction:column; gap:8px; }
.ppass-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; border-radius:999px !important;
  padding:8px 15px !important; min-height:30px; font-size:.7rem; font-weight:800; line-height:1.35;
  background:var(--ppass-page) !important; border:1px solid rgba(0,0,0,.06);
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.ppass-why{ font-size:.8rem; line-height:1.5; margin:0; padding:9px 12px; border-radius:12px; background:#FAFAF8;
  border:1px solid var(--ppass-line);
  color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }

/* how it works */
.ppass-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ppass-step{ background:#fff; border:1px solid var(--ppass-line); border-radius:20px; padding:20px; }
.ppass-step-n{ width:34px; height:34px; border-radius:50%; background:var(--ppass-sage-soft); display:grid;
  place-items:center; font-weight:800; font-size:.85rem; margin-bottom:10px;
  color:var(--ppass-sage) !important; -webkit-text-fill-color:var(--ppass-sage) !important; }
.ppass-privacy{ margin-top:16px; border:1px dashed #9DBE97; border-radius:16px; padding:14px 18px;
  background:var(--ppass-sage-soft); font-size:.84rem; line-height:1.6;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }

/* empty state */
.ppass-empty{ text-align:center; background:#fff; border:1px solid var(--ppass-line); border-radius:24px; padding:44px 24px; }
.ppass-empty-art{ width:110px; height:78px; margin:0 auto 18px; position:relative; }
.ppass-empty-art i{ position:absolute; border-radius:12px; border:2px solid #D9D5CC; background:#fff; font-style:normal; }
.ppass-empty-art i:nth-child(1){ inset:14px 6px 0 6px; transform:rotate(-6deg); }
.ppass-empty-art i:nth-child(2){ inset:8px 12px 6px 12px; transform:rotate(4deg); background:var(--ppass-sage-soft); border-color:#C9DAC4; }
.ppass-empty-art i:nth-child(3){ inset:0 18px 14px 18px; }

/* modal */
.ppass-modal-bg{ position:fixed; inset:0; background:rgba(20,30,40,.46); z-index:200000; display:flex;
  align-items:center; justify-content:center; padding:20px; }
.ppass-modal{ background:#fff; border-radius:24px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; padding:26px; }
.ppass-modal-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.ppass-x{ cursor:pointer; border:1px solid var(--ppass-line); background:#fff; border-radius:50%;
  width:38px; height:38px; font-size:1.1rem; flex:none;
  color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-fld{ margin-bottom:13px; }
.ppass-lbl{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  margin-bottom:6px; color:var(--ppass-sage) !important; -webkit-text-fill-color:var(--ppass-sage) !important; }
.ppass-in,.ppass-ta,.ppass-sel{ width:100%; border:1.5px solid var(--ppass-line); border-radius:13px; padding:11px 14px;
  font-family:inherit; font-size:.92rem; background:#FDFCFA; color:var(--ppass-navy); min-height:44px; }
.ppass-in:focus,.ppass-ta:focus,.ppass-sel:focus{ outline:none; border-color:#9DBE97; background:#fff; }
.ppass-ta{ min-height:76px; resize:vertical; }
.ppass-err{ margin:6px 0 0; font-size:.8rem; font-weight:700;
  color:#A4453A !important; -webkit-text-fill-color:#A4453A !important; }
.ppass-method{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.ppass-method button{ cursor:pointer; font-family:inherit; text-align:left; background:#fff; border:1.5px solid var(--ppass-line);
  border-radius:16px; padding:14px; min-height:44px; }
.ppass-method button[aria-pressed="true"]{ border-color:var(--ppass-navy); background:var(--ppass-sage-soft); }
.ppass-method b{ display:block; font-size:.88rem; color:var(--ppass-navy) !important; -webkit-text-fill-color:var(--ppass-navy) !important; }
.ppass-method span{ display:block; margin-top:3px; font-size:.78rem; line-height:1.45;
  color:var(--ppass-muted) !important; -webkit-text-fill-color:var(--ppass-muted) !important; }
.ppass-visit{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0;
  border-top:1px dashed var(--ppass-line); font-size:.86rem; }
.ppass-visit:first-of-type{ border-top:0; }
.ppass-modal-foot{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

@media (max-width:1024px){
  .ppass-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ppass-disc,.ppass-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ppass-insight{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .ppass-grid,.ppass-near,.ppass-disc,.ppass-steps{ grid-template-columns:minmax(0,1fr); }
  .ppass-modal{ max-width:none; border-radius:22px 22px 0 0; align-self:flex-end; max-height:92vh; }
  .ppass-modal-bg{ padding:0; align-items:flex-end; }
  .ppass-method{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){ #ppassPanel *{ transition:none !important; } }
/* While Partner Passes is the active tab the island still marks its own last tab
   (usually Today) as active, so TWO tabs looked selected at once. Now much more
   obvious with the wider aligned tabs, so the island's marker is suppressed. */
body[data-ppass-tab="1"] #huRhythmRoot button.relative.pb-4:not(#ppassTabBtn) > span.absolute{
  display:none !important;
}
body[data-ppass-tab="1"] #huRhythmRoot button.relative.pb-4:not(#ppassTabBtn){
  border-color:rgba(46,51,44,.12) !important;
  color:#78716c !important;
}
