:root {
  --bg: #101216;
  --panel: #191c22;
  --panel-2: #21252d;
  --panel-3: #282d37;
  --line: #2d323d;
  --text: #e7e9ee;
  --muted: #949cab;
  --accent: #6ea8fe;
  --accent-dim: #2b4a7d;
  --good: #5dd39e;
  --warn: #e8b64c;
  --bad: #e46b6b;
  --radius: 10px;
  --topbar-h: 54px;
  /* Magic card faces are 488x680, so height is width x 1.3934. */
  --card-ratio: 1.3934;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;              /* the main pane scrolls, not the page */
}

button, input, select, textarea { font: inherit; color: inherit; }

button, .button {
  background: var(--accent); color: #0e1116; border: 0; border-radius: 8px;
  padding: 7px 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block; white-space: nowrap;
}
button:hover, .button:hover { filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.ghost:hover { background: var(--panel-2); filter: none; }
button.danger { color: var(--bad); border-color: #4a2c2c; }
button.sm { padding: 4px 10px; font-size: 12px; }
.icon-btn {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 7px; padding: 4px 9px; font-weight: 600; line-height: 1;
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); filter: none; }

input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-dim); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ============================================================= topbar */

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: .3px; color: var(--accent); }
.add-form { display: flex; gap: 8px; flex: 1; max-width: 520px; }
.add-form input[type=number] { width: 62px; }
.search-wrap { position: relative; flex: 1; }
.search-wrap input { width: 100%; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ============================================================== shell */

.shell { display: flex; height: calc(100vh - var(--topbar-h)); }

.sidebar {
  width: 236px; flex: 0 0 236px; background: var(--panel);
  border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar.collapsed { display: none; }

/* Only ever visible under the floating sidebar; see the narrow breakpoint. */
.sidebar-scrim {
  display: none; position: fixed; inset: var(--topbar-h) 0 0 0;
  z-index: 300; background: rgba(0, 0, 0, .45); border: 0;
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); padding: 10px 6px 4px;
}
.list-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  background: transparent; color: var(--text); border: 0; border-radius: 7px;
  padding: 7px 10px; text-align: left; font-weight: 500;
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.nav-item:hover { background: var(--panel-2); filter: none; }
.nav-item.on { background: var(--accent-dim); font-weight: 600; }
.nav-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.nav-item.on .nav-count { color: var(--text); }
.nav-kind { font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px;
  padding: 0 4px; }
.side-status { margin-top: auto; padding: 10px 6px; font-size: 11px;
  color: var(--muted); border-top: 1px solid var(--line); line-height: 1.7; }

.main { flex: 1; min-width: 0; overflow-y: auto; padding: 0 20px 40px; }

/* ======================================================== deck header */

.deck-head { position: sticky; top: 0; z-index: 15; background: var(--bg);
  padding: 16px 0 0; }
.deck-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deck-head h1 { margin: 0; font-size: 22px; cursor: text; border-radius: 4px;
  padding: 0 4px; margin-left: -4px; outline: none; }
.deck-head h1:hover { background: var(--panel-2, rgba(127,127,127,.12)); }
.deck-head h1.editing { background: var(--bg); box-shadow: 0 0 0 1px var(--accent, #6aa0ff); }
.pill { font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 20px;
  padding: 2px 9px; }
.deck-head-actions { margin-left: auto; display: flex; gap: 6px; }
.deck-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 7px;
  font-size: 13px; color: var(--muted); }
.deck-stats b { color: var(--text); font-variant-numeric: tabular-nums; }

.validation {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--bad); border-radius: var(--radius);
  padding: 9px 13px; margin-top: 10px;
}
.validation.legal { border-left-color: var(--good); }
.validation-head { font-weight: 600; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; }
.validation ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.validation li.error { color: var(--bad); cursor: pointer; }
.validation li.warning { color: var(--warn); }

.modes { display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  position: sticky; top: var(--deck-head-h, 104px); background: var(--bg); z-index: 14;
  margin-top: 12px; }
.mode { background: transparent; color: var(--muted); border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 15px; }
.mode:hover { background: transparent; color: var(--text); filter: none; }
.mode.active { color: var(--text); border-bottom-color: var(--accent); }

.view { display: none; padding-top: 16px; }
.view.active { display: block; }
.empty { color: var(--muted); text-align: center; padding: 56px 0; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 26px 0 10px; }

.toolbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 13px; margin-bottom: 14px;
}
.toolbar label { font-size: 12px; color: var(--muted); }
.toolbar select, .toolbar input[type=number] { margin-left: 6px; }
.toolbar input[type=range] { vertical-align: middle; width: 120px; margin-left: 6px; }
.checkbox { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.checkbox input { width: auto; }
.legend { margin-left: auto; display: flex; gap: 11px; align-items: center;
  font-size: 11px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.dot.picked { background: var(--good); }
.dot.unpicked { background: var(--warn); }
.dot.fallback { background: var(--accent); }
.dot.unresolved { background: var(--bad); }
.dot.owned { background: var(--muted); }

/* ========================================================= build view */

.build-layout { display: flex; gap: 18px; align-items: flex-start; }
.build-main { flex: 1; min-width: 0; }

.deck-columns { display: flex; gap: 16px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 22px; }
.deck-column { flex: 0 0 auto; width: var(--card-w); }
.deck-column-head { font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 0 2px 7px; display: flex; justify-content: space-between; }
.deck-column-head .n { color: var(--text); }
/* The sideboard sits after the deck, set apart from it. */
.deck-column.sideboard { padding-left: 16px; border-left: 1px dashed var(--line);
  box-sizing: content-box; }
.deck-column.sideboard .deck-column-head { color: var(--accent); }

/* Each card slides up over the one before it, leaving the title strip of the
   card underneath visible -- the way a pile of cards fans out on a table. */
.stack { position: relative; }
.stack-card {
  position: relative; width: var(--card-w);
  height: calc(var(--card-w) * var(--card-ratio));
  border-radius: calc(var(--card-w) / 22);
  background: var(--panel-2); cursor: pointer; display: block;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.stack-card + .stack-card { margin-top: calc(var(--peek) - (var(--card-w) * var(--card-ratio))); }
.stack.spread .stack-card + .stack-card { margin-top: 9px; }
.stack-card img { width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; }
.stack-card:hover {
  /* Only has to beat sibling cards; deliberately well below the modal layer. */
  z-index: 200 !important; transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,.7);
}
.stack-card.no-image { display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--line); padding: 8px; font-size: 12px; color: var(--muted); }
.stack-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: inherit; z-index: 2; }
.stack-card.picked::before { background: var(--good); }
.stack-card.unpicked::before { background: var(--warn); }
.stack-card.fallback::before { background: var(--accent); }
.stack-card.unresolved::before { background: var(--bad); }
.stack-card.owned img { opacity: .4; filter: grayscale(.55); }
.stack-card.owned::after {
  content: "OWNED"; position: absolute; z-index: 4; top: 42%; left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  color: var(--good); border: 2px solid var(--good); border-radius: 5px;
  padding: 2px 6px; background: rgba(8,10,14,.74);
}
.stack-qty, .stack-price {
  position: absolute; z-index: 3; background: rgba(8,10,14,.86);
  border: 1px solid rgba(255,255,255,.16); font-variant-numeric: tabular-nums;
}
.stack-qty { top: 5px; right: 5px; border-radius: 20px; padding: 1px 8px;
  font-size: 12px; font-weight: 700; }
.stack-price { bottom: 6px; right: 6px; border-radius: 6px; padding: 1px 6px; font-size: 11px; }

/* Double-faced cards: a flip control on the picture. */
.flip-btn { position: absolute; z-index: 4; top: 42%; right: 6px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(8,10,14,.82); color: #fff; border: 1px solid rgba(255,255,255,.3);
  font-size: 16px; line-height: 1; user-select: none; transition: transform .25s ease; }
.flip-btn:hover, .flip-btn:focus-visible { background: var(--accent); color: var(--bg);
  outline: none; }
.dfc.flipped > .flip-btn { transform: rotate(180deg); }
/* In a stack only the top strip shows: put it there, beside the count. */
.stack-card .flip-btn { top: 4px; right: 5px; width: 24px; height: 24px; font-size: 14px; }
.stack-card.dfc .stack-qty { right: 34px; }

/* ==================================================== suggestion rail */

.rail {
  flex: 0 0 300px; width: 300px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px; position: sticky; top: 150px; max-height: calc(100vh - 190px);
  overflow-y: auto;
}
.rail.collapsed { flex-basis: 44px; width: 44px; padding: 8px; overflow: hidden; }
.rail.collapsed .rail-controls,
.rail.collapsed .rail-results,
.rail.collapsed .rail-note,
.rail.collapsed #rail-commander,
.rail.collapsed h3 { display: none; }
.rail-head { display: flex; align-items: center; justify-content: space-between; }
.rail-head h3 { margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); }
.rail-controls { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.rail-controls input, .rail-controls button { width: 100%; }
.inline { font-size: 11px; color: var(--muted); display: block; }
.inline input { margin-top: 4px; }
.rail-search { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-seed {
  background: var(--accent-dim); border-radius: 20px; padding: 2px 6px 2px 9px;
  font-size: 11px; display: flex; align-items: center; gap: 5px;
}
.chip-seed button { background: transparent; border: 0; color: var(--text);
  padding: 0 2px; font-size: 13px; line-height: 1; }

.rail-results { display: flex; flex-direction: column; gap: 6px; }
.sugg {
  display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 9px;
  align-items: center; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px; cursor: pointer;
}
.sugg:hover { border-color: var(--accent-dim); }
.sugg img { width: 52px; height: 38px; object-fit: cover; border-radius: 4px;
  background: var(--panel-3); display: block; }
.sugg-name { font-size: 12px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sugg-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.sugg-add { padding: 3px 9px; font-size: 11px; }
.rail-note { margin: 12px 0 0; line-height: 1.5; }

/* ===================================================== art board view */

.art-board { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.art-tile { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.art-tile:hover { border-color: var(--accent-dim); }
.art-tile.unpicked { border-left: 3px solid var(--warn); }
.art-tile.picked { border-left: 3px solid var(--good); }
.art-tile.unresolved { border-left: 3px solid var(--bad); }
.art-tile img { width: 100%; aspect-ratio: 488/680; object-fit: cover; display: block;
  background: var(--panel-2); }
.art-tile .meta { padding: 7px 9px; }
.art-tile .nm { font-size: 12px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.art-tile .sub { font-size: 10px; color: var(--muted); margin-top: 2px;
  display: flex; justify-content: space-between; gap: 6px; }

/* ============================================================== rows */

.rows { display: flex; flex-direction: column; gap: 7px; }
.row {
  display: grid; grid-template-columns: 90px minmax(0,1fr) 150px 100px 120px;
  gap: 13px; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 13px; cursor: pointer;
}
.row:hover { border-color: var(--accent-dim); background: var(--panel-2); }
.row.unresolved { border-left: 3px solid var(--bad); }
.row.unpicked { border-left: 3px solid var(--warn); }
.row.fallback { border-left: 3px solid var(--accent); }
.row.picked { border-left: 3px solid var(--good); }
.row.owned .row-name { text-decoration: line-through; color: var(--muted); }
.row-art { width: 90px; height: 51px; object-fit: cover; border-radius: 6px;
  background: var(--panel-2); display: block; }
.row-name { font-weight: 600; }
.row-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.row-printing { font-size: 12px; color: var(--muted); }
.row-price { text-align: right; font-variant-numeric: tabular-nums; }
.row-price .ea { font-weight: 600; }
.row-price .line { color: var(--muted); font-size: 12px; }
.row-flags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.chip { font-size: 11px; padding: 2px 7px; border-radius: 20px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); white-space: nowrap; }
.chip.good { color: var(--good); border-color: #2c4a3c; }
.chip.warn { color: var(--warn); border-color: #4a412c; }
.chip.bad { color: var(--bad); border-color: #4a2c2c; }
.chip.accent { color: var(--accent); border-color: var(--accent-dim); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 15px; min-width: 116px; }
.stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; }
.stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

.notes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.notes div { background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-dim); border-radius: 8px;
  padding: 8px 12px; color: var(--muted); font-size: 13px; }

.export { margin-top: 18px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px; }
.export h3 { margin: 0 0 9px; font-size: 14px; }
.export textarea { width: 100%; height: 180px; font-family: Consolas, monospace;
  font-size: 12px; resize: vertical; }
.export-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.hint a, .export a { color: var(--accent); }

/* ====================================================== search suggest */

.suggest {
  position: absolute; top: calc(100% + 5px); left: 0;
  /* Wider than the input on purpose; never narrower than the field. */
  min-width: min(440px, 90vw); width: max-content; max-width: min(600px, 90vw);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.55);
  max-height: 60vh; overflow-y: auto; z-index: 300; padding: 4px;
}
.rail-search .suggest { min-width: 290px; }
.suggest-item { display: grid; grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 10px; align-items: center; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--panel-2); }
.suggest-item.active { box-shadow: inset 0 0 0 1px var(--accent-dim); }
.suggest-thumb { width: 58px; height: 33px; object-fit: cover; border-radius: 4px;
  background: var(--panel-2); display: block; }
.suggest-name { font-weight: 600; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.suggest-name mark { background: transparent; color: var(--accent); font-weight: 700; }
.suggest-sub { color: var(--muted); font-size: 11px; margin-top: 1px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.suggest-right { text-align: right; }
.suggest-price { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.suggest-note { color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; margin-top: 2px; }
.suggest-empty { padding: 13px; color: var(--muted); font-size: 13px; text-align: center; }

/* ========================================================= mana pips */

.mana-cost { display: inline-flex; gap: 3px; flex-wrap: wrap; vertical-align: middle; }
.mana { width: 17px; height: 17px; border-radius: 50%; display: inline-grid;
  place-items: center; font-size: 10px; font-weight: 800; color: #16181c;
  background: #b9b2ab; box-shadow: inset 0 -1px 2px rgba(0,0,0,.3); }
.mana.w { background: #f7f0d8; } .mana.u { background: #a7d3ef; }
.mana.b { background: #9d9490; } .mana.r { background: #f0a48a; }
.mana.g { background: #a6cfa0; } .mana.c { background: #cdc6bf; }
.card-text .mana { width: 15px; height: 15px; font-size: 9px; }

/* ======================================================== card modal */

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.74); z-index: 1000;
  display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.modal-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; width: min(620px, 92vw); }
.modal-card h2 { margin: 0 0 6px; font-size: 17px; }
.modal-card textarea { width: 100%; margin-top: 10px;
  font-family: Consolas, monospace; font-size: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.new-list-card { display: grid; gap: 12px; width: min(420px, calc(100vw - 32px)); }
.new-list-card .field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.new-list-card input[type=text], .new-list-card select { width: 100%; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-size: 14px; }
.new-list-card .choice-row { display: flex; gap: 18px; color: var(--text); font-size: 14px; }
.error { color: var(--bad); }
.forge-bound { font-size: 12px; color: var(--muted); }
.forge-bound b { color: var(--text); }
.forge-bound .dirty { color: var(--warn); margin-left: 6px; }

.card-modal { position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  width: min(1080px, 96vw); max-height: 94vh; overflow-y: auto; padding: 20px; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; }
.card-modal-head { display: flex; gap: 22px; flex-wrap: wrap; }
.card-visual { flex: 0 0 290px; }
.card-visual img { width: 290px; border-radius: 14px; display: block;
  background: var(--panel-2); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.card-visual button { margin-top: 10px; width: 290px; }
.card-facts { flex: 1; min-width: 280px; }
.card-title-row { display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap; padding-right: 92px; }
.card-facts h2 { margin: 0; font-size: 21px; }
.card-type { margin: 4px 0 11px; color: var(--muted); font-size: 13px; }
.card-text { white-space: pre-wrap; line-height: 1.55; font-size: 14px; }
.card-flavor { color: var(--muted); font-style: italic; font-size: 13px;
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 11px;
  white-space: pre-wrap; }
.card-stats { font-weight: 700; font-size: 17px; margin-top: 9px; }
.card-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 18px; margin: 15px 0 0; }
.card-meta div { min-width: 0; }
.card-meta dt { font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); }
.card-meta dd { margin: 2px 0 0; font-size: 13px; }

.match-mode { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.segmented { display: inline-flex; flex-wrap: wrap; margin-top: 5px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button { background: transparent; color: var(--muted); border: 0;
  border-radius: 0; padding: 6px 12px; font-size: 12px; font-weight: 500;
  border-right: 1px solid var(--line); }
.segmented button:last-child { border-right: 0; }
.segmented button:hover { background: var(--panel-2); color: var(--text); filter: none; }
.segmented button.on { background: var(--accent-dim); color: var(--text); font-weight: 700; }
#match-summary { margin: 7px 0 0; }

.card-actions { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.card-actions .inline input, .card-actions .inline select { width: 86px; }
.card-links { margin-top: 11px; display: flex; gap: 14px; font-size: 12px; }
.card-links a { color: var(--accent); }

.modal-tabs { display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 1px solid var(--line); }
.modal-tab { background: transparent; color: var(--muted); border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 14px; }
.modal-tab:hover { background: transparent; color: var(--text); filter: none; }
.modal-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.modal-pane { display: none; padding-top: 15px; }
.modal-pane.active { display: block; }

.details-grid { display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.detail-box { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; }
.detail-box .k { font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); }
.detail-box .v { margin-top: 3px; font-size: 13px; word-break: break-word; }

/* ================================================== price history/points */

.price-history { margin-bottom: 16px; }
.price-history h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0 0 8px; }
.ph-head { display: flex; gap: 15px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 13px; }
.ph-head .verdict { font-weight: 600; }
.ph-head .muted { font-size: 12px; }
.ph-chart { width: 100%; height: 108px; display: block; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; }
.ph-chart .line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.ph-chart .area { fill: rgba(110,168,254,.13); stroke: none; }
.ph-chart .now { fill: var(--good); }
.ph-empty { color: var(--muted); font-size: 13px; display: flex; gap: 10px;
  align-items: center; }
.points-grid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); margin-bottom: 15px; }
.point-box { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; }
.point-box .k { font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); }
.point-box .v { margin-top: 3px; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.point-box .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* ========================================================= art picker */

.artwork-layout { display: flex; gap: 18px; align-items: flex-start; }
.choice-side { flex: 0 0 240px; }
.choice-side h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0 0 8px; }
.artwork-main { flex: 1; min-width: 0; }
.choice-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
.choice { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; display: flex; gap: 8px; align-items: center; }
.choice .rank { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent-dim); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; }
.choice .label { flex: 1; font-size: 12px; }
.choice .cap { font-size: 11px; color: var(--muted); }
.choice .cap input { width: 56px; padding: 2px 5px; font-size: 11px; }
.choice-btns { display: flex; gap: 2px; }
.choice-btns button { background: transparent; border: 1px solid var(--line);
  padding: 1px 6px; font-size: 11px; border-radius: 5px; color: var(--muted); }

.art-grid { display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); }
.art-card { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.art-card.chosen { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.art-card img { width: 100%; aspect-ratio: 626/457; object-fit: cover; display: block;
  background: var(--panel); }
.art-meta { padding: 8px 10px; flex: 1; }
.art-artist { font-weight: 600; font-size: 13px; }
.art-facts { color: var(--muted); font-size: 11px; margin-top: 3px;
  display: flex; gap: 8px; flex-wrap: wrap; }
.art-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.art-actions { display: flex; gap: 6px; padding: 0 10px 10px; }
.art-actions button { flex: 1; padding: 5px 7px; font-size: 12px; }
.printing-list { border-top: 1px solid var(--line); max-height: 132px; overflow-y: auto; }
.printing-row { display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 10px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.03); }
.printing-row .p { font-variant-numeric: tabular-nums; color: var(--text); }

/* ============================================================ overlays */

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 18px; z-index: 1200; }
.busy { position: fixed; bottom: 20px; right: 20px; z-index: 1200;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.spinner { width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .rail { position: static; flex-basis: 260px; width: 260px; max-height: none; }
}
@media (max-width: 1000px) {
  /* Too narrow to dock the sidebar, so it floats over the deck. It starts
     collapsed and is dismissed by the scrim, rather than sitting on top of
     what you are trying to read. */
  .sidebar { position: absolute; z-index: 400; height: calc(100vh - var(--topbar-h));
    box-shadow: 10px 0 30px rgba(0,0,0,.5); }
  .sidebar:not(.collapsed) ~ .sidebar-scrim { display: block; }
  .build-layout { flex-direction: column; }
  .rail { width: 100%; flex-basis: auto; }
  .artwork-layout { flex-direction: column; }
  .choice-side { flex: none; width: 100%; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .add-form { flex: 1 0 100%; max-width: none; order: 5; }
  .topbar-actions { margin-left: 0; }
  .shell { height: auto; }
  body { overflow: auto; }
  .row { grid-template-columns: 70px minmax(0,1fr) 88px; }
  .row-art { width: 70px; height: 40px; }
  .row-printing, .row-flags { display: none; }
  .card-title-row { padding-right: 0; }
}


/* ============================================================== forge */

/* The deck in a column on the left; the rest of the width is a grid of
   cards to add, each with its synergy score. The page scrolls through the
   suggestions, which never end; the deck is pinned beside them, scrolling on
   its own when it is long. (It was the other way round: the grid had its own
   scroll box, as tall as its container, so it could never stick -- its end
   hung below the window, and scrolling it never reached "load more".) */
.forge-layout { display: flex; gap: 14px; align-items: flex-start; }
/* Pinned under the sticky deck header and mode tabs, whose heights app.js
   measures (the header grows with the legality notes). */
.forge-deck { flex: 0 0 400px; width: 400px; min-width: 0;
  --pinned: calc(var(--deck-head-h, 124px) + var(--modes-h, 42px) + 12px);
  position: sticky; top: var(--pinned);
  max-height: calc(100vh - var(--topbar-h) - var(--pinned) - 12px);
  overflow-y: auto; overscroll-behavior: contain; }
.forge-rail {
  flex: 1; min-width: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 14px;
}
.forge-bar { flex-wrap: wrap; gap: 10px; align-items: center; }
.forge-bar label { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); }
.forge-add { max-width: none; margin: 10px 0; }

.board-tabs { display: flex; gap: 2px; background: var(--bg); border-radius: 7px;
  padding: 2px; }
.board-tab {
  background: transparent; color: var(--muted); border: 0; border-radius: 5px;
  padding: 5px 12px; font-weight: 600; font-size: 12px;
}
.board-tab.active { background: var(--panel); color: var(--text); }

.capacity { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.capacity.full { color: var(--warn, #e0a030); }
.capacity.over { color: var(--danger, #e05050); }

/* one row per card, so counts are easy to scan and adjust */
.forge-slots { display: flex; flex-direction: column; gap: 3px; }
.forge-slot {
  display: grid; grid-template-columns: var(--forge-art-w, 96px) minmax(0,1fr) auto auto;
  align-items: center; gap: 0 10px; padding: 3px 8px 3px 3px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.forge-slot:has(.move) { grid-template-columns: var(--forge-art-w, 96px) minmax(0,1fr) auto auto auto; }
.forge-slot .remove { width: 22px; height: 22px; padding: 0; border-radius: 5px; line-height: 1;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.forge-slot .remove:hover { color: var(--bad); border-color: var(--bad); }
/* The whole art crop, slid open under the row on click. */
.forge-slot-art { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease; }
.forge-slot-art > div { overflow: hidden; min-height: 0; }
.forge-slot-info { display: flex; gap: 14px; align-items: flex-start; cursor: default; }
.forge-slot.open .forge-slot-info { padding: 8px 4px 2px; }
.forge-slot-info .info-image { width: min(200px, 45%); flex: none; position: relative; }
.forge-slot-info .info-image img { width: 100%; aspect-ratio: 1 / var(--card-ratio, 1.396);
  border-radius: 9px; display: block; }
.forge-slot-info .info-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; }
.forge-slot-info .info-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; }
.forge-slot-info .info-type { color: var(--muted); margin: 2px 0 6px; }
.forge-slot-info .info-rules p { margin: 0 0 6px; }
.forge-slot-info .info-stats { font-weight: 700; }
.forge-slot-info hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
@media (max-width: 600px) { .forge-slot-info { flex-direction: column; } }
.forge-slot.open .forge-slot-art { grid-template-rows: 1fr; }
.forge-slot.open { padding-bottom: 5px; }
.forge-art-size { display: flex; align-items: center; gap: 6px; }
.forge-art-size input { width: 90px; }
.forge-slot .move { padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.forge-slot > img { width: var(--forge-art-w, 96px); height: var(--forge-art-h, 26px); object-fit: cover;
  object-position: 50% 30%; border-radius: 5px; display: block; }
.forge-slot .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.forge-slot .price { color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 22px; height: 22px; padding: 0; border-radius: 5px; line-height: 1;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
}
.stepper button:disabled { opacity: .35; }
.stepper .count { min-width: 20px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; }

.forge-filters { display: grid; gap: 7px 12px; margin: 8px 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.forge-filters label { display: grid; gap: 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.forge-filters label.check, .forge-advanced label.check {
  display: flex; align-items: center; gap: 7px; text-transform: none;
  letter-spacing: 0; font-size: 12px;
}
.forge-filters input[type=text], .forge-filters input[type=number] { width: 100%; }
.forge-advanced { border-top: 1px solid var(--line); padding-top: 10px;
  margin-bottom: 10px; display: grid; gap: 8px; }
.forge-advanced.hidden { display: none; }
.weights { display: grid; gap: 6px; }
.weights .weight { display: grid; grid-template-columns: 74px 1fr 30px;
  align-items: center; gap: 6px; font-size: 12px; }
.weights input[type=range] { width: 100%; }

.forge-advanced label.stacked { display: grid; gap: 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.forge-advanced select { width: 100%; text-transform: none; letter-spacing: 0;
  font-size: 12px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.forge-query { width: 100%; margin: 0 0 8px; }

.forge-results-wrap { position: relative; min-height: 60px; }
.forge-results { display: grid; gap: 12px 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--forge-tile-w, 200px)), 1fr)); }
.forge-tile-size { margin-left: auto; font-size: 11px; text-transform: none;
  letter-spacing: 0; color: var(--muted); font-weight: 400; }
.forge-results > .empty { grid-column: 1 / -1; }
.forge-more { text-align: center; padding: 10px 0 2px; min-height: 24px; }

/* One option in the grid: the card, its score, what adding it would do. */
.forge-tile {
  display: flex; flex-direction: column; gap: 5px; padding: 0; text-align: left;
  background: transparent; border: 0; color: var(--text); font-weight: 400;
  border-radius: 9px; cursor: pointer;
}
.forge-tile .face { position: relative; aspect-ratio: 1 / var(--card-ratio);
  border-radius: 7px; overflow: hidden; background: var(--panel-2);
  border: 1px solid var(--line); }
.forge-tile:hover:not(:disabled) .face { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); }
.forge-tile:disabled { cursor: default; }
.forge-tile:disabled .face { opacity: .45; }
.forge-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forge-tile .placeholder { position: absolute; inset: 0; display: grid;
  place-items: center; padding: 10px; text-align: center; font-weight: 600;
  font-size: 13px; color: var(--muted); }
.forge-tile .score { position: absolute; top: 6px; left: 6px;
  background: rgba(8, 10, 14, .82); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.forge-tile .score.none { color: var(--muted); font-weight: 500; font-size: 11px; }
.forge-tile .copies { position: absolute; top: 6px; right: 6px;
  background: var(--accent); color: #0e1116; border-radius: 6px;
  padding: 1px 6px; font-weight: 700; font-size: 12px; }
.forge-tile .badges { position: absolute; bottom: 6px; left: 6px; right: 6px;
  display: flex; gap: 4px; flex-wrap: wrap; }
.forge-tile .badges .flag { background: rgba(8, 10, 14, .85); margin: 0; }
.forge-tile .caption { display: grid; gap: 1px; padding: 0 2px; }
.forge-tile .caption .line { display: flex; justify-content: space-between;
  gap: 6px; font-size: 11px; color: var(--muted); }
.forge-tile .caption .name { font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-tile .caption .why { font-size: 11px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
/* Darkens the list while it reorders, so a card jumping above ones already
   read is announced rather than happening under the reader's eyes. */
.reorder-overlay { position: absolute; inset: 0; z-index: 5;
  background: rgba(8, 10, 14, .72); border-radius: 8px;
  transition: opacity .15s ease; }
.reorder-overlay.hidden { opacity: 0; pointer-events: none; }
/* Placed by showReorder() in the middle of the part of the list on screen:
   the list can be many screens tall. */
.reorder-box { position: absolute; left: 50%; top: 40px; transform: translate(-50%, -50%);
  width: max-content; max-width: 88%; display: flex; align-items: center; gap: 10px;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 14px; font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.forge-card .why { font-size: 11px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.flag.unread { color: var(--muted); }
.forge-card {
  display: grid; grid-template-columns: 76px minmax(0,1fr) auto;
  gap: 9px; align-items: center; text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 8px 3px 3px; color: var(--text);
}
.forge-card:hover:not(:disabled) { border-color: var(--accent); }
.forge-card:disabled { opacity: .5; }
.forge-card img { width: 76px; height: 30px; object-fit: cover;
  object-position: 50% 30%; border-radius: 5px; display: block; }
.forge-card .name { font-weight: 500; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.forge-card .meta { font-size: 11px; color: var(--muted); }
.forge-card .add { font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 12px; white-space: nowrap; }
.flag { font-size: 10px; padding: 1px 4px; border-radius: 4px;
  border: 1px solid var(--line); margin-left: 4px; }
.flag.thin { color: var(--muted); }
.flag.disputed { color: var(--warn, #e0a030); border-color: currentColor; }
.flag.loop { color: var(--accent); border-color: currentColor; }

@media (max-width: 1100px) {
  .forge-layout { flex-direction: column; }
  .forge-deck { width: 100%; flex-basis: auto; position: static; max-height: none;
    overflow: visible; }
  .forge-rail { width: 100%; flex-basis: auto; }
}
@media (max-width: 640px) {
  .forge-results { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}


/* ==================================================== sidebar sections */

.nav-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); padding: 12px 6px 4px; font-weight: 600;
}
.nav-section.toggle {
  background: transparent; border: 0; width: 100%; text-align: left;
  cursor: pointer;
}
.nav-section.toggle:hover { color: var(--text); }
.nav-folder {
  font-size: 11px; color: var(--muted); padding: 6px 6px 2px 10px;
  font-weight: 500;
}
/* The character itself, not a CSS escape: an escape has to survive every
   layer that touches this file, and one of them eats backslashes. */
.nav-folder::before { content: "▸  "; }
.nav-item.nested { padding-left: 22px; }
.nav-item.dragging { opacity: .45; }
.nav-folder.drop-over, .nav-section.drop-over, .nav-item.drop-over {
  background: var(--accent-dim); outline: 1px dashed var(--accent); border-radius: 4px; }
.nav-item.archived .nav-name { opacity: .6; font-style: italic; }
.nav-archived.hidden { display: none; }

/* ================================================== commitments panel */

/* ============================================================ themes */

.forge-themes { display: grid; gap: 6px; padding: 8px 10px; margin: 0 0 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.themes-row { display: flex; gap: 10px 18px; align-items: flex-end; flex-wrap: wrap; }
.theme-core { display: grid; gap: 3px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); }
.theme-secondary { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.theme-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.theme-suggested { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.theme-suggestion { padding: 1px 8px; font-size: 12px; }
.theme-warning { color: var(--warn); }
.theme-help { margin: 0; }

/* ============================================================ simulate */

.deck-sims { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 12px; margin-bottom: 12px; }
.deck-sims > summary { cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; padding: 3px 0; list-style-position: inside; }
.deck-sims > summary button { margin-left: auto; font-weight: 400; }
.deck-sims-table { display: grid; grid-template-columns: minmax(140px, auto) repeat(5, auto);
  gap: 3px 18px; font-size: 12px; padding: 6px 0 4px; justify-content: start;
  font-variant-numeric: tabular-nums; overflow-x: auto; }
.deck-sims-table > * { white-space: nowrap; }
.deck-sims-table b { color: var(--muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; }
.deck-sims-table .good { color: var(--good); }
.deck-sims-table .bad { color: var(--bad); }

.sim-title { margin: 0 0 12px; font-size: 20px; }
.sim-form { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
  gap: 12px 16px; align-items: start; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 14px; }
.sim-side { display: grid; gap: 8px; min-width: 0; }
.sim-side label, .sim-run label { display: grid; gap: 3px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; }
.sim-side select { width: 100%; }
.sim-vs { align-self: center; font-weight: 700; color: var(--muted); padding-top: 14px; }
.sim-run { display: grid; gap: 8px; align-self: end; }
.sim-run input { width: 90px; }
.sim-check { font-size: 12px; line-height: 1.4; min-height: 18px; }
.sim-check.ok { color: var(--good); }
.sim-check.bad { color: var(--bad); }
.sim-note { margin: 10px 2px 16px; max-width: 760px; }
.sim-jobs { display: grid; gap: 10px; }
.sim-job { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; display: grid; gap: 6px; }
.sim-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-job-head button { margin-left: auto; }
.sim-status.running { color: var(--accent); }
.sim-status.done { color: var(--good); }
.sim-status.failed, .sim-status.cancelled { color: var(--muted); }
.sim-progress { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.sim-progress > div { height: 100%; background: var(--accent); transition: width .4s ease; }
.sim-error { color: var(--bad); font-size: 12px; }
.sim-job.flash { outline: 2px solid var(--accent); outline-offset: 2px; }
.sim-watch { margin-top: 6px; }
.sim-watch > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.sim-watch-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; }
.sim-watch-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.sim-watch-link:hover { text-decoration: underline; }
.sim-watch-filter { margin-bottom: 6px; }
.sim-watch-table { display: grid; grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;
  gap: 2px 14px; max-height: 320px; overflow: auto; align-items: baseline; }
.sim-watch-table b { position: sticky; top: 0; background: var(--panel); color: var(--muted);
  font-weight: 500; }
.sim-watch-table .won-a { color: var(--good); }
.sim-watch-table .won-b { color: var(--bad); }
.sim-watch-pick { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sim-watch-pick input { width: 80px; }
a.sim-opp { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
a.sim-opp:hover { color: var(--accent); }
.sim-result { display: grid; gap: 4px; margin-top: 4px; }
.sim-winbar { display: flex; height: 26px; border-radius: 6px; overflow: hidden;
  font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.sim-winbar > div { display: flex; align-items: center; padding: 0 8px; white-space: nowrap;
  overflow: hidden; min-width: 0; }
.sim-winbar .a { background: var(--accent-dim); color: var(--text); }
.sim-winbar .b { background: var(--panel-3, var(--panel-2)); color: var(--text);
  justify-content: flex-end; }
.sim-table { display: grid; grid-template-columns: minmax(120px, auto) repeat(3, auto);
  gap: 2px 18px; margin-top: 6px; justify-content: start; }
@media (max-width: 760px) {
  .sim-form { grid-template-columns: 1fr; }
  .sim-vs { padding-top: 0; }
}

.collection-tabs { display: flex; gap: 2px; background: var(--bg);
  border-radius: 7px; padding: 2px; }
.collection-tabs button {
  background: transparent; color: var(--muted); border: 0; border-radius: 5px;
  padding: 5px 12px; font-weight: 600; font-size: 12px;
}
.collection-tabs button.active { background: var(--panel); color: var(--text); }

.need-banner {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--panel);
}
.need-banner.short { border-left-color: var(--danger, #e05050); }
.need-banner.complete { border-left-color: var(--ok, #3fb950); }
.need-banner b { font-variant-numeric: tabular-nums; }

.need-rows { display: flex; flex-direction: column; gap: 3px; }
.need-row {
  display: grid; grid-template-columns: minmax(0,1fr) 54px 54px 54px auto;
  gap: 10px; align-items: center; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px;
}
.need-row.short { border-color: var(--danger, #e05050); }
.need-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.need-row .who { color: var(--muted); font-size: 11px; }
.need-head {
  display: grid; grid-template-columns: minmax(0,1fr) 54px 54px 54px auto;
  gap: 10px; padding: 0 10px 4px; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.need-head .num { text-align: right; }

/* A suggestion that cannot go in (full deck, singleton): still clickable, so
   its score can open the breakdown. */
.forge-tile.blocked { cursor: default; }
.forge-tile.blocked .face { opacity: .45; }
.forge-tile .score.explainable { cursor: help; text-decoration: underline dotted; }
.forge-tile .score.explainable:hover { background: var(--accent); color: var(--bg); }

/* The synergy breakdown. */
.explain-card { width: min(880px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto; }
.explain-head { display: flex; justify-content: space-between; align-items: center; }
.explain-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 16px 0 6px; }
.explain-sum { margin: 4px 0 10px; }
.explain-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0;
  border-bottom: 1px solid var(--line); }
.explain-row .value, .explain-seed .value { font-variant-numeric: tabular-nums;
  font-weight: 700; min-width: 58px; display: inline-block; }
.explain-row .chain { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.explain-row .arrow { color: var(--muted); }
.explain-row .step .event { color: var(--muted); font-size: 12px; }
.explain-reads, .explain-seed { margin: 6px 0; }
.explain-reads summary, .explain-seed summary { cursor: pointer; }
.explain-seed .small { padding-left: 68px; color: var(--muted); }
.small.bad { color: var(--bad); }

/* A small full-card image standing in for a missing art crop: show its art box. */
img.art-fallback { object-fit: cover; object-position: 50% 22%; }

/* ============================================================ accounts & sharing */
.account { position: relative; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100; min-width: 180px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; display: grid; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.account-menu a, .account-menu button {
  background: transparent; color: var(--text); border: 0; border-radius: 6px;
  padding: 8px 10px; text-align: left; font-weight: 400; text-decoration: none; font-size: 13px;
}
.account-menu a:hover, .account-menu button:hover { background: var(--panel-2); filter: none; }
body:not(.is-admin) .admin-only { display: none; }

/* A deck that is view-only for you: editing controls go; the server refuses anyway. */
body.read-only .edit-only { display: none !important; }
.readonly-note {
  margin-top: 6px; font-size: 12px; color: var(--muted);
  border-left: 3px solid var(--accent-dim); padding: 2px 0 2px 8px;
}
.owner-pill { background: var(--panel-2); color: var(--muted); }

.nav-item.shared .nav-name { font-style: italic; }
.nav-owner { color: var(--muted); font-size: 11px; margin-left: auto; padding-left: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

.share-card, .browse-card, .accounts-card { width: min(560px, calc(100vw - 32px)); }
.share-card .field { display: grid; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 12px; }
.share-card .choice-row { display: grid; gap: 6px; color: var(--text); font-size: 14px; }
.share-members { display: grid; gap: 6px; }
.share-member, .share-add { display: flex; gap: 8px; align-items: center; color: var(--text); }
.share-name { flex: 1; font-size: 14px; }
.share-add select:first-child { flex: 1; }

.browse-list { display: grid; gap: 6px; margin-top: 10px; max-height: 60vh; overflow: auto; }
.browse-row { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--panel-2); border-radius: 8px; }

.accounts-table { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr auto; gap: 6px 12px;
  align-items: center; margin: 12px 0; font-size: 13px; }
.accounts-table > b { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.accounts-table .pill { margin-left: 6px; }
.account-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.accounts-table .good { color: var(--good); }
.accounts-table .warn { color: var(--warn); }
.accounts-table .bad { color: var(--bad); }
.accounts-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.accounts-add input[type="text"] { flex: 1; min-width: 140px; }
.temp-pass { display: block; font-size: 20px; letter-spacing: 1px; padding: 12px; margin: 10px 0;
  text-align: center; user-select: all; }

@media (max-width: 640px) {
  .accounts-table { grid-template-columns: 1fr 1fr; }
  .accounts-table > b:nth-of-type(n+3), .accounts-table > span:nth-child(4n+3) { display: none; }
  .account-actions { grid-column: 1 / -1; justify-content: flex-start; }
}