/* motion.css - PAYBACK console motion layer (ADR 0065 Amend (3), 2026-10-12).
   Loaded after workspace.css and mk/motion-kit.css. Everything here is either an interaction state
   (:active/:hover) or styles for elements that motion.js creates only when motion is on
   (pill, canvases, toast icon), so the static capture layout is unchanged. */

/* sliding selection pill — nav (vertical on desktop, grid on tablet/phone) and chart toggle */
.pb-pill{position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  transition:transform var(--dur-4) cubic-bezier(.34,1.28,.64,1),width var(--dur-3) var(--ease-expo),height var(--dur-3) var(--ease-expo),opacity var(--dur-2) var(--ease-out)}
nav.tabs .pb-pill{background:#285dcc;border:1px solid #3971dd;border-radius:8px;box-shadow:0 5px 15px #080e1c15,0 0 24px #3b78ff38}
nav.tabs.pb-has-pill button{position:relative;z-index:1}
#chartToggle.pb-has-pill{position:relative}
#chartToggle .pb-pill{background:var(--accent);border-radius:6px;box-shadow:0 2px 6px #14223a22}
#chartToggle.pb-has-pill button{position:relative;z-index:1}
/* the selected button lets the pill show through — only while motion is on, so the static state is untouched */
@media (prefers-reduced-motion:no-preference){
  body:not(.capture-mode) nav.tabs.pb-has-pill button.active,body:not(.capture-mode) nav.tabs.pb-has-pill button.active:hover{background:transparent;border-color:transparent;box-shadow:none}
  body:not(.capture-mode) #chartToggle.pb-has-pill button.active{background:transparent;box-shadow:none}
}

/* signature canvas over the admin console (created by JS only when motion is on) */
#s-admin{position:relative}
.pb-sig{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* hero ambient canvas inside the account note */
.account-note.pb-amb-host{isolation:isolate}
.account-note .pb-amb{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* hover depth on summary cards (pointer devices only) */
@media (hover:hover){
  .stat,.kpi,#uidCards .card,.infostrip .ic,.guide .g,.archnote .n,.ent{transition:transform var(--dur-3) var(--ease-expo),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
  .stat:hover,.kpi:hover,#uidCards .card:hover,.infostrip .ic:hover,.guide .g:hover,.archnote .n:hover,.ent:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0b1a3018}
}

/* toast tuned to the console palette (kit default uses --bg as text colour, unreadable on dark) */
.mk-toast{background:#14223a;color:#edf3fa;border:1px solid #2b405e;border-left:3px solid #68a0ff;font-size:12px;line-height:1.5;box-shadow:0 14px 34px #0612244d}
.mk-toast--ok{border-left-color:#50cdb4}
.mk-toast--warn{border-left-color:#e0b365}
.mk-toast--bad{border-left-color:#f39399}
.pb-toast-ic{display:inline-grid;place-items:center;color:#50cdb4;flex:0 0 auto}
.pb-okcheck{display:inline-grid;place-items:center;color:var(--green);margin-right:6px;vertical-align:-1px}

/* temporary colour cross-fade while the theme flips (class lives ~0.5s, motion on only) */
.pb-theme-fade,.pb-theme-fade *{transition:background-color .45s var(--ease-out),color .45s var(--ease-out),border-color .45s var(--ease-out),fill .45s var(--ease-out),stroke .45s var(--ease-out)!important}

/* floor 1 (also enforced by the kit and index.html): nothing created by motion.js survives */
@media (prefers-reduced-motion:reduce){.pb-sig,.pb-amb,.pb-flow,.pb-pill{display:none!important}}
body.capture-mode .pb-sig,body.capture-mode .pb-amb,body.capture-mode .pb-flow,body.capture-mode .pb-pill{display:none!important}