/* Approved frame (2026-11-08), computers only: solid red menu, white tab that slides to the current page with
   curved corners flowing into the panel, and a rounded white panel framed in red that scrolls on its own.
   Phones keep the red header and bottom bar. Loaded last; presentation only. */
@media (min-width:900px){
  body.sp.sp-in,body.sp.sp-in #workspace{background:var(--sp-pop)}
  body.sp.sp-in{overflow:hidden}
  body.sp #workspace{height:100vh;min-height:0}

  /* Menu */
  body.sp #crm-navigation{position:relative;background:var(--sp-pop)!important;border-right:0!important;padding:0 0 16px 14px!important;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  body.sp #crm-navigation::-webkit-scrollbar{display:none}
  body.sp .sp-rail-logo{background:transparent!important;margin:0 0 10px!important;padding:0 12px!important;height:84px;position:static!important}
  body.sp .sp-rail-logo img{width:136px}
  body.sp #crm-navigation>button[data-page]{position:relative;z-index:1;color:#fff!important;background:transparent!important;border-radius:16px 0 0 16px!important;height:48px!important;min-height:48px!important;padding:0 14px 0 14px!important;transition:color .3s ease}
  body.sp #crm-navigation>button[data-page] svg{color:rgba(255,255,255,.92)!important;transition:color .3s ease}
  body.sp #crm-navigation>button[data-page]:not([aria-current="page"]):hover{background:rgba(255,255,255,.12)!important}
  body.sp #crm-navigation>button[data-page][aria-current="page"]{color:var(--sp-red)!important}
  body.sp #crm-navigation>button[data-page][aria-current="page"] svg{color:var(--sp-red)!important}
  body.sp #crm-navigation>button[data-page]:focus-visible{outline:2px solid #fff;outline-offset:-4px}
  body.sp .sp-rail-group{position:relative;z-index:1;color:rgba(255,255,255,.72)!important;padding:22px 14px 8px!important}
  body.sp .sp-rail-badge,body.sp #crm-navigation .od-badge{background:#fff!important;color:var(--sp-pop)!important;margin-right:12px}
  body.sp #crm-navigation>button[aria-current="page"] .sp-rail-badge,body.sp #crm-navigation>button[aria-current="page"] .od-badge{background:var(--sp-pop)!important;color:#fff!important}
  body.sp #crm-navigation>.sp-rail-me{position:relative;z-index:1;width:calc(100% - 14px)!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.24)!important;color:#fff!important}
  body.sp #crm-navigation>.sp-rail-me b,body.sp #crm-navigation>.sp-rail-me small{color:#fff!important}
  body.sp #crm-navigation>.sp-rail-me small{opacity:.82}
  body.sp #crm-navigation>.sp-rail-me:hover{background:rgba(255,255,255,.2)!important}
  /* The sliding white tab */
  .sp-rail-ind{position:absolute;left:14px;right:0;top:0;height:48px;background:#fff;border-radius:16px 0 0 16px;z-index:0;pointer-events:none;transition:transform .5s var(--sp-ease),height .3s ease,opacity .2s ease}
  .sp-rail-ind::before,.sp-rail-ind::after{content:"";position:absolute;right:0;width:20px;height:20px;background:transparent;pointer-events:none}
  .sp-rail-ind::before{top:-20px;border-bottom-right-radius:20px;box-shadow:8px 8px 0 8px #fff}
  .sp-rail-ind::after{bottom:-20px;border-top-right-radius:20px;box-shadow:8px -8px 0 8px #fff}
  .sp-rail-ind[hidden]{display:block!important;opacity:0}

  /* The white panel */
  body.sp #crm-main{background:#fff;margin:12px 12px 12px 0;border-radius:32px;height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;box-sizing:border-box;padding-bottom:32px;scroll-behavior:auto}

  /* Page titles inside the panel: dark on white, compact, stay on top while scrolling */
  body.sp .crm-page>.page-heading.sp-head{background:#fff!important;color:var(--sp-ink)!important;min-height:76px;padding:14px 28px 8px!important;position:sticky;top:0;z-index:30}
  body.sp .sp-head h1{color:var(--sp-ink)!important;font-size:26px}
  body.sp .sp-summary{color:var(--sp-muted)!important;font-size:13px}
  body.sp .sp-head .btn{background:#fff!important;border-color:var(--sp-line)!important;color:var(--sp-ink)!important}
  body.sp .sp-head .btn:hover{background:var(--sp-cream)!important}
  body.sp .sp-head .btn.primary{background:var(--sp-pop)!important;border-color:var(--sp-pop)!important;color:#fff!important}
  body.sp .sp-head :focus-visible{outline-color:var(--sp-red)!important}
  body.sp .sp-sheet-body{background:#fff;padding-top:4px!important}
  /* Section tabs sit right under the title */
  .od-stick{top:76px!important;z-index:25!important}
  .od-layout .od-detail{top:140px!important;max-height:calc(100vh - 170px)!important}
  body.sp #profile-slot,body.sp #care-thread,body.sp #care-thread-empty{top:92px!important}
  #status{bottom:28px!important}
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){.sp-rail-ind{transition:none}}
/* "LAB" mark next to the logo's bottom-right corner (2026-11-08) */
.sp-logo-wrap{display:inline-flex;align-items:flex-end;gap:5px;line-height:1}
.sp-lab{font:800 10px/1 var(--sp-body);letter-spacing:.18em;color:var(--sp-red);transform:translateY(1px);white-space:nowrap}
.sp-rail-logo .sp-lab{color:#fff}
.brand .sp-lab{color:#fff}