/* ============================================================
   DECK BUILDER — budget, excluded cards, combos (2026-10-11)
   ============================================================ */

/* "Budget: …" over the commander list, beside the build dropdowns */
.build-budget{
  background:var(--surface); border:1px solid var(--line-2); color:var(--text);
  padding:0 14px; min-height:40px; display:inline-flex; align-items:center;
  border-radius:var(--r1); font:inherit; font-size:13.5px; cursor:pointer; white-space:nowrap;
}
/* The commander list's bar: search, the three selects and Budget at the
   normal height, 40. The selects drew in the system's own style (inline
   padding, which Safari ignores) and came out 28 px high.
   Two rows that line up at both edges: the search, which takes what the
   colors leave; under it the four build options in a grid — by the bar's own
   width (a container query, so the side rail does not count). Wrapping one
   by one, the options made a stair of different widths.
   The bracket's label is the long one ("Bauen für: Bracket 4 · Optimized
   (ohne Grenzen)", 353 px with its arrow at 13.5 px, 410 at the 16 px of a
   tablet), so it gets the wider column in the one row; Budget there is as
   wide as its label (up to "Budget: €1,000 · max. €20/Karte", 238 px).
   The two widths below are where every label, German or English, still
   fits whole; only a phone, one under the other, cuts Bracket 4. */
#view-commander .toolbar{container:cmdbar / inline-size;}
#view-commander .toolbar .search-input{min-height:40px;}
#view-commander .toolbar > .search-input{flex:1 1 220px; min-width:0;}
#view-commander .toolbar > .pips{flex:0 0 auto;}
#view-commander .toolbar > .build-opts{
  flex:1 1 100%; display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
}
#view-commander .toolbar > .build-opts[hidden]{display:none;}
.build-opts > select, .build-opts > button{width:100%; min-width:0; max-width:none;}
.build-opts > .build-budget{justify-content:flex-start;}
#buildBinder{grid-area:bi;} #buildBracket{grid-area:br;} #buildFrom{grid-area:fr;} #buildBudget{grid-area:bu;}
#view-commander .toolbar > .build-opts{grid-template-areas:"bi" "br" "fr" "bu";}
#view-commander .toolbar > .toolbar-right{flex:1 1 100%; margin:0;}
/* a phone: the colors spread under the search, edge to edge */
@container cmdbar (max-width:519px){
  #view-commander .toolbar > .search-input{flex-basis:100%;}
  #view-commander .toolbar > .pips{flex:1 1 100%; justify-content:space-between;}
}
@container cmdbar (min-width:520px){
  #view-commander .toolbar > .toolbar-right{text-align:right;}
}
/* two by two, the columns equal */
@container cmdbar (min-width:850px){
  #view-commander .toolbar > .build-opts{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-areas:"bi br" "fr bu";
  }
}
/* all four in one row, the bracket's column the widest */
@container cmdbar (min-width:1120px){
  #view-commander .toolbar > .build-opts{
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) auto;
    grid-template-areas:"bi br fr bu";
  }
}
#view-commander .toolbar .cfg-select{min-height:40px; padding-top:0; padding-bottom:0; background-color:var(--surface);}
/* the selects take 16 px there (10-settings.css), so iOS does not zoom; Budget beside them too */
@media(max-width:960px){ #view-commander .toolbar .build-budget{font-size:16px;} }
.build-budget:hover{border-color:var(--line-3);}
.build-budget.set{border-color:var(--accent); color:var(--accent-hi);}
.build-budget[hidden]{display:none;}

/* the budget fields in the Rebuild dialog and the budget dialog */
.budget-row{display:flex; gap:8px; align-items:center;}
.budget-row .cfg-select{flex:1 1 auto; min-width:0;}
.budget-row .budget-num{flex:0 0 110px; width:110px; padding-right:11px; background-image:none;}
.budget-row .budget-num[hidden]{display:none;}

/* "Never in this deck" in the Rebuild dialog */
.ex-field .k{display:block; margin-bottom:6px;}
.ex-chips{display:flex; flex-wrap:wrap; gap:6px;}
.ex-chip{
  display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 10px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--line-2); font-size:13px;
}
.ex-x{
  border:none; background:none; color:var(--text-dim); font-size:16px; line-height:1;
  width:24px; height:24px; border-radius:50%; cursor:pointer;
}
.ex-x:hover{color:var(--text); background:var(--line);}

/* ---- Combos, under Analysis (the section's frame: sections.js, 22-analysis.css) ---- */
.cp-sub{
  margin-top:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-label);
}
.cp-list{display:flex; flex-direction:column; gap:8px;}
.cp-row{
  display:flex; flex-direction:column; gap:5px; padding:10px 12px; border-radius:var(--r2);
  background:var(--bg-2); border:1px solid var(--line);
}
.cp-row.minor{opacity:.8;}
.cp-cards{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;}
.cp-card{
  border:none; background:none; padding:0; font:inherit; font-size:14.5px; font-weight:600; color:var(--text);
  cursor:pointer; text-align:left;
}
.cp-card:hover{color:var(--accent-hi); text-decoration:underline;}
.cp-card.missing{color:var(--accent-hi); border-bottom:1px dashed var(--accent);}
.cp-plus{color:var(--text-faint); font-size:13px;}
.cp-does{font-size:13px; color:var(--text-dim); line-height:1.45;}
.cp-tags{display:flex; flex-wrap:wrap; gap:6px;}
.cp-tag{
  font-size:11.5px; padding:2px 8px; border-radius:20px; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--line);
}
.cp-tag.hot{color:var(--accent-hi); border-color:var(--accent);}
.cp-tag.warn{color:var(--warn); border-color:rgba(var(--warn-rgb),.45); background:rgba(var(--warn-rgb),.08);}
.cp-tag.own{color:var(--ok, #41cf8d); border-color:rgba(65,207,141,.4);}
.cp-more{align-self:flex-start;}
.cp-stale{color:var(--text-faint);}
.cp-foot{font-size:12px; color:var(--text-faint); line-height:1.5;}
.cp-foot a{color:var(--text-dim); text-decoration:underline;}

@media(max-width:960px){
  .budget-row .budget-num{font-size:16px;}
}

/* The Rebuild dialog runs taller than a laptop screen; on a desktop a
   .modal does not scroll by itself (phones get overflow-y in 05-mobile). */
.modal.scroll-modal{overflow-y:auto; overscroll-behavior:contain;}

/* "Bracket 3 instead of 4": over the deck list when the budget kept it lower */
.notice.budget-note{margin-top:0; margin-bottom:16px;}

/* the shopping list as tiles: the collection's tiles inside the panel */
.shop-viewbar{margin:12px 0 10px;}
.shop-tiles{margin-bottom:6px;}
/* the list's pictures a little larger: these are cards still to be found in
   a shop, so they should be easy to recognise. The list a row or so taller
   to keep as many in view. */
.shop-panel .shop-list{max-height:420px;}
.shop-panel .shop-row img{width:44px; height:62px; flex-basis:44px;}

/* "Themes" in the Rebuild dialog: up to three of EDHREC's ways to play */
.theme-field .k{display:block; margin-bottom:8px;}
.theme-chips{gap:6px;}
.theme-chips .chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:13px;}
.theme-chips .chip .n{font-size:11.5px; opacity:.72; font-variant-numeric:tabular-nums;}
.theme-chips .chip:disabled{opacity:.42; cursor:default;}
.theme-chips .chip:disabled:hover{border-color:var(--line-2); color:var(--text-dim);}
.theme-chips .chip.more{background:none; border-style:dashed;}