/* Respond to CSS viewport dimensions, including Windows display scaling.
   Type and controls keep their normal size; layout supplies the extra room. */
body[data-design-page] .app-page :is(main,.card-scroll,.ar-card-scroll,.registry-table-area){min-width:0}
:is(#page-map,#page-archive-map) .map-preview{max-height:calc(100% - 72px);overflow-y:auto;overscroll-behavior:contain}

/* Keep room for rows even when the navigation, browser chrome or display
   scaling leaves little height. Let the page scroll instead of collapsing it. */
@media (min-width:701px){
 #page-registry main{overflow-y:auto!important;min-height:0;scrollbar-gutter:stable}
 #page-registry main>.registry-table-area{flex:1 0 400px;min-height:400px}
 #page-registry .registry-export-popover{max-height:calc(100dvh - var(--portal-scene-top,0px) - 110px)}
}

@media (min-width:701px) and (max-width:1600px), (min-width:701px) and (max-height:800px){
 #page-registry main{padding-inline:20px}
 #page-registry .registry-titlebar{padding:14px 0 10px;gap:14px}
 #page-registry .registry-titlebar p{margin-top:6px}
 #page-registry .registry-overview{padding-bottom:12px}
 #page-registry main>header.registry-command{padding:12px;gap:10px;margin-bottom:12px}
 #page-registry .registry-filters{gap:10px}
 #page-registry main>.registry-table-area>.registry-table-toolbar{padding:10px 14px}
 #registry-table tbody tr:not(.registry-empty-row)>td{height:74px;padding:8px 10px}
 #registry-table .registry-house-icon{width:64px;height:50px}
 #registry-table .registry-address{gap:10px;min-width:240px}
 #page-registry #pagination-footer{padding:8px 14px}
 #page-registry main>.registry-service-footer{padding:6px 0}

 #page-card .card-topbar{min-height:40px;height:auto;padding:10px 20px}
 #page-card .card-workspace>main.card-scroll{padding-inline:20px}
 #page-card .card-hero{padding:12px 16px;gap:14px;align-items:center}
 #page-card .card-hero-symbol{width:44px;height:48px;flex:none}
 #page-card #card-address-slot{margin:6px 0 8px}
 #page-card .card-scroll #card-metrics-row{gap:10px;margin:10px 0 12px}
 #page-card #card-metrics-row>.card-metric{padding:9px 12px;gap:5px}
 #page-card .dossier-overview{grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start}
 #page-card :is(.card-overview-main,.card-overview-side){gap:14px;align-self:start}
 #page-card .dossier-surface{padding:14px}
 #page-card .card-photo-panel{flex:none;min-height:0}
 #page-card #photo-gallery-new{flex:none;min-height:120px}
 #page-card #photo-gallery-new>[data-gallery-idx]{min-height:0;aspect-ratio:4/3}
 #page-card .card-condition-panel{flex:none;min-height:0;display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px 12px;text-align:left;align-items:center}
 #page-card .card-condition-panel .card-wear-label{grid-column:1/-1}
 #page-card .card-wear-visual{width:100px;height:100px;margin:0;grid-column:1;grid-row:2/4}
 #page-card .card-wear-caption{margin:0}
 #page-card .card-condition-caption{margin-block:8px}
 #page-card .dossier-systems{grid-template-columns:minmax(0,1fr) 250px;gap:14px}
 #page-card .card-system-selector{padding:14px}
 #page-card .card-inline-systems{margin-top:0}
 #page-card #design-card-summary{padding:18px}

 #page-archive .ar-root{padding-inline:20px;gap:12px}
 #page-archive .ar-top{padding-top:14px}
 #page-archive .ar-subtitle{margin-top:6px}
 #page-archive .ar-filter-surface{padding:12px}
 #page-archive .ar-table-caption{padding:12px 16px}
 #page-archive .ar-card-root{padding:0;gap:0}
 #page-archive .ar-card-topbar{padding-inline:20px}
 #page-archive .ar-card-scroll{padding-inline:20px}
 #page-archive .ar-detail{grid-template-columns:minmax(0,1fr) 260px;gap:14px}
 #page-archive :is(.ar-left,.ar-right,.ar-overview-photo-panel){padding:14px}
 #page-archive .ar-left-column{gap:14px}
 #page-archive .ar-building-metrics{margin-bottom:12px}
 #page-archive .ar-overview-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 #page-archive .ar-overview-gallery .ar-photo{min-height:0;aspect-ratio:4/3;max-height:none}
 #page-archive .ar-concl{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) 180px;gap:8px;margin-bottom:14px}
 #page-archive .ar-concl :is(.ar-wear-summary,.ar-term){grid-column:auto;grid-row:auto}
 #page-archive .ar-concl .ar-kv{padding:10px 12px}
 #page-archive .ar-system-facts>div{padding:10px 12px}
 #page-archive .ar-system-detail{grid-template-columns:minmax(0,1fr) minmax(240px,.85fr);gap:14px}

 :is(#page-map,#page-archive-map) .map-topbar{padding-inline:20px;gap:14px}
 :is(#page-map,#page-archive-map)>div{padding-inline:20px}
 :is(#page-map,#page-archive-map) .map-layers{width:260px}
 #page-statuses main>header{padding:16px 20px 12px}
 #page-statuses #statuses-dashboard-root{padding:16px 20px}
 #page-statuses .dash-kpi{padding:12px 16px}
 #page-statuses .dash-panel{padding:16px}
 #page-results .home-command{padding:14px 18px;gap:20px}
 #page-results .home-content{padding-bottom:120px}
}

/* A single filter row leaves room for more registry rows on laptops. */
@media (min-width:1200px) and (max-width:1600px), (min-width:1200px) and (max-height:800px){
 #page-registry main>header.registry-command{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);align-items:end}
}

@media (min-width:1001px) and (max-width:1600px){
 body[data-design-page]>.portal-sidebar{grid-template-columns:190px minmax(0,1fr) 190px;padding-inline:20px;gap:14px}
 body[data-design-page] .portal-sidebar .portal-nav .nav-blob{padding-inline:8px;gap:6px}
 #page-card .card-hero{flex-wrap:nowrap}
 #page-card .card-hero-actions{width:auto;flex:0 0 200px;flex-direction:column}
 #page-card .card-scroll #card-metrics-row{grid-template-columns:.85fr .85fr 1.15fr .85fr 1.6fr}
 #page-card #card-metrics-row>.card-metric:last-child{grid-column:auto}
}

/* Stack whole panels before squeezing their contents. */
@media (min-width:701px) and (max-width:1000px){
 #page-card .dossier-overview{grid-template-columns:minmax(0,1fr)}
 #page-card .card-overview-side{display:block}
 #page-card .card-condition-panel{display:grid;grid-template-columns:minmax(0,1fr) 100px;column-gap:16px;text-align:left;align-items:center}
 #page-card .card-condition-panel .card-wear-label{grid-column:1;grid-row:1}
 #page-card .card-condition-panel .card-wear-visual{grid-column:2;grid-row:1/4;margin:0}
 #page-card .card-scroll #card-metrics-row{grid-template-columns:repeat(3,minmax(0,1fr))}
 #page-card #card-metrics-row>.card-metric:last-child{grid-column:span 2}
 #page-archive .ar-card-hero{grid-template-columns:minmax(0,1fr)}
 #page-archive .ar-card-hero .ar-document-actions{grid-column:1;grid-row:auto;max-width:330px}
 #page-archive .ar-detail{grid-template-columns:minmax(0,1fr)}
 #page-archive .ar-right{grid-row:1;position:static}
 #page-archive .ar-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #page-archive .ar-right>h2{grid-column:1/-1;margin-bottom:4px}
 #page-archive .ar-right>.ar-sys{margin:0}
 #page-archive .ar-building-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
 #page-archive .ar-building-metrics>div:last-child{grid-column:auto}
}

@media (min-width:701px) and (max-width:1100px){
 :is(#page-map,#page-archive-map) .map-preview{width:min(420px,calc(100% - 310px))}
 :is(#page-map,#page-archive-map) .map-preview[data-kind=building] .map-preview-top{grid-template-columns:90px minmax(0,1fr);gap:12px}
 :is(#page-map,#page-archive-map) .map-preview[data-kind=building] .map-preview-photo{width:90px;height:110px}
}

@media (min-width:701px) and (max-height:650px){
 #page-results .home-page{overflow-y:auto}
 #page-results .home-content{flex:1 0 auto;min-height:430px;padding-bottom:18px}
 #page-results .home-hero{min-height:280px}
 #page-results .home-command{position:relative;inset:auto;margin-top:12px}
}

@media (max-width:700px){
 #page-card :is(.card-hero,.card-metric,.card-hero-actions),#page-archive :is(.ar-address-heading,.ar-building-metrics>div){min-width:0}
 #page-card .card-hero-actions{flex-wrap:wrap}
 #page-card .card-hero-actions button{max-width:100%}
 #page-card .card-hero h1,#page-archive .ar-building-metrics strong{overflow-wrap:anywhere}
 #page-archive .ar-system-detail{grid-template-columns:1fr}
 #page-registry .registry-export-popover{max-height:calc(100dvh - 200px)}
}