/* Gunmetal panels (tech tree, loadout), matching the War Thunder-style modification window in
   mod-tree.css: dark grey panel, thin red title rule, flat framed cards, muted headers, gold for
   what you can buy now and green for what you own. Colours and frames only; sizes stay with the
   layout and phone rules. */
#ui .so-research-window.so-gm{--gm-bg:#1c1f23;--gm-panel:#24282d;--gm-line:#3d434a;--gm-text:#dfe3e8;--gm-dim:#8e959d;--gm-gold:#d9b13b;--gm-green:#5cb85c;
  background:var(--gm-bg);border:1px solid #474d55;border-radius:2px;box-shadow:0 18px 50px #000a;color:var(--gm-text)}
#ui .so-research-window.so-gm .so-modal-head{margin:0;padding:10px 14px;background:linear-gradient(#2f3338,#26292d);border-bottom:2px solid #9c2b26}
#ui .so-research-window.so-gm .so-modal-head h1{font:600 21px var(--font-ui);letter-spacing:.01em;color:#eef1f4;text-transform:none;-webkit-text-stroke:0;text-shadow:none;margin:0}
#ui .so-research-window.so-gm .so-modal-head .so-kicker{font:600 11px var(--font-ui);color:var(--gm-gold);letter-spacing:.04em}
#ui .so-research-window.so-gm .so-modal-head .so-kicker i{display:none}
#ui .so-research-window.so-gm .so-modal-head input{height:32px;background:#17191c;border:1px solid #4a5058;border-radius:2px;color:var(--gm-text);font:500 12px var(--font-ui)}
#ui .so-research-window.so-gm .so-modal-head input::placeholder{color:var(--gm-dim)}
#ui .so-research-window.so-gm .so-modal-head .so-icbtn{background:transparent;border:1px solid #555c64;border-radius:2px;color:#cfd4da;box-shadow:none}
#ui .so-research-window.so-gm .so-aircraft-filters{gap:2px;margin:10px 0 8px;border-bottom:1px solid var(--gm-line)}
#ui .so-research-window.so-gm .so-aircraft-filters button{padding:7px 14px;background:#26292d;border:1px solid var(--gm-line);border-bottom:0;border-radius:2px 2px 0 0;box-shadow:none;color:#b9bfc6;font:600 12px var(--font-ui);letter-spacing:.02em;text-shadow:none;-webkit-text-stroke:0}
#ui .so-research-window.so-gm .so-aircraft-filters button:hover{background:#30353b;color:#eef1f4}
#ui .so-research-window.so-gm .so-aircraft-filters button[aria-pressed=true]{background:#3a3f45;color:#fff;box-shadow:inset 0 -2px var(--gm-gold)}
#ui .so-research-window.so-gm .so-tree-help{color:var(--gm-dim);font:500 12px/1.45 var(--font-ui)}
#ui .so-research-window.so-gm .so-tree-scroll{background:#181a1d;border:1px solid #2e3237;scrollbar-color:#59606a #1c1f23}
#ui .so-research-window.so-gm .so-tree-column h2{background:var(--gm-panel);border:1px solid var(--gm-line);border-bottom-color:#59606a;border-radius:1px;font:600 13px var(--font-ui);letter-spacing:.02em;color:#e8ebef;text-shadow:none}
#ui .so-research-window.so-gm .so-tree-node{border:1px solid #4a5058;border-radius:2px;background:linear-gradient(#30353b,#25292e);box-shadow:inset 0 1px #ffffff0d}
#ui .so-research-window.so-gm .so-tree-node:hover{background:linear-gradient(#3a4047,#2c3036)}
#ui .so-research-window.so-gm .so-tree-node b{font:600 15px var(--font-ui);letter-spacing:.01em;color:#eef1f4;-webkit-text-stroke:0;text-shadow:0 1px 2px #000}
#ui .so-research-window.so-gm .so-tree-node small{font:600 11px var(--font-ui);color:var(--gm-dim)}
#ui .so-research-window.so-gm .so-tree-node em{background:#17191c;border:1px solid #3a3f45;color:#c9ced4;font-style:normal}
#ui .so-research-window.so-gm .so-tree-node.is-ready{border-color:var(--gm-gold);box-shadow:inset 0 0 0 1px #d9b13b33}
#ui .so-research-window.so-gm .so-tree-node.is-ready small{color:var(--gm-gold)}
#ui .so-research-window.so-gm .so-tree-node.is-owned{border-color:var(--gm-green);background:linear-gradient(#2e3a31,#232b26)}
#ui .so-research-window.so-gm .so-tree-node.is-owned small{color:#8fd18f}
#ui .so-research-window.so-gm .so-tree-node.is-selected{outline:2px solid #e8ebef;outline-offset:2px}
#ui .so-research-window.so-gm .so-tree-links path{stroke:#5d646c;opacity:.8}
#ui .so-research-window.so-gm .so-tree-links path.is-open{stroke:#5cb85c;opacity:.9}
#ui .so-research-window.so-gm .so-tree-links path.is-selected{stroke:var(--gm-gold);stroke-width:3}
#ui .so-research-window.so-gm .so-tree-detail{background:#202327;border:1px solid #33383e;border-radius:1px}
#ui .so-research-window.so-gm .so-tree-detail b{font:600 19px var(--font-ui);color:#eef1f4;-webkit-text-stroke:0;text-shadow:none}
#ui .so-research-window.so-gm .so-tree-detail p{color:#aab1b9}
#ui .so-research-window.so-gm .so-tree-detail small{color:var(--gm-gold)}
#ui .so-research-window.so-gm .so-tree-search-results button{background:#2a2e33;border:1px solid #4a5058;border-radius:2px;color:var(--gm-text)}

/* Collection cards: the aircraft on a dark plate, era as a muted tag, cost or ownership in the footer. */
#ui .so-research-window.so-gm .so-research-card,#ui .so-research-window.so-gm .so-research-card[data-rank]{background:radial-gradient(ellipse at 50% 38%,#3a4047,#202327 78%);border:1px solid #4a5058;border-radius:2px;box-shadow:inset 0 1px #ffffff0d}
#ui .so-research-window.so-gm .so-research-card:hover,#ui .so-research-window.so-gm .so-research-card.is-selected{border-color:var(--gm-gold);box-shadow:inset 0 0 0 1px #d9b13b55;background-color:transparent}
#ui .so-research-window.so-gm .so-research-card>b{background:linear-gradient(transparent,#17191ccc);font:600 17px/1.1 var(--font-ui);text-shadow:0 1px 2px #000;-webkit-text-stroke:0}
#ui .so-research-window.so-gm .so-research-card>span.so-card-rank{background:#17191c;border:1px solid #3a3f45;font:600 11px var(--font-ui);transform:none;color:#c9ced4}
#ui .so-research-window.so-gm .so-research-card>span.so-card-role{text-shadow:0 1px 2px #000;color:#c9ced4;font-weight:600}
#ui .so-research-window.so-gm .so-research-card>small{background:#202327;border-top:1px solid #33383e;color:var(--gm-gold);font-weight:600}
#ui .so-research-window.so-gm .so-research-card>small.is-owned{background:#232b26;color:#8fd18f}
#ui .so-research-window.so-gm .so-research-grid{scrollbar-color:#59606a #1c1f23}

/* Buttons inside gunmetal panels: flat steel, the main action in muted brass. */
#ui .so-research-window.so-gm .so-btn{background:linear-gradient(#3a3f45,#2d3136);border:1px solid #5a6169;border-radius:2px;box-shadow:none;color:#eef1f4;text-shadow:none;-webkit-text-stroke:0}
#ui .so-research-window.so-gm .so-btn:hover:not(:disabled){background:linear-gradient(#454b52,#353a40)}
#ui .so-research-window.so-gm .so-btn--primary{background:linear-gradient(#b48f2e,#8f7023);border-color:#d9b13b;color:#15171a}
#ui .so-research-window.so-gm .so-btn--primary:hover:not(:disabled){background:linear-gradient(#c49d35,#9c7a27)}
#ui .so-research-window.so-gm .so-btn:disabled{opacity:.45}

@media (pointer: coarse) and (max-height: 500px){
  #ui .so-research-window.so-gm .so-modal-head{padding:3px 8px}
  #ui .so-research-window.so-gm .so-modal-head input{height:26px}
  #ui .so-research-window.so-gm .so-modal-head .so-icbtn{width:28px;height:28px}
  #ui .so-research-window.so-gm .so-tree-column>h2{font-size:11px}
  #ui .so-research-window.so-gm .so-tree-node{box-shadow:none}
  #ui .so-research-window.so-gm .so-modal-head h1{font-size:17px}
  #ui .so-research-window.so-gm .so-tree-node b{font-size:12px}
  #ui .so-research-window.so-gm .so-tree-node small{font-size:9px}
}

/* Loadout editor: the station matrix as a gunmetal table; equipped cells framed green like installed
   modifications, the active weapon filter underlined in gold. */
#ui .so-hangar[data-tab=loadout]:not(.details-hidden) .so-aircard{background:#1c1f23fa;border:1px solid #474d55;border-radius:2px;box-shadow:0 18px 50px #000a}
#ui .so-hangar[data-tab=loadout] .armament-editor{color:#dfe3e8}
#ui .so-hangar[data-tab=loadout] .arm-title{font-weight:600;letter-spacing:.03em;color:#eef1f4}
#ui .so-hangar[data-tab=loadout] .arm-scroll{background:#181a1d;border:1px solid #3d434a;scrollbar-color:#59606a #1c1f23}
#ui .so-hangar[data-tab=loadout] .arm-matrix th,#ui .so-hangar[data-tab=loadout] .arm-matrix td{border-color:#111316}
#ui .so-hangar[data-tab=loadout] .arm-matrix thead th{background:linear-gradient(#2f3338,#26292d);color:#e8ebef;font-weight:600;border-bottom:1px solid #59606a}
#ui .so-hangar[data-tab=loadout] .arm-matrix th:first-child{background:#24282d;color:#e8ebef;font-weight:600}
#ui .so-hangar[data-tab=loadout] .arm-matrix small{color:#8e959d}
#ui .so-hangar[data-tab=loadout] .armament-editor .arm-cell{background:#26292d;border:1px solid #33383e}
#ui .so-hangar[data-tab=loadout] .armament-editor .arm-cell:hover{background:#30353b;border-color:#59606a}
#ui .so-hangar[data-tab=loadout] .armament-editor .arm-cell.is-on{background:linear-gradient(#2e3a31,#232b26);border:2px solid #5cb85c}
#ui .so-hangar[data-tab=loadout] .arm-cell svg{color:#c9ced4}
#ui .so-hangar[data-tab=loadout] .arm-incompatible{background:repeating-linear-gradient(135deg,#1c1f23,#1c1f23 5px,#202327 5px,#202327 6px)}
#ui .so-hangar[data-tab=loadout] .arm-empty{color:#6a717a}
#ui .so-hangar[data-tab=loadout] .armament-editor .arm-filter,#ui .so-hangar[data-tab=loadout] .armament-editor button{background:#2a2e33;border:1px solid #4a5058;border-radius:2px;color:#cfd4da}
#ui .so-hangar[data-tab=loadout] .armament-editor button:hover{background:#353a40}
#ui .so-hangar[data-tab=loadout] .armament-editor .arm-filter.is-on{background:#3a3f45;color:#fff;box-shadow:inset 0 -2px #d9b13b}
#ui .so-hangar[data-tab=loadout] .arm-detail{color:#aab1b9}
#ui .so-hangar[data-tab=loadout] .arm-detail .arm-mass{color:#8fd18f}

/* Hangar chrome: flat gunmetal tiles instead of the skewed cartoon buttons; icons sit inside their
   tile, labels in the UI face, the sortie button in muted brass. */
#ui .so-screen.so-hangar .so-lobby-button,#ui .so-screen.so-hangar .so-quick-actions button,#ui .so-screen.so-hangar .so-details-toggle{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 4px 5px;transform:none;
  background:linear-gradient(#30353b,#24282d);border:1px solid #4a5058;border-top-color:#5d646c;border-radius:2px;box-shadow:0 2px 8px #0006;
  color:#e8ebef;font:600 11px var(--font-ui);letter-spacing:.04em;text-shadow:none;-webkit-text-stroke:0;filter:none}
#ui .so-screen.so-hangar .so-lobby-left .so-lobby-button:first-child{background:linear-gradient(#30353b,#24282d);border-top-color:#d9b13b}
#ui .so-screen.so-hangar .so-lobby-button:hover,#ui .so-screen.so-hangar .so-quick-actions button:hover,#ui .so-screen.so-hangar .so-details-toggle:hover{transform:none;filter:none;background:linear-gradient(#3a4047,#2c3036);border-color:#6a717a}
#ui .so-screen.so-hangar .so-lobby-button:active,#ui .so-screen.so-hangar .so-quick-actions button:active,#ui .so-screen.so-hangar .so-details-toggle:active{transform:translateY(1px);box-shadow:0 1px 4px #0006}
#ui .so-screen.so-hangar .so-lobby-button>span,#ui .so-screen.so-hangar .so-quick-actions button>span,#ui .so-screen.so-hangar .so-details-toggle>span{transform:none;font:inherit;-webkit-text-stroke:0;text-shadow:none}
#ui .so-screen.so-hangar .so-lobby-button>svg.so-lobby-art,#ui .so-screen.so-hangar .so-quick-actions button>svg.so-lobby-art,#ui .so-screen.so-hangar .so-details-toggle>svg.so-lobby-art{
  position:static;width:26px;height:26px;transform:none;filter:saturate(.35) brightness(1.05)}
#ui .so-screen.so-hangar .so-lobby-button::before,#ui .so-screen.so-hangar .so-lobby-button::after,#ui .so-screen.so-hangar .so-quick-actions button::before,#ui .so-screen.so-hangar .so-quick-actions button::after{display:none}

#ui .so-screen.so-hangar .so-aircard{background:#1c1f23f2;border:1px solid #474d55;border-radius:2px;box-shadow:0 12px 36px #0009;color:#dfe3e8}
#ui .so-screen.so-hangar .so-tab{background:#24282d;border:0;border-bottom:1px solid #3d434a;color:#aab1b9;font:600 11px var(--font-ui);letter-spacing:.04em}
#ui .so-screen.so-hangar .so-tab.is-on{background:#2f3439;color:#fff;box-shadow:inset 0 -2px #d9b13b}

#ui .so-screen.so-hangar .so-lobby-identity h1{-webkit-text-stroke:0;text-shadow:0 2px 8px #000c;font-weight:600;letter-spacing:.01em}
#ui .so-screen.so-hangar .so-lobby-identity p{color:#c9ced4;text-shadow:0 1px 4px #000}

#ui .so-screen.so-hangar .so-cta-sum{transform:none;background:linear-gradient(#30353b,#24282d);border:1px solid #4a5058;border-radius:2px;box-shadow:0 4px 14px #0008;color:#dfe3e8}
#ui .so-screen.so-hangar .so-cta-sum:hover{background:linear-gradient(#3a4047,#2c3036)}
#ui .so-screen.so-hangar .so-cta-sum *{-webkit-text-stroke:0;text-shadow:none;transform:none}
#ui .so-screen.so-hangar .so-sortie{transform:none;background:linear-gradient(#c49d35,#9c7a27 60%,#8a6b21);border:1px solid #e3c25a;border-radius:2px;box-shadow:0 4px 14px #0008,inset 0 1px #fff3;color:#15171a;text-shadow:none}
#ui .so-screen.so-hangar .so-sortie:hover:not(:disabled){transform:none;background:linear-gradient(#d4ab3c,#a8832a 60%,#946f23)}
#ui .so-screen.so-hangar .so-sortie:active:not(:disabled){transform:translateY(1px)}
#ui .so-screen.so-hangar .so-sortie:disabled{background:linear-gradient(#3a3f45,#2d3136);border-color:#5a6169;color:#aab1b9}
#ui .so-screen.so-hangar .so-sortie-label{font:700 34px/1 var(--font-ui);letter-spacing:.06em;color:#15171a;-webkit-text-stroke:0;text-shadow:0 1px #fff4}
#ui .so-screen.so-hangar .so-sortie:disabled .so-sortie-label{color:#c9ced4;text-shadow:none}
#ui .so-screen.so-hangar .so-sortie-label--md{font-size:20px}
#ui .so-screen.so-hangar .so-sortie-label--sm{font-size:16px}

#ui .so-screen.so-hangar .so-lobby-progress{transform:none;background:linear-gradient(#30353b,#24282d);border:1px solid #4a5058;border-radius:2px;box-shadow:0 4px 14px #0008}
#ui .so-screen.so-hangar .so-lobby-progress *{-webkit-text-stroke:0;text-shadow:none}
#ui .so-screen.so-hangar .so-lobby-progress>svg{filter:saturate(.35);transform:none}
#ui .so-screen.so-hangar .so-season-entry{transform:none;background:linear-gradient(#30353b,#24282d);border:1px solid #4a5058;border-top-color:#8f6fd0;border-radius:2px;box-shadow:0 2px 8px #0006}
#ui .so-screen.so-hangar .so-top-r>button,#ui .so-screen.so-hangar .so-top-r>a{border-radius:2px;box-shadow:none;-webkit-text-stroke:0;text-shadow:none}
#ui .so-screen.so-hangar .so-top-r>.so-hangar-action,#ui .so-screen.so-hangar .so-top-r>[data-key=friends]{background:linear-gradient(#30353b,#24282d);border:1px solid #4a5058;border-radius:2px;color:#e8ebef;font:600 12px var(--font-ui);letter-spacing:.05em;min-height:38px;padding:0 12px}
#ui .so-screen.so-hangar .so-top-r>.so-hangar-action:hover{background:linear-gradient(#3a4047,#2c3036);border-color:#6a717a}
#ui .so-screen.so-hangar .so-top-r>.so-icbtn,#ui .so-screen.so-hangar .so-top-r>.so-rp,#ui .so-screen.so-hangar .so-home-collection{background:linear-gradient(#30353b,#24282d);border:1px solid #4a5058;border-radius:2px;box-shadow:none}
#ui .so-screen.so-hangar .so-mission-caret{background:#3a3f45;border-left:1px solid #4a5058;box-shadow:none;transform:none}
/* With the loadout matrix open, CLOSE moves to the free middle of the top bar instead of covering the
   left column. */
#ui .so-screen.so-hangar[data-tab=loadout]:not(.details-hidden) .so-details-toggle{top:22px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:auto;height:36px;flex-direction:row;gap:6px;padding:0 14px;z-index:11}
#ui .so-screen.so-hangar[data-tab=loadout]:not(.details-hidden) .so-details-toggle>svg.so-lobby-art{width:18px;height:18px}
#ui .so-screen.so-hangar[data-tab=loadout]:not(.details-hidden) .so-details-toggle:hover,#ui .so-screen.so-hangar[data-tab=loadout]:not(.details-hidden) .so-details-toggle:active{transform:translateX(-50%)}

/* Desktop windows 700-1000 px tall (laptop fullscreen): the fixed 34 px rail gap ran the last right-rail button
   (HOW TO PLAY) into the PLAY bar, worse while the privacy notice lifts that bar. The gap now shrinks to fit the
   space above the bottom row; --rail-h / --rail-floor mirror the button and bottom-row sizes in lobby.css.
   --rail-n is the right rail's button count (.so-quick-actions in menus.js): keep it in step when buttons change. */
@media (min-width:701px) and (min-height:701px){
  #ui .so-hangar{--rail-n:6;--rail-h:66px;--rail-floor:139px;--rail-gap-max:34px;--rail-lift:0px;
    --home-nav-gap:clamp(8px,calc((100vh - var(--home-nav-top) - var(--rail-floor) - var(--rail-lift) - var(--rail-n) * var(--rail-h)) / (var(--rail-n) - 1)),var(--rail-gap-max));
    --home-nav-step:calc(var(--rail-h) + var(--home-nav-gap))}
  body.privacy-notice-open #ui .so-hangar{--rail-lift:var(--privacy-notice-h,0px)}
  #ui .so-hangar .so-lobby-left,#ui .so-hangar .so-quick-actions{gap:var(--home-nav-gap)}
}
@media (min-width:701px) and (min-height:701px) and (max-width:1150px),(min-width:701px) and (min-height:701px) and (max-height:760px){
  #ui .so-hangar{--rail-h:58px;--rail-floor:126px;--rail-gap-max:27px}
}
@media (min-width:701px) and (max-width:760px) and (min-height:701px){
  #ui .so-hangar{--rail-h:54px;--rail-gap-max:24px}
}
/* Same windows: the aircraft detail card (Overview / Mission tabs) ended inside the bottom-left progress card. Its
   max-height now stops above that card and the privacy notice. Touch tablets keep mobile-layout.css's sheet. */
@media (min-width:1101px) and (min-height:701px),(pointer:fine) and (min-width:701px) and (min-height:701px){
  #ui .so-hangar{--aircard-top:201px}
  #ui .so-hangar .so-aircard{max-height:calc(100% - var(--aircard-top) - var(--rail-floor) - 26px - var(--rail-lift))}
}
@media (min-width:1101px) and (min-height:701px) and (max-width:1150px),(pointer:fine) and (min-width:701px) and (min-height:701px) and (max-width:1150px),(min-width:1101px) and (min-height:701px) and (max-height:760px),(pointer:fine) and (min-width:701px) and (min-height:701px) and (max-height:760px){
  #ui .so-hangar{--aircard-top:175px}
}
/* Short desktop windows (e.g. a portal's embedded frame, ~975x505): the side rails start just under the
   top bar and shrink so five buttons end above the PLAY bar instead of running into it. */
@media (min-width:701px) and (max-height:700px){
  #ui .so-hangar{--home-nav-top:84px;--home-nav-step:52px}
  #ui .so-hangar .so-lobby-left,#ui .so-hangar .so-quick-actions{gap:8px}
  #ui .so-screen.so-hangar .so-lobby-button,#ui .so-screen.so-hangar .so-quick-actions button,#ui .so-screen.so-hangar .so-details-toggle,#ui .so-screen.so-hangar.details-hidden .so-details-toggle{width:92px;height:44px;gap:1px;font-size:10px}
  #ui .so-screen.so-hangar .so-lobby-button>svg.so-lobby-art,#ui .so-screen.so-hangar .so-quick-actions button>svg.so-lobby-art,#ui .so-screen.so-hangar .so-details-toggle>svg.so-lobby-art{width:20px;height:20px}
}
@media (min-width:701px) and (max-height:480px){
  #ui .so-hangar{--home-nav-top:78px;--home-nav-step:44px}
  #ui .so-hangar .so-lobby-left,#ui .so-hangar .so-quick-actions{gap:6px}
  #ui .so-screen.so-hangar .so-lobby-button,#ui .so-screen.so-hangar .so-quick-actions button,#ui .so-screen.so-hangar .so-details-toggle,#ui .so-screen.so-hangar.details-hidden .so-details-toggle{height:38px;flex-direction:row;gap:5px}
  #ui .so-screen.so-hangar .so-lobby-button>svg.so-lobby-art,#ui .so-screen.so-hangar .so-quick-actions button>svg.so-lobby-art,#ui .so-screen.so-hangar .so-details-toggle>svg.so-lobby-art{width:16px;height:16px}
  #ui .so-hangar .so-cta{height:70px;bottom:14px}
  #ui .so-hangar .so-sortie,#ui .so-hangar .so-cta-sum{height:70px;min-height:70px}
}
/* Short desktop windows with the detail card open: there is no room for it above the bottom row, so the progress
   card steps aside, the detail card runs to the bottom and the PLAY bar starts right of it (card right edge 414px). */
@media (min-width:761px) and (max-height:700px) and (pointer:fine),(min-width:1101px) and (max-height:700px){
  #ui .so-hangar:not(.details-hidden):not([data-tab=loadout]) .so-lobby-progress{display:none}
  #ui .so-hangar:not(.details-hidden):not([data-tab=loadout]) .so-aircard{max-height:none;bottom:calc(14px + var(--rail-lift,0px))}
  body.privacy-notice-open #ui .so-hangar{--rail-lift:var(--privacy-notice-h,0px)}
  #ui .so-hangar:not(.details-hidden):not([data-tab=loadout]) .so-cta{width:calc(100% - 448px)}
}
/* The one-time privacy notice (js/core/privacy-notice.js) sits on the bottom edge; lift the hangar's bottom row above it. */
body.privacy-notice-open #ui .so-hangar .so-cta,body.privacy-notice-open #ui .so-hangar .so-lobby-progress,body.privacy-notice-open #ui .so-hangar .so-phone-nav{translate:0 calc(-1 * var(--privacy-notice-h,0px))}