/* Partner Rewards: shared pieces of the /partners/ pages (calculator, earnings table, disclosures, notices, steps).
   Page-specific styles live in p-*.css. Uses only site.css tokens, so light/dark follow the site theme. */
@layer components{
  /* ---------- what-if calculator (earn.js renders it into [data-calc]) ---------- */
  .calc{display:grid;gap:18px}
  .calc-label{font:600 1rem/1.3 var(--f-display)}
  .calc-inputs{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:14px;align-items:center}
  .calc-range{--fill:1%;width:100%;height:44px;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
  .calc-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--fill),var(--surface-3) var(--fill))}
  .calc-range::-moz-range-track{height:8px;border-radius:999px;background:var(--surface-3)}
  .calc-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent)}
  .calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--surface);border:3px solid var(--accent-text);box-shadow:var(--shadow-1)}
  .calc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--accent-text);box-shadow:var(--shadow-1)}
  .calc-range:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px}
  .calc-num{width:100%;min-height:44px;padding:8px 12px;border-radius:var(--r-s);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:600 1.05rem/1 var(--f-mono);text-align:right}
  .calc-presets{display:flex;flex-wrap:wrap;gap:8px}
  .calc-presets .chip{min-height:44px;min-width:48px;justify-content:center;font-family:var(--f-mono)}
  .calc-presets .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
  .calc-rates{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
  .calc-rates legend{font-size:.86rem;color:var(--muted);margin-bottom:8px}
  .calc-rate{position:relative;display:inline-flex}
  .calc-rate input{position:absolute;opacity:0;inset:0;cursor:pointer}
  .calc-rate span{display:inline-flex;align-items:center;min-height:44px;padding:.55em 1.1em;border-radius:999px;border:1px solid var(--line-strong);font-weight:600;font-size:.92rem;color:var(--ink-2)}
  .calc-rate input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .calc-rate input:focus-visible+span{outline:2px solid var(--accent-strong);outline-offset:3px}
  .calc-cond{font-size:.88rem;color:var(--warn);max-width:60ch}
  .calc-out{display:grid;gap:6px;padding:18px 20px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line)}
  .calc-out-label{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)}
  .calc-total{font:800 clamp(2.2rem,1.6rem + 2.6vw,3.4rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
  .calc-sum{font-size:.9rem;color:var(--ink-2);overflow-wrap:anywhere}
  .calc-tip{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-strong);font:700 .72rem/1 var(--f-mono);color:var(--ink-2);cursor:help;position:relative}
  .calc-tip:hover::after,.calc-tip:focus::after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;width:min(260px,70vw);padding:10px 12px;border-radius:var(--r-s);background:var(--ink);color:var(--bg);font:500 .8rem/1.4 var(--f-text);z-index:5}
  .calc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  .calc-actions .btn{min-height:44px}
  .calc-copied{font-size:.86rem;color:var(--accent-text);overflow-wrap:anywhere}
  @media (max-width:520px){.calc-inputs{grid-template-columns:minmax(0,1fr)}.calc-num{max-width:10rem}}

  /* ---------- disclosure lines: always visible next to any earnings figure ---------- */
  .calc-disclosure,.earn-disclosure{font-size:.84rem;line-height:1.5;color:var(--muted);max-width:68ch;padding-left:12px;border-left:2px solid var(--accent)}

  /* ---------- earnings table (static, works without JavaScript) ---------- */
  .earn-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .earn-table caption{text-align:left;font:600 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:12px}
  .earn-table th,.earn-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:right}
  .earn-table th:first-child,.earn-table td:first-child{text-align:left}
  .earn-table thead th{font-size:.8rem;font-weight:600;color:var(--muted)}
  .earn-table tbody td{font:600 1rem/1.2 var(--f-mono)}
  .earn-table tr[data-active] td,.earn-table tr[data-highlight] td{background:var(--accent-soft)}
  .earn-table tr[data-active] td:first-child,.earn-table tr[data-highlight] td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
  .table-scroll{overflow-x:auto;max-width:100%}

  /* ---------- "not switched on yet" notice ---------- */
  .notice{display:grid;gap:8px;padding:16px 18px;border-radius:var(--r-m);border:1px dashed var(--line-strong);background:color-mix(in oklab,var(--surface-2) 70%,transparent)}
  .notice b{font-family:var(--f-display)}
  .notice p{color:var(--ink-2);font-size:.94rem}

  /* ---------- numbered steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:clamp(12px,1.4vw,20px);counter-reset:step;list-style:none;padding:0}
  .steps>li{counter-increment:step;position:relative;padding:22px 20px 20px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface)}
  .steps>li::before{content:counter(step,decimal-leading-zero);display:block;font:700 .8rem/1 var(--f-mono);color:var(--accent-text);margin-bottom:14px}
  .steps h3{font-size:1.1rem}
  .steps p{margin-top:8px;color:var(--ink-2);font-size:.95rem}

  /* ---------- how it works as a road (assets/journey.js): the mascot hops from step to step ---------- */
  .journey{--dot:64px;--gap:clamp(14px,2vw,28px);--rw:clamp(58px,5.4vw,78px);position:relative;isolation:isolate}
  .journey.is-armed{padding-top:calc(var(--rw) * 1.2 + 4px)}
  .j-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap);margin:0;padding:0;list-style:none;counter-reset:jstep}
  .j-stop{counter-increment:jstep;position:relative;display:grid;justify-items:center;align-content:start;gap:8px;text-align:center}
  .j-stop:not(:last-child)::after{content:"";position:absolute;z-index:-1;top:calc(var(--dot) / 2 - 1px);left:calc(50% + var(--dot) / 2 + 6px);
    width:calc(100% + var(--gap) - var(--dot) - 12px);height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 7px,transparent 7px 13px)}
  .j-dot{position:relative;z-index:1;display:grid;place-items:center;width:var(--dot);height:var(--dot);margin-bottom:6px;border-radius:50%;
    border:2px solid var(--line-strong);background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow-1);
    transition:background .35s,border-color .35s,color .35s,box-shadow .35s,transform .5s var(--ease)}
  .j-dot img{width:82%;height:auto;filter:drop-shadow(0 3px 4px oklch(.2 .05 150/.25))}
  /* the referral illustrations: the hero art beside the headline, smaller art beside a calculator or a section heading */
  .hero-with-mascot .mascot-glow.hero-ill{align-self:center;width:clamp(220px,26vw,400px)}
  .sec-art{display:block;width:min(100%,240px);height:auto;margin-inline:auto;pointer-events:none;filter:drop-shadow(0 12px 18px oklch(.2 .05 150/.28))}
  .sec-head-art{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,3vw,40px);align-items:center}
  .sec-head-art>:not(.sec-art){grid-column:1}
  .sec-head-art>.sec-art{grid-column:2;grid-row:1 / span 3;width:clamp(120px,15vw,200px)}
  @media (max-width:700px){
    .hero-with-mascot .mascot-glow.hero-ill{position:static;width:min(100%,340px);margin:14px auto 0}
    .sec-head-art>.sec-art{width:96px;align-self:start}
  }
  .j-stop:last-child .j-dot{border-color:var(--accent)}
  .j-when{padding:6px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font:700 .72rem/1.2 var(--f-mono);
    letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
  .j-when::before{content:counter(jstep,decimal-leading-zero) " · "}
  .j-stop h3{font-size:1.15rem}
  .j-stop p{max-width:30ch;color:var(--ink-2);font-size:.95rem}
  .j-stop.is-reached .j-dot{border-color:transparent;background:var(--accent);color:var(--on-accent);transform:scale(1.08);
    box-shadow:0 0 0 6px var(--accent-soft),var(--shadow-1)}
  .j-stop.is-reached .j-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);animation:j-ring .9s var(--ease) both}
  @keyframes j-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
  .j-track{position:absolute;z-index:0;left:var(--x0);top:var(--y0);width:calc(var(--x1) - var(--x0));height:4px;margin-top:-2px;border-radius:4px;pointer-events:none}
  .journey.is-v .j-track{width:4px;height:calc(var(--y1) - var(--y0));margin:0 0 0 -2px}
  .j-fill{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,var(--accent),var(--lens-4));box-shadow:0 0 14px color-mix(in oklab,var(--accent) 60%,transparent)}
  .journey.is-v .j-fill{transform-origin:50% 0;transform:scaleY(0);background:linear-gradient(180deg,var(--accent),var(--lens-4))}
  .j-runner{position:absolute;z-index:2;left:0;top:0;width:var(--rw);pointer-events:none;will-change:transform}
  .j-runner img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px oklch(.2 .05 150/.25))}
  .j-coin{position:absolute;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;pointer-events:none;
    font:800 14px/1 var(--f-text);color:oklch(.35 .08 75);border:2px solid oklch(.68 .14 70);
    background:radial-gradient(circle at 35% 30%,oklch(.97 .1 95),oklch(.84 .16 85) 55%,oklch(.7 .15 70))}
  .j-replay{display:flex;width:fit-content;margin:clamp(18px,2.4vw,28px) auto 0}
  @media (max-width:900px){
    .journey{--dot:54px;--gap:26px;--rw:54px}
    .j-list{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
    .j-stop{grid-template-columns:var(--dot) minmax(0,1fr);justify-items:start;text-align:left;column-gap:16px;row-gap:6px}
    .j-dot{grid-row:1 / span 3;margin:0}
    .j-stop>:not(.j-dot){grid-column:2}
    .j-stop p{max-width:none}
    .j-stop:not(:last-child)::after{top:calc(var(--dot) + 6px);left:calc(var(--dot) / 2 - 1px);width:2px;height:calc(100% + var(--gap) - var(--dot) - 12px);
      background:repeating-linear-gradient(180deg,var(--line-strong) 0 7px,transparent 7px 13px)}
    .j-replay{margin-inline:0}
  }

  /* ---------- rupee coins drifting up behind the partner heroes (decoration only) ---------- */
  .hero-coins{position:absolute;inset:0;z-index:-1;pointer-events:none}
  .hero-coins i{position:absolute;bottom:-48px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;opacity:0;
    font:800 17px/1 var(--f-text);font-style:normal;color:oklch(.35 .08 75);border:2px solid oklch(.68 .14 70);
    background:radial-gradient(circle at 35% 30%,oklch(.97 .1 95),oklch(.84 .16 85) 55%,oklch(.7 .15 70));
    animation:coin-drift var(--t,11s) linear var(--d,0s) 2 both}
  .hero-coins i:nth-child(1){left:4%;--t:12s;--d:.2s}
  .hero-coins i:nth-child(2){left:16%;--t:14s;--d:3.4s;scale:.7}
  .hero-coins i:nth-child(3){left:54%;--t:11s;--d:1.6s;scale:.8}
  .hero-coins i:nth-child(4){left:70%;--t:13s;--d:5s}
  .hero-coins i:nth-child(5){left:84%;--t:10s;--d:.9s;scale:.6}
  .hero-coins i:nth-child(6){left:94%;--t:15s;--d:2.6s;scale:.85}
  @keyframes coin-drift{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:.55}80%{opacity:.4}
    100%{opacity:0;transform:translateY(-560px) rotate(300deg)}}
  @media (max-width:700px){.hero-coins i:nth-child(n+4){display:none}}
  @media (prefers-reduced-motion:reduce){.hero-coins{display:none}}

  /* ---------- trust row and fact list ---------- */
  .trust-row{display:flex;flex-wrap:wrap;gap:10px}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px 28px}
  .facts dt{font:600 .74rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .facts dd{margin:6px 0 0;color:var(--ink-2)}

  /* ---------- illustration-only marker for any mock or sample number ---------- */
  .mock-badge{display:inline-flex;align-items:center;gap:.4em;padding:.35em .7em;border-radius:999px;background:var(--surface-3);font:600 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

  /* ---------- sticky mobile join bar (non-blocking, small) ---------- */
  .join-bar{display:none}
  @media (max-width:700px){
    .join-bar{display:flex;position:sticky;bottom:0;z-index:50;gap:10px;justify-content:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
    .join-bar .btn{flex:1;max-width:420px}
  }

  @media print{
    .site-header,.site-footer,.join-bar,.calc,.cta-band{display:none!important}
    .card{box-shadow:none;border-color:#999}
  }
}