/* ============================================================
   24-lockfit.css (3 Nov 2026)
   The deck lock (decks.js setDeckLocked): the padlock on a deck's tile in
   the list and in the open deck's top bar, the note over a locked deck's
   cards, and the locked line in the card detail. Then "Best fit in your
   decks" in the card detail (search.js deckFitSection, engine.js deckFit).
   ============================================================ */

/* ---------- the lock: deck list ---------- */
/* top left, opposite the delete button; shown like it (on hover, always on
   touch screens), and always while the deck is locked */
.deck-card .deck-lock{
  position:absolute; top:8px; left:8px; z-index:2; opacity:0; transition:opacity .15s;
}
.deck-card:hover .deck-lock, .deck-card:focus-within .deck-lock, .deck-card .deck-lock.on{opacity:1;}
@media (hover:none){ .deck-card .deck-lock{opacity:1;} }
.deck-card .deck-lock.on{color:var(--accent-hi); border-color:rgba(var(--accent-rgb),.45);}
@media(max-width:960px){
  .deck-card .deck-lock{top:6px; left:6px; width:32px; height:32px;}
  .deck-card .deck-lock svg{width:15px; height:15px;}
}

/* ---------- the lock: open deck ---------- */
.deck-lock-btn svg{transform:none;}                 /* .deck-menu-btn turns its ··· */
.deck-lock-btn svg{width:20px; height:20px;}
.deck-lock-btn.on{color:var(--accent-hi);}
.deck-hero.has-art .deck-lock-btn{background:rgba(8,11,18,.42); border-radius:50%;}
.deck-hero.has-art .deck-lock-btn.on{color:var(--accent-hi);}
/* locked: the name is no field any more */
.deck-locked .deck-name-input{cursor:default;}
.deck-locked .deck-name-input:hover, .deck-locked .deck-name-input:focus{border-color:transparent; background:transparent;}
@media(max-width:960px){
  /* name, padlock and ··· on one line; the buttons below as before */
  .deck-title-row{grid-template-columns:minmax(0,1fr) auto auto;}
  .deck-lock-btn{margin-right:-4px;}
  /* locked, only Playtest is left below: full width */
  .deck-locked .deck-top-actions{grid-template-columns:1fr;}
}
.deck-top-actions .btn[hidden]{display:none;}

.lock-note{display:flex; align-items:center; gap:10px; margin-top:0; margin-bottom:16px; padding:11px 14px;}
.lock-note > .ico{width:18px; height:18px; flex:0 0 18px; color:var(--info);}
.lock-note > .ico svg{width:100%; height:100%; display:block;}
.lock-note > span:not(.ico){flex:1 1 auto; min-width:0;}
.lock-note .btn{flex:0 0 auto;}

/* card detail, "In this deck" */
.dk-locked{display:flex; align-items:flex-start; gap:7px;}
.dk-locked .ico{width:14px; height:14px; flex:0 0 14px; margin-top:2px; color:var(--info);}
.dk-locked .ico svg{width:100%; height:100%; display:block;}

/* ---------- best fit in your decks (card detail) ---------- */
.dactions .fit-box{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);}
.fit-list{display:flex; flex-direction:column; gap:1px; border-radius:10px; overflow:hidden;}
.fit-row{display:flex; align-items:center; gap:10px; background:var(--surface); padding-right:10px; min-width:0;}
.fit-row.best{box-shadow:inset 3px 0 0 var(--accent);}
.fit-open{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:13px; padding:10px 0 10px 9px;
  background:none; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.fit-row:hover{background:var(--surface-2);}
.fit-open:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.fit-open .dk-art{width:58px; height:42px; flex-basis:58px; border-radius:7px;}
.fit-open .dk-name{font-size:15px;}
.fit-open .dk-sub{font-size:13px;}
.fit-top{display:flex; align-items:center; gap:8px; min-width:0;}
.fit-best{flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-hi); border:1px solid rgba(var(--accent-rgb),.4); border-radius:20px; padding:1px 7px;}
.fit-why{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.fit-tag{font-size:11.5px; line-height:1.35; padding:1px 7px; border-radius:8px; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--line);}
.fit-tag.hi{color:var(--ok); border-color:rgba(63,199,138,.3); background:var(--ok-soft);}
.fit-tag.low{color:var(--text-faint);}
.fit-tag.swap{color:var(--text); border-style:dashed;}
.fit-side{flex:0 0 auto; display:flex; align-items:center; gap:10px;}
/* the number and its word, coloured by band */
.fit-score{display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:58px; text-align:right;}
.fit-n{font-size:20px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.fit-l{font-size:11px; color:var(--text-dim); white-space:nowrap;}
.fit-score.great .fit-n{color:var(--ok);}
.fit-score.good .fit-n{color:var(--accent-hi);}
.fit-score.some .fit-n{color:var(--text);}
.fit-score.weak .fit-n{color:var(--text-faint);}
.fit-add .ico{width:16px; height:16px; display:flex;}
.fit-add .ico svg{width:100%; height:100%; display:block;}
.fit-add:disabled{opacity:.55; cursor:default;}
.fit-rest{margin-top:10px;}
.fit-rest[hidden]{display:none;}
.fit-how{margin-top:8px; font-size:12px !important; color:var(--text-faint);}
@media(max-width:600px){
  /* the reasons get the row's width; the score and + stay at the right */
  .fit-open{gap:10px;}
  .fit-open .dk-art{width:46px; height:34px; flex-basis:46px;}
  .fit-score{min-width:0;}
  .fit-l{display:none;}
}