/* Commission (Key Program) + My Business (Testing)
   ================================================
   Portal port of the approved Key Program commission prototype
   (Analytics & Data/RSA Commission Dashboard/prototype/template.html, signed
   off 2026-08-12). Two exec/HR-gated Testing views share this stylesheet and
   the commission_key.json feed:
     * #commissionKeyView  -- executive all-reps roster (renderCommissionKey)
     * #myBusinessView     -- RSA associate-picker daily view (renderMyBusiness)

   EVERYTHING is scoped under .ckp so the prototype's generic class names
   (.tile / .card / .meter / table / th / td / .ladder / .pill ...) never touch
   the rest of the portal. The brand palette is declared on .ckp as local
   custom properties rather than :root, for the same reason. Faithful port of
   the prototype look; the standalone-page chrome (body reset, sticky tabnav,
   footer) is dropped because these render inside the portal shell. */

.ckp {
  --ckp-teal:#003B4A; --ckp-orange:#F78D2B; --ckp-slate:#3F738D; --ckp-sky:#DAEAF1;
  --ckp-mist:#B9D2DC; --ckp-white:#F6F5F5; --ckp-graphite:#444444; --ckp-ink:#1A1A1A;
  --ckp-green:#1F6F4A; --ckp-red:#9B2C2C;
  --ckp-radius:4px;
  color:var(--ckp-graphite);
  font-size:15px; line-height:1.5;
  padding:0 4px 2rem;
}
.ckp h2,.ckp h3,.ckp h4 { color:var(--ckp-teal); font-weight:600; line-height:1.2; margin:0 0 .4em; }
.ckp h2 { font-size:1.5rem; }
.ckp h3 { font-size:1.1rem; font-weight:600; color:var(--ckp-slate); }
.ckp p { margin:0 0 .9em; max-width:92ch; }
.ckp .eyebrow { font-weight:600; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ckp-slate); margin:0 0 .3em; }

/* Testing / prototype banner rendered inside the view */
.ckp .ckp-banner { background:var(--ckp-orange); color:var(--ckp-ink); font-weight:600; padding:.55rem .85rem; font-size:.83rem; border-radius:var(--ckp-radius); margin:.2rem 0 1rem; }
.ckp .ckp-conf { color:var(--ckp-slate); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; margin:.2rem 0 .6rem; }
.ckp .ckp-period { font-size:.9rem; color:var(--ckp-graphite); margin:.1rem 0 1rem; }
.ckp .ckp-period strong { color:var(--ckp-teal); }

.ckp .card { background:#fff; border-radius:var(--ckp-radius); padding:1.05rem 1.15rem; box-shadow:0 1px 3px rgba(0,59,74,.10); }
.ckp .table-wrap { overflow-x:auto; }
.ckp table { border-collapse:collapse; width:100%; font-size:.83rem; background:#fff; }
.ckp th { background:var(--ckp-teal); color:#fff; text-align:left; padding:.5em .7em; font-weight:600; }
.ckp td { padding:.45em .7em; border-bottom:1px solid var(--ckp-mist); vertical-align:top; }
.ckp tbody tr:nth-child(even) { background:var(--ckp-sky); }
.ckp tr.std td { background:#cfe4ec; font-weight:600; color:var(--ckp-teal); }

.ckp .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:.8rem; margin:1rem 0; }
.ckp .tile { background:#fff; border-radius:var(--ckp-radius); padding:.85rem .95rem; box-shadow:0 1px 3px rgba(0,59,74,.10); border-top:3px solid var(--ckp-slate); }
.ckp .tile .label { font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ckp-slate); }
.ckp .tile .value { font-size:1.6rem; color:var(--ckp-teal); font-weight:600; line-height:1.15; margin:.15rem 0 .1rem; }
.ckp .tile .sub { font-size:.72rem; color:var(--ckp-graphite); }
.ckp .tile.hot { border-top-color:var(--ckp-orange); }

.ckp .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.ckp .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:start; }
@media (max-width:900px){ .ckp .grid-2,.ckp .grid-3{ grid-template-columns:1fr; } }

.ckp .meter { position:relative; height:30px; border-radius:var(--ckp-radius); overflow:hidden; display:flex; margin:.5rem 0 .2rem; }
.ckp .meter div { height:100%; }
.ckp .meter-note { font-size:.72rem; color:var(--ckp-graphite); }
.ckp .marker { position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--ckp-ink); }
.ckp .seg-label { font-size:.7rem; display:flex; gap:1rem; flex-wrap:wrap; margin-top:.3rem; }
.ckp .seg-label span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:.35em; vertical-align:-1px; }
.ckp .seg-label .s-base::before { background:var(--ckp-teal); }
.ckp .seg-label .s-sleep::before { background:var(--ckp-slate); }
.ckp .seg-label .s-prot::before { background:var(--ckp-orange); }
.ckp .seg-label .s-clear::before { background:var(--ckp-mist); }

.ckp .badge { display:inline-block; font-size:.68rem; font-weight:600; padding:.14em .6em; border-radius:10px; letter-spacing:.03em; }
.ckp .badge-ok { background:var(--ckp-sky); color:var(--ckp-teal); }
.ckp .badge-warn { background:var(--ckp-orange); color:var(--ckp-ink); }
.ckp .badge-flag { background:var(--ckp-teal); color:#fff; }
.ckp .pending { display:inline-block; font-size:.6rem; font-weight:600; padding:.1em .5em; border-radius:9px; background:#ededed; color:#7a7a7a; letter-spacing:.02em; vertical-align:1px; margin-left:.4em; white-space:nowrap; }
.ckp .note { font-size:.78rem; color:var(--ckp-graphite); background:#fff; border-left:3px solid var(--ckp-orange); padding:.55rem .8rem; border-radius:0 var(--ckp-radius) var(--ckp-radius) 0; margin:.8rem 0; }
.ckp .note.good { border-left-color:var(--ckp-green); }
.ckp .note.stop { border-left-color:var(--ckp-red); }
.ckp .note.info { border-left-color:var(--ckp-slate); }

.ckp .ladder { display:flex; gap:4px; margin:.6rem 0 .2rem; flex-wrap:wrap; }
.ckp .ladder div { flex:1; min-width:82px; padding:.45rem .3rem; text-align:center; font-size:.68rem; font-weight:600; border-radius:3px; background:#fff; color:var(--ckp-graphite); border:1px solid var(--ckp-mist); }
.ckp .ladder .done { background:var(--ckp-teal); color:#fff; border-color:var(--ckp-teal); }
.ckp .ladder .next { background:var(--ckp-sky); color:var(--ckp-teal); border:2px solid var(--ckp-orange); }
.ckp .step-num { display:inline-block; background:var(--ckp-teal); color:#fff; font-weight:600; font-size:.75rem; border-radius:50%; width:22px; height:22px; text-align:center; line-height:22px; margin-right:.4em; }

/* Timeframe pills (rendered dynamically from meta.timeframes) + its caveat line.
   Mirrors the Commission Due timeframe control's role, styled as pills here. */
.ckp .tf-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .5rem; }
.ckp .tf-lbl { font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ckp-slate); }
.ckp .tf-pills { display:inline-flex; gap:.3rem; flex-wrap:wrap; }
.ckp .tf-pill { font-family:inherit; font-size:.8rem; font-weight:600; padding:.4rem .85rem; border:1px solid var(--ckp-mist); border-radius:16px; background:#fff; color:var(--ckp-slate); cursor:pointer; }
.ckp .tf-pill:hover { border-color:var(--ckp-slate); }
.ckp .tf-pill.active { background:var(--ckp-teal); color:#fff; border-color:var(--ckp-teal); }
.ckp .tf-caveat { font-size:.74rem; color:var(--ckp-graphite); background:#fff7ef; border-left:3px solid var(--ckp-orange); padding:.4rem .7rem; border-radius:0 var(--ckp-radius) var(--ckp-radius) 0; margin:-.1rem 0 .7rem; max-width:92ch; }

.ckp .controls { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin:1rem 0; }
.ckp .controls input,.ckp .controls select { font-family:inherit; font-size:.85rem; padding:.5rem .7rem; border:1px solid var(--ckp-mist); border-radius:var(--ckp-radius); background:#fff; color:var(--ckp-ink); }
.ckp .controls input { min-width:210px; }
.ckp .controls label { font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ckp-slate); }
.ckp .picker-row { display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; margin:1rem 0; }
.ckp .picker-row select { font-family:inherit; font-size:1rem; padding:.6rem .8rem; border:1px solid var(--ckp-slate); border-radius:var(--ckp-radius); background:#fff; color:var(--ckp-ink); min-width:320px; }

.ckp table.roster th { cursor:pointer; user-select:none; white-space:nowrap; }
.ckp table.roster th .arr { opacity:.5; font-size:.7em; margin-left:.25em; }
.ckp table.roster th.sorted .arr { opacity:1; color:var(--ckp-orange); }
.ckp table.roster td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ckp table.roster tbody tr:hover { background:#cfe4ec; cursor:pointer; }

.ckp .pill { display:inline-block; font-size:.66rem; font-weight:600; padding:.12em .55em; border-radius:10px; background:var(--ckp-sky); color:var(--ckp-teal); white-space:nowrap; }
.ckp .pill.cap { background:var(--ckp-teal); color:#fff; }
.ckp .pill.floor { background:#f0d7d7; color:var(--ckp-red); }
.ckp .pill.std { background:#cfe4ec; color:var(--ckp-teal); }

.ckp .dist { display:flex; gap:2px; height:26px; border-radius:var(--ckp-radius); overflow:hidden; border:1px solid var(--ckp-mist); margin:.4rem 0 .3rem; }
.ckp .dist div { display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:600; color:#fff; }
.ckp .repcard-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.6rem; margin-bottom:.2rem; }
.ckp .repcard-head .meta { font-size:.8rem; color:var(--ckp-graphite); }
.ckp .ckp-empty { padding:2rem 0; color:var(--ckp-slate); font-size:.95rem; }