/* D3 shared layout system (loaded last). One container, grid areas at >=1180, one-row toolbars,
   panels sized to content. Tile grids keep their F1 densities (tile-grid.css is not touched). */
:root{--cb-gutter:clamp(16px,2vw,24px);--cb-gap:10px;--cb-side:340px}

/* 1. container: fill the viewport minus the gutter, up to 1600px; header and search share it */
main{max-width:1600px;margin-inline:auto;padding-inline:var(--cb-gutter)}
header{padding-inline:var(--cb-gutter)}
#global-search{margin-inline:auto;max-width:1600px;padding-inline:var(--cb-gutter);box-sizing:border-box}
#app>*,.battle-head,.battle-arena,.battle-log{max-width:none}
#app p,#app .muted{max-width:none}

/* 2. compact heading bands */
.hero,.trade-head,.battle-head,.screen-heading,.capture-hero,.admin-hero,.family-hero{padding-block:8px;margin-block:0 12px;min-height:0}
.hero h1,.trade-head h1,.battle-head h1,.screen-heading h1{margin-block:2px 4px}
.trade-head,.battle-head,.screen-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--cb-gap);align-items:end}
.trade-head>*,.battle-head>*,.screen-heading>*{grid-column:1}

/* 3. panels size to content */
.panel{height:auto}
#app>section.panel,.feature-grid>.panel,.analysis-overview>.panel{align-self:start}

/* 4. control rows: one row at >=1180 (selects capped, search takes the rest), wrap below */
.toolbar,.wishlist-tools,.search-filters,.search-view-switch,.stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar select,.wishlist-tools select,.search-filters select{max-width:170px}
.toolbar input[type=search],.toolbar input[type=text],.toolbar input:not([type]),.wishlist-tools input,.search-filters input{flex:1 1 160px;min-width:0}
.toolbar select,.toolbar button,.search-filters select{flex:0 1 auto;min-width:0}
@media(min-width:1180px){
 .toolbar,.wishlist-tools,.search-filters{flex-wrap:nowrap}
 .toolbar select,.search-filters select,.wishlist-tools select{padding-inline:10px;font-size:14px}
 .toolbar button,.toolbar .button{white-space:nowrap}
 .family-browser-controls.toolbar{flex-wrap:wrap}
}

/* 5. areas at >=1180: summaries, actions and secondary panels sit beside content */
@media(min-width:1180px){
 /* My cards: value strip + stats share a row; actions below */
 #app.page-collection{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cb-gap)}
 #app.page-collection>*{grid-column:1/-1}
 #app.page-collection>.collector-value-strip{grid-column:1/9;grid-row:2}
 #app.page-collection>.stats{grid-column:9/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-content:stretch}
 #app.page-collection>.stats .stat{justify-content:flex-start}
 /* Trade: builder beside proposals */
 #app.page-trade{display:grid;grid-template-columns:minmax(0,1fr) var(--cb-side);column-gap:var(--cb-gap);align-items:start}
 #app.page-trade>.trade-head{grid-column:1/-1}
 #app.page-trade>.trade-builder{grid-column:1;grid-row:2}
 #app.page-trade>.trade-proposals{grid-column:2;grid-row:2}
 /* Admin: sections in two columns, tables and the matcher full width */
 #app.page-admin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cb-gap);align-items:start}
 #app.page-admin>.admin-page,#app.page-admin>#certain-match,#app.page-admin>section:has(.table-wrap){grid-column:1/-1}
 /* Add cards: drop zone beside the pending queue */
 .capture-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--cb-gap);grid-auto-flow:dense;align-items:start}
 .capture-page>*{grid-column:1/-1}
 .capture-page>#drop{grid-column:1;grid-row:span 2}
 .capture-page>h2,.capture-page>#queue{grid-column:2}
 /* Copy inventory: copies in two columns, stats as one compact row */
 #inventory-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cb-gap)}
 #inventory-rows>*{margin:0}
 /* Messages: wider conversation context */
 .chat-layout{grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(260px,340px)}
 /* Analysis: lab lessons fill the width */
 .lab-lessons{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media(min-width:760px){
 .lab-lessons{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
 #inventory-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cb-gap)}
 #inventory-rows>*{margin:0}
}
.inventory-stats{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.inventory-stats button{min-height:0;padding:8px 14px;flex-direction:row;align-items:baseline;gap:10px}
.inventory-coverage{padding-block:10px}

/* 5b. older per-page width caps yield to the shared container */
#app.page-battle,#app.page-pick,.page-club .chat-layout{max-width:none}
.page-wishlist .wishlist-note,.page-collection .statusline{max-width:none}
@media(min-width:1180px){
 #app.page-collection .toolbar{flex-wrap:nowrap}
 #app.page-collection .toolbar>*{flex:0 1 auto}
 #app.page-collection .toolbar>select{flex:1 1 110px;max-width:160px;min-width:0;padding-inline:8px;font-size:14px}
 #app.page-collection .toolbar input{flex:2 1 160px;max-width:none;min-width:120px}
 .page-club .chat-layout{grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(260px,340px)}
}

/* 5c. summary tiles are one compact line; detail pages put art left, info right from iPad portrait up */
.capture-summary>*,.admin-overview>*{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 16px;min-height:0}
.capture-summary,.admin-overview{gap:var(--cb-gap)}
.capture-summary strong,.admin-overview strong{font-size:26px;line-height:1.1}
.capture-page>#drop{margin:0}
.inventory-stats button{justify-content:flex-start}
@media(min-width:760px){
 #app.page-card .split.card-detail-layout{display:grid;grid-template-columns:minmax(240px,5fr) minmax(0,7fr);gap:var(--cb-gap);align-items:start}
 #app.page-card .split.card-detail-layout>.card-viewer{position:sticky;top:8px;padding:14px}
}

/* 6. tables fit: no horizontal scroll, long text wraps */
table{width:100%;table-layout:auto}
td,th{overflow-wrap:anywhere}
.table-wrap{max-width:100%}
html,body{overflow-x:clip}