/* Studio materials: smoked glass, machined edges, quiet directional light.
   Reflections remain beneath text. Pointer lighting has no idle animation. */
:root{--material-edge:#14222c26;--material-fill:#ffffff20;--material-shine:#ffffff78;--material-shadow:#16273110;--material-icon:#304854;--material-accent:#14795b}
html.dark{--material-edge:#ffffff20;--material-fill:#0c111a26;--material-shine:#ffffff20;--material-shadow:#00000038;--material-icon:#c9d4df;--material-accent:#80d5b9}
html[data-palette="auto"] body{background-image:radial-gradient(ellipse 85% 60% at 65% -20%,#5a728e26,transparent 70%),radial-gradient(ellipse 60% 80% at 105% 95%,#254d4919,transparent 75%);background-size:auto}
html.dark[data-palette="auto"] body{background-color:#10151d}
html:not(.dark)[data-palette="auto"] body{background-color:#e9edf0}
.rail{width:304px;flex-basis:304px;margin:14px;border:1px solid var(--material-edge);border-radius:22px;padding:18px 14px;max-height:calc(100vh - 28px);gap:9px;background:linear-gradient(150deg,#ffffff0e,transparent 50%),color-mix(in srgb,var(--tile) 65%,transparent);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 var(--material-shine),0 24px 55px var(--material-shadow)}
.navsec{position:relative}.nav-copy{flex:1;min-width:0;text-align:left;display:grid;gap:5px}.nav-copy strong{font-family:inherit;font-size:16px;line-height:1.2;font-weight:650;letter-spacing:-.2px}.nav-copy small{font-size:11.5px;line-height:1.3;color:var(--muted);font-weight:500}
.secbtn{font-family:inherit;text-transform:none;letter-spacing:0;padding:13px 12px;min-height:68px;gap:12px;overflow:hidden;border-radius:14px}
.nav-face,.friendly-face{display:inline-flex;align-items:center;justify-content:center;width:39px;height:43px;flex-shrink:0;color:var(--material-icon);background:none;border:0;box-shadow:none}
.secbtn .chev{width:15px;height:15px;opacity:.65}.nav-face svg{width:25px;height:25px;stroke-width:1.5}.friendly-face{width:44px;height:44px;border:1px solid var(--material-edge);border-radius:12px;background:linear-gradient(145deg,var(--material-shine),transparent 55%),var(--material-fill);box-shadow:inset 0 1px 0 var(--material-shine),0 3px 8px var(--material-shadow)}.friendly-face svg{width:25px;height:25px;stroke-width:1.4}
.seclist{border-left:1px solid var(--material-edge);margin:9px 0 10px 30px;padding-left:12px;gap:6px}.navlink{min-height:46px;font-size:14px;border-radius:10px;padding:8px 10px;white-space:normal}.navlink .nl{white-space:normal;line-height:1.3}.navlink svg{width:20px;height:20px;padding:0;background:none;box-shadow:none;color:var(--material-icon);stroke-width:1.5}
/* One continuous surface and an edge bevel, rather than stacked plastic lenses. */
:where(.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,.friendly-mobile-menu,#gate .genie-voice-toolbar button,#gate .welcome-primary,#cardGateModal .payment-primary,#bubble){--glass-x:28%;--glass-y:0%;--glass-angle:120deg;--material-control:var(--material-fill);background:radial-gradient(ellipse 42% 110% at var(--glass-x) var(--glass-y),var(--material-shine),transparent 72%),linear-gradient(180deg,#ffffff0d,transparent 45%,#00000008),var(--material-control);color:var(--ink);border:1px solid var(--material-edge);box-shadow:inset 0 1px 0 var(--material-shine),inset 0 -1px 0 #00000020,0 2px 4px var(--material-shadow),0 8px 22px var(--material-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
/* Override legacy component fills without changing their layout or click handlers. */
.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,.friendly-mobile-menu{position:relative;background:radial-gradient(ellipse 42% 110% at var(--glass-x) var(--glass-y),var(--material-shine),transparent 72%),linear-gradient(180deg,#ffffff0d,transparent 45%,#00000008),var(--material-control);border-color:var(--material-edge);color:var(--ink);box-shadow:inset 0 1px 0 var(--material-shine),inset 0 -1px 0 #00000020,0 2px 4px var(--material-shadow),0 8px 22px var(--material-shadow)}
#view button{min-height:46px;border-radius:12px}#rail .navlink:not(.active){background:transparent;box-shadow:none;border-color:transparent}#rail .secbtn.open,#rail .navlink.active{--material-control:color-mix(in srgb,var(--material-accent) 10%,var(--material-fill));border-color:color-mix(in srgb,var(--material-accent) 45%,var(--material-edge))}#rail .navlink.active{box-shadow:inset 2px 0 var(--material-accent),inset 0 1px var(--material-shine);font-weight:650}#rail .secbtn.open .nav-face{color:var(--material-accent)}
#view button.on,.friendly-primary,#gate .welcome-primary,#cardGateModal .payment-primary,#panel button.on{background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),#ffffff45,transparent 65%),linear-gradient(180deg,#168363e8,#08513de8)!important;color:#fff!important;border:1px solid #9bd6b977!important;box-shadow:inset 0 1px 0 #dbfff075,inset 0 -2px 2px #002c2b66,0 3px 4px #0003,0 8px 18px #08513d20!important;text-shadow:0 1px 2px #00332480}
#gate .welcome-start{outline:1px solid #e6c47d90;outline-offset:3px}
#view .tile,#view .card{border-radius:16px;border-color:var(--material-edge);background:linear-gradient(145deg,#ffffff08,transparent 55%),color-mix(in srgb,var(--tile) 78%,transparent);box-shadow:inset 0 1px 0 var(--material-shine),0 12px 32px var(--material-shadow)}
.friendly-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0 30px}
#view button.friendly-card{padding:25px!important;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:220px!important;border-radius:20px;background:radial-gradient(ellipse 60% 90% at var(--glass-x) var(--glass-y),var(--material-shine),transparent 75%),linear-gradient(150deg,#ffffff07,transparent 55%),var(--material-fill);box-shadow:inset 0 1px 0 var(--material-shine),inset 0 -1px 0 #0003,0 3px 5px var(--material-shadow),0 14px 32px var(--material-shadow);overflow:hidden}
.friendly-card strong{font-size:21px;line-height:1.25;letter-spacing:-.5px;font-weight:650}.friendly-card p{color:var(--muted);margin:0;line-height:1.6;font-size:14px}.friendly-card>span:last-child{margin-top:auto;font-size:13px;font-weight:650;color:var(--material-accent);display:flex;align-items:center;gap:10px}.friendly-card>span:last-child svg{width:19px;height:19px;transition:transform .22s ease}.friendly-card[data-glass-active]>span:last-child svg{transform:translateX(4px)}@media(prefers-reduced-motion:reduce){.friendly-card>span:last-child svg{transition:none!important;transform:none!important}}
.friendly-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.friendly-tabs button{padding:11px 18px;font-weight:600}.friendly-resource{padding:22px;margin:14px 0}.friendly-resource pre{font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;color:var(--muted)}.friendly-editor{display:grid;gap:14px;padding:22px}.friendly-editor label{display:grid;gap:7px}.friendly-editor input,.friendly-editor textarea,.friendly-editor select{width:100%}.friendly-feedback{padding:12px;border-radius:12px;background:#16897018;margin:12px 0}.friendly-breadcrumb{font-size:13px;color:var(--muted);margin-bottom:12px}
#bubble,html.dark #bubble{border-radius:18px;color:var(--ink);background:radial-gradient(ellipse at var(--glass-x) var(--glass-y),var(--material-shine),transparent 70%),var(--material-fill);border-color:var(--material-edge);box-shadow:inset 0 1px 0 var(--material-shine),0 10px 24px var(--material-shadow)}
:where(.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,.friendly-mobile-menu,#gate .welcome-primary,#cardGateModal .payment-primary,#bubble):focus-visible{outline:3px solid var(--signal,#8ee1d6);outline-offset:4px}
:where(#view,#gate,#cardGateModal,#panel) button:disabled{opacity:.55;transform:none!important;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){:is(.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,.friendly-mobile-menu,#gate .welcome-primary,#cardGateModal .payment-primary,#bubble)[data-glass-active]:not(:disabled){transform:perspective(900px) translateY(-2px) rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg));border-color:color-mix(in srgb,var(--material-icon) 45%,transparent);box-shadow:inset 0 1px 0 var(--material-shine),inset 0 -1px 0 #0003,0 4px 10px var(--material-shadow),0 16px 32px var(--material-shadow)}:is(.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,#gate .welcome-primary,#cardGateModal .payment-primary,#bubble):active:not(:disabled){transform:translateY(1px) scale(.99)}}
.friendly-mobile-menu{display:none}
@media(max-width:860px){.friendly-mobile-menu{display:block;margin:10px 16px;padding:13px 18px;align-self:stretch;text-align:left;font-size:17px;border-radius:12px}.rail{display:none;width:calc(100% - 24px);flex-basis:auto;flex-direction:column;margin:12px;max-height:72vh;overflow-y:auto;overflow-x:hidden}.rail.friendly-mobile-open{display:flex}.rail .brand{display:none!important}.rail .navsec{display:flex;flex-direction:column;min-width:0;align-items:stretch}.rail .secbtn{display:flex;min-height:64px}.rail .seclist{flex-direction:column;margin-left:26px}.rail .navlink{width:100%}.friendly-grid{grid-template-columns:1fr}.friendly-tabs{gap:8px}.friendly-tabs button{flex:1}#view button.friendly-card{min-height:210px!important}}
@media(prefers-reduced-motion:reduce){:is(.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,.friendly-mobile-menu,#gate .welcome-primary,#cardGateModal .payment-primary,#bubble){transition:none!important;transform:none!important}}
@media(forced-colors:active){:is(.secbtn,.navlink,#view button,#panel button,.topbar button,.site-language-button,.friendly-mobile-menu,#gate .welcome-primary,#cardGateModal .payment-primary,#bubble){background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none!important;backdrop-filter:none;text-shadow:none}.nav-face,.friendly-face{color:ButtonText}}

/* DOM replacement must not select a different browser scroll anchor. */
#view,#rail{overflow-anchor:none}

/* Keep the size switch visible while scrolling long navigation lists. */
#rail .rail-size-toggle{display:flex;align-items:center;justify-content:center;gap:9px;position:sticky;top:0;z-index:2;min-height:44px;flex-shrink:0;margin-bottom:4px;padding:10px 12px;border:1px solid var(--material-edge);border-radius:12px;background:var(--tile);color:var(--ink);font-size:12px;box-shadow:inset 0 1px var(--material-shine)}
#rail .rail-size-toggle svg{flex-shrink:0}
#rail :is(.rail-size-toggle,.secbtn,.navlink):focus-visible{outline:2px solid var(--material-accent);outline-offset:2px}
@media(min-width:861px){
 #rail.rail-compact{width:84px;flex:0 0 84px;padding:12px 8px;overflow-x:hidden}
 #rail.rail-compact .rail-size-toggle{width:100%;padding:10px}
 #rail.rail-compact .rail-size-toggle svg{transform:rotate(180deg)}
 #rail.rail-compact :is(.rail-size-toggle span,.brand,[data-workspace-logo-status],.nav-copy,.chev,.navlink>span){display:none!important}
 #rail.rail-compact .platform-brand{width:100%;min-height:0;padding:4px;border-radius:12px;margin:0 0 8px}
 #rail.rail-compact .platform-brand img{width:100%;max-width:52px;height:auto;min-height:0;object-fit:contain}
 #rail.rail-compact .navsec{width:100%;flex-shrink:0}
 #rail.rail-compact .secbtn{position:relative;justify-content:center;width:100%;min-height:52px;padding:4px;gap:0;border-radius:13px}
 #rail.rail-compact .secbtn.open:after{content:'';position:absolute;right:4px;top:23px;width:4px;height:4px;border-radius:50%;background:var(--material-accent)}
 #rail.rail-compact .nav-face{width:36px;height:36px}
 #rail.rail-compact .seclist{margin:5px 0 8px 3px;padding:0 0 0 3px;gap:3px}
 #rail.rail-compact .navlink{justify-content:center;min-height:44px;width:100%;padding:8px!important;gap:0}
 #rail.rail-compact .navlink svg{flex:0 0 20px;opacity:1}
 #rail.rail-compact .nav-sublist{padding-left:0!important;border-left:1px solid var(--material-edge)}
}
@media(max-width:860px){#rail .rail-size-toggle{display:none}}

/* Long connection and mission status labels must wrap on narrow screens. */
#view .pill{max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}

/* A local page finder and consistent location/help controls on every workspace page. */
.nav-finder{position:relative;margin:8px 0 14px;flex-shrink:0;min-width:0}.nav-find-label{display:grid;gap:7px;font-weight:650;font-size:14px}.nav-find-label input{width:100%;box-sizing:border-box;min-height:46px;padding:10px 38px 10px 12px;border-radius:12px;border:1px solid var(--reader-border,var(--grout));background:var(--reader-field,var(--porcelain));color:var(--reader-ink,var(--ink));font:inherit}.nav-find-clear{position:absolute;right:5px;top:27px;min-height:36px;width:32px;padding:0;font-size:22px;background:transparent;border:0;box-shadow:none}.nav-find-icon{display:none}.nav-find-status{font-size:13px;line-height:1.6;white-space:normal;margin:8px 0;color:var(--muted)}.nav-find-status:empty{display:none}.nav-find-results{display:grid;gap:8px;max-width:100%}.nav-find-results[hidden],.nav-find-clear[hidden]{display:none!important}.nav-search-result{width:100%;min-height:52px;text-align:left;padding:12px;border-radius:12px;display:grid;gap:6px;background:var(--tile);color:var(--ink);border:1px solid var(--grout);overflow-wrap:anywhere;white-space:normal}.nav-search-result strong{font-size:15px}.nav-search-result small{font-size:12px;color:var(--muted)}#rail.rail-searching .navsec{display:none!important}.workspace-wayfinding{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 26px;border-bottom:1px solid var(--grout);background:var(--reader-panel,var(--tile));color:var(--reader-ink,var(--ink))}.wayfinding-path,.wayfinding-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.wayfinding-current{font-size:14px;line-height:1.5;overflow-wrap:anywhere}.workspace-wayfinding button{min-height:42px;border:1px solid var(--grout);border-radius:10px;padding:8px 12px;background:var(--porcelain);color:var(--ink);font-size:14px;white-space:normal}.workspace-wayfinding button[hidden]{display:none!important}
@media(min-width:861px){#rail.rail-compact .nav-finder{width:100%}#rail.rail-compact .nav-finder :is(.nav-find-label,.nav-find-clear,.nav-find-status,.nav-find-results){display:none!important}#rail.rail-compact .nav-find-icon{display:grid;place-items:center;min-height:44px;width:100%;padding:8px}}
@media(max-width:860px){.workspace-wayfinding{padding:12px 16px}.wayfinding-tools{width:100%}.workspace-wayfinding button{min-height:44px}.nav-finder{margin-bottom:10px}}
