/* ========================================================================
   SAJIDMK — ORGANIC LIQUID-GLASS RIGHT DOCK, 2026-11-13
   Scoped to .sg-*; no other site sections or page structures are modified.
   This file loads AFTER all existing themes, retaining existing visuals.
   ======================================================================== */
:root{--sg-glass-alpha:0;--sg-surface-rgb:10,12,16;--sg-motion-speed:1.1;--sg-motion-amplitude:.7}
html[data-site-theme="titanium-matte"]{--sg-surface-rgb:52,54,59}
html[data-site-theme="desert-titanium"]{--sg-surface-rgb:49,42,37}
/* A background-only change; never set opacity on parent panels or child text. */
html[data-sg-glass="custom"] body :is(.section,.recruiter-bar,.footer-panel,.glass,.glass-clear,.glass-tight,
.vision-main-pane,.vision-identity,.vision-project-card,.vision-console-frame .term-window,
.real-world-feature,.client-case,.concept-card,.sajid-offer-card,.sajid-subscribe-card,
.edu-card,.degree-proof,.degree-proof-card,.cert-card,.tl-item,.tk-card,.bd-card,.case-card,
.sp-summary,.sp-incident,.geo-vault,.diag-console,.tk-panel,.vview-panel,.vgate-panel,.cmdk-panel,
.hero-client-teaser,.status-chip,.hero-bismillah),
html[data-sg-glass="custom"] body #topNav{
  background-color:rgba(var(--sg-surface-rgb),var(--sg-glass-alpha))!important;
}
/* Slower/softer decorative motion only — never alter dialogs, navigation or user input. */
html[data-sg-motion="on"] body :is(.status-chip .ping,.recruiter-label .ping,.tl-status .ping,.section-label .dot,
.scroll-scrub-hint span,.hero-photo-tag,.lab-dot--done,.lab-dot--doc,.cp-liquid i,.cp-liquid::after){
 animation-duration:calc(2.2s * var(--sg-motion-speed))!important;
}
html[data-sg-motion="off"] body :is(.status-chip .ping,.recruiter-label .ping,.tl-status .ping,.section-label .dot,
.scroll-scrub-hint span,.hero-photo-tag,.lab-dot--done,.lab-dot--doc,.cp-liquid i,.cp-liquid::after){animation:none!important}
html[data-sg-motion="on"] body .hero-photo-tag{animation-duration:calc(5s * var(--sg-motion-speed))!important}

/* The rail is visibly flush against the RIGHT VIEWPORT EDGE; SVG is the shape.
   All styling isolated from the previous large .fx-dock/.fx-panel CSS. */
.sg-dock{
 --sg-ti:#B8A99A;--sg-am:#A995C9;--sg-pt:#C9CED3;--sg-white:#F5F3ED;
 position:fixed;right:0;top:50%;transform:translateY(-50%);width:92px;height:356px;
 z-index:1150;color:var(--sg-white);font:500 12px/1.3 'Inter',system-ui,sans-serif;
 pointer-events:none;isolation:isolate;-webkit-text-stroke:0;
}
.sg-dock *, .sg-dock *::before,.sg-dock *::after{box-sizing:border-box}
.sg-dock :is(button,input){font-family:inherit;touch-action:manipulation}
.sg-dock button{appearance:none;-webkit-appearance:none;border:0;color:inherit;cursor:pointer;pointer-events:auto}
.sg-dock button:focus-visible,.sg-dock input:focus-visible{outline:2px solid var(--sg-am)!important;outline-offset:3px}
.sg-rail{position:absolute;top:0;right:0;width:92px;height:300px;pointer-events:none;
 transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
.sg-silhouette{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(-9px 7px 14px rgba(0,0,0,.28))}
.sg-silhouette path{fill:#090A0D;stroke:rgba(201,206,211,.07);stroke-width:.5}
.sg-controls{position:absolute;top:66px;right:1px;width:54px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
.sg-control{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:52px;min-height:53px;padding:0!important;margin:0!important;
 border-radius:13px;background:transparent!important;position:relative;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.sg-control:hover{transform:translateX(-3px)}
.sg-ring-wrap{position:relative;display:grid;place-items:center;width:42px;height:42px}
.sg-progress{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.sg-ring-track,.sg-ring-arc{fill:none;stroke-width:2.05}
.sg-ring-track{stroke:rgba(201,206,211,.19)}
.sg-ring-arc{stroke:var(--sg-ring-color);stroke-linecap:round;stroke-dasharray:106.814;
 stroke-dashoffset:106.814;transition:stroke-dashoffset .4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 1.4px currentColor)}
.sg-control--blur{--sg-ring-color:var(--sg-ti)}
.sg-control--opacity{--sg-ring-color:var(--sg-am)}
.sg-control--motion{--sg-ring-color:var(--sg-pt)}
.sg-icon{width:20px;height:20px;position:relative;flex:none;color:var(--sg-white)}
.sg-control .sg-icon{width:18px;height:18px;opacity:.92;transition:transform .28s ease,color .28s ease}
.sg-control:hover .sg-icon,.sg-control.is-selected .sg-icon{color:var(--sg-ring-color);transform:scale(1.06)}
.sg-ring-value{font-size:9px;line-height:12px;letter-spacing:.03em;color:#D7D4D0;font-weight:600;font-variant-numeric:tabular-nums}
.sg-settings{position:absolute;top:305px;right:5px;width:48px;height:48px;border-radius:50%!important;
 display:grid;place-items:center;background:#090A0D!important;box-shadow:0 6px 20px rgba(0,0,0,.38),inset 0 0 0 1px rgba(201,206,211,.16);
 transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.sg-settings .sg-icon{width:21px;height:21px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sg-settings:hover{transform:scale(1.07);box-shadow:0 8px 24px rgba(0,0,0,.43),inset 0 0 0 1px rgba(169,149,201,.38)}
.sg-settings:hover .sg-icon,.sg-dock[data-open="true"] .sg-settings .sg-icon{transform:rotate(42deg)}
.sg-collapse{position:absolute;right:5px;top:263px;width:28px;height:26px;border-radius:50% 0 0 50%!important;
 background:#090A0D!important;display:grid;place-items:center;color:#9D9CA0!important;opacity:.7;
 transition:opacity .2s ease,transform .3s ease}
.sg-collapse .sg-icon{width:13px;height:13px}
.sg-collapse:hover{opacity:1;transform:translateX(-3px)}
.sg-reopen{display:none;position:absolute;right:0;top:44%;width:34px;height:58px;border-radius:16px 0 0 16px!important;
 background:#090A0D!important;box-shadow:-5px 5px 20px rgba(0,0,0,.3);place-items:center}
.sg-reopen .sg-icon{width:17px;height:17px;color:var(--sg-pt)}
.sg-dock[data-collapsed="true"] .sg-rail,
.sg-dock[data-collapsed="true"] .sg-settings,
.sg-dock[data-collapsed="true"] .sg-collapse{opacity:0;transform:translateX(100px);pointer-events:none;visibility:hidden}
.sg-dock[data-collapsed="true"] .sg-reopen{display:grid}
.sg-dock[data-collapsed="true"]{width:34px;height:58px}

/* Flyout is detached from the dock, accessible, and never spills off screen. */
.sg-panel{position:absolute;right:calc(100% + 4px);top:50%;transform:translate(14px,-50%) scale(.97);transform-origin:100% 50%;
 width:302px;max-width:calc(100vw - 105px);max-height:min(650px,calc(100dvh - 24px));overflow-y:auto;overscroll-behavior:contain;
 padding:17px 18px 15px;background:linear-gradient(155deg,rgba(36,37,42,.97),rgba(9,10,13,.985))!important;
 border:1px solid rgba(201,206,211,.24);border-top-color:rgba(245,243,237,.45);border-radius:22px;
 box-shadow:0 22px 66px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
 -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
 opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .28s ease,visibility 0s linear .4s;
 color:#F5F3ED!important;text-align:left}
.sg-dock[data-open="true"] .sg-panel{transform:translate(0,-50%) scale(1);opacity:1;visibility:visible;pointer-events:auto;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .28s ease,visibility 0s}
.sg-panel :is(h2,p,span,label,output){text-shadow:none!important;color:inherit!important}
.sg-panel-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin:0 0 19px}
.sg-panel-header h2{font-size:22px!important;line-height:1.1!important;letter-spacing:-.035em;margin:5px 0 4px!important;color:#F5F3ED!important}
.sg-panel-header p{font-size:11px!important;margin:0!important;color:#B9B5BA!important;line-height:1.4!important}
.sg-eyebrow{font:600 9px/1 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#A995C9!important}
.sg-panel-close{width:29px;height:29px;display:grid;place-items:center;border-radius:50%!important;background:rgba(255,255,255,.065)!important;color:#F5F3ED!important;flex:none}
.sg-panel-close .sg-icon{width:15px;height:15px}
.sg-panel-close:hover{background:rgba(169,149,201,.22)!important}
.sg-setting-group{margin:0 0 18px}
.sg-setting-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.sg-setting-head label{font-weight:600;font-size:12px;letter-spacing:0;color:#F5F3ED!important}
.sg-setting-head output{font:600 11px/1.3 'IBM Plex Mono',monospace;color:#C9CED3!important}
.sg-setting-caption{font-size:10px;color:#B9B5BA;margin-bottom:11px}
.sg-range{--sg-fill:0%;--sg-accent:var(--sg-ti);appearance:none!important;-webkit-appearance:none!important;
 display:block;width:100%;height:6px;border:0!important;border-radius:20px;margin:0!important;cursor:pointer;
 background:linear-gradient(90deg,var(--sg-accent) 0 var(--sg-fill),rgba(201,206,211,.16) var(--sg-fill) 100%)!important;
 accent-color:var(--sg-accent)}
.sg-range--opacity{--sg-accent:var(--sg-am)}.sg-range--motion{--sg-accent:var(--sg-pt)}
.sg-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#F5F3ED;border:2px solid var(--sg-accent);border-radius:50%;width:19px;height:19px;box-shadow:0 2px 8px rgba(0,0,0,.34)}
.sg-range::-moz-range-thumb{background:#F5F3ED;border:2px solid var(--sg-accent);border-radius:50%;width:17px;height:17px;box-shadow:0 2px 8px rgba(0,0,0,.34)}
.sg-divider{height:1px;background:rgba(201,206,211,.17);margin:5px 0 15px}
.sg-pref-title{font-size:11px;color:#CAC3D2;font-weight:600;margin-bottom:10px}
.sg-original-prefs .fx-dots{display:flex!important;flex-direction:row!important;position:relative!important;gap:13px!important;align-items:center!important;margin:0!important;width:auto!important;max-width:none!important;padding:0!important}
.sg-original-prefs .fx-dots::after{display:none!important}
html body .sg-original-prefs .fx-dots .text-colour-dot{width:29px!important;height:29px!important;border-radius:50%!important;display:block!important;margin:0!important;opacity:1!important;transform:none!important;scale:1!important;box-shadow:none!important;position:relative!important;pointer-events:auto}
html body .sg-original-prefs .fx-dots .text-colour-dot[aria-pressed="true"]{outline:2px solid var(--sg-am);outline-offset:3px;box-shadow:0 0 10px rgba(169,149,201,.25)!important}
.sg-original-prefs{position:relative;min-height:79px}
.sg-original-prefs .fx-bold{position:absolute;right:0;bottom:0;display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:center;width:88px;min-height:35px;padding:5px 8px!important;
 border-radius:10px!important;border:1px solid rgba(201,206,211,.24)!important;background:rgba(255,255,255,.075)!important;color:#F5F3ED!important}
.sg-original-prefs .fx-bold[aria-pressed="true"]{background:#C9CED3!important;color:#090A0D!important}
.sg-original-prefs .fx-bold b{font-size:16px!important}.sg-original-prefs .fx-bold .fx-bold-txt{font-size:9px!important}
.sg-footer{border-top:1px solid rgba(201,206,211,.16);padding-top:12px;margin-top:14px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.sg-footer>span{font-size:9px;color:#B9B5BA!important}
.sg-reset{display:flex;align-items:center;gap:7px;padding:7px 9px!important;border-radius:9px!important;background:rgba(201,206,211,.08)!important;font-size:10px!important;color:#ECEAEC!important}
.sg-reset:hover{background:rgba(169,149,201,.18)!important}
.sg-reset .sg-icon{width:13px;height:13px}
@media(hover:none){.sg-control:hover,.sg-settings:hover,.sg-collapse:hover{transform:none}}
@media(max-width:700px){
 .sg-dock{width:77px;height:310px;right:max(0px,env(safe-area-inset-right,0px));top:50%}
 .sg-rail{width:77px;height:256px}.sg-silhouette{height:256px}
 .sg-controls{top:54px;right:0;width:47px;gap:4px}
 .sg-control{width:46px;min-height:46px}.sg-ring-wrap{width:36px;height:36px}
 .sg-control .sg-icon{width:16px;height:16px}.sg-ring-value{font-size:8px;line-height:10px}
 .sg-settings{top:261px;right:4px;width:43px;height:43px}
 .sg-collapse{top:226px;right:3px;width:26px;height:24px}
 .sg-panel{right:calc(100% - 7px);width:280px;max-width:calc(100vw - 83px);padding:14px 13px;max-height:calc(100dvh - 18px);border-radius:18px}
}
@media(max-width:390px){.sg-panel{max-width:calc(100vw - 78px)}.sg-panel-header h2{font-size:20px!important}}
@media(max-height:530px){.sg-dock{top:48%;transform:translateY(-48%) scale(.84);transform-origin:right center}.sg-panel{max-height:calc(100dvh - 10px)}}
@media(prefers-reduced-motion:reduce){
 .sg-dock *,.sg-dock *::before,.sg-dock *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Always honour OS reduced-motion, regardless of a saved slider value. */
@media(prefers-reduced-motion:reduce){
 html[data-sg-motion] body :is(.status-chip .ping,.recruiter-label .ping,.tl-status .ping,.section-label .dot,
 .scroll-scrub-hint span,.hero-photo-tag,.lab-dot--done,.lab-dot--doc,.cp-liquid i,.cp-liquid::after){animation:none!important}
}