/* ============================================================
   09-refresh.css
   The ManaBox-style pass: compact card grids, multi-select, the
   unified search field with Cards/Sets tabs, grouped sets, the deck
   as a list, the detail carousel and a louder foil finish.
   ------------------------------------------------------------
   Last in the cascade on purpose — it overrides earlier files
   rather than editing them, so each change is findable here.
   ============================================================ */

/* ---------- dialogs ----------
   .modal is a column flexbox with a max-height. Its children could shrink,
   and a child with its own overflow (the binder artwork results) shrank to a
   few pixels — the "artwork not visible after searching" bug. */
.modal > *{flex-shrink:0;}
.modal .desc{margin:0;}

/* ---------- compact card tile ---------- */
.cgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px 12px;}
.ctile{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  background:transparent; border:none; padding:0; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.ctile.clickable{cursor:pointer;}
.ctile-art{
  position:relative; width:100%; aspect-ratio:488/680; border-radius:4.6%/3.3%;
  overflow:hidden; background:var(--surface-2);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.45);
  transition:transform .14s, box-shadow .14s;
}
.ctile-art img{width:100%; height:100%; object-fit:cover; display:block;}
.ctile-art .art-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:12px; color:var(--text-faint); padding:10px;
}
@media (hover:hover){
  .ctile.clickable:hover .ctile-art::after{box-shadow:inset 0 0 0 2px var(--accent);}
}
.ctile.clickable:focus-visible{outline:none;}
.ctile.clickable:focus-visible .ctile-art::after{box-shadow:inset 0 0 0 2px var(--accent);}
.ctile-qty, .ctile-price{
  position:absolute; bottom:5px; z-index:3;
  background:rgba(8,11,18,.86); color:#fff; backdrop-filter:blur(4px);
  font-size:12px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
  border-radius:20px; display:inline-flex; align-items:center; gap:4px;
}
.ctile-qty{left:5px; min-width:22px; height:22px; justify-content:center; padding:0 6px;}
.ctile-price{right:5px; height:22px; padding:0 7px 0 5px;}
.ctile-price:not(:has(.ctile-f)){padding-left:7px;}
.ctile-f{
  width:15px; height:15px; border-radius:50%; flex:0 0 15px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:800; color:#1a1205; /* on the foil gradient, not the accent */
  background:linear-gradient(135deg,#ffd36b,#f39a2b);
}
.ctile-meta{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; text-align:center;}
.ctile-set{display:flex; gap:5px; align-items:baseline; font-size:12px; color:var(--text); max-width:100%;}
.ctile-code{font-weight:600; letter-spacing:.02em;}
.ctile-cn{color:var(--text-faint); font-variant-numeric:tabular-nums;}
.ctile-note{
  font-size:11px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 8px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ctile-meta .badge{font-size:9.5px;}
.ctile-meta .delta{font-size:11px;}

/* multi-select */
.ctile-check{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  background:rgba(8,11,18,0); transition:background .12s;
}
.ctile-check svg{
  width:44%; max-width:56px; aspect-ratio:1; padding:9%; border-radius:50%;
  background:rgba(8,11,18,.55); color:transparent; border:2px solid rgba(255,255,255,.55);
  transition:all .12s;
}
.ctile.selected .ctile-check{background:rgba(8,11,18,.38);}
.ctile.selected .ctile-check svg{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.ctile.selected .ctile-art::after{box-shadow:inset 0 0 0 3px var(--accent);}

.select-bar{
  position:sticky; bottom:12px; z-index:40; margin-top:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 10px 9px 12px; border-radius:var(--r2);
  background:rgba(17,24,38,.96); backdrop-filter:blur(10px);
  border:1px solid var(--line-3); box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.sel-x{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:var(--surface-3); border:1px solid var(--line-2); color:var(--text-dim);
}
.sel-count{flex:1; font-size:13.5px; font-weight:600; min-width:120px;}
.btn.danger{border-color:rgba(239,95,95,.45); color:var(--bad);}
.btn.danger:hover{background:var(--bad-soft); border-color:var(--bad);}
#collSelect.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}

.coll-count{font-size:12.5px; color:var(--text-faint); margin:-8px 0 14px; font-variant-numeric:tabular-nums;}
.coll-menu{display:none; font-size:18px; letter-spacing:1px; line-height:1;}
.menu-list{display:flex; flex-direction:column; gap:1px; border-radius:var(--r2); overflow:hidden;}
.menu-item{
  background:var(--bg-2); border:none; color:var(--text); text-align:left;
  padding:14px 16px; font-size:14.5px; font-family:inherit;
}
.menu-item:hover{background:var(--surface-2);}

/* ---------- import mode choice ---------- */
.import-modes{display:flex; flex-direction:column; gap:8px;}
.import-mode{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r2);
  padding:12px 14px; color:var(--text); font-family:inherit;
}
.import-mode:hover{border-color:var(--accent);}
.import-mode.on{border-color:var(--line-3);}
.im-title{font-size:14.5px; font-weight:600;}
.im-text{font-size:12.5px; color:var(--text-dim); line-height:1.5;}

/* ---------- foil ----------
   The first sheen sat at half opacity in screen blend mode, which on a bright
   card all but vanished. Stronger colors, a slow moving highlight, and a
   rainbow rim make a foil recognisable at thumbnail size. At .85 it washed
   the artwork out (2026-10-04); the rim carries the recognition now. */
.foil-sheen{
  opacity:.6; mix-blend-mode:color-dodge;
  background:
    linear-gradient(115deg,
      transparent 8%, rgba(255,70,170,.55) 22%, rgba(90,200,255,.6) 36%,
      rgba(120,255,170,.5) 50%, rgba(255,230,90,.55) 64%, rgba(255,90,140,.5) 78%, transparent 92%);
  background-size:260% 260%;
  animation:foilShift 5.5s ease-in-out infinite alternate;
}
.foil-sheen::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 48%, transparent 58%);
  background-size:300% 100%;
  animation:foilGlint 3.2s ease-in-out infinite;
  mix-blend-mode:overlay;
}
@keyframes foilShift{from{background-position:0% 50%;} to{background-position:100% 50%;}}
@keyframes foilGlint{0%{background-position:120% 0;} 60%,100%{background-position:-60% 0;}}
.ctile.is-foil .ctile-art,
.detail-art.is-foil{
  box-shadow:0 0 0 2px transparent, 0 6px 18px rgba(0,0,0,.45);
  background:
    linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
    linear-gradient(135deg,#ff5fb4,#5fd3ff,#7dffb0,#ffe066,#ff7a9c) border-box;
  border:2px solid transparent;
}
.card-tile.is-foil{border-color:transparent; background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,#ff5fb4,#5fd3ff,#7dffb0,#ffe066) border-box;
  border:1px solid transparent;}
@media(prefers-reduced-motion:reduce){
  .foil-sheen, .foil-sheen::after{animation:none;}
}

/* ---------- binder shelf: flatter tiles ---------- */
.binder-tile{flex-direction:row; align-items:stretch; min-height:84px;}
/* Every row as tall as the tallest one: a tile with the artist's credit (or
   a value that wraps) has an extra line, and made its row taller than the rest. */
.binder-grid{grid-auto-rows:1fr;}
.binder-tile .btile-art{position:absolute; inset:0; height:auto;}
.binder-tile .btile-art img{object-position:center 30%;}
.binder-tile .btile-fade{background:linear-gradient(90deg,rgba(17,24,38,.94) 0%,rgba(17,24,38,.72) 48%,rgba(17,24,38,.2) 100%);}
.binder-tile .btile-body{position:relative; z-index:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; flex:1;}
.btile-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.6);}
.btile-meta{color:var(--text-dim); text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* ---------- unified search field + tabs ---------- */
.search-top{display:flex; gap:9px; align-items:center; margin-bottom:12px;}
.search-field{
  flex:1; display:flex; align-items:center; gap:10px; min-width:0;
  background:var(--surface); border:1px solid var(--line-2); border-radius:28px;
  padding:0 8px 0 16px; height:48px; transition:border-color .14s;
}
.search-field:focus-within{border-color:var(--accent);}
.search-field .ico{width:20px; height:20px; flex:0 0 20px; color:var(--text-dim); display:flex;}
.search-field .ico svg{width:100%; height:100%;}
.search-field input{
  flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text);
  font-family:inherit; font-size:16px; height:100%;
}
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none; display:none;}
.search-field input::placeholder{color:var(--text-faint);}
.sf-clear{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%; border:none; background:transparent;
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; visibility:hidden;
}
.sf-clear svg{width:18px; height:18px;}
.sf-clear:hover{color:var(--text); background:var(--surface-2);}
.search-top .filter-btn{width:48px; height:48px; flex:0 0 48px; border-radius:50%;}
.filter-btn.is-hidden{display:none !important;}
.search-tabs{
  display:flex; border-bottom:1px solid var(--line-2); margin-bottom:18px;
}
.search-tabs button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-1px;
  color:var(--text-dim); font-family:inherit; font-size:15px; font-weight:600; padding:12px 8px 11px;
}
.search-tabs button svg{width:20px; height:20px;}
.search-tabs button.on{color:var(--accent-hi); border-bottom-color:var(--accent);}
.set-toolbar{margin-bottom:12px;}
.set-type-sel{
  background:var(--surface); border:1px solid var(--line-2); color:var(--text);
  padding:9px 32px 9px 14px; border-radius:var(--r1); font-family:inherit; font-size:14px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}

/* ---------- set list with folded sub-sets ---------- */
.set-list{gap:0; border:1px solid var(--line); border-radius:var(--r2); overflow:hidden;}
.set-row{
  display:flex; align-items:stretch; gap:0; padding:0; background:var(--surface);
  border:none; border-bottom:1px solid var(--line); border-left:none;
}
.set-row:hover{background:var(--surface);}
.set-hit{
  flex:1; min-width:0; display:flex; align-items:center; gap:14px;
  padding:12px 6px 12px 15px; background:none; border:none; color:var(--text);
  text-align:left; font-family:inherit;
}
.set-hit:hover{background:var(--surface-2);}
.set-name{white-space:normal; line-height:1.3; font-size:14.5px;}
.set-code-inline{font-weight:400; color:var(--text-dim); font-size:13px;}
.set-meta{display:flex; gap:10px; font-size:12.5px; color:var(--text-faint);}
.set-meta .set-owned{min-width:0; text-align:left; font-size:12px;}
.set-right{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; margin-left:auto;}
.set-date{font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap;}
.set-digital{font-size:11px; font-style:italic; color:var(--text-faint);}
.set-toggle{
  flex:0 0 48px; background:none; border:none; border-left:1px solid var(--line);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center;
}
.set-toggle svg{width:20px; height:20px; transition:transform .18s;}
.set-toggle.open svg{transform:rotate(180deg);}
.set-toggle:hover{color:var(--text); background:var(--surface-2);}
.set-kids{background:var(--bg-2); border-bottom:1px solid var(--line);}
.set-row.child{background:transparent; border-bottom:1px solid var(--line);}
.set-row.child:last-child{border-bottom:none;}
.set-row.child .set-hit{padding-left:34px;}
.set-row.child .set-name{font-size:13.5px;}

/* ---------- deck as a list ---------- */
.deck-list{display:flex; flex-direction:column; gap:1px; border-radius:var(--r2); overflow:hidden; border:1px solid var(--line);}
.deck-row{
  display:flex; align-items:center; gap:11px; padding:6px 10px 6px 6px;
  background:var(--surface); cursor:pointer; min-width:0;
}
.deck-row:hover{background:var(--surface-2);}
.deck-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.dr-art{
  width:56px; height:40px; flex:0 0 56px; border-radius:6px; overflow:hidden;
  background:var(--surface-3); position:relative;
}
/* the artwork box of a full card image: roughly the top half, inset from the frame */
.dr-art img{
  position:absolute; width:118%; left:-9%; top:-19%; height:auto; display:block;
}
.dr-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.dr-top{display:flex; align-items:center; gap:7px; min-width:0;}
.dr-name{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dr-sub{display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; white-space:nowrap;}
.dr-sub .mana-sym{width:14px; height:14px; margin:0;}
.dr-tag{font-size:10.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis;}
.dr-tag.hi{color:var(--accent-hi);}
.dr-tag.cat{color:var(--info);}
.dr-right{flex:0 0 auto; display:flex; align-items:center;}
.dr-owned{font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ok);}
.dr-buy{
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  color:var(--accent-hi); background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.34);
  border-radius:20px; padding:3px 9px; font-family:inherit;
}
.dr-buy:hover{border-color:var(--accent);}
.dr-qty{display:flex; align-items:center; gap:3px; flex:0 0 auto;}
.dr-qty .qty-btn:disabled{opacity:.3; cursor:not-allowed;}
.dr-swap{flex:0 0 auto;}

/* ---------- editable quantity stepper (deck list row + deck tile) ----------
   One − / input / + for any card the deck allows more than one copy of —
   basics above all, but not tied to them by name. The input is real text so
   a count can be typed directly, not only stepped one at a time. */
.q-input{
  width:24px; border:none; background:transparent; color:inherit; font:inherit;
  font-variant-numeric:tabular-nums; text-align:center; padding:0; -moz-appearance:textfield;
}
.q-input::-webkit-outer-spin-button, .q-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.q-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:3px;}
.dr-qty .q-input{font-size:13px; font-weight:600; color:var(--text);}
.ctile-qty.qty-stepper{gap:2px; padding:0 3px;}
.ctile-qty.qty-stepper .q-input{width:20px; font-size:12px; font-weight:600; color:#fff;}
.ctile-qty.qty-stepper .qty-btn{
  width:20px; height:20px; min-width:20px; border-radius:50%; border:none;
  background:rgba(255,255,255,.14); color:#fff; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.ctile-qty.qty-stepper .qty-btn:disabled{opacity:.35;}
@media (hover:hover){ .ctile-qty.qty-stepper .qty-btn:hover{background:rgba(255,255,255,.26);} }
.category-block{margin-bottom:22px;}
.category-block h3{font-size:15px; margin-bottom:10px; padding-bottom:7px;}

/* ---------- detail carousel ---------- */
.detail-figure.has-carousel{position:relative;}
.car-viewport{
  overflow:hidden; width:100%; touch-action:pan-y; overscroll-behavior-x:contain;
  -webkit-user-select:none; user-select:none;
}
.car-track{display:flex; will-change:transform;}
.car-slide{flex:0 0 auto; transition:none;}
.car-slide .detail-art{border-radius:4.6%/3.3%;}
.car-slide .dimg{width:100%; flex:none; margin:0; border-radius:4.6%/3.3%;}
.car-slide.prev, .car-slide.next{cursor:pointer;}
.detail-figure.has-carousel .detail-pos{display:block;}
@media(min-width:961px){
  .detail-figure.has-carousel{flex:0 0 240px; width:240px;}
  .detail-figure.has-carousel .detail-pos{
    text-align:center; margin-top:9px; font-size:11px; letter-spacing:.09em; color:var(--text-faint);
  }
}
@media(max-width:960px){
  .detail-figure.has-carousel{margin:0 -18px; width:auto;}
  .car-slide.prev, .car-slide.next{opacity:.5; transform:scale(.92);}
}

/* ---------- scanner: finish / set / language before adding ---------- */
.scan-opts{margin-top:10px; gap:8px;}
.scan-opts .qedit-label{flex:0 0 72px;}
.scan-opts .qedit-select{min-width:0; width:100%; padding:7px 10px; font-size:13px;}
.scan-opts .seg button{padding:6px 12px; font-size:12.5px;}
.dm-lang{flex:0 0 auto; width:auto; padding:5px 10px; font-size:12.5px;}

/* ---------- phones ---------- */
.desk-only{}
@media(max-width:960px){
  .desk-only{display:none !important;}
  .coll-menu{display:inline-flex;}
  .value-chip.minor{display:none;}
  .search-head{display:none;}
  /* the search view has its own field; a second one above it is noise */
  body[data-view="search"] .topsearch{display:none;}
  body[data-view="search"] .top-actions{margin-left:auto;}
  /* sorting lives in the filter sheet on a phone */
  #sSortBar:not(.in-sheet){display:none;}
  .value-split:not(:has(.value-chip:not(.minor))){display:none;}
  .value-bar{padding:12px 14px;}

  /* three cards a row, as in ManaBox */
  .cgrid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 8px;}
  .ctile-qty, .ctile-price{font-size:11px; height:20px; bottom:4px;}
  .ctile-qty{left:4px; min-width:20px;}
  .ctile-price{right:4px; padding:0 6px 0 4px;}
  .ctile-f{width:14px; height:14px; flex-basis:14px; font-size:9px;}
  .ctile-set{font-size:11px;}
  .ctile-note{font-size:10px; padding:1px 6px;}

  /* two binders a row, flat */
  .binder-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;}
  .binder-tile{min-height:68px; border-radius:var(--r2);}
  .binder-tile .btile-body{padding:10px 11px;}
  .binder-tile .btile-name{font-size:15px;}
  .binder-tile .btile-meta{font-size:11px;}
  .binder-tile .btile-edit{top:5px; right:5px;}
  .binder-tile .btile-edit.icon-btn{width:28px; height:28px;}
  #binderView .toolbar{margin-bottom:12px;}

  .select-bar{bottom:calc(78px + env(safe-area-inset-bottom)); position:fixed; left:10px; right:10px; margin:0;}
  .select-bar .btn{flex:1 1 auto;}
  .sel-count{flex:1 1 calc(100% - 48px); min-width:0; padding-left:2px;}
  body.selecting .main{padding-bottom:calc(170px + env(safe-area-inset-bottom));}

  .search-tabs{margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); margin-bottom:14px;}
  .set-hit{gap:11px; padding:11px 4px 11px 12px;}
  .set-name{font-size:14px;}
  .set-row.child .set-hit{padding-left:26px;}
  .set-list{border-left:none; border-right:none; border-radius:0; margin:0 calc(-1 * var(--gutter));}

  .deck-list{margin:0 calc(-1 * var(--gutter)); border-left:none; border-right:none; border-radius:0;}
  /* The block around the list is painted with containment (content-visibility
     below), which clips to the block's own box. Inside the gutter, the
     edge-to-edge list lost its right end: the + button, and "Owned" in the
     sideboard. So the block spans the screen too and keeps the gutter inside. */
  .category-block{margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter));
    padding-left:var(--gutter); padding-right:var(--gutter);}
  .deck-row{padding:6px 10px 6px 8px; gap:9px;}
  .dr-art{width:50px; height:36px; flex-basis:50px;}
  .dr-name{font-size:13.5px;}
  .dr-swap{display:none;}
  .dr-tag{display:none;}
  .category-block h3{font-size:14px;}
}
@media(max-width:400px){
  .cgrid{gap:10px 6px;}
}

/* ---------- rendering cost ----------
   Blocks far below the fold are not laid out or painted until they come near
   the screen; the intrinsic size keeps the scrollbar honest meanwhile. */
.category-block{content-visibility:auto; contain-intrinsic-size:auto 600px;}
.set-list > .set-row{content-visibility:auto; contain-intrinsic-size:auto 64px;}
.cgrid > .ctile{content-visibility:auto; contain-intrinsic-size:auto 260px;}
/* The stand-in height is a desktop tile's. A phone tile is ~205px, so every
   row not yet drawn claimed 55px too much and the page grew and shrank under
   the finger while scrolling. Estimated from the column width instead: the
   card at 488:680 plus ~48px for the set line. */
@media(max-width:960px){
  .cgrid > .ctile{contain-intrinsic-size:auto calc((100vw - 46px) / 3 * 1.393 + 48px);}
  body[data-tiles="2"] .cgrid > .ctile{contain-intrinsic-size:auto calc((100vw - 40px) / 2 * 1.393 + 48px);}
  body[data-tiles="4"] .cgrid > .ctile{contain-intrinsic-size:auto calc((100vw - 45px) / 4 * 1.393 + 48px);}
}

/* ---------- start page title ----------
   Cinzel Bold, the brand face beside the logo. Mixed case: Cinzel sets the
   lower case as small capitals, so the initials stand taller. */
.hero h1{
  font-family:'Cinzel',Georgia,serif;
  font-weight:700; font-style:normal;
  letter-spacing:.04em; text-transform:none;
  line-height:1.05;
}

/* ============================================================
   SPACING PASS
   One rhythm: 8 px inside a control group, 12 px between related
   blocks, 16 px between sections on a phone (20 on desktop). Found by
   measuring every view at 375 px and 1280 px.
   ============================================================ */
/* The page gutter as a variable, so lists that run edge to edge pull out by
   exactly the gutter. They used a fixed 15 px while phones up to 400 px wide
   have a 12 px gutter, so they stuck out 3 px past the screen and the last
   button of every deck row was cut off. */
.main{--gutter:38px;}
@media(max-width:960px){ .main{--gutter:15px;} }
@media(max-width:400px){ .main{--gutter:12px;} }

/* deck editor: the big blocks sat 26–36 px apart */
.cmd-header{margin-bottom:20px;}
.rules-panel{margin-bottom:20px;}
.shop-panel{margin-bottom:20px;}
.deck-topbar{margin-bottom:16px;}

/* search: result count sat 30 px above the first card */
#cardsPanel > .toolbar{margin-bottom:10px;}
#sNotice:empty{display:none;}

/* binder tiles: the name ran underneath the edit button */
.binder-tile:has(.btile-edit) .btile-body{padding-right:46px;}

@media(max-width:960px){
  .cmd-header{margin-bottom:16px;}
  .rules-panel{margin-bottom:16px; padding:14px 16px;}
  .shop-panel{margin-bottom:16px;}
  .category-block{margin-bottom:18px;}

  /* empty states and the drop zone had desktop padding on a phone */
  .empty{padding:28px 18px;}
  .dropzone{padding:28px 18px;}
  .dropzone h3{font-size:19px;}
  .dropzone p{margin-bottom:16px;}

  /* the binder count scrolled off the end of the toolbar */
  #binderView .toolbar{flex-wrap:wrap; overflow-x:visible; touch-action:auto; gap:8px;}
  #binderView .toolbar .toolbar-right{flex:1 1 100%; margin:2px 0 0;}

  /* the search view has its own field and tabs; a bar holding only the
     bell and the account button pushed the results down by a row */
  body[data-view="search"] .topbar{display:none;}
}

/* ---------- double-faced cards: turn over in the detail view ---------- */
.detail-art.flippable{overflow:visible; perspective:1400px; cursor:pointer;}
/* the single-card view: the frame hugs the card, so the button sits on it */
.detail-figure > .detail-art.flippable{width:fit-content; max-width:100%; margin-inline:auto;}
.detail-figure > .detail-art.flippable .dimg{margin:0;}
.flip-inner{
  position:relative; transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.45,.05,.2,1);
}
.detail-art.flipped .flip-inner{transform:rotateY(180deg);}
.flip-inner .dimg{-webkit-backface-visibility:hidden; backface-visibility:hidden;}
.flip-inner .face-back{position:absolute; top:0; left:0; width:100%; height:100%; transform:rotateY(180deg);}
.detail-art.flipping{animation:cardLift .65s cubic-bezier(.45,.05,.2,1);}
@keyframes cardLift{
  0%{scale:1; filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
  50%{scale:1.06; filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));}
  100%{scale:1; filter:drop-shadow(0 0 0 rgba(0,0,0,0));}
}
/* Top left, in the card's rounded corner and see-through (16 Oct 2026):
   bottom right it sat on power and toughness. */
.flip-btn{
  position:absolute; left:3.5%; top:2.6%; z-index:3;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(8,10,14,.42); color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 6px rgba(0,0,0,.3); cursor:pointer; opacity:.82;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:transform .2s, background .2s, opacity .2s;
}
.flip-btn svg{width:17px; height:17px; transition:transform .65s cubic-bezier(.45,.05,.2,1);}
.flip-btn:hover, .flip-btn:focus-visible{opacity:1; background:rgba(var(--accent-rgb),.85); color:var(--on-accent);}
.flip-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.detail-art.flipped .flip-btn svg{transform:rotate(180deg);}
body.reduce-motion .flip-inner, body.reduce-motion .flip-btn svg{transition:none;}
body.reduce-motion .detail-art.flipping{animation:none;}
@media (prefers-reduced-motion:reduce){
  .flip-inner, .flip-btn svg{transition:none;}
  .detail-art.flipping{animation:none;}
}

/* ---------- other printings open their own detail ---------- */
.print-row.clickable{cursor:pointer;}
.print-row.clickable:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.detail-back{align-self:flex-start; margin-bottom:4px;}
.cmd-header .cmd-art{width:158px; flex:0 0 auto;}
@media(max-width:960px){ .cmd-header .cmd-art{width:120px;} }

/* The card detail is taller than a laptop screen once the printings have
   loaded. The dialog has a max-height but no scrolling of its own on desktop
   (it cannot: the ‹ › buttons sit half outside it), so the foot with "Open
   shop page" ran off the bottom. Here the backdrop scrolls instead. */
@media(min-width:961px){
  .modal-back:has(> .detail-modal){overflow-y:auto; align-items:flex-start;}
  .modal.detail-modal{max-height:none; margin:auto 0;}
}

/* ---------- deck header tiles on a phone ----------
   The two rows (4 and 7 tiles) wrapped into rows of three with a lone tile
   stretched across each; as one grid they fill evenly, deck value last. */
@media(max-width:960px){
  .cmd-header .stat-block{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px;}
  .cmd-header .stat-block .stat-row{display:contents;}
  .cmd-header .stat-block .stat{flex:none;}
  .cmd-header .stat-block .stat.value{grid-column:span 2;}   /* the 11th tile: fills the last row */
}

/* ---------- deck header: bracket ----------
   (The fold-down header went with the tabs of 16-tidy.css; the figures
   live on under Analysis and in a shared deck's header.) */
.cmd-header{position:relative;}
/* on a wide screen the tile rows and the charts fill the width, instead of
   stopping at a fixed 760 px somewhere short of it */
.cmd-header .deck-charts, .cmd-header .deck-charts .curve-wrap{max-width:none;}
@media(min-width:961px){ .cmd-header .stat-row .stat{flex:1 1 auto;} }
.bracket-tag{font-family:inherit; font-weight:600; cursor:pointer;}
.bracket-tag.b2{border-color:rgba(var(--accent-rgb),.34); color:var(--accent-hi); background:var(--accent-soft);}
.bracket-tag.b3{border-color:rgba(90,169,240,.35); color:var(--info); background:var(--info-soft);}
.bracket-tag.b4{border-color:rgba(239,95,95,.45); color:var(--bad); background:var(--bad-soft);}
.bracket-tag:hover{filter:brightness(1.15);}
.kv-title{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-label); margin-top:4px;}

/* ---------- pictures fade in ----------
   Card art from the network (js/core.js fadeIn) eases in over its placeholder
   instead of popping in; one from the memory cache shows at once. */
img.fade-in{opacity:0; transition:opacity .28s ease-out;}
img.fade-in.shown{opacity:1;}
body.reduce-motion img.fade-in{transition:none;}
@media (prefers-reduced-motion:reduce){ img.fade-in{transition:none;} }
/* A picture that failed to load (js/core.js guardImage) is hidden; the card's
   name stands in for it once the one retry has failed too. */
img.img-failed{visibility:hidden;}
.detail-art:has(.art-fallback){aspect-ratio:488/680; min-width:140px;}
.detail-art .art-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px; color:var(--text-dim); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r2);
}

/* ---------- start-up ----------
   Until the saved data is read (js/main.js), the first view is laid out but
   not shown; dropping the class starts its fade, so it appears once, whole. */
body.booting .view.active{visibility:hidden; animation:none;}

/* ---------- touch feedback ----------
   On a touch screen nothing answered a tap until the next view was drawn, and
   the hover styles stuck to whatever was tapped last. Buttons and cards now
   give under the finger at once. */
@media (hover:none){
  .btn, .qbtn{transition:transform .1s ease, background .14s, border-color .14s;}
  .btn:active:not(:disabled), .qbtn:active{transform:scale(.96);}
  .mini-deck:active, .binder-tile:active, .ctile.clickable:active .ctile-art{transform:scale(.97);}
  .nav-item:active .ico{transform:scale(.88);}
  .nav-item .ico{transition:transform .1s ease;}
  .queue-row:active{background:rgba(255,255,255,.03);}
}
@media (hover:none) and (max-width:960px){
  .nav-item:hover:not(:disabled):not(.active){background:transparent; color:var(--text-dim);}
  .nav-item.active:hover{background:transparent;}
}

/* ---------- card detail: prices, details, legality ----------
   Three labelled blocks instead of one heap of chips (js/search.js). */
.dtags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.dtag{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--surface-2); color:var(--text-dim);}
.dtag.ok{color:var(--ok); background:var(--ok-soft);}
.dtag.gc{color:var(--warn); background:rgba(var(--warn-rgb),.14);}
.dsec{margin-bottom:16px;}
.dsec .dm-title{margin-bottom:7px;}
.dprices{border:1px solid var(--line); border-radius:var(--r2); overflow:hidden;}
.dp-row{display:grid; grid-template-columns:minmax(0,1fr) 74px 74px; align-items:center; gap:8px;
  padding:8px 12px; font-size:13.5px; border-top:1px solid var(--line);}
.dp-row:first-child{border-top:none;}
.dp-head{padding:6px 12px; font-size:11px; color:var(--text-label); text-transform:uppercase; letter-spacing:.08em; background:var(--bg-2);}
.dp-feed{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim);}
.dp-v{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.dp-row.sel{background:var(--accent-soft);}
.dp-row.sel .dp-feed{color:var(--accent-hi); font-weight:600;}
.dfacts{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:7px 16px; margin:0; font-size:13.5px;}
.dfacts dt{color:var(--text-faint);}
.dfacts dd{margin:0; min-width:0; overflow-wrap:anywhere;}
.dset{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}
.dset-icon{width:16px; height:16px; filter:invert(88%);}
.dset-code{color:var(--text-faint); font-variant-numeric:tabular-nums;}
.dlegal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;}
.lg-cell{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
  padding:7px 10px; border-radius:var(--r1); background:var(--bg-2); font-size:13px;}
.lg-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lg-st{flex:0 0 auto; font-size:11px; font-weight:600; color:var(--text-faint); background:none; border:none; padding:0; text-decoration:none;}
.lg-st.lg-legal{color:var(--ok);}
.lg-st.lg-banned{color:var(--bad);}
.lg-st.lg-restricted{color:var(--info);}
/* the collection box: one labelled line per property */
.dm-fields{display:flex; flex-direction:column; gap:10px;}
.dm-field{display:flex; align-items:center; gap:12px; min-height:34px;}
.dm-label{flex:0 0 84px; font-size:12.5px; color:var(--text-dim);}
.dm-field > .qedit-select{flex:1; min-width:0;}
.dm-binder{flex:1; min-width:0; display:flex; align-items:center; gap:10px;}
.dm-binder-name{flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dm-seg{flex:0 0 auto;}
.dm-remove{margin-top:12px; color:var(--bad);}
.dm-move-qty{justify-content:center; margin:14px 0 4px;}
.dm-move-qty .q{min-width:32px; text-align:center; font-size:18px; font-weight:600;}
/* the add box: a search result into a chosen binder */
.add-box .add-go{margin-top:12px;}
.add-box .add-have{margin-top:8px;}
/* a proxy: the real card's prices, shown but not counted */
.dprices.is-proxy{opacity:.55;}
.dsec .dprices + .col-note{margin-top:7px;}

/* ---------- deck: list or tiles ---------- */
.deck-viewbar{display:flex; justify-content:flex-end; margin:4px 0 12px;}
.view-seg button{display:inline-flex; align-items:center; gap:6px; padding:7px 12px;}
.view-seg svg{width:17px; height:17px; display:block;}
.deck-tiles{margin-bottom:6px;}
/* Rings go on the inner overlay, like the card frame (10-settings.css): one
   outside the art was clipped by the tile's content-visibility, and only
   scraps showed at the rounded corners. The card frame stays inside it. */
.deck-tiles .ctile.to-buy .ctile-art::after{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45), inset 0 0 0 var(--frame-w) var(--frame);}
.deck-tiles .ctile .badge{align-self:flex-start; font-size:10px; padding:1px 7px;}

/* ---------- sign in with Apple / Google ----------
   The providers' own button styles for a dark page: Apple's white button,
   Google's dark theme (#131314, #8e918f outline, #e3e3e3 text). */
.auth-or{display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--text-label);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;}
.auth-or::before, .auth-or::after{content:""; flex:1; height:1px; background:var(--line-2);}
.oauth-list{display:flex; flex-direction:column; gap:8px;}
.oauth-btn{width:100%; height:44px; gap:10px; font-size:15px; font-weight:600; border-radius:var(--r1);}
.oauth-btn svg{width:20px; height:20px; flex:0 0 20px; display:block;}
.oauth-apple{background:#fff; color:#000; border-color:#fff;}
.oauth-apple:hover{background:#ececec; border-color:#ececec;}
.oauth-google{background:#131314; color:#e3e3e3; border-color:#8e918f; font-family:'Roboto','Inter',system-ui,sans-serif; font-weight:500;}
.oauth-google:hover{background:#1f1f21; border-color:#8e918f;}
.oauth-btn:disabled{opacity:.6; cursor:default;}

/* "Add to deck…" from the card detail: one row per built deck. */
.deck-pick{display:flex; flex-direction:column; gap:6px; margin:6px 0 4px; max-height:min(60vh, 460px); overflow-y:auto;}
.deck-pick-row{display:flex; align-items:center; gap:11px; padding:8px 10px; width:100%; text-align:left;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px; color:var(--text); cursor:pointer; font:inherit;}
.deck-pick-row:hover:not(:disabled){background:var(--surface-2); border-color:var(--line-3);}
.deck-pick-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.deck-pick-row:disabled{opacity:.5; cursor:default;}
.deck-pick-row img{width:40px; height:56px; object-fit:cover; border-radius:5px; flex:0 0 40px; background:var(--surface-3);}
.dpk-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.dpk-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dpk-sub{font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* …and the rows that start a new deck from the card */
.deck-pick-row.dpk-new{border-style:dashed;}
.dpk-new .dpk-sub{white-space:normal;}
.dpk-plus{width:40px; height:40px; flex:0 0 40px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--accent-soft); color:var(--accent-hi); font-size:22px; font-weight:600; line-height:1;}
.dpk-sep{font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-label); margin:8px 2px 0;}

/* ---------- card detail: the decks that hold the card ----------
   One row per deck with its commander's art, like the deck list itself. */
.dk-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.dk-count{font-size:11.5px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.dk-list{display:flex; flex-direction:column; gap:1px; border-radius:var(--r1); overflow:hidden;}
.dk-row{display:flex; align-items:center; gap:11px; width:100%; min-width:0; padding:7px 8px 7px 7px; text-align:left;
  background:var(--surface); border:none; border-radius:0; color:var(--text); font:inherit; cursor:pointer;}
.dk-row:hover{background:var(--surface-2);}
.dk-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.dk-art{width:46px; height:34px; flex:0 0 46px; border-radius:5px; overflow:hidden; background:var(--surface-3); position:relative;}
.dk-art img{width:100%; height:100%; display:block; object-fit:cover; object-position:center 30%;}
.dk-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.dk-name{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dk-sub{font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dk-sub:empty{display:none;}
.dk-go{flex:0 0 auto; font-size:20px; line-height:1; color:var(--text-faint); padding:0 2px;}
.dk-none{margin:0;}
.dk-more{margin-top:6px;}
.dk-more[hidden]{display:none;}
.dk-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.dk-fit{margin:8px 0 0; font-size:12px; line-height:1.4;}

/* ---------- deck: what the last Rebuild changed ----------
   Blue, so "new" never reads as "to buy" (accent) or "owned" (green). */
.deck-row.is-new{box-shadow:inset 3px 0 0 var(--info);}
.dr-new{
  flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--info); background:var(--info-soft); border:1px solid rgba(90,169,240,.32);
  border-radius:20px; padding:1px 7px; line-height:1.4;
}
.dr-x{flex:0 0 auto; font-size:12.5px; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.ctile-art:has(.ctile-qty) .ctile-new{left:34px;}
.deck-tiles .ctile.is-new .ctile-art::after{box-shadow:inset 0 0 0 2px var(--info), inset 0 0 0 var(--frame-w) var(--frame);}
/* the hover and focus ring still win over both */
.deck-tiles .ctile.clickable:focus-visible .ctile-art::after{box-shadow:inset 0 0 0 2px var(--accent);}
@media (hover:hover){ .deck-tiles .ctile.clickable:hover .ctile-art::after{box-shadow:inset 0 0 0 2px var(--accent);} }
/* bottom left, where the copy count sits: the top holds the card's name */
.ctile-new{
  position:absolute; bottom:5px; left:5px; z-index:3; height:22px; display:inline-flex; align-items:center;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1;
  color:#fff; background:var(--info); border-radius:20px; padding:0 8px;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
@media(max-width:960px){ .ctile-new{height:20px; bottom:4px; left:4px; padding:0 7px;} .ctile-art:has(.ctile-qty) .ctile-new{left:30px;} }
.rebuild-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border:1px solid rgba(90,169,240,.3); background:var(--info-soft); border-radius:var(--r2);
  padding:9px 12px; margin:4px 0 6px; font-size:13.5px; color:var(--text-dim);
}
.rebuild-bar .rb-text{flex:1; min-width:0;}
.rebuild-bar strong{color:var(--info);}
.rb-link{
  font:inherit; color:var(--text); background:none; border:none; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(255,255,255,.3);
}
.rb-link:hover{color:var(--info);}
.rebuild-removed{border-top:1px solid var(--line); padding-top:20px; margin-top:6px; scroll-margin-top:72px;}
.rebuild-removed > h3 .n{color:var(--text-faint);}
.rebuild-removed .col-note{margin:0 0 14px;}
.rebuild-removed .deck-row, .rebuild-removed .ctile{opacity:.82;}
.rb-foot{display:flex; gap:8px; margin-top:12px;}

/* ---------- search: the Cards tab before a search ----------
   Spans the whole card grid; it used to sit in the first column. */
.cgrid > .empty, .cgrid > .status-line, .cgrid > .s-start{grid-column:1 / -1;}
.s-start{display:flex; flex-direction:column; gap:22px; padding:4px 0 10px;}
.s-start-head h3{font-size:20px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;}
.s-start-head p{color:var(--text-dim); font-size:14px; line-height:1.5; max-width:62ch; margin:0;}
.s-start-sec{display:flex; flex-direction:column; gap:10px; min-width:0;}
.s-start-title{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-label);}
.s-start-title .btn{text-transform:none; letter-spacing:0; font-family:inherit;}
.s-recent{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.s-recent::-webkit-scrollbar{display:none;}
.s-recent-card{flex:0 0 84px; display:flex; flex-direction:column; gap:5px; padding:0; background:none; border:none;
  color:var(--text-dim); font:inherit; cursor:pointer; text-align:left; min-width:0;}
.s-recent-card img{width:84px; aspect-ratio:488/680; height:auto; border-radius:4.6%/3.3%; display:block; background:var(--surface-3);}
.s-recent-name{font-size:11.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.s-recent-card:hover .s-recent-name{color:var(--text);}
.s-start-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px;}
.s-start-btn{display:flex; flex-direction:column; gap:3px; padding:12px 14px; text-align:left; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); color:var(--text); font:inherit; cursor:pointer;}
.s-start-btn:hover{background:var(--surface-2); border-color:var(--line-3);}
.s-start-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.s-start-label{font-weight:600; font-size:14.5px;}
.s-start-sub{font-size:12.5px; color:var(--text-dim); line-height:1.35;}
@media(max-width:960px){
  .s-start-grid{grid-template-columns:1fr 1fr;}
  .s-start-btn{padding:11px 12px;}
}
.s-shortcut{margin:0 0 12px;}
/* the page head says the same on a wide screen */
@media(min-width:961px){ .s-start-head{display:none;} }

/* ---------- Edit deck: printings and cover ---------- */
.deck-editor{display:flex; flex-direction:column; gap:14px;}
.deck-editor > h3{margin-bottom:0;}
.de-prints{display:flex; flex-direction:column; gap:6px;}
.de-print{display:flex; align-items:center; gap:11px; padding:8px 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r1); min-width:0;}
.de-print img{width:46px; height:64px; object-fit:cover; border-radius:5px; flex:0 0 46px; background:var(--surface-3);}
.de-print-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.de-print-name{font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.de-print-sub{font-size:12.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.de-print-note{font-size:11.5px; color:var(--ok);}
.de-print-note.warn{color:var(--warn);}
.de-print .btn{flex:0 0 auto;}
.de-tabs{margin-top:8px; align-self:flex-start;}
.de-search{margin-top:6px;}
.deck-editor .art-preview img{object-position:center 30%;}
.badge.cur{color:var(--text-dim); border:1px solid var(--line-2);}
.pick-prints{max-height:min(60vh, 460px);}

/* ---------- deck export: format switch ---------- */
.export-seg{width:max-content; max-width:100%; margin:12px 0 8px;}
.export-seg button{padding:8px 13px;}
.modal .export-desc{margin-bottom:10px;}
.modal textarea.export-text{white-space:pre; overflow-x:auto;}
/* collection export: the scope switch under the format one; a long binder
   name is cut rather than pushing the switch off a phone screen */
.export-scope{margin-top:0;}
.export-scope button{min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.modal .export-count{margin:2px 0 4px;}