/* Design tokens. * * Everything colour-related in Cartheca resolves through these. Stylesheets should * never contain a raw hex value: if a new colour is needed, it belongs here as a token * so both themes stay in step. * * Theme selection, in order of precedence: * 1. data-theme="light" or "dark" on , set server-side from the theme cookie * 2. the operating system's prefers-color-scheme * 3. light * * The server injects the attribute while serving the page, so the correct theme is in * place before first paint. That avoids the usual flash and needs no inline script, * which matters because the Content-Security-Policy only allows scripts from 'self'. */ :root { color-scheme: light; /* Parchment surfaces, lightest to most recessed */ --paper: #eee6d7; --surface: #f8f3e9; --surface-raised: #fffaf0; --surface-sunken: #e2d6c1; --surface-muted: #e9dfcd; --topbar-bg: rgba(248, 243, 233, .94); /* Ink */ --ink: #292724; --muted: #6c655b; --faint: #887f72; --on-accent: #fffaf0; /* Rules and edges */ --line: #d2c4ad; --line-strong: #b8a98f; /* Forest emerald is the fixed brand accent; --deck-accent overrides it per deck. */ --accent: #174a35; --accent-strong: #103827; --accent-soft: #d2ddd5; --danger: #8b332c; --danger-soft: #f5e5e2; --positive: #174a35; --warning: #89502f; --warning-soft: #ead4c3; /* Deliberately dark panels that carry light text in either theme — the sign-in * splash, feature cards, the landing illustration. */ --inverse: #292724; --inverse-2: #1e201f; --on-inverse: #eee6d7; --on-inverse-muted: #a1978a; --on-inverse-accent: #d18457; /* Earth pigments for the five colours, plus colourless and multicolour gold. * Deliberately desaturated: these are manuscript pigments, not spot inks. */ --mana-w: #96844f; --mana-u: #42627d; --mana-b: #4c4150; --mana-r: #8c3a2a; --mana-g: #174a35; --mana-c: #7c7166; --mana-gold: #a6552d; /* Semantic aliases used by archival presentation surfaces. */ --copper: var(--mana-gold); --inverse-line: var(--line-strong); /* Set per deck at runtime; gold is the multicolour convention and a safe default. */ --deck-accent: var(--mana-gold); --shadow: 0 18px 44px rgba(41, 39, 36, .12); --shadow-soft: 0 3px 10px rgba(41, 39, 36, .08); /* Bare colours, for rules that compose their own shadow or overlay. */ --shadow-tint: rgba(41, 39, 36, .18); --backdrop: rgba(24, 26, 25, .66); } /* Soft charcoal, aged leather, and low candlelight. Dark surfaces stay close enough * together to avoid glare, while the pigments remain legible without feeling neon. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #1e201f; --surface: #282b29; --surface-raised: #313432; --surface-sunken: #181a19; --surface-muted: #232624; --topbar-bg: rgba(40, 43, 41, .94); --ink: #eee5d4; --muted: #b8ad9c; --faint: #968b7d; --on-accent: #fffaf0; --line: #464843; --line-strong: #5b5d56; --accent: #2f6b4f; --accent-strong: #79b395; --accent-soft: #25362f; --danger: #ce8272; --danger-soft: #382522; --positive: #79b395; --warning: #d18457; --warning-soft: #493428; --inverse: #202321; --inverse-2: #181a19; --on-inverse: #eee5d4; --on-inverse-muted: #a1978a; --on-inverse-accent: #d18457; --mana-w: #c5b795; --mana-u: #7892a8; --mana-b: #95869d; --mana-r: #c07961; --mana-g: #79b395; --mana-c: #9c9387; --mana-gold: #d18457; --shadow: 0 18px 44px rgba(0, 0, 0, .3); --shadow-soft: 0 3px 10px rgba(0, 0, 0, .22); --shadow-tint: rgba(0, 0, 0, .34); --backdrop: rgba(0, 0, 0, .62); } } /* Explicit choice from the preferences page. Duplicated rather than shared with the * media query above because a preference has to win over the system setting. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #1e201f; --surface: #282b29; --surface-raised: #313432; --surface-sunken: #181a19; --surface-muted: #232624; --topbar-bg: rgba(40, 43, 41, .94); --ink: #eee5d4; --muted: #b8ad9c; --faint: #968b7d; --on-accent: #fffaf0; --line: #464843; --line-strong: #5b5d56; --accent: #2f6b4f; --accent-strong: #79b395; --accent-soft: #25362f; --danger: #ce8272; --danger-soft: #382522; --positive: #79b395; --warning: #d18457; --warning-soft: #493428; --inverse: #202321; --inverse-2: #181a19; --on-inverse: #eee5d4; --on-inverse-muted: #a1978a; --on-inverse-accent: #d18457; --mana-w: #c5b795; --mana-u: #7892a8; --mana-b: #95869d; --mana-r: #c07961; --mana-g: #79b395; --mana-c: #9c9387; --mana-gold: #d18457; --shadow: 0 18px 44px rgba(0, 0, 0, .3); --shadow-soft: 0 3px 10px rgba(0, 0, 0, .22); --shadow-tint: rgba(0, 0, 0, .34); --backdrop: rgba(0, 0, 0, .62); } /* Names kept from the previous palette so existing rules keep working while the * stylesheets are migrated. New code should use the semantic tokens above. */ :root { --green: var(--accent); --green2: var(--accent-strong); --gold: var(--mana-gold); /* Fixed on purpose, and the only colours here that do not flip with the theme: the * preference swatches have to show what each theme looks like while you are sitting * in the other one. */ --preview-light-paper: #eee6d7; --preview-light-accent: #174a35; --preview-dark-paper: #1e201f; --preview-dark-accent: #2f6b4f; } /* A deck's colour identity sets --deck-accent on a container; anything inside it that * uses the accent follows along. */ [data-identity="W"] { --deck-accent: var(--mana-w); } [data-identity="U"] { --deck-accent: var(--mana-u); } [data-identity="B"] { --deck-accent: var(--mana-b); } [data-identity="R"] { --deck-accent: var(--mana-r); } [data-identity="G"] { --deck-accent: var(--mana-g); } [data-identity="C"] { --deck-accent: var(--mana-c); } [data-identity="M"] { --deck-accent: var(--mana-gold); } /* These selectors intentionally outrank the legacy header declarations bundled after * this token sheet. The translucent surface now follows the selected theme, and the * wordmark always resolves to the primary text colour. */ body .topbar { background: var(--topbar-bg); } .topbar .brand { color: var(--ink); } /* The assistant review is a modal dialog: it has to be answered, and it is raised by a proposal arriving rather than by the reader going to look for it. Width is generous because a change summary is a sentence, not a label. */ #assistant-proposals { width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 780px); padding: 0; border: 1px solid var(--line); background: var(--surface); color: inherit; } #assistant-proposals > form { max-height: inherit; padding: clamp(20px, 2.4vw, 34px); } #assistant-proposals::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); } #proposal-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .review-lead { margin: 6px 0 0; color: var(--muted); } .review-note { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .review-open { border-color: var(--deck-accent); color: var(--deck-accent); } .proposal-card { padding: 20px 0; border-top: 1px solid var(--line); } .proposal-card:first-child { border-top: 0; } .proposal-card h3 { margin: 0; font: 22px Georgia, serif; } .proposal-card > p { color: var(--muted); } /* A deletion cannot be undone, so it reads as a warning rather than a routine edit. */ .proposal-card-destructive h3 { color: var(--danger); } .proposal-card-destructive .proposal-changes label { background: color-mix(in srgb, var(--danger) 12%, var(--surface-muted)); border-left: 3px solid var(--danger); } .proposal-changes { display: grid; gap: 8px; margin-top: 16px; } .proposal-changes label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; background: var(--surface-muted); font-size: 13px; text-transform: none; letter-spacing: 0; } .proposal-changes input { width: auto; margin: 2px 0 0; } *{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.topbar{height:76px;padding:0 max(4vw,24px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(243,240,232,.94);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-family:Georgia,serif;font-size:21px}.brand small{display:block;color:var(--muted);font:9px/1.4 system-ui;letter-spacing:.18em;text-transform:uppercase}.sigil{width:39px;height:39px;flex:0 0 39px;object-fit:contain;display:block}.topbar nav{display:flex;gap:8px;align-items:center}.topbar nav a,.nav{border:0;background:none;color:var(--muted);font:600 12px system-ui;text-decoration:none;padding:10px 14px;cursor:pointer}.topbar nav a:hover{color:var(--ink)}.topbar nav a.active{color:var(--ink);box-shadow:inset 0 -2px var(--copper)}.nav.active{color:var(--green2);background:var(--accent-soft);border-radius:99px}main{max-width:1500px;margin:auto;padding:0 4vw 50px}.hero{min-height:330px;display:flex;align-items:center;justify-content:space-between;gap:50px;padding:60px 3vw}.hero h1{font:500 clamp(42px,5vw,74px)/.98 Georgia,serif;letter-spacing:-.04em;margin:8px 0 20px}.hero h1 em{color:var(--green2);font-weight:400}.hero>div>p:last-child{max-width:660px;color:var(--muted);font:16px/1.7 Georgia,serif}.eyebrow{color:var(--gold)!important;font:700 10px/1 system-ui!important;text-transform:uppercase;letter-spacing:.2em;margin:0 0 10px}.hero-card{width:300px;min-width:300px;background:var(--green);color:white;padding:34px;border-radius:4px;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-card span{font-size:9px;letter-spacing:.18em;color:var(--faint)}.hero-card strong{display:block;font:25px Georgia,serif;margin:40px 0 10px}.hero-card p{color:var(--surface-sunken);font-size:13px;line-height:1.6}.pulse{position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.1);border-radius:50%;right:-75px;top:-75px}.workspace{display:grid;grid-template-columns:minmax(310px,440px) 1fr;gap:20px;min-height:560px}.view{display:none}.view.active{display:grid}.panel{background:var(--surface);border:1px solid var(--line);padding:26px;box-shadow:var(--shadow)}.panel.full{grid-column:1/-1}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-title h2{font:29px Georgia,serif;margin:0}.panel-title span{color:var(--muted);font-size:12px}.search,input,select{width:100%;border:1px solid var(--line);background:var(--surface-raised);padding:13px 14px;color:var(--ink);font:inherit;outline:none}.search:focus,input:focus,select:focus{border-color:var(--green2)}.card-list{height:420px;overflow:auto;margin-top:14px;padding-right:5px}.card-row{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--surface-muted)}.mana-orb{width:34px;height:34px;border-radius:50%;background:var(--surface-muted);display:grid;place-items:center;font:12px Georgia,serif}.card-row strong{display:block;font:15px Georgia,serif}.card-row small{color:var(--muted);font-size:10px}.add,.primary,.ghost{border:0;cursor:pointer;font-weight:700}.add{width:30px;height:30px;border-radius:50%;color:var(--green2);background:var(--accent-soft);font-size:18px}.primary{background:var(--green);color:white;padding:12px 17px}.ghost{border:1px solid var(--line);background:transparent;color:var(--green2);padding:11px 16px}.empty{text-align:center;max-width:420px;margin:100px auto;color:var(--muted)}.empty-rune{font-size:42px;color:var(--gold);margin-bottom:20px}.empty h3{font:27px Georgia,serif;color:var(--ink);margin:0 0 10px}.empty p{line-height:1.7;margin-bottom:24px}.hidden{display:none!important}.stats{display:flex;gap:12px;margin-bottom:20px}.stat{flex:1;background:var(--paper);padding:14px}.stat strong{display:block;font:24px Georgia,serif}.stat span{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}.deck-card{display:flex;justify-content:space-between;border-bottom:1px solid var(--surface-muted);padding:13px 5px}.deck-card span{color:var(--muted)}.draft-heading{display:flex;justify-content:space-between;align-items:center}.draft-heading>div{display:flex;align-items:center;gap:12px}.tag{background:var(--accent-soft);color:var(--green2);padding:7px 10px;font-size:11px}.pack{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:20px 0 35px}.pick-card{min-height:205px;border:1px solid var(--line);background:var(--surface);padding:17px;cursor:pointer;transition:.18s;display:flex;flex-direction:column}.pick-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 25px var(--shadow-tint)}.pick-card .cost{align-self:flex-end;color:var(--muted);font-size:11px}.pick-card strong{font:18px/1.15 Georgia,serif;margin-top:auto}.pick-card p{font-size:11px;line-height:1.5;color:var(--muted)}.pool{display:flex;flex-wrap:wrap;gap:8px}.pool span{border:1px solid var(--line);padding:8px 11px;font-size:12px}.advice{padding:16px;border-left:3px solid var(--gold);background:var(--surface);margin:15px 0}.advice strong{font-family:Georgia,serif}dialog{border:1px solid var(--line);padding:0;box-shadow:var(--shadow);width:min(430px,90vw)}dialog::backdrop{background:var(--backdrop)}dialog form{padding:30px}dialog h2{font:32px Georgia,serif;margin:0 0 24px}label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin:15px 0}label input,label select{margin-top:7px;text-transform:none;letter-spacing:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:25px}#toast{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--inverse-2);color:var(--on-inverse);padding:13px 18px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}@media(max-width:800px){.hero{min-height:auto;padding:45px 0}.hero-card{display:none}.workspace{grid-template-columns:1fr}.topbar nav a{display:none}.panel{padding:20px}.card-list{height:330px}} /* The Add-to board selector (add-board.js). One segmented control per page, sitting beside the thing it governs. Painted with --accent rather than --deck-accent: the accent pair clears 6:1 in both themes, while --on-accent on --deck-accent is 2.82:1 in dark mode and an interface control is not the place to add another instance of that. */ .add-board{display:inline-flex;align-items:center;gap:8px;min-width:0} .add-board-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap} .add-board button{font:inherit;font-size:12px;padding:5px 11px;border:1px solid var(--line);background:transparent;color:var(--ink);white-space:nowrap;cursor:pointer} .add-board button:not(.add-board-label)+button{margin-left:-1px} .add-board button:hover{background:var(--surface-raised);border-color:var(--line-strong)} .add-board button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);position:relative;z-index:1} .add-board button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;z-index:2} @media(max-width:620px){.add-board-label{display:none}} .single{grid-template-columns:1fr}.workspace-intro{display:flex;justify-content:space-between;align-items:end;padding:52px 2vw 24px}.workspace-intro h1,.search-heading h1{font:48px Georgia,serif;margin:0}.deck-search-link{display:grid;place-items:center;text-decoration:none}.landing{padding-bottom:70px}.landing-hero{min-height:620px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:70px;padding:70px 4vw}.landing-hero h1{font:500 clamp(60px,8vw,112px)/.87 Georgia,serif;letter-spacing:-.055em;margin:12px 0 30px}.landing-hero h1 em,.assistant-band em{color:var(--green2);font-weight:400}.landing-hero>div>p{max-width:650px;color:var(--muted);font:18px/1.7 Georgia,serif}.landing-actions{display:flex;gap:10px;margin-top:30px}.landing-actions a{text-decoration:none}.vault-visual{height:440px;position:relative;background:var(--green);overflow:hidden;box-shadow:var(--shadow)}.vault-visual>div{position:absolute;left:34px;bottom:28px;color:white}.vault-visual small{font-size:9px;letter-spacing:.18em;color:var(--faint)}.vault-visual strong{display:block;font:52px Georgia,serif;margin-top:7px}.vault-visual p{margin:0;color:var(--surface-sunken)}.vault-card{position:absolute;width:155px;height:220px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:linear-gradient(145deg,var(--inverse),var(--inverse-2));right:45px}.vault-card.one{top:35px;transform:rotate(12deg)}.vault-card.two{top:75px;right:115px;transform:rotate(-4deg)}.vault-card.three{top:120px;right:185px;transform:rotate(-17deg)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--surface)}.feature-grid article{padding:42px;border-right:1px solid var(--line)}.feature-grid article:last-child{border:0}.feature-grid article>span{color:var(--gold);font-size:10px}.feature-grid h2{font:29px Georgia,serif}.feature-grid p{color:var(--muted);line-height:1.7;min-height:82px}.feature-grid a{color:var(--green2);font-weight:700;text-decoration:none;font-size:12px}.assistant-band{text-align:center;padding:110px 20px 60px}.assistant-band h2{font:48px/1.1 Georgia,serif;margin:15px}.assistant-band>p:last-child{max-width:650px;margin:25px auto;color:var(--muted);line-height:1.7}/* Two link treatments, because there are two kinds of link here. The column entries are * navigation and sit in --muted (5.20:1 light, 6.47:1 dark on --surface), rising to --ink * on hover; the Scryfall attribution is an ordinary outbound link and keeps the product's * link green, --green2 (11.74:1 light, 5.92:1 dark). --green2 rather than --green because * the latter is a fill and only reaches 2.27:1 as text — test/theme.test.js enforces it. */ .site-footer{margin-top:70px;padding:52px 4vw 30px;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px}.footer-inner{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px;max-width:1400px;margin:0 auto}.footer-workshop{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.footer-workshop:hover strong,.footer-workshop:focus-visible strong{text-decoration:underline}.footer-mark{width:40px;height:40px;flex:0 0 40px;object-fit:contain;display:block}.footer-brand strong{display:block;color:var(--ink);font:17px Georgia,serif;font-weight:500}.footer-brand p{max-width:34ch;margin:9px 0 0;line-height:1.65}.footer-column h2{margin:0 0 12px;color:var(--ink);font:12px/1 Georgia,serif;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.footer-column ul{margin:0;padding:0;list-style:none}.footer-column li+li{margin-top:9px}.site-footer a{color:var(--green2)}.footer-column a{color:var(--muted);text-decoration:none;line-height:1.5}.footer-column a:hover,.footer-column a:focus-visible{color:var(--ink);text-decoration:underline}.footer-notice{max-width:1400px;margin:34px auto 0;padding-top:20px;border-top:1px solid var(--line);font-size:12px;line-height:1.6}@media(max-width:900px){.footer-inner{grid-template-columns:repeat(2,1fr);gap:28px}.footer-brand{grid-column:1/-1}}@media(max-width:520px){.site-footer{margin-top:48px;padding:38px 24px 26px}.footer-inner{grid-template-columns:1fr;gap:24px}}.search-page{padding-top:50px}.search-heading{display:flex;justify-content:space-between;align-items:end;padding:20px 2vw 35px}.search-heading>div>p:last-child{color:var(--muted)}.active-deck{background:var(--green);color:white;padding:20px 24px;min-width:240px}.active-deck strong,.active-deck span{display:block}.active-deck span{color:var(--faint);font-size:11px;margin:5px 0}.active-deck a{color:var(--line-strong);font-size:11px;text-decoration:none}.search-layout{display:grid;grid-template-columns:300px 1fr;gap:20px}.search-controls{align-self:start;position:sticky;top:96px}.results-panel{min-height:600px}.search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:22px}.result-card{min-width:0;cursor:pointer;transition:.18s}.result-card:hover{transform:translateY(-5px)}.result-card>img{width:100%;border-radius:4.5%;box-shadow:0 10px 24px var(--shadow-tint)}.result-copy{position:relative;padding:10px 36px 0 2px}.result-copy strong,.result-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-copy strong{font:15px Georgia,serif}.result-copy span{color:var(--muted);font-size:10px;margin-top:3px}.result-copy .add{position:absolute;right:0;top:8px}.result-placeholder{aspect-ratio:488/680;background:var(--green);color:white;display:grid;place-items:center;padding:15px;text-align:center;border-radius:4.5%}@media(max-width:850px){.landing-hero{grid-template-columns:1fr;min-height:auto}.vault-visual{display:none}.feature-grid{grid-template-columns:1fr}.feature-grid article{border-right:0;border-bottom:1px solid var(--line)}.search-heading{display:block}.active-deck{margin-top:20px}.search-layout{grid-template-columns:1fr}.search-controls{position:static}.search-results{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}.workspace-intro{padding-top:35px}} .assistant-band>a{display:inline-flex;text-decoration:none} .color-filter{grid-column:1/-1;border:1px solid var(--line);padding:10px;display:flex;gap:7px;align-items:center}.color-filter legend{padding:0 5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.mana-check{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:bold 12px Georgia,serif;border:1px solid rgba(0,0,0,.15);position:relative}.mana-check input{position:absolute;opacity:0}.mana-check:has(input:checked){outline:3px solid var(--gold);outline-offset:2px}.mana-check.w{background:var(--mana-w)}.mana-check.u{background:var(--mana-u)}.mana-check.b{background:var(--mana-b)}.mana-check.r{background:var(--mana-r)}.mana-check.g{background:var(--mana-g)}.advanced-filters{grid-column:1/-1;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}.advanced-filters summary{cursor:pointer;color:var(--green2);font:700 11px system-ui;text-transform:uppercase;letter-spacing:.12em}.advanced-filters>div{display:grid;gap:10px;padding-top:12px}.advanced-filters label{margin:0;font-size:9px}.advanced-filters input,.advanced-filters select{margin-top:5px;padding:9px 10px;font-size:11px}.range-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mana-check.c{background:linear-gradient(145deg,var(--surface-muted),var(--mana-c));color:var(--on-accent)}.mana-check img{width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))} /* Magic symbols inside text (mana-symbols.js, markdown.js). Sized in `em` so a symbol matches whatever text it sits in — 14px oracle text, an 11px deck row, a heading in a primer — rather than needing a rule per surface. Height only, with `width:auto`: the artwork is square, so this renders 1em x 1em when it loads, and when it does not the `alt` text (the literal `{T}`) is not squeezed into a 1em box. `vertical-align:-.115em` seats a round glyph on the text baseline; these containers set `white-space:pre-line`, and an inline element sitting on the line box instead would push the leading of every line it appeared on. `pointer-events:none` because they sit inside click targets: a deck row's copy is clickable, and dragging the image out of a playtest card would start a native drag. */ .mana-symbol-inline{display:inline-block;height:1em;width:auto;vertical-align:-.115em;pointer-events:none} .detail-cost .mana-symbol-inline,.stream-detail-cost .mana-symbol-inline{height:1.05em} .search-syntax{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0 2px;color:var(--muted);font-size:9px}.search-syntax code{background:var(--surface-muted);color:var(--green2);padding:3px 5px;font:700 9px system-ui}.search-syntax span{margin-left:2px} @media(min-width:851px){.search-controls{max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-right:20px}.search-controls::-webkit-scrollbar{width:7px}.search-controls::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}.search-controls::-webkit-scrollbar-track{background:transparent}} .deck-workspace{display:grid;grid-template-columns:270px 1fr;gap:20px;min-height:650px}.deck-library{align-self:start;position:sticky;top:96px}.deck-list-item{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:14px 5px;cursor:pointer;color:var(--ink)}.deck-list-item:hover,.deck-list-item.active{background:var(--accent-soft);padding-left:12px}.deck-list-item strong,.deck-list-item span{display:block}.deck-list-item strong{font:16px Georgia,serif}.deck-list-item span{color:var(--muted);font-size:10px;margin-top:4px;text-transform:capitalize}.deck-editor{min-width:0}.deck-editor-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:22px}.deck-title-input{border:0;background:transparent;padding:0;font:36px Georgia,serif;min-width:280px}.deck-head-actions{display:flex;gap:8px;align-items:center}.deck-head-actions select{width:auto}.deck-head-actions a{text-decoration:none}.deck-guidance{padding:12px 15px;margin:18px 0;background:var(--accent-soft);border-left:3px solid var(--green2);font-size:12px}.deck-guidance.warn{background:var(--surface-muted);border-color:var(--gold)}.deck-analysis{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:22px 0}.deck-analysis>section{background:var(--paper);padding:16px}.mana-curve{display:flex;align-items:end;gap:8px;height:120px}.curve-column{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;text-align:center}.curve-bar{background:var(--green2);min-height:2px}.curve-column strong{font-size:10px;margin-top:5px}.curve-column small{color:var(--muted);font-size:9px}.color-summary{display:flex;gap:10px;flex-wrap:wrap}.color-pip{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-sunken);font:bold 12px Georgia,serif}.board-tabs{display:flex;border-bottom:1px solid var(--line);margin-top:24px}.board-tab{border:0;background:transparent;padding:13px 18px;cursor:pointer;color:var(--muted);font-weight:700}.board-tab.active{color:var(--green2);border-bottom:2px solid var(--green)}.deck-group{margin:22px 0}.deck-group h3{font:20px Georgia,serif;border-bottom:1px solid var(--line);padding-bottom:8px}.empty-role-group{margin:0;padding:9px 4px;color:var(--muted);font-size:9px;font-style:italic;border-bottom:1px solid var(--surface-muted)}.deck-row{display:grid;grid-template-columns:46px 1fr auto auto;gap:12px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--surface-muted)}.deck-row img{width:42px;height:58px;object-fit:cover;border-radius:3px}.deck-row-copy strong,.deck-row-copy span{display:block}.deck-row-copy span{color:var(--muted);font-size:10px}.quantity-control{display:flex;align-items:center;border:1px solid var(--line)}.quantity-control button{border:0;background:transparent;width:28px;height:28px;cursor:pointer}.quantity-control strong{min-width:24px;text-align:center}.row-actions{display:flex;gap:5px}.row-actions button{border:0;background:var(--surface-muted);color:var(--green2);padding:7px;cursor:pointer;font-size:10px}@media(max-width:850px){.deck-workspace{grid-template-columns:1fr}.deck-library{position:static}.deck-analysis{grid-template-columns:1fr}.deck-editor-head{display:block}.deck-head-actions{margin-top:15px}.deck-title-input{min-width:0;width:100%}.deck-row{grid-template-columns:42px 1fr auto}.row-actions{grid-column:2/-1}} .token-group{margin-top:30px}.token-row{grid-template-columns:46px minmax(0,1fr)}.token-placeholder{display:block;width:42px;height:58px;border:1px solid var(--line);border-radius:3px;background:var(--surface-muted)} .deck-group[data-deck-section="companion"] .quantity-control button:last-child{display:none} .deck-owned-status{display:block;width:max-content;max-width:100%;margin-top:4px;padding:3px 6px;border-radius:99px;background:var(--surface-sunken);color:var(--muted);font-size:9px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deck-owned-status.owned{background:var(--accent-soft);color:var(--green2);font-weight:700} .deck-loading{display:grid;min-height:420px;place-content:center;justify-items:center;text-align:center;color:var(--muted)}.deck-loading-sigil{display:grid;width:58px;height:58px;margin-bottom:20px;place-items:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font:italic 27px Georgia,serif;animation:deck-loading-pulse 1.4s ease-in-out infinite}.deck-loading h3{margin:0;color:var(--ink);font:27px Georgia,serif}.deck-loading p{margin:10px 0 0}@keyframes deck-loading-pulse{50%{transform:scale(1.08);opacity:.55}}@media(prefers-reduced-motion:reduce){.deck-loading-sigil{animation:none}} #deck-cards[data-card-view="cards"] .deck-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:24px 0}#deck-cards[data-card-view="cards"] .deck-group h3,#deck-cards[data-card-view="cards"] .empty-role-group{grid-column:1/-1;margin:0}#deck-cards[data-card-view="cards"] .deck-row{position:relative;display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:8px;padding:0 0 10px;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--surface-raised);box-shadow:0 2px 8px rgba(0,0,0,.08)}#deck-cards[data-card-view="cards"] .deck-row>img,#deck-cards[data-card-view="cards"] .deck-row>.deck-row-placeholder,#deck-cards[data-card-view="cards"] .deck-row>.token-placeholder{width:100%;height:auto;aspect-ratio:488/680;border:0;border-radius:0;object-fit:cover;background:var(--surface-muted)}#deck-cards[data-card-view="cards"] .deck-row-copy{min-width:0;padding:0 10px}#deck-cards[data-card-view="cards"] .deck-row-copy strong,#deck-cards[data-card-view="cards"] .deck-row-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#deck-cards[data-card-view="cards"] .quantity-control{align-self:center}#deck-cards[data-card-view="cards"] .row-actions{display:none}#deck-cards[data-card-view="cards"] .token-row{justify-content:flex-start}#deck-cards[data-card-view="cards"] .token-row .deck-row-copy span{white-space:normal}#deck-cards[data-card-view="cards"] .deck-row:not(.token-row)::after{content:"Right-click for more actions";padding:0 10px;color:var(--muted);font-size:9px;text-align:center}@media(max-width:620px){#deck-cards[data-card-view="cards"] .deck-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.deck-view-control button{min-width:38px;padding:0 8px}.deck-view-control button span{display:none}} .deck-link-unavailable .builder-page>:not(.deck-link-unavailable-panel){display:none!important}.deck-link-unavailable-panel{min-height:calc(100vh - 76px);display:grid;place-content:center;justify-items:center;text-align:center;padding:32px}.deck-link-unavailable-panel h1{max-width:620px;margin:0 0 12px;font:clamp(32px,5vw,54px)/1.05 Georgia,serif;color:var(--ink)}.deck-link-unavailable-panel>p:not(.eyebrow){max-width:520px;margin:0 0 24px;color:var(--muted);line-height:1.6}.deck-link-unavailable-panel .primary{text-decoration:none} .workbench-bracket-badge,.deck-bracket-badge{display:inline-flex;align-items:center;width:max-content;border:1px solid color-mix(in srgb,var(--gold) 60%,var(--line));border-radius:99px;padding:4px 9px;background:color-mix(in srgb,var(--gold) 12%,var(--paper));color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.03em}.workbench-bracket-badge.hidden{display:none} /* The Game Changer mark. Commander only, and never colour alone: the visible label carries the meaning, the lozenge only makes it findable at a glance down a decklist. */ .game-changer-mark{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:3px 7px;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:99px;background:color-mix(in srgb,var(--gold) 14%,var(--surface));color:var(--ink);font-size:9px;font-weight:800;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;white-space:nowrap} .game-changer-mark i{font-style:normal;color:var(--gold);font-size:10px} .deck-row-marks{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:4px} .deck-row-marks:empty{display:none} .deck-row-marks .deck-owned-status{margin-top:0} /* Over the art in Card Search, where there is no room for a row of marks. */ .result-card{position:relative} .result-card>.game-changer-mark{position:absolute;top:8px;left:8px;z-index:1;box-shadow:var(--shadow-soft)} .card-detail .game-changer-mark{margin:8px 0 2px} .game-changer-mark.uncounted{opacity:.6;border-style:dashed} /* --- Cascade view --------------------------------------------------------------------- Each group is a column; the cards in it overlap downward so only a strip of each shows. The strip is the top of the printed card, which is where Magic puts the name and the mana cost, so a column reads top to bottom with nothing brought forward. One card per physical copy, so a column's height is the deck's real shape rather than its entry count. The overlap is arithmetic, not guesswork: a card's height is the column width times the card aspect ratio, so pulling the next card up by (strip - height) leaves exactly `strip` of the one above it visible. That is also why each row is given that height explicitly and clips its own overflow — the row's text sits below the image, where it stays in the document for a screen reader and for anyone reading the last card in a column. Stacking needs no z-index: later siblings paint over earlier ones, which is the overlap direction wanted. Hover and focus only have to lift a card above the ones that follow. */ #deck-cards[data-card-view="cascade"]{--cascade-column:154px;--cascade-strip:38px;--cascade-card-height:calc(var(--cascade-column) * 680 / 488);display:flex;align-items:flex-start;gap:16px;padding:6px 2px 14px;overflow-x:auto;overscroll-behavior-x:contain} #deck-cards[data-card-view="cascade"] .deck-group{display:flex;width:var(--cascade-column);flex:0 0 var(--cascade-column);flex-direction:column;margin:0} #deck-cards[data-card-view="cascade"] .deck-group h3{margin:0 0 8px;padding-bottom:6px;font-size:14px;line-height:1.25;overflow-wrap:break-word} #deck-cards[data-card-view="cascade"] .deck-group h3 small{color:var(--muted);font-size:11px} #deck-cards[data-card-view="cascade"] .empty-role-group{border-bottom:0} #deck-cards[data-card-view="cascade"] .deck-row{position:relative;display:block;height:var(--cascade-card-height);padding:0;border:0;border-radius:5px;background:transparent;overflow:hidden;cursor:pointer;transition:transform .12s ease} #deck-cards[data-card-view="cascade"] .deck-row+.deck-row{margin-top:calc(var(--cascade-strip) - var(--cascade-card-height))} #deck-cards[data-card-view="cascade"] .deck-row>img,#deck-cards[data-card-view="cascade"] .deck-row>.deck-row-placeholder,#deck-cards[data-card-view="cascade"] .deck-row>.token-placeholder{display:block;width:100%;height:var(--cascade-card-height);border-radius:5px;background:var(--surface-muted);box-shadow:0 -1px 5px var(--shadow-tint);object-fit:cover} /* A card with no image still has to say which card it is, since the strip is all a reader sees of it. */ #deck-cards[data-card-view="cascade"] .deck-row>.deck-row-placeholder{padding:8px;border:1px solid var(--line);font-size:11px;line-height:1.3} /* Brought forward. Focus is not decoration here: without it the view is unreadable to anyone not using a pointer, which is why every cascaded card is focusable. */ #deck-cards[data-card-view="cascade"] .deck-row:hover,#deck-cards[data-card-view="cascade"] .deck-row:focus-visible{z-index:10;overflow:visible;outline:0} #deck-cards[data-card-view="cascade"] .deck-row:hover>img,#deck-cards[data-card-view="cascade"] .deck-row:focus-visible>img,#deck-cards[data-card-view="cascade"] .deck-row:hover>.deck-row-placeholder,#deck-cards[data-card-view="cascade"] .deck-row:focus-visible>.deck-row-placeholder{box-shadow:0 8px 22px var(--shadow-tint),0 0 0 2px var(--deck-accent)} #deck-cards[data-card-view="cascade"] .deck-row:focus-visible{transform:translateY(-5px)} /* Raised over the following cards, the row's own text becomes readable again. */ #deck-cards[data-card-view="cascade"] .deck-row:hover>.deck-row-copy,#deck-cards[data-card-view="cascade"] .deck-row:focus-visible>.deck-row-copy{position:absolute;top:100%;left:0;width:max(100%,190px);padding:7px 9px;border:1px solid var(--line);border-radius:0 5px 5px 5px;background:var(--surface-raised);box-shadow:0 8px 22px var(--shadow-tint)} @media(max-width:850px){#deck-cards[data-card-view="cascade"]{--cascade-column:126px;--cascade-strip:32px;gap:10px}} @media(prefers-reduced-motion:reduce){ #deck-cards[data-card-view="cascade"] .deck-row{transition:none} #deck-cards[data-card-view="cascade"] .deck-row:focus-visible{transform:none} } #deck-cards[data-card-view="cards"] .deck-row>.deck-row-placeholder{display:grid;place-items:center;padding:10px;color:var(--muted);font-size:11px;text-align:center} /* --- Cards that make the deck illegal --------------------------------------------------- A red outline where the card is, so the warning list at the top has somewhere to point. Never the outline alone: `.illegal-mark` says which rule in words, since a red border on its own reports that something is wrong without saying what, and says nothing at all to a reader who cannot tell it from the ordinary border. */ .deck-row.illegal{outline:2px solid var(--danger);outline-offset:-2px;background:color-mix(in srgb,var(--danger) 7%,transparent)} .illegal-mark{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;padding:3px 7px;border:1px solid var(--danger);border-radius:99px;background:var(--danger-soft);color:var(--danger);font-size:9px;font-weight:800;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;white-space:nowrap} .illegal-mark i{display:grid;width:12px;height:12px;place-items:center;border-radius:50%;background:var(--danger);color:var(--on-accent);font-style:normal;font-size:9px;font-weight:800} /* In Card view the row is the card, so the outline traces the whole tile. */ #deck-cards[data-card-view="cards"] .deck-row.illegal{outline-offset:0;border-color:var(--danger)} /* Cascade hides all but a strip of each card, so the mark has to be on the strip. The first attempt was a box-shadow ring around the card image, which failed twice over: `.deck-row` clips its overflow, so an outward shadow was painted straight out of existence, and even unclipped the ring would have been drawn around the ~96% of the card sitting under the next one. This is a pseudo-element inside the row, over exactly the part that shows — and it grows to frame the whole card once the card is raised. */ #deck-cards[data-card-view="cascade"] .deck-row.illegal{outline:0;background:transparent} #deck-cards[data-card-view="cascade"] .deck-row.illegal::after{content:"";position:absolute;z-index:1;top:0;right:0;left:0;height:var(--cascade-strip);border:2px solid var(--danger);border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--danger) 18%,transparent);pointer-events:none} #deck-cards[data-card-view="cascade"] .deck-row.illegal:hover::after,#deck-cards[data-card-view="cascade"] .deck-row.illegal:focus-visible::after{height:100%;border-radius:5px;background:transparent} /* Card artwork is 42x58 above, but mana symbols nested in the row are inline text. */ .deck-row .mana-symbol-inline{width:auto;height:1em;object-fit:contain;border-radius:0} .folder-heading{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 4px 6px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}.folder-heading button{border:0;background:transparent;color:var(--green2);font-size:20px;cursor:pointer}.folder-list{display:grid;gap:3px}.folder-item{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:transparent;color:var(--ink);padding:9px 8px;text-align:left;cursor:pointer}.folder-item:hover,.folder-item.active{background:var(--accent-soft);color:var(--green2)}.folder-item small{color:var(--muted)}.library-divider{border-top:1px solid var(--line);margin:12px 0}.deck-head-actions #deck-folder-edit{max-width:170px} .deck-workspace{grid-template-columns:minmax(0,1fr)}.deck-library{position:static;top:auto;width:100%;padding:14px 20px}.deck-library .panel-title{align-items:center}.deck-library .panel-title h2{font-size:21px}.library-toggle{display:block;border:0;background:transparent;color:var(--green2);padding:5px 0 0;cursor:pointer;font-size:11px;font-weight:700}.library-toggle span{display:inline-block;margin-left:4px;transition:transform .2s}.library-toggle.open span{transform:rotate(180deg)}.library-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.library-body.hidden{display:none}.folder-heading{grid-column:1;margin:0;padding:0 8px;align-self:center}.folder-heading strong{display:none}.folder-list{grid-column:1;display:flex;gap:7px;max-width:48vw;overflow-x:auto;padding-bottom:5px}.folder-item{flex:0 0 auto;width:auto;min-width:120px;border:1px solid var(--line);padding:12px}.library-divider{grid-column:1;border:0;border-left:1px solid var(--line);margin:0}.deck-library #deck-list{grid-column:2;display:flex;gap:9px;overflow-x:auto;padding-bottom:5px;min-width:0}.deck-library .deck-list-item{flex:0 0 210px;border:1px solid var(--line);padding:12px}.deck-library .deck-list-item:hover,.deck-library .deck-list-item.active{padding-left:12px}.deck-library .empty-list{padding:10px}@media(max-width:700px){.library-body{display:flex;flex-direction:column}.folder-list{max-width:none}.library-divider{border:0;border-top:1px solid var(--line)}.deck-library #deck-list{width:100%}} .library-body{display:flex;align-items:stretch}.folder-heading{flex:0 0 auto}.folder-list{flex:0 1 auto}.library-divider{flex:0 0 1px;border:0;background:var(--line)}.deck-library #deck-list{flex:1 1 360px} .library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.library-toolbar.hidden{display:none}.library-toolbar>div{display:flex;align-items:center;gap:8px}.library-toolbar #new-deck{width:auto}.library-toolbar #library-location{margin-left:7px;color:var(--muted);font-size:11px}.library-toolbar button:disabled{opacity:.35;cursor:default}.library-body{display:flex;flex-wrap:nowrap;gap:14px;margin-top:10px;padding:4px 2px 12px;border:0;overflow-x:auto}.folder-list,.deck-library #deck-list{display:flex;flex:0 0 auto;gap:12px;max-width:none;overflow:visible;padding:0}.library-divider{display:block;flex:0 0 1px;min-height:112px;background:var(--line)}.library-divider.hidden,.folder-list.hidden{display:none}.library-card{position:relative;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;width:190px!important;height:112px;border:0!important;border-radius:10px;padding:14px!important;overflow:hidden;text-align:left;box-shadow:0 5px 15px rgba(23,38,31,.09);transition:transform .15s,box-shadow .15s}.folder-item.library-card{background:linear-gradient(145deg,var(--line-strong),var(--surface-muted));color:var(--ink)}.deck-list-item.library-card{background:linear-gradient(145deg,var(--inverse),var(--inverse-2));color:var(--on-inverse)}.library-card:hover,.library-card.active{transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,38,31,.18);padding:14px!important}.library-card-icon{position:absolute;right:13px;top:10px;font-size:25px;opacity:.28}.library-card strong{font:18px Georgia,serif}.library-card small,.deck-list-item.library-card span:last-child{margin-top:5px;color:inherit;opacity:.7;font-size:10px}.deck-library .empty-list{min-width:180px}@media(max-width:700px){.library-toolbar{align-items:flex-start;flex-direction:column}.library-toolbar>div{flex-wrap:wrap}.library-body{flex-direction:row}.folder-list,.deck-library #deck-list{width:auto}} .workspace-intro-actions{display:flex;align-items:center;gap:9px}.workspace-intro-actions a{text-decoration:none}.workspace-intro-actions .library-toggle{display:inline-flex;align-items:center;gap:5px;padding:10px 14px}.deck-workspace{position:relative}.deck-library{display:none;position:absolute;inset:0 0 auto;z-index:20;width:100%;padding:14px 20px;background:var(--surface);box-shadow:0 16px 35px var(--shadow-tint)}.deck-library.open{display:block}.deck-library .panel-title{display:none}.deck-editor{grid-column:1}@media(max-width:700px){.workspace-intro{align-items:flex-start;gap:15px;flex-direction:column}.workspace-intro-actions{width:100%;flex-wrap:wrap}} .library-toolbar .danger{color:var(--danger);border-color:var(--line-strong)}.library-toolbar .danger:hover{background:var(--danger-soft)}.library-toolbar .danger.hidden{display:none} .deck-library-card{border-left:3px solid var(--deck-accent)}.deck-pips{display:flex;gap:3px;margin-top:7px}.deck-pip{width:9px;height:9px;border-radius:50%;display:block;border:1px solid var(--line-strong)}.pip-w{background:var(--mana-w)}.pip-u{background:var(--mana-u)}.pip-b{background:var(--mana-b)}.pip-r{background:var(--mana-r)}.pip-g{background:var(--mana-g)}.deck-library-card.active .deck-status-light{background:var(--deck-accent)} .folder-library-card[draggable="true"]{cursor:grab}.folder-library-card.dragging{opacity:.45}.folder-library-card.folder-drop-target,#folder-back.folder-drop-target{outline:2px solid var(--gold);outline-offset:2px;background:var(--accent-soft)} .deck-library-card[draggable="true"]{cursor:grab}.deck-library-card.dragging{opacity:.42;transform:scale(.97)}.folder-library-card.deck-drop-target,#folder-back.deck-drop-target,#landing-back.deck-drop-target{outline:3px solid var(--copper);outline-offset:3px;background:var(--accent-soft);box-shadow:0 0 0 5px color-mix(in srgb,var(--copper) 18%,transparent)} .deck-list-item.library-card{isolation:isolate;border:0!important;background:linear-gradient(145deg,color-mix(in srgb,var(--deck-accent) 16%,var(--inverse)),var(--inverse-2))}.deck-library-card>*:not(.deck-card-art):not(.deck-card-scrim){position:relative;z-index:2}.deck-card-art,.deck-card-scrim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.deck-card-art{z-index:-2;object-fit:cover;object-position:center 14%;transform:scale(1.19);filter:saturate(.82) contrast(1.04);transition:transform .25s,filter .25s}.deck-card-scrim{z-index:-1;background:linear-gradient(180deg,rgba(12,18,15,.12) 0%,rgba(12,18,15,.4) 38%,rgba(12,18,15,.94) 100%)}.deck-library-card.has-deck-art:hover .deck-card-art,.deck-library-card.has-deck-art:focus-visible .deck-card-art{transform:scale(1.24);filter:saturate(1) contrast(1.06)}.deck-library-card.has-deck-art strong{text-shadow:0 1px 3px rgba(0,0,0,.8)}.deck-list-item.library-card .deck-card-detail{margin-top:5px;color:inherit;opacity:.78;font-size:10px}.deck-library-card .deck-pip{border-color:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.55)} .deck-library-card .deck-pips{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap;align-items:center;width:max-content;gap:3px;margin-top:7px}.deck-library-card .deck-mana-symbol{display:block;flex:0 0 14px;width:14px;height:14px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))} .library-kind-control{display:inline-flex;height:28px;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--surface-raised)}.library-kind-control button{border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);padding:0 11px;font:700 11px/1 inherit;cursor:pointer}.library-kind-control button:last-child{border-right:0}.library-kind-control button:hover{color:var(--ink);background:var(--surface-muted)}.library-kind-control button.active{color:var(--green2);background:var(--accent-soft)}.library-kind-control button:focus-visible{outline:2px solid var(--green2);outline-offset:-2px}.landing-library-actions .library-kind-control{margin-right:4px} .deck-home{padding-bottom:70px}.deck-home-hero{min-height:520px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:70px;padding:65px 4vw}.deck-home-hero h1{font:500 clamp(52px,7vw,94px)/.9 Georgia,serif;letter-spacing:-.045em;margin:12px 0 26px}.deck-home-hero h1 em{color:var(--green2);font-weight:400}.deck-home-hero>div>p:last-of-type{max-width:610px;color:var(--muted);font:17px/1.7 Georgia,serif}.deck-home-actions{display:flex;gap:10px;margin-top:28px}.deck-home-actions a{text-decoration:none}.recent-deck-panel{background:var(--green);color:var(--surface-raised);padding:28px;min-height:330px;box-shadow:var(--shadow)}.recent-deck-panel .eyebrow{color:var(--faint)}.recent-deck-panel a{display:flex;align-items:center;justify-content:space-between;padding:17px 3px;border-bottom:1px solid rgba(255,255,255,.16);color:var(--surface-raised);text-decoration:none}.recent-deck-panel a:hover{padding-left:8px}.recent-deck-panel a span,.recent-deck-panel a strong,.recent-deck-panel a small{display:block}.recent-deck-panel a strong{font:18px Georgia,serif}.recent-deck-panel a small{color:var(--faint);margin-top:5px;text-transform:capitalize}.recent-empty{display:grid;place-items:center;text-align:center;min-height:220px}.recent-empty strong{font:25px Georgia,serif}.recent-empty p{color:var(--faint)}.deck-paths{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--surface)}.deck-paths>a{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:34px;color:var(--ink);text-decoration:none;border-right:1px solid var(--line)}.deck-paths>a:last-child{border:0}.deck-paths>a>span{color:var(--gold);font-size:10px}.deck-paths h2{font:27px Georgia,serif;margin:0 0 12px}.deck-paths p{color:var(--muted);line-height:1.6;min-height:75px}.deck-paths>a>strong{grid-column:2;color:var(--green2);font-size:11px}@media(max-width:850px){.deck-home-hero{grid-template-columns:1fr;gap:35px;padding-top:40px}.deck-paths{grid-template-columns:1fr}.deck-paths>a{border-right:0;border-bottom:1px solid var(--line)}} .active-deck-feature{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px}.active-deck-feature>strong{font:34px Georgia,serif}.active-deck-feature>small{display:block;color:var(--faint);margin:7px 0 25px;text-transform:capitalize}.active-deck-feature>a{align-self:flex-start;border-bottom:0;padding:11px 16px;color:var(--inverse);background:var(--surface-raised)}.active-deck-feature>a:hover{padding-left:16px}.landing-library{margin:0 2vw;padding:30px;background:var(--surface);border:1px solid var(--line)}.landing-library>header{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line)}.landing-library h2{font:34px Georgia,serif;margin:4px 0 0}.landing-library-actions{display:flex;gap:8px;align-items:center}.landing-library-actions a{text-decoration:none}.landing-library>section{padding-top:25px}.landing-card-row{display:flex;gap:14px;overflow-x:auto;padding:5px 2px 18px}.landing-card-row .library-card{flex:0 0 210px!important;height:125px!important;text-decoration:none}.landing-card-row .deck-list-item.library-card span:last-child{display:block}.landing-library button:disabled{opacity:.4}@media(max-width:700px){.landing-library>header{align-items:flex-start;flex-direction:column}.landing-library-actions{flex-wrap:wrap}.landing-library{margin:0;padding:22px}} .card-context-menu{position:fixed;z-index:1000;width:170px;padding:6px;background:var(--surface-raised);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 35px var(--backdrop)}.card-context-menu.hidden{display:none}.card-context-menu button{display:block;width:100%;border:0;background:transparent;padding:10px 12px;text-align:left;color:var(--ink);cursor:pointer}.card-context-menu button:hover{background:var(--accent-soft)}.card-context-menu button.danger{color:var(--danger);border-top:1px solid var(--line)}.card-context-menu button.hidden{display:none}.card-context-menu button.section-separator{border-top:1px solid var(--line);margin-top:4px;padding-top:12px} .landing-card-row,.landing-card-row.show-all-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;overflow:visible}.landing-card-row .library-card,.landing-card-row.show-all-grid .library-card{width:100%!important;min-width:0;max-width:none}@media(max-width:1100px){.landing-card-row,.landing-card-row.show-all-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:850px){.landing-card-row,.landing-card-row.show-all-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.landing-card-row,.landing-card-row.show-all-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:400px){.landing-card-row,.landing-card-row.show-all-grid{grid-template-columns:1fr}} .deck-list-item.library-card .deck-folder-label{position:absolute;right:12px;bottom:12px;max-width:45%;margin:0;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.13);color:var(--on-inverse);font:9px/1.2 sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.show-all-grid .deck-list-item.library-card>span:not(.library-card-icon):not(.deck-status-light){padding-right:48%} .deck-status-light{position:absolute;right:14px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(255,255,255,.08)}.deck-list-item.active .deck-status-light{background:var(--positive);box-shadow:0 0 0 3px rgba(69,212,131,.16),0 0 10px rgba(69,212,131,.75)} .landing-section-heading{display:flex;align-items:center;width:100%;gap:12px;margin-bottom:8px}.landing-section-heading .eyebrow{margin:0}.landing-section-heading button{margin-left:auto;padding:7px 11px;font-size:10px} .deck-home-hero{min-height:390px;display:block;grid-template-columns:none}.deck-home-hero>div{max-width:900px} .landing-card-row .deck-list-item.library-card{height:150px!important}.landing-card-row .deck-list-item.library-card .deck-card-detail{display:block}.deck-list-item.library-card .deck-folder-label{border:1px solid rgba(255,255,255,.18);background:rgba(9,15,12,.58);backdrop-filter:blur(4px)}.show-all-grid .deck-list-item.library-card>.deck-card-detail{padding-right:48%} /* The active deck, beside the hero. * * The hero was returned to two columns here. It had been `display:block` since the band * that used to fill the right half was removed, which left the title with an empty half * of the screen next to it. `>div` is the copy; `>aside` is this panel. */ .deck-home-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:60px} .deck-home-hero>div{max-width:640px} .deck-home-active{display:flex;flex-direction:column;gap:12px;min-width:0} .deck-home-active>.eyebrow{margin:0;color:var(--copper)} /* The shared deck card sizes itself for a library row, where it is one of five in a grid. * Here it is the only thing in the column and carries the commander art, so it is given * the room to be looked at. The !important matches the shared rules it is overriding. */ .deck-home-active .library-card{width:100%!important;height:210px!important;max-width:none;text-decoration:none} .deck-home-active .library-card strong{font:22px Georgia,serif} .deck-home-active .deck-card-detail{display:block;font-size:12px} .deck-home-active-open{align-self:flex-start;text-decoration:none} .deck-home-active-empty{display:flex;flex-direction:column;justify-content:center;min-height:210px;padding:26px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface)} .deck-home-active-empty .eyebrow{margin:0 0 8px;color:var(--copper)} .deck-home-active-empty strong{font:22px Georgia,serif;font-weight:500} .deck-home-active-empty p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.6} @media(max-width:850px){ .deck-home-hero{grid-template-columns:1fr;gap:34px} .deck-home-hero>div{max-width:900px} .deck-home-active .library-card{height:170px!important} } .community-page{max-width:1380px;padding-bottom:70px}.community-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:32px;align-items:center;min-height:390px;padding:65px 3vw}.community-hero h1{margin:8px 0 20px;font:500 clamp(48px,7vw,86px)/.88 Georgia,serif;letter-spacing:-.05em}.community-hero h1 em{color:var(--green2);font-weight:400}.community-hero>div>p:last-child{max-width:700px;color:var(--muted);font:17px/1.7 Georgia,serif}.community-hero aside{padding:30px;border-top:4px solid var(--copper);background:var(--inverse);color:var(--on-inverse);box-shadow:var(--shadow)}.community-hero aside span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-inverse-accent)}.community-hero aside strong{display:block;margin:34px 0 10px;font:25px Georgia,serif}.community-hero aside p{color:var(--on-inverse-muted);line-height:1.6}.community-browser{padding:34px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}.community-browser>header{display:flex;justify-content:space-between;gap:24px;align-items:end}.community-browser h2{margin:0;font:34px Georgia,serif}.community-browser label{width:min(380px,100%);margin:0}.community-filters{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.community-filters button{padding:9px 13px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}.community-filters button.active{border-color:var(--green);background:var(--accent-soft);color:var(--green2)}.community-status{padding:12px 0;color:var(--muted);font-size:12px}.community-status.community-status-failed{color:var(--danger);font-weight:600}.community-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.community-grid .community-deck-card{width:100%!important;min-width:0;max-width:none;height:125px;text-decoration:none}.community-grid .community-deck-card>span:not(.deck-status-light):not(.deck-pips){display:block;padding-right:42%}.community-grid .community-deck-card .deck-folder-label{max-width:48%}.community-empty{grid-column:1/-1;min-height:300px;display:grid;place-content:center;justify-items:center;text-align:center;padding:35px}.community-empty>span{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--copper);border-radius:50%;color:var(--copper);font:italic 28px Georgia,serif}.community-empty h3{margin:20px 0 8px;font:28px Georgia,serif}.community-empty p{max-width:500px;margin:0 0 22px;color:var(--muted);line-height:1.6}.community-empty .primary{text-decoration:none}.community-deck-error{text-align:center;padding:80px 24px}#copy-community-deck-status{margin:12px 0 0;color:var(--muted);font-size:12px}#copy-community-deck-status.copy-failed{color:var(--danger);font-weight:600}@media(max-width:760px){.community-hero{grid-template-columns:1fr;padding:42px 0}.community-browser{padding:22px}.community-browser>header{align-items:stretch;flex-direction:column}.community-browser label{width:100%}} @media(max-width:1100px){.community-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:850px){.community-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.community-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:400px){.community-grid{grid-template-columns:1fr}} /* A rendered deck primer. Shared by the public deck page and the builder's preview, so a writer sees the same typography a reader gets. Prose, not interface: Georgia at a real reading size rather than the small labels used elsewhere. */ .deck-primer{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink);font:16px/1.75 Georgia,serif} .deck-primer>:first-child{margin-top:0} .deck-primer>:last-child{margin-bottom:0} .deck-primer p{margin:0 0 1em} .deck-primer h3,.deck-primer h4,.deck-primer h5,.deck-primer h6{margin:1.6em 0 .5em;font-family:Georgia,serif;font-weight:500;line-height:1.25} .deck-primer h3{font-size:26px} .deck-primer h4{font-size:21px} .deck-primer h5{font-size:18px} .deck-primer h6{font-size:16px;color:var(--muted);letter-spacing:.02em} .deck-primer ul,.deck-primer ol{margin:0 0 1em;padding-left:1.5em} .deck-primer li{margin-bottom:.35em} .deck-primer li::marker{color:var(--copper)} .deck-primer strong{font-weight:700} .deck-primer a{color:var(--copper);text-decoration:underline;text-underline-offset:2px} .deck-primer a:hover{color:var(--green2)} .community-grid .community-deck-card{height:150px}.community-grid .community-deck-card>.deck-card-detail{display:block;padding-right:42%} .auth-page{min-height:100vh;background:linear-gradient(135deg,var(--paper) 0 58%,var(--inverse) 58%)}.auth-brand{position:absolute;left:28px;top:22px;text-decoration:none}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:90px 20px 40px}.auth-card{width:min(440px,100%);padding:42px;background:var(--surface);box-shadow:0 24px 60px var(--shadow-tint)}.auth-card h1{font:44px Georgia,serif;margin:8px 0}.auth-card>p{color:var(--muted)}.auth-card form{display:grid;gap:16px;margin-top:28px}.auth-card label,.auth-card label input{display:block;width:100%}.auth-card label{font-size:11px;font-weight:700}.auth-card input{margin-top:7px}.auth-card label small{display:block;color:var(--muted);margin-top:5px}.auth-card form .primary{margin-top:6px}.auth-error{margin:0!important;padding:10px;background:var(--danger-soft);color:var(--danger)!important}.auth-switch{text-align:center;margin-top:25px}.auth-switch a{color:var(--green2)}.future-signin{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--line);margin-top:25px;padding-top:18px}.future-signin span{grid-column:1/-1;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.14em}.future-signin button{padding:9px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}.account-menu{position:relative}.account-menu>#account-button{width:34px;height:34px;border:0;border-radius:50%;background:var(--green2);color:var(--surface-raised);font-weight:800;cursor:pointer}.account-menu>div{position:absolute;right:0;top:43px;z-index:100;width:230px;padding:16px;background:var(--surface-raised);border:1px solid var(--line);box-shadow:var(--shadow)}.account-menu>div strong,.account-menu>div span{display:block}.account-menu>div span{color:var(--muted);font-size:10px;margin:4px 0 15px}.account-menu>div button{width:100%;padding:9px;border:0;background:var(--surface);color:var(--green2);cursor:pointer}.account-menu>div a.account-link{display:block;padding:9px;margin-bottom:6px;text-align:center;background:var(--surface);color:var(--green2);font:600 12px system-ui;text-decoration:none}.account-keys{max-width:820px}.account-keys .panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.account-keys h2{font:27px Georgia,serif;margin:0}.key-intro{color:var(--muted);font:14px/1.7 Georgia,serif;max-width:640px;border-top:1px solid var(--line);margin:22px 0 0;padding-top:20px}.key-intro a{color:var(--green2)}.key-intro code,.key-row code,.new-key code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--accent-soft);padding:2px 5px}.new-key{margin-top:22px;padding:18px;background:var(--accent-soft);border-left:3px solid var(--green2)}.new-key>p{margin:0 0 12px;color:var(--muted);font-size:13px}.new-key-row{display:flex;gap:8px;align-items:center}.new-key-row code{flex:1;overflow-x:auto;white-space:nowrap;padding:11px 12px;background:var(--surface-raised);border:1px solid var(--line)}.key-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.key-row:first-child{border-top:1px solid var(--line);margin-top:22px}.key-row strong{display:block;margin-bottom:4px}.key-row small{color:var(--muted);font-size:11px}.key-empty{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.prefs{max-width:820px}.prefs h2{font:27px Georgia,serif;margin:0}.prefs-intro{color:var(--muted);font:14px/1.7 Georgia,serif;max-width:640px;border-top:1px solid var(--line);margin:22px 0 0;padding-top:20px}.prefs-note{color:var(--muted);font-size:12px;margin:18px 0 0}.theme-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;border:0;padding:0;margin:22px 0 0}.theme-option{position:relative;display:block;padding:16px;background:var(--surface);border:1px solid var(--line);cursor:pointer}.theme-option:hover{border-color:var(--line-strong)}.theme-option input{position:absolute;opacity:0;width:0;height:0}.theme-option strong{display:block;font-size:13px;margin-top:12px}.theme-option small{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.5}.theme-option:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.theme-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.theme-swatch{display:flex;height:42px;border:1px solid var(--line);overflow:hidden}.theme-swatch i{flex:1;display:block}.swatch-light i:first-child{background:var(--preview-light-paper)}.swatch-light i:last-child{background:var(--preview-light-accent)}.swatch-dark i:first-child{background:var(--preview-dark-paper)}.swatch-dark i:last-child{background:var(--preview-dark-accent)}.swatch-system i:first-child{background:var(--preview-light-paper)}.swatch-system i:last-child{background:var(--preview-dark-paper)} .key-scope-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.key-scope-tag{padding:2px 7px;border-radius:99px;background:var(--surface-muted);color:var(--muted);font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace}.key-scope-tag.full{background:var(--accent-soft);color:var(--green2);font-family:inherit;font-size:10px;letter-spacing:.04em;text-transform:uppercase}.key-scopes{margin:0;padding:14px;border:1px solid var(--line)}.key-scopes legend{padding:0 6px;font-size:11px;font-weight:700}.key-scopes>small{display:block;margin-top:10px;color:var(--muted);font-size:11px;line-height:1.5}.key-scope-option{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-weight:400}.key-scope-option input{width:auto;margin:3px 0 0}.key-scope-option span{display:block}.key-scope-option strong{display:block;font-size:12px}.key-scope-option small{display:block;margin-top:2px;color:var(--muted);font:11px ui-monospace,SFMono-Regular,Menlo,monospace} .account-profile-panel{max-width:820px}.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.profile-form{display:grid;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.profile-form>label{display:grid;gap:7px;font:600 12px system-ui}.profile-form input,.profile-form textarea{width:100%;box-sizing:border-box}.profile-form textarea{resize:vertical;min-height:110px}.profile-form small,.profile-picture-editor small{color:var(--muted);font:11px/1.5 system-ui}.profile-picture-editor{display:flex;align-items:center;gap:18px}.profile-picture-editor>div:last-child{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.profile-picture-editor small{flex-basis:100%}.profile-upload{position:relative;overflow:hidden}.profile-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.profile-avatar{display:grid;place-items:center;flex:none;overflow:hidden;border-radius:50%;background:var(--accent-soft);border:2px solid var(--deck-accent,var(--copper));color:var(--green2);font:700 28px Georgia,serif}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar-large{width:88px;height:88px}.profile-page{max-width:1180px;margin:0 auto;padding:54px 28px 80px}.public-profile-hero{display:flex;align-items:center;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}.profile-avatar-public{width:116px;height:116px;font-size:42px}.public-profile-hero h1{margin:3px 0 8px;font:48px/1.05 Georgia,serif}.profile-since{margin:0;color:var(--muted)}.public-profile-bio{max-width:720px;margin:28px 0;font:18px/1.75 Georgia,serif;white-space:pre-wrap}.profile-shelves{margin-top:44px}.profile-shelves-header{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--line)}.profile-shelves h2{margin:4px 0 0;font:32px Georgia,serif}.profile-shelves-header label{width:210px;margin:0}.profile-shelves-header select{margin-top:7px}.profile-shelf{padding:30px 0 38px;border-bottom:1px solid var(--line)}.profile-shelf>header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.profile-shelf h3{margin:4px 0 0;font:27px Georgia,serif}.profile-shelf>header>span{color:var(--muted);font-size:12px}.profile-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.profile-card-grid .deck-library-card{width:100%!important;min-width:0;max-width:none;height:170px!important;text-decoration:none}.profile-card-grid .deck-card-detail{display:block}.profile-pagination{display:flex;align-items:center;justify-content:center;gap:14px;min-height:42px;margin-top:22px}.profile-pagination span{color:var(--muted);font-size:12px}.profile-pagination button:disabled{opacity:.4;cursor:default}.profile-shelf-empty{grid-column:1/-1;min-height:190px;display:grid;place-content:center;justify-items:center;text-align:center;padding:24px;border:1px dashed var(--line)}.profile-shelf-empty>span{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--copper);border-radius:50%;color:var(--copper);font:italic 22px Georgia,serif}.profile-shelf-empty h4{margin:15px 0 6px;font:23px Georgia,serif}.profile-shelf-empty p{margin:0;color:var(--muted)}.deck-viewer-byline a{color:inherit;text-underline-offset:3px}@media(max-width:850px){.profile-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.account-profile-panel .panel-title{display:grid}.profile-picture-editor{align-items:flex-start}.profile-page{padding:32px 18px 60px}.public-profile-hero{align-items:flex-start}.profile-avatar-public{width:82px;height:82px}.public-profile-hero h1{font-size:34px}.profile-shelves-header{align-items:stretch;flex-direction:column}.profile-shelves-header label{width:100%}.profile-card-grid{grid-template-columns:1fr}.profile-card-grid .deck-library-card{height:155px!important}} .recovery-switch { margin-top: -15px; } .recovery-result a { color: var(--green2); } .recovery-result { display: grid; gap: 16px; margin-top: 28px; padding: 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); } .recovery-result p { margin: 0; color: var(--ink); line-height: 1.6; } .recovery-result .primary { display: block; padding: 12px 16px; text-align: center; text-decoration: none; } .recovery-result .recovery-missing { display: block; color: var(--muted); line-height: 1.5; } .oauth-consent{max-width:560px} .oauth-permissions{margin:22px 0;padding:18px;border:1px solid var(--line);background:var(--surface)} .oauth-permissions ul{margin:12px 0 0;padding-left:20px;color:var(--muted);line-height:1.7} .oauth-consent-scopes{margin:0;color:var(--muted);font-size:12px;line-height:1.6} .oauth-consent-scopes code{padding:2px 5px;border-radius:3px;background:var(--surface-muted);font-size:11px;word-break:break-word} .oauth-consent-actions{display:flex;gap:10px;margin-top:22px} .oauth-consent-actions button{flex:1} .commander-picker{position:relative}.commander-picker>label>small{display:block;color:var(--muted);font-weight:400;margin:3px 0 8px}.commander-selections{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}.commander-chip{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--accent-soft);color:var(--green2);font-size:10px}.commander-chip button{border:0;background:transparent;color:var(--green2);cursor:pointer;font-size:16px}.commander-results{position:absolute;left:0;right:0;z-index:200;max-height:330px;overflow-y:auto;background:var(--surface-raised);border:1px solid var(--line);box-shadow:var(--shadow)}.commander-results.hidden{display:none}.commander-results>button{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;width:100%;padding:8px;border:0;border-bottom:1px solid var(--line);background:var(--surface-raised);text-align:left;cursor:pointer}.commander-results>button:hover,.commander-results>button.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--green2)}.commander-results img{width:36px;height:50px;object-fit:cover;border-radius:3px}.commander-results strong,.commander-results small{display:block}.commander-results small{color:var(--muted);margin-top:3px}.commander-results p{padding:12px;color:var(--muted)}.commander-results p.commander-search-failure{border-left:3px solid var(--danger);background:var(--danger-soft);color:var(--ink)} .commander-zone{margin:16px 0;padding:14px;background:var(--surface);border:1px solid var(--line)}.commander-zone>div{display:flex;gap:12px;flex-wrap:wrap}.commander-zone article{display:flex;align-items:center;gap:10px;min-width:230px}.commander-zone img{width:42px;height:58px;object-fit:cover;border-radius:3px}.commander-zone strong,.commander-zone small{display:block}.commander-zone strong{font:16px Georgia,serif}.commander-zone small{max-width:260px;color:var(--muted);font-size:9px;margin-top:4px} .construction-sidebar .commander-zone{box-sizing:border-box;width:100%;margin:0;padding:14px 12px 16px;background:transparent;border:0;border-bottom:1px solid var(--line)} .construction-sidebar .commander-zone>div{display:flex;flex-direction:column;gap:14px} .construction-sidebar .commander-zone article{display:flex;min-width:0;align-items:center;gap:10px} .construction-sidebar .commander-zone img{display:block;flex:0 0 44px;width:44px;height:61px;object-fit:cover;border-radius:4px} .construction-sidebar .commander-zone article span{display:block;min-width:0;margin-top:0} .construction-sidebar .commander-zone strong{max-width:100%;font-size:14px;line-height:1.25;white-space:normal} .construction-sidebar .commander-zone small{max-width:none;line-height:1.4} .construction-sidebar .commander-zone.dual-commanders article{display:grid;height:61px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px} .construction-sidebar .commander-thumbnails{display:grid;grid-template-columns:repeat(2,38px);align-items:center;gap:4px;white-space:nowrap} .construction-sidebar .commander-zone.dual-commanders .commander-thumbnails img{flex:0 0 38px;width:38px;height:53px} .construction-sidebar .commander-names{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:7px;text-align:left} .construction-sidebar .commander-zone.dual-commanders strong{width:100%;font-size:11px;line-height:1.15;text-align:left} .sidebar-stat-card{margin:0}.sidebar-stat-card+.sidebar-stat-card{border-top:0} .sidebar-analysis-panel{margin:12px 10px 0;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--surface);box-shadow:0 2px 8px var(--backdrop)} .sidebar-analysis-panel:last-child{margin-bottom:12px}.sidebar-analysis-panel>h2{margin:0;padding:10px 12px 9px;border-bottom:1px solid var(--line);color:var(--green2);font:700 9px/1.2 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase} .sidebar-analysis-panel-body>.sidebar-stat-card{border:0;background:transparent}.sidebar-analysis-panel-body>.sidebar-stat-card+.sidebar-stat-card{border-top:1px solid var(--line)} @media(min-width:851px){ .construction-sidebar .commander-zone{padding:8px 10px 9px} .construction-sidebar .commander-zone>.eyebrow{margin-bottom:5px} .construction-sidebar .commander-zone>div{gap:7px} .construction-sidebar .commander-zone img{flex-basis:36px;width:36px;height:50px} .construction-sidebar .commander-zone strong{font-size:12px;line-height:1.15} .construction-sidebar .commander-zone.dual-commanders article{height:48px;gap:6px} .construction-sidebar .commander-thumbnails{grid-template-columns:repeat(2,30px);gap:3px} .construction-sidebar .commander-zone.dual-commanders .commander-thumbnails img{flex-basis:30px;width:30px;height:42px} .construction-sidebar .commander-zone.dual-commanders strong{font-size:9px} .sidebar-analysis-panel{margin:6px 8px 0;border-radius:5px} .sidebar-analysis-panel:last-child{margin-bottom:6px} .sidebar-analysis-panel>h2{padding:6px 9px 5px;font-size:8px} .sidebar-deck-size,.sidebar-average-mana{padding:8px 10px} .sidebar-deck-size strong,.sidebar-average-mana strong{font-size:16px} .sidebar-deck-size small{margin-top:3px;font-size:8px} .sidebar-deck-size-label,.sidebar-average-mana span{font-size:8px} .sidebar-mana-curve-card{padding:6px 9px} .sidebar-mana-curve-card>.eyebrow{margin-bottom:2px} .sidebar-mana-curve-card .mana-curve{height:66px;gap:3px} .sidebar-mana-curve-card .curve-column strong{margin-top:2px;font-size:8px} .sidebar-mana-curve-card .curve-column small{font-size:7px} .sidebar-mana-requirements,.sidebar-land-production,.sidebar-card-categories{padding:7px 9px} .sidebar-mana-requirements>.eyebrow,.sidebar-land-production>.eyebrow{margin-bottom:0;font-size:7px} .mana-requirements-bar{height:10px;margin:6px 0} .mana-requirements-labels{gap:1px} .mana-requirements-labels img{width:12px;height:12px} .mana-requirements-labels>div{gap:1px} .mana-requirements-labels strong{font-size:8px} .mana-requirements-labels small{font-size:6px} .card-category-list>div{padding:4px 0} .card-category-list span{font-size:9px} .card-category-list strong{font-size:12px} } .sidebar-deck-size{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line)} .sidebar-deck-size strong{font:18px Georgia,serif;color:var(--ink)} .sidebar-deck-size>div{min-width:0}.sidebar-deck-size-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.14em} .sidebar-deck-size-label i{display:block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 3px rgba(59,155,104,.12)} .sidebar-deck-size.illegal .sidebar-deck-size-label i{background:var(--danger);box-shadow:0 0 0 3px rgba(201,76,70,.13)} .sidebar-deck-size small{display:block;margin-top:6px;color:var(--muted);font-size:9px;line-height:1.3} .sidebar-deck-size.illegal small{color:var(--danger)} .sidebar-average-mana{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line)} .sidebar-average-mana span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.14em} .sidebar-average-mana strong{font:18px Georgia,serif;color:var(--ink)} .sidebar-deck-value>div{display:grid;text-align:right}.sidebar-deck-value small{margin-top:2px;color:var(--muted);font-size:8px} .sidebar-mana-curve-card{padding:10px 14px;background:var(--surface);border:1px solid var(--line)} .sidebar-mana-curve-card .mana-curve{height:115px;gap:4px} .sidebar-mana-curve-card .curve-column strong{font-size:9px} .sidebar-mana-curve-card .curve-column small{font-size:8px} .sidebar-mana-requirements{padding:14px;background:var(--surface);border:1px solid var(--line)} .sidebar-land-production{padding:14px;background:var(--surface);border:1px solid var(--line)} .sidebar-card-categories{padding:14px;background:var(--surface);border:1px solid var(--line)} .card-category-list{display:grid;gap:0}.card-category-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.card-category-list>div:last-child{padding-bottom:0;border-bottom:0} .card-category-list span{color:var(--muted);font-size:13px}.card-category-list strong{font:14px Georgia,serif;color:var(--ink)} .composition-group+.composition-group{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}.composition-group>.eyebrow{margin:0 0 3px}.sidebar-composition-panel .card-category-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}.sidebar-composition-panel .card-category-list>div:nth-last-child(-n+2){border-bottom:0}.composition-empty{grid-column:1/-1;margin:3px 0;color:var(--muted);font-size:8px;font-style:italic} .builder-card-toolbar{display:flex;width:min(480px,100%);align-items:stretch;gap:8px}.builder-add-card{position:relative;flex:1 1 auto;min-width:180px}.builder-search-icon{position:absolute;z-index:1;top:50%;left:12px;transform:translateY(-52%);color:var(--muted);font-size:18px;pointer-events:none}.builder-add-card>#builder-card-search{width:100%;height:38px;padding:8px 12px 8px 36px;border:1px solid var(--line-strong);background:var(--surface-raised);font:11px/20px Arial,sans-serif;outline:none}.builder-add-card>#builder-card-search:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(52,111,91,.1)}.builder-add-card-dropdown{position:absolute;z-index:220;top:calc(100% + 6px);left:0;width:100%;min-width:330px;padding:0;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 35px var(--shadow-tint)} .builder-page .construction-main{padding-top:8px}.builder-page .deck-editor-head{display:none}.construction-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:46px;margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--line)} .deck-grouping-control{display:flex;flex:0 0 auto;height:38px;align-items:stretch;margin:0}.deck-grouping-control select{width:auto;min-width:112px;height:38px;margin:0;padding:7px 28px 7px 10px;border:1px solid var(--line-strong);background-color:var(--surface-raised);font-size:13px;line-height:20px} .deck-view-control{display:flex;height:38px;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--surface-raised)}.deck-view-control button{display:flex;align-items:center;gap:5px;min-width:64px;padding:0 10px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font:700 13px/1 inherit;cursor:pointer}.deck-view-control button:last-child{border-right:0}.deck-view-control button:hover{color:var(--ink);background:var(--surface-muted)}.deck-view-control button.active{color:var(--green2);background:var(--accent-soft)}.deck-view-control button:focus-visible{outline:2px solid var(--green2);outline-offset:-2px} .builder-card-results{max-height:330px;overflow-y:auto}.builder-card-results>button{display:grid;width:100%;grid-template-columns:34px minmax(0,1fr) 26px;align-items:center;gap:9px;padding:7px;border:0;border-bottom:1px solid var(--line);background:var(--surface-raised);text-align:left;cursor:pointer}.builder-card-results>button:last-child{border-bottom:0}.builder-card-results>button:hover,.builder-card-results>button.active{background:var(--accent-soft);box-shadow:inset 3px 0 var(--green2)} .builder-card-results img,.builder-card-result-placeholder{display:block;width:32px;height:44px;object-fit:cover;border-radius:3px;background:var(--surface-muted)}.builder-card-results strong,.builder-card-results small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.builder-card-results strong{font:13px Georgia,serif}.builder-card-results small{margin-top:2px;color:var(--muted);font-size:8px}.builder-card-results b{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--green2);font-size:16px}.builder-card-results p{margin:0;padding:12px;color:var(--muted);font-size:13px;text-align:center} #builder-catalog-search{display:inline-flex;min-height:38px;align-items:center;padding:8px 13px;color:var(--green2);font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none} .mana-requirements-bar{display:flex;width:100%;height:16px;margin:12px 0;overflow:hidden;border-radius:3px;background:var(--surface-sunken)} .mana-requirement-segment{display:block;height:100%}.mana-requirement-segment.mana-w{background:var(--mana-w)}.mana-requirement-segment.mana-u{background:var(--mana-u)}.mana-requirement-segment.mana-b{background:var(--mana-b)}.mana-requirement-segment.mana-r{background:var(--mana-r)}.mana-requirement-segment.mana-g{background:var(--mana-g)}.mana-requirement-segment.mana-c{background:var(--mana-c)} .mana-requirements-empty{display:grid;width:100%;place-items:center;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em} .mana-requirements-labels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px} .mana-requirements-labels>div{display:flex;min-width:0;flex-direction:column;align-items:center;gap:3px;text-align:center}.mana-requirements-labels>div.inactive{opacity:.32}.mana-requirements-labels img{width:16px;height:16px}.mana-requirements-labels span,.mana-requirements-labels strong,.mana-requirements-labels small{display:block}.mana-requirements-labels strong{font:9px Georgia,serif}.mana-requirements-labels small{color:var(--muted);font-size:7px;line-height:1;white-space:nowrap} .builder-page .workspace-intro>div:first-child{width:100%} .workbench-heading-row{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px} .workbench-library-nav{align-self:stretch;display:flex;align-items:center;padding-right:18px;border-right:1px solid var(--line)} .workbench-library-nav>.library-toggle{display:inline-flex;min-height:34px;align-items:center;gap:6px;margin:0;padding:7px 9px;border:0;font-size:13px;white-space:nowrap} .workbench-heading-copy{display:grid;min-width:0;grid-template-areas:"title" "meta";align-items:center;row-gap:3px} .workbench-heading-copy #workbench-title{grid-area:title;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .workbench-deck-meta{grid-area:meta;display:flex;min-height:20px;align-items:center;gap:10px} .workbench-format-badge{display:inline-flex;align-items:center;padding:3px 7px;border:1px solid var(--line-strong);border-radius:999px;color:var(--warning);font-size:8px;font-weight:800;letter-spacing:.12em;line-height:1;text-transform:uppercase} .workbench-status{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:9px} .workbench-status i{width:7px;height:7px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(155,151,141,.12)} .workbench-status.ready{color:var(--positive)}.workbench-status.ready i{background:var(--positive);box-shadow:0 0 0 3px rgba(59,155,104,.12)} .workbench-status.incomplete{color:var(--warning)}.workbench-status.incomplete i{background:var(--warning);box-shadow:0 0 0 3px rgba(192,138,62,.13)} .sidebar-color-identity{padding:0;border:0} .sidebar-color-identity>div{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:5px} .sidebar-color-pip{display:block;width:32px;height:32px;border-radius:50%} .sidebar-color-pip img{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.16))} .workbench-header-actions{display:flex;align-items:center;gap:8px} .playtest-deck-button{display:inline-flex;min-height:36px;align-items:center;gap:7px;padding:8px 13px;border-color:var(--line-strong);color:var(--green2);font-size:13px;font-weight:800;white-space:nowrap}.playtest-deck-button span{font-size:9px}.playtest-deck-button:hover:not(:disabled){border-color:var(--green2);background:var(--accent-soft)}.playtest-deck-button:disabled{opacity:.4;cursor:default} .deck-more-actions{position:relative}.deck-more-button{display:grid;min-width:36px;min-height:36px;place-items:center;padding:6px 9px;font-size:14px;font-weight:800;letter-spacing:.08em} .deck-more-menu{position:absolute;z-index:230;top:calc(100% + 7px);right:0;width:170px;padding:6px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 32px var(--shadow-tint)} .deck-more-menu button{display:block;width:100%;min-height:34px;padding:8px 10px;border:0;background:transparent;color:var(--ink);font-size:13px;text-align:left;cursor:pointer} .deck-more-menu button:hover,.deck-more-menu button:focus-visible{background:var(--accent-soft);color:var(--green2)} @media(max-width:850px){.workbench-heading-row{grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px}.workbench-library-nav{grid-column:1;padding-right:10px}.workbench-heading-copy{grid-column:2}.sidebar-color-identity{display:none}.workbench-header-actions{grid-column:3;justify-self:end}.sidebar-color-pip{width:27px;height:27px}.construction-toolbar{min-height:42px}.builder-card-toolbar{width:100%}.deck-more-button{min-width:34px;min-height:34px}.workbench-status span{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}} @media(max-width:560px){.workbench-heading-row{grid-template-columns:minmax(0,1fr) auto}.workbench-library-nav{grid-column:1/-1;justify-content:flex-start;padding:0 0 5px;border-right:0;border-bottom:1px solid var(--line)}.workbench-heading-copy{grid-column:1}.workbench-header-actions{grid-column:2}.workbench-format-badge{display:none}.workbench-status span{max-width:165px}.playtest-deck-button{width:36px;padding:8px;justify-content:center;font-size:0}.playtest-deck-button span{font-size:13px}} @media(max-width:620px){.construction-toolbar{flex-wrap:wrap}.deck-grouping-control{width:100%;justify-content:flex-end}.builder-card-toolbar{width:100%}} @media(max-width:520px){.builder-card-toolbar{flex-direction:column}.builder-add-card{min-width:0}.builder-add-card-dropdown{min-width:100%}#builder-catalog-search{justify-content:center}.construction-toolbar{min-height:120px}} @media(min-width:851px){.sidebar-deck-size,.sidebar-average-mana{padding:8px 10px}.sidebar-deck-size strong,.sidebar-average-mana strong{font-size:16px}.sidebar-deck-size small{margin-top:3px;font-size:8px}.sidebar-deck-size-label,.sidebar-average-mana span{font-size:8px}.sidebar-mana-curve-card{padding:6px 9px}.sidebar-mana-curve-card>.eyebrow{margin-bottom:2px}.sidebar-mana-curve-card .mana-curve{height:66px;gap:3px}.sidebar-mana-curve-card .curve-column strong{margin-top:2px;font-size:8px}.sidebar-mana-curve-card .curve-column small{font-size:7px}.sidebar-mana-requirements,.sidebar-land-production,.sidebar-card-categories{padding:7px 9px}.sidebar-mana-requirements>.eyebrow,.sidebar-land-production>.eyebrow{margin-bottom:0;font-size:7px}.mana-requirements-bar{height:10px;margin:6px 0}.mana-requirements-labels{gap:1px}.mana-requirements-labels img{width:12px;height:12px}.mana-requirements-labels>div{gap:1px}.mana-requirements-labels strong{font-size:8px}.mana-requirements-labels small{font-size:6px}.card-category-list>div{padding:4px 0}.card-category-list span{font-size:13px}.card-category-list strong{font-size:12px}} .eyebrow{color:var(--deck-accent)!important}.mana-curve .curve-bar{background:var(--deck-accent)}.primary{background:var(--deck-accent);color:var(--on-accent)}.sidebar-color-pip{box-shadow:0 0 0 1px var(--line-strong)} main.builder-page{display:flex;width:100%;max-width:1920px;height:calc(100vh - 76px);padding:0 clamp(12px,1.8vw,34px) 10px;flex-direction:column;overflow:hidden}.builder-page .workspace-intro{flex:0 0 auto;padding:3px 0 7px}.builder-page #builder{flex:1 1 auto;min-height:0}.workbench-title-actions{display:flex;align-items:center;gap:6px;margin-top:4px}.workbench-title-actions>.library-toggle,.workbench-title-actions>#deck-settings-button{display:inline-flex;align-items:center;gap:3px;margin:0;padding:3px 7px;font-size:11px}.workbench-title-actions>#deck-settings-button:disabled{opacity:.4;cursor:default}#deck-settings-dialog textarea{width:100%;margin-top:7px;border:1px solid var(--line);background:var(--surface-raised);padding:12px;font:inherit;resize:vertical}.builder-page .deck-editor{height:100%;min-height:0;padding:0;overflow:hidden}.builder-page #deck-content{height:100%;min-height:0;overflow:hidden}.construction-layout{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%;min-height:0;overflow:hidden}.construction-sidebar{height:100%;min-width:0;background:var(--surface-muted);border-right:1px solid var(--line);overflow:hidden}.construction-main{height:100%;min-height:0;min-width:0;padding:clamp(20px,2vw,36px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}#assistant-proposals[open]{display:flex;flex-direction:column}#assistant-proposals>form{display:flex;min-height:0;flex-direction:column;overflow:hidden}#assistant-proposals>form>.panel-title{flex:0 0 auto}#proposal-list{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:8px}.assign-role-fields{display:grid;gap:10px}.assign-role-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}.assign-role-row label{margin:0}.assign-role-row>button{padding:13px 12px}.assign-role-add{width:100%;margin-top:12px}.assign-role-fields+.assign-role-add+.dialog-description{display:block;margin-top:10px;color:var(--muted);font-size:11px;line-height:1.45;text-transform:none;letter-spacing:0}@media(max-width:850px){main.builder-page{height:auto;padding:0 12px 30px;overflow:visible}.builder-page .deck-editor,.builder-page #deck-content{height:auto;min-height:0;overflow:visible}.construction-layout{grid-template-columns:1fr;height:auto;overflow:visible}.construction-sidebar{display:none}.construction-main{height:auto;padding:18px;overflow:visible}#assistant-proposals{width:calc(100vw - 20px);max-height:calc(100vh - 40px);padding:20px}} #deck-import-dialog{width:min(720px,94vw)} #deck-import-dialog .deck-import-list-field{display:flex;flex-direction:column;align-items:stretch;gap:7px} #deck-import-text{display:block;width:100%;min-height:320px;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);padding:14px;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;text-transform:none;resize:vertical} .new-deck-import-field{display:flex;flex-direction:column;align-items:stretch;gap:7px}.new-deck-import-field textarea{width:100%;min-height:130px;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);padding:12px;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;text-transform:none;resize:vertical}.new-deck-import-field small{color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none} .commander-start-mode{display:flex;gap:18px;margin:12px 0;padding:12px;border:1px solid var(--line)}.commander-start-mode.hidden{display:none}.commander-start-mode label{display:flex;align-items:center;gap:7px;margin:0}.commander-start-mode input{width:auto}.new-deck-import-field.hidden{display:none} /* The paste check's one-line verdict (decklist-check.js), under the decklist field in both new-deck dialogs. Empty until there is something to say, so it takes no height and the dialog does not jump the moment somebody starts typing. A problem is the only state that colours: an ordinary summary is information, not a warning. */ .new-deck-import-field .decklist-check:empty{display:none} .new-deck-import-field .decklist-check{color:var(--muted)} .new-deck-import-field .decklist-check.problem{color:var(--danger);font-weight:700} #deck-export-dialog{width:min(780px,95vw)} .deck-export-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin:18px 0;padding:15px;border:1px solid var(--line)} .deck-export-options legend{padding:0 7px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em} .deck-export-options label{display:flex;align-items:center;gap:8px;margin:0;text-transform:none;letter-spacing:0} .deck-export-options input{width:auto;margin:0} .deck-export-list-field{display:flex;flex-direction:column;gap:7px} #deck-export-text{display:block;width:100%;min-height:340px;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);padding:14px;font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;text-transform:none;resize:vertical} @media(max-width:600px){.deck-export-options{grid-template-columns:1fr}} .collection-page { display:flex; flex-direction:column; height:calc(100dvh - 76px); max-width:1120px; margin:0 auto; padding:16px 28px 18px; overflow:hidden; } .collection-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; } .collection-heading h1 { margin:2px 0 3px; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1; } .collection-heading>div>p:last-child, .collection-summary span, .collection-card-copy span, .collection-card-copy small { color:var(--muted); } .collection-summary { display:flex; gap:8px; } .collection-summary div { min-width:112px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); display:grid; } .collection-summary strong { font-size:1.25rem; line-height:1.1; } .collection-summary span { font-size:.78rem; } .collection-panel { display:flex; flex:1; flex-direction:column; min-height:0; padding:22px; overflow:hidden; } .collection-tools { display:grid; grid-template-columns:minmax(280px,1fr) minmax(220px,.55fr); gap:14px; margin-bottom:20px; } .collection-tools input { width:100%; } .collection-add { position:relative; } .collection-search-results { position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); box-shadow:var(--shadow); max-height:460px; overflow:auto; } .collection-printing-result { display:flex; align-items:center; gap:6px; padding:7px; } .collection-printing-result>span { display:grid; min-width:0; margin-right:auto; } .collection-printing-result small { color:var(--muted); } .collection-printing-result button { padding:7px 9px; white-space:nowrap; } .collection-list { display:grid; gap:8px; } .collection-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); } .collection-row>img, .collection-card-placeholder { width:48px; height:66px; object-fit:cover; border-radius:6px; background:var(--surface-sunken); } .collection-card-copy { display:grid; min-width:0; } .collection-card-copy span, .collection-card-copy small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .collection-card-copy .collection-deck-usage { margin-top:4px; color:var(--muted); font-size:.68rem; } .collection-card-copy .collection-deck-usage.used { color:var(--green2); font-weight:700; } .collection-quantity { display:flex; align-items:center; gap:12px; } .collection-quantity button { width:34px; height:34px; padding:0; } .collection-quantity strong { min-width:24px; text-align:center; } .collection-empty { padding:56px 20px; } @media(max-width:700px) { .collection-heading { align-items:stretch; flex-direction:column; } .collection-summary div { min-width:0; flex:1; } .collection-tools { grid-template-columns:1fr; } .collection-row { grid-template-columns:40px minmax(0,1fr) auto; } .collection-row>img, .collection-card-placeholder { width:40px; height:56px; } .collection-row>.danger { grid-column:2/-1; justify-self:start; } .collection-printing-result { align-items:flex-start; flex-wrap:wrap; } .collection-printing-result>span { flex-basis:100%; } } .collection-only-control { display:flex; align-items:center; align-self:center; gap:7px; height:42px; min-height:42px; margin:0; padding:0 10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:.78rem; white-space:nowrap; background:var(--surface); } .collection-only-control input { width:auto; margin:0; accent-color:var(--accent); } .collection-only-control:has(input:checked) { color:var(--positive); border-color:var(--positive); } .collection-ownership-control { display:flex; align-items:center; gap:7px; height:42px; margin:0; padding-left:10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:.72rem; letter-spacing:0; text-transform:none; white-space:nowrap; background:var(--surface); } .collection-ownership-control select { width:auto; min-width:118px; height:40px; margin:0; padding:7px 28px 7px 8px; border:0; background:var(--surface-raised); color:var(--ink); font-size:.75rem; } .collection-set-card .collection-set-symbol { background:var(--preview-light-paper); } .collection-set-card .collection-set-symbol>img { inset:7px; width:30px; height:30px; } .collection-page #collection-set-list, .collection-page #collection-list { flex:1; min-height:0; overflow-y:auto; padding-right:5px; align-content:start; overscroll-behavior:contain; } .collection-page .collection-heading, .collection-page .collection-tools, .collection-page .collection-set-tabs, .collection-page .collection-pagination { flex:0 0 auto; } .collection-heading .eyebrow { margin-bottom:5px!important; } .collection-heading>div>p:last-child { margin:0; font-size:.78rem; line-height:1.3; } .collection-heading #collection-back { padding:6px 10px; margin-bottom:5px; font-size:.72rem; } .collection-page .collection-tools { grid-template-columns:minmax(280px,1fr) minmax(180px,.55fr) auto; } .collection-page .collection-set-tools { grid-template-columns:auto minmax(260px,1fr) minmax(180px,.55fr) auto; } .collection-set-tools #collection-dashboard-button { height:42px; padding:0 12px; white-space:nowrap; } .collection-page .set-detail-tools { grid-template-columns:auto minmax(220px,1fr) auto auto; } .collection-page .collection-tools>input, .collection-page .collection-add>input { height:42px; } .set-detail-tools #collection-back { height:42px; margin:0; padding:0 12px; white-space:nowrap; } .collection-page-size { display:flex; align-items:center; justify-self:end; gap:9px; margin:0; color:var(--muted); white-space:nowrap; } .collection-page-size select { width:auto; min-width:76px; padding:9px 30px 9px 10px; border-color:var(--line-strong); background:var(--surface-raised); color:var(--ink); } .collection-ownership-control select option,.collection-page-size select option { background:var(--surface-raised); color:var(--ink); } .collection-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:2px 0 18px; color:var(--muted); font-size:.8rem; } .collection-pagination:last-child { margin:18px 0 0; } .collection-pagination>div { display:flex; align-items:center; gap:10px; } .collection-pagination strong { min-width:104px; color:var(--ink); text-align:center; } .collection-pagination button { padding:8px 11px; } .collection-set-tabs { display:flex; gap:6px; margin:0 0 16px; padding-bottom:10px; overflow-x:auto; border-bottom:1px solid var(--line); } .collection-set-tabs button { flex:0 0 auto; padding:9px 12px; border:1px solid transparent; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; } .collection-set-tabs button:hover { color:var(--ink); border-color:var(--line); } .collection-set-tabs button.active { background:var(--accent-soft); color:var(--green2); border-color:var(--line); } .collection-set-list .collection-set-card { grid-template-columns:52px minmax(220px,1fr) 54px 130px 18px; } .collection-set-progress { position:relative; display:grid; width:48px; height:48px; place-items:center; } .collection-set-progress svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .collection-set-progress circle { fill:none; stroke-width:5; } .collection-progress-track { stroke:var(--surface-sunken); } .collection-progress-value { stroke:var(--gold); stroke-linecap:round; } .collection-set-progress strong { font-size:.68rem; } .collection-set-owned-count { display:grid; color:var(--ink); font-size:.8rem; } .collection-set-owned-count small { margin-top:2px; color:var(--muted); font-size:.68rem; } .collection-set-card-layout { display:grid; grid-template-columns:minmax(0,1fr) 220px; flex:1; min-height:0; gap:16px; } .collection-set-index-layout { display:grid; grid-template-columns:minmax(0,1fr) 220px; flex:1; min-height:0; gap:16px; } .collection-set-summary { align-self:start; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); } .collection-summary-heading { display:flex; align-items:center; gap:10px; padding-bottom:13px; border-bottom:1px solid var(--line); } .collection-summary-heading>span:last-child { display:grid; min-width:0; } .collection-summary-heading strong { overflow:hidden; font:16px/1.2 Georgia,serif; text-overflow:ellipsis; } .collection-summary-heading small { margin-top:3px; color:var(--muted); font-size:.68rem; } .collection-category-sigil { display:grid; width:44px; height:44px; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); background:var(--preview-light-paper); font:italic 18px Georgia,serif; } .collection-summary-ring { position:relative; display:grid; width:132px; height:132px; margin:18px auto; place-items:center; } .collection-summary-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .collection-summary-ring circle { fill:none; stroke-width:8; } .collection-summary-ring>div { position:relative; z-index:1; display:grid; place-items:center; line-height:1; } .collection-summary-ring>div>strong { font:25px/1 Georgia,serif; } .collection-summary-ring>div>span { margin-top:5px; color:var(--muted); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; } .collection-set-summary dl { display:grid; gap:8px; margin:0; } .collection-set-summary dl>div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; border-top:1px solid var(--line); } .collection-set-summary dt { color:var(--muted); font-size:.7rem; } .collection-set-summary dd { margin:0; font-weight:700; font-size:.78rem; } .completion-price-disclaimer { margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:.65rem; line-height:1.4; } .collection-export-unowned { width:100%; margin-top:12px; padding:9px 10px; font-size:.72rem; } .collection-dashboard { display:flex; flex:1; min-height:0; flex-direction:column; gap:14px; overflow-y:auto; padding:2px 4px 12px 0; } .collection-dashboard-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px; background:linear-gradient(120deg,var(--surface-raised),var(--accent-soft)); } .collection-dashboard-hero h2,.collection-dashboard-section-heading h2 { margin:2px 0 5px; font:24px/1.15 Georgia,serif; } .collection-dashboard-hero p:last-child { margin:0; color:var(--muted); } .collection-dashboard-hero button { flex:0 0 auto; } .collection-dashboard-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; } .collection-transfer-dialog { width:min(760px,94vw); max-height:92vh; background:var(--surface); } .collection-transfer-dialog form { padding:24px; } .collection-transfer-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .collection-transfer-heading h2 { margin:0; } .collection-transfer-dialog form>p { color:var(--muted); font-size:.82rem; line-height:1.5; } .collection-import-file { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:1px solid var(--line); text-transform:none; letter-spacing:0; } .collection-import-file input { width:auto; margin:0; padding:6px; } #collection-import-text,#collection-export-text { display:block; width:100%; min-height:230px; margin-top:12px; padding:13px; border:1px solid var(--line); background:var(--surface-raised); color:var(--ink); font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical; } .collection-import-preview { display:grid; gap:4px; margin-top:12px; padding:12px; border-left:3px solid var(--gold); background:var(--surface-sunken); color:var(--muted); font-size:.78rem; } .collection-import-preview strong { color:var(--ink); } /* Capped in height because an unreadable export can list twenty-five rows, and the dialog's Import button has to stay reachable without scrolling the whole dialog past it. */ .collection-import-preview .import-problems { display:grid; gap:4px; max-height:180px; margin:4px 0 0; padding:0 0 0 4px; overflow-y:auto; list-style:none; } .collection-import-preview .import-problems li { line-height:1.4; } .collection-import-preview .import-problems strong { margin-right:4px; font-variant-numeric:tabular-nums; } .collection-history-panel { padding:20px; } .collection-history-panel>.collection-dashboard-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; } .collection-history-panel>.collection-dashboard-section-heading>small { color:var(--muted); } #collection-history-list { display:grid; } .collection-history-entry { display:grid; grid-template-columns:105px minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 2px; border-bottom:1px solid var(--line); } .collection-history-entry:last-child { border-bottom:0; } .collection-history-entry.undone { opacity:.58; } .collection-history-source,.collection-history-copy { display:grid; gap:5px; min-width:0; } .collection-history-source>span { width:max-content; padding:4px 7px; border-radius:99px; background:var(--surface-sunken); font-size:.65rem; font-weight:800; text-transform:uppercase; } .collection-history-source .source-import { color:var(--gold); } .collection-history-source .source-ai { color:var(--green2); } .collection-history-source time,.collection-history-copy span { color:var(--muted); font-size:.7rem; } .collection-history-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .collection-history-entry button { padding:8px 11px; white-space:nowrap; } .collection-dashboard-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .collection-dashboard-stat { display:grid; min-height:118px; padding:17px; } .collection-dashboard-stat>span,.collection-highlight-list article>span { color:var(--muted); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; } .collection-dashboard-stat>strong { margin:8px 0 5px; color:var(--gold); font:26px/1 Georgia,serif; } .collection-dashboard-stat>small,.collection-highlight-list small,.collection-dashboard-category small { color:var(--muted); font-size:.7rem; } .collection-dashboard-grid { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(380px,1.28fr); gap:14px; } .collection-dashboard-feature,.collection-dashboard-categories { padding:20px; } .collection-dashboard-section-heading { padding-bottom:14px; border-bottom:1px solid var(--line); } .collection-highlight-list { display:grid; } .collection-highlight-list article { display:grid; gap:5px; padding:17px 0; border-bottom:1px solid var(--line); } .collection-highlight-list article:last-child { border-bottom:0; } .collection-highlight-list strong,.collection-highlight-list a { color:var(--ink); font:18px/1.25 Georgia,serif; } .valuable-printing-card { display:flex; align-items:flex-start; gap:14px; margin-top:5px; } .valuable-printing-card>img,.valuable-printing-placeholder { width:112px; aspect-ratio:488/680; flex:0 0 auto; object-fit:cover; border-radius:5%; box-shadow:0 5px 14px rgba(0,0,0,.18); } .valuable-printing-card>div:last-child { display:grid; align-content:start; gap:5px; min-width:0; padding-top:3px; } .valuable-printing-placeholder { display:grid; place-items:center; padding:9px; border:1px solid var(--line); background:var(--surface-sunken); color:var(--muted); text-align:center; font:12px/1.3 Georgia,serif; } #collection-dashboard-category-list { display:grid; } .collection-dashboard-empty { display:grid; gap:5px; padding:28px 4px; color:var(--muted); text-align:center; } .collection-dashboard-empty small { font-size:.72rem; } .collection-dashboard-category { display:grid; grid-template-columns:minmax(130px,1fr) minmax(100px,1.2fr) 42px; align-items:center; gap:14px; padding:12px 4px; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); background:transparent; text-align:left; } .collection-dashboard-category:hover { color:var(--gold); background:var(--surface-sunken); } .collection-dashboard-category>span:first-child { display:grid; gap:3px; } .collection-dashboard-category>b { text-align:right; font-size:.78rem; } .collection-dashboard-progress { height:7px; border-radius:99px; background:var(--surface-sunken); overflow:hidden; } .collection-dashboard-progress i { display:block; height:100%; border-radius:inherit; background:var(--gold); } .collection-set-card-row { cursor:pointer; } .collection-set-card-row:hover { border-color:var(--gold); } .collection-set-card-row:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .collection-set-card-row .collection-finish-list { cursor:default; } @media(max-width:850px) { .collection-dashboard-stats { grid-template-columns:repeat(2,1fr); } .collection-dashboard-grid { grid-template-columns:1fr; } } @media(max-width:600px) { .collection-dashboard-hero { align-items:flex-start; flex-direction:column; } .collection-dashboard-actions { width:100%; justify-content:flex-start; } .collection-dashboard-stats { grid-template-columns:1fr; } .collection-dashboard-category { grid-template-columns:minmax(120px,1fr) 48px; } .collection-dashboard-progress { grid-column:1/-1; grid-row:2; } } @media(max-width:600px) { .collection-history-entry { grid-template-columns:84px minmax(0,1fr); } .collection-history-entry button { grid-column:2; justify-self:start; } } .lowest-completion-value { display:grid; gap:3px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); } .lowest-completion-value>span { color:var(--muted); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; } .lowest-completion-value>strong,.lowest-completion-value>a { margin-top:3px; color:var(--ink); font:14px/1.2 Georgia,serif; } .lowest-completion-value>a:hover { color:var(--green2); } .lowest-completion-value>small { color:var(--muted); font-size:.68rem; } .lowest-completion-value>dl { gap:4px; margin-top:5px; } .lowest-completion-value>dl>div { padding-top:5px; } .lowest-completion-value>dl dd { color:var(--green2); } .collection-finish>span { display:grid; } .collection-finish>span em { color:var(--muted); font-size:.72rem; font-style:normal; text-transform:capitalize; } .collection-finish>span small { color:var(--ink); font-size:.7rem; font-weight:700; } @media(max-width:850px) { .collection-set-list .collection-set-card { grid-template-columns:52px minmax(0,1fr) 52px 18px; } .collection-set-progress { grid-column:3; grid-row:1/4; } .collection-set-owned-count { grid-column:2; } .collection-set-list .collection-set-arrow { grid-column:4; grid-row:1/4; } } @media(max-width:850px) { .collection-set-card-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); } .collection-set-summary { grid-row:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px 12px; } .collection-set-card-layout #collection-list { grid-row:2; } .collection-summary-heading { border:0; padding:0; } .collection-summary-ring { display:none; } .collection-set-summary dl { grid-template-columns:repeat(3,auto); align-items:center; } .collection-set-summary dl>div { display:grid; padding:0 0 0 9px; border-top:0; border-left:1px solid var(--line); } } @media(max-width:850px) { .collection-set-index-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); } .collection-set-index-layout #collection-category-summary { grid-row:1; } .collection-set-index-layout #collection-set-list { grid-row:2; } } @media(max-width:700px) { .collection-page .collection-tools { grid-template-columns:1fr; } .collection-page .collection-set-tools { grid-template-columns:auto minmax(0,1fr); } .collection-set-tools #collection-set-filter,.collection-set-tools .collection-only-control { grid-column:1/-1; } .collection-page .set-detail-tools { grid-template-columns:auto minmax(0,1fr); } .set-detail-tools .collection-page-size,.set-detail-tools .collection-ownership-control { justify-self:start; } .collection-page-size { justify-self:start; } .collection-pagination { align-items:flex-start; flex-direction:column; } .collection-pagination>div { width:100%; justify-content:space-between; } } .collection-set-list{display:grid;gap:8px}.collection-set-card{display:grid;grid-template-columns:52px minmax(220px,1fr) 150px 100px 150px 18px;align-items:center;gap:14px;width:100%;min-height:68px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised);color:var(--ink);text-align:left;cursor:pointer}.collection-set-card:hover{border-color:var(--gold);box-shadow:var(--shadow)}.collection-set-symbol{position:relative;display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:var(--surface-sunken);overflow:hidden}.collection-set-symbol>span{color:var(--muted);font-size:.58rem;font-weight:700}.collection-set-symbol>img{position:absolute;inset:8px;width:28px;height:28px;object-fit:contain}.collection-set-name{display:grid;min-width:0}.collection-set-name strong{overflow:hidden;font:18px/1.2 Georgia,serif;text-overflow:ellipsis;white-space:nowrap}.collection-set-name small,.collection-set-release,.collection-set-cards,.collection-set-owned{color:var(--muted);font-size:.76rem}.collection-set-name small{margin-top:3px}.collection-set-arrow{color:var(--muted);font-size:1.4rem}.set-detail-tools{align-items:center}.set-detail-tools>span{justify-self:end;color:var(--muted);font-size:.8rem}.set-card-list{gap:10px}.collection-set-card-row{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(260px,auto);align-items:center;gap:16px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised)}.collection-set-card-row>img,.collection-set-card-row>.collection-card-placeholder{width:70px;height:98px;object-fit:cover}.collector-number{color:var(--muted);font:12px system-ui}.collection-finish-list{display:grid;gap:6px}.collection-finish{display:grid;grid-template-columns:minmax(58px,1fr) 30px 28px 30px;align-items:center;gap:5px}.collection-finish>span{color:var(--muted);font-size:.72rem;text-transform:capitalize}.collection-finish button{width:30px;height:30px;padding:0}.collection-finish strong{text-align:center}@media(max-width:850px){.collection-set-card{grid-template-columns:52px minmax(0,1fr) 18px}.collection-set-release,.collection-set-cards,.collection-set-owned{grid-column:2}.collection-set-release{margin-top:-8px}.collection-set-cards,.collection-set-owned{display:inline}.collection-set-arrow{grid-column:3;grid-row:1/5}}@media(max-width:700px){.collection-set-card-row{grid-template-columns:54px minmax(0,1fr)}.collection-set-card-row>img,.collection-set-card-row>.collection-card-placeholder{width:54px;height:75px}.collection-finish-list{grid-column:1/-1}.set-detail-tools>span{justify-self:start}} .detail-dialog-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 0; } .detail-dialog-head .detail-close { align-self:center; } .card-detail-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); } .card-detail-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); padding:10px 14px; } .card-detail-tabs button.active { border-bottom-color:var(--accent); color:var(--ink); } .card-printings-panel { padding:22px 28px 30px; min-height:360px; } .printings-loading { display:grid; place-items:center; min-height:280px; color:var(--muted); } .printings-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,280px) auto; align-items:end; gap:16px; margin-bottom:18px; } .printings-heading h3 { margin:3px 0 0; font:28px Georgia,serif; } .printings-heading>span, .printing-card small { color:var(--muted); } .printings-set-filter { display:grid; gap:5px; margin:0; color:var(--muted); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; } .printings-set-filter input { width:100%; margin:0; padding:9px 10px; color:var(--ink); background:var(--surface); font-size:.78rem; letter-spacing:0; text-transform:none; } .printings-filter-empty { margin:0 0 18px; padding:16px; border:1px dashed var(--line); color:var(--muted); text-align:center; } .printings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px; } .printing-card { display:grid; gap:8px; color:var(--ink); text-decoration:none; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); } .printing-card.current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .printing-card img, .printing-placeholder { width:100%; aspect-ratio:488/680; object-fit:cover; border-radius:4.5%; background:var(--surface-muted); } .printing-placeholder { display:grid; place-items:center; text-align:center; padding:10px; } .printing-card>span { display:grid; min-width:0; } .printing-card strong, .printing-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .printing-prices { display:grid; gap:3px; padding:7px; border:1px solid var(--line); background:var(--surface); } .printing-prices span { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.7rem; } .printing-prices em { color:var(--muted); font-style:normal; text-transform:capitalize; } .printing-prices strong { font-size:.72rem; } .detail-meta .detail-price { grid-column:1/-1; } .printing-actions { display:flex; align-items:center; gap:8px; } .printing-actions button { flex:1; padding:7px; } .printing-actions a { color:var(--muted); font-size:.78rem; } .printing-collection-action { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:6px; } .printing-collection-action select, .printing-collection-action button { min-width:0; padding:7px; font-size:.72rem; } .printing-scryfall-link { color:var(--muted); font-size:.78rem; text-align:center; } .detail-status-line { display:flex; align-items:center; justify-content:space-between; gap:12px; } .detail-status-line .eyebrow { margin:0; } .card-collection-status { padding:5px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.72rem; white-space:nowrap; } .card-collection-status.owned { border-color:var(--positive); color:var(--positive); background:var(--surface-muted); } .card-collection-status.loading { color:var(--faint); } .card-collection-status.unavailable { border-color:var(--warning); color:var(--warning); } .detail-collection-action { display:flex; align-items:center; gap:6px; } .detail-collection-action select { width:auto; min-width:88px; padding:10px 28px 10px 9px; } .detail-collection-action button { white-space:nowrap; } @media(max-width:650px) { .detail-actions { flex-wrap:wrap; } .detail-collection-action { width:100%; } .detail-collection-action select { flex:1; } } @media(max-width:650px) { .card-printings-panel { padding:18px; } .printings-heading { grid-template-columns:1fr auto; } .printings-set-filter { grid-column:1/-1; grid-row:2; } .printings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } .set-filter-label { display:grid; } .advanced-filters .exact-printings-control { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:10px; letter-spacing:0; text-transform:none; } .advanced-filters .exact-printings-control input { width:auto; margin:0; } .set-autocomplete { position:relative; display:block; } .set-autocomplete>input { width:100%; } .set-suggestions { position:absolute; z-index:30; top:calc(100% + 5px); left:0; right:0; display:grid; max-height:300px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); box-shadow:var(--shadow); } .set-suggestions button { display:grid; width:100%; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink); text-align:left; } .set-suggestions button:hover, .set-suggestions button:focus, .set-suggestions button.active { background:var(--surface-muted); color:var(--accent-strong); } .set-suggestions strong { font-size:.82rem; font-weight:650; } .set-suggestions small { margin-top:2px; color:var(--muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; } .set-suggestions-empty { padding:10px; color:var(--muted); font-size:.75rem; } /* The card detail dialog. * * These rules used to live in search.css, which only the three pages with a Card Search * link loaded. The dialog itself is opened from four places — the Deck Builder, Card Search, * the collection browser and the public Deck Viewer — so the viewer showed an unstyled * dialog: the grid, the image, the type rule and the Oracle text all came out as plain * stacked blocks. Moved here and added to the /styles.css bundle, so a page that can open * the dialog cannot fail to have styled it. * * The tabs, the head, the printings grid and the collection status line are in * printings.css, which was already bundled and so was already working. * * --- One size, whatever card is in it --- * * The dialog used to be `max-height` with no height, so it took the height of its contents: * a vanilla creature opened a short box and a wall of Oracle text opened a tall one, and the * close button, the tabs and the arrows all moved between the two. Stepping between cards * made that obvious — the frame jumped on every press. * * So the frame is fixed and the *contents* scroll. The head stays put, each tab panel is the * only thing that scrolls, and the image column is a fixed width with the card's own aspect * ratio reserved, so a slow or missing image does not reflow the copy beside it either. * Both dialogs share this: the shared one wraps its content in #builder-card-info-detail and * Card Search in #card-detail, so the rules address the single child rather than either id. */ .card-dialog{width:min(920px,94vw);height:min(760px,88vh);padding:0;background:var(--surface);overflow:hidden} .card-dialog::backdrop{background:var(--backdrop)} /* The dialog's single wrapper becomes the column: fixed head, scrolling panel. */ .card-dialog>div{display:flex;height:100%;min-height:0;flex-direction:column} .card-dialog .detail-dialog-head{flex:0 0 auto} .card-dialog [role="tabpanel"]{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} /* Fills the panel, so the copy column has height to push its actions to the foot of. The image column opts out of that stretch — a card image has its own proportions. */ .card-detail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;padding:28px;min-height:100%} .card-detail>*:first-child{align-self:start} .detail-image{display:block;width:100%;aspect-ratio:488/680;border-radius:4.5%;box-shadow:0 18px 35px var(--backdrop);object-fit:cover} .detail-copy{display:flex;min-width:0;flex-direction:column} .detail-close{align-self:flex-end;border:0;background:transparent;font-size:24px;cursor:pointer;color:var(--muted)} .detail-copy h2{font:34px/1.05 Georgia,serif;margin:14px 0 5px;overflow-wrap:break-word} .detail-cost{color:var(--green2);font-weight:700} .detail-type{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;margin:17px 0;font:16px Georgia,serif} .detail-oracle{white-space:pre-line;line-height:1.6;font-size:14px} .detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0;color:var(--muted);font-size:11px} /* Pinned to the bottom of the copy column rather than floating under a short Oracle text. */ .detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px} .detail-actions a{text-decoration:none} .image-placeholder{aspect-ratio:488/680;background:var(--green);color:var(--accent-soft);display:grid;place-items:center;text-align:center;padding:20px;font:24px Georgia,serif;border-radius:4.5%} /* The printings tab reserved 360px of its own, which fought the fixed frame. */ .card-dialog .card-printings-panel{min-height:0} @media(max-width:650px){ .card-dialog{width:96vw;height:92vh} .card-detail{grid-template-columns:1fr;padding:18px} .detail-image,.image-placeholder{max-width:240px;margin-inline:auto} .detail-actions{margin-top:18px} } /* Stepping between the cards of whatever list the dialog was opened from. Present only when there is somewhere to go; disabled rather than removed at the ends, so the control keeps its place and the position says why an arrow is dead. */ .detail-step{display:flex;align-items:center;gap:6px} .detail-step-button{display:grid;width:28px;height:28px;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-raised);color:var(--ink);font:18px/1 Georgia,serif;cursor:pointer} .detail-step-button:hover:not([disabled]){border-color:var(--copper);color:var(--copper)} .detail-step-button[disabled]{opacity:.35;cursor:default} .detail-step-button:focus-visible{outline:2px solid var(--green2);outline-offset:2px} .detail-step-position{color:var(--muted);font-size:11px;white-space:nowrap} @media(max-width:650px){.detail-step-position{display:none}} .deck-quantity{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--surface-muted)}.deck-quantity.held{border-color:var(--green2);background:var(--accent-soft)}.deck-quantity-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.deck-quantity.held .deck-quantity-label{color:var(--green2)}.deck-quantity-control{border-radius:4px;background:var(--surface-raised)}.deck-quantity-control button:last-child{display:block}.deck-quantity-control button:disabled{opacity:.35;cursor:default}.deck-quantity-control strong{min-width:26px;text-align:center;font:700 14px/1 inherit}.deck-quantity-static{font:700 14px/1 inherit}.deck-quantity-elsewhere{flex:1 0 100%;color:var(--muted);font-size:10px}.deck-quantity-empty{color:var(--muted);font-size:11px} /* Shared progress, empty, and failure presentation. * * One visual family for the three resting states a panel can be in. They share a sigil, * a serif heading, and a muted line of explanation, so moving between Decks, Cards, * Collection, and Community no longer means learning a new vocabulary of blank space. * * The three are deliberately distinguishable at a glance: the loading sigil breathes in * copper, the empty sigil sits still in copper, and the failure sigil is outlined in * --danger. Before this, a failed load was written into the empty-state slot, so "you * have no decks" and "we could not reach the server" looked the same. */ .state-panel { display: grid; min-height: 300px; place-content: center; justify-items: center; padding: 35px; text-align: center; color: var(--muted); } .state-panel h3 { margin: 20px 0 8px; color: var(--ink); font: 27px Georgia, serif; } .state-panel p { max-width: 460px; margin: 0; line-height: 1.7; } .state-panel button { margin-top: 22px; } .state-sigil { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid var(--copper); border-radius: 50%; color: var(--copper); font: italic 27px Georgia, serif; } .state-panel-loading .state-sigil { animation: state-pulse 1.4s ease-in-out infinite; } .state-panel-failure .state-sigil { border-color: var(--danger); color: var(--danger); font-style: normal; } @keyframes state-pulse { 50% { transform: scale(1.08); opacity: .55; } } @media (prefers-reduced-motion: reduce) { .state-panel-loading .state-sigil { animation: none; } } /* Inside a dialog, a sidebar, or a dropdown there is no room for the full panel. */ .state-panel-inline { min-height: 0; padding: 18px 12px; } .state-panel-inline .state-sigil { width: 34px; height: 34px; font-size: 17px; } .state-panel-inline h3 { margin: 12px 0 4px; font-size: 17px; } .state-panel-inline p { font-size: 13px; } .state-panel-inline button { margin-top: 12px; } /* A region being rewritten: visibly inert, so a stale value is not mistaken for current. * Generalised from the one place that had grown this behaviour by hand. */ [aria-busy="true"].is-busy { opacity: .55; pointer-events: none; } /* Background synchronisation is behind. One persistent line, not a toast per failed poll. */ .live-updates-notice { position: fixed; left: 24px; bottom: 24px; z-index: 40; padding: 11px 16px; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--ink); box-shadow: var(--shadow-soft); font: 600 12px system-ui; } /* Status surfaces that are reporting a failure rather than a state. */ .playtest-status-failed { border-left: 3px solid var(--danger); color: var(--danger); } .stream-loading.stream-failed { color: var(--danger); font-size: 22px; text-align: center; padding: 0 24px; } /* Supporting data that failed while the rest of the page works. Named and retryable, * rather than the four silent `.catch(() => {})` calls this replaces. */ .supporting-failures { display: grid; gap: 8px; margin: 16px 4vw 0; } .supporting-failure { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 11px 14px; border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--ink); font-size: 13px; } .supporting-failure button { flex: 0 0 auto; padding: 7px 12px; font-size: 12px; } /* The toast, promoted out of styles.css so both outcomes are distinguishable everywhere * rather than only in the playtester. The previous global rule painted white text on * var(--ink), which in dark mode is cream on cream. */ #toast { border: 1px solid var(--line-strong); background: var(--inverse-2); color: var(--on-inverse); box-shadow: var(--shadow); max-width: min(420px, calc(100vw - 48px)); line-height: 1.5; } #toast.error { border-left: 3px solid var(--danger); } #toast.success { border-left: 3px solid var(--on-inverse-accent); } @media (max-width: 800px) { .state-panel { min-height: 220px; padding: 24px 14px; } .state-panel h3 { font-size: 22px; } .live-updates-notice { left: 12px; right: 12px; bottom: 12px; text-align: center; } } /* Notification bell, panel, and the full history page. Every colour is a theme token: test/theme.test.js fails on a raw hex outside theme.css. */ .notification-menu{position:relative} .notification-menu>#notification-bell{position:relative;width:34px;height:34px;display:grid;place-items:center;border:0;background:none;color:var(--muted);line-height:1;cursor:pointer} /* The glyphs are filled with currentColor, so the whole hover state is one colour change. */ .notification-menu>#notification-bell svg{display:block} .notification-menu>#notification-bell:hover,.notification-menu>#notification-bell[aria-expanded=true]{color:var(--ink)} .notification-badge{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;background:var(--danger);color:var(--on-accent);border-radius:9px;font:700 9px/1 system-ui} #notification-panel{position:absolute;right:0;top:43px;z-index:100;width:min(360px,calc(100vw - 32px));background:var(--surface-raised);border:1px solid var(--line);box-shadow:var(--shadow)} #notification-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)} #notification-panel>header a{color:var(--green2);font:600 11px system-ui;text-decoration:none} #notification-list{max-height:min(420px,60vh);overflow-y:auto} .notification{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:13px 16px;border-bottom:1px solid var(--line)} .notification:last-child{border-bottom:0} /* Unread is marked by a bar rather than a background wash: these sit on a raised surface already, and a second fill flattens the panel instead of drawing the eye. */ .notification.unread{border-left:3px solid var(--green2);padding-left:13px} .notification-icon{display:block;margin-top:2px;color:var(--faint)} .notification-icon svg{display:block} /* An unread row's glyph takes the same accent as its bar, so the two read as one mark. */ .notification.unread .notification-icon{color:var(--green2)} .notification-text strong{display:block;font:600 13px system-ui;color:var(--ink)} .notification-text p{margin:5px 0 0;color:var(--muted);font:12px/1.6 system-ui} /* A moderator's words, quoted so they are visibly somebody else's rather than the product's. */ .notification-reason{margin:8px 0 0;padding:7px 10px;border-left:2px solid var(--line-strong);background:var(--surface);color:var(--ink);font:italic 12px/1.6 Georgia,serif} .notification-time{display:inline-block;margin-top:7px;color:var(--faint);font:11px system-ui} .notification-link{margin:7px 0 0 10px;color:var(--green2);font:600 11px system-ui;text-decoration:none} .notification-dismiss{border:0;background:none;color:var(--faint);font-size:16px;line-height:1;padding:0 2px;cursor:pointer} .notification-dismiss:hover{color:var(--ink)} .notification-dismiss:disabled{opacity:.5;cursor:default} .notification-empty{margin:0;padding:26px 18px;text-align:center;color:var(--muted);font:12px/1.7 system-ui} /* --- Full history page --- */ .notifications-page{max-width:760px} .notifications-page .panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .notifications-page h1{font:34px Georgia,serif;margin:0} .notifications-intro{color:var(--muted);font:14px/1.7 Georgia,serif;max-width:620px;border-top:1px solid var(--line);margin:20px 0 0;padding-top:18px} #notifications-history{margin-top:22px;border:1px solid var(--line);background:var(--surface-raised)} #notifications-history .notification{padding:16px 18px} #notifications-history .notification.unread{padding-left:15px} /* --- Stream-stopped dialog, shown over the private playtester --- */ .stream-stopped-overlay{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:var(--shadow-tint)} .stream-stopped-dialog{width:min(440px,100%);padding:26px;background:var(--surface-raised);border:1px solid var(--line);border-top:3px solid var(--danger);box-shadow:var(--shadow)} .stream-stopped-dialog h2{margin:0;font:24px Georgia,serif;color:var(--ink)} .stream-stopped-dialog p{margin:12px 0 0;color:var(--muted);font:13px/1.7 system-ui} .stream-stopped-dialog blockquote{margin:14px 0 0;padding:9px 12px;border-left:2px solid var(--line-strong);background:var(--surface);color:var(--ink);font:italic 13px/1.6 Georgia,serif} .stream-stopped-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px} /* --- Locked sign-in, and the appeal that answers it --- */ /* This card is the whole product for somebody who cannot sign in, so it carries a conversation rather than an error line. */ .lock-reason{margin:16px 0 0;padding:11px 14px;border-left:3px solid var(--danger);background:var(--danger-soft);color:var(--ink);font:italic 14px/1.7 Georgia,serif} .lock-reason-missing{margin:16px 0 0;color:var(--muted);font:italic 13px/1.7 Georgia,serif} .lock-when{margin:10px 0 0;color:var(--faint);font:11px system-ui} .appeal-status{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .appeal-status h2{margin:0;font:19px Georgia,serif;color:var(--ink)} .appeal-status h3{margin:16px 0 0;font:600 11px system-ui;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .appeal-state{margin:8px 0 0;color:var(--muted);font:12px/1.6 system-ui} .appeal-message,.appeal-response{margin:10px 0 0;padding:10px 13px;border-left:2px solid var(--line-strong);background:var(--surface);color:var(--ink);font:13px/1.7 Georgia,serif} /* The moderator's reply is the answer being waited for, so it is given the accent rather than sitting in the same grey as the reader's own words above it. */ .appeal-response{border-left-color:var(--green2)} #appeal-form{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:14px} #appeal-form label{display:block;font-size:11px;font-weight:700} #appeal-form textarea{display:block;width:100%;margin-top:7px;padding:10px;font:13px/1.6 system-ui;background:var(--surface);color:var(--ink);border:1px solid var(--line)} .appeal-wait,.appeal-sent{margin:24px 0 0;padding:12px 14px;background:var(--accent-soft);color:var(--ink);font:13px/1.7 system-ui} /* The standing notice on a hidden deck, which reuses the appeal styling above. */ .hidden-deck-notice{margin:0 0 22px;padding:18px 20px;background:var(--danger-soft);border-left:3px solid var(--danger)} .hidden-deck-notice>p{margin:6px 0 0;color:var(--ink);font:13px/1.7 system-ui} .hidden-deck-notice .lock-reason{background:var(--surface-raised)} .hidden-deck-notice h3{margin:14px 0 0;font:600 11px system-ui;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} .hidden-deck-notice #deck-appeal-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:12px} .hidden-deck-notice #deck-appeal-form label{display:block;font-size:11px;font-weight:700} .hidden-deck-notice #deck-appeal-form textarea{display:block;width:100%;margin-top:7px;padding:10px;font:13px/1.6 system-ui;background:var(--surface-raised);color:var(--ink);border:1px solid var(--line)} .hidden-deck-notice #deck-appeal-form button{justify-self:start}