/* SPS OPS — CPO home + sign-in (B190, 11 Oct 2026). Uses the site tokens (Acacia palette). */

/* ---------- sign-in ---------- */
.si{max-width:460px;margin-inline:auto}
.si h2{margin-bottom:6px}
.si__who{margin:4px 0 14px;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.si__who a{margin-left:4px;font-size:.9rem}
.si__check{margin:14px 0 6px;align-items:flex-start}
.si__check > span{line-height:1.45}
.si__check .small{display:block;margin-top:4px}
.si__go{width:100%;min-height:52px;margin-top:6px;font-size:1rem}
.si__more{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.si__more summary{cursor:pointer;font-size:.92rem;color:var(--mint-bright);font-weight:500;padding:6px 0;list-style:none}
.si__more summary::-webkit-details-marker{display:none}
.si__more summary::after{content:' +';}
.si__more[open] summary::after{content:' \2212'}
.si__more p{margin:8px 0}
.si__fine{margin-top:12px;text-align:center}
.si .portal__code{font-size:1.6rem;letter-spacing:.45em;text-align:center;font-variant-numeric:tabular-nums;min-height:56px}
.si .portal__ts:empty{display:none}

/* ---------- home ---------- */
.hm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:var(--s3)!important}
.hm-top p{margin:0}
.hm-card{background:var(--ink);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 18px rgba(70,80,55,.07);margin-bottom:14px}
.hm-card h2{font-size:1.18rem;line-height:1.25;margin:0}
.hm-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hm-ico--sm{width:16px;height:16px;vertical-align:-3px}

/* hello */
.hm-hello{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:linear-gradient(135deg,var(--ink) 0%,var(--ink-1) 100%)}
.hm-ava{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid var(--mint);background:var(--ink-2)}
.hm-ava--x{display:grid;place-items:center;font-family:var(--font-display);font-size:1.5rem;color:var(--mint-bright)}
.hm-hello__t{min-width:0}
.hm-greet{font-family:var(--font-display);font-size:1.3rem;line-height:1.2;margin:0 0 6px;color:var(--text-strong)}
.hm-hello .small{margin:6px 0 0}
.hm-chips{display:flex;flex-wrap:wrap;gap:6px}
.hm-chip{display:inline-flex;align-items:center;font-size:.76rem;font-weight:600;letter-spacing:.03em;border-radius:999px;padding:4px 10px;background:var(--ink-2);color:var(--text-2);border:1px solid var(--line)}
.hm-chip--tier.is-tier{background:#2C3622;color:#F1E3B3;border-color:#2C3622}
.hm-chip--st.is-available{background:rgba(76,96,57,.14);color:var(--mint-bright);border-color:var(--line-mint)}
.hm-chip--st.is-deployed{background:#D9B44A;color:#1F2416;border-color:#C9A23C}
.hm-chip--st.is-unavailable,.hm-chip--st.is-hold,.hm-chip--st.is-compliance_hold{background:rgba(179,38,30,.10);color:#8E1F18;border-color:rgba(179,38,30,.3)}
.hm-ring{all:unset;cursor:pointer;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;
  background:radial-gradient(closest-side,var(--ink) 78%,transparent 80% 100%),conic-gradient(var(--rc,#4C6039) calc(var(--p,0)*1%),var(--ink-3) 0)}
.hm-ring strong{font-size:1rem;line-height:1;color:var(--text-strong)}
.hm-ring span{font-size:.62rem;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.hm-ring:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* needs your attention */
.hm-todo__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.hm-count{min-width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-size:.9rem;background:#D9B44A;color:#1F2416;padding:0 8px}
.hm-count.is-red{background:#B3261E;color:#fff}
.hm-ok{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--on-accent);font-weight:700}
.hm-todo.is-clear{border-color:var(--line-mint);background:linear-gradient(135deg,var(--ink),rgba(76,96,57,.06))}
.hm-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border-top:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hm-row:first-of-type{border-top:0}
.hm-row[disabled]{cursor:default}
.hm-row:focus-visible,.hm-row--x summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:8px}
.hm-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#D9B44A;box-shadow:0 0 0 4px rgba(217,180,74,.18)}
.hm-row.is-red .hm-dot,.is-red > summary .hm-dot{background:#B3261E;box-shadow:0 0 0 4px rgba(179,38,30,.14)}
.hm-row.is-info .hm-dot,.is-info > summary .hm-dot{background:var(--mint);box-shadow:0 0 0 4px var(--mint-glow)}
.hm-row__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-row__t strong{font-size:.98rem;line-height:1.3;color:var(--text-strong)}
.hm-row__t .small{color:var(--text-2);line-height:1.4}
.hm-row__cta{flex:none;font-size:.82rem;font-weight:600;color:var(--mint-bright);border:1px solid var(--line-mint);border-radius:999px;padding:6px 12px;white-space:nowrap}
.hm-row--x{display:block;padding:0;cursor:default}
.hm-row--x summary{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;list-style:none}
.hm-row--x summary::-webkit-details-marker{display:none}
.hm-chev{width:18px;height:18px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s}
details[open] > summary .hm-chev{transform:rotate(90deg)}
.hm-row__body{padding:0 0 12px}
.hm-row__body > *{margin:0!important}

/* next task */
.hm-next .eyebrow{margin-bottom:6px}
.hm-next.is-now{border-color:#C9A23C;background:linear-gradient(135deg,#FBF5E2,var(--ink))}
.hm-next.is-now .eyebrow{color:#8A6A12}
.hm-next__meta{margin:6px 0 12px;color:var(--text-2)}
.hm-next__acts{display:flex;flex-wrap:wrap;gap:8px}
.hm-next.is-empty h2{color:var(--text-2)}
.hm-next.is-empty .btn{margin-top:10px}

/* globe */
.gl{background:radial-gradient(120% 90% at 30% 0%,#2B3522 0%,#161C11 60%,#0F130B 100%);color:#EDE6D2;border:1px solid #2C3622;box-shadow:0 14px 34px rgba(20,26,14,.28);overflow:hidden;position:relative}
.gl::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(217,180,74,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(217,180,74,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%)}
.gl > *{position:relative}
.gl__eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#D9B44A;font-weight:600;margin:0 0 4px}
.gl h2{color:#F3EEDD}
.gl__stats{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 4px;border:1px solid rgba(217,180,74,.22);border-radius:12px;overflow:hidden}
.gl__stat{display:flex;flex-direction:column;align-items:center;padding:10px 4px;gap:2px}
.gl__stat + .gl__stat{border-left:1px solid rgba(217,180,74,.18)}
.gl__stat strong{font-size:1.35rem;line-height:1;color:#F3EEDD;font-variant-numeric:tabular-nums}
.gl__stat span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#B9B39C}
.gl__stat.is-current strong{color:#E8C55A}
.gl__wrap{position:relative;display:flex;justify-content:center;padding:6px 0}
.gl__stage{width:100%;max-width:460px;display:flex;justify-content:center;min-height:240px;align-items:center}
.gl__cv{display:block;cursor:grab}
.gl__cv:active{cursor:grabbing}
.gl__wait{color:#B9B39C;font-size:.92rem;text-align:center}
.gl__ctl{position:absolute;right:0;bottom:10px;display:flex;flex-direction:column;gap:8px}
.gl__btn{all:unset;box-sizing:border-box;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#EDE6D2;background:rgba(15,19,11,.7);border:1px solid rgba(217,180,74,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gl__btn:hover{border-color:#D9B44A;color:#F3D57E}
.gl__btn:focus-visible{outline:2px solid #D9B44A;outline-offset:2px}
.gl__btn .hm-ico{width:20px;height:20px}
.gl__info{font-size:.9rem;line-height:1.45;color:#D6CFB8;margin:6px 0 10px;min-height:1.4em}
.gl__legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:#B9B39C;margin-bottom:10px}
.gl__legend span::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0;border:1.5px solid #141a10}
.gl__legend .is-current::before{background:#E8C55A;box-shadow:0 0 0 3px rgba(232,197,90,.25)}
.gl__legend .is-upcoming::before{background:#F3F0E8}
.gl__legend .is-past::before{background:#9FB38A}
.gl__list{display:flex;flex-wrap:wrap;gap:8px}
.gl__list:empty{display:none}
.gl__place{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:#EDE6D2;background:rgba(255,255,255,.05);border:1px solid rgba(217,180,74,.22);border-radius:999px;padding:6px 12px;cursor:pointer}
.gl__place:hover,.gl__place:focus-visible{border-color:#D9B44A;outline:none}
.gl__pdot{width:8px;height:8px;border-radius:50%;background:#9FB38A}
.gl__place.is-current .gl__pdot{background:#E8C55A}
.gl__place.is-upcoming .gl__pdot{background:#F3F0E8}
.gl__pn{font-size:.75rem;color:#B9B39C;font-variant-numeric:tabular-nums}

/* shortcuts */
.hm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.hm-tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;background:var(--ink);border:1px solid var(--line);cursor:pointer;min-height:118px;transition:border-color .15s,transform .15s}
.hm-tile:hover{border-color:var(--line-mint);transform:translateY(-1px)}
.hm-tile:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.hm-tile__ic{color:var(--mint);margin-bottom:6px}
.hm-tile strong{font-size:.98rem;line-height:1.25;color:var(--text-strong)}
.hm-tile .small{color:var(--text-2);line-height:1.35}
.hm-bar{display:block;height:5px;border-radius:999px;background:var(--ink-3);margin-top:auto;overflow:hidden}
.hm-bar span{display:block;height:100%;width:0;background:var(--mint);border-radius:inherit;transition:width .6s}

/* culture */
.hm-culture{background:linear-gradient(150deg,#F6F1E2 0%,var(--ink) 60%);border-color:rgba(201,162,60,.35)}
.hm-culture .eyebrow{color:#8A6A12}
.hm-culture h2{font-size:1.3rem;margin:4px 0 10px}
.hm-culture p{color:var(--text-2);line-height:1.55;margin:0 0 10px}
.hm-skills{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.hm-skill{font-size:.82rem;font-weight:500;color:var(--mint-bright);background:var(--mint-glow);border:1px solid var(--line-mint);border-radius:999px;padding:5px 11px}

/* folded profile summary */
.hm-badges{margin-bottom:14px}
.hm-prof{border:1px solid var(--line);border-radius:14px;background:var(--ink);margin-bottom:14px}
.hm-prof > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}
.hm-prof > summary::-webkit-details-marker{display:none}
.hm-prof > summary > span{display:flex;flex-direction:column;gap:2px}
.hm-prof__in{padding:0 14px 14px}
.pv__card--empty{opacity:.75}

@media (min-width:901px){
  .has-home .portal__grid{align-items:start}
  .hm-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .has-home .pagehero--compact > .wrap{display:none}     /* the hello card is the page title on phones; the hero keeps the header gap */
  .has-home .pagehero--compact{padding:var(--header-h) 0 0!important;border-bottom:0}
  .has-home .hm-top{display:none}                         /* ref is in the hello card; sign out is in the menu */
  .has-home .section--portal{padding-top:var(--s4)}
}
@media (max-width:420px){
  .hm-card{padding:16px 14px;border-radius:14px}
  .hm-hello{grid-template-columns:auto 1fr;}
  /* B198: on phones the ring becomes a clean pill with a small true-circle gauge (no stretched gradient) */
  .hm-ring{grid-column:1 / -1;justify-self:start;box-sizing:border-box;width:auto;height:34px;border-radius:999px;padding:0 14px 0 10px;display:inline-flex;align-items:center;gap:8px;background:var(--ink-2);border:1px solid var(--line)}
  .hm-ring::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(closest-side,var(--ink-2) 58%,transparent 62%),conic-gradient(var(--rc,#4C6039) calc(var(--p,0)*1%),var(--ink-3) 0)}
  .hm-ring strong{font-size:.9rem;line-height:1}
  .hm-ring span{margin:0;line-height:1}
  .gl__ctl{right:-4px}
  .gl__btn{width:38px;height:38px}
  .hm-tile{min-height:108px;padding:14px}
}
@media (prefers-reduced-motion:reduce){.hm-tile,.hm-bar span,.hm-chev{transition:none}}

/* B197 culture card: folded detail */
.hm-cu__more{margin:2px 0 12px;border-top:1px solid var(--line);padding-top:8px}
.hm-cu__more summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--mint-bright);list-style:none;padding:4px 0}
.hm-cu__more summary::-webkit-details-marker{display:none}
.hm-cu__more summary::after{content:' +'}
.hm-cu__more[open] summary::after{content:' \2212'}

/* B197 My verified record */
.vlt__list{list-style:none;margin:12px 0;padding:0;display:grid;gap:2px}
.vlt__list li{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.vlt__list li:first-child{border-top:0}
.vlt__ok{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--on-accent);font-weight:700;font-size:.85rem}
.vlt__t{flex:1;min-width:0;font-weight:600;color:var(--text-strong)}
.vlt__list .btn{flex:none;width:auto;min-width:0;padding-left:16px;padding-right:16px}
@media (max-width:900px){html.ops .hm-top{display:none}}
/* B202: legend and chips match the globe markers (dark outline + status fill) */
.gl__legend span::before{width:11px;height:11px;box-sizing:border-box;border:2px solid #141A10;box-shadow:0 0 0 1px rgba(217,180,74,.35);vertical-align:-1px}
.gl__pdot{box-sizing:border-box;width:10px;height:10px;border:2px solid #141A10;box-shadow:0 0 0 1px rgba(217,180,74,.35)}
.gl__legend .is-upcoming::before,.gl__place.is-upcoming .gl__pdot{background:radial-gradient(circle,#141A10 0 1.5px,#F3F0E8 2px)}
.gl__legend .is-current::before,.gl__place.is-current .gl__pdot{background:#F0C75A}
.gl__stage{max-width:520px}

/* B200: compliance gauge - vector ring with rounded arc (all screens), compact pill on phones */
.hm-ring{position:relative;width:78px;height:78px;background:none!important;border:0}
.hm-ring__g{position:absolute;inset:0;display:block}
.hm-ring__g svg{width:100%;height:100%;display:block;transform:rotate(-90deg);overflow:visible}
.hm-ring__trk{fill:none;stroke:rgba(227,222,205,.10);stroke-width:4.5}
.hm-ring__arc{fill:none;stroke:var(--gc,#8DBF6E);stroke-width:4.5;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 3px var(--gg,rgba(141,191,110,.45)))}
.hm-ring.is-ok{--gc:#8DBF6E;--gg:rgba(141,191,110,.45)}
.hm-ring.is-warn{--gc:#E3B341;--gg:rgba(227,179,65,.45)}
.hm-ring.is-bad{--gc:#E0533F;--gg:rgba(224,83,63,.5)}
.hm-ring__t{position:relative;display:grid;justify-items:center;line-height:1}
.hm-ring__t strong{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text-strong)}
.hm-ring__t span{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.hm-ring:hover .hm-ring__trk{stroke:rgba(227,222,205,.16)}
@media (prefers-reduced-motion:reduce){.hm-ring__arc{transition:none}}
@media (max-width:420px){
  .hm-ring{width:auto;height:36px;padding:0 14px 0 6px;gap:9px;border-radius:999px;border:1px solid var(--line);background:var(--ink-2)!important}
  .hm-ring::before{content:none!important;display:none}
  .hm-ring__g{position:relative;inset:auto;width:24px;height:24px;flex:none}
  .hm-ring__trk,.hm-ring__arc{stroke-width:7}
  .hm-ring__arc{filter:none}
  .hm-ring__t{display:flex;align-items:baseline;gap:6px}
  .hm-ring__t strong{font-size:.92rem}
  .hm-ring__t span{margin:0;font-size:.6rem}
}

/* B211: Quagga Group footprint on the globe — gold diamond */
.gl__legend .is-group::before,.gl__place.is-group .gl__pdot{border-radius:1px!important;transform:rotate(45deg) scale(.85);background:#D9B44A;box-shadow:0 0 0 1px rgba(217,180,74,.35)}
.gl__place.is-group{border-style:dashed}

/* B229: visible security check when the invisible one does not finish */
.si .portal__ts.is-shown{display:flex;justify-content:center;min-height:68px;margin:4px 0 2px}
