/* ============================================================
   20-wishlist.css (16 Oct 2026) — loads last.
   - the collection's Collection | Wishlist tabs (collection.js renderCollTabs)
   - the wishlist: its shelf, the shop bar over the cards, the list rows
     (wishlist.js, collection.js wishRow)
   - the wishlist boxes in the card detail (wishDetailRow, wishEntryBox)
   - the search's Precons tab (precons.js)
   ============================================================ */

/* ---- tabs: the search's tab bar, under the heading ---- */
.coll-tabs{margin:-8px 0 18px;}
.coll-tabs .ct-label{white-space:nowrap;}
@media(min-width:961px){
  .coll-tabs{max-width:520px;}
}
@media(max-width:960px){
  .coll-tabs{margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); margin-bottom:14px;}
  #wishShelf .toolbar{flex-wrap:wrap; overflow-x:visible; touch-action:auto; gap:8px; margin-bottom:12px;}
  #wishShelf .toolbar .toolbar-right{flex:1 1 100%; margin:2px 0 0;}
}

/* ---- the shop bar over a wishlist's cards ---- */
.wish-shop-host{margin:0 0 12px;}
.wish-shop .ws-acts{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.wish-shop .ws-acts .spacer{flex:1 1 auto;}
.wish-shop .aff-note{margin:8px 0 0;}
@media(max-width:960px){
  .wish-shop .ws-acts .btn{flex:1 1 auto;}
  .wish-shop .ws-acts .view-seg{flex:0 0 auto;}
  .wish-shop .ws-acts .spacer{display:none;}
  .wish-shop .view-seg button span{display:none;}
}

/* the list layout: the shopping list's rows, the whole list long */
#collGrid.as-list{display:block;}
.shop-list.wish-list{max-height:none; overflow:visible; border:1px solid var(--line); border-radius:var(--r2);}
.wish-list .shop-row{padding:9px 12px; gap:12px;}
.wish-list .nm{display:flex; flex-direction:column; gap:2px;}
.wish-list .nm > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--text);}
.wish-list .ws-sub{font-size:11.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wish-list .badge{flex:0 0 auto;}
.wish-list .pr{min-width:62px; text-align:right;}

/* the heart beside the shop link in the deck's shopping list */
.shop-row .shop-wish svg{width:16px; height:16px; display:block;}
.shop-row .shop-wish{color:var(--text-dim);}
.shop-row .shop-wish:hover{color:var(--accent-hi);}

/* ---- in the card detail ---- */
.wish-row .wish-line{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.wish-row .add-have{margin:0; font-size:14px; color:var(--accent-hi);}
.wish-row .add-have.none{color:var(--text-dim);}
.wish-row .btn svg, .dk-actions .btn svg{width:15px; height:15px; vertical-align:-2px;}
.wish-box .add-have{margin:12px 0 0; font-size:14px; color:var(--ok);}
.wish-box .add-have.none{color:var(--text-dim);}
/* under the collection box, set off by a rule (the band's boxes have no frame) */
.dactions .dact-coll .wish-row{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);}
.dactions .dact-coll .wish-row .dm-title{margin-bottom:10px;}

/* ---- Precons: the list (pc- classes: pt- belongs to the playtest) ---- */
.precon-toolbar{margin-bottom:14px;}
.precon-toolbar .pips{flex-wrap:wrap;}
@media(max-width:960px){ .precon-toolbar .precon-pips{flex:1 1 100%; justify-content:space-between;} }
.precon-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px;}
.precon-tile{
  display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r2); color:var(--text);
  font-family:inherit; text-transform:none; letter-spacing:normal; transition:border-color .15s, transform .1s;
}
.precon-tile:hover{border-color:var(--line-3);}
.precon-tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.pc-art{position:relative; display:block; aspect-ratio:626/457; background:var(--surface-3); overflow:hidden;}
.pc-art img{width:100%; height:100%; object-fit:cover; display:block;}
.pc-credit{
  position:absolute; right:6px; bottom:5px; font-size:10px; color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.8); pointer-events:none;
}
.pc-body{display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px; min-width:0;}
.pc-name{font-weight:600; font-size:15px; line-height:1.25;}
.pc-cmd{font-size:12.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pc-meta{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-faint); margin-top:3px; min-width:0;}
.pc-meta .mana-sym{width:14px; height:14px; margin:0 1px 0 0;}
.pc-set{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.precon-source{font-size:11.5px; color:var(--text-faint); margin:18px 0 0; text-align:center;}
@media(max-width:960px){
  .precon-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  .pc-body{padding:8px 9px 10px;}
  .pc-name{font-size:13.5px;}
  .pc-cmd{font-size:11.5px;}
  .pc-meta{flex-wrap:wrap; row-gap:2px;}
  .precon-toolbar{flex-wrap:wrap; gap:10px;}
  .precon-toolbar .toolbar-right{flex:1 1 100%; margin:0;}
}

/* ---- Precons: one deck ---- */
.precon-back{margin:0 0 12px;}
.precon-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r3); background:var(--surface);
  padding:18px 20px; margin-bottom:16px;
}
.precon-hero.has-art{min-height:170px; display:flex; align-items:flex-end; border-color:rgba(255,255,255,.14); text-shadow:0 1px 3px rgba(0,0,0,.65);}
.ph-art{position:absolute; inset:0; z-index:-1;}
.ph-art img{width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block;}
.ph-art::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,18,.25) 0%, rgba(8,11,18,.55) 45%, rgba(8,11,18,.92) 100%);}
.ph-text{position:relative; min-width:0; width:100%;}
.ph-kicker{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-hi);}
.ph-name{font-size:28px; margin:4px 0 6px; line-height:1.1;}
.ph-sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--text-dim);}
.has-art .ph-sub{color:rgba(255,255,255,.82);}
.ph-sub .mana-sym{width:16px; height:16px; margin:0;}
/* its own line: laid over the sub line it covered the commander on a phone */
.ph-credit{margin-top:8px; font-size:10px; color:rgba(255,255,255,.7); text-align:right;}
.precon-sum{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px;}
.precon-acts{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;}
.precon-seg{margin:6px 0 16px;}
.precon-group{
  font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-label);
  margin:18px 0 10px; font-weight:600;
}
@media(max-width:960px){
  .precon-hero{padding:14px 14px 16px;}
  .precon-hero.has-art{min-height:150px;}
  .ph-name{font-size:22px;}
  .precon-acts .btn{flex:1 1 calc(50% - 8px);}
  .precon-acts .btn.primary{flex-basis:100%;}
}
/* a precon Scryfall gave only part of: which cards, and Try again */
.precon-lost{
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px;
  border:1px solid rgba(var(--warn-rgb),.34); background:rgba(var(--warn-rgb),.1); border-radius:var(--r2);
  font-size:13px; line-height:1.45; color:var(--warn);
}
.precon-lost span{flex:1 1 240px;}