/* Compact Cloud controls. Device shell positions remain at the checkpoint. */
#cloud-guide {
  position:absolute; top:56px; right:14px; width:122px; z-index:34;
  pointer-events:auto;
}
#cloud-guide canvas {display:block;width:100%;height:auto}
#cloud-guide [hidden] {display:none!important}
#cloud-guide button {
  position:absolute;right:-2px;top:-6px;width:34px;height:34px;
  border:1px solid #b7abc466;border-radius:50%;background:#29283ce8;
  color:#f2e3c4;font-size:20px;cursor:pointer;
}
#graybox-status {
  top:216px;right:14px;bottom:auto;width:164px;max-width:164px;
  border:0;background:#232337d9;border-radius:8px;padding:9px;
  color:#eee4d4;font:400 12px/1.45 Inter,sans-serif;
  text-transform:none;letter-spacing:0;pointer-events:none;
}
body.graybox-active #w-prompt {width:calc(100% - 200px);max-width:430px}
body.graybox-active #w-prompt h2 {font-size:clamp(28px,3.8vw,48px)}
.graybox-help {
  max-width:calc(100% - 190px);flex-wrap:wrap;gap:12px;
  border-radius:10px;background:#1e1d2ee8;border-color:#c8b89044;
}
#graybox-interact {border-radius:10px;background:#252337ed;border-color:#c5aa7499}
#graybox-character {
  left:auto;right:16px;bottom:14px;top:auto;max-width:160px;
  padding:8px 10px;font-size:11px;letter-spacing:0;text-transform:none;
}
body[data-shell-mode="world"]:not([data-path]) #privacy-settings {
  display:none!important;
}
body[data-shell-mode="directory"] #cloud-privacy{display:none!important}
body[data-shell-mode="world"][data-path] #privacy-settings {
  top:auto!important;bottom:14px!important;right:16px!important;
}
.graybox-touch-actions button {touch-action:none;user-select:none;-webkit-user-select:none}
@media(max-width:760px) {
  #cloud-guide {top:48px;right:10px;width:100px}
  #cloud-guide button {width:34px;height:34px}
  #graybox-status {top:177px;right:10px;width:132px;max-width:132px;font-size:11px}
  body.graybox-active #w-prompt {left:14px;top:54px;width:calc(100% - 162px)}
  body.graybox-active #w-prompt h2 {font-size:28px}
  body.graybox-active #w-prompt p {font-size:12px;line-height:1.4}
  .world-eyebrow {display:none}
  .graybox-touch {bottom:calc(62px + env(safe-area-inset-bottom))}
  #graybox-character {right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  #graybox-interact {bottom:210px;min-width:190px;padding:9px}
}
@media(max-height:580px) {
  #cloud-guide {width:82px;top:48px}
  #graybox-status {top:155px;width:135px}
  .graybox-help {bottom:12px}
}
/* Parchment entries are ink on the sheet, not unrelated floating cards. */
#pers-timeline{container-type:inline-size}.tl-theme-personal .tl-event{left:var(--event-x)!important;top:50%!important;transform:translate(-50%,-50%)!important;width:clamp(240px,48cqw,440px)!important;max-height:70%;overflow:auto;padding:24px!important;background:transparent!important;border:0!important;border-left:1px solid #997b4c66!important;border-radius:0!important;box-shadow:none!important;color:#493318!important}
.tl-theme-personal .tl-event::before,.tl-theme-personal .tl-event::after{display:none!important}.tl-theme-personal .tl-title{color:#493318!important;font:500 clamp(24px,3cqw,34px)/1.14 'Cormorant Garamond',serif}.tl-theme-personal .tl-summary{color:#6b5030!important;font-size:14px;line-height:1.6}.tl-theme-personal .tl-category,.tl-theme-personal .tl-subtitle{color:#775632!important}.tl-theme-personal .tl-plus{color:#60421d!important;border-color:#89673e!important;background:#e9d4a0!important;width:40px;height:40px}.tl-theme-personal .tl-event:not(.is-period-active){opacity:.3!important}
#pers-timeline .tl-mobile-event{background:#e7d2a0;color:#4b351f;border-color:#9e8057;border-radius:5px}#pers-timeline .tl-mobile-event .tl-title{color:#4b351f}#pers-timeline .tl-mobile-event .tl-summary{color:#6a5033}
.profile-links{display:flex;align-items:center;gap:6px;flex-shrink:0}
.profile-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid currentColor;border-radius:7px;color:inherit;opacity:.85;text-decoration:none;transition:background .15s,opacity .15s}
.profile-link svg{width:18px;height:18px;fill:currentColor}.profile-link:hover,.profile-link:focus-visible{opacity:1;background:#a9936826;outline-offset:3px}.profile-link[data-disabled]{opacity:.38}
.contacts{position:relative;padding-right:78px}.contacts #card-socials{position:absolute;right:0;top:0;color:var(--txt,#eee5d8)}
#resume-socials{margin:14px 0 24px}#mini-socials .profile-link{width:27px;height:27px;border-color:var(--bdr,#bba67c55)}#mini-socials svg{width:16px;height:16px}
#mini .mini-acts{align-items:center}#mini .mini-role{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){#mini .mini-role,#mini .mini-sep{display:none}#mini .mini-bar{flex-wrap:wrap;gap:6px}#mini .mini-name{margin-right:auto}#mini .mini-acts{gap:4px}#mini-socials{gap:4px}}
@media(max-width:400px){#mini .mini-bar{padding:7px 8px}#mini .mini-name{font-size:15px}#mini .mini-sdot{display:none}#mini .mini-acts{margin-left:0}#mini .mini-acts .mab{padding:5px}#mini .experience-switch.is-mini-switch{margin-left:0}}
@media(prefers-reduced-motion:reduce){.guide-direction span,.profile-link,#world-nudge{transition:none}}

/* Desktop-style layouts share one stacking context and a usable window dock. */
body[data-shell-mode="directory"] .directory-dock{z-index:9000}
body[data-shell-mode="directory"] .directory-topbar{z-index:9010}
body[data-shell-mode="directory"] .directory-calendar,body[data-shell-mode="directory"] .directory-overview{z-index:9020}
body[data-shell-mode="directory"] #privacy-settings{top:2px!important;right:125px!important;bottom:auto!important;left:auto!important;z-index:9030}
/* The gold arrow is drawn with the existing renderer into this clear slot. */
#cloud-guide{top:60px;right:18px;width:178px;display:flex;align-items:center;gap:6px;pointer-events:none;background:none}
#cloud-guide[hidden]{display:none}
#cloud-guide .guide-arrow{width:42px;height:42px;flex:0 0 42px}
#cloud-guide>div:last-child{padding:7px 9px;background:#211e24e8;border-left:2px solid #d5a550;border-radius:3px;flex:1}
#cloud-guide strong{color:#efbd5f;font:600 11px/1.25 Inter,sans-serif}
#cloud-guide p{margin:3px 0 0;color:#eee7d7;font:400 10px/1.3 Inter,sans-serif}
/* Guidance lives in the compass card. These remain available to assistive
   technology without rendering a second and third copy over the world. */
#graybox-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
#graybox-interact{z-index:51}
#world-nudge{position:absolute;z-index:52;left:50%;bottom:76px;max-width:min(360px,calc(100vw - 32px));padding:10px 14px;border:1px solid #c8b89055;border-radius:7px;background:#211f2bea;color:#eee8de;font:500 13px/1.4 Inter,sans-serif;text-align:center;opacity:0;transform:translate(-50%,8px);transition:opacity .22s ease,transform .22s ease;pointer-events:none;box-shadow:0 12px 34px #08070c4d}
#world-nudge[hidden]{display:none}#world-nudge.show{opacity:1;transform:translate(-50%,0)}
#cloud-utilities{position:absolute;right:18px;bottom:16px;display:flex;gap:10px;align-items:center;pointer-events:auto;z-index:50}
#cloud-utilities button{position:static!important;min-height:36px;padding:8px 12px;border:1px solid #c6b8a766;border-radius:8px;background:#292332ed;color:#f1e8db;font:500 12px Inter,sans-serif;cursor:pointer;max-width:none}
body[data-shell-mode="world"][data-path] #privacy-settings{left:18px!important;right:auto!important;bottom:14px!important;top:auto!important}
@media(pointer:coarse){
 #cloud-guide{top:52px;right:14px;width:168px}
 .graybox-touch{bottom:14px;left:16px;right:16px}
 .graybox-stick{width:78px;height:78px;box-shadow:inset 0 0 0 12px rgba(255,255,255,.035);backdrop-filter:none}
 .graybox-stick::before{left:10px;right:10px}.graybox-stick::after{top:10px;bottom:10px}
 .graybox-stick-knob{width:28px;height:28px;margin:-14px}
 .graybox-touch-actions{grid-template-columns:repeat(2,48px);gap:6px}
 .graybox-touch-actions button{width:48px;height:48px;font-size:9px;touch-action:none;backdrop-filter:none}
 #cloud-utilities{right:132px;bottom:14px;gap:6px}
 #cloud-utilities button{min-height:31px;padding:6px 8px;font-size:10px}
 #world-nudge{bottom:126px;font-size:12px}
}
/* Acquisition: a brief white burst, dark pause, then the ability name. */
#speed-unlock{inset:0;width:100%;height:100%;padding:0;transform:none;align-content:center;gap:18px;background:radial-gradient(ellipse,#080910df,#08091099);transition:opacity .5s;isolation:isolate}
#speed-unlock.show{transform:none}
#speed-unlock::before{inset:0;width:auto;height:auto;border:0;border-radius:0;transform:none;background:repeating-conic-gradient(from 12deg,transparent 0deg 12deg,#edf7ff55 12.1deg 12.5deg,transparent 13deg 20deg);mask-image:radial-gradient(ellipse,transparent 16%,#000 45%,transparent 68%);animation:abilityBurst 1.5s ease-out both;z-index:-1}
#speed-unlock::after{left:50%;top:50%;width:75%;height:2px;border:0;border-radius:0;background:#eef8ff;box-shadow:0 0 24px #d8edff;animation:abilitySlash .7s ease-out both}
#speed-unlock i{display:none}
#speed-unlock strong{font:500 54px/1.1 'Cormorant Garamond',serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 24px #c9e2fa80;animation:abilityName 1s .35s both}
#speed-unlock strong::before{content:'ABILITY ACQUIRED';display:block;margin-bottom:24px;color:#b9b8c6;font:400 12px Inter,sans-serif;letter-spacing:.35em}
#speed-unlock span{max-width:380px;font:400 14px/1.5 Inter,sans-serif;text-transform:none;letter-spacing:0;animation:abilityName 1s .65s both}
@keyframes abilityBurst{from{opacity:1;transform:scale(.3) rotate(-12deg)}to{opacity:0;transform:scale(1.4) rotate(8deg)}}
@keyframes abilitySlash{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.02)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1)}}
@keyframes abilityName{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#speed-unlock::before,#speed-unlock::after{display:none}#speed-unlock strong,#speed-unlock span{animation:none}}

/* Final HUD pass: reserve independent lanes for navigation, guidance and
   controls. The introductory copy quietly leaves once the world is familiar. */
#s-world #w-prompt{transition:opacity .65s ease,transform .65s ease}
#s-world.world-copy-hidden #w-prompt{opacity:0;transform:translateY(-8px);pointer-events:none}
#cloud-guide .guide-arrow{filter:drop-shadow(0 8px 9px rgba(0,0,0,.55))}
#cloud-guide canvas{overflow:visible}

/* When the recruiter card becomes a Cloud navbar, the mode and privacy
   controls become part of that bar instead of forming competing overlays. */
#mini .is-mini-privacy{
  position:static!important;inset:auto!important;display:inline-flex!important;
  align-items:center;min-height:27px;margin:0;padding:5px 8px!important;
  border:1px solid var(--bdr)!important;border-radius:6px!important;
  background:rgba(255,255,255,.055)!important;color:var(--txt)!important;
  font:600 7px/1 'IBM Plex Mono',monospace!important;text-transform:uppercase;
}

@media(pointer:coarse){
  #cloud-guide{top:70px;right:12px;width:146px}
  #cloud-guide .guide-arrow{width:36px;height:36px;flex-basis:36px}
  #cloud-guide>div:last-child{padding:6px 7px}
  #cloud-guide strong{font-size:9px}#cloud-guide p{font-size:8px}
  #cloud-utilities{left:50%;right:auto;bottom:13px;transform:translateX(-50%);gap:5px}
  #cloud-utilities button{min-height:30px;padding:5px 8px;font-size:9px}
  #mini{width:min(900px,calc(100vw - 28px))}
  #mini .mini-bar{flex-wrap:nowrap;gap:6px;padding:7px 10px 9px}
  #mini .mini-role,#mini .mini-sep{display:block}
  #mini .mini-role{max-width:172px;font-size:7px;white-space:nowrap}
  #mini .mini-name{font-size:16px}
  #mini .mini-acts{gap:4px;align-items:center}
  #mini .mab{padding:4px 7px;font-size:7px}
  #mini .profile-link{width:25px;height:25px}
}

@media(max-width:760px){
  #cloud-guide{top:112px;right:9px;width:126px}
  body.graybox-active #w-prompt{width:calc(100% - 154px)}
  #cloud-utilities{left:50%;right:auto;bottom:calc(9px + env(safe-area-inset-bottom));transform:translateX(-50%)}
  body[data-shell-mode="world"][data-path] #privacy-settings:not(.is-mini-privacy){left:10px!important;right:auto!important;bottom:10px!important}
  #mini{width:calc(100vw - 12px)}
  #mini .mini-bar{padding:6px 7px 8px;overflow-x:auto;scrollbar-width:none}
  #mini .mini-bar::-webkit-scrollbar{display:none}
  #mini .mini-role{max-width:126px}
}

/* Device home keeps the header clear on narrow screens; Cloud and path privacy
   controls remain available in their established locations. */
@media(max-width:720px){
  body[data-shell-mode="directory"]:not([data-path]) #privacy-settings{
    display:none!important;
  }
}