/* My Pay -- redesigned Commission and Pay (mybusiness) view
   =========================================================
   Track A of the "My Pay self-service" initiative (Backlog row 271). Portal
   build of the approved frozen prototype (_outbox/my-pay-prototype.html,
   signed off 2026-09). Restructures the associate-picker day view into the
   answer-first statement: hero -> pacing -> roll-forward -> earned history ->
   Key Program -> commission detail -> financing bonus -> 10-step calc.

   EVERYTHING is scoped under .mypay so the prototype's generic class names
   (.hero/.card/.pill/.kv/.ladder/.roll/.pace/.btier/.hist/.sec ...) never
   touch the rest of the portal, and this view no longer depends on the .ckp
   stylesheet (commission_key.css still serves the exec roster in commission.js).
   Palette declared locally on .mypay, not :root, for the same isolation.

   Data still comes from the role-gated commission_key.json feed; gating is
   unchanged (admin/executive/hr). Numbers render from the reconciled feed;
   the ONLY client-computed figures are the pacing projection and the
   daily-to-target line, both clearly labeled as projections. */

.mypay{
  --mp-orange:#F68C2C; --mp-blue:#3F738D; --mp-icy:#DBECF1;
  --mp-navy:#003B4A; --mp-navy-hover:#00526A;
  --mp-header-bg:#EFF3F6; --mp-border:#D5DAE0;
  --mp-green-text:#065f46; --mp-green-soft:#DCF7E5;
  --mp-yellow-bg:#FCE9A4; --mp-yellow-text:#854d0e;
  --mp-success:#16a34a; --mp-teal:#0d9488;
  --mp-radius:8px; --mp-pill:24px;
  --mp-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --mp-shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  color:var(--mp-navy);
  font-size:14px; line-height:1.4;
  max-width:960px;
  padding:0 2px 2rem;
}
.mypay *{box-sizing:border-box}

/* ---- page head + associate picker chrome ---- */
.mypay .page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.mypay .page-head h1{font-size:22px;margin:0;letter-spacing:-.3px;color:var(--mp-navy)}
.mypay .page-head .who{font-size:12px;color:#5a6b72;margin-top:3px}
.mypay .eyebrow{font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mp-blue);margin:0 0 3px}
.mypay .period-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-pill);padding:6px 14px;font-size:12px;box-shadow:var(--mp-shadow)}
.mypay .period-pill strong{color:var(--mp-navy)}
.mypay .period-pill .days{color:var(--mp-orange);font-weight:600}
.mypay .conf-line{color:var(--mp-blue);font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}

.mypay .controls{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.mypay .controls select{font-family:inherit;font-size:13px;padding:.5rem .7rem;border:1px solid var(--mp-border);border-radius:6px;background:#fff;color:var(--mp-navy)}
.mypay .controls label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mp-blue)}
.mypay .controls .meter-note{font-size:11px;color:#7a8890}
.mypay .picker-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end;margin:0 0 14px}
.mypay .picker-row select{font-family:inherit;font-size:15px;padding:.55rem .8rem;border:1px solid var(--mp-blue);border-radius:6px;background:#fff;color:var(--mp-navy);min-width:320px}
.mypay .picker-row label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mp-blue);margin-bottom:4px}
.mypay .who-line{font-size:13px;color:#4a5a61;padding-bottom:.4rem}
.mypay .who-line strong{color:var(--mp-navy)}
.mypay .mp-empty{padding:2rem 0;color:var(--mp-blue);font-size:15px}

/* pending-feed chip (kept honest: nothing sample shown as real) */
.mypay .pending{display:inline-block;font-size:10px;font-weight:600;padding:.1em .5em;border-radius:9px;background:#ededed;color:#7a7a7a;letter-spacing:.02em;vertical-align:1px;margin-left:.35em;white-space:nowrap}

/* ---- HERO ---- */
.mypay .hero{background:linear-gradient(135deg,var(--mp-navy) 0%,#00526A 100%);color:#fff;border-radius:var(--mp-radius);padding:22px 24px;box-shadow:var(--mp-shadow-md);margin-bottom:14px}
.mypay .hero-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
.mypay .hero-block .eyebrow{color:#9fc7d4;margin-bottom:4px}
.mypay .hero-earned .num{font-size:46px;font-weight:700;letter-spacing:-1px;line-height:1;color:#fff}
.mypay .hero-earned .sub{font-size:12px;color:#bcd8e1;margin-top:6px}
.mypay .hero-proj{text-align:right}
.mypay .hero-proj .num{font-size:30px;font-weight:600;color:var(--mp-orange);line-height:1}
.mypay .hero-proj .sub{font-size:12px;color:#bcd8e1;margin-top:6px}
.mypay .hero-bar{margin-top:18px}
.mypay .hero-bar .track{height:10px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden;display:flex}
.mypay .hero-bar .fill{background:var(--mp-success)}
.mypay .hero-bar .fill.proj{background:rgba(246,140,44,.55)}
.mypay .hero-bar .legend{display:flex;justify-content:space-between;font-size:11px;color:#bcd8e1;margin-top:6px}
.mypay .hero-note{margin-top:14px;font-size:12px;color:#cfe4eb;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.mypay .hero-note strong{color:#fff}

/* ---- roll-forward strip ---- */
.mypay .roll{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.mypay .roll .cell{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-radius);padding:14px 16px;box-shadow:var(--mp-shadow)}
.mypay .roll .cell .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#5a6b72}
.mypay .roll .cell .val{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.5px;color:var(--mp-navy)}
.mypay .roll .cell .cap{font-size:11px;color:#7a8890;margin-top:3px}
.mypay .roll .cell.active{border-color:var(--mp-blue);box-shadow:0 0 0 2px rgba(63,115,141,.18)}
@media (max-width:720px){ .mypay .roll{grid-template-columns:1fr} }

/* ---- current pay period pacing ---- */
.mypay .pace{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-radius);box-shadow:var(--mp-shadow);padding:16px 18px;margin-bottom:18px}
.mypay .pace-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.mypay .pace-head h3{font-size:15px;font-weight:600;color:var(--mp-navy);margin:0}
.mypay .pace-when{font-size:12px;color:#5a6b72}
.mypay .pace-when b{color:var(--mp-navy)}
.mypay .pace-when .days{color:var(--mp-orange);font-weight:600}
.mypay .pace-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 4px}
.mypay .pace-fig .pf-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#5a6b72}
.mypay .pace-fig .pf-num{font-size:30px;font-weight:700;letter-spacing:-.6px;line-height:1;margin-top:3px;color:var(--mp-navy)}
.mypay .pace-fig.proj .pf-num{color:var(--mp-orange)}
.mypay .pace-fig .pf-cap{font-size:11px;color:#7a8890;margin-top:4px}
.mypay .pace-bar{margin-top:12px}
.mypay .pace-track{height:14px;border-radius:7px;background:#eef2f4;overflow:hidden;display:flex}
.mypay .pace-track .earned{background:var(--mp-success)}
.mypay .pace-track .proj{background:rgba(246,140,44,.5)}
.mypay .pace-scale{display:flex;justify-content:space-between;font-size:11px;color:#7a8890;margin-top:6px}
.mypay .pace-scale b{color:var(--mp-navy)}
.mypay .pace-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #eef2f4}
.mypay .pace-signal{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#4a5a61}
.mypay .pace-action{font-size:12.5px;color:#4a5a61}
.mypay .pace-action b{color:var(--mp-navy)}
.mypay .pace-note{font-size:11.5px;color:#8a969c;margin-top:10px}

/* ---- section (collapsible) ---- */
.mypay .sec{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-radius);margin-bottom:12px;box-shadow:var(--mp-shadow);overflow:hidden}
.mypay .sec>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:15px;font-weight:600;color:var(--mp-navy)}
.mypay .sec>summary::-webkit-details-marker{display:none}
.mypay .sec>summary .r{display:flex;align-items:center;gap:12px;font-weight:400;font-size:13px;color:#5a6b72}
.mypay .sec>summary .amt{font-weight:700;font-size:16px;color:var(--mp-navy)}
.mypay .sec>summary .chev{transition:transform .15s;font-size:12px;color:#98a6ad}
.mypay .sec[open]>summary .chev{transform:rotate(90deg)}
.mypay .sec-body{padding:4px 18px 18px}

/* composition bar */
.mypay .comp{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--mp-border);margin:6px 0 10px}
.mypay .comp>div{display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden}
.mypay .comp .c-base{background:var(--mp-blue)}
.mypay .comp .c-sleep{background:var(--mp-teal)}
.mypay .comp .c-prot{background:var(--mp-orange)}
.mypay .comp .c-clear{background:#8aa0a9}

/* mini rows */
.mypay .kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eef2f4;font-size:13px}
.mypay .kv:last-child{border-bottom:none}
.mypay .kv .k{color:#4a5a61}
.mypay .kv .v{font-weight:600;text-align:right}
.mypay .pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:var(--mp-pill);font-weight:600}
.mypay .pill.ok{background:var(--mp-green-soft);color:var(--mp-green-text)}
.mypay .pill.warn{background:var(--mp-yellow-bg);color:var(--mp-yellow-text)}
.mypay .pill.rate{background:var(--mp-icy);color:var(--mp-navy)}
.mypay .pill.ahead{background:var(--mp-green-soft);color:var(--mp-green-text)}
.mypay .pill.behind{background:var(--mp-yellow-bg);color:var(--mp-yellow-text)}
.mypay .pill.onpace{background:var(--mp-icy);color:var(--mp-navy)}

/* ladder */
.mypay .ladder{display:flex;gap:4px;margin:8px 0}
.mypay .ladder>div{flex:1;text-align:center;font-size:10px;padding:8px 2px;border-radius:5px;background:#eef2f4;color:#7a8890;line-height:1.3}
.mypay .ladder>div.done{background:var(--mp-icy);color:var(--mp-navy)}
.mypay .ladder>div.here{background:var(--mp-navy);color:#fff;font-weight:700}
.mypay .ladder>div.next{background:#fff;border:1.5px dashed var(--mp-orange);color:var(--mp-orange)}

/* ---- Key Program ---- */
.mypay .kp-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.mypay .kp-cur .kp-tier{font-size:24px;font-weight:700;color:var(--mp-navy);letter-spacing:-.4px;line-height:1}
.mypay .kp-cur .kp-sub{font-size:12px;color:#5a6b72;margin-top:4px}
.mypay .kp-rate{background:var(--mp-icy);border-radius:8px;padding:8px 16px;text-align:center;min-width:96px}
.mypay .kp-rate .r{font-size:20px;font-weight:700;color:var(--mp-navy);line-height:1}
.mypay .kp-rate .l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#5a6b72;margin-top:3px}
.mypay .kp-prog{margin-top:14px}
.mypay .kp-track{height:12px;border-radius:6px;background:#eef2f4;overflow:hidden}
.mypay .kp-fill{height:100%;background:linear-gradient(90deg,var(--mp-blue),var(--mp-orange))}
.mypay .kp-legend{display:flex;justify-content:space-between;font-size:11.5px;color:#5a6b72;margin-top:7px}
.mypay .kp-legend b{color:var(--mp-navy)}
.mypay .kp-gap{font-size:12.5px;color:#4a5a61;margin-top:10px;background:#fff8ef;border:1px solid #f3d199;border-radius:6px;padding:9px 12px}
.mypay .kp-gap b{color:var(--mp-navy)}

/* ---- Bonus tiers ---- */
.mypay .bsum{background:linear-gradient(135deg,#fff7ef 0%,#fdeede 100%);border:1px solid #f3d199;border-radius:8px;padding:14px 16px;margin:8px 0 14px}
.mypay .bsum-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.mypay .bsum-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#8a5a12;font-weight:600}
.mypay .bsum-num{font-size:26px;font-weight:700;color:var(--mp-navy);letter-spacing:-.6px;line-height:1}
.mypay .bsum-num span{font-size:13px;font-weight:600;color:#7a8890}
.mypay .bsum-sub{font-size:12px;color:#8a7048;margin-top:8px}
.mypay .btier-intro{font-size:12.5px;color:#4a5a61;margin:0 0 10px;line-height:1.5}
.mypay .btier-intro b{color:var(--mp-navy)}
.mypay .btier{display:grid;grid-template-columns:64px 1fr 1fr 92px;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--mp-border);border-radius:8px;margin-bottom:8px;background:#fff}
.mypay .btier.done{border-color:#a7e3bd;background:#f5fdf8}
.mypay .btier.partial{border-color:#f3d199;background:#fffcf5}
.mypay .btier.none{background:#fafbfc}
.mypay .btier .tno{font-size:13px;font-weight:700;color:var(--mp-navy);text-align:center;line-height:1.15}
.mypay .btier .tno small{display:block;font-size:9.5px;font-weight:600;color:#98a6ad;letter-spacing:.3px}
.mypay .goal{font-size:12.5px;display:flex;align-items:center;gap:9px}
.mypay .goal .mk{width:19px;height:19px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;line-height:1}
.mypay .goal .mk.met{background:var(--mp-success)}
.mypay .goal .mk.miss{background:#cdd6dc}
.mypay .goal .mk.pend{background:#c3ccd2;color:#fff}
.mypay .goal .gt{line-height:1.25}
.mypay .goal .gt b{color:var(--mp-navy)}
.mypay .goal .gt small{display:block;font-size:10.5px;color:#7a8890;margin-top:1px}
.mypay .goal .gt small.short{color:#a15a12;font-weight:600}
.mypay .btier .tearn{text-align:right;font-size:15px;font-weight:700;color:var(--mp-navy);line-height:1.1}
.mypay .btier.none .tearn{color:#b3bcc2}
.mypay .btier .tearn small{display:block;font-size:9.5px;font-weight:600;color:#98a6ad;margin-top:3px}
.mypay .bnext{font-size:12.5px;color:#4a5a61;margin-top:12px;background:var(--mp-icy);border-radius:6px;padding:10px 13px;line-height:1.5}
.mypay .bnext b{color:var(--mp-navy)}

/* ---- earned history ---- */
.mypay .hist{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-radius);box-shadow:var(--mp-shadow);margin-bottom:18px;overflow:hidden}
.mypay .hist-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 6px}
.mypay .hist-head h3{font-size:15px;font-weight:600;color:var(--mp-navy);margin:0}
.mypay .hist-head .earned-tag{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;color:var(--mp-green-text);background:var(--mp-green-soft);border-radius:var(--mp-pill);padding:3px 10px}
.mypay .hist-tabs{display:flex;gap:6px;padding:0 18px 10px}
.mypay .hist-tab{cursor:pointer;font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--mp-pill);border:1px solid var(--mp-border);background:#fff;color:#5a6b72;user-select:none}
.mypay .hist-tab.on{background:var(--mp-navy);color:#fff;border-color:var(--mp-navy)}
.mypay .hist-panel{padding:2px 18px 16px}
.mypay .hist-panel[hidden]{display:none}
.mypay .hist-cap{font-size:12px;color:#7a8890;margin:0 0 12px}
.mypay .hbar-row{display:grid;grid-template-columns:104px 1fr 84px;align-items:center;gap:12px;padding:5px 0}
.mypay .hbar-row .hlabel{font-size:11.5px;color:#4a5a61;line-height:1.25}
.mypay .hbar-row .hlabel small{display:block;color:#98a6ad;font-size:10px}
.mypay .htrack{height:22px;background:#eef2f4;border-radius:5px;display:flex;overflow:hidden}
.mypay .hseg{height:100%}
.mypay .hseg.comm{background:var(--mp-blue)}
.mypay .hseg.inprog{background:repeating-linear-gradient(135deg,#7fa8ba 0,#7fa8ba 6px,#93b6c5 6px,#93b6c5 12px)}
.mypay .hbar-row .hamt{font-size:13px;font-weight:700;text-align:right;color:var(--mp-navy)}
.mypay .hbar-row .hamt small{display:block;font-size:10px;font-weight:400;color:#98a6ad}
.mypay .hbar-row.now .hlabel{font-weight:700;color:var(--mp-navy)}
.mypay .hist-legend{display:flex;gap:16px;font-size:11.5px;color:#4a5a61;margin-top:10px;padding-top:10px;border-top:1px solid #eef2f4}
.mypay .hist-legend .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* calc table */
.mypay table.calc{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.mypay table.calc th{background:var(--mp-header-bg);text-align:left;padding:8px 10px;border:1px solid var(--mp-border);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#4a5a61}
.mypay table.calc td{padding:8px 10px;border:1px solid var(--mp-border);vertical-align:top}
.mypay table.calc td:last-child{text-align:right}
.mypay .step-num{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--mp-navy);color:#fff;font-size:10px;margin-right:6px}

.mypay .foot{font-size:11px;color:#8a969c;margin-top:18px;line-height:1.6}
.mypay .subhead{font-size:12px;color:#5a6b72;margin:2px 0 12px}