/* Do I Own It — Pauper staples tracker.
   Navy foundation, one yellow accent, a card-first layout on phones.
   Drop-in replacement: no HTML or JS changes needed. */

/* fonts are self-hosted (fonts/, copied into site/ by sitegen): no visitor request goes to Google */
@import url("fonts/fonts.css");

/* ---------- tokens ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #141a35;        --panel: #1d2547;     --panel2: #19203f;
  --ink: #eceaf4;       --muted: #98a0c2;     --line: #2d3763;
  --nav: #0e1226;       --nav-ink: #eceaf4;   --nav-line: #232b4f;
  --accent: #f0d24a;    --accent-ink: #1a1500;
  --good: #8fd16a;      --warn: #e8a944;      --bad: #ef705d;
  --pill: #2a3560;      --hover: #232c54;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.6);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f9;        --panel: #ffffff;     --panel2: #f0f0f5;
  --ink: #1a1b24;       --muted: #666a80;     --line: #e1e2ea;
  --nav: #0e1226;       --nav-ink: #eceaf4;   --nav-line: #232b4f;
  --accent: #2b5fd9;    --accent-ink: #ffffff;  /* blue: the dark gold read muddy on white */
  --good: #1e7e34;      --warn: #b26a00;      --bad: #c74a38;
  --pill: #ebebf1;      --hover: #f3f3f9;
  --shadow: 0 1px 2px rgba(20,24,50,.06), 0 8px 24px -14px rgba(20,24,50,.25);
}
:root {
  --nav-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand-yellow: #f0d24a; /* nav is always dark, so the brand yellow stays bright in both themes */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 80px); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- icons (inline Material Symbols, see collection.js) ---------- */
.ic { width: 1.3em; height: 1.3em; flex: none; fill: currentColor; vertical-align: -0.3em; }
[data-ic] { display: inline-flex; font-style: normal; }
.kicker .ic { margin-right: 4px; }

/* ---------- falling staples in the background (initCardRain) ---------- */
#cardrain { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#cardrain img {
  position: absolute; top: 0; max-width: none; border-radius: 5px; opacity: .14;
  animation: cardfall linear infinite; will-change: transform;
}
#cardrain img { transition: opacity .2s, filter .2s; }
#cardrain img.hot { opacity: .5; filter: drop-shadow(0 0 14px rgba(240,210,74,.55)); }
html.catchable, html.catchable body { cursor: pointer; }
/* caught card (easter egg) */
dialog.catchmodal {
  width: min(760px, calc(100vw - 28px)); display: none; gap: 28px; align-items: center; padding: 28px;
  overflow: visible;
}
dialog.catchmodal[open] { display: flex; }
.catchimg {
  width: 280px; max-width: 45%; flex: none; border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.7);
}
.catchinfo { flex: 1; min-width: 0; }
.catchinfo .kicker { margin: 0; }
.catchinfo h2 { margin: 2px 0 6px; font-size: 28px; }
.catchverdict { margin: 0 0 16px; color: var(--muted); }
.catchverdict b { color: var(--accent); }
.catchstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.catchstats div { display: flex; flex-direction: column; padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.catchstats b { font-family: var(--font-display); font-size: 20px; }
.catchstats span { font-size: 12.5px; color: var(--muted); }
.catchstats .own { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.catchstats .own b { color: var(--accent); }
.catchx { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; }
.catchx:hover { background: var(--hover); color: var(--ink); }
.catchinfo .row { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes cardfall {
  from { transform: translateY(-170px) rotate(var(--r0, 0deg)); }
  to { transform: translateY(calc(100vh + 170px)) rotate(var(--r1, 40deg)); }
}

/* ---------- top navigation ---------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: var(--nav-h); padding: 0 24px;
  background: color-mix(in srgb, var(--nav) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  color: var(--nav-ink); border-bottom: 1px solid var(--nav-line);
}
.topnav .brand {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; color: var(--nav-ink); white-space: nowrap;
}
.topnav .brand em { font-style: normal; color: var(--brand-yellow); }
.brandlink {
  position: relative; flex: none; display: block; text-decoration: none;
  --logo-h: 40px; height: var(--logo-h); width: calc(var(--logo-h) * 501 / 191);
  background: url("logo.svg?v=2") left center / contain no-repeat;
  /* the card pokes up above the words: centre the words in the bar, not the whole picture */
  transform: translateY(calc(var(--logo-h) * -0.1));
}
/* keep the text for screen readers and as a fallback if logo.svg is missing */
.brandlink .brand {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
img.logo { height: 30px; max-width: 42vw; object-fit: contain; object-position: left; }

#navlinks { flex: 1; display: flex; align-items: stretch; align-self: stretch; gap: 6px; }
#navlinks > #authslot, #navlinks > button { align-self: center; }
#navlinks > button { margin-left: 14px; }
.topnav button { display: inline-flex; align-items: center; gap: 6px; }
#themebtn, #rainbtn { padding: 5px 7px; }
#navlinks > #themebtn { margin-left: 6px; }
#themebtn .lbl, #rainbtn .lbl { display: none; }
#themebtn .ic, #rainbtn .ic, #burger .ic { width: 20px; height: 20px; }
#rainbtn[aria-pressed="false"] .ic { opacity: .4; }
.topnav a.tab {
  display: flex; align-items: center; padding: 0 12px;
  color: var(--nav-ink); text-decoration: none; font-size: 14px; font-weight: 500;
  opacity: .62; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: opacity .15s;
}
.topnav a.tab:hover { opacity: 1; }
.navic { height: 20px; width: auto; margin-right: 8px; flex: none; }
.navic.fan { height: 24px; margin-right: 6px; }
.topnav a.tab.active { opacity: 1; border-bottom-color: var(--brand-yellow); }
.topnav .spacer { flex: 1; }
.topnav button {
  background: transparent; color: var(--nav-ink); border: 1px solid #3a4570;
  border-radius: 99px; font: inherit; font-size: 12.5px; padding: 4px 12px;
  cursor: pointer; opacity: .8; transition: opacity .15s, border-color .15s;
}
.topnav button:hover { opacity: 1; border-color: var(--brand-yellow); }
#authslot { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }
#authslot a { text-decoration: none; opacity: .8; }
#authslot a:hover { opacity: 1; }
#burger { display: none; }

/* ---------- tags + admin ---------- */
.tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
/* deck page header: stats, tags + suggest, similar; then the "I play" bar */
.archmeta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.archmeta > p { margin: 0; }
.archmeta .tagrow { margin: 0; gap: 8px; }
button.linkish {
  display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px;
  background: none; border: 0; padding: 4px 6px; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
button.linkish:hover { color: var(--ink); }
button.linkish .ic { width: 16px; height: 16px; }
.suggestbox {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; max-width: 560px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.suggestbox[hidden], .suggestbox .row[hidden] { display: none; }
.suggestbox label { font-weight: 600; font-size: 14px; }
.suggestbox .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.suggestbox input {
  flex: 1; min-width: 180px; font: inherit; font-size: 16px; height: 38px; padding: 0 12px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tagchip {
  display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 500;
  padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--muted);
}
button.tagchip { cursor: pointer; font-size: 13px; padding: 4px 12px; }
button.tagchip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
#tiles .tile.tagout { display: none; }  /* style filter leaves "I play" alone */
/* solid backdrop so the falling cards don't run through the text */
.adminbox {
  position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 20px 20px;
}
.adminbox a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
ul.adminlist { list-style: none; padding: 0; margin: 8px 0 0; }
ul.adminlist li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
ul.adminlist .row { margin: 0; }
.adminbox .tabs { margin: 18px 0 4px; }
.usertbl td { vertical-align: middle; }
.usertbl .tagchip { font-size: 11.5px; padding: 1px 8px; }
.pwout {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 10px 0; padding: 12px 16px;
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.pwout[hidden] { display: none; }
.pwout .small { flex-basis: 100%; }
.pwout code { font-size: 16px; padding: 2px 8px; border-radius: 6px; background: var(--bg); user-select: all; }
.adminform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adminform input {
  font: inherit; font-size: 14px; height: 38px; padding: 0 12px; min-width: 220px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* ---------- account page ---------- */
/* .banner sets display:flex, which would beat the hidden attribute */
.banner[hidden], [hidden].banner { display: none; }
.acctform { max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.acctform label { display: flex; flex-direction: column; gap: 4px; }
.acctform input {
  font: inherit; font-size: 15px; height: 40px; padding: 0 12px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
#authslot a .ic { margin-right: 4px; }

/* ---------- footer ---------- */
.sitefoot {
  max-width: 1120px; margin: 0 auto; padding: 22px 24px 40px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.sitefoot p { margin: 0 0 6px; max-width: 90ch; }
.sitefoot a { color: inherit; text-underline-offset: 3px; }

/* ---------- page frame & type ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 96px; }

.kicker {
  font-size: 13px; font-weight: 600; color: var(--accent);
  margin: 32px 0 6px; letter-spacing: .01em;
}
main > .kicker:first-child { margin-top: 8px; }
h1, h2, h3 { font-family: var(--font-display); }
h1 {
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.05;
  margin: 0 0 10px; letter-spacing: -.03em; font-weight: 800;
}
h1.pagehead { display: flex; align-items: center; gap: 16px; }
h1.pagehead img { height: .9em; width: auto; flex: none; }
/* the fan drawing only fills part of its square canvas */
h1.pagehead img[src*='archetypes'] { height: 1.3em; margin: -.2em -.1em -.2em -.15em; }
h2 { font-size: 22px; margin: 40px 0 6px; letter-spacing: -.02em; font-weight: 700; }
.standfirst { color: var(--muted); font-size: 16px; margin: 0 0 18px; max-width: 62ch; }
.micro { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.small { color: var(--muted); font-size: 13px; }
p.small { max-width: 80ch; margin: 14px 0 10px; }
.rule { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

/* headline stats (used on other pages) */
.hero { display: flex; flex-wrap: wrap; gap: 10px 44px; margin: 16px 0 6px; }
.hero .stat b {
  display: block; font-family: var(--font-display); font-size: 34px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hero .stat span { font-size: 12.5px; color: var(--muted); }

/* ---------- toolbar ---------- */
.toolbar {
  position: sticky; top: calc(var(--nav-h) + 10px); z-index: 40;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; margin: 18px 0; box-shadow: var(--shadow);
}
.toolbar input[type="search"], .toolbar select {
  font: inherit; font-size: 14px; color: var(--ink);
  height: 38px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.toolbar input[type="search"]::placeholder { color: var(--muted); }
.toolbar select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2398a0c2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.toolbar input:hover, .toolbar select:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.toolbar .action { height: 38px; margin-left: auto; }

/* ---------- summary ---------- */
.summary {
  display: grid; grid-template-columns: auto auto 1fr; gap: 12px 48px; align-items: end;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin: 0 0 6px;
}
.summary br { display: none; }
.summary.withshare { grid-template-columns: auto auto 1fr auto; }
.sumshare { align-self: center; }
.sumshare .action { white-space: nowrap; }
.summary .micro { display: block; margin-bottom: 2px; }
.summary b {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bar { height: 6px; background: var(--pill); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.bar > div {
  height: 100%; background: var(--good); border-radius: 99px;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

/* ---------- table ---------- */
.tablewrap {
  overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.tablewrap > table.plain { min-width: 720px; margin: 0; }
table.plain { border-collapse: collapse; width: 100%; margin: 8px 0; }
table.plain th, table.plain td {
  border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 14px 10px 0; text-align: left; vertical-align: middle; background: transparent;
}
table.plain th:first-child, table.plain td:first-child { padding-left: 16px; white-space: nowrap; }
#staples th:first-child, #staples td:first-child { width: 1%; }
table.plain th:last-child, table.plain td:last-child { padding-right: 16px; }
table.plain th {
  font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
  cursor: pointer; padding-top: 14px; padding-bottom: 12px; user-select: none;
}
table.plain th:hover { color: var(--ink); }
table.plain tbody tr { transition: background .12s; }
table.plain tbody tr:hover td { background: var(--hover); }
table.plain tr:last-child td { border-bottom: 0; }
table.plain td b { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* basic lands don't count toward the collection: no "owned" stepper or status,
   but in your own deck list you can still change how many you play */
tr[data-basic="1"] { opacity: .5; }
tr[data-basic="1"] td[data-own] .stepper, tr[data-basic="1"] .pill { display: none; }
.editview tr[data-basic="1"], .mineview:not(.sharedview) tr[data-basic="1"] { opacity: 1; }
.stepper.basicqty { justify-content: flex-end; }
/* live card count while editing your own list */
.deckcounter {
  position: sticky; bottom: 14px; z-index: 30; width: fit-content; margin: 16px auto 0; padding: 8px 16px;
  font-size: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--warn);
  border-radius: 99px; box-shadow: var(--shadow);
}
.deckcounter b { font-variant-numeric: tabular-nums; color: var(--warn); }
.deckcounter.ok { border-color: var(--good); }
.deckcounter.ok b { color: var(--good); }
table.plain a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
table.plain a:hover { text-decoration-color: var(--accent); }

img.thumb {
  display: inline-block; vertical-align: middle; margin: 2px 4px 2px 0; height: 52px; width: auto; max-width: none; aspect-ratio: 5 / 7;
  border-radius: 4px; background: var(--pill); cursor: zoom-in;
}
#preview {
  display: none; position: fixed; z-index: 100; height: 380px;
  border-radius: 14px; border: 1px solid var(--line); pointer-events: none;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.7);
}
.mana { font-size: 15px; vertical-align: -2px; margin-left: 3px; }

/* lists with a card thumbnail per item (Meta page) */
ul:has(> li > img.thumb) { list-style: none; padding-left: 0; }
li > img.thumb { height: 44px; margin-right: 12px; }
li:has(> img.thumb) { margin: 8px 0; }

/* ---------- controls ---------- */
.stepper { display: inline-flex; align-items: center; white-space: nowrap; }
.stepper button {
  width: 28px; height: 28px; font-size: 16px; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 99px; transition: border-color .15s, background .15s;
}
.stepper button:hover { border-color: var(--accent); background: var(--hover); }
.stepper button:active { transform: scale(.94); }
.stepper input {
  width: 40px; text-align: center; font: inherit; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 0 4px; padding: 2px 0;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; border-bottom-color: var(--accent); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 99px;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.pill:empty { display: none; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill[data-status="complete"] { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); border-color: transparent; }
.pill[data-status="partial"]  { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); border-color: transparent; }

button.action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 500; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: var(--radius-sm); transition: border-color .15s, background .15s;
}
button.action:hover { border-color: var(--accent); background: var(--hover); }

details.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin: 14px 0;
}
details.panel > summary { cursor: pointer; font-weight: 600; }
details.panel textarea {
  width: 100%; margin-top: 8px; padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
}
/* ---------- modal dialog (import / export) ---------- */
dialog.modal {
  width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto;
  padding: 18px 20px 20px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
dialog.modal::backdrop { background: rgba(8, 10, 22, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modalhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modalhead h2 { margin: 0; font-size: 20px; }
.modalhead .x {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.modalhead .x:hover { background: var(--hover); color: var(--ink); }
dialog.modal .tabs { margin: 10px 0 14px; }
dialog.modal textarea {
  width: 100%; padding: 10px 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
}
dialog.modal .seg { margin-bottom: 10px; background: var(--bg); }
dialog.modal p.small { margin-top: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
ul.tight { margin: 6px 0; padding-left: 20px; }
ul.tight li { margin: 3px 0; }

/* ---------- banner ---------- */
.banner {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; font-size: 14px;
}
.banner a { font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.banner button {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.banner button:hover { background: var(--hover); color: var(--ink); }

/* ---------- archetype tiles ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 14px 0; }
.tile {
  display: block; color: inherit; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; transition: border-color .15s, transform .15s;
}
a.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile h3 { margin: 0 0 2px; font-size: 18px; letter-spacing: -.02em; }
.tile .meta { color: var(--muted); font-size: 13px; }
.tile .keys { margin: 10px 0 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.tile .keys img { border-radius: 4px; margin: 0; }
.tile .pct { font-family: var(--font-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- sort select with icon, event filter ---------- */
.sortsel { position: relative; display: inline-flex; align-items: center; }
.sortsel .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); vertical-align: 0; pointer-events: none; color: var(--muted); }
.toolbar .sortsel select { padding-left: 36px; }
/* filter-bar dropdowns (Archetypes page) */
.dd { position: relative; }
.ddbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 12px;
  font: inherit; font-size: 14px; color: var(--ink); white-space: nowrap; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ddbtn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.ddbtn .ic { width: 18px; height: 18px; color: var(--muted); transition: transform .15s; }
.ddbtn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.dd.on .ddbtn { border-color: var(--accent); color: var(--accent); }
.ddmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 210px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.ddmenu[hidden] { display: none; }
.ddhead { font-size: 12px; color: var(--muted); padding: 6px 10px 4px; }
.ddopt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer;
}
.ddopt:hover { background: var(--hover); }
.ddopt input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
/* link options look like radio buttons */
.ddopt.radio::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--muted); box-sizing: border-box;
}
.ddopt.radio[aria-current="page"]::before { border: 4.5px solid var(--accent); }
.ddreset {
  margin: 4px 0 0; padding: 8px 10px; text-align: left; font: inherit; font-size: 13px; color: var(--muted);
  background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer;
}
.ddreset:hover { color: var(--ink); }
.pagemeta { margin: -4px 0 14px; }
.pagemeta a { color: inherit; }
#filtnote { margin: -8px 0 14px; max-width: none; }
#filtnote .linkish { display: inline; padding: 0; font-size: inherit; }
.kicker.rowhead .sparewrap { margin: 0; font-weight: 400; }
.evfilter { display: flex; flex-wrap: wrap; gap: 8px; }
#evbtn { display: none; }
#evdialog .evfilter { flex-direction: column; align-items: stretch; gap: 12px; margin: 4px 0 14px; }
#evdialog .evfilter .seg { justify-content: space-between; }
#evdialog .evfilter .seg button { flex: 1; justify-content: center; padding: 8px 6px; }
.evfilter .seg { background: var(--bg); }
.evfilter .seg button { display: inline-flex; align-items: center; gap: 0; }
.evfilter .seg .ic { width: 15px; height: 15px; }
.tile[hidden] { display: none; }

/* ---------- archetype tiles: meta numbers + completion ---------- */
.kicker.rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kicker.rowhead .action { font-size: 13px; padding: 4px 12px; color: var(--ink); }
.brewtag {
  display: inline-block; font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); vertical-align: middle; letter-spacing: .02em;
}
.brewtile .tshare { right: 8px; }
.pagetabs { margin: 18px 0 6px; }
.tilehead { display: flex; align-items: baseline; gap: 8px; padding-right: 36px; }
.tilehead h3 { padding-right: 0; }
.tile .rank { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--accent); }
.pips { display: flex; align-items: center; gap: 2px; margin: 4px 0 0; }
.pips .mana { margin-left: 0; font-size: 16px; }
.pips .small { margin-left: 8px; }
.tile .keys img { height: 64px; }
.tstats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line);
}
.tstats div { display: flex; flex-direction: column; min-width: 0; }
.tstats b { font-family: var(--font-display); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tstats b.delta.up { color: var(--good); }
.tstats b.delta.down { color: var(--bad); }
.tstats b.muted { color: var(--muted); font-weight: 500; }
.tstats span { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.tcomp { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.tcomprow { display: flex; align-items: baseline; gap: 10px; }
.grid.nocoll .tcomp { display: none; }
.tshort { margin-top: 8px; color: var(--warn); }
.sparewrap { display: flex; margin: 4px 0 6px; color: var(--ink); }
.sparewrap[hidden] { display: none; }

/* ---------- archetype page: deck breakdown ---------- */
.archhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.archhead h1 { margin-bottom: 4px; }
/* deck page: name with its play-style tags right next to it */
.archtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 8px; }
.archtitle h1 { margin: 0; }
.archtitle { margin: 0 0 6px; }
.archtags { margin: 0 0 12px; gap: 8px; }
/* deck page: Tokens tab */
.tokgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.tokcard { display: flex; gap: 12px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.tokcard img.thumb, .tokblank { width: 84px; height: auto; aspect-ratio: 745 / 1040; flex: none; border-radius: 5px; background: var(--panel2); cursor: zoom-in; }
.tokcard ul.tight { margin: 6px 0 0; padding: 0; list-style: none; }
.woodlink {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 8px 0 0; padding: 4px 10px 4px 4px;
  font-size: 13px; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, #b07a43 18%, var(--panel2)); border: 1px solid color-mix(in srgb, #b07a43 45%, var(--line));
  border-radius: 99px;
}
.woodlink:hover { border-color: #c98d4e; }
.woodlink { white-space: nowrap; }
.woodpics { display: inline-flex; }
.woodpics img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--panel2); }
.woodpics img + img { margin-left: -10px; }
.woodnote {
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px;
  background: color-mix(in srgb, #b07a43 12%, var(--panel)); border: 1px solid color-mix(in srgb, #b07a43 35%, var(--line));
}
#suggestbox { margin: 4px 0 12px; }
#stylebox { margin: 0 0 14px; }
#stylebox .tagchip { font-size: 14px; padding: 6px 14px; }
.archhead .hero { margin: 10px 0 0; }
button.action.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
button.action.primary:hover { background: var(--accent); filter: brightness(1.1); }

.deckwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; margin-top: 22px; }
.deckmain > h2:first-of-type { margin-top: 22px; }
.decksidebar {
  position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto;
}
.sidecard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.sidecard b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.decksidebar details.panel { margin: 0; }
.decksidebar details.panel > summary { font-family: var(--font-display); font-size: 16px; }
.decksidebar details.panel .small { margin: 8px 0 0; }
ul.buylist { list-style: none; margin: 6px 0 0; padding: 0; }
ul.buylist li { display: grid; grid-template-columns: 36px 30px 1fr auto; column-gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.buylist .bimg { grid-row: 1 / span 2; }
.buylist .bimg img.thumb { height: 46px; margin: 0; }
.buylist .q { color: var(--muted); font-variant-numeric: tabular-nums; }
.buylist .n { font-weight: 500; min-width: 0; }
.buylist .c { font-weight: 600; font-variant-numeric: tabular-nums; }
.buylist .m { grid-column: 3 / 5; font-size: 12px; color: var(--muted); }
label.filebtn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
}
label.filebtn:hover { border-color: var(--accent); }
.filerow { margin: 0 0 8px; }
#copybuy[hidden] { display: none; }

.deckbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.seg { display: inline-flex; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; }
.seg button {
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted);
  background: transparent; border: 0; border-radius: 99px; padding: 5px 18px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

#archcontent[data-view="visual"] .listview { display: none; }
#archcontent[data-view="list"] .visualview { display: none; }
#archcontent[data-filter="missing"] .cardtile[data-status="complete"],
#archcontent[data-filter="missing"] .cardtile[data-basic="1"] { display: none; }
#archcontent[data-filter="missing"] .cardgroup:not(:has(.cardtile:not([data-status="complete"]):not([data-basic="1"]))) { display: none; }

.grouphead { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 14px; font-size: 16px; letter-spacing: -.01em; }
.grouphead .small { font-family: var(--font-body); font-weight: 400; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 14px; }
.cardtile { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cardart {
  position: relative; aspect-ratio: 5 / 7; overflow: hidden; background: var(--pill);
  border-radius: 4.6% / 3.3%; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .7);
  transition: transform .15s, box-shadow .15s;
}
.cardtile:hover .cardart { transform: translateY(-3px); }
.cardimg { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s, filter .2s; }
.cardimg.noimg { display: grid; place-items: center; padding: 10px; text-align: center; font-size: 13px; color: var(--muted); }
.cardtile[data-status="none"] .cardimg { opacity: .5; filter: grayscale(.6); }
.cardtile[data-status="none"]:hover .cardimg { opacity: .9; filter: none; }
.cardtile[data-status="partial"] .cardart { box-shadow: 0 0 0 2px var(--warn), 0 8px 18px -10px rgba(0, 0, 0, .7); }
.cardtile[data-status="complete"] .cardart { box-shadow: 0 0 0 2px var(--good), 0 8px 18px -10px rgba(0, 0, 0, .7); }
.cardtile .pill {
  position: absolute; left: 8px; top: 8px; border: 0; padding: 3px 9px; font-weight: 600;
  background: rgba(12, 15, 32, .88); color: #eceaf4;
}
.cardtile[data-status="partial"] .pill { color: #f4bd62; }
.cardtile[data-status="complete"] .pill { color: #9fe07f; }
.cardcap { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.cardcap b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cardprice { font-variant-numeric: tabular-nums; }
.cardtile .stepper { align-self: center; }
.cardtile[data-basic="1"] { opacity: .6; }
.cardtile[data-basic="1"] .stepper, .cardtile[data-basic="1"] .pill { display: none; }

.infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 40px 0 8px; }
.infocard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.infocard h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.infocard h3 .small { font-family: var(--font-body); font-weight: 400; margin-left: 6px; }
.infocard p { margin: 6px 0; }
table.results td { font-size: 14px; }

/* ---------- card modal (Staples): where a card is played ---------- */
.cardlink {
  font: inherit; font-weight: 600; color: inherit; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.cardlink:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
#staples img.thumb { cursor: pointer; }
dialog.cardmodal { width: min(720px, calc(100vw - 28px)); }
.cardbody { display: flex; gap: 20px; align-items: flex-start; margin-top: 12px; }
.cardbig { width: 220px; max-width: 40%; flex: none; border-radius: 4.6% / 3.3%; aspect-ratio: 5 / 7; background: var(--pill); }
.cardinfo { flex: 1; min-width: 0; }
.cardinfo p.small { margin: 0 0 10px; }
.cardinfo .row { margin: 0 0 4px; }
.cardinfo h3 { margin: 18px 0 6px; font-size: 16px; }
ul.prints { list-style: none; margin: 0 0 8px; padding: 0; }
ul.prints li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--line);
}
ul.prints .pimg { width: 34px; height: 47px; border-radius: 3px; background: var(--pill); overflow: hidden; }
ul.prints .pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
ul.prints .plabel { display: flex; flex-direction: column; min-width: 0; }
ul.prints .plabel b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.prints li:first-child .plabel b { color: var(--muted); }
tr[data-other] .pill { display: none; }
tr[data-other] .cardlink { color: var(--muted); }
.extsearch {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 16px 4px; margin: 10px 0;
}
.extsearch[hidden] { display: none; }
.exthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.extlist li { grid-template-columns: 34px minmax(0, 1fr) auto; }
ul.usage { list-style: none; margin: 0; padding: 0; }
ul.usage li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
}
ul.usage a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
ul.usage a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
ul.usage li.mine a { color: var(--accent); }
ul.usage li.mine > span:first-child { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.warnline { color: var(--warn); }
ul.usage .pct { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
ul.usage .small { font-size: 12.5px; }
ul.usage .small:last-child { text-align: right; }
ul.usage li > :nth-child(2) { grid-row: 2; grid-column: 1; }
ul.usage li > :nth-child(3) { grid-row: 1; grid-column: 2; }
ul.usage li > :nth-child(4) { grid-row: 2; grid-column: 2; }

/* ---------- share dialog ---------- */
dialog.sharemodal { width: min(640px, calc(100vw - 28px)); }
.sharecanvas { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #141a35; }
.sharecanvas canvas { display: block; width: 100%; height: auto; }
dialog.sharemodal .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.winbar #sharemeta { margin-left: auto; }

.sharelink { display: flex; gap: 8px; margin: 0 0 12px; }
.sharelink[hidden] { display: none; }
.sharelink input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; height: 38px; padding: 0 12px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
a.action.linkbtn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500;
  padding: 6px 14px; min-height: 36px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
a.action.linkbtn:hover { border-color: var(--accent); }
.sharednote { font-style: italic; margin-top: -4px; }
.sharefields { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 0 0 12px; }
.sharefields label { display: flex; flex-direction: column; gap: 4px; }
.sharefields input {
  font: inherit; font-size: 14px; height: 38px; padding: 0 12px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tshare {
  position: absolute; top: 8px; right: 48px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.tshare:hover { background: var(--hover); color: var(--ink); }
.tshare[hidden] { display: none; }
.tile:has(.tshare:not([hidden])) .tilehead { padding-right: 80px; }

/* ---------- pager + collapsible filters (staples) ---------- */
.pg-hide { display: none !important; }
.pager {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px 0 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pager button[disabled] { opacity: .4; pointer-events: none; }
#stapleswrap { scroll-margin-top: calc(var(--nav-h) + 84px); }
.filters { display: contents; }
#ftoggle { display: none; }

/* ---------- "I play this": tile star + my-version bar ---------- */
.tile { position: relative; }
.tile h3 { padding-right: 40px; }
.star {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--muted); background: transparent;
  border: 0; border-radius: 50%; cursor: pointer;
}
.star:hover { background: var(--hover); color: var(--ink); }
.star[aria-pressed="true"] { color: var(--accent); }
.mybar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.mybar .addrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mybar input#addcard {
  font: inherit; font-size: 14px; height: 36px; padding: 0 12px; min-width: 200px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pastebox { flex-basis: 100%; }
.pastebox textarea {
  width: 100%; padding: 10px 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
td.diff { color: var(--accent); font-weight: 700; }

/* ---------- time-window switch + share change ---------- */
.seg a {
  font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none;
  border-radius: 99px; padding: 5px 14px; white-space: nowrap;
}
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.winbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; }
.toolbar .seg { background: var(--bg); }
td.delta.up { color: var(--good); }
td.delta.down { color: var(--bad, #e5484d); }

/* ---------- archetype page: tabs + grouped deck table ---------- */
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.tabs {
  /* scrolls sideways only: the grey line is an inset shadow (not a border the
     buttons overlap with -1px), so nothing pokes out and the bar can't be
     dragged up and down on phones */
  display: flex; gap: 4px; margin: 22px 0 4px; box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  touch-action: pan-x pan-y; overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--muted); white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs .count { font-size: 12px; background: var(--pill); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.tabs .count:empty { display: none; }
section[data-panel] > h2:first-child { margin-top: 22px; }
table.plain tr.grouprow th {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: default; padding-top: 22px;
}
table.plain tr.grouprow th .small { font-family: var(--font-body); font-weight: 400; margin-left: 6px; }
.decktbl tr.core td:nth-child(2) { font-weight: 600; }
section[data-panel="buy"] ul.buylist { max-width: 560px; }
li:has(> img.thumb) { display: flex; align-items: center; }

/* ======================================================
   Tablet
   ====================================================== */
@media (max-width: 900px) {
  main { padding: 22px 18px 80px; }
  .deckwrap { grid-template-columns: 1fr; gap: 12px; }
  .decksidebar { position: static; max-height: none; overflow: visible; order: -1; }
  .summary { grid-template-columns: auto auto; }
  .summary > div:last-child { grid-column: 1 / -1; }
  .summary.withshare { grid-template-columns: auto auto; }
  .summary.withshare .sumcostbox, .summary.withshare .sumshare { grid-column: 1 / -1; }
}

/* ======================================================
   Phone: nav drawer, stacked toolbar, staples as cards
   ====================================================== */
@media (max-width: 700px) {
  :root { --nav-h: 64px; }

  /* header is just logo + burger; account links and theme live in the drawer */
  .topnav { gap: 12px; padding: 0 16px; }
  .topnav .spacer { display: none; }
  .brandlink { --logo-h: 40px; }
  #burger {
    display: block; margin-left: auto; width: 44px; height: 44px; padding: 0;
    border: 1px solid #3a4570; border-radius: var(--radius-sm); font-size: 20px; opacity: 1;
  }
  #navlinks {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex: none; flex-direction: column; align-items: stretch; align-self: auto; gap: 0;
    background: var(--nav); padding: 4px 16px 16px; border-bottom: 1px solid var(--nav-line);
    box-shadow: 0 20px 30px -10px rgba(0,0,0,.5);
  }
  #navlinks > #authslot { align-self: stretch; flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; }
  #authslot .sep { display: none; }
  #authslot .small { padding: 14px 2px 0; font-size: 13px; color: var(--nav-ink); opacity: .62; }
  #navlinks > button, #navlinks #authslot button {
    align-self: flex-start; margin: 14px 0 0; padding: 10px 16px;
    font-size: 15px; border-radius: var(--radius-sm); opacity: 1;
  }
  #navlinks.open { display: flex; }
  #navlinks a.tab {
    padding: 14px 2px; font-size: 16px; margin: 0;
    border-bottom: 1px solid var(--nav-line);
  }
  #navlinks a.tab.active { color: var(--brand-yellow); border-bottom-color: var(--nav-line); }

  main { padding: 18px 14px 64px; }
  .sitefoot { padding: 18px 14px 32px; }
  h1 { font-size: 30px; }
  .standfirst { font-size: 15px; }

  /* toolbar: not sticky on phones (it would eat a third of the screen) */
  .toolbar {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel);
  }
  .toolbar input[type="search"] { grid-column: 1 / -1; flex: none; }
  .toolbar select, .toolbar input[type="search"] { width: 100%; font-size: 16px; /* stops iOS zoom-on-focus */ }
  .toolbar .sortsel { display: flex; }
  /* Archetypes filter bar: one sticky row that scrolls sideways; menus open as a bottom sheet */
  .toolbar:has(.dd) {
    position: sticky; top: var(--nav-h); display: flex; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; margin: 14px -16px; border-radius: 0; border-left: 0; border-right: 0; padding: 8px 16px;
  }
  .toolbar:has(.dd)::-webkit-scrollbar { display: none; }
  .toolbar:has(.dd) {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .toolbar:has(.dd) .sortsel { width: auto; flex: none; }
  /* sort shrinks to its icon; the native picker still shows the choices */
  .toolbar:has(.dd) .sortsel select { width: 46px; padding: 0; color: transparent; background-image: none; }
  .toolbar:has(.dd) .sortsel select option { color: var(--ink); }
  .toolbar:has(.dd) .sortsel .ic { left: 50%; transform: translate(-50%, -50%); color: var(--ink); }
  .toolbar .dd:last-of-type { margin-right: 40px; }
  .ddbtn .wide { display: none; }
  .ddbtn { font-size: 15px; }
  .ddmenu {
    position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; max-width: none;
    max-height: 70vh; overflow-y: auto; padding: 8px; z-index: 200;
    box-shadow: 0 -8px 40px rgba(0,0,0,.45);
  }
  .ddopt { padding: 12px 10px; font-size: 16px; }
  body.ddsheet::after { content: ""; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); }
  .toolbar .action { grid-column: 1 / -1; margin: 0; }

  .summary { padding: 14px 16px; gap: 12px 24px; }
  .summary b { font-size: 18px; }
  .hero .stat b { font-size: 26px; }

  #preview { display: none !important; }
  .grid { grid-template-columns: 1fr; }
  .archhead .action { width: 100%; }
  .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .cardtile .stepper button { width: 38px; height: 38px; }

  /* ---- staples table -> one card per staple (#staples only; other tables scroll) ---- */
  .tablewrap:has(> #staples) { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tablewrap > table.plain { min-width: 560px; }
  .tablewrap > #staples { min-width: 0; }
  #staples, #staples tbody { display: block; }
  #staples thead { display: none; }

  #staples tbody tr {
    display: grid;
    grid-template-columns: 58px repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "thumb card  card  card  status"
      "thumb share arch  need  price"
      "own   own   own   miss  miss";
    gap: 10px 8px; align-items: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; margin: 0 0 10px;
  }
  #staples tbody tr:hover td { background: transparent; }
  #staples tbody td, #staples tbody td:first-child, #staples tbody td:last-child {
    border: 0; padding: 0; width: auto; text-align: left;
  }

  #staples td:nth-child(1) { grid-area: thumb; align-self: start; }
  #staples td:nth-child(2) { grid-area: card; line-height: 1.3; white-space: normal; }
  #staples td:nth-child(3) { grid-area: share; }
  #staples td:nth-child(4) { grid-area: arch; }
  #staples td:nth-child(5) { grid-area: need; }
  #staples td:nth-child(6) { grid-area: own; }
  #staples td:nth-child(7) { grid-area: status; justify-self: end; align-self: start; }
  #staples td:nth-child(8) { grid-area: miss; }
  #staples td:nth-child(9) { grid-area: price; }

  #staples td:nth-child(3), #staples td:nth-child(4), #staples td:nth-child(5),
  #staples td:nth-child(8), #staples td:nth-child(9) {
    display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  #staples td:nth-child(3)::before { content: "Share"; }
  #staples td:nth-child(4)::before { content: "Decks"; }
  #staples td:nth-child(5)::before { content: "Need"; }
  #staples td:nth-child(8)::before { content: "Missing"; }
  #staples td:nth-child(9)::before { content: "Price"; }
  #staples td:nth-child(3)::before, #staples td:nth-child(4)::before,
  #staples td:nth-child(5)::before, #staples td:nth-child(8)::before,
  #staples td:nth-child(9)::before { font-size: 11.5px; font-weight: 400; color: var(--muted); }
  #staples td:nth-child(6), #staples td:nth-child(8) { padding-top: 10px; border-top: 1px solid var(--line); }
  #staples td:nth-child(8) { align-items: flex-end; text-align: right; }

  #staples img.thumb { height: 81px; width: 58px; }
  .stepper button { width: 36px; height: 36px; font-size: 18px; }
  .stepper input { width: 44px; font-size: 16px; }

  /* staples toolbar: search + two buttons; selects open on demand */
  /* with the share button back (SHARE_ENABLED), use: grid-template-columns: 1fr 1fr auto */
  .toolbar #iobtn { white-space: nowrap; }
  .toolbar #ftoggle, .toolbar #iobtn, .toolbar #sharebtn { display: flex; grid-column: auto; margin: 0; }
  .toolbar #sharebtn .lbl { display: none; }
  .winbar #sharemeta { margin-left: 0; }

  /* players table -> cards */
  .tablewrap:has(> .playertbl) { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tablewrap > table.playertbl { min-width: 0; }
  .playertbl, .playertbl tbody { display: block; }
  .playertbl thead { display: none; }
  .playertbl tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px;
    grid-template-areas: "name name name" "top8 wins res" "best best best" "deck deck deck";
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 12px; margin: 0 0 8px;
  }
  .playertbl tbody td, .playertbl tbody td:first-child, .playertbl tbody td:last-child {
    border: 0; padding: 0; text-align: left; white-space: normal;
  }
  .playertbl td:nth-child(1) { grid-area: name; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
  .playertbl td:nth-child(2) { grid-area: top8; }
  .playertbl td:nth-child(3) { grid-area: wins; }
  .playertbl td:nth-child(4) { grid-area: res; }
  .playertbl td:nth-child(5) { grid-area: best; font-size: 14px; }
  .playertbl td:nth-child(5)::before { content: "Best finish: "; color: var(--muted); }
  .playertbl td:nth-child(6) { grid-area: deck; font-size: 14px; }
  .playertbl td:nth-child(2), .playertbl td:nth-child(3), .playertbl td:nth-child(4) {
    display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 600;
  }
  .playertbl td:nth-child(2)::before { content: "Top 8s"; }
  .playertbl td:nth-child(3)::before { content: "Wins"; }
  .playertbl td:nth-child(4)::before { content: "Results"; }
  .playertbl td:nth-child(2)::before, .playertbl td:nth-child(3)::before, .playertbl td:nth-child(4)::before {
    font-size: 11.5px; font-weight: 400; color: var(--muted);
  }
  #themebtn .lbl, #rainbtn .lbl { display: inline; }
  #navlinks > #themebtn { margin-left: 0; }
  #burger { display: inline-flex; justify-content: center; }
  #burger .ic { width: 24px; height: 24px; }
  dialog.modal textarea { font-size: 16px; }
  .sharefields { grid-template-columns: 1fr; }
  .sharefields input { font-size: 16px; }
  .cardbody { flex-direction: column; align-items: stretch; gap: 14px; }
  .cardbig { width: 150px; max-width: none; align-self: center; }
  .toolbar .seg { grid-column: 1 / -1; justify-content: space-between; }
  .toolbar > .small { grid-column: 1 / -1; }
  .filters { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters.open { display: grid; }
  .pager { justify-content: space-between; }
  .pager button { min-height: 40px; }

  /* ---- deck + meta tables -> one card per row, nothing scrolls sideways ---- */
  .tablewrap:has(> .decktbl), .tablewrap:has(> .metatbl) { overflow: visible; background: none; border: 0; border-radius: 0; }
  .tablewrap > table.decktbl, .tablewrap > table.metatbl { min-width: 0; }
  .decktbl, .decktbl tbody, .metatbl, .metatbl tbody { display: block; }
  .decktbl thead, .metatbl thead { display: none; }
  .decktbl tbody tr[data-card], .metatbl tbody tr {
    display: grid; gap: 8px 10px; align-items: center;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 12px; margin: 0 0 8px;
  }
  .decktbl tbody tr:hover td, .metatbl tbody tr:hover td { background: transparent; }
  .decktbl tbody td, .decktbl tbody td:first-child, .decktbl tbody td:last-child,
  .metatbl tbody td, .metatbl tbody td:first-child, .metatbl tbody td:last-child {
    border: 0; padding: 0; width: auto; text-align: left; white-space: normal;
  }
  .decktbl tr.grouprow, .decktbl tr.grouprow th { display: block; }
  .decktbl tr.grouprow th { border: 0; padding: 16px 2px 8px; }

  .decktbl tbody tr[data-card] {
    grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "thumb card card status" "thumb share mode own";
  }
  .decktbl td:nth-child(1) { grid-area: thumb; }
  .decktbl td:nth-child(2) { grid-area: card; line-height: 1.3; }
  .decktbl td:nth-child(3) { grid-area: share; }
  .decktbl td:nth-child(4) { display: none; }
  .decktbl td:nth-child(5) { grid-area: mode; }
  .decktbl td:nth-child(6) { grid-area: own; justify-self: end; }
  .decktbl td:nth-child(7) { grid-area: status; justify-self: end; }
  .decktbl td:nth-child(3)::before { content: "In decks"; }
  .decktbl td:nth-child(5)::before { content: "Usually"; }
  .decktbl.mineview td:nth-child(5)::before { content: "Mine"; }
  .decktbl.sharedview td:nth-child(5)::before { content: "List"; }
  .decktbl.editview td:nth-child(5)::before { content: "Typical"; }
  .mybar .action { min-height: 40px; }
  .mybar input#addcard { flex: 1; font-size: 16px; }
  .decktbl img.thumb { height: 64px; width: 46px; margin: 0; }

  .metatbl tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "name name name" "decks share change" "wins big top8" "keys keys keys";
  }
  .metatbl td:nth-child(1) { grid-area: name; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
  .metatbl td:nth-child(2) { grid-area: decks; }
  .metatbl td:nth-child(3) { grid-area: share; }
  .metatbl td:nth-child(4) { grid-area: change; }
  .metatbl td:nth-child(5) { grid-area: wins; }
  .metatbl td:nth-child(6) { grid-area: big; }
  .metatbl td:nth-child(7) { grid-area: top8; }
  .metatbl td:nth-child(8) { grid-area: keys; display: flex; gap: 4px; }
  .metatbl td:nth-child(8) img.thumb { margin: 0; }
  .metatbl td:nth-child(2)::before { content: "Decks"; }
  .metatbl td:nth-child(3)::before { content: "Share"; }
  .metatbl td:nth-child(4)::before { content: "Change"; }
  .metatbl td:nth-child(5)::before { content: "Wins"; }
  .metatbl td:nth-child(6)::before { content: "Biggest win"; }
  .metatbl td:nth-child(7)::before { content: "Top 8"; }

  .decktbl td:nth-child(3), .decktbl td:nth-child(5),
  .metatbl td:nth-child(2), .metatbl td:nth-child(3), .metatbl td:nth-child(4),
  .metatbl td:nth-child(5), .metatbl td:nth-child(6), .metatbl td:nth-child(7) {
    display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .decktbl td:nth-child(3)::before, .decktbl td:nth-child(5)::before,
  .metatbl td:nth-child(2)::before, .metatbl td:nth-child(3)::before,
  .metatbl td:nth-child(4)::before, .metatbl td:nth-child(5)::before,
  .metatbl td:nth-child(6)::before, .metatbl td:nth-child(7)::before {
    font-size: 11.5px; font-weight: 400; color: var(--muted);
  }
}

@media (max-width: 380px) {
  #staples tbody tr { grid-template-columns: 50px repeat(4, minmax(0, 1fr)); }
  #staples img.thumb { width: 50px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .topnav, .toolbar, .banner, #cardrain { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- deck image maker (sharedeck.html) ---------- */
.sdwrap { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 24px; align-items: start; margin-top: 18px; }
.sdcontrols { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); }
.sdfield { display: flex; flex-direction: column; gap: 6px; }
.sdfield > span:first-child { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.sdfield input:not([type]), .sdfield input[type='text'], .sdfield textarea, .sdfield select {
  font: inherit; font-size: 14px; color: var(--ink); padding: 8px 10px; width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sdfield textarea { font-family: ui-monospace, Menlo, monospace; font-size: 13px; resize: vertical; }
.sdfield input[type='range'] { accent-color: var(--accent); }
.sdfield .seg { background: var(--bg); align-self: flex-start; }
.sdfield .linkish { padding: 0; }
.sdwarn { color: var(--warn); }
.sdside { display: flex; flex-direction: column; gap: 16px; }
.sdhead { margin: 0; font-size: 15px; letter-spacing: .02em; }
#sdbgfx, .sdcustom { display: flex; flex-direction: column; gap: 14px; }
.sdcustom[hidden], #sdbgfx[hidden], #sdlogofilewrap[hidden], #sdbgcardwrap[hidden], #sdbgfilewrap[hidden] { display: none; }
.sdpreview { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.sdpreview canvas { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.sdpreview .sharecanvas { padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-height: 120px; }
.sdpreview #sdempty { padding: 24px; margin: 0; }
@media (max-width: 860px) {
  .sdwrap { grid-template-columns: 1fr; }
  .sdpreview { position: static; order: -1; }
  .sdfield input, .sdfield textarea, .sdfield select { font-size: 16px; }
}

.sharemodal .seg[hidden], .sharemodal [data-fmt][hidden] { display: none; }

/* card names that open the card on Scryfall (deck pages) */
a.cardlink { color: inherit; text-decoration: none; }
a.cardlink:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---------- deck page: compact header, summary, Moxfield-style list ---------- */
a.backlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px 6px 10px; margin: 0 0 10px -10px;
  font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; border-radius: 99px;
}
a.backlink:hover { background: var(--hover); }
a.backlink .ic { width: 20px; height: 20px; }
.titlerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 10px; }
.titlemain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.titlemain h1 { margin: 0; }
.headactions { display: flex; align-items: center; gap: 8px; }
.moremenu { position: relative; }
.moremenu .ddmenu { left: auto; right: 0; min-width: 240px; }
.iconbtn { min-width: 40px; justify-content: center; font-size: 20px; line-height: 1; letter-spacing: 1px; }
button.ddopt { width: 100%; font: inherit; font-size: 14px; text-align: left; background: none; border: 0; }
button.ddopt .ic { width: 18px; height: 18px; color: var(--muted); }
.statchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.statchip { padding: 4px 12px; border-radius: 99px; font-size: 13.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); }
.statchip b { color: var(--ink); font-weight: 700; }
.statchip.muted { background: none; }
.summary.decksum { grid-template-columns: 1fr auto; align-items: center; gap: 12px 28px; }
.sumcomp b { display: block; margin: 2px 0 8px; }
.sumbuy { display: flex; align-items: center; gap: 14px; }
.sumbuy > div { display: flex; flex-direction: column; align-items: flex-end; }
.sumbuy b { font-size: 16px; }
.sumbuy .small { font-size: 12.5px; }
.sumbuy .action[hidden] { display: none; }
#buydlg { width: min(640px, calc(100vw - 28px)); }
#buydlg .row { margin: 6px 0 12px; }
.tabs .tabspacer { flex: 1; }
.tabs .viewseg { align-self: center; flex: none; margin: 0 2px 4px 8px; background: var(--bg); }
.tabs .viewseg button { padding: 4px 12px; font-size: 13px; border: 0; margin: 0; border-radius: 99px; }
.deckhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px 0 8px; }
.deckhead h2 { margin: 0; font-size: 20px; }
.info { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; font-size: 13px;
  color: var(--muted); border-radius: 50%; cursor: help; }
.info:hover, .info:focus { color: var(--ink); background: var(--hover); }
.decktables h3 { margin: 18px 0 8px; font-size: 16px; }
.decklist {
  columns: 3 250px; column-gap: 28px; margin: 6px 0 24px; padding: 16px 20px 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);  /* solid, so falling cards don't cut through the text */
}
.dlgroup { break-inside: avoid; margin: 0 0 18px; }
.dlgroup h3 { margin: 0 0 4px; font-size: 14.5px; }
.dlgroup h3 .small { font-weight: 400; margin-left: 4px; }
.dlgroup.side h3 { color: var(--accent); }
.dlgroup ul { list-style: none; margin: 0; padding: 0; }
.dlcard {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px; margin: 0 -8px; box-sizing: content-box; font: inherit; font-size: 14.5px; text-align: left;
  color: var(--ink); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.dlcard:hover { background: var(--hover); }
.dlcard.core .dln { font-weight: 600; }
.dlq { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlown { font-size: 12px; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 99px; min-width: 14px; text-align: center; }
.dlown[data-st="full"] { color: var(--good); }
.dlown[data-st="some"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.dlown[data-st="none"] { color: var(--muted); }
.dlown.basic { padding: 0; }
dialog.cardsheet { width: min(640px, calc(100vw - 28px)); display: none; gap: 20px; align-items: flex-start; padding: 22px; }
dialog.cardsheet[open] { display: flex; }
.sheetimg { width: 220px; max-width: 42%; border-radius: 12px; flex: none; }
.sheetinfo { flex: 1; min-width: 0; }
.sheetinfo h2 { margin: 0 34px 2px 0; font-size: 22px; }
.sheetinfo h2 a { color: inherit; }
.sheetstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.sheetstats div { display: flex; flex-direction: column; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sheetstats b { font-family: var(--font-display); font-size: 18px; }
.sheetstats span { font-size: 12px; color: var(--muted); }
.sheetrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.sheetrow > span:first-child { font-weight: 600; font-size: 14px; }
.archmore { margin: 28px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.archmore details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.archmore summary { cursor: pointer; font-weight: 600; }
.archmore summary .small { font-weight: 400; margin-left: 6px; }
.archmore h3 { font-size: 15px; margin: 16px 0 6px; }
.editbar { margin-bottom: 12px; }
@media (max-width: 700px) {
  .summary.decksum { grid-template-columns: 1fr; }
  .sumbuy { justify-content: space-between; }
  .sumbuy > div { align-items: flex-start; }
  .decklist { columns: 1; padding: 12px 14px 4px; }
  .dlcard { padding: 8px; font-size: 15px; }
  dialog.cardsheet[open] { flex-direction: column; align-items: center; }
  .sheetimg { width: 60%; max-width: 240px; }
  .titlerow { align-items: flex-start; }
  /* the four header buttons in one row under the title */
  .headactions { width: 100%; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; }
  .headactions > .action { padding: 0 10px; font-size: 13.5px; min-height: 38px; }
  .headactions .ic { width: 17px; height: 17px; }
}

/* deck page: Cards view (card pictures with copies + owned) */
.deckgrid { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 6px 0 24px; }  /* small groups share a row */
.dggroup { flex: 0 1 auto; max-width: 100%; margin: 0 0 14px; }
.dggroup h3 { margin: 0 0 8px; font-size: 14.5px; }
.dggroup h3 .small { font-weight: 400; margin-left: 4px; }
.dggroup.side h3 { color: var(--accent); }
.dgcards { display: flex; flex-wrap: wrap; gap: 10px; }
.dgcard { position: relative; width: 118px; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 7px;
  aspect-ratio: 745 / 1040; transition: transform .12s; }
.dgcard:hover { transform: translateY(-3px); }
.dgcard img, .dgblank { display: block; width: 100%; height: 100%; border-radius: 7px; object-fit: cover;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.dgblank { display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box;
  font-size: 12px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); text-align: center; }
.dgq { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; font-family: var(--font-display);
  font-weight: 800; font-size: 13px; color: var(--accent); background: rgba(12,15,32,.9); }
.dgcard .dlown { position: absolute; right: 6px; bottom: 6px; background: rgba(12,15,32,.9); }
.dgcard .dlown.basic { display: none; }
.headactions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) {
  .dgcards { gap: 8px; }
  .dgcard { width: calc((100vw - 32px - 16px) / 3); max-width: 118px; }
}

@media (max-width: 700px) {
  .headactions { justify-content: flex-start; flex-wrap: nowrap; }  /* after the desktop rule above */
}

/* card names open the card pop-up (Scryfall is linked from there) */
button.cardname { padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
button.cardname:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* deck pop-up: printings */
.sheetprints { margin: 4px 0 12px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sheetprints summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.sheetprints summary .small { font-weight: 400; display: block; margin-top: 2px; }
.sheetprints .printbox { margin-top: 8px; max-height: 320px; overflow-y: auto; }

/* deck pop-up: pick the art shown in decks */
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.artpick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; font: inherit; color: var(--ink);
  background: none; border: 2px solid transparent; border-radius: 8px; cursor: pointer; }
.artpick img { width: 100%; border-radius: 4px; display: block; }
.artpick:hover { background: var(--hover); }
.artpick.on { border-color: var(--accent); }
.artpick .small { font-size: 11px; white-space: nowrap; }
.artauto { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 745 / 1040; border-radius: 4px;
  font-size: 12px; font-weight: 600; text-align: center; background: var(--panel2); border: 1px dashed var(--line); }

/* deck version history (archetype.js openHistory) */
.histlist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.histlist li { padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.histlist li.cur { border-color: var(--accent); }
.histhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.histhead b { display: inline-flex; align-items: center; gap: 5px; }
.histhead b .ic { width: 16px; height: 16px; color: var(--accent); }
.histbtns { display: flex; gap: 6px; }
.histbtns .action { padding: 5px 10px; font-size: 13px; }
.histdiff { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.histdiff .plus { color: var(--good); }
.histdiff .minus { color: var(--bad); }
.histdiff i { font-style: normal; font-size: 11px; opacity: .75; }

/* ---------- calmer surfaces ----------
   Fewer hairlines: panels are separated by fill + soft shadow, not borders.
   Panels are slightly see-through and blur what's behind, so the falling
   cards read as soft colour instead of sharp shapes under the content. */
:root, [data-theme="dark"] {
  --line: color-mix(in srgb, var(--ink) 7%, transparent);
  --surface: color-mix(in srgb, #1d2547 82%, transparent);
  --field: color-mix(in srgb, var(--ink) 6%, transparent);
  --field-hover: color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow: 0 10px 30px -18px rgba(0,0,0,.7);
}
[data-theme="light"] {
  --surface: color-mix(in srgb, #ffffff 95%, transparent);
  --field: color-mix(in srgb, var(--ink) 7%, transparent);
  --field-hover: color-mix(in srgb, var(--ink) 11%, transparent);
  --shadow: 0 10px 30px -20px rgba(20,24,50,.35);
}
.banner, .toolbar, .summary, .tablewrap, .extsearch, .seg, .suggestbox, dialog.modal, .tile {
  border: 0 !important; background: var(--surface) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow);
}
.topnav { border-bottom: 0; }

/* the login hint: a quiet line with a yellow dot, not a framed box */
.banner { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 4px 2px; margin: 10px 0 4px; color: var(--muted); }
.banner b { color: var(--ink); }
.banner::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.banner > :first-child { flex: 1; }

/* summary + table read as one sheet: the stats are the table's header */
.summary { border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; padding: 20px 24px 14px; box-shadow: none; }
.summary ~ .tablewrap { margin-top: 0; border-radius: 0 0 var(--radius) var(--radius); }

/* fields, buttons, chips: filled, no outline (focus keeps its outline) */
.toolbar input[type="search"], .toolbar select, .action, .topnav button, .seg button,
.stepper button { border-color: transparent !important; }
.toolbar input[type="search"], .toolbar select { background-color: var(--field); }
.toolbar input:hover, .toolbar select:hover { background-color: var(--field-hover); }
.action { background: var(--field); }
.action:hover { background: var(--field-hover); }
.action.primary { background: var(--accent); color: var(--accent-ink); }
.topnav button { background: color-mix(in srgb, var(--nav-ink) 8%, transparent); }
.stepper button { background: var(--field); }
.stepper button:hover { background: var(--field-hover); }
.ddbtn, .ddreset { border-color: transparent !important; background-color: var(--field) !important; }
.ddbtn:hover { background-color: var(--field-hover) !important; }
.ddmenu { border-color: transparent !important; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); }
.tagchip { border-color: transparent !important; background: var(--field); }
.pill { border-color: transparent; background: var(--field); }

/* table: one rule under the header, none between rows */
table.plain th, table.plain td { border-bottom-color: transparent; }
table.plain thead th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
table.plain tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* deck tiles: no inner rules; lift slightly on hover */
.tstats, .tcomp { border-top-color: transparent !important; }
.tile { transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(0,0,0,.8); }
.infocard { border: 0; background: var(--surface); box-shadow: var(--shadow); }
.sitefoot { border-top: 0; }
.sitefoot p:last-child { font-size: 11.5px; opacity: .75; }

/* Status already shows owned / need, so Missing only stays on phones (card layout) */
@media (min-width: 701px) {
  #staples th:nth-child(8), #staples td:nth-child(8) { display: none; }
}

/* ---------- login / register ---------- */
.field {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; color: var(--ink);
  background: var(--field); border: 1px solid transparent; border-radius: var(--radius-sm);
}
.field:focus { outline: none; border-color: var(--accent); }
a.action.linkbtn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
a.action.linkbtn.primary:hover { filter: brightness(1.1); }
a.action.linkbtn.wide { width: 100%; justify-content: center; min-height: 44px; font-size: 15px; }
.ordivider { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; color: var(--muted); font-size: 12.5px; }
.ordivider::before, .ordivider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- small pieces that replace sentences ---------- */
.emptyslot {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; padding: 18px 20px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--radius);
  color: var(--muted); font-size: 14px;
}
.emptyslot b { color: var(--ink); font-weight: 600; }
.emptyslot[hidden] { display: none; }  /* only while "I play" is empty */
.emptyslot .ic { width: 22px; height: 22px; color: var(--accent); flex: none; }
.trendchip {
  display: inline-block; margin: 0 4px; padding: 1px 7px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
}
.trendchip.up { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.trendchip.new { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* headline with a small note on the right ("Updated 4 Nov from MTGTop8") */
.pagetop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.pagetop h1 { margin-bottom: 0; }
.pagetop .pagemeta { margin: 0; white-space: nowrap; }

/* "New brew" as a small tile on phones; the row-head button stays on bigger screens */
.brewslot { display: none; }
@media (max-width: 700px) {
  #mysec .kicker.rowhead #newbrew { display: none; }
  .brewslot {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 16px; padding: 14px 16px;
    font: inherit; font-size: 14px; text-align: left; color: var(--muted); cursor: pointer;
    background: transparent; border: 1.5px dashed color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: var(--radius);
  }
  .brewslot b { display: block; color: var(--ink); font-weight: 600; }
  .brewslot .ic { width: 22px; height: 22px; flex: none; color: var(--accent); }
  .emptyslot { margin-bottom: 8px; }
}

/* Your Staples toolbar: the full row (with the colour buttons) needs ~1100px;
   below that it would wrap, so it switches to search + Filters + Import / Export
   (filters open below) */
@media (min-width: 701px) and (max-width: 1240px) {
  .toolbar:has(#ftoggle) { display: grid; grid-template-columns: 1fr auto auto; }
  .toolbar:has(#ftoggle) #ftoggle { display: flex; }
  .toolbar:has(#ftoggle) .action { margin: 0; }
  .toolbar:has(#ftoggle) .filters { display: none; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .toolbar:has(#ftoggle) .filters.open { display: grid; }
  .toolbar:has(#ftoggle) .filters select, .toolbar:has(#ftoggle) .filters .sortsel,
  .toolbar:has(#ftoggle) .filters .sortsel select { width: 100%; }
  .toolbar:has(#ftoggle) .filters .colsel { grid-column: span 2; justify-content: space-between; }
}

/* ---------- welcome intro (initIntro) ----------
   one fixed height for every step (art, text, buttons pinned at the bottom), so
   moving between steps doesn't make the box jump. The art takes the room the
   text leaves: large on the first steps, smaller on the last (sign-in buttons). */
dialog.intromodal {
  width: min(520px, calc(100vw - 28px)); height: min(600px, calc(100dvh - 28px));
  padding: 0; overflow: hidden; flex-direction: column;
}
dialog.intromodal[open] { display: flex; }
.introx { position: absolute; top: 10px; right: 10px; z-index: 3; }
.introfan, .introcard, .introart {
  position: relative; flex: 1 1 auto; min-height: 180px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.introbody { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 18px 26px 8px; }
.introbody h2 { margin: 2px 0 8px; font-size: 25px; letter-spacing: -.02em; }
.introbody p { margin: 0 0 14px; color: var(--muted); }
.introfoot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 26px 20px; }
.introfoot .row { margin: 0; }
/* welcome: the top staples fan up */
.introfan img {
  position: absolute; left: 50%; bottom: -40px; width: 150px; border-radius: 7px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.7);
  transform: translateX(calc(-50% + var(--i) * 84px)) translateY(calc(var(--i) * var(--i) * 10px)) rotate(calc(var(--i) * 9deg));
  transform-origin: 50% 120%;
  animation: intropop .7s cubic-bezier(.2,.9,.3,1.3) backwards;
  animation-delay: calc((var(--i) + 2) * 90ms);
}
@keyframes intropop { from { opacity: 0; transform: translateX(-50%) translateY(120px) rotate(0deg) scale(.8); } }
/* step 1: one real card with what you own on it */
.introcard { display: flex; align-items: center; justify-content: center; }
.introcardwrap { position: relative; height: calc(100% - 28px); max-height: 330px; transform: rotate(-3deg); }
.introcard img { height: 100%; border-radius: 10px; box-shadow: 0 18px 38px -12px rgba(0,0,0,.75); }
.introbadge {
  position: absolute; right: 10px; bottom: 12px; padding: 4px 10px; border-radius: 99px;
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(12,15,32,.92);
  box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s, color .2s;
}
.introbadge[data-st="some"] { color: var(--warn); }
.introbadge[data-st="full"] { color: var(--good); box-shadow: 0 0 0 2px var(--good); }
.introbadge[data-st="none"] { color: var(--muted); }
/* steps 2 + 3: an example deck tile, with the part that matters lit up */
.introart { display: flex; align-items: center; justify-content: center; padding: 0 26px; }
.introtile {
  position: relative; width: min(400px, 100%); padding: 16px 18px; border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow); text-align: left;
}
.introtile .tilehead { display: flex; align-items: center; gap: 8px; }
.introtile h3 { margin: 0; font-size: 17px; flex: 1; }
.introthumbs { display: flex; gap: 6px; margin: 10px 0; }
.introthumbs img { width: calc((100% - 24px) / 5); border-radius: 4px; }
.introbuilt { padding: 8px 10px; margin: 0 -6px; border-radius: var(--radius-sm); box-shadow: 0 0 0 2px var(--accent); animation: introfocus 2s ease-in-out infinite; }
.introbuilt .pct { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-right: 6px; }
.introbuilt .bar { margin-top: 6px; }
.introstar .ic { width: 22px; height: 22px; color: var(--muted); }
.introstar.on { border-radius: 50%; padding: 3px; box-shadow: 0 0 0 2px var(--accent); animation: introfocus 2s ease-in-out infinite; }
.introstar.on .ic { color: var(--accent); }
.introedit {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px;
  background: var(--field); font-size: 14px; font-weight: 600; box-shadow: 0 0 0 2px var(--accent);
  animation: introfocus 2s ease-in-out infinite; animation-delay: 1s;
}
.introedit .ic { color: var(--accent); }
@keyframes introfocus { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .introfan img, .introbuilt, .introstar.on, .introedit { animation: none; } }
.introdemo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: var(--field); border-radius: var(--radius-sm);
}
.introcount { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.introcta { display: grid; gap: 8px; }
.introcta .action { margin: 0; }
.introdots { display: flex; gap: 6px; }
.introdots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.introdots span.on { width: 20px; border-radius: 99px; background: var(--accent); }
.sitefoot .linkish { color: inherit; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* login: one form for both modes */
.authmode { display: flex; width: 100%; margin: 4px 0 12px; }
.authmode button { flex: 1; }
.authform { display: grid; gap: 10px; }
.authform .row { margin: 4px 0 0; }

/* proxies: copies of a card your own list plays as stand-ins */
.proxymark { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: #9fb8ff; font-weight: 600; }
.proxymark .ic { width: 12px; height: 12px; }
.dlown[data-st="proxy"] { color: #9fb8ff; background: color-mix(in srgb, #9fb8ff 16%, transparent); }
[data-theme="light"] .proxymark, [data-theme="light"] .dlown[data-st="proxy"] { color: #3c5bb0; }
.pxcount { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* deck tiles carry a faint glow in their own mana colours (from the pips):
   --tc is the deck's last colour (top right), --tc2 its first (top left) */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(80% 55% at 0% 0%, var(--tc2, transparent), transparent 70%),
              radial-gradient(80% 55% at 100% 0%, var(--tc, transparent), transparent 70%);
}
.tile > :not([data-star]):not(.tshare):not(.tileart) { position: relative; z-index: 1; }
.tile > [data-star], .tile > .tshare { z-index: 2; }  /* both keep their place in the top-right corner */
.tile:has(.ms-c) { --tc: rgba(180,180,200,.08); } .tile:has(.ms-w) { --tc: rgba(250,236,190,.10); }
.tile:has(.ms-u) { --tc: rgba(60,140,240,.16); }  .tile:has(.ms-b) { --tc: rgba(160,100,210,.16); }
.tile:has(.ms-r) { --tc: rgba(240,90,55,.16); }   .tile:has(.ms-g) { --tc: rgba(60,180,100,.15); }
.tile:has(.ms-g) { --tc2: rgba(60,180,100,.15); } .tile:has(.ms-r) { --tc2: rgba(240,90,55,.16); }
.tile:has(.ms-b) { --tc2: rgba(160,100,210,.16); } .tile:has(.ms-u) { --tc2: rgba(60,140,240,.16); }
.tile:has(.ms-w) { --tc2: rgba(250,236,190,.10); } .tile:has(.ms-c) { --tc2: rgba(180,180,200,.08); }
[data-theme="light"] .tile::before { opacity: .8; }

/* Decks / Trends / Players tabs with icons */
.pagetabs button { display: inline-flex; align-items: center; gap: 7px; }
.pagetabs button .ic { width: 18px; height: 18px; opacity: .85; }

/* ---------- archetype tiles: name on top, the deck's top 3 cards as a fan on the
   right, its key card's artwork as a soft banner behind the top ---------- */
.tile { display: grid; grid-template-columns: minmax(0, 1fr) 124px; column-gap: 4px; align-content: start;
  grid-template-areas: "head head" "tags keys" "pips keys" "stats stats" "comp comp"; grid-template-rows: auto auto 1fr; }
.tile .tilehead { grid-area: head; } .tile .tagrow { grid-area: tags; } .tile .pips { grid-area: pips; align-self: start; }
.tile .tstats { grid-area: stats; margin-top: 4px; } .tile .tcomp { grid-area: comp; }
.tile .keys { grid-area: keys; position: relative; display: block; height: 92px; margin: 0 0 2px; }
.tile .keys img { position: absolute; top: 0; left: 50%; width: 64px; height: auto; border-radius: 5px;
  box-shadow: 0 10px 20px -6px rgba(0,0,0,.75); transform-origin: 50% 120%; transition: transform .2s; }
.tile .keys img:nth-child(n+4) { display: none; }
.tile .keys img:nth-child(1) { transform: translateX(-90%) rotate(-11deg); }
.tile .keys img:nth-child(2) { transform: translateX(-50%) translateY(-3px); z-index: 2; }
.tile .keys img:nth-child(3) { transform: translateX(-10%) rotate(11deg); }
.tile:hover .keys img:nth-child(1) { transform: translateX(-108%) rotate(-15deg); }
.tile:hover .keys img:nth-child(3) { transform: translateX(8%) rotate(15deg); }
.tile .tileart { position: absolute; inset: 0 0 auto 0; width: 100%; height: 140px; z-index: 0; object-fit: cover;
  object-position: center 25%; border-radius: inherit; opacity: .38; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
[data-theme="light"] .tile .tileart { opacity: .5; filter: saturate(1.15) brightness(1.35) contrast(.85); }
[data-theme="light"] .tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; z-index: 0;
  border-radius: inherit; pointer-events: none; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 80%); }
.tile .tilehead h3 { text-shadow: 0 2px 10px rgba(0,0,0,.55); }
[data-theme="light"] .tile .tilehead h3 { text-shadow: 0 1px 6px rgba(255,255,255,.95); }
.tile .tagrow .tagchip { background: color-mix(in srgb, var(--panel) 70%, transparent); }

/* ---------- the two main pages without a visible headline ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main:has(> h1.visually-hidden) { padding-top: 18px; }
.pagetabs { display: flex; align-items: center; margin-top: 2px; }
.pagetabs .tabmeta { margin-left: auto; padding-left: 12px; white-space: nowrap; }
.pagetabs .tabmeta a { color: inherit; }

/* ---------- header: Sign in, with the browser-only note as a bubble (desktop) ---------- */
#authslot { position: relative; }
#authslot a.signinbtn { padding: 6px 16px; border-radius: 99px; background: var(--accent); color: var(--accent-ink);
  opacity: 1; font-weight: 600; text-decoration: none; }
#authslot a.signinbtn:hover { filter: brightness(1.08); }
.authtip { position: absolute; top: calc(100% + 14px); right: -6px; width: 260px; padding: 12px 34px 12px 14px;
  border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 13px; line-height: 1.45;
  white-space: normal; z-index: 60; box-shadow: 0 18px 40px -12px rgba(0,0,0,.75); }
.authtip::before { content: ""; position: absolute; top: -6px; right: 30px; width: 12px; height: 12px;
  background: var(--panel); transform: rotate(45deg); }
.authtip b { display: block; margin-bottom: 2px; }
.authtip .tipx { position: absolute; top: 6px; right: 6px; padding: 2px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.authtip .tipx .ic { width: 16px; height: 16px; }
@media (min-width: 701px) { #authbanner { display: none !important; } }
@media (max-width: 700px) {
  .authtip { display: none; }
  #navlinks #authslot a.signinbtn { align-self: flex-start; margin-top: 14px; padding: 10px 18px; }
  .pagetabs .tabmeta { display: none; }
}

/* ---------- Trends: decks on the move ---------- */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 28px; }
.movers h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.moverlist { list-style: none; margin: 0; padding: 0; }
.moverlist li a { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr auto auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; }
.moverlist li a:hover { background: var(--field); }
.mvname { display: flex; align-items: center; gap: 2px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvname b { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mvbar { height: 6px; border-radius: 99px; background: var(--field); overflow: hidden; }
.mvbar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); opacity: .7; }
.mvshare { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.trendchip.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
@media (max-width: 700px) { .movers { grid-template-columns: 1fr; } .moverlist li a { grid-template-columns: minmax(0, 1fr) auto auto; } .mvbar { display: none; } }

/* ---------- Players: trophies for the first three ---------- */
.trophy { margin-right: 6px; vertical-align: -3px; }
.trophy .ic { width: 18px; height: 18px; }
.trophy.t1 { color: #f2c94c; } .trophy.t2 { color: #c7cfdc; } .trophy.t3 { color: #d08a4f; }

/* ---------- header: ⋮ menu (all sizes), phone page switch ---------- */
.morebtn { flex: none; width: 38px; height: 38px; padding: 0; margin-left: 8px; border-radius: 50%; border: 0 !important;
  display: inline-flex; align-items: center; justify-content: center; opacity: 1;
  background: color-mix(in srgb, var(--nav-ink) 9%, transparent) !important; color: var(--nav-ink); }
.morebtn .ic { width: 22px; height: 22px; }
.navmenu { position: absolute; top: calc(100% + 6px); right: 16px; z-index: 70; width: 240px; padding: 6px;
  border-radius: 14px; background: var(--panel); box-shadow: 0 20px 44px -12px rgba(0,0,0,.8); }
.navmenu .menuitem { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; border: 0 !important;
  border-radius: 10px; background: none !important; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left;
  text-decoration: none; cursor: pointer; opacity: 1; }
.navmenu .menuitem:hover { background: var(--field) !important; }
.navmenu .menuitem .ic { width: 20px; height: 20px; color: var(--muted); }
.navmenu .lbl { display: inline !important; }
.navmenu #rainbtn[aria-pressed="false"] .ic { opacity: .45; }
.navmenu .menuitem.primary { justify-content: center; background: var(--accent) !important; color: var(--accent-ink); font-weight: 700; }
.navmenu .menunote { margin: 0; padding: 4px 12px 10px; font-size: 12.5px; color: var(--muted); }
#menulogout:not(:empty) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
#authslot a.userlink { display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.mtabs { display: none; }
#authbanner { display: none !important; }  /* its note lives in the Sign in bubble / ⋮ menu now */
@media (min-width: 701px) { #menuauth .primary, #menuauth .menunote { display: none; } }
@media (max-width: 700px) {
  .topnav { gap: 8px; padding: 0 12px; }
  .brandlink { --logo-h: 32px; }
  #navlinks, #navlinks.open { display: none !important; }
  .mtabs { display: flex; margin: 0 auto; padding: 3px; border-radius: 99px; background: color-mix(in srgb, var(--nav-ink) 9%, transparent); }
  .mtabs a { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 14px; font-weight: 500;
    color: var(--nav-ink); text-decoration: none; opacity: .75; }
  .mtabs a img { height: 18px; }
  .mtabs a.on { background: var(--brand-yellow); color: #1a1500; opacity: 1; font-weight: 700; }
  .morebtn { margin-left: 0; }
  .navmenu { right: 10px; }
}

/* ---------- Trends: Popular or winning? ---------- */
.pwbox { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 10px; margin: 6px 0 28px; }
.pwbox h2 { margin: 0 0 2px; }
.pwchart { display: block; width: 100%; height: auto; }
.pwq.hot { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
.pwq.gem { fill: color-mix(in srgb, #3fb46a 6%, transparent); }
.pwg { stroke: var(--line); }
.pwavg { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-dasharray: 5 5; }
.pwt { fill: var(--muted); font-size: 12px; }
.pwl { fill: color-mix(in srgb, var(--accent) 80%, var(--muted)); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.pwi { fill: #fff; font-weight: 800; font-family: var(--font-display); paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; pointer-events: none; }
.pwring { fill: none; stroke: var(--bg); stroke-width: 2; }
.pwb:hover .pwring { stroke: var(--accent); stroke-width: 3; }
@media (max-width: 700px) { .pwbox { padding: 14px 10px 6px; } .pwl { font-size: 18px; } .pwt { font-size: 17px; } }
.topnav:has(#navmenu:not([hidden])) .authtip { display: none; }  /* menu open: no bubble on top of it */

/* light mode: buttons and filter controls in a pale brand blue (grey read as disabled);
   the search field stays neutral */
[data-theme="light"] { --btn: color-mix(in srgb, #2b5fd9 10%, #ffffff); --btn-hover: color-mix(in srgb, #2b5fd9 17%, #ffffff); --btn-ink: #1f3f8f; }
[data-theme="light"] .action:not(.primary), [data-theme="light"] .ddbtn, [data-theme="light"] .ddreset,
[data-theme="light"] .stepper button, [data-theme="light"] .toolbar select,
[data-theme="light"] .seg button:not([aria-pressed="true"]) { background-color: var(--btn) !important; color: var(--btn-ink); }
[data-theme="light"] .action:not(.primary):hover, [data-theme="light"] .ddbtn:hover,
[data-theme="light"] .stepper button:hover, [data-theme="light"] .toolbar select:hover { background-color: var(--btn-hover) !important; }

/* Your Staples: click a column header to sort, again to flip */
#staples th[data-sortkey] { cursor: pointer; user-select: none; }
#staples th[aria-sort] { color: var(--ink); }
#staples th[aria-sort]::after { content: "▼"; margin-left: 4px; font-size: 9px; color: var(--accent); }
#staples th[aria-sort="ascending"]::after { content: "▲"; }

/* ---------- deck editor: proxies column ---------- */
.pxstep .pxcount { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.pxstep button { width: 24px; height: 24px; font-size: 14px; }
@media (max-width: 700px) {
  .decktbl.editview tbody tr[data-card] { grid-template-areas: "thumb card card status" "thumb share mode own" "thumb px px px"; }
  .decktbl.editview td:nth-child(4) { display: flex; align-items: center; gap: 8px; grid-area: px; }
  .decktbl.editview td:nth-child(4)::before { content: "Proxies · of " attr(data-of); font-size: 11.5px; color: var(--muted); }
  .decktbl.editview .pxof { display: none; }
}

/* ---------- Your Staples: summary ring ---------- */
.summary.ringsum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 30px; align-items: center; padding: 22px 26px; }
.ringsum .ring { position: relative; width: 132px; height: 132px; }
.ringsum .ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ringsum .ringbg { fill: none; stroke: var(--field); stroke-width: 12; }
.ringsum .ringfg { fill: none; stroke: url(#ringgrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 400;
  transition: stroke-dasharray .6s cubic-bezier(.2,.8,.2,1); }
.ringsum .ringtxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ringsum .ringtxt b { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ringsum .ringtxt span { font-size: 12px; color: var(--muted); }
.ringsum h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.ringsum .sub { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.ringsum .sub b { color: var(--ink); }
.ringsum .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ringsum .chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--field); font-size: 13px; color: var(--muted); }
.ringsum .chip b { color: var(--ink); font-size: 15px; }
.ringsum .next { text-align: center; }
.ringsum .next[hidden] { display: none; }
.ringsum .next .k { margin-bottom: 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ringsum .nextfan { position: relative; width: 196px; height: 122px; }
.ringsum .nextfan img { position: absolute; left: 50%; top: 0; width: 80px; border-radius: 5px; box-shadow: 0 10px 22px -8px rgba(0,0,0,.75); transform-origin: 50% 120%; }
.ringsum .nextfan img:nth-child(1) { transform: translateX(-100%) rotate(-12deg); }
.ringsum .nextfan img:nth-child(2) { transform: translateX(-50%) translateY(-4px); z-index: 2; }
.ringsum .nextfan img:nth-child(3) { transform: translateX(0%) rotate(12deg); }
.ringsum .nextname { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .ringsum .next { display: none; } .summary.ringsum { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 700px) {
  .summary.ringsum { gap: 14px 16px; padding: 16px; }
  .ringsum .ring { width: 104px; height: 104px; }
  .ringsum .ringtxt b { font-size: 24px; } .ringsum .ringtxt span { font-size: 10.5px; }
  .ringsum h2 { font-size: 19px; }
  /* ring with the sentence beside it, the chips across the full width below */
  .summary.ringsum { grid-template-areas: "ring line" "ring sub" "chips chips"; }
  .ringsum .ring { grid-area: ring; } .ringsum .ringmain { display: contents; }
  .ringsum h2 { grid-area: line; align-self: end; margin: 0; } .ringsum .sub { grid-area: sub; align-self: start; margin: 0; }
  .ringsum .chips { grid-area: chips; }
}

/* ---------- Trends: data note, time window, chart hover card ---------- */
.trendbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin: 4px 0 14px; }
.trendnote { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.trendnote .ic { width: 18px; height: 18px; flex: none; }
.trendwin a { display: inline-block; padding: 5px 12px; border-radius: 99px; color: inherit; text-decoration: none; font-size: 13px; }
.trendwin a[aria-current] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pwbox { position: relative; }
.pwtip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none;
  display: grid; gap: 2px; min-width: 190px; padding: 10px 12px; border-radius: 10px; background: var(--panel);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.7); font-size: 13px; color: var(--muted); }
.pwtip b { color: var(--ink); font-size: 14px; }

/* dark mode: one large, slow violet-blue glow behind the page, so it isn't flat
   when the falling cards are off (light mode stays plain) */
[data-theme="dark"] body::before {
  content: ""; position: fixed; z-index: -2; pointer-events: none;
  left: 50%; top: -38vmax; width: 110vmax; height: 110vmax; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(92, 78, 220, .30), rgba(58, 72, 196, .14) 55%, transparent);
  animation: glowdrift 40s ease-in-out infinite alternate;
}
@keyframes glowdrift { to { transform: translateX(-46%) translateY(4vmax) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { [data-theme="dark"] body::before { animation: none; } }

/* ---------- phone: Staples summary and card rows; chart hover card ---------- */
.pwtip[hidden] { display: none; }  /* display: grid above would otherwise keep the empty card on screen */
@media (max-width: 700px) {
  .summary.ringsum { margin-bottom: 18px; }
  .ringsum h2 { font-size: 18px; text-wrap: balance; }
  .ringsum .sub { text-wrap: pretty; }
  /* the two numbers and an icon-only share button on one line */
  .ringsum .chips { flex-wrap: nowrap; gap: 6px; }
  .ringsum .chip { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
  .ringsum .chip b { font-size: 14px; }
  .ringsum #sharebtn { flex: none; margin-left: auto; width: 40px; height: 34px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .ringsum #sharebtn .ic, .ringsum #sharebtn svg { width: 18px; height: 18px; margin: 0; }
  /* "Missing" repeats Need and the status pill: drop it, give the counter the whole row */
  #staples tbody tr { grid-template-areas: "thumb card card card status" "thumb share arch need price" "own own own own own"; }
  #staples td:nth-child(8) { display: none; }
  #staples td:nth-child(6) .stepper { display: flex; width: 100%; justify-content: space-between; }
  #staples td:nth-child(6) .stepper button { width: 52px; height: 44px; font-size: 22px; }
  #staples td:nth-child(6) .stepper input { flex: 1; min-width: 0; font-size: 22px; border-bottom: 0; }
}

/* ---------- deck editor: floating Edit button and editing dock ---------- */
.stepper, .stepper button, .editdock, .editfab { -webkit-user-select: none; user-select: none; }
.stepper button, .editdock button, .editfab { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.editfab {
  position: fixed; z-index: 40; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
}
.editfab .ic { width: 22px; height: 22px; }
.editfab:active { transform: scale(.96); }
.editdock {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.65);
}
.editdock .dockcount { display: flex; flex-wrap: wrap; gap: 0 12px; margin-right: auto; font-size: 13.5px; color: var(--muted); }
.editdock .dockcount b { color: var(--warn); font-size: 16px; font-variant-numeric: tabular-nums; }
.editdock .dockcount.ok b { color: var(--good); }
.editdock .action { min-height: 44px; padding: 0 16px; white-space: nowrap; }
body.editing #archcontent { padding-bottom: 96px; }
.addsheet .addrow { display: grid; gap: 10px; }
.addsheet #addcard { width: 100%; font-size: 16px; padding: 12px 14px; }
.addsheet .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.addsheet .row .action { min-height: 44px; }
.addsheet .pastedet { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.addsheet .pastedet summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.addsheet .pastedet textarea { width: 100%; margin: 12px 0 10px; font-size: 15px; }
.sumbuy .action { white-space: nowrap; }
@media (max-width: 700px) {
  .editfab { height: 56px; width: 56px; padding: 0; justify-content: center; }
  .editfab span { display: none; }
  .editdock .dockcount { flex-direction: column; font-size: 12.5px; }
  .editdock .dockcount b { font-size: 15px; }
  /* edit rows: proxies on the left, the copy count on the right, both easy to hit */
  .decktbl.editview tbody tr[data-card] {
    grid-template-areas: "thumb card card status" "thumb share mode mode" "px px own own";
    row-gap: 10px;
  }
  .decktbl.editview td:nth-child(4) { justify-self: start; }
  .decktbl.editview td:nth-child(6) { justify-self: end; }
  .decktbl.editview .stepper button { width: 46px; height: 46px; font-size: 22px; }
  .decktbl.editview .stepper input { width: 46px; font-size: 18px; }
  .decktbl.editview .pxstep button { width: 40px; height: 40px; font-size: 18px; }
  .decktbl.editview .pxstep .pxcount { min-width: 32px; font-size: 16px; }
  .decktbl.editview td:nth-child(7) .action { width: 40px; height: 40px; }
  .sumbuy > div { align-items: flex-start; }
  .sumbuy b { font-size: 15px; }
  dialog.addsheet { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* a button that is waiting (e.g. reset link sent, countdown running) */
.action:disabled { opacity: .65; cursor: default; }

/* phone: no box behind boxes. The staple cards and the search / filter buttons sit
   straight on the page instead of inside another panel. */
@media (max-width: 700px) {
  #stapleswrap.tablewrap { background: none; box-shadow: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .toolbar { background: none; box-shadow: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* deck editor: "of 4" next to the proxy counter (proxies are some of your copies, not extra) */
.pxcell .pxof { margin-left: 6px; color: var(--muted); white-space: nowrap; }
@media (max-width: 700px) { .decktbl.editview td:nth-child(4)::before { white-space: nowrap; } }
@media (max-width: 700px) {
  /* "Proxies · of 4" above its counter, so the two counters have the row to themselves */
  .decktbl.editview td:nth-child(4) { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Staples summary: no panel colour behind the ring and the numbers, it sits on the page */
  .summary.ringsum { background: none; border: 0; box-shadow: none; padding: 6px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 700px) {
  /* edit rows: both counters labelled. Left: copies in my deck. Right: how many of those are proxies. */
  .decktbl.editview tbody tr[data-card] { grid-template-areas: "thumb card card status" "thumb share mode mode" "own own px px"; }
  .decktbl.editview td:nth-child(6) { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .decktbl.editview td:nth-child(6)::before { content: "In my deck"; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
  .decktbl.editview td:nth-child(4) { justify-self: end; align-items: flex-end; }
  .decktbl.editview td:nth-child(4)::before { content: "Proxies (of " attr(data-of) ")"; }
}
@media (max-width: 700px) {
  /* the surface rule above uses !important, so the phone "no box" needs it too */
  .summary.ringsum, #stapleswrap.tablewrap, .toolbar {
    background: none !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .summary.ringsum { padding: 8px 2px 0; }
}
@media (max-width: 700px) {
  /* phone cards without the hairline outline: the panel colour alone marks them */
  #staples tbody tr, .decktbl tbody tr[data-card], .metatbl tbody tr, .playertbl tbody tr { border: 0; }
}

/* deck editor: the card picture opens the art picker; a small pencil says so */
.artbtn { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.artbtn .artedit { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 99px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 10px -2px rgba(0,0,0,.5); }
.artbtn .artedit .ic { width: 14px; height: 14px; }
.artbtn:hover img.thumb, .artbtn:focus-visible img.thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* close buttons: the X centred in its circle (the icon used to sit low and to the side) */
.modalhead .x, .catchx { display: inline-grid; place-items: center; padding: 0; flex: none; }
.modalhead .x .ic, .catchx .ic { width: 22px; height: 22px; vertical-align: 0; margin: 0; }
/* share dialog: the "Text" format */
.sharetext textarea { width: 100%; margin: 0 0 12px; font: 14px/1.5 var(--font-mono, ui-monospace, Menlo, monospace); resize: vertical; }
.sharemodal [data-textrow][hidden], .sharemodal [data-imgrow][hidden], .sharemodal .sharecanvas[hidden], .sharetext[hidden] { display: none; }
/* deck page on phones: no stat chips (days, decks, meta, wins, top-8s) under the title */
#archcontent .statchips { display: none; }  /* deck page: no stat chips under the title, on any screen */

/* overscroll (rubber-band at the top on Mac / Firefox): show the header navy, not the page colour.
   The outer page takes the header colour; body keeps the page colour and becomes its own layer,
   so the background glow and the falling cards (negative z-index) still paint on top of it. */
html { background: var(--nav); }
body { min-height: 100vh; isolation: isolate; }

/* card pop-up (Staples): more room, and a compact "My printings" list */
dialog.cardmodal { width: min(900px, calc(100vw - 28px)); }
.cardmodal ul.prints li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; }
.cardmodal ul.prints .pimg { width: 26px; height: 36px; }
.cardmodal ul.prints .plabel b { font-size: 13.5px; }
.cardmodal ul.prints .stepper button { width: 26px; height: 26px; }
.cardmodal ul.usage .proxymark { white-space: nowrap; }

/* performance: blur effects were recomputed every frame over the drifting background glow,
   which kept the GPU busy (Firefox on Mac especially). The glow now stays still and the panels
   and pop-ups use their (already 82-100% opaque) colour without blurring what is behind. */
[data-theme="dark"] body::before { animation: none; }
.banner, .toolbar, .summary, .tablewrap, .extsearch, .seg, .suggestbox, dialog.modal, .tile {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
dialog.modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 10, 22, .72); }

/* ---------- print proxies: only the sheet prints, 3 x 3 real-size cards per A4 page ---------- */
#printsheet { display: none; }
#printdlg .seg { margin: 0 0 12px; }
#printdlg .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
#printdlg .seg button[disabled] { opacity: .45; }
@media print {
  @page { size: A4; margin: 8mm; }
  html, body { background: #fff !important; }
  body::before, #cardrain { display: none !important; }
  body > *:not(#printsheet) { display: none !important; }
  #printsheet { display: block; }
  #printsheet .pxpage { display: grid; grid-template-columns: repeat(3, 63mm); grid-auto-rows: 88mm; gap: .4mm;
    justify-content: center; break-after: page; }
  #printsheet .pxpage:last-child { break-after: auto; }
  #printsheet img, #printsheet .pxblank { width: 63mm; height: 88mm; display: block; object-fit: cover; border-radius: 0; }
  #printsheet .pxblank { box-sizing: border-box; border: .3mm solid #000; padding: 4mm; font: 12pt sans-serif; color: #000; }
  #printsheet.bw img { filter: grayscale(1); }
}

/* deck page: Compare (your list vs. the average or a top deck) */
.cmphead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 14px; }
.cmphead select { max-width: 100%; min-width: 0; flex: 1 1 320px; font-size: 15px; padding: 8px 10px; }
.cmptbl td:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.cmptbl .delta { font-weight: 700; }
.cmptbl tr.plus .delta { color: var(--good); }
.cmptbl tr.minus .delta { color: var(--warn); }
@media (max-width: 700px) {
  .cmptbl { min-width: 0 !important; }
  .tablewrap:has(> .cmptbl) { overflow: visible; }
}
@media (max-width: 700px) {
  /* deck summary: "79 cards to get · incl. sideboard" on one line, Buy list and Print proxies side by side below */
  .sumbuy { flex-wrap: wrap; gap: 10px; }
  .sumbuy > div { flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .sumbuy > .action { flex: 1 1 0; justify-content: center; }
}

/* pop-ups are fully opaque (the shared surface colour is 82% see-through) */
dialog.modal { background: var(--panel) !important; }

/* a top player (Players tab top 10) next to a result */
.topchip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.topchip .ic { width: 13px; height: 13px; }

/* print proxies: cards centred on the page (clear of the browser header line), ink-saving modes */
#printdlg .pxmodes { flex-wrap: wrap; }
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  #printsheet .pxpage { height: 272mm; align-content: center; }
  #printsheet.ink img { filter: grayscale(1) contrast(.42) brightness(1.65); }
  #printsheet.inv img { filter: grayscale(1) invert(1) contrast(.6) brightness(1.25); }
}

/* print proxies: text-only playtest cards (name, cost, type, rules text) in a colour frame */
.pxtext { --pc: #9a9fa8; width: 63mm; height: 88mm; box-sizing: border-box; display: flex; flex-direction: column;
  border: 1.6mm solid var(--pc); border-radius: 3mm; padding: 2.2mm 2.6mm; background: #fff; color: #111;
  font: 8pt/1.3 "IBM Plex Sans", Arial, sans-serif; overflow: hidden; }
.pxtext.c-W { --pc: #d9c98f; } .pxtext.c-U { --pc: #3b7fc4; } .pxtext.c-B { --pc: #4a4250; }
.pxtext.c-R { --pc: #d1483a; } .pxtext.c-G { --pc: #3e8a4f; } .pxtext.c-M { --pc: #c9a34a; }
.pxtext .pxt-head { display: flex; justify-content: space-between; gap: 2mm; align-items: baseline; margin: -.6mm -.8mm 0;
  padding: 1mm 1.4mm; border-radius: 1.2mm; background: color-mix(in srgb, var(--pc) 22%, #fff); }
.pxtext .pxt-head b { font: 700 9.5pt/1.15 "Bricolage Grotesque", Arial, sans-serif; }
.pxtext .pxt-cost { white-space: nowrap; font-weight: 600; letter-spacing: .02em; }
.pxtext .pxt-type { margin: 1.4mm 0 1.6mm; padding-bottom: 1.2mm; border-bottom: .3mm solid var(--pc); font-weight: 600; font-size: 7.5pt; }
.pxtext .pxt-body { flex: 1; overflow: hidden; }
.pxtext .pxt-body.mid { font-size: 7pt; } .pxtext .pxt-body.long { font-size: 6.2pt; }
.pxtext .pxt-pt { align-self: flex-end; margin-top: 1mm; padding: .4mm 2mm; border: .3mm solid var(--pc); border-radius: 1mm; font-weight: 700; }
.pxtext hr { border: 0; border-top: .3mm dashed var(--pc); margin: 1.4mm 0; }
.pxtext.twoface .pxt-body { flex: 0 1 auto; }
#printsheet.bw .pxtext { --pc: #111; border-width: .5mm; }
#printsheet.bw .pxtext .pxt-head { background: none; border-bottom: 0; }
@media print { #printsheet.playtest .pxtext { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* ink saver: faded greyscale (not inverted) */
@media print { #printsheet.ink img { filter: grayscale(1) contrast(.45) brightness(1.6); } }

/* admin: pick a deck's colours */
.colorpick { display: inline-flex; gap: 6px; align-items: center; }
.colorpick label { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 99px; background: var(--field); cursor: pointer; }
.colorpick label:has(input:checked) { box-shadow: 0 0 0 2px var(--accent); }
.colorpick .ms { font-size: 18px; }

/* What's new */
.clog { margin: 0 0 34px; }
.clog h2 { margin: 2px 0 10px; }
.clog h3 { margin: 16px 0 6px; font-size: 15px; color: var(--muted); }
.cloglist { margin: 0; padding-left: 20px; }
.cloglist li { margin: 0 0 6px; line-height: 1.5; }
.navmenu a.menuitem { text-decoration: none; }

/* What's new: the feedback box */
.feedbackbox { margin: 0 0 34px; padding: 18px 20px; border-radius: var(--radius); background: var(--panel); }
.feedbackbox h2 { margin: 0 0 4px; }
.feedbackbox textarea { width: 100%; box-sizing: border-box; margin: 8px 0 10px; font: inherit; font-size: 15px; }
.feedbackbox .row { display: flex; flex-wrap: wrap; gap: 10px; }
.feedbackbox .row input { flex: 1 1 260px; min-width: 0; font-size: 15px; }
#fblist .fbtext { white-space: pre-wrap; }
.feedbackbox textarea, .feedbackbox input { padding: 10px 12px; color: var(--ink); background: var(--field);
  border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: 15px; }
.feedbackbox textarea:focus, .feedbackbox input:focus { outline: none; border-color: var(--accent); }

/* Meta: one filter bar for Decks and Trends. Trends: time window, event size, paper/online only. Players: none. */
body[data-ptab="trends"] #metabar .sortsel, body[data-ptab="trends"] #metabar #ddtags,
body[data-ptab="trends"] #metabar #sharemeta { display: none; }
body[data-ptab="players"] #metabar, body[data-ptab="players"] #filtnote { display: none !important; }
.pwbg { transition: transform .35s ease; }

/* welcome tour: a binder page of the top staples (cards slide in, badges count up) */
.introbinder {
  position: relative; flex: 1 1 auto; min-height: 200px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}
.ibpage {
  position: absolute; left: 50%; top: 22px; width: min(330px, calc(100% - 40px)); box-sizing: border-box;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 16px;
  background: #1d2547; box-shadow: 0 22px 44px -16px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.07);
  transform: translateX(-50%) rotate(4deg);
}
.ibslot { position: relative; aspect-ratio: 488 / 680; border-radius: 6px; background: rgba(255,255,255,.06); }
.ibslot img { width: 100%; height: 100%; display: block; border-radius: 6px; object-fit: cover;
  animation: ibin .5s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay: calc(var(--k) * 80ms + 150ms); transition: opacity .3s; }
.ibslot.empty img { opacity: .4; }
@keyframes ibin { from { opacity: 0; transform: translateY(-18px) scale(1.08); } }
.ibbadge {
  position: absolute; right: 4px; bottom: 5px; padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #c9cde3; background: #2d3763; box-shadow: 0 3px 8px -2px rgba(0,0,0,.6);
  transition: background .25s, color .25s;
}
.ibbadge[data-st="some"] { background: #f0d24a; color: #1a1500; }
.ibbadge[data-st="full"] { background: #3fb46a; color: #06210f; }
@media (prefers-reduced-motion: reduce) { .ibslot img { animation: none; } }

/* memory: let the browser skip drawing what is off screen. Each Meta tile has a masked
   background picture (its own layer); with this only the tiles in view keep one.
   The reserved heights keep the scrollbar steady. */
.grid > .tile { content-visibility: auto; contain-intrinsic-size: auto 228px; }
.deckgrid .dggroup { content-visibility: auto; contain-intrinsic-size: auto 200px; }
.clog { content-visibility: auto; contain-intrinsic-size: auto 600px; }
@media (max-width: 700px) {
  #staples tbody tr { content-visibility: auto; contain-intrinsic-size: auto 180px; }
}

/* Paper | MTGO: the switch on Your Staples, the other collection's count, a deck's tag */
.toolbar .collseg { flex: none; }
.collseg button[aria-pressed="true"], .wheresel button[aria-pressed="true"], .impkind button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.othercount { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.othercount:empty { display: none; }
.wherebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 14px; }
.impkind { margin: 4px 0 8px; }
.ismtgo .decktbl.editview td:nth-child(4) { visibility: hidden; }
.sitefoot .credit { margin: 6px 0; }
@media (max-width: 700px) {
  .toolbar .collseg { grid-column: 1 / -1; display: flex; }
  .toolbar .collseg button { flex: 1; }
  #staples td:nth-child(6) .othercount { text-align: center; }
}

/* ⋮ menu: Paper | MTGO */
.menucoll { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: default; }
.menucoll .seg button { padding: 4px 10px; font-size: 13px; }
/* Meta: just one event */
.dd .evpick { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; margin: 6px 0; min-width: 300px; }
.dd #evsearch { width: 100%; box-sizing: border-box; margin: 4px 0; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--field); color: var(--ink); font: inherit; font-size: 14px; }
.evopt { display: grid; gap: 1px; text-align: left; padding: 7px 10px; border-radius: var(--radius-sm); }
.evopt b { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.evopt.on { box-shadow: inset 0 0 0 2px var(--accent); }
.evstand { margin: 4px 0 22px; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); }
.evstand[hidden] { display: none; }
.evhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.evhead h2 { margin: 2px 0 2px; font-size: 20px; }
.evlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 18px; }
.evlist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.evlist .evplace { grid-row: 1 / 3; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--accent); }
.evlist li > b, .evlist li > a:not(.small) { grid-column: 2; }
.evlist li > a:not(.small) { text-decoration: none; }
.evlist li > .small:not(a) { grid-column: 2; color: var(--muted); }
.evlist li > a.small { grid-column: 3; grid-row: 1; }

/* welcome tour: the Paper / MTGO demo */
.introcoll { display: flex; align-items: center; gap: 22px; padding: 0 26px; }
.introcoll img { width: 150px; border-radius: 8px; box-shadow: 0 16px 34px -12px rgba(0,0,0,.7); transform: rotate(-3deg); }
.introseg span { padding: 5px 11px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .3s, color .3s; }
.introseg span.on { background: var(--accent); color: var(--accent-ink); }
.introcc { margin: 14px 0 2px; }
.introcc b { font-family: var(--font-display); font-size: 34px; font-weight: 800; margin-right: 4px; }
.introcp { margin: 0; }
@media (max-width: 420px) { .introcoll { gap: 14px; padding: 0 16px; } .introcoll img { width: 110px; } }

/* ---------- admin: archetype editor (form on the left, the tile as it will look on the right) ---------- */
.aeditor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin: 14px 0 28px; }
.aeform { display: flex; flex-direction: column; gap: 16px; }
.aefield { display: flex; flex-direction: column; gap: 6px; }
.aelbl { display: flex; align-items: baseline; gap: 6px; font-weight: 600; font-size: 14px; }
.aefield input:not([type=checkbox]), .aekeys input {
  font: inherit; font-size: 14px; height: 38px; padding: 0 12px; min-width: 0; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.aekeys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aeslot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aefield > .aeslot { max-width: 420px; }
.aeartbtn { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--accent); font: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer; }
.aeartbtn:hover { text-decoration: underline; }
.aeartbtn.on::after { content: " · chosen"; color: var(--muted); font-weight: 400; }
dialog.aeartdlg { width: min(720px, calc(100vw - 28px)); }
dialog.aeartdlg .artgrid { max-height: min(62dvh, 560px); }
dialog.aeartdlg .artgrid.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
dialog.aeartdlg .artgrid.wide .artauto { aspect-ratio: 626 / 457; }
.aeauto { margin-left: auto; padding: 0; border: 0; background: none; color: var(--accent); font: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer; }
.aeauto:hover { text-decoration: underline; }
.aetags { display: flex; flex-wrap: wrap; gap: 6px; }
.aetag { border: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 13px; padding: 4px 10px;
  border-radius: 99px; background: transparent; color: var(--muted); }
.aetag[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.aetagadd { display: flex; gap: 8px; max-width: 360px; }
.aetagadd input { flex: 1; }
.aebtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.aeprev { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 6px; }
.aeprev .grid { grid-template-columns: 1fr; margin: 0; }
.aeprev .grid > .tile { content-visibility: visible; }
@media (max-width: 760px) {
  .aeditor { grid-template-columns: 1fr; }
  .aeprev { position: static; order: -1; }
}

/* card sheet opened from a picture in the deck editor: just the name and the artwork picker */
dialog.cardsheet.artonly { width: min(560px, calc(100vw - 28px)); }
dialog.cardsheet.artonly .sheetimg, dialog.cardsheet.artonly .sheetinfo > :not(h2, .sheetprints) { display: none; }
dialog.cardsheet.artonly[open] { align-items: stretch; }
dialog.cardsheet.artonly .sheetprints { margin: 10px 0 0; padding: 0; background: none; border: 0; }
dialog.cardsheet.artonly .sheetprints summary { pointer-events: none; list-style: none; }
dialog.cardsheet.artonly .sheetprints summary::-webkit-details-marker { display: none; }
dialog.cardsheet.artonly .artgrid { max-height: min(60dvh, 520px); }

/* "How it's counted" (Decks and Trends tabs, sitegen how_counted) */
.howcount { margin: 4px 0 22px; padding: 10px 14px; background: var(--surface); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
.howcount summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.howcount ul { margin: 10px 0 2px; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.howcount b { color: var(--ink); font-weight: 600; }

/* "Also played" under the average list (archetype.js alsoPlayed) */
.alsoplayed { margin: 26px 0 6px; }
.alsoplayed h2 { margin: 0 0 2px; }
.alsogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.alsogrid h3 { font-size: 13px; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.alsogrid ul.tight { list-style: none; padding: 0; }
.alsogrid ul.tight li { display: flex; align-items: center; gap: 10px; }
@media (max-width: 700px) { .alsogrid { grid-template-columns: 1fr; } }

/* event size and big wins (archetype.js evChip, Recent results, stat chips) */
.evchip { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); vertical-align: 1px; }
.winchip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink, #141a35); white-space: nowrap; }
.winchip .ic { width: 13px; height: 13px; }
ul.results li { margin: 5px 0; }
ul.results li.bigwinrow { font-weight: 600; }
.winstat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 99px; text-decoration: none;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.winstat .ic { width: 14px; height: 14px; }
.winstat span { opacity: .75; font-weight: 500; }

/* ---------- Your Staples: colour buttons, List / Cards + sort bar, Cards view ---------- */
.colsel { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 99px; }
.colsel button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: .38; filter: grayscale(.6); transition: opacity .12s; }
.colsel button:hover { opacity: .75; }
.colsel button[aria-pressed="true"] { opacity: 1; filter: none; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.colsel .ms { font-size: 16px; }
.colonly { font-size: 13.5px; white-space: nowrap; }
#fsearch { flex-basis: 140px; }
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.viewbar .seg button { padding: 5px 13px; white-space: nowrap; }
.sortseg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sortseg::-webkit-scrollbar { display: none; }
.sortseg button[aria-pressed="true"]::after { content: " ↓"; }
.sortseg button[aria-pressed="true"][data-dir="asc"]::after { content: " ↑"; }
.staplesgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px 12px; margin: 0 0 8px; }
.staplesgrid[hidden] { display: none; }
.sgitem { min-width: 0; }
.staplesgrid .dgcard { display: block; width: 100%; max-width: none; }
.sgv { display: block; margin-top: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgv.nm { font-weight: 500; color: var(--muted); }
.sgitem .stepper { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.sgitem .stepper button { width: 32px; height: 32px; flex: none; }
.sgitem .stepper input { flex: 1 1 auto; width: auto; min-width: 0; }
@media (max-width: 700px) {
  .filters .colsel { grid-column: 1 / -1; justify-content: space-between; }
  .filters .colonly { grid-column: 1 / -1; }
  .sortseg { flex: 1 1 100%; min-width: 0; }
  .staplesgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .sgv { font-size: 12px; }
  .sgitem .stepper button { width: 32px; height: 32px; font-size: 17px; }
  .sgitem .stepper input { width: auto; font-size: 15px; }
}

/* /decks/<slug> before the deck page script runs (sitegen deck_seo_html): plain, readable text */
.seodeck { max-width: 860px; }
.seodeck h1 { margin: 8px 0 6px; }
.seodeck h3 { font-size: 15px; margin: 14px 0 4px; color: var(--muted); }
.seodeck ul { margin: 0; padding-left: 18px; columns: 2 220px; }
.seodeck li { break-inside: avoid; }

/* public roadmap (roadmap.html from docs/ROADMAP.md) */
.roadmap { max-width: 68ch; }
.roadmap h2 { margin: 28px 0 8px; }
.roadlist { padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.roadlist b { color: var(--ink); }

/* admin Visitors tab (sitegen ADMIN_JS, /api/admin/stats) */
.statbars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding: 8px 0 0; overflow-x: auto; }
.statbar { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.statbar .v { position: relative; width: 100%; margin-top: auto; background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px 4px 0 0; min-height: 2px; }
.statbar .v i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); border-radius: 4px 4px 0 0; }
.statbar b { font-size: 12px; font-variant-numeric: tabular-nums; }
.statbar small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.statcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.statlist { padding-left: 22px; display: grid; gap: 4px; }
.stattbl td.num, .stattbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .statcols { grid-template-columns: 1fr; } }

/* first visit: paste your collection on the welcome step, then the decks it builds */
.introtop { display: flex; flex: 1 1 auto; min-height: 0; }
.introtop > * { flex: 1 1 auto; }
.introtop.small { flex: 0 1 150px; }
.introtop.small .introbinder, .introtop.small .introfan { min-height: 110px; }
.intropaste {
  width: 100%; box-sizing: border-box; min-height: 74px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel2); color: var(--ink);
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.intropaste:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.introfilerow { gap: 12px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
.introfile { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.introfile:hover { color: var(--ink); }
.introresult { flex: 1 1 auto; }
.introbuild { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.introbuild a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; text-decoration: none;
}
.introbuild a:hover { background: var(--hover); }
.introbuild .ibname { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.introbuild .pct { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.introbuild .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.introbuild .bar span { display: block; height: 100%; background: var(--accent); }
.introbuild .small { grid-column: 1 / -1; color: var(--muted); }

/* destructive buttons: account deletion (account page, admin users) */
.action.danger { color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }
.action.danger:hover { background: color-mix(in srgb, var(--bad) 14%, var(--field)); }
.delacct summary { cursor: pointer; color: var(--muted); }
.usertbl td.row { gap: 6px; }
.nowrap { white-space: nowrap; }

/* "Where do I find the export?" next to the paste boxes */
.exphelp { margin: 6px 0 8px; font-size: 13px; color: var(--muted); }
.exphelp summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.exphelp summary:hover { color: var(--ink); }
.exphelp ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }

/* Continue with Discord: Discord's own blurple, white text in both themes */
.action.discordbtn { background: #5865F2; color: #fff; }
.action.discordbtn:hover { background: #4752c4; }
.discordbtn svg { flex: none; }

/* signed in without a way to recover the account: reminder until dismissed (all widths) */
#authbanner.recover { display: flex !important; border-left-color: var(--warn); }

/* header menu (☰): groups with a small heading, a line between them */
.navmenu { width: 260px; }
.navmenu .menusec + .menusec { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.navmenu .menuhead { padding: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.navmenu #menuauth:empty { display: none; }

/* "Where it was played" dropdown: one line about Endstep */
.ddnote { margin: 4px 10px 6px; max-width: 220px; color: var(--muted); }