/* Decks (#/decks). Loaded from inside #decks-view; uses the tokens in system.css. */

@media (max-width: 720px) {
  /* Five tabs: Dashboard, Collection, Scan (middle), Decks, Sets. */
  body.signed-in .tabbar { grid-template-columns: 1fr 1fr 84px 1fr 1fr; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.linkish:hover { color: var(--text); }

#decks-view { max-width: 1240px; width: 100%; margin: 0 auto; }
.dk-loading { padding: var(--space-5) 0; }
.dk-error, .dk-p-error { color: var(--danger); }
.dk-sym { width: 15px; height: 15px; vertical-align: -2px; margin-right: 1px; }
.dk-sym-split { margin: 0 3px; color: var(--muted); }
.dk-ci { display: inline-flex; gap: 1px; align-items: center; }
.dk-ci .dk-sym { width: 17px; height: 17px; }
.dk-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap;
}
.dk-chip button { border: 0; background: none; padding: 0 2px; color: var(--muted); }
.dk-chip-built { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.dk-small { padding: 4px 12px; font-size: var(--text-meta); min-height: 32px; }
.btn.dk-small { padding: 4px 12px; }
.dk-danger { color: var(--danger) !important; }

/* ---- list */
.dk-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dk-list-tools { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.dk-list-tools #dk-find { flex: 1 1 220px; max-width: 360px; }
.dk-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.dk-tile {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3);
  color: var(--text); text-decoration: none; transition: border-color 0.15s;
}
.dk-tile:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.dk-cover img, .dk-cover-blank { width: 72px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 5px; display: block; background: var(--bg); }
.dk-cover-blank { border: 1px dashed var(--line); }
.dk-tile-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.dk-tile-name { font-size: var(--text-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-sub { color: var(--muted); font-size: var(--text-meta); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dk-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 4px; font-size: var(--text-meta); }
.dk-count { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.dk-count i, .dk-legal i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dk-ok i { background: var(--up); }
.dk-bad i { background: var(--danger); }
.dk-unknown i { background: var(--muted); }
.dk-owned-pct { color: var(--muted); }
.dk-empty { text-align: center; padding: var(--space-6) var(--space-5); max-width: 560px; margin: var(--space-5) auto; }
.dk-empty h2 { font-family: Georgia, serif; font-weight: 500; font-size: 1.6rem; margin: var(--space-3) 0 var(--space-2); }
.dk-empty p { margin: 0 0 var(--space-5); line-height: 1.5; }
.dk-empty-icon { width: 54px; height: 54px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; }

/* ---- dialogs */
.dk-dialog {
  color: var(--text); padding: var(--space-5); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  overflow: auto; box-shadow: 0 20px 60px rgb(0 0 0 / 45%);
}
.dk-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.dk-dialog h2 { margin: 0 0 var(--space-4); font-family: Georgia, serif; font-weight: 500; font-size: 1.5rem; }
.dk-new-form { display: grid; gap: var(--space-3); }
.dk-field { display: grid; gap: 6px; color: var(--muted); font-size: var(--text-meta); }
.dk-field .field { color: var(--text); font-size: 1rem; min-height: 44px; width: 100%; }
.dk-format-summary { margin: -4px 0 0; font-size: var(--text-meta); }
.dk-more { justify-self: start; font-size: var(--text-meta); }
.dk-cmd-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-cmd-picked .dk-chip { font-size: var(--text-meta); color: var(--text); padding: 4px 10px; }
.dk-cmd-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dk-cmd-results button {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 6px; min-height: 44px;
}
.dk-cmd-results button:hover { border-color: var(--gold); }
.dk-cmd-results img { width: 34px; height: auto; aspect-ratio: 5 / 7; background: var(--raised); border-radius: 3px; object-fit: cover; }
.dk-cmd-results span { display: grid; }
.dk-cmd-results small { font-size: var(--text-micro); }
.dk-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.dk-dialog-actions .btn { min-height: 44px; padding: 8px 20px; }

/* ---- deck header */
.dk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.dk-save { font-size: var(--text-meta); color: var(--muted); }
.dk-top-right { display: inline-flex; align-items: center; gap: var(--space-3); }
.dk-save-error, .dk-save-conflict { color: var(--danger); }
.dk-banner { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); border-color: var(--danger); }
.dk-banner p { margin: 0 0 var(--space-2); }
.dk-banner-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dk-header { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-3); }
.dk-cmd-art { display: flex; gap: 6px; flex: none; }
.dk-cmd-img { padding: 0; border: 0; background: none; border-radius: 7px; overflow: hidden; }
.dk-cmd-img img { width: 116px; height: auto; aspect-ratio: 5 / 7; display: block; border-radius: 7px; }
.dk-cmd-art .dk-cmd-img + .dk-cmd-img img { width: 92px; }
.dk-head-main { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--space-2); }
.dk-name {
  font-family: Georgia, serif; font-size: var(--text-title); font-weight: 500; background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-row); padding: 0 6px; margin-left: -7px; width: 100%; min-width: 0; color: var(--text);
}
.dk-name:hover { border-color: var(--line); }
.dk-name:focus { border-color: var(--gold); outline: none; background: var(--raised); }
.dk-head-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.dk-format { min-height: 36px; }
.dk-legal {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--raised); color: var(--text);
  border-radius: var(--radius-pill); padding: 5px 12px; font-size: var(--text-meta); font-weight: 600; min-height: 36px; font-variant-numeric: tabular-nums;
}
.dk-legal.dk-bad { border-color: color-mix(in srgb, var(--danger) 60%, var(--line)); }
.dk-legal.dk-ok { border-color: color-mix(in srgb, var(--up) 50%, var(--line)); }
.dk-head-meta { font-size: var(--text-meta); }
.dk-head-spacer { flex: 1; }
.dk-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 36px; }
.dk-switch input {
  appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--line); position: relative; margin: 0; cursor: pointer; transition: background 0.15s;
}
.dk-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform 0.15s; }
.dk-switch input:checked { background: var(--gold); }
.dk-switch input:checked::after { transform: translateX(16px); background: var(--ink); }
.dk-bracket { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.dk-bracket .field { padding: 4px 8px; min-height: 32px; }
.dk-owned-sum { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.dk-asof { margin: 0; font-size: var(--text-meta); }
.dk-menu { position: relative; }
.dk-menu summary { list-style: none; min-height: 36px; min-width: 44px; padding: 4px 12px; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; }
.dk-menu summary::-webkit-details-marker { display: none; }
.dk-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 220px; padding: 6px; box-shadow: 0 12px 30px rgb(0 0 0 / 35%); }
.dk-menu-list button { text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 6px; min-height: 44px; }
.dk-menu-list button:hover { background: var(--bg); }
.dk-problems { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.dk-problems ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.4; }
.dk-p-error::marker { color: var(--danger); }
.dk-p-warn { color: var(--muted); }
.dk-p-note { color: var(--muted); font-style: italic; }
.dk-ok-line { margin: 0; color: var(--up); }
.dk-note { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); line-height: 1.45; font-size: var(--text-meta); }
.dk-note .dk-own { margin-top: 4px; }
.dk-tabs { margin-top: var(--space-2); }

/* ---- cards tab */
.dk-cards-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-5); align-items: start; }
.dk-preview { position: sticky; top: 16px; }
.dk-preview img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 10px 30px rgb(0 0 0 / 35%); }
.dk-preview p { font-size: var(--text-meta); }
.dk-add { padding: var(--space-3); display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.dk-add-row { display: flex; gap: var(--space-2); }
.dk-add-row #dk-q { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 1rem; background: var(--bg); }
.dk-add-row #dk-board { flex: none; max-width: 42%; background: var(--bg); }
.dk-check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--text-meta); color: var(--muted); min-height: 32px; }
.dk-check input { width: 18px; height: 18px; accent-color: var(--gold); }
.dk-results-note { margin: 4px 0 0; font-size: var(--text-meta); }
.dk-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow: auto; }
.dk-result { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: var(--radius-row); }
.dk-result:hover { background: var(--bg); }
.dk-result img, .dk-thumb-blank { width: 40px; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 3px; background: var(--bg); display: block; }
.dk-result-text { display: grid; min-width: 0; }
.dk-result-text strong { font-size: var(--text-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-result-text small { font-size: var(--text-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-result-cost { font-weight: 400; }
.dk-result-actions { display: flex; gap: 6px; }
.dk-result-actions .btn { min-height: 36px; }
.dk-own-tag { color: var(--up); }
.dk-empty-deck { padding: var(--space-5); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-panel); color: var(--muted); }
.dk-empty-deck strong { color: var(--text); }
.dk-view-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-bottom: var(--space-3); font-size: var(--text-meta); color: var(--muted); }
.dk-view-tools label { display: inline-flex; gap: 6px; align-items: center; }
.dk-view-tools .field { padding: 4px 8px; min-height: 32px; color: var(--text); }
.dk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.dk-seg button { background: var(--raised); border: 0; padding: 4px 12px; min-height: 32px; color: var(--muted); font-size: var(--text-meta); }
.dk-seg button.on { background: var(--gold); color: var(--ink); }
.dk-tagman { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-meta); }
.dk-tagman > p { margin: 0 0 var(--space-2); line-height: 1.45; }
.dk-tag-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dk-tag-list li { display: grid; grid-template-columns: 10px minmax(0, 220px) 40px auto; gap: 10px; align-items: center; }
.dk-board { margin-bottom: var(--space-5); }
.dk-board-h { font-family: Georgia, serif; font-weight: 500; font-size: var(--text-section); margin: 0 0 var(--space-2); padding-bottom: 6px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; }
.dk-fold { background: none; border: 0; padding: 0; font: inherit; color: inherit; display: inline-flex; gap: 8px; align-items: center; }
.dk-fold::before { content: "▸"; color: var(--muted); font-size: 0.8em; transition: transform 0.15s; }
.dk-fold[aria-expanded="true"]::before { transform: rotate(90deg); }
.dk-n { color: var(--muted); font-family: "Segoe UI", Candara, sans-serif; font-size: var(--text-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-board-empty { font-size: var(--text-meta); margin: 0; }
.dk-group { break-inside: avoid; margin-bottom: var(--space-3); }
.dk-group-h { display: flex; gap: 6px; align-items: center; font-size: var(--text-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 2px; font-weight: 700; }
.dk-board-main .dk-groups-cols { columns: 2 320px; column-gap: var(--space-5); }
.dk-rows { display: grid; }
.dk-row {
  display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) minmax(0, 7rem) auto auto auto auto; gap: 8px; align-items: center;
  min-height: 34px; padding: 0 6px; border-radius: 6px; font-size: 0.9375rem;
}
.dk-row:hover { background: color-mix(in srgb, var(--raised) 70%, var(--line)); }
.dk-q { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: var(--text-meta); }
.dk-row-name { background: none; border: 0; padding: 6px 0; text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dk-row-name:hover { color: var(--gold); }
.dk-finish { font-size: var(--text-micro); color: var(--foil); font-weight: 600; margin-left: 4px; }
.dk-row-tags { display: flex; gap: 4px; overflow: hidden; }
/* Tags are the user's own words (Archidekt labels like "Have" included): a neutral outline with a "#",
   never coloured, so they can't be read as the computed owned / short / missing dot. */
.dk-tag { display: inline-flex; align-items: center; font-size: var(--text-micro); color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; padding: 0 5px; white-space: nowrap; background: transparent; }
.dk-tag::before { content: "#"; opacity: 0.6; margin-right: 1px; }
/* Tag colour (group headings, tag manager): a small square, never the round ownership dot. */
.dk-tag-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--muted); display: inline-block; flex: none; }
.dk-row-cost { white-space: nowrap; display: inline-flex; }
.dk-row-cost .dk-sym { width: 14px; height: 14px; }
.dk-unknown { color: var(--muted); }
.dk-row-bad .dk-row-name { color: var(--danger); }
.dk-bad-mark { width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: var(--ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.dk-own { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; border: 2px solid transparent; }
.dk-own-have { background: var(--up); }
.dk-own-short { background: transparent; border-color: var(--gold); }
.dk-own-missing { background: transparent; border-color: var(--line); }
.dk-own-over { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.dk-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.dk-img-cell { position: relative; padding: 0; border: 0; background: none; border-radius: 8px; overflow: hidden; }
.dk-img-cell img { width: 100%; height: auto; display: block; aspect-ratio: 5 / 7; }
.dk-img-blank { display: grid; place-items: center; aspect-ratio: 5 / 7; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: var(--text-meta); }
.dk-img-q { position: absolute; left: 6px; top: 22%; background: rgb(0 0 0 / 75%); color: #fff; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--text-meta); }
.dk-img-cell .dk-own { position: absolute; right: 8px; top: 22%; width: 12px; height: 12px; }
.dk-img-cell.dk-row-bad { outline: 2px solid var(--danger); outline-offset: -2px; }

/* ---- card sheet */
.dk-sheet { width: min(720px, calc(100vw - 32px)); padding: var(--space-4); }
.dk-sheet-in { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-4); position: relative; }
.dk-x { position: absolute; right: -6px; top: -6px; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1; }
.dk-sheet-img img { width: 100%; height: auto; border-radius: 11px; display: block; }
.dk-sheet-body { display: grid; gap: var(--space-3); align-content: start; }
.dk-sheet-body h2 { margin: 0; padding-right: 40px; font-size: 1.35rem; }
.dk-sheet-body > p { margin: -6px 0 0; font-size: var(--text-meta); }
.dk-sheet-own { display: flex; gap: 8px; align-items: center; margin: 0 !important; }
.dk-sheet-row { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-meta); color: var(--muted); }
.dk-sheet-row > span:first-child { min-width: 52px; }
.dk-sheet-row.dk-wrap { align-items: flex-start; }
.dk-sheet-row.dk-wrap > span:first-child { padding-top: 8px; }
.dk-stepper { display: inline-flex; align-items: center; gap: 4px; }
.dk-stepper .btn { width: 44px; height: 44px; padding: 0; font-size: 1.2rem; }
.dk-stepper output { min-width: 36px; text-align: center; color: var(--text); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.dk-boards { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-pill { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: var(--radius-pill); padding: 6px 12px; min-height: 36px; font-size: var(--text-meta); }
.dk-pill.on { border-color: var(--gold); color: var(--gold); }
.dk-newtag { display: inline-flex; gap: 4px; }
.dk-newtag .field { width: 120px; min-height: 36px; }
.dk-sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }

/* ---- stats */
.dk-stats { display: grid; gap: var(--space-4); }
.dk-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.dk-stat-cards .panel { padding: var(--space-3) var(--space-4); display: grid; gap: 2px; font-size: var(--text-meta); }
.dk-big { font-family: Georgia, serif; font-size: 2rem; color: var(--text); font-variant-numeric: tabular-nums; }
.dk-stat { padding: var(--space-4); }
.dk-stat h2 { margin: 0 0 var(--space-3); font-family: Georgia, serif; font-weight: 500; font-size: var(--text-section); }
.dk-stat > p.muted { font-size: var(--text-meta); margin: var(--space-2) 0 0; }
.dk-curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; height: 180px; align-items: end; }
.dk-bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; }
.dk-bar-stack { align-self: end; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 0 0; overflow: hidden; min-height: 2px; background: var(--line); }
.dk-bar-stack i { display: block; min-height: 0; }
.dk-bar-n { font-size: var(--text-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-bar-l { font-size: var(--text-meta); color: var(--muted); border-top: 1px solid var(--line); padding-top: 4px; }
.dk-c-creature { background: var(--gold); }
.dk-c-permanent { background: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.dk-c-spell { background: color-mix(in srgb, var(--up) 70%, var(--line)); }
.dk-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-meta); }
.dk-legend span { display: inline-flex; gap: 6px; align-items: center; }
.dk-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.dk-table { width: 100%; border-collapse: collapse; font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.dk-table th, .dk-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.dk-table thead th { color: var(--muted); font-weight: 600; }
.dk-table tbody th { font-weight: 600; }
.dk-share { display: inline-block; width: 60px; height: 6px; background: var(--line); border-radius: 3px; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.dk-share i { display: block; height: 100%; background: var(--gold); }
.dk-roles .dk-low td:nth-child(2) { color: var(--gold); font-weight: 700; }
.dk-odds { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2) var(--space-4); }
.dk-odds p { margin: 0; font-size: var(--text-meta); color: var(--muted); }
.dk-odds strong { font-size: 1.25rem; color: var(--text); margin-right: 6px; font-variant-numeric: tabular-nums; }
.dk-hits { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; height: 70px; margin-top: var(--space-4); align-items: end; }
.dk-hits span { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.dk-hits i { align-self: end; background: color-mix(in srgb, var(--gold) 70%, var(--line)); border-radius: 3px 3px 0 0; min-height: 1px; }
.dk-hits small { color: var(--muted); font-size: var(--text-micro); }
.dk-hits-cap { text-align: center; font-size: var(--text-micro); margin: 2px 0 0; }
.dk-by-turn { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-meta); }
.dk-by-turn label { display: inline-flex; gap: 6px; align-items: center; }
.dk-by-turn .field { max-width: 240px; padding: 4px 8px; min-height: 36px; }
.dk-by-turn-out { margin: 0; flex-basis: 100%; }
.dk-by-turn-out strong { font-size: 1.1rem; }
.dk-hand-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-meta); }
.dk-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: var(--space-3); }
.dk-hand img { width: 100%; height: auto; border-radius: 7px; display: block; }

/* ---- history */
.dk-history { display: grid; gap: var(--space-3); max-width: 760px; }
.dk-history > p { margin: 0; font-size: var(--text-meta); }
.dk-version { display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-3) var(--space-4); }
.dk-version .dk-field { flex: 1; }
.dk-version .btn { min-height: 44px; }
.dk-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dk-change { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); font-size: var(--text-meta); }
.dk-change-head { display: flex; justify-content: space-between; gap: var(--space-3); }
.dk-change-head strong { font-size: var(--text-label); }
.dk-change .btn { justify-self: start; }
.dk-diff { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.dk-plus { color: var(--up); }
.dk-minus { color: var(--down); }
.dk-meta-change { color: var(--muted); }

/* ---- toast */
.dk-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 60; display: flex; gap: var(--space-3); align-items: center;
  padding: 10px 16px; box-shadow: 0 12px 30px rgb(0 0 0 / 40%); max-width: calc(100vw - 32px); font-size: var(--text-meta);
}

/* ---- phone */
@media (max-width: 900px) {
  .dk-cards-layout { grid-template-columns: minmax(0, 1fr); }
  .dk-preview { display: none; }
}
@media (max-width: 720px) {
  #decks-view.view { padding-left: var(--space-3); padding-right: var(--space-3); }
  .dk-decks { grid-template-columns: minmax(0, 1fr); }
  .dk-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .dk-header.dk-has-art { grid-template-columns: 76px minmax(0, 1fr); }
  .dk-head-main { display: contents; }
  .dk-has-art .dk-cmd-art { grid-row: span 2; align-self: start; }
  .dk-head-meta, .dk-asof { grid-column: 1 / -1; }
  .dk-cmd-img img { width: 76px; }
  .dk-cmd-art .dk-cmd-img + .dk-cmd-img { display: none; }
  .dk-name { font-size: 1.6rem; }
  .dk-head-meta .dk-owned-sum { flex-basis: 100%; order: 5; }
  .dk-row { min-height: 44px; grid-template-columns: 36px 22px minmax(0, 1fr) auto auto auto; gap: 6px; }
  .dk-row .dk-row-cost { display: none; }
  .dk-sel { display: grid; place-items: center; min-height: 44px; min-width: 36px; }
  .dk-row-tags { display: none; }
  .dk-add-row { flex-wrap: wrap; }
  .dk-add-row #dk-board { max-width: none; flex: 1 1 100%; min-height: 40px; }
  .dk-images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dk-toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .dk-sheet {
    margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 88dvh; border-radius: 16px 16px 0 0;
    border-bottom: 0; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .dk-sheet-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .dk-sheet-img img { width: 150px; margin: 0 auto; }
  .dk-curve { gap: 4px; height: 150px; }
  .dk-table th, .dk-table td { padding: 8px 4px; }
  .dk-version { flex-wrap: wrap; }
  .dk-dialog { padding: var(--space-4); }
}
.dk-problems .dk-p-error { color: var(--text); }

/* ---- import (#/decks/import) */
.dk-head-actions { display: inline-flex; gap: var(--space-2); align-items: center; }
.dk-empty-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.dk-empty p.dk-empty-hint { margin: var(--space-3) 0 0; font-size: var(--text-meta); }
.dk-imp-title { margin-bottom: var(--space-3); }
.dk-imp-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); margin-bottom: var(--space-4); font-size: var(--text-meta); }
.dk-imp-dest-label { color: var(--text); font-weight: 600; }
.dk-imp-dest .dk-seg button:disabled { opacity: 0.55; cursor: not-allowed; }
.dk-imp-dest-note { flex-basis: 100%; }
.dk-imp-tabs { overflow-x: auto; scrollbar-width: none; }
.dk-imp-tabs a { white-space: nowrap; }
.dk-imp-form { display: grid; gap: var(--space-3); padding: var(--space-4); max-width: 720px; margin-bottom: var(--space-4); }
.dk-imp-form > .btn { justify-self: start; }
.dk-imp-hint { margin: 0; font-size: var(--text-meta); line-height: 1.45; }
.dk-imp-paste textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; min-height: 180px; resize: vertical; }
.dk-imp-file { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-meta); }
.dk-imp-file label.btn { cursor: pointer; }
.dk-imp-row2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); }
.dk-imp-pick { padding: var(--space-3) var(--space-4); max-width: 900px; margin-bottom: var(--space-4); }
.dk-imp-pick-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px var(--space-3); align-items: baseline; margin-bottom: var(--space-2); }
.dk-imp-select { font-size: var(--text-meta); color: var(--muted); }
.dk-imp-rows { list-style: none; padding: 0; margin: 0; }
.dk-imp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.dk-imp-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-width: 0; }
.dk-imp-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.dk-imp-check span { display: grid; gap: 2px; min-width: 0; }
.dk-imp-check strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-imp-check small, .dk-imp-item-main small { font-size: var(--text-meta); }
.dk-imp-status { font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.02em; padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.dk-st-new { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.dk-st-changed_there { color: var(--up); border-color: color-mix(in srgb, var(--up) 50%, var(--line)); }
.dk-st-both { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.dk-imp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-3); font-size: var(--text-meta); }
.dk-imp-review { max-width: 900px; }
.dk-imp-review-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.dk-imp-review-head h2 { font-family: Georgia, serif; font-weight: 500; font-size: var(--text-section); margin: 0; }
.dk-imp-items { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.dk-imp-item { padding: var(--space-3); display: grid; gap: var(--space-2); }
.dk-imp-item-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.dk-imp-mark { font-weight: 700; color: var(--muted); text-align: center; }
.dk-is-ready .dk-imp-mark, .dk-is-done .dk-imp-mark { color: var(--up); }
.dk-is-failed .dk-imp-mark { color: var(--danger); }
.dk-is-failed .dk-imp-item-main small { color: var(--danger); }
.dk-imp-item-main { display: grid; gap: 2px; min-width: 0; }
.dk-imp-item .dk-ok { color: var(--up); }
.dk-imp-item .dk-bad { color: var(--danger); }
.dk-imp-choose { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding-left: 32px; }
.dk-imp-choose .field { min-height: 40px; max-width: 100%; }
.dk-imp-diff, .dk-imp-problems { padding-left: 32px; font-size: var(--text-meta); margin: 0; }
.dk-imp-diff summary, .dk-imp-problems summary { cursor: pointer; }
.dk-imp-diff .dk-diff { columns: 2; margin: 6px 0 0; }
.dk-imp-conflicts { margin: 6px 0 0; }
.dk-imp-warn { padding-left: 32px; margin: 0; font-size: var(--text-meta); color: var(--muted); }
.dk-imp-warn::before { content: "! "; color: var(--gold); font-weight: 700; }
.dk-imp-commit { position: sticky; bottom: 0; background: var(--bg); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.dk-imp-receipt { padding: var(--space-4); max-width: 720px; }
.dk-imp-receipt h2 { font-family: Georgia, serif; font-weight: 500; margin: 0 0 var(--space-3); }
.dk-imp-done { padding-left: 18px; display: grid; gap: 6px; margin: 0 0 var(--space-3); }
.dk-imp-done a, .dk-asof a { color: var(--gold); }
.dk-imp-done a.muted { color: var(--muted); }
.dk-imp-review { scroll-margin-top: 130px; }

@media (max-width: 720px) {
  .dk-head-actions .btn { padding-inline: 12px; }
  .dk-imp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dk-imp-row .dk-imp-status { grid-column: 1; justify-self: start; margin-left: 30px; }
  .dk-imp-row .dk-imp-built { grid-column: 2; grid-row: 1 / span 2; }
  .dk-imp-row2 { grid-template-columns: 1fr; }
  .dk-imp-item-head { grid-template-columns: 22px minmax(0, 1fr); }
  .dk-imp-item-head .dk-imp-status { grid-column: 2; justify-self: start; }
  .dk-imp-choose, .dk-imp-diff, .dk-imp-problems, .dk-imp-warn { padding-left: 0; }
  .dk-imp-choose .field { flex: 1 1 100%; }
  .dk-imp-diff .dk-diff { columns: 1; }
  .dk-imp-commit { bottom: calc(64px + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: var(--space-2); padding: var(--space-2) 0; }
  .dk-imp-commit .btn { flex: none; }
  .dk-imp-commit .muted { flex: 1 1 0; min-width: 0; font-size: var(--text-micro); line-height: 1.3; }
  .dk-imp-commit .muted .dk-undo-note { display: none; }
  .dk-imp-tabs { gap: var(--space-4); }
  .dk-imp-dest-note { font-size: var(--text-micro); }
}

/* ---- owned vs needed (card sheet) */
.dk-sheet-own { display: block; }
.dk-sheet-own p { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.dk-sheet-uses a { color: var(--gold); }
.dk-sheet-uses { list-style: none; padding: 0; margin: 0 0 6px; font-size: var(--text-meta); display: grid; gap: 2px; max-width: 320px; }
.dk-sheet-uses li { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px dotted var(--line); padding: 2px 0; }
.dk-sheet-uses li span:last-child { font-variant-numeric: tabular-nums; }
.dk-sheet-uses-total { font-weight: 600; border-bottom: 0 !important; }

/* ---- share and export dialogs (tools-view.mjs) */
.dk-tool { width: min(640px, calc(100vw - 24px)); }
.dk-tool-note { font-size: var(--text-meta); margin: -4px 0 0; }
.dk-share-what { margin: 0; }
.dk-share-link { display: flex; gap: 8px; }
.dk-share-link .field { flex: 1; min-width: 0; font-size: var(--text-meta); }
.dk-share-actions { flex-wrap: wrap; }
.dk-share-actions .dk-danger { margin-right: auto; }
.dk-shared-chip { cursor: pointer; border-style: solid; color: var(--gold); background: none; }
.dk-export-tabs { margin: -6px 0 2px; }
.dk-export-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-radio { display: inline-flex; }
.dk-radio input { position: absolute; opacity: 0; pointer-events: none; }
.dk-radio span { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; cursor: pointer; font-size: var(--text-meta); }
.dk-radio input:checked + span { border-color: var(--gold); color: var(--gold); background: var(--bg); font-weight: 600; }
.dk-radio input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.dk-export-text { width: 100%; font: 0.8125rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; white-space: pre; }
.dk-check { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.dk-buy-wrap { max-height: 46dvh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-row); }
.dk-buy { width: 100%; margin: 0; }
.dk-buy td, .dk-buy th { padding: 6px 8px; }
.dk-buy tfoot th { text-align: left; font-weight: 400; color: var(--muted); }
.dk-buy .dk-num, .dk-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-finish { font-size: var(--text-micro); color: var(--foil); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.dk-buy-none { margin: 0; }
.dk-buy-print { white-space: nowrap; font-size: var(--text-micro); }
@media (max-width: 640px) {
  .dk-share-actions .btn { flex: 1 1 auto; }
  .dk-share-actions .dk-danger { margin-right: 0; }
}
.dk-tool a { color: var(--gold); }
.dk-tool .dk-dialog-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .dk-tool .dk-dialog-actions .btn { flex: 1 1 auto; padding: 8px 14px; }
}
/* ---- printing picker (card sheet) and Match printings */
.dk-print { display: grid; gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 10px; }
.dk-print-head { display: flex; gap: 10px; align-items: center; }
.dk-print-k { color: var(--muted); font-size: var(--text-meta); min-width: 52px; }
.dk-print-cur { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--text-meta); }
.dk-print-cur strong { font-weight: 600; overflow-wrap: anywhere; }
.dk-print-own { font-size: var(--text-micro); }
.dk-print-own.yes { color: var(--up); }
.dk-print-own.no { color: var(--muted); }
.dk-print-fin { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-print-fin small { color: var(--muted); }
.dk-use-owned { justify-self: start; }
.dk-print-pick { display: grid; gap: 8px; }
.dk-print-filter { min-height: 40px; }
.dk-print-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: min(52dvh, 460px); overflow: auto; overscroll-behavior: contain; }
.dk-print-list li[hidden] { display: none; }
.dk-print-row { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 6px 10px 6px 6px; min-height: 56px; color: var(--text); cursor: pointer; }
.dk-print-row:hover { border-color: var(--gold); }
.dk-print-row.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.dk-print-row img { width: 48px; height: auto; aspect-ratio: 488 / 680; border-radius: 3px; background: var(--raised); object-fit: cover; }
.dk-print-txt { display: grid; gap: 2px; min-width: 0; font-size: var(--text-meta); }
.dk-print-txt strong { font-weight: 600; overflow-wrap: anywhere; }
.dk-print-txt small { font-size: var(--text-micro); }
.dk-print-fins { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dk-fin { font-size: var(--text-micro); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.dk-print-mine { font-size: var(--text-micro); color: var(--up); font-weight: 600; }
.dk-print-check { color: var(--gold); font-weight: 700; }
.dk-print-more { font-size: var(--text-micro); margin: 0; }
.dk-print-more a, .dk-match a { color: var(--gold); }
.dk-match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 52dvh; overflow: auto; }
.dk-match-list .dk-check { display: grid; grid-template-columns: auto 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.dk-match-list img { width: 40px; height: auto; border-radius: 3px; }
.dk-match-list span { display: grid; font-size: var(--text-meta); }
.dk-match-list small { font-size: var(--text-micro); }
.dk-match-none { margin: 0; }
.dk-check { display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .dk-print { padding: 8px; }
  .dk-print-head { flex-wrap: wrap; }
  .dk-print-k { min-width: 0; width: 100%; }
  .dk-print-list { max-height: 48dvh; }
}

/* ---- bracket */
.dk-bracket-chip { cursor: pointer; color: var(--text); background: none; }
.dk-bracket-override { border-style: dashed; border-color: var(--gold); color: var(--gold); }
.dk-bracket-tile { white-space: normal; }
.dk-bracket-panel { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.dk-bracket-panel h2 { margin: 0 0 var(--space-2); font-size: 1.1rem; font-family: Georgia, serif; font-weight: 500; }
.dk-bracket-panel ul { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: 6px; }
.dk-bracket-panel li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--text-meta); line-height: 1.45; }
.dk-br-min { display: inline-flex; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--text-micro); font-weight: 700; padding: 1px 0; color: var(--gold); }
.dk-br-info { color: var(--muted); font-style: italic; }
.dk-br-note { color: var(--muted); }
.dk-bracket-panel p { margin: 0; font-size: var(--text-meta); }

/* Combos (Commander Spellbook) */
.dk-combos { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); }
.dk-combos summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 1.05rem; font-family: Georgia, serif; }
.dk-combos summary::-webkit-details-marker { display: none; }
.dk-combos[open] summary { margin-bottom: var(--space-2); }
.dk-combo-n { font-family: system-ui, sans-serif; font-size: var(--text-meta); font-weight: 400; }
.dk-combo-h { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-meta); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.dk-combo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dk-combo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: var(--text-meta); padding: 6px 8px; border-radius: var(--radius); border: 1px solid transparent; }
.dk-combo-side { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.dk-combo-add { min-height: 32px; }
.dk-combo-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.dk-combo-cards { text-align: left; background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dk-combo-cards:hover { color: var(--gold); }
.dk-combo-early { font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius-pill); padding: 0 6px; }
.dk-combo-miss { color: var(--muted); font-style: italic; }
.dk-combo-prod { grid-column: 1 / -1; font-size: var(--text-micro); }
.dk-combo-link { font-size: var(--text-micro); color: var(--gold); }
.dk-combo-credit { margin: var(--space-2) 0 0; font-size: var(--text-meta); }
.dk-combo-own-note { margin: 0 0 var(--space-2); }
@media (max-width: 720px) {
  .dk-combo { grid-template-columns: minmax(0, 1fr); }
  .dk-combo-side { justify-content: flex-start; }
  .dk-combo-add { min-height: 40px; }
}
.dk-row-combo { outline: 2px solid var(--gold); outline-offset: -2px; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.dk-img-cell.dk-row-combo { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Colour label buckets (Archidekt-style; distinct from #tags and ownership dots) */
.dk-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-micro); font-weight: 600; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; white-space: nowrap; background: transparent; }
.dk-label-swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); }
.dk-pill .dk-label-swatch { margin-right: 2px; }

/* Multi-select + bulk edit */
.dk-sel { display: inline-flex; align-items: center; margin: 0; }
.dk-sel input { width: 18px; height: 18px; accent-color: var(--gold); }
.dk-row-sel, .dk-img-cell.dk-row-sel { background: color-mix(in srgb, var(--gold) 12%, transparent); outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.dk-selbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); position: sticky; top: 0; z-index: 3; }
.dk-selbar-n { margin-right: auto; align-self: center; }
.dk-selbar-field { display: grid; gap: 2px; font-size: var(--text-micro); color: var(--muted); }
.dk-selbar-field .field { min-height: 36px; }
.dk-bulk-text-form .dk-export-text { min-height: 280px; font: 0.8125rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dk-bulk-diff { margin: 0 0 var(--space-2); max-height: 30dvh; overflow: auto; }
.dk-group-h .linkish { font-weight: 400; margin-left: 8px; }
@media (max-width: 720px) {
  .dk-selbar { position: sticky; bottom: 56px; top: auto; border: 1px solid var(--line); }
}

/* Phone bottom-sheet treatment for New deck / modal dialogs (not .dk-sheet card sheet) */
@media (max-width: 800px) {
  .dk-dialog.dk-bottom-sheet {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    max-height: min(88svh, 720px);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }
  .dk-empty-actions .btn.primary { min-width: min(100%, 280px); font-size: 1.0625rem; min-height: 52px; }
}

.dk-search-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
.dk-search-filters .dk-check { font-size: var(--text-meta); }

.dk-loc { font-size: var(--text-micro); color: var(--muted); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; justify-self: end; }
.dk-sheet-loc { margin: 0 0 var(--space-2); font-size: var(--text-meta); }
.dk-sheet-loc .muted { margin-right: 6px; }
.dk-img-loc {
  position: absolute; left: 6px; right: 6px; bottom: 6px; max-width: none; justify-self: stretch;
  background: rgb(0 0 0 / 72%); color: #fff; padding: 2px 6px; border-radius: 4px;
  font-size: 0.625rem; line-height: 1.3; text-align: center; pointer-events: none;
}
.dk-pull-wrap { display: grid; gap: var(--space-3); max-height: min(55dvh, 520px); overflow: auto; margin: var(--space-2) 0; -webkit-overflow-scrolling: touch; }
.dk-pull-group h3 { margin: 0 0 6px; font-size: var(--text-meta); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.dk-pull-group ul { list-style: none; margin: 0; padding: 0; }
.dk-pull-group li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; font-size: var(--text-meta); min-height: 36px; }
.dk-pull-q { min-width: 1.5rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.dk-pull-miss, .dk-pull-missing h3 { color: var(--danger, #b33); }
@media (max-width: 720px) {
  .dk-loc { max-width: 4.75rem; font-size: 0.625rem; }
  .dk-pull-wrap { max-height: min(50dvh, 420px); }
  .dk-dialog.dk-bottom-sheet.dk-tool {
    width: 100%; max-width: 100%; margin: 0; position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    max-height: min(92svh, 820px);
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  }
  .dk-pull-form .dk-dialog-actions { position: sticky; bottom: 0; background: var(--panel, var(--raised)); padding-top: var(--space-2); gap: 8px; }
  .dk-pull-form .dk-dialog-actions .btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
}

.dk-value { font-variant-numeric: tabular-nums; cursor: pointer; }
.dk-print-price { font-variant-numeric: tabular-nums; font-size: var(--text-meta); color: var(--muted); white-space: nowrap; justify-self: end; }
.dk-print-cur .dk-print-price { color: var(--text); font-weight: 600; margin-left: 6px; }
@media (max-width: 720px) {
  .dk-value { min-height: 36px; display: inline-flex; align-items: center; }
  .dk-print-row { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 52px; }
  .dk-print-row .dk-print-check { display: none; }
  .dk-head-meta .dk-value { order: 4; }
}

.dk-select-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-micro);
  line-height: 1.35;
}

/* Card art: no browser long-press callout (Open/Download image) during multi-select. */
.dk-card-art,
.dk-img-cell img,
.dk-cmd-img img,
.dk-cover img,
.dk-images img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* hit the button/row, not the <img> — stops Brave image menu */
}
.dk-img-cell,
.dk-cmd-img,
.dk-row,
.dk-cover {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.dk-role-acts { white-space: nowrap; }
.dk-role-acts .linkish { font-size: var(--text-meta); }
.dk-role-sug-list { list-style: none; margin: 0; padding: 0; max-height: min(55dvh, 480px); overflow: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 6px; }
.dk-role-sug-add {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  width: 100%; text-align: left; padding: 8px 10px; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--bg); color: var(--text); cursor: pointer;
}
.dk-role-sug-add:hover { border-color: var(--gold); }
.dk-role-sug-name { display: grid; gap: 2px; min-width: 0; }
.dk-role-sug-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-chip-free { background: color-mix(in srgb, var(--up) 18%, transparent); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
@media (max-width: 720px) {
  .dk-roles td.dk-role-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
  .dk-roles td.dk-role-acts .muted { display: none; }
  .dk-role-sug-add { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; padding: 10px 12px; }
  .dk-role-sug-add .dk-chip { grid-column: 1; }
  .dk-role-sug-add .btn { min-height: 40px; padding: 6px 14px; }
  .dk-role-suggest-form .dk-dialog-actions .btn { min-height: 44px; flex: 1; }
}

.dk-cross-buy-wrap { max-height: min(50dvh, 480px); overflow: auto; -webkit-overflow-scrolling: touch; margin: var(--space-2) 0; }
.dk-cross-decks { font-size: var(--text-meta); color: var(--muted); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .dk-head-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .dk-head-actions .btn { min-height: 40px; }
  .dk-cross-buy-form .dk-dialog-actions .btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .dk-cross-buy-wrap { max-height: min(45dvh, 400px); }
  .dk-buy th:nth-child(3), .dk-buy td:nth-child(3) { /* Decks col: allow wrap on phone */
    max-width: 6.5rem; white-space: normal; font-size: var(--text-micro);
  }
  .dk-buy th:nth-child(4), .dk-buy td.dk-num:nth-child(4) { display: none; } /* hide Each; keep Total */
}

.dk-seg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.dk-seg-link:hover { background: var(--raised); }

/* ---- primer (tools-view.mjs) */
.dk-primer-chip { cursor: pointer; }
.dk-primer-chip.empty { color: var(--muted); border-style: dashed; }
.dk-primer-form textarea { width: 100%; min-height: 160px; resize: vertical; font: inherit; line-height: 1.5; }
.dk-primer-form .dk-field { display: grid; gap: 6px; }
@media (max-width: 720px) {
  .dk-primer-form textarea { min-height: 200px; font-size: 16px; }
  .dk-primer-form .dk-dialog-actions .btn { flex: 1 1 auto; min-height: 44px; }
}



/* ---- compare (#/decks/compare) */
.dk-version-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.dk-version-actions .btn { min-height: 44px; }
.dk-cmp { padding: var(--space-4); display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.dk-cmp-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dk-cmp-modes .btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.dk-cmp-pickers { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
.dk-cmp-actions { justify-content: flex-start; flex-wrap: wrap; }
.dk-cmp-summary { margin: 0; }
.dk-cmp-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-6); }
.dk-cmp-col { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.dk-cmp-col h3 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 1.1rem; }
.dk-cmp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dk-cmp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: var(--text-meta); line-height: 1.35; }
.dk-cmp-qty { font-variant-numeric: tabular-nums; min-width: 1.5rem; color: var(--muted); }
.dk-cmp-name { font-weight: 500; }
.dk-cmp-empty { margin: 0; }
.dk-cmp-only-a { border-color: color-mix(in srgb, var(--down) 35%, var(--line)); }
.dk-cmp-only-b { border-color: color-mix(in srgb, var(--up) 35%, var(--line)); }
.dk-cmp-shared { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.dk-cmp-changed .dk-cmp-name { font-weight: 600; }
.dk-cmp-chip { font-size: var(--text-micro); padding: 1px 6px; }
@media (max-width: 900px) {
  .dk-cmp-grid { grid-template-columns: 1fr; }
  .dk-cmp-pickers { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dk-cmp { padding: var(--space-3); }
  .dk-cmp-actions .btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .dk-cmp-modes .btn { flex: 1 1 auto; min-height: 44px; }
  .dk-version-actions { width: 100%; }
  .dk-version-actions .btn { flex: 1 1 auto; }
}

/* ---- editor UX: collapsible groups, shortcuts, EDHREC */
.dk-fold-group { font: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; color: inherit; }
.dk-fold-group .dk-tag-dot { margin-right: 4px; }
.dk-group-collapsed { margin-bottom: var(--space-2); }
.dk-shortcuts-btn { min-width: 36px; font-size: 1rem; padding-inline: 10px; }
.dk-edhrec { text-decoration: none; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.dk-edhrec:hover { color: var(--text); }
.dk-shortcuts { max-width: 420px; width: calc(100vw - 24px); }
.dk-shortcuts-in { padding: var(--space-4); position: relative; }
.dk-shortcuts-in h2 { font-family: Georgia, serif; font-weight: 500; font-size: var(--text-section); margin: 0 2.5rem 0.5rem 0; }
.dk-shortcuts-table { width: 100%; border-collapse: collapse; font-size: var(--text-meta); margin: var(--space-3) 0; }
.dk-shortcuts-table th { text-align: left; font-weight: 600; padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: top; width: 40%; }
.dk-shortcuts-table td { padding: 6px 0; color: var(--text); }
.dk-shortcuts-table kbd {
  display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--raised); font: 600 0.85em/1.4 ui-monospace, "Cascadia Code", Menlo, monospace;
  color: var(--text); box-shadow: 0 1px 0 var(--line-soft);
}
@media (max-width: 720px) {
  .dk-view-tools .dk-shortcuts-btn { display: none; } /* phone: cheatsheet via ⋯ menu */
  .dk-shortcuts { max-width: none; margin: 0; border-radius: 16px 16px 0 0; }
}