/* ============================================================
   03-components.css
   Reusable pieces, used across several views: buttons, inputs, pips,
   chips, card tiles, panels, modals, toasts, the auth card and the rules
   report.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
.btn{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text);
  padding:9px 15px; border-radius:var(--r1); font-size:13.5px; font-weight:500;
  transition:background .14s, border-color .14s; display:inline-flex; align-items:center; gap:7px; justify-content:center;
}
.btn:hover{background:var(--surface-3); border-color:var(--line-3);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.btn.primary:hover{background:var(--accent-hi); border-color:var(--accent-hi);}
.btn.ghost{background:transparent;}
.btn.ghost:hover{background:var(--surface);}
.btn.sm{padding:6px 11px; font-size:12.5px;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

.main{flex:1; padding:34px 38px 90px; max-width:1520px; min-width:0;}
.view{display:none;}
.view.active{display:block; animation:fade .22s ease;}
@keyframes fade{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}
.view-head{margin-bottom:26px; max-width:780px;}
.view-head h2{font-size:30px; text-transform:uppercase; letter-spacing:.045em; margin-bottom:9px; font-weight:700;}
.view-head p{color:var(--text-dim); font-size:14.5px;}
.eyebrow{font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin-bottom:7px;}

.dropzone{border:1px dashed var(--line-2); background:var(--surface); border-radius:var(--r3); padding:48px 40px; text-align:center; transition:border-color .15s, background .15s;}
.dropzone.drag{border-color:var(--accent); background:var(--accent-soft);}
.dropzone h3{font-size:22px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em;}
.dropzone p{color:var(--text-dim); max-width:470px; margin:0 auto 22px; font-size:14px;}
.file-btn{display:inline-block; background:var(--accent); color:var(--on-accent); font-size:14px; font-weight:600; padding:12px 28px; border-radius:var(--r1); transition:background .14s;}
.file-btn:hover{background:var(--accent-hi);}
input[type=file]{display:none;}
.hint-box{margin-top:26px; font-size:13px; color:var(--text-dim); text-align:left; background:var(--bg-2); border:1px solid var(--line); padding:16px 18px; border-radius:var(--r2);}
.hint-box code{background:var(--surface-3); padding:1px 6px; border-radius:4px; color:var(--accent-hi); font-size:12px;}

.progress-wrap{margin-top:20px;}
progress{width:100%; height:5px; border-radius:3px; appearance:none; -webkit-appearance:none; border:none; background:var(--surface-3); display:block;}
progress::-webkit-progress-bar{background:var(--surface-3); border-radius:3px;}
progress::-webkit-progress-value{background:var(--accent); border-radius:3px; transition:width .2s;}
progress::-moz-progress-bar{background:var(--accent); border-radius:3px;}
.status-line{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13.5px; color:var(--text-dim);}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid var(--surface-3); border-top-color:var(--accent); animation:spin .7s linear infinite; flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}

.stat-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.stat{border:1px solid var(--line); background:var(--surface); padding:13px 18px; border-radius:var(--r2); min-width:112px;}
.stat .n{font-family:'Barlow Condensed',sans-serif; font-size:27px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;}
.stat .l{font-size:11.5px; color:var(--text-faint); margin-top:5px; letter-spacing:.02em;}
.stat.warn{border-color:rgba(239,95,95,.35); background:var(--bad-soft);}
.stat.warn .n{color:var(--bad);}
.stat.good .n{color:var(--ok);}
.stat.accent .n{color:var(--accent);}

.notice{margin-top:18px; border:1px solid var(--line-2); background:var(--surface); padding:15px 18px; border-radius:var(--r2); font-size:13.5px; color:var(--text-dim);}
.notice.bad{border-color:rgba(239,95,95,.32); background:var(--bad-soft);}
.notice.info{border-color:rgba(90,169,240,.3); background:var(--info-soft);}
.notice strong{color:var(--text);}
.notice ul{margin:9px 0 0; padding-left:20px; max-height:170px; overflow:auto;}
.notice li{margin-bottom:3px;}

.toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px;}
.search-input{background:var(--surface); border:1px solid var(--line-2); color:var(--text); padding:9px 14px; border-radius:var(--r1); font-family:inherit; font-size:14px; min-width:230px; transition:border-color .14s;}
.search-input:focus{outline:none; border-color:var(--accent);}
.search-input::placeholder{color:var(--text-faint);}
.pips{display:flex; gap:5px;}
.pip{width:33px;height:33px;border-radius:50%; padding:0; border:2px solid transparent; background:transparent; opacity:.3; filter:grayscale(1); transition:opacity .14s, filter .14s, border-color .14s, transform .1s;}
.pip:hover{opacity:.7; filter:grayscale(.4); transform:translateY(-1px);}
.pip.on{opacity:1; filter:none; border-color:var(--accent);}
.pip img{width:100%;height:100%;display:block;border-radius:50%;}
.toolbar-right{margin-left:auto; font-size:13px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.seg{display:flex; border:1px solid var(--line-2); border-radius:var(--r1); overflow:hidden;}
.seg button{background:transparent; border:none; color:var(--text-dim); padding:9px 15px; font-size:13px; font-weight:500; transition:background .14s, color .14s;}
.seg button+button{border-left:1px solid var(--line-2);}
.seg button:hover{background:var(--surface);}
.seg button.active{background:var(--accent); color:var(--on-accent); font-weight:600;}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(172px,1fr)); gap:14px;}
.card-tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:border-color .15s, transform .12s, box-shadow .15s;}
.card-tile:hover{border-color:var(--line-3); transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.5);}
/* No padding here: with border-box sizing it would shrink the 5:7 box the
   artwork fills and leave a frame around every card. The fallback text carries
   its own padding instead. */
.card-tile .art{width:100%; aspect-ratio:5/7; background:var(--bg-2); display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:12px; text-align:center; position:relative; overflow:hidden;}
.card-tile .art img{width:100%;height:100%;object-fit:cover;display:block;}
.card-tile .art-fallback{padding:10px; line-height:1.35;}
.ci-bar{height:3px; width:100%; display:flex;}
.ci-bar span{flex:1;}
.card-tile .info{padding:10px 11px 12px; display:flex; flex-direction:column; gap:5px; flex:1;}
/* Both lines are clamped and hold their height whether or not the text fills
   them. Without that a two-line type line made its whole grid row taller than
   the rest, which is what made the results grid look ragged. */
.card-tile .cname{
  font-size:13px; font-weight:600; line-height:1.3;
  min-height:calc(2 * 1.3em);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.card-tile .ctype{
  font-size:11px; color:var(--text-faint); line-height:1.35;
  min-height:1.35em;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.card-tile .crow{display:flex; align-items:flex-end; justify-content:space-between; margin-top:auto; gap:6px; padding-top:4px;}
.mini-pips{display:flex; gap:2px;}
.mini-pip{width:15px;height:15px;border-radius:50%;display:block;}
.mini-pip img{width:100%;height:100%;display:block;}
.right-group{display:flex; flex-direction:column; gap:3px; align-items:flex-end;}
.badge{font-size:10px; letter-spacing:.05em; padding:2px 7px; border-radius:20px; font-weight:600; white-space:nowrap; text-transform:uppercase;}
.badge.owned{background:var(--ok-soft); color:var(--ok); border:1px solid rgba(65,207,141,.3);}
.badge.buy{background:var(--accent-soft); color:var(--accent-hi); border:1px solid rgba(var(--accent-rgb),.34);}
.badge.flag{background:var(--bad-soft); color:var(--bad); border:1px solid rgba(239,95,95,.3);}
.syn-tag{font-size:10px; color:var(--text-dim); background:var(--surface-3); border:1px solid var(--line); padding:2px 7px; border-radius:20px; white-space:nowrap;}
.syn-tag.hi{color:var(--accent-hi); border-color:rgba(var(--accent-rgb),.3); background:var(--accent-soft);}
.syn-tag.cat{color:var(--info); border-color:rgba(90,169,240,.28); background:var(--info-soft);}
.price{font-size:10.5px; color:var(--text-faint); font-variant-numeric:tabular-nums;}

.tile-actions{position:absolute; top:7px; right:7px; display:flex; gap:5px; opacity:0; transition:opacity .15s; z-index:2;}
.card-tile:hover .tile-actions{opacity:1;}
.icon-btn{width:27px;height:27px;border-radius:var(--r1); border:1px solid var(--line-2); background:rgba(8,9,11,.88); color:var(--text-dim); font-size:14px; line-height:1; display:flex;align-items:center;justify-content:center; padding:0;}
.icon-btn:hover{color:var(--text); border-color:var(--line-3); background:var(--surface-2);}
.icon-btn.danger:hover{color:var(--bad); border-color:rgba(239,95,95,.45);}
.icon-btn .ico{width:15px; height:15px; display:flex;}
.icon-btn .ico svg{width:100%; height:100%; display:block;}
.pick-btn{position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,9,11,.93),transparent 58%); opacity:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:13px; transition:opacity .15s; z-index:1;}
.card-tile:hover .pick-btn{opacity:1;}
@media (hover:none){
  .pick-btn{opacity:1; background:linear-gradient(0deg,rgba(8,9,11,.9),transparent 52%);}
  .tile-actions{opacity:1;}
}
.pick-btn button{background:var(--accent); color:var(--on-accent); border:none; font-size:12.5px; font-weight:600; padding:8px 18px; border-radius:var(--r1);}

.empty{border:1px dashed var(--line-2); border-radius:var(--r3); padding:54px 32px; text-align:center; color:var(--text-dim); background:var(--surface);}
.empty h3{color:var(--text); margin-bottom:8px; font-size:19px;}
.load-more{display:flex; justify-content:center; margin-top:22px;}

/* the deck's header and panels, grouped only so a card change can redraw them */
.deck-part{display:contents;}
.cmd-header{display:flex; gap:24px; align-items:flex-start; margin-bottom:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:22px;}
.cmd-imgs{display:flex; gap:10px; flex:0 0 auto;}
.cmd-header .cimg{width:158px; border-radius:var(--r2); border:1px solid var(--line-2); display:block;}
.cmd-header .txt{flex:1; min-width:0;}
.cmd-header h2{font-size:27px; text-transform:uppercase; letter-spacing:.035em; margin-bottom:5px;}
.cmd-header .type{color:var(--text-dim); font-size:13.5px; margin-bottom:11px; display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.cmd-header .oracle{font-size:13.5px; color:var(--text-dim); max-width:680px; white-space:pre-line; line-height:1.6;}
.tag-list{display:flex; gap:6px; flex-wrap:wrap; margin-top:11px; align-items:center;}
.tag{font-size:11.5px; padding:3px 11px; border-radius:20px; border:1px solid var(--line-2); color:var(--text-dim); background:var(--surface-2);}
.tag.tribal{border-color:rgba(var(--accent-rgb),.34); color:var(--accent-hi); background:var(--accent-soft);}
.tag.mechanic{border-color:rgba(90,169,240,.3); color:var(--info); background:var(--info-soft);}
.mana-sym{width:1.05em;height:1.05em;vertical-align:-.15em;display:inline-block;margin:0 1px;border-radius:50%;}
.data-note{font-size:12.5px; color:var(--text-faint); margin-top:13px; line-height:1.55;}
.cmd-actions{display:flex; gap:8px; margin-top:15px; flex-wrap:wrap;}

.curve-wrap{margin-top:18px; max-width:470px;}
.curve-title{font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--text-label); margin-bottom:9px;}
.mana-curve{display:flex; gap:5px; align-items:flex-end; height:74px; padding:12px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2);}
.mana-curve .col{display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; height:100%; justify-content:flex-end;}
.mana-curve .bar{width:100%; background:var(--accent); border-radius:2px; min-height:2px; opacity:.82;}
.mana-curve .lbl{font-size:10.5px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
/* the curve and the colors: side by side where both fit, else stacked */
.deck-charts{display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; max-width:760px;}
.deck-charts .curve-wrap{margin-top:0; flex:1 1 300px; max-width:470px;}
.colors-wrap{flex:1 1 220px; min-width:0;}
.colors-panel{display:flex; flex-direction:column; justify-content:center; gap:11px; min-height:74px;
  padding:12px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2);}
.color-bar{display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-2);}
.cb-seg{flex:1 1 0; min-width:4px;}
.color-grid{display:grid; align-items:center; gap:4px 6px; font-size:12px; font-variant-numeric:tabular-nums;}
.cg-label{font-size:10.5px; color:var(--text-label); padding-right:4px; white-space:nowrap;}
.cg-head, .cg-v{text-align:center; min-width:0;}
.cg-head .mana-sym{width:15px; height:15px; margin:0; vertical-align:middle;}
.cg-v{font-weight:600;}
.cg-v.low{color:var(--warn);}

.category-block{margin-bottom:34px;}
.category-block h3{font-size:17px; text-transform:uppercase; letter-spacing:.09em; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:baseline; color:var(--text-dim); gap:10px;}
.category-block h3 .n{font-size:12px; color:var(--text-faint); font-family:'Inter',sans-serif; letter-spacing:0; font-weight:400; text-transform:none; white-space:nowrap;}

.shop-panel{border:1px solid rgba(var(--accent-rgb),.26); background:var(--accent-soft); border-radius:var(--r3); padding:20px 22px; margin-bottom:30px;}
.shop-panel h3{font-size:18px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px;}
.shop-panel .sub{font-size:13px; color:var(--text-dim); margin-bottom:14px;}
/* affiliate disclosure next to shop buttons (core.js AFFILIATE_NOTE) */
.aff-note{font-size:11.5px; line-height:1.45; color:var(--text-faint); margin:-6px 0 12px;}
.dbody > .aff-note{margin:10px 0 0; text-align:right;}
.cmd-actions + .aff-note{margin:10px 0 0;}
.shop-list{display:flex; flex-direction:column; gap:1px; max-height:310px; overflow:auto; border-radius:var(--r1);}
.shop-row{display:flex; align-items:center; gap:11px; padding:8px 12px; background:var(--surface); font-size:13px;}
.shop-row:hover{background:var(--surface-2);}
.shop-row img{width:32px; height:45px; object-fit:cover; border-radius:4px; flex:0 0 32px; background:var(--surface-3);}
.shop-row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.shop-row .rl{font-size:10.5px; color:var(--text-faint); white-space:nowrap;}
.shop-row .pr{font-variant-numeric:tabular-nums; color:var(--text-dim); white-space:nowrap; font-size:12.5px;}
.shop-row.clickable{cursor:pointer;}
.shop-row.clickable:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}

.modal-back{position:fixed; inset:0; background:rgba(4,5,7,.8); display:flex; align-items:center; justify-content:center; padding:24px; z-index:60; overscroll-behavior:contain;}
/* the page behind an open dialog does not scroll (set by openModal in ui.js) */
html.modal-open, html.modal-open body{overflow:hidden;}
html.modal-open{scrollbar-gutter:stable;}
.modal{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r3); padding:24px; width:min(660px,100%); max-height:86vh; display:flex; flex-direction:column; gap:14px;}
.modal h3{font-size:20px; text-transform:uppercase; letter-spacing:.05em;}
.modal textarea{width:100%; min-height:300px; background:var(--bg-2); border:1px solid var(--line-2); color:var(--text); border-radius:var(--r2); padding:13px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; resize:vertical; line-height:1.55;}
.modal textarea:focus{outline:none; border-color:var(--accent);}
.modal-foot{display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap;}

.field{margin-bottom:18px; max-width:620px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:5px;}
.field .desc, .modal .desc{font-size:12.5px; color:var(--text-faint); margin-bottom:8px; line-height:1.55;}
.field input[type=text]{width:100%; background:var(--surface); border:1px solid var(--line-2); color:var(--text); padding:9px 13px; border-radius:var(--r1); font-family:inherit; font-size:13.5px;}
.field input[type=text]:focus{outline:none; border-color:var(--accent);}
pre.code{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2); padding:15px; overflow:auto; font-size:12px; line-height:1.6; color:var(--text-dim); font-family:ui-monospace,Menlo,monospace; max-width:800px;}
.src-badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:3px 10px; border-radius:20px; border:1px solid var(--line-2); color:var(--text-dim); background:var(--surface-2);}
.src-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);}
.src-badge.live .dot{background:var(--ok);}

/* ---------- search filter panel ---------- */
.filters{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  padding:18px 20px; margin-bottom:22px;
}
.filter-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px;}
.fgroup{min-width:0;}
.fgroup > label{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--text-label); margin-bottom:7px;
}
.fgroup input[type=text], .fgroup input[type=number], .fgroup select{
  width:100%; background:var(--bg-2); border:1px solid var(--line-2); color:var(--text);
  padding:8px 11px; border-radius:var(--r1); font-family:inherit; font-size:13.5px;
}
.fgroup input:focus, .fgroup select:focus{outline:none; border-color:var(--accent);}
.fgroup select{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% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:30px;}
.chips{display:flex; flex-wrap:wrap; gap:5px;}
.chip{
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--text-dim);
  padding:5px 11px; border-radius:20px; font-size:12px; font-weight:500;
  transition:background .13s, color .13s, border-color .13s;
}
.chip:hover{border-color:var(--line-3); color:var(--text);}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.range-row{display:flex; align-items:center; gap:7px;}
.range-row span{color:var(--text-faint); font-size:12px;}
.filter-foot{
  display:flex; gap:9px; align-items:center; margin-top:16px; padding-top:15px;
  border-top:1px solid var(--line); flex-wrap:wrap;
}
.filter-foot .spacer{margin-left:auto;}
.query-preview{
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--text-faint);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r1);
  padding:6px 10px; max-width:100%; overflow:auto; white-space:nowrap;
}
.active-set{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft);
  border:1px solid rgba(var(--accent-rgb),.34); color:var(--accent-hi);
  padding:4px 8px 4px 11px; border-radius:20px; font-size:12.5px;
}
.active-set img{width:15px;height:15px;filter:invert(78%) sepia(40%) saturate(600%) hue-rotate(348deg);}
.active-set button{background:none;border:none;color:inherit;font-size:15px;line-height:1;padding:0 3px;}

/* ---------- set browser ---------- */
.set-list{display:flex; flex-direction:column; gap:1px; border-radius:var(--r2); overflow:hidden;}
.set-row{
  display:flex; align-items:center; gap:14px; padding:11px 15px;
  background:var(--surface); border:1px solid transparent; border-left:2px solid transparent;
  text-align:left; width:100%; color:var(--text); transition:background .13s, border-color .13s;
}
.set-row:hover{background:var(--surface-2); border-left-color:var(--accent);}
.set-icon{width:26px;height:26px;flex:0 0 26px; display:flex;align-items:center;justify-content:center;}
.set-icon img{width:100%;height:100%;filter:invert(88%);}
.set-main{flex:1; min-width:0;}
.set-name{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.set-meta{font-size:11.5px; color:var(--text-faint); margin-top:1px;}
.set-code{
  font-family:ui-monospace,Menlo,monospace; font-size:11px; text-transform:uppercase;
  background:var(--surface-3); color:var(--text-dim); padding:2px 7px; border-radius:4px; flex:0 0 auto;
}
.set-count{font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:58px; text-align:right;}
.set-owned{font-size:11px; color:var(--ok); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:74px; text-align:right;}
.year-head{
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-label); padding:16px 2px 7px; border-bottom:1px solid var(--line); margin-bottom:8px;
}

/* ---------- card detail modal ---------- */
.detail{display:flex; gap:22px; align-items:flex-start;}
.detail .dimg{width:230px; flex:0 0 230px; border-radius:var(--r2); border:1px solid var(--line-2); display:block;}
.detail .dbody{flex:1; min-width:0;}
.detail h3{font-size:22px; margin-bottom:3px;}
.detail .dtype{color:var(--text-dim); font-size:13px; margin-bottom:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.detail .dtext{font-size:13.5px; color:var(--text-dim); white-space:pre-line; line-height:1.6; margin-bottom:13px;}
.dmeta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px;}
.dmeta .m{font-size:11.5px; padding:3px 10px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);}
.dmeta .m.ok{color:var(--ok); border-color:rgba(65,207,141,.3); background:var(--ok-soft);}

/* ---------- card scanner ---------- */
.scan-wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; align-items:start;}
.scan-stage{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r3); padding:16px;}
.video-box{
  position:relative; width:100%; aspect-ratio:4/3; background:#000;
  border-radius:var(--r2); overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.video-box video{width:100%; height:100%; object-fit:cover; display:block;}
.video-box .placeholder{color:var(--text-faint); font-size:13.5px; text-align:center; padding:26px; max-width:350px; line-height:1.6;}
.guide{position:absolute; inset:0; pointer-events:none;}
.guide .card-frame{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  height:84%; aspect-ratio:5/7; border:2px solid rgba(255,255,255,.55); border-radius:10px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.42);
}
.guide .title-band{
  position:absolute; left:4%; right:4%; top:4.5%; height:7.5%;
  border:1.5px dashed var(--accent); border-radius:3px; background:rgba(var(--accent-rgb),.16);
}
.guide .hint{position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:11px; color:var(--accent-hi); letter-spacing:.04em;}
.scan-controls{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap;}
.scan-controls .btn{flex:1; min-width:118px;}
.crop-preview{margin-top:14px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r1); padding:5px; display:none;}
.crop-preview canvas{width:100%; display:block;}
.ocr-line{
  margin-top:10px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r1); padding:8px 11px; word-break:break-word;
}
.conf-bar{height:3px; background:var(--surface-3); border-radius:2px; margin-top:7px; overflow:hidden;}
.conf-bar span{display:block; height:100%; background:var(--accent); border-radius:2px;}
.match-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:18px; position:relative;}
.match-card h3{font-size:17px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:13px;}
/* Only the fullscreen sheet needs a way out; on desktop this is just a column. */
.sheet-x{display:none;}
body.scan-full .sheet-x{
  display:flex; position:absolute; top:14px; right:14px; z-index:3;
  width:34px; height:34px; border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--surface-3); border:1px solid var(--line-2); color:var(--text-dim);
}
body.scan-full .sheet-x:hover{color:var(--text); border-color:var(--line-3);}
body.scan-full .sheet-x svg{width:16px; height:16px; display:block;}
body.scan-full .match-card h3{padding-right:42px;}
.match-body{display:flex; gap:15px; align-items:flex-start;}
.match-body img{width:112px; flex:0 0 112px; border-radius:var(--r1); border:1px solid var(--line-2);}
.match-info{flex:1; min-width:0;}
.match-info .mn{font-size:15px; font-weight:600; margin-bottom:3px;}
.match-info .mt{font-size:12px; color:var(--text-faint); margin-bottom:9px;}
.match-actions{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap;}
.manual-row{display:flex; gap:8px; margin-top:13px;}
.manual-search{display:inline-flex; align-items:center; gap:8px;}
.manual-search svg{width:18px; height:18px;}
.manual-row input{flex:1; background:var(--bg-2); border:1px solid var(--line-2); color:var(--text); padding:8px 12px; border-radius:var(--r1); font-family:inherit; font-size:13.5px;}
.manual-row input:focus{outline:none; border-color:var(--accent);}
.queue-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:14px 16px 16px; margin-top:18px;}
/* The scan list, after the reference app: a centred count with the menu
   beside it, a search over the stack, then one roomy row per card. */
.qhead{display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:4px; margin-bottom:12px;}
.qhead-text{grid-column:2; text-align:center; min-width:0;}
.qhead h3{font-family:'Inter',system-ui,sans-serif; font-size:19px; font-weight:700; letter-spacing:0; text-transform:none; line-height:1.25;}
.qhead .sub{font-size:12px; color:var(--text-faint); margin-top:2px; font-variant-numeric:tabular-nums;}
.qhead .qmore{grid-column:3; justify-self:end;}
.qbtn{
  width:40px; height:40px; flex:0 0 40px; padding:0; border:none; border-radius:50%;
  background:none; color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .14s, color .14s;
}
.qbtn svg{width:22px; height:22px; display:block;}
.qbtn:hover{color:var(--text); background:var(--surface-2);}
.qbtn.danger:hover{color:var(--bad);}
.qfind{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.qsearch{
  flex:1; min-width:0; height:44px; padding:0 16px; display:flex; align-items:center; gap:10px;
  border-radius:22px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-faint);
}
.qsearch:focus-within{border-color:var(--accent);}
.qsearch svg{width:19px; height:19px; flex:0 0 19px;}
/* 16px keeps iOS from zooming the page when the field takes focus */
.qsearch input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:16px;}
.qsearch input::-webkit-search-cancel-button{filter:invert(.7);}
.qadd svg{width:24px; height:24px;}
.queue-list{display:flex; flex-direction:column; max-height:560px; overflow-y:auto; overscroll-behavior:contain;}
.queue-row{display:flex; align-items:flex-start; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.queue-row:last-of-type{border-bottom:none;}
.queue-row[hidden]{display:none;}
.qthumb{
  position:relative; width:74px; flex:0 0 74px; aspect-ratio:488/680; overflow:hidden;
  border-radius:5px; background:var(--surface-3); box-shadow:0 0 0 1px var(--line-2);
}
.qthumb.is-foil{box-shadow:0 0 0 1px rgba(160,200,255,.4);}
.qthumb .qimg{width:100%; height:100%; object-fit:cover; display:block;}
.qmid{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding-top:1px;}
.qname{
  font-size:15px; font-weight:700; line-height:1.25; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.qset{display:flex; align-items:center; gap:6px; min-width:0; font-size:13px; color:var(--text-dim);}
.qseticon{width:16px; height:16px; flex:0 0 16px; filter:invert(88%);}
.qsetname{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.qcn{flex:0 0 auto; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.qchips{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.qchip{
  font-size:11px; font-weight:600; letter-spacing:.04em; line-height:20px; height:20px; padding:0 8px;
  border-radius:6px; background:var(--surface-3); border:none; color:var(--text);
}
.qchip.foil{color:#9fd4ff; background:rgba(120,190,255,.14);}
.qchip.check{color:var(--warn); background:rgba(var(--warn-rgb),.14); cursor:pointer; font-family:inherit;}
/* a stand-in from the artwork index while Scryfall's details load */
.qchip.loading{display:inline-flex; align-items:center; gap:5px; color:var(--text-dim);}
.qchip.loading .spinner{width:10px; height:10px; border-width:1.5px;}
.queue-row.pending .qthumb .qimg{opacity:.7;}
.qprice.unknown{font-size:13px; color:var(--text-faint);}
/* condition as a short code in a traffic-light tone */
.qcond{
  display:inline-flex; align-items:center; justify-content:center; height:20px; min-width:26px; padding:0 6px;
  border-radius:10px; font-size:10.5px; font-weight:700; letter-spacing:.04em;
}
.qcond.c1{color:var(--ok);  background:var(--ok-soft);}
.qcond.c2{color:#8fd46a;    background:rgba(143,212,106,.13);}
.qcond.c3{color:var(--warn); background:rgba(var(--warn-rgb),.14);}
.qcond.c4{color:#f39a52;    background:rgba(243,154,82,.14);}
.qcond.c5{color:var(--bad); background:var(--bad-soft);}
.qprice{font-size:14px; color:var(--text); font-variant-numeric:tabular-nums;}
.qtime{font-size:12.5px; color:var(--text-faint);}
.qacts{display:flex; flex-direction:column; gap:12px; flex:0 0 auto; margin-right:-6px;}
.qempty{text-align:center; color:var(--text-faint); font-size:13.5px; line-height:1.5; padding:8px 0;}
.qempty[hidden]{display:none;}
.qadd-name{display:flex; margin:6px auto 0;}
.qadd-name[hidden]{display:none;}
.qadd-name svg, .qfoot .btn svg{width:18px; height:18px; flex:0 0 18px;}
.qfoot{display:flex; gap:10px; justify-content:center; margin-top:12px;}
.qfoot .btn{flex:1 1 0; min-width:0; max-width:230px; height:46px; border-radius:23px; font-size:15px; font-weight:600; gap:8px;}
.qfoot .btn span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.qfoot .qclear{background:transparent; border-color:rgba(255,255,255,.32);}
/* the kebab menu */
.qmenu{display:flex; flex-direction:column; gap:1px; margin-top:12px; border-radius:var(--r2); overflow:hidden;}
.qmenu-item{
  text-align:left; padding:14px 16px; background:var(--bg-2); border:none; color:var(--text);
  font:inherit; font-size:15px; cursor:pointer;
}
.qmenu-item:hover{background:var(--surface-2);}

/* The per-card editor behind the pencil. */
.qedit-top{display:flex; gap:15px; align-items:flex-start;}
.qedit-top .dimg{width:120px; flex:0 0 120px;}
.qedit-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.qedit-price{font-size:14px; font-variant-numeric:tabular-nums; color:var(--text);}
.qedit-fields{display:flex; flex-direction:column; gap:10px;}
.qedit-row{display:flex; align-items:center; gap:12px;}
.qedit-label{
  flex:0 0 96px; font-size:12px; font-weight:600; color:var(--text-dim);
  letter-spacing:.03em;
}
.qedit-select{
  flex:1; min-width:0; background:var(--surface); border:1px solid var(--line-2); color:var(--text);
  padding:8px 12px; border-radius:var(--r1); font-family:inherit; font-size:13.5px;
}
.qedit-select:focus{outline:none; border-color:var(--accent);}
.qty-btn{width:24px;height:24px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-dim);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.qty-btn:hover{color:var(--text);border-color:var(--line-3);}
@media(max-width:1050px){ .scan-wrap{grid-template-columns:1fr;} }

/* ---------- binders ---------- */
.binder-bar{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:16px;
  padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
}
.binder-bar .lbl{
  font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--text-label); margin-right:4px;
}
.binder-chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--bg-2);
  border:1px solid var(--line-2); color:var(--text-dim);
  padding:5px 11px; border-radius:20px; font-size:12.5px; transition:all .13s;
}
.binder-chip:hover{border-color:var(--line-3); color:var(--text);}
.binder-chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.binder-chip .n{font-size:11px; opacity:.72; font-variant-numeric:tabular-nums;}
.binder-edit{
  width:22px;height:22px;border-radius:5px;border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--text-faint);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
}
.binder-edit:hover{color:var(--text); border-color:var(--line-3);}

/* ---------- collection value ---------- */
.value-bar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px;
  padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
}
.value-main{display:flex; flex-direction:column; gap:2px;}
.value-main .amount{
  font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:700;
  color:var(--accent-hi); line-height:1; font-variant-numeric:tabular-nums;
}
.value-main .caption{font-size:11.5px; color:var(--text-faint); letter-spacing:.02em;}
.value-split{display:flex; gap:14px; flex-wrap:wrap;}
.value-chip{font-size:12px; color:var(--text-dim);}
.value-chip b{color:var(--text); font-weight:600; font-variant-numeric:tabular-nums;}
.value-bar select{
  margin-left:auto; background:var(--bg-2); border:1px solid var(--line-2); color:var(--text);
  padding:8px 30px 8px 12px; border-radius:var(--r1); font-family:inherit; font-size:13px;
  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% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.value-bar select:focus{outline:none; border-color:var(--accent);}

/* ---------- decks list ---------- */
.deck-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px;}
.deck-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
  overflow:hidden; display:flex; flex-direction:column; text-align:left; width:100%;
  transition:border-color .15s, transform .12s, box-shadow .15s;
  position:relative; cursor:pointer;
  color:var(--text);            /* a <button> does not inherit this, so the title went black */
  font-family:inherit;
}
.deck-card .deck-del{
  position:absolute; top:8px; right:8px; z-index:2; opacity:0; transition:opacity .15s;
}
.deck-card:hover .deck-del, .deck-card:focus-within .deck-del{opacity:1;}
@media (hover:none){ .deck-card .deck-del{opacity:1;} }
.deck-card:hover{border-color:var(--line-3); transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.5);}
.deck-art{height:118px; background:var(--bg-2); position:relative; overflow:hidden;}
.deck-art img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
.deck-art .fade{position:absolute; inset:0; background:linear-gradient(0deg,var(--surface),transparent 62%);}
.deck-body{padding:12px 14px 14px;}
.deck-body .dn{font-size:15px; font-weight:600; margin-bottom:2px;}
.deck-body .dc{font-size:12px; color:var(--text-faint); margin-bottom:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.deck-body .dstats{display:flex; gap:6px; flex-wrap:wrap;}
.deck-body .dstat{font-size:11px; padding:2px 8px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);}
.deck-body .dstat.ok{color:var(--ok); border-color:rgba(65,207,141,.3); background:var(--ok-soft);}
.deck-body .dstat.buy{color:var(--accent-hi); border-color:rgba(var(--accent-rgb),.3); background:var(--accent-soft);}
/* phones: two across, sized like the Precons tiles (20-wishlist.css) */
@media(max-width:960px){
  .deck-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  .deck-card:hover{transform:none; box-shadow:none;}
  .deck-art{height:auto; aspect-ratio:626/457;}
  .deck-card .deck-del{top:6px; right:6px; width:30px; height:30px;}
  .deck-card .deck-del svg{width:15px; height:15px;}
  .deck-body{padding:8px 9px 10px;}
  .deck-body .dn{font-size:13.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .deck-body .dc{font-size:11.5px; margin-bottom:6px;}
  .deck-body .dstats{gap:4px;}
  .deck-body .dstat{font-size:10px; padding:1px 6px;}
}

/* ---------- deck editor ---------- */
.deck-topbar{margin-bottom:20px;}
.deck-name-input{
  background:transparent; border:1px solid transparent; color:var(--text);
  font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:var(--r1);
  min-width:210px; max-width:440px; flex:1;
}
.deck-name-input:hover{border-color:var(--line);}
.deck-name-input:focus{outline:none; border-color:var(--accent); background:var(--bg-2);}
.add-panel{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r3); padding:16px 18px; margin-bottom:22px;}
.add-head{display:flex; gap:9px; flex-wrap:wrap;}
.add-head .search-input{flex:1; min-width:200px;}
.add-hint{font-size:12px; color:var(--text-faint); margin-top:9px;}
.add-results{display:flex; flex-direction:column; gap:1px; max-height:330px; overflow:auto; margin-top:12px; border-radius:var(--r1);}
.add-row{display:flex; align-items:center; gap:11px; padding:7px 11px; background:var(--bg-2); font-size:13px;}
.add-row:hover{background:var(--surface-2);}
.add-row.clickable{cursor:pointer;}
.add-row.clickable:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.add-row img{width:30px; height:42px; object-fit:cover; border-radius:3px; flex:0 0 30px; background:var(--surface-3);}
.add-row .an{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.add-row .at{font-size:11px; color:var(--text-faint); white-space:nowrap;}
.add-row .badge{flex:0 0 auto;}

/* ---------- toasts ---------- */
#toastHost{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none;
}
.toast{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text);
  padding:10px 15px; border-radius:var(--r2); font-size:13.5px; max-width:340px;
  box-shadow:0 8px 26px rgba(0,0,0,.55); animation:toastIn .18s ease;
}
.toast.ok{border-color:rgba(65,207,141,.4);}
.toast.warn{border-color:rgba(var(--warn-rgb),.45);}
.toast.bad{border-color:rgba(239,95,95,.45);}
.toast.out{opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;}
.toast.has-undo{display:flex; align-items:center; gap:12px; pointer-events:auto; padding:7px 7px 7px 15px;}
.toast.has-undo .t-text{flex:1; min-width:0;}
.toast-undo{
  flex:0 0 auto; min-height:34px; padding:0 14px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--surface-3); color:var(--accent); font:inherit; font-weight:650; cursor:pointer;
}
.toast-undo:hover{background:var(--surface-2); border-color:var(--accent);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- account ---------- */
.auth-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r2); padding:16px;}
.auth-row{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:10px;}
.auth-row input{
  flex:1; min-width:180px; background:var(--surface); border:1px solid var(--line-2); color:var(--text);
  padding:9px 12px; border-radius:var(--r1); font-family:inherit; font-size:13.5px;
}
.auth-row input:focus{outline:none; border-color:var(--accent);}
.auth-actions{display:flex; gap:8px; flex-wrap:wrap;}
.auth-delete{margin-top:14px; color:var(--bad);}
.auth-user{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.auth-user .who{font-size:14px; font-weight:600;}
.auth-user .sub{font-size:12px; color:var(--text-faint);}
.auth-msg{margin-top:10px; font-size:12.5px;}
.auth-msg.bad{color:var(--bad);}
.auth-msg.ok{color:var(--ok);}
.auth-msg.warn{color:var(--warn);}
/* the one-time "confirm your email" notice after a sign-up */
.modal.confirm-mail{gap:10px;}
.confirm-mail .cm-icon{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.confirm-mail .cm-icon svg{width:24px; height:24px;}
.confirm-mail .cm-text, .confirm-mail .cm-hint{margin:0;}
.confirm-mail .cm-text{font-size:14px; line-height:1.55; color:var(--text-dim);}
.confirm-mail .cm-text strong{color:var(--text); word-break:break-all;}
.confirm-mail .cm-hint{font-size:12.5px; line-height:1.5; color:var(--text-faint);}
.confirm-mail .modal-foot{margin-top:6px;}
.sync-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:3px 9px;
  border-radius:20px; border:1px solid var(--line-2); color:var(--text-faint);
}
.sync-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);}
.sync-pill.on .dot{background:var(--ok);}
.sync-pill.busy .dot{background:var(--accent);}
.sync-pill.warn .dot{background:var(--warn);}

/* ---------- deck editor: add panel ---------- */
.add-filters{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;}
.add-filters .pip{width:28px;height:28px;}
.add-filters .chip{font-size:11.5px; padding:4px 9px;}
.add-toggle{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-dim); cursor:pointer;}
.add-toggle input{accent-color:var(--accent); width:14px; height:14px; cursor:pointer;}
.flag-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.qty-box{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.qty-box .q{font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-dim); min-width:20px; text-align:center;}
.deck-row-actions{display:flex; align-items:center; gap:5px;}
.copies-badge{
  position:absolute; top:7px; left:7px; z-index:2;
  background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:20px;
}

/* ---------- search mode switch ---------- */
.mode-row{display:flex; align-items:center; gap:11px; margin-bottom:18px;}
.mode-row label{
  font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--text-label);
}
.mode-row select{
  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; min-width:150px;
  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;
}
.mode-row select:focus{outline:none; border-color:var(--accent);}

/* ---------- rules report ---------- */
.rules-panel{border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r3); padding:16px 20px; margin-bottom:26px;}
.rules-panel.ok{border-color:rgba(65,207,141,.3); background:var(--ok-soft);}
.rules-panel.warn{border-color:rgba(var(--warn-rgb),.3); background:rgba(var(--warn-rgb),.12);}
.rules-panel.bad{border-color:rgba(239,95,95,.34); background:var(--bad-soft);}
.rules-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.rules-head h3{font-size:17px; text-transform:uppercase; letter-spacing:.07em;}
.rules-head .btn{margin-left:auto;}
.rules-pill{font-size:11.5px; padding:3px 11px; border-radius:20px; font-weight:600; border:1px solid var(--line-2); color:var(--text-dim);}
.rules-pill.ok{color:var(--ok); border-color:rgba(65,207,141,.34);}
.rules-pill.warn{color:var(--warn); border-color:rgba(var(--warn-rgb),.34);}
.rules-pill.bad{color:var(--bad); border-color:rgba(239,95,95,.4);}
.rules-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px;}
.rules-list li{display:flex; gap:10px; font-size:13.5px; line-height:1.55; color:var(--text-dim); align-items:flex-start;}
.rule-mark{flex:0 0 17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; margin-top:2px;}
.rule-ok .rule-mark{background:var(--ok-soft); color:var(--ok);}
.rule-warn .rule-mark{background:rgba(var(--warn-rgb),.12); color:var(--warn);}
.rule-error .rule-mark{background:var(--bad-soft); color:var(--bad);}
.rule-error{color:var(--text);}
/* A note states a fact about the deck rather than passing or failing it —
   used for the sideboard, which no Commander rule either permits or forbids. */
.rule-note .rule-mark{background:var(--surface-3); color:var(--text-dim); font-style:italic;}

/* The sideboard sits below the deck and is visibly not one of the category
   blocks that add up to 100. */
.sideboard-block{border-top:1px solid var(--line); padding-top:20px; margin-top:6px;}
.sideboard-block > h3 .n{color:var(--text-faint);}
.sideboard-block .col-note{margin:0 0 14px;}
/* Mainboard / sideboard switch in the card detail. */
.board-seg{margin-bottom:9px;}
.board-seg button{padding:7px 15px;}
.board-seg button:disabled{cursor:default; opacity:1;}
.detail-manage .col-note{margin-top:0;}
/* "Search by name" in the scanner. A fixed height with the field on top:
   the sheet does not grow or shrink while the results change, so the field
   never moves out of sight; only .ns-body scrolls. */
.modal.name-search{height:min(640px, 86vh); gap:12px; overflow:hidden;}
.name-search .qsearch{flex:0 0 auto; color:var(--text-faint);}
.ns-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.ns-note{color:var(--text-faint); font-size:13.5px; line-height:1.5; padding:6px 2px;}
.ns-names{margin-top:0;}
.ns-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.ns-back{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:8px 12px;}
.ns-back svg{width:18px; height:18px;}
.ns-name{flex:1; min-width:0; font-size:16px; font-weight:700; line-height:1.3; overflow-wrap:anywhere;}
.ns-finish{width:fit-content; margin-bottom:4px;}
.ns-hint{padding-top:4px;}
.ns-body .ns-prints{max-height:none; overflow:visible;}
button.print-row{width:100%; border:none; color:var(--text); font:inherit; text-align:left; cursor:pointer;}