/* One centered desktop frame for the whole app. Keep a comfortable reading
   distance between panels even on ultrawide displays. Viewport width does not
   magnify the interface. Laptop/mobile compositions retain their own rules. */
@media(min-width:1101px){
  /* Home uses the same header identity as the other routes. Its former
     absolute sidebar logo must not cover navigation when the rail scrolls. */
  body.obs-app-rail-active:has(.cm-home-observatory) .obs-app-brand{visibility:visible}
  body.obs-app-rail-active .obs-app-shell .cm-observe-brand{display:none}
  body.obs-app-rail-active .obs-app-shell:has(.cm-home-observatory)>.obs-dlm-sidebar{padding-top:14px}
  body.obs-app-rail-active .obs-app-shell .obs-dlm-sidebar-nav button span{white-space:normal;min-width:0}

  body.obs-app-rail-active .obs-app-shell>.obs-dlm-sidebar{
    position:sticky;top:calc(var(--cm-header-height,76px) + 4px);
    align-self:start;height:auto;min-height:0!important;
    max-height:calc(100dvh - var(--cm-header-height,76px) - 16px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  }
}
@media(min-width:1600px){
  body.obs-app-rail-active{
    --cm-ui-scale:1;
    --cm-workspace-width:min(calc(100vw - 48px),1600px);
    --cm-sidebar-width:220px;
    --cm-header-height:calc(68px * var(--cm-ui-scale));
    --cm-reading-width:calc(1120px * var(--cm-ui-scale));
    --cm-workspace-gap:20px;
  }
  body.obs-app-rail-active #root,
  body.obs-app-rail-active #root.root-home-wide,
  body.obs-app-rail-active #topbar,
  body.obs-app-rail-active .obs-app-shell,
  body.obs-app-rail-active .obs-dlm-shell,
  body.obs-app-rail-active .obs-dlm-layout,
  body.obs-app-rail-active .obs-scenarios-shell,
  body.obs-app-rail-active .obs-dlm-topbar{
    width:100%;max-width:var(--cm-workspace-width)!important;
    margin-inline:auto!important;box-sizing:border-box;
  }
  body.obs-app-rail-active #root{padding-inline:0}
  body.obs-dlm-active #root,
  body.obs-dlm-active #view{height:auto!important;min-height:0!important}
  body.obs-app-rail-active #topbar{
    height:var(--cm-header-height)!important;min-height:var(--cm-header-height)!important;
    padding-inline:0!important;
  }
  body.obs-app-rail-active .obs-app-topbar{
    grid-template-columns:var(--cm-sidebar-width) var(--cm-workspace-gap) minmax(0,1fr) 12px max-content!important;
    height:var(--cm-header-height)!important;
  }
  body.obs-app-rail-active .obs-app-brand{height:var(--cm-header-height);gap:calc(10px * var(--cm-ui-scale));padding-inline:calc(12px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-brand strong{font-size:calc(13px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-brand small{font-size:calc(7px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-brand :is(.obs-logo-mark,.obs-dlm-brand-moon){width:calc(42px * var(--cm-ui-scale));height:calc(42px * var(--cm-ui-scale));flex-basis:calc(42px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-page-context b{font-size:calc(19px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-page-context>span{font-size:calc(8px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-top-actions{gap:calc(10px * var(--cm-ui-scale))}
  body.obs-app-rail-active #topbar :is(.cm-currency-control,.cm-language__option,.obs-dlm-menu,.obs-dlm-refresh){font-size:calc(12px * var(--cm-ui-scale));min-height:calc(36px * var(--cm-ui-scale))}
  body.obs-app-rail-active #topbar :is(.obs-live-pill,.obs-dlm-live){font-size:calc(10px * var(--cm-ui-scale))}

  /* Override route-specific two/three-column shells with the same rail tracks. */
  body.obs-app-rail-active #root .obs-app-shell{
    display:grid;grid-template-columns:var(--cm-sidebar-width) var(--cm-workspace-gap) minmax(0,1fr)!important;
    gap:0;align-items:start;min-height:0;padding:0 0 calc(24px * var(--cm-ui-scale));
  }
  body.obs-app-rail-active #root .obs-app-shell>.obs-app-content{grid-column:3;min-width:0;padding:0}
  body.obs-app-rail-active .obs-app-shell>.obs-dlm-sidebar{
    grid-column:1;position:sticky;top:calc(var(--cm-header-height) + 4px);
    align-self:start;height:auto;min-height:0!important;
    max-height:calc(100dvh - var(--cm-header-height) - 16px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding:calc(14px * var(--cm-ui-scale)) calc(8px * var(--cm-ui-scale));
  }
  body.obs-app-rail-active .obs-app-shell .obs-dlm-sidebar-nav button{
    min-height:calc(50px * var(--cm-ui-scale));height:auto;
    padding:calc(12px * var(--cm-ui-scale));gap:calc(12px * var(--cm-ui-scale));
  }
  body.obs-app-rail-active .obs-app-shell .obs-dlm-sidebar-nav button span{font-size:calc(14px * var(--cm-ui-scale))!important;line-height:1.4;white-space:normal}
  body.obs-app-rail-active .obs-app-shell .obs-dlm-sidebar-nav button svg{width:calc(20px * var(--cm-ui-scale));height:calc(20px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-guide-shortcuts>.cm-guide-shortcut{font-size:calc(13px * var(--cm-ui-scale));min-height:calc(44px * var(--cm-ui-scale));grid-template-columns:calc(22px * var(--cm-ui-scale)) minmax(0,1fr) 14px}
  body.obs-app-rail-active .obs-app-shell .obs-dlm-focus-card{max-width:100%;min-height:0}

  /* Release page caps, but keep report paragraphs and editing forms readable. */
  body.obs-app-rail-active .obs-app-content :is(.obs-shell,.cm-home-observatory,.mr-page,.cm-res,.ps-screen,.dc-screen,.cm-cc-simple,.cm-cc-result,.obs-gravity-portfolio-shell,.cmc-page){width:100%;max-width:none!important;box-sizing:border-box}
  body.obs-app-rail-active .obs-research-page :is(.thv2,.tws-root){width:100%;max-width:none!important}
  body.obs-app-rail-active .obs-app-content{font-size:calc(14px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(h1,.pw-heading h1){font-size:calc(36px * var(--cm-ui-scale));line-height:1.15}
  body.obs-app-rail-active .obs-app-content h2{font-size:calc(24px * var(--cm-ui-scale));line-height:1.25}
  body.obs-app-rail-active .obs-app-content h3{font-size:calc(18px * var(--cm-ui-scale));line-height:1.35}
  body.obs-app-rail-active .obs-app-content :is(p,li){font-size:calc(13px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(td,th){font-size:calc(13px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(button,input,select,textarea){font-size:calc(13px * var(--cm-ui-scale));line-height:1.35}
  body.obs-app-rail-active .obs-app-content small{font-size:calc(11px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(.obs-muted,.obs-caption,.cm-guide-small){font-size:calc(12px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(.obs-btn,.pw-button,.mr-button,.ep-btn,.rc-btn){min-height:calc(40px * var(--cm-ui-scale));padding:calc(10px * var(--cm-ui-scale)) calc(15px * var(--cm-ui-scale))}
  body.obs-app-rail-active :is(.obs-belief-context,.obs-reader-content,.thrl-report,.rp-action-plan>header p){max-width:min(100%,var(--cm-reading-width))}

  /* Data-heavy routes use the same density; diagrams keep their own geometry. */
  body.obs-app-rail-active .obs-app-content :is(.mr-kpis strong,.cmc-kpi strong,.cmc-evidence-reading strong,.rc-summary strong){font-size:calc(25px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(.mr-metrics strong,.rp-metrics b,.ep-position strong,.ep-preview strong,.cmc-scenario-kpi strong){font-size:calc(18px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(.mr-kpi-bottom,.rp-metrics span,.ep-position>div>span,.ep-editor label,.rc-screen label,.cm-res-filter label){font-size:calc(12px * var(--cm-ui-scale))}
  body.obs-app-rail-active .obs-app-content :is(.mr-kpis>article,.cmc-kpi,.rp-metrics article,.ep-card,.rc-panel){padding:calc(20px * var(--cm-ui-scale))}
  body.obs-app-rail-active.obs-deep-active #view>:is(.thv2,.tws-root,.dl,.ck,.hist){max-width:var(--cm-workspace-width)}

  /* Portfolio: give the table room while the TP editor stays proportionate. */
  body.obs-app-rail-active .pw-content{grid-template-columns:minmax(0,1fr) 440px;gap:var(--cm-workspace-gap)}
  body.obs-app-rail-active :is(.pw-holdings,.pw-tp){padding:16px}
  body.obs-app-rail-active .pw-summary{min-height:calc(112px * var(--cm-ui-scale));margin-bottom:var(--cm-workspace-gap)}
  body.obs-app-rail-active .pw-summary:after{width:calc(230px * var(--cm-ui-scale));height:calc(230px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-summary>.pw-wallet strong{font-size:calc(29px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-metric{gap:calc(14px * var(--cm-ui-scale));padding-inline:calc(16px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-metric>i{width:calc(48px * var(--cm-ui-scale));height:calc(48px * var(--cm-ui-scale));flex-basis:calc(48px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-metric strong{font-size:calc(21px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-metric span{font-size:calc(13px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-risk strong{font-size:calc(16px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-table :is(th,td){padding-inline:7px}
  body.obs-app-rail-active .pw-table th{height:calc(44px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-table td{height:calc(74px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-table .pw-qty{font-size:calc(14px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-asset{gap:calc(10px * var(--cm-ui-scale));min-width:calc(120px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-asset b{font-size:calc(15px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-asset small{max-width:calc(125px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-asset .obs-token-icon{width:calc(43px * var(--cm-ui-scale));height:calc(43px * var(--cm-ui-scale));flex-basis:calc(43px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-pnl-percent{font-size:calc(13px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-tp-buttons button{min-width:calc(35px * var(--cm-ui-scale));min-height:calc(35px * var(--cm-ui-scale));font-size:calc(11px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-table-heading{gap:calc(12px * var(--cm-ui-scale));flex-wrap:wrap}
  body.obs-app-rail-active .pw-search{width:calc(205px * var(--cm-ui-scale));height:calc(40px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-search input{height:100%;font-size:calc(12px * var(--cm-ui-scale))!important}
  body.obs-app-rail-active .pw-tranche{min-height:calc(88px * var(--cm-ui-scale));padding:calc(12px * var(--cm-ui-scale));gap:calc(10px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-tranche-title>i{width:calc(38px * var(--cm-ui-scale));height:calc(38px * var(--cm-ui-scale));flex-basis:calc(38px * var(--cm-ui-scale));font-size:calc(19px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-tranche-title b{font-size:calc(15px * var(--cm-ui-scale))}
  body.obs-app-rail-active :is(.pw-target,.pw-tranche-amount label,.pw-tranche-amount>span){font-size:calc(11px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-tranche-amount strong{font-size:calc(19px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-portfolio-workspace input:not([type="search"]){height:calc(36px * var(--cm-ui-scale));font-size:calc(13px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-tranche-amount label input{width:calc(40px * var(--cm-ui-scale))!important;height:calc(25px * var(--cm-ui-scale))!important;font-size:calc(12px * var(--cm-ui-scale))!important}
  body.obs-app-rail-active .pw-position-metrics .pw-metric{min-height:calc(70px * var(--cm-ui-scale));padding:calc(10px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-token-head h2{font-size:calc(32px * var(--cm-ui-scale))}
  body.obs-app-rail-active .pw-table-footer{min-height:calc(72px * var(--cm-ui-scale));font-size:calc(12px * var(--cm-ui-scale))}

  /* Home keeps its visual hierarchy at every desktop density. */
  body.obs-app-rail-active .cm-observe-hero{padding:calc(28px * var(--cm-ui-scale));gap:calc(24px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-hero h1{font-size:calc(42px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-hero-values>div>strong{font-size:calc(52px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-hero blockquote{font-size:calc(15px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-allocation-grid{grid-template-columns:minmax(0,calc(240px * var(--cm-ui-scale))) minmax(0,1fr);justify-content:center}
  body.obs-app-rail-active .cm-observe-panel{padding:calc(22px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-position{padding:calc(20px * var(--cm-ui-scale));min-height:calc(125px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-position :is(b,strong){font-size:calc(20px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-observe-legend{font-size:calc(13px * var(--cm-ui-scale))}

  /* Keep ancillary controls next to the centered workspace, including guides. */
  body.obs-app-rail-active #cm-cloud-root{position:relative!important;right:auto;bottom:auto;width:max-content;max-width:calc(100vw - 32px);margin:12px max(24px,calc((100vw - var(--cm-workspace-width))/2)) 16px auto}
  body.obs-app-rail-active .cm-guide-panel{top:var(--cm-header-height);right:max(24px,calc((100vw - var(--cm-workspace-width))/2));height:calc(100dvh - var(--cm-header-height));width:calc(384px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-guide-panel :is(p,button,select,label){font-size:calc(14px * var(--cm-ui-scale))}
  body.obs-app-rail-active .cm-guide-body h2{font-size:calc(28px * var(--cm-ui-scale))}
  body.obs-app-rail-active.cm-guide-open .obs-app-content{padding-right:calc(395px * var(--cm-ui-scale))!important}
}