/* Browser-only layout layer. Original CAD behavior and in-game shell are preserved. */
body.dit-browser .side-navigation + .flex-1.overflow-auto { min-width:0; min-height:0; max-width:100%; }
body.dit-browser :is(.flex,.grid) > :is(.flex-1,.min-w-0) { min-width:0; }
body.dit-browser [role="dialog"] { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; }
body.dit-browser :is(.overflow-hidden,.overflow-x-auto):has(> table) { overflow-x:auto; max-width:100%; }
body.dit-browser table :is(button,a) { flex-shrink:0; }
body.dit-browser [role="tablist"] { max-width:100%; overflow-x:auto; justify-content:flex-start; }
body.dit-browser [role="tab"] { flex-shrink:0; }
body.dit-browser .fixed.right-0.top-0[class~="w-[520px]"] { width:min(520px,100vw); }
body.dit-browser .fixed.right-5.bottom-12.w-80 { width:min(20rem,calc(100vw - 2rem)); }

/* Dispatch needs a scrollable page when four fixed columns become two or one. */
@media (max-width:1400px) {
 body.dit-browser #dit-screen .h-screen:has(> .grid.grid-cols-12.gap-4) { height:auto!important; min-height:100%; overflow:visible; }
 body.dit-browser .grid.grid-cols-12.gap-4.p-6.flex-1 { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); overflow:visible; flex:none; padding:16px; }
 body.dit-browser .grid.grid-cols-12.gap-4.p-6.flex-1 > .col-span-3 { grid-column:auto; min-width:0; min-height:280px; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) > .sticky > .flex { flex-wrap:wrap; gap:12px; padding-inline:16px; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) .max-w-xl.mx-8 { flex-basis:100%; order:3; max-width:none; margin-inline:0; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) .px-6.py-2 > .flex { flex-wrap:wrap; gap:8px; }
 body.dit-browser .col-span-3 > .mb-3 .flex.gap-2 { flex-wrap:wrap; }
 body.dit-browser .col-span-3 > .mb-3 .flex.gap-2 > button { flex:1 0 110px; height:auto; min-height:40px; white-space:normal; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) .px-6.py-2 button { flex-shrink:0; min-height:40px; height:auto; }
}
@media (max-width:1100px) {
 body.dit-browser #dit-screen .h-screen:has(> .flex-1.flex.overflow-hidden > .w-32) { height:auto!important; min-height:100%; overflow:visible; }
 body.dit-browser .flex-1.flex.overflow-hidden:has(> .w-32) { display:flex; flex-direction:column; overflow:visible; flex:none; }
 body.dit-browser .flex-1.flex.overflow-hidden:has(> .w-32) > .w-32 { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; width:100%; }
 body.dit-browser .flex-1.flex.overflow-hidden:has(> .w-32) > .w-32 > * { margin:0; min-width:0; }
 body.dit-browser .flex-1.flex.overflow-hidden:has(> .w-32) > :is(.flex-1,.w-80) { width:100%; flex:none; min-height:240px; overflow:visible; }
 body.dit-browser .h-screen > .px-4.py-2.flex.justify-between { flex-wrap:wrap; gap:12px; }
 body.dit-browser .h-screen > .px-4.py-2.flex.justify-between > .flex { flex-wrap:wrap; gap:12px; }
 body.dit-browser .overflow-x-auto.flex:has(> button.whitespace-nowrap) > button { flex-shrink:0; }
 body.dit-browser [class~="grid-cols-[1fr_380px]"] { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px) {
 /* Existing React toggle owns state; the collapsed rail becomes a top menu bar. */
 body.dit-browser #dit-screen .flex.h-screen:has(> .side-navigation) { height:100dvh!important; padding-top:56px; }
 body.dit-browser .side-navigation { position:fixed; inset:0 auto 0 0; width:min(320px,100vw)!important; height:100dvh; z-index:45; box-shadow:20px 0 60px #0009; }
 body.dit-browser .side-navigation > .header { height:56px; padding:8px 16px; padding-right:88px; flex-shrink:0; }
 body.dit-browser .side-navigation > .header img { max-height:36px; width:auto; }
 body.dit-browser .nav-collapse-toggle { position:absolute; top:6px; right:8px; transform:none; width:72px; height:44px; gap:4px; background:#101827; color:#d9e6f4; }
 body.dit-browser .nav-collapse-toggle::after { content:'Close'; font-size:12px; }
 body.dit-browser.nav-collapsed .side-navigation { width:100%!important; height:56px; bottom:auto; box-shadow:none; border-bottom:1px solid #ffffff26; }
 body.dit-browser.nav-collapsed .side-navigation > :not(.header):not(.nav-collapse-toggle) { display:none; }
 body.dit-browser.nav-collapsed .nav-collapse-toggle::after { content:'Menu'; }
 body.dit-browser .side-navigation .nav-item { min-height:44px; }
 body.dit-browser .side-navigation + .flex-1.overflow-auto { width:100%; }
 body.dit-browser .h-screen > .px-4.py-2.flex.justify-between :is(button,select) { min-height:44px; height:auto; flex-shrink:0; }
 body.dit-browser .h-screen > .px-4.py-2.flex.justify-between .border-l.pl-6.ml-4 { border-left:0; padding-left:0; margin-left:0; }
 body.dit-browser .flex-1.flex.overflow-hidden:has(> .w-32) > .w-80 button:not([role="checkbox"]) { min-height:44px; height:auto; }
 body.dit-browser .grid.grid-cols-12.gap-4.p-6.flex-1 { grid-template-columns:minmax(0,1fr); gap:16px; padding:12px; }
 body.dit-browser .grid.grid-cols-12.gap-4.p-6.flex-1 > .col-span-3 { min-height:180px; }
 body.dit-browser .grid.grid-cols-12.gap-4.p-6.flex-1 > .col-span-3:last-child { min-height:420px; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) > .sticky { position:static; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) h1 { font-size:18px; line-height:1.35; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) .px-6.py-2 { padding-inline:12px; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) .px-6.py-2 :is(button,.ml-4) { margin-left:0; }
 body.dit-browser .h-screen:has(> .grid.grid-cols-12.gap-4) .px-6.py-2 button { min-height:44px; }
 body.dit-browser :is(form,[role="dialog"]) :is(.grid-cols-2,.grid-cols-3) { grid-template-columns:minmax(0,1fr); }
 body.dit-browser .side-navigation + .flex-1 :is(.grid.grid-cols-2.gap-6,.grid.grid-cols-2.gap-8) { grid-template-columns:minmax(0,1fr); }
 body.dit-browser .side-navigation + .flex-1 .grid:is(.grid-cols-3,.grid-cols-4,.grid-cols-5):is(.gap-4,.gap-6) { grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }
 body.dit-browser .side-navigation + .flex-1 .grid > * { min-width:0; }
 body.dit-browser .side-navigation + .flex-1 .flex.items-center.justify-between { flex-wrap:wrap; gap:12px; }
 body.dit-browser .side-navigation + .flex-1 .flex.justify-between:has(> .flex.gap-2 > button) { flex-direction:column; align-items:stretch; gap:12px; }
 body.dit-browser .side-navigation + .flex-1 .flex.justify-between:has(> .flex.gap-2 > button) > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
 body.dit-browser .side-navigation + .flex-1 .flex.items-center.gap-3.mb-2 { flex-wrap:wrap; }
 body.dit-browser .side-navigation + .flex-1 .flex.items-center.gap-3.mb-2 > .text-xs { flex-shrink:0; white-space:nowrap; }
 body.dit-browser .side-navigation + .flex-1 .flex.gap-2:has(> button):not([role="tablist"]) { flex-wrap:wrap; }
 body.dit-browser .side-navigation + .flex-1 .flex.gap-2 > button:not([role="checkbox"]):not([role="switch"]) { min-height:44px; height:auto; flex-shrink:0; max-width:100%; white-space:normal; }
 body.dit-browser .side-navigation + .flex-1 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select,[role="combobox"]) { font-size:16px; min-width:0; max-width:100%; }
 body.dit-browser .side-navigation + .flex-1 .flex.flex-wrap:has(> button) > button { min-height:44px; height:auto; flex-shrink:0; white-space:normal; }
 body.dit-browser .side-navigation + .flex-1 button.w-full { min-height:44px; height:auto; white-space:normal; }
 body.dit-browser .grid.grid-cols-12:is(.gap-6,.gap-8) { grid-template-columns:minmax(0,1fr); }
 body.dit-browser .grid.grid-cols-12:is(.gap-6,.gap-8) > * { grid-column:1/-1; min-width:0; }
 body.dit-browser .side-navigation + .flex-1 > :is(.p-6,.p-8) { padding:16px; }
 body.dit-browser :is(form,[role="dialog"]) .flex:has(> button) { flex-wrap:wrap; gap:8px; }
 body.dit-browser :is(form,[role="dialog"]) button:not([role="checkbox"]):not([role="switch"]):not(.absolute) { min-height:44px; height:auto; white-space:normal; }
 body.dit-browser :is(form,[role="dialog"]) :is(input,select,textarea,[role="combobox"]) { min-width:0; max-width:100%; font-size:16px; }
 body.dit-browser .fixed.inset-0.flex.items-center.justify-center { padding:12px; }
 body.dit-browser .fixed.inset-0.flex.items-center.justify-center > .w-full { max-height:calc(100dvh - 24px); overflow-y:auto; }
 body.dit-browser .fixed.inset-0.flex.items-center.justify-center button:not([role="checkbox"]):not([role="switch"]) { min-height:44px; min-width:44px; height:auto; }
 body.dit-browser .fixed.inset-0.flex.items-center.justify-center input { font-size:16px; min-height:44px; }
 body.dit-browser .station-pa { padding:16px; }
 body.dit-browser .pa-heading { flex-wrap:wrap; }
 body.dit-browser .pa-panel { padding:14px; min-width:0; }
 body.dit-browser .pa-station { min-width:0; flex-basis:100%; }
 body.dit-browser .pa-builder-row :is(input,select) { min-width:0; flex-basis:100%; }
 body.dit-browser .pa-button { min-height:44px; white-space:normal; }
 body.dit-browser .pa-compose-footer > button { flex:1 1 130px; }
 body.dit-browser .pa-history article { flex-wrap:wrap; gap:12px; }
 body.dit-browser .pa-history-actions { align-items:flex-start; }
 body.dit-browser .pa-text-meta { flex-wrap:wrap; gap:8px; }
 body.dit-browser .live-map-page { height:auto; min-height:100%; }
 body.dit-browser .live-map-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(360px,60dvh); flex:none; }
 body.dit-browser .live-map-body > aside { max-height:220px; overflow-y:auto; }
 body.dit-browser .unit-map { min-height:360px; }
}