/* Control surfaces. One set of materials, with distinct treatment for
   navigation, commercial actions and instrument selectors. Optical hotspots
   keep the geometry defined by their registered photographic or 3D scene. */
:root{
    --key-signal:#a5edce;--key-brass:#ebc28d;--key-ink:#102827;
    --key-text:#e2ede5;--key-line:#698783;--key-focus:#ffe0a6;
    --key-face:linear-gradient(180deg,#345050 0%,#283f42 31%,#203337 83%,#192b2e 100%);
    --key-face-lit:linear-gradient(180deg,#44605a 0%,#334d49 41%,#233e3b 100%);
    --key-bed:inset 0 1px 0 #bdd9c72e,inset 0 -2px 0 #07171999,0 1px 2px #020e115e;
    --key-down:inset 0 2px 4px #0415188c,inset 0 -1px 0 #bfdeb828;
}
body .mast #menu {gap:3px;font-size:clamp(12px,1.03vw,16px)}
body .mast #menu a {
    --route-accent:#a5dfc8;--route-icon:none;
    position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
    flex:none;gap:clamp(5px,.54vw,10px);min-height:42px;padding:6px clamp(9px,.85vw,17px);
    color:#e7eee5;font:600 clamp(12px,1.03vw,16px)/1.1 system-ui,sans-serif;text-decoration:none;white-space:nowrap;
    border:1px solid #627d779e;border-radius:3px;
    background:linear-gradient(180deg,#354d4ceb,#223539f2 44%,#15272be8);
    box-shadow:var(--key-bed);text-shadow:0 1px 1px #09181c;
    transition:color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
body .mast #menu a[data-route="39"]{
    --route-accent:#a1ead0;--route-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='m2 6 10-3 6 3v9l-10 3-6-3zm0 0 6 3 10-3M8 9v9m3-9v7m3-8v7M4 9v4'/%3E%3C/svg%3E");
}
body .mast #menu a[data-route="44"]{
    --route-accent:#e8c494;--route-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h14v12H3zM3 9h14M6 3v4m8-4v4M6 13h8m-3-2 3 2-3 2'/%3E%3C/svg%3E");
}
body .mast #menu a[data-route="45"]{
    --route-accent:#accfe7;--route-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='m16.6 3.5-3.5 3.6-2.3-2.3L14 1.9a4.9 4.9 0 0 0-6 6l-5.3 5.3a2.1 2.1 0 0 0 3 3l5.4-5.5a5 5 0 0 0 5.5-7.2Z'/%3E%3C/svg%3E");
}
body .mast #menu a[data-route="38"]{
    --route-accent:#decca1;--route-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 17V9l5-3v4l5-3v3h2l1-7h2v14zM5 13h2m2 0h2m2 0h2'/%3E%3C/svg%3E");
}
body .mast #menu a[data-route="48"]{
    --route-accent:#e2bda6;--route-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.45' stroke-linejoin='round'%3E%3Cpath d='M4 3h10l3 3v11H4zM13 3v4h4M7 9h6m-6 3h7m-7 2.7h4'/%3E%3C/svg%3E");
}
body .mast #menu a[data-route="49"]{
    --route-accent:#9fd3df;--route-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 2 3 4-2 2c1 3 3 5 6 6l2-2 4 3-2 3C9 18 2 11 2 5zM12 3c2 0 5 3 5 5m-5-2c1 0 2 1 2 2'/%3E%3C/svg%3E");
}
body .mast #menu a[data-route]::before{
    content:'';display:block;width:16px;height:16px;flex:none;
    background-color:var(--route-accent);opacity:.83;
    -webkit-mask:var(--route-icon) center/contain no-repeat;mask:var(--route-icon) center/contain no-repeat;
}
body .mast #menu a::after{
    content:'';position:absolute;left:10%;right:10%;bottom:2px;height:2px;pointer-events:none;
    background:var(--route-accent);transform:scaleX(.2);opacity:.23;transition:transform .19s ease,opacity .19s ease;
}
body .mast #menu a[aria-current]:not([aria-current=false]){
    color:#fff;border-color:var(--route-accent);background:linear-gradient(180deg,#314d49f5,#172c2df2);
    box-shadow:inset 0 1px 0 #cce5cc36,var(--key-down);
}
body .mast #menu a[aria-current]:not([aria-current=false])::after,
body .mast #menu a:focus-visible::after {opacity:.96;transform:scaleX(1)}
@media(hover:hover){
    body .mast #menu a:hover {color:#fff;border-color:var(--route-accent);background:var(--key-face-lit)}
    body .mast #menu a:hover::after {opacity:.9;transform:scaleX(1)}
}
body .mast #menu a:active{background:#203535;box-shadow:var(--key-down)}
body .mast #menu a:focus-visible{outline:2px solid var(--key-focus);outline-offset:2px}

body .mast :is(.hamb,.sound-pref,.map-switch){
    color:#e4efe8;background:var(--key-face);box-shadow:var(--key-bed);border:1px solid #6d8784;border-radius:3px;
    transition:color .14s,border-color .14s,box-shadow .14s;
}
body .mast .hamb[aria-expanded=true],body .mast .sound-pref[aria-pressed=true] {
    color:var(--key-signal);border-color:#85aaa0;
}
body .mast .hamb[aria-expanded=true],body .mast :is(.hamb,.sound-pref,.map-switch):active{box-shadow:var(--key-down)}
body .mast :is(.hamb,.sound-pref,.map-switch):focus-visible{outline:2px solid var(--key-focus);outline-offset:2px}
body .mast .mast-utilities>* {min-height:42px}
@media(min-width:831px) and (max-width:1100px){
    body .mast,body.home .mast{gap:clamp(8px,1.2vw,16px);padding-inline:clamp(16px,2.6vw,30px)}
    body .mast #menu {gap:2px}
    body .mast #menu a {min-height:40px;padding:6px clamp(7px,.88vw,11px);font-size:12px}
    body .mast #menu a[data-route]::before {width:13px;height:13px}
}
@media(min-width:831px) and (max-width:960px){
    body .mast #menu a[data-route]::before{display:none}
}
@media(max-width:830px){
    body .mast #menu.open {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px var(--g) 14px;
        max-height:calc(100svh - 65px);overflow:auto;overscroll-behavior:contain;
        background:linear-gradient(180deg,#0d2027fc,#11272afa);border-bottom:1px solid #658077}
    body .mast #menu a {justify-content:flex-start;gap:8px;min-height:47px;padding:8px 10px;font-size:13px}
    body .mast .hamb {min-height:42px;padding:4px 9px;font:600 12px/1 system-ui,sans-serif}
    body .mast .mast-utilities {gap:4px}
    body .mast .mast-utilities>* {min-width:40px;min-height:42px}
}
@media(max-width:360px){body .mast,body.home .mast {gap:5px;padding-inline:10px}body .mast #menu.open{padding-inline:10px}}

/* All of these are physical console keys or separate actions. The fan, optical
   lamp, door polygons and the container silhouettes deliberately aren't here. */
body :is(.hero-lens,.room-command,.live-door-switch,[data-fan-switch],
    .archive-open,.yard-pan,.view-selector a,.view-selector button,.bench-lane select,
    .rental-tools button,.hc-cinema,.orbit-tools button,.modal-tools button,
    .field-lightbox button,#archive-photo button,.journal-search button,.sf-apply)
{
    color:var(--key-text);border:1px solid var(--key-line);border-radius:3px;
    background:var(--key-face);box-shadow:var(--key-bed);
    transition:color .14s,border-color .14s,box-shadow .14s;
}
body :is(.hero-lens,.room-command,.live-door-switch,[data-fan-switch],
    .archive-open,.yard-pan,.view-selector a,.view-selector button,.rental-tools button,
    .hc-cinema,.orbit-tools button,.field-lightbox button,#archive-photo button,
    .journal-search button,.sf-apply):is([aria-pressed=true],[aria-expanded=true]){
    color:var(--key-signal);border-color:#8cb8a4;background:var(--key-face-lit);
    box-shadow:var(--key-down),inset 3px 0 var(--key-signal);
}
@media(hover:hover){
    body :is(.hero-lens,.room-command,.live-door-switch,[data-fan-switch],
        .archive-open,.yard-pan,.view-selector a,.view-selector button,.rental-tools button,
        .hc-cinema,.orbit-tools button,.field-lightbox button,#archive-photo button,
        .journal-search button,.sf-apply):not(:disabled):hover{
        color:#fff;border-color:#a3baaa;background:var(--key-face-lit)
    }
}
body :is(.hero-lens,.room-command,.live-door-switch,[data-fan-switch],
    .archive-open,.yard-pan,.view-selector a,.view-selector button,.rental-tools button,
    .hc-cinema,.orbit-tools button,.field-lightbox button,#archive-photo button,
    .journal-search button,.sf-apply):not(:disabled):active{box-shadow:var(--key-down)}

body :is(.action,.st-actions .st-action,.dispatch-desk .dd-action,.hc-primary,.stock-floor .sf-actions .source-model,.yard-catalog) {
    --act-top:#cfefde;--act-face:#addec8;--act-bottom:#8cbdab;--act-stroke:#91baab;
    border:1px solid var(--act-stroke);border-radius:3px;color:#102b26;text-shadow:none;
    background:linear-gradient(180deg,var(--act-top),var(--act-face) 48%,var(--act-bottom));
    box-shadow:inset 0 1px #fff9,inset 0 -2px #325c4938,0 2px 3px #0612164d;
    text-decoration:none;transition:border-color .13s,box-shadow .13s,filter .13s;
}
body :is(.st-service .st-actions .st-action,.dispatch-desk .dd-action,.stock-floor .sf-actions .source-model){
    --act-top:#f2dabb;--act-face:#dfc39c;--act-bottom:#c7a981;--act-stroke:#d2b48f;
}
body .yard-catalog b{color:#27534c}
@media(hover:hover){body :is(.action,.st-actions .st-action,.dispatch-desk .dd-action,.hc-primary,.stock-floor .sf-actions .source-model,.yard-catalog):hover{
    filter:brightness(1.08);border-color:#e8f3d9;box-shadow:inset 0 1px #fffb,inset 0 -2px #325c4938,0 2px 6px #071e2299
}}
body :is(.action,.st-actions .st-action,.dispatch-desk .dd-action,.hc-primary,.stock-floor .sf-actions .source-model,.yard-catalog):active {
    box-shadow:inset 0 2px 4px #244e4366,inset 0 -1px #ecfae59c
}

body :is(.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.st-select a,.dd-channels a,.sector-nav button){
    --selector-ink:#d5e5db;--selector-signal:#a7e9ce;
    color:var(--selector-ink);border-color:#607c76;background:linear-gradient(180deg,#243b3d,#172c30);
    box-shadow:inset 0 1px #c9decb1d,inset 0 -2px #07181d69;
    transition:border-color .14s,color .14s,box-shadow .14s;
}
body :is(.st-service .st-select a,.dd-channels a){--selector-signal:#eac792}
body .industries .sector-nav button {--selector-signal:#f1cf95;color:#e5eae2}
body :is(.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.st-select a,.dd-channels a,.sector-nav button):is([aria-pressed=true],[aria-current=true]){
    color:var(--selector-signal);background:linear-gradient(180deg,#1b3334,#28443f);
    border-color:#8aa99c;box-shadow:inset 0 2px 4px #04151885,inset 0 -2px var(--selector-signal);
}
@media(hover:hover){body :is(.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.st-select a,.dd-channels a,.sector-nav button):not(:disabled):hover{
    color:#effbf1;border-color:#adcfb8;background:linear-gradient(180deg,#344e4e,#233d3f)
}}
body :is(.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.st-select a,.dd-channels a,.sector-nav button):not(:disabled):active{
    color:var(--selector-signal);box-shadow:var(--key-down),inset 0 -2px var(--selector-signal)
}
body .hc-keys button:disabled,body .orbit-tools button:disabled,body .rental-tools button:disabled {
    color:#a9b8af;background:#1d2c2f;border-color:#4c5f5c;box-shadow:none;cursor:not-allowed;opacity:.59
}

/* Inputs are inset into the equipment panel; existing native indicators
   stay intact, including the select chevron and textarea resize affordance. */
body :is(.request form,.sf-filter,.jt-search,.bench-lane) :is(input:not([type=hidden]),textarea,select) {
    border-radius:2px;border-color:#69857f;box-shadow:inset 0 2px 4px #030f1370;
}
body :is(.request form,.sf-filter,.jt-search,.bench-lane) :is(input,textarea,select):focus-visible{
    outline:2px solid var(--key-focus);outline-offset:2px
}
body :is(.action,.st-actions .st-action,.dispatch-desk .dd-action,.hc-primary,.stock-floor .sf-actions .source-model,.yard-catalog,
    .hero-lens,.room-command,.live-door-switch,[data-fan-switch],.archive-open,.yard-pan,
    .view-selector a,.view-selector button,.rental-tools button,.hc-cinema,.orbit-tools button,.field-lightbox button,
    #archive-photo button,.journal-search button,.sf-apply,.nodes button,.sizes button,.hc-sizes button,
    .hc-keys button,.st-select a,.dd-channels a,.sector-nav button,.st-cut-label,
    .sf-actions .request-model,.st-hangar,.dd-copyline button,.story-back,.story-foot,.quiet,.ca-jump,
    .hc-archive summary,.rental-archive summary,.bench-legend a,.hc-mast [data-return],.sf-result a,
    .journal-reset,.service-links a):focus-visible {
    outline:2px solid var(--key-focus);outline-offset:2px;box-shadow:0 0 0 5px #172b2a;
}
@media(hover:hover){
    body :is(.sf-actions .request-model,.st-hangar,.quiet,.ca-jump,.story-back,.story-foot,.dd-copyline button,
        .bench-legend a,.sf-result a):hover{text-decoration:underline;text-underline-offset:.26em}
    .fan-plate:has(.fan-hit:hover) .fan-disc{filter:brightness(1.08)}
    .hangar-pin:hover i,.sector-pin:hover :is(b,i){color:#dcffe9}
}
/* Optical switches keep the exact silhouette. Never stretch the keyboard
   focus of the model labels into a rectangle over a photographic object. */
body .yard-hit-map a:focus-visible {outline:none;box-shadow:none}
body .yard-lamp:focus-visible {outline:2px solid #ffe4b4;outline-offset:-6px}
@media(prefers-reduced-motion:reduce){
    body .mast #menu a,body .mast #menu a::after,body .mast :is(.hamb,.sound-pref,.map-switch),
    body :is(.action,.st-action,.dd-action,.hc-primary,.source-model,.yard-catalog,.room-command,
        .live-door-switch,.hc-keys button,.dd-channels a,.st-select a){transition:none}
}
@media(forced-colors:active){
    body .mast #menu a,body :is(.action,.st-action,.dd-action,.hc-primary,.st-select a,.dd-channels a,.hc-keys button){
        border:1px solid ButtonText;color:ButtonText;background:ButtonFace;box-shadow:none
    }
    body .mast #menu a[aria-current],body :is(.st-select a,.dd-channels a,.hc-keys button)[aria-current=true],
    body .hc-keys button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-3px}
    body .mast #menu a[data-route]::before{background:ButtonText}
}

/* Cold laminated glass: the dark backing keeps etched labels legible over
   bright workshop steel. The small footprint keeps the backdrop local. */
@media not (forced-colors:active){
 :root{
  --key-face:linear-gradient(165deg,rgba(115,171,168,.39),rgba(22,53,62,.67) 33%,rgba(7,29,39,.77));
  --key-face-lit:linear-gradient(155deg,rgba(110,223,213,.45),rgba(22,69,78,.69) 37%,rgba(9,37,48,.81));
  --ice-edge:inset 0 1px #edfff947,inset 0 -1px #092532b0,0 2px 6px #00111940;
  --ice-halo:inset 0 1px #efffff9c,inset 0 -2px #94fff5b0,0 0 0 1px #81e9ea52,0 2px 12px #52e4eb42;
 }
 body .mast #menu a, body .mast :is(.sound-pref,.map-switch,.hamb){
  color:#f0f7f5;background:var(--key-face);border-color:#b7d8d46e;
  box-shadow:var(--ice-edge);text-shadow:0 1px 3px #00151d;
  -webkit-backdrop-filter:blur(8px) saturate(1.18);backdrop-filter:blur(8px) saturate(1.18);
 }
 body .mast #menu a[aria-current]:not([aria-current=false]){
  background:linear-gradient(155deg,#c1b28850,#284649a8 45%,#102c35c9);
  border-color:#eacda9b8;box-shadow:inset 0 1px #fff0ca61,0 1px 6px #07181d88;
 }
 body :is(.hero-lens,.room-command,.live-door-switch,[data-fan-switch],.archive-open,.yard-pan,.view-selector a,.view-selector button,.rental-tools button,.hc-cinema,.orbit-tools button,.modal-tools button,.field-lightbox button,#archive-photo button,.journal-search button,.sf-apply,.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.dd-channels a,.st-select a,.sector-nav button):not(:disabled){
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
 }
 body :is(.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.dd-channels a,.st-select a,.sector-nav button):not([aria-pressed=true],[aria-current=true],:disabled){background:var(--key-face)}
 body :is(.action,.st-actions .st-action,.dispatch-desk .dd-action,.hc-primary,.stock-floor .sf-actions .source-model,.yard-catalog){
  background:linear-gradient(158deg,color-mix(in srgb,var(--act-top) 94%,transparent),color-mix(in srgb,var(--act-face) 82%,transparent) 54%,color-mix(in srgb,var(--act-bottom) 91%,transparent));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
 }
 @media(hover:hover){
  body .mast #menu a:hover,body .mast :is(.sound-pref,.map-switch,.hamb):hover{
   background:var(--key-face-lit);border-color:#baf4e7;box-shadow:var(--ice-halo);color:white;
  }
  body .mast #menu a:hover::before{opacity:1;filter:drop-shadow(0 0 3px #92fff2aa)}
  body :is(.action,.st-actions .st-action,.dispatch-desk .dd-action,.hc-primary,.stock-floor .sf-actions .source-model,.yard-catalog,.hero-lens,.room-command,.live-door-switch,[data-fan-switch],.archive-open,.yard-pan,.view-selector a,.view-selector button,.rental-tools button,.hc-cinema,.orbit-tools button,.modal-tools button,.field-lightbox button,#archive-photo button,.journal-search button,.sf-apply,.nodes button,.sizes button,.hc-sizes button,.hc-keys button,.dd-channels a,.st-select a,.sector-nav button):not(:disabled):hover{
   box-shadow:var(--ice-halo);border-color:#c0f8f0;
  }
 }
 body .mast #menu a:active,body .mast :is(.sound-pref,.map-switch,.hamb):active{box-shadow:var(--key-down);border-color:#cbfffa}
}
.arsk-crystal-port{position:fixed;z-index:99999;pointer-events:none!important;width:0;height:0;overflow:visible;user-select:none}
.arsk-crystal-port>i{display:block;position:absolute;pointer-events:none;width:var(--cw);height:var(--ch);opacity:0;
 background:linear-gradient(120deg,#fff 0 34%,#b0fff8 35% 55%,#67d0e6 56% 77%,#c3fafe 78%);
 clip-path:polygon(51% 0,98% 39%,60% 100%,6% 63%);animation:arsk-crystal-out var(--life) ease-out var(--lag) both}
@keyframes arsk-crystal-out{
 0%{transform:translate(0,0) rotate(var(--r)) scale(.25);opacity:0}
 14%{opacity:.97}55%{opacity:.82}
 100%{transform:translate(var(--dx),var(--dy)) rotate(var(--end)) scale(.35);opacity:0}
}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.arsk-crystal-port{display:none}}
/* When the pointer returns to the selected route the brass witness line stays
   visible underneath the cool optical reflection. */
@media(hover:hover) and (forced-colors:none){
 body .mast #menu a[data-route]:hover{
  background:linear-gradient(150deg,#d6fff24d 0%,#599eab50 19%,#1e4757a8 44%,#082534c9 100%);
  border-color:#d0fff1;box-shadow:var(--ice-halo);
 }
}