/* All new layout rules require the existing desktop mode AND desktop dimensions.
   Mobile, tablets below 960px and short landscape screens retain their layout. */
@media (min-width:960px) and (min-height:500px) {
 #app.desktop{max-width:2200px;}
 #app.desktop :is(.desktop-shell,.content-shell,.content){min-width:0;}
 #app.desktop .workers-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 #app.desktop .worker-card{min-width:0;}
 #app.desktop .fj-desktop-worker-value{width:38px!important;}
 #app.desktop .fj-desktop-worker-label{width:36px!important;}
 #app.desktop .fj-desktop-market-columns,
 #app.desktop .fj-desktop-market-columns>div,
 #app.desktop .fj-desktop-stock-columns,
 #app.desktop .fj-desktop-stock-columns>div,
 #app.desktop .fj-desktop-furnace-columns{display:contents;}
 /* The illustrations are 3:2. Keep the whole image in a bounded frame. */
 #app.desktop :is(.fj-artwork,.fj-section-art){display:grid;grid-template-columns:clamp(240px,24vw,360px) minmax(0,1fr);align-items:stretch;}
 #app.desktop :is(.fj-art-figure,.fj-section-art-figure){height:auto;aspect-ratio:3/2;min-width:0;align-self:start;}
 #app.desktop .fj-hut-hero .fj-art-figure,
 #app.desktop .fj-hearth-hero .fj-art-figure{height:auto;}
 #app.desktop .fj-hearth-hero .fj-art-figure{grid-row:1/3;}
 #app.desktop :is(.fj-art-image,.fj-section-art-image){object-fit:contain;object-position:center;}
 #app.desktop .fj-section-art-detail{display:flex;align-items:center;padding:18px;font-size:14px;}
 #app.desktop .fj-hearth-hero .fj-hearth-readout{grid-column:2;grid-row:1;}
 #app.desktop .fj-hearth-hero .fj-art-foot{grid-column:2;grid-row:2;}
 #app.desktop .content[data-desktop-tab=log]>.sec,
 #app.desktop .content[data-desktop-tab=hrac]>.sec{max-width:1400px;margin-inline:auto;}
}

@media (min-width:1280px) and (min-height:500px) {
 /* Use the space above the navigation for three compact status panels. */
 #app.desktop .fj-desktop-status{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
 #app.desktop .fj-desktop-metrics{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(180px,1fr);align-content:center;}
 #app.desktop .fj-desktop-metrics>.furnace-hud{grid-column:1;}
 #app.desktop .fj-desktop-metrics>div:nth-child(2){grid-column:1;}
 #app.desktop .fj-desktop-metrics>div:nth-child(3){grid-column:2;grid-row:1/3;border-top:0!important;border-left:1px solid var(--fj-edge);align-self:center;}
 #app.desktop .content{scrollbar-gutter:stable;}
 /* Independent columns keep the economy near the top even with a full stock. */
 #app.desktop .content[data-desktop-tab=storage]{padding:12px;}
 #app.desktop .content[data-desktop-tab=storage]>.fj-section-art{margin:0 0 12px;}
 #app.desktop .fj-desktop-stock-columns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:start;}
 #app.desktop .fj-desktop-stock-columns>div{display:block;min-width:0;}
 #app.desktop .fj-desktop-stock-columns .sec{margin:0 0 12px;}
 #app.desktop :is(.fj-material-grid,.fj-additive-stock-grid,.fj-glass-stock-grid){grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;}
 #app.desktop .fj-economy-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 /* Existing production groups and manual recipes expand without extra scrolling. */
 #app.desktop .fj-desktop-production-inputs{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:start;}
 #app.desktop .fj-desktop-production-inputs>div{display:contents;}
 #app.desktop .fj-desktop-production-inputs .sec{margin:10px 5px;}
 #app.desktop .fj-desktop-production-inputs .fj-material-heading{grid-template-columns:64px minmax(0,1fr);gap:8px;}
 #app.desktop .fj-desktop-production-inputs .fj-material-picture{width:64px;height:76px;}
 #app.desktop .fj-desktop-special-recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:stretch;}
 #app.desktop .fj-desktop-special-recipes>.sec-title,
 #app.desktop .fj-desktop-special-recipes>div:not(.fj-craft-card){grid-column:1/-1;}
 #app.desktop .fj-desktop-special-recipes>.fj-craft-card{margin:0!important;}
 #app.desktop .fj-desktop-specialists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 #app.desktop .fj-desktop-specialists>div:first-child{grid-column:1/-1;}
 #app.desktop .fj-desktop-specialists>div{min-width:0;margin:0!important;}
 /* The scroll container stays in normal flow; only the controls form columns. */
 #app.desktop .fj-desktop-furnace-columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-auto-rows:max-content;align-items:start;}
 #app.desktop .fj-desktop-furnace-controls{min-width:0;}
 #app.desktop .fj-desktop-furnace-notes{display:grid!important;grid-template-columns:minmax(0,1fr);}
 #app.desktop .fj-desktop-furnace-notes>.sec{min-width:0;border-right:0!important;}
 /* Purchases and supplies sit alongside contracts and sales. */
 #app.desktop .fj-desktop-market-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;align-items:start;}
 #app.desktop .fj-desktop-market-columns>div{display:block;min-width:0;}
 #app.desktop .fj-desktop-trade .fj-contract-active-list,
 #app.desktop .fj-desktop-trade .fj-contract-offer-list{grid-template-columns:minmax(0,1fr);}
 #app.desktop .fj-desktop-trade .fj-sale-row{grid-template-columns:64px minmax(0,1fr);}
 #app.desktop .fj-desktop-trade .fj-sale-row[data-raw=true]{grid-template-columns:minmax(0,1fr);}
 #app.desktop .fj-desktop-trade .fj-sale-actions{grid-column:1/-1;}
 #app.desktop .fj-desktop-trade .fj-market-controls{flex-direction:column;align-items:stretch;}
 #app.desktop .fj-desktop-trade .fj-market-filters{min-width:0;}
 #app.desktop .fj-desktop-trade .fj-contract-offer{grid-template-columns:minmax(0,1fr);}
 #app.desktop .fj-desktop-trade .fj-contract-offer>button{justify-self:start;}
 #app.desktop .content[data-desktop-tab=settings]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;align-content:start;}
 #app.desktop .content[data-desktop-tab=settings]>.fj-theme-control,
 #app.desktop .content[data-desktop-tab=settings]>.sec:last-child{grid-column:1/-1;}
 #app.desktop .fj-desktop-codex-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:12px;align-items:start;}
 #app.desktop .fj-desktop-codex-group>.fj-codex-row{margin:0!important;}
 #app.desktop .fj-desktop-codex-group>div:not(.fj-codex-row){grid-column:1/-1;}
}

@media (min-width:1600px) and (min-height:500px) {
 #app.desktop .tabs{width:180px;}
 #app.desktop .workers-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
 #app.desktop .parta-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
 #app.desktop .fj-desktop-specialists{grid-template-columns:repeat(4,minmax(0,1fr));}
 #app.desktop .fj-economy-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
 #app.desktop .fj-desktop-trade .fj-sale-row{grid-template-columns:64px minmax(0,1fr) minmax(200px,32%);}
 #app.desktop .fj-desktop-trade .fj-sale-row[data-raw=true]{grid-template-columns:minmax(0,1fr) minmax(200px,32%);}
 #app.desktop .fj-desktop-trade .fj-sale-actions{grid-column:auto;}
}

@media (min-width:2100px) and (min-height:500px) {
 #app.desktop .parta-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
 #app.desktop .workers-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
 #app.desktop .fj-desktop-supplies .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}