/* MTG Coach — the card frame. Every deck reads like a Magic card: a black-bordered frame tinted by its colour identity, a title bar with its mana symbols, an art box, a type line, a rules box, a stat box. The chassis around the cards stays neutral so the frame colours are the only colour, and they always mean something. One state grammar for every control; one scale for every number. */ @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-semi-condensed-700.woff2") format("woff2"); } :root { /* chassis: the card table and the card stock */ --ground: #eceef1; --surface: #ffffff; --surface-2: #f5f6f8; /* Row hover is a focus-blue wash, never the zebra grey, or it vanishes on striped rows. */ --row-hover: color-mix(in srgb, var(--focus) 9%, var(--surface)); --surface-3: #e5e8ec; --ink: #15171a; --ink-2: #505660; --ink-3: #676d76; --line: #d5d9df; --edge: #15171a; /* a card's black border */ --bar: #0f1012; /* the top bar, the same black */ --bar-ink: #f1f2f4; --bar-ink-2: #a9aeb6; --focus: #1f5fce; --on-focus: #ffffff; /* rarity gems: the status vocabulary */ --gem-uncommon: #7c8893; /* silver: informational, queued */ --gem-rare: #9a7414; /* gold: attention, running, uncertain */ --gem-mythic: #c23d22; /* mythic: a problem, banned, failed, danger */ --gem-mythic-wash: #fbe9e4; --gem-mythic-ink: #a8321b; /* red text on its wash, AA */ --gem-rare-wash: #f8f0d9; --gem-rare-ink: #6f520a; /* gold text on its wash, AA */ /* colour identity: frame colours, the only colours in the product */ --id-w: #e7dfc4; --id-u: #1767ad; --id-b: #3b3631; --id-r: #c93a2a; --id-g: #1e7a4b; --id-m: #c39a3f; /* gold: three or more colours */ --id-c: #a4adb4; /* silver: colourless */ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Barlow Semi Condensed", "Arial Narrow", var(--font-ui); --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* type: a tight product scale (≈1.18) */ --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-md: 0.9375rem; /* 15px body */ --t-lg: 1.0625rem; --t-xl: 1.3125rem; --t-2xl: 1.625rem; --t-3xl: 2rem; --r-card: 12px; --r-plate: 6px; --r-control: 8px; --space: 1rem; --lift: 0 1px 2px rgb(15 16 18 / 0.08), 0 10px 24px -12px rgb(15 16 18 / 0.35); --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --content: 88rem; color-scheme: light; } /* Dark: the same cards on a night table. Follows the system unless a theme was chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0d0e10; --surface: #17191c; --surface-2: #1d2024; --surface-3: #272b30; --ink: #eceef1; --ink-2: #a6acb5; --ink-3: #8d939c; --line: #2d3137; --edge: #000000; --bar: #070809; --focus: #7fb0ff; --on-focus: #0d0e10; --gem-uncommon: #9aa6b1; --gem-rare: #d8b24a; --gem-mythic: #ff7a5c; --gem-mythic-wash: #3a1c16; --gem-mythic-ink: #ff9278; --gem-rare-wash: #33290f; --gem-rare-ink: #e6c768; --id-w: #cfc6a7; --id-b: #57504a; --lift: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 28px -12px rgb(0 0 0 / 0.8); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #0d0e10; --surface: #17191c; --surface-2: #1d2024; --surface-3: #272b30; --ink: #eceef1; --ink-2: #a6acb5; --ink-3: #8d939c; --line: #2d3137; --edge: #000000; --bar: #070809; --focus: #7fb0ff; --on-focus: #0d0e10; --gem-uncommon: #9aa6b1; --gem-rare: #d8b24a; --gem-mythic: #ff7a5c; --gem-mythic-wash: #3a1c16; --gem-mythic-ink: #ff9278; --gem-rare-wash: #33290f; --gem-rare-ink: #e6c768; --id-w: #cfc6a7; --id-b: #57504a; --lift: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 28px -12px rgb(0 0 0 / 0.8); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-density="compact"] { --space: 0.75rem; --t-md: 0.875rem; } /* ---------- base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { background: var(--ground); scrollbar-color: var(--surface-3) var(--ground); scroll-padding-top: 7rem; } body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink); font: var(--t-md)/1.5 var(--font-ui); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--focus) 28%, transparent); color: var(--ink); } ::placeholder { color: var(--ink-3); opacity: 1; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: currentColor; } img { max-width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; line-height: 1.15; text-wrap: balance; } h1 { font-size: var(--t-3xl); margin: 0 0 0.25rem; } h2 { font-size: var(--t-xl); margin: 2.5rem 0 0.75rem; } h3 { font-size: var(--t-lg); margin: 1.75rem 0 0.5rem; } h4 { font-size: var(--t-md); margin: 1.25rem 0 0.5rem; } h1 .muted, h2 .muted, h3 .muted, h4 .muted { display: block; font-family: var(--font-ui); font-weight: 400; font-size: var(--t-sm); letter-spacing: 0; margin-top: 0.2rem; color: var(--ink-2); } p { margin: 0.25rem 0 0.75rem; max-width: 72ch; } .muted { color: var(--ink-2); } .help, .key { color: var(--ink-2); font-size: var(--t-sm); } small { font-size: var(--t-xs); } /* prose stays readable on a wide screen */ main :is(p, li) { max-width: 60ch; } /* a closed disclosure hides its body in every engine, even where the body sets its own display */ details:not([open]) > :not(summary) { display: none; } summary { cursor: pointer; } details:not(.menu):not(.nav-more):not(.manage) > summary { list-style: none; display: flex; align-items: baseline; gap: 0.5rem; } details:not(.menu):not(.nav-more):not(.manage) > summary::-webkit-details-marker { display: none; } details:not(.menu):not(.nav-more):not(.manage) > summary::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg) translate(-1px, -1px); transition: transform 150ms var(--ease); } details[open]:not(.menu):not(.nav-more):not(.manage) > summary::before { transform: rotate(45deg) translate(-2px, -1px); } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.25rem 0 0.5rem; } /* a page-level table of three or four columns reads badly stretched across a wide screen */ main > .scroll { max-width: 60rem; } .confirm-name { font-family: var(--font-code); font-weight: 700; background: var(--surface-2); padding: 0 0.3rem; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } code, pre, kbd { font-family: var(--font-code); font-size: 0.875em; } kbd { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink-2); line-height: 1.4; text-align: center; } pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-plate); padding: 0.75rem 1rem; margin: 0; max-width: 80ch; } details summary { cursor: pointer; } .skip { position: absolute; left: -999px; top: 0.5rem; z-index: 100; background: var(--surface); color: var(--ink); padding: 0.5rem 0.75rem; border-radius: var(--r-control); border: 2px solid var(--focus); } .skip:focus { left: 0.75rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- the top bar: a card's black border ---------- */ .topbar { position: sticky; top: 0; z-index: 40; background: var(--bar); color: var(--bar-ink); } .topbar-inner { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem; height: 3.5rem; display: flex; align-items: center; gap: 1.25rem; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--bar-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; white-space: nowrap; } .brand-mark { display: grid; grid-template-columns: repeat(5, 5px); gap: 2px; } .brand-mark span { width: 5px; height: 16px; border-radius: 2px; } .brand-mark span:nth-child(1) { background: var(--id-w); } .brand-mark span:nth-child(2) { background: var(--id-u); } .brand-mark span:nth-child(3) { background: #6b635b; } .brand-mark span:nth-child(4) { background: var(--id-r); } .brand-mark span:nth-child(5) { background: var(--id-g); } /* the bar gives way in order -- search box to its icon, then the email, then Build a deck, then two links into More -- so nothing is ever drawn over the navigation, whatever the font measures */ .site-nav { display: flex; align-items: center; gap: 0.1rem; flex: none; } .site-nav a { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.7rem; border-radius: var(--r-control); color: var(--bar-ink-2); text-decoration: none; font-weight: 500; font-size: var(--t-md); white-space: nowrap; } .site-nav a:hover { color: var(--bar-ink); background: rgb(255 255 255 / 0.07); } .site-nav a[aria-current="page"] { color: var(--bar-ink); background: rgb(255 255 255 / 0.1); } .nav-more { position: relative; } .nav-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; height: 2.25rem; padding: 0 0.7rem; border-radius: var(--r-control); color: var(--bar-ink-2); font-weight: 500; } .nav-more > summary::-webkit-details-marker { display: none; } .nav-more > summary:hover, .nav-more[open] > summary { color: var(--bar-ink); background: rgb(255 255 255 / 0.07); } .topbar-end { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .cmd-open { display: inline-flex; align-items: center; gap: 0.6rem; height: 2.25rem; flex: 0 1 14rem; min-width: 2.5rem; overflow: hidden; padding: 0 0.5rem 0 0.75rem; border-radius: var(--r-control); border: 1px solid rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.06); color: var(--bar-ink-2); font: inherit; font-size: var(--t-sm); text-decoration: none; cursor: pointer; } .cmd-open:hover { border-color: rgb(255 255 255 / 0.28); color: var(--bar-ink); } .cmd-open .cmd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-open kbd { margin-left: auto; background: transparent; border-color: rgb(255 255 255 / 0.2); color: var(--bar-ink-2); } .topbar .btn-build { background: var(--bar-ink); color: var(--bar); border-color: var(--bar-ink); } .topbar .btn-build:hover { background: #ffffff; border-color: #ffffff; } .site-auth { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--t-sm); white-space: nowrap; } .site-auth a { color: var(--bar-ink-2); text-decoration: none; padding: 0.35rem 0.55rem; border-radius: var(--r-control); } .site-auth a:hover { color: var(--bar-ink); background: rgb(255 255 255 / 0.07); } .site-auth .who { color: var(--bar-ink-2); max-width: 14rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .menu-panel a.nav-dup { display: none; } @media (max-width: 80rem) { .site-auth .who { display: none; } } @media (max-width: 68rem) { .topbar .btn-build { display: none; } } .progress { position: fixed; top: 3.5rem; left: 0; right: 0; height: 2px; z-index: 41; overflow: hidden; opacity: 0; transition: opacity 150ms var(--ease); font-size: 0; } .progress::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--focus); animation: progress 1.1s var(--ease) infinite; } body.htmx-request .progress, body.is-working .progress { opacity: 1; } @keyframes progress { from { transform: translateX(-100%); } to { transform: translateX(260%); } } /* phone: a slim bar up top, the tab bar at the bottom */ .tabbar { display: none; } .mobile-nav { display: none; } /* ---------- page frame ---------- */ main { max-width: var(--content); margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } .crumbs { max-width: var(--content); margin: 0 auto; padding: 1rem 1.5rem 0; color: var(--ink-2); font-size: var(--t-sm); } .crumbs a { color: var(--ink-2); } .crumbs + main { padding-top: 0.75rem; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 1.5rem; } .page-head p { margin: 0.35rem 0 0; color: var(--ink-2); } .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } footer { max-width: var(--content); margin: 0 auto; padding: 1.5rem 1.5rem 3rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; } .theme { display: inline-flex; align-items: center; gap: 0.5rem; } .theme .seg { margin: 0; } .theme form { display: inline; margin: 0; } /* ---------- buttons: one state grammar ---------- */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.5rem; padding: 0.4rem 1rem; border-radius: var(--r-control); border: 1px solid var(--ink); background: var(--ink); color: var(--surface); font: inherit; font-weight: 600; font-size: var(--t-md); line-height: 1.3; text-decoration: none; cursor: pointer; max-width: 100%; text-align: center; text-wrap: balance; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 80ms var(--ease); } button:hover, .btn:hover { background: color-mix(in srgb, var(--ink) 82%, var(--surface)); } button:active, .btn:active { transform: translateY(1px); } button svg, .btn svg { width: 1.05em; height: 1.05em; flex: none; } .topbar :is(button, .btn), .page-actions .btn, .seg :is(button, label) { white-space: nowrap; } button.secondary, .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); } button.secondary:hover, .btn.secondary:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); } button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--ink); } button.ghost:hover, .btn.ghost:hover { background: var(--surface-3); } /* one red in both themes: white on it passes AA, which the dark theme's lighter mythic would not */ button.danger, .btn.danger { background: #b3361d; border-color: #b3361d; color: #fff; } button.danger:hover, .btn.danger:hover { background: #962c17; border-color: #962c17; } button.small, .btn.small { min-height: 2rem; padding: 0 0.7rem; font-size: var(--t-sm); border-radius: 6px; } button[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; } form[aria-busy="true"] { cursor: progress; } form[aria-busy="true"] button:disabled { opacity: 0.55; cursor: progress; } form[aria-busy="true"] button[type="submit"]:disabled::after { content: ""; width: 0.9em; height: 0.9em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (pointer: coarse) { button.small, .btn.small { min-height: 2.75rem; min-width: 2.75rem; } } /* ---------- fields ---------- */ label { display: block; font-weight: 600; font-size: var(--t-sm); margin: 0 0 1rem; color: var(--ink); max-width: 40rem; } label small, .field small { display: block; font-weight: 400; color: var(--ink-2); margin-top: 0.3rem; } input, select, textarea { display: block; width: 100%; margin-top: 0.35rem; font: inherit; font-size: var(--t-md); color: var(--ink); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 48%, var(--line)); /* field edge ≥3:1 */ border-radius: var(--r-control); padding: 0.55rem 0.7rem; min-height: 2.5rem; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); } input[type="checkbox"], input[type="radio"] { display: inline-block; width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--ink); vertical-align: -0.15em; } textarea { font-family: var(--font-code); font-size: var(--t-sm); line-height: 1.55; min-height: 9rem; resize: vertical; } select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; } select[multiple] { background-image: none; padding-right: 0.7rem; min-height: 10rem; } .register { max-width: 48rem; } .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 0 1rem; } .choice { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; margin: 0 0 0.75rem; } .choice input { width: auto; margin: 0; } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } legend { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); padding: 0; margin: 0 0 0.75rem; } /* segmented control: radio buttons as one strip */ .seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 3px; border-radius: 10px; background: var(--surface-3); margin: 0.35rem 0 1rem; } .seg label { margin: 0; position: relative; } .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .seg span { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.1rem; padding: 0 0.85rem; border-radius: 7px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); transition: background-color 150ms var(--ease), color 150ms var(--ease); } .seg span small { display: inline; margin: 0; font-weight: 500; color: var(--ink-2); } .seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); } .seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; } .seg label:hover span { color: var(--ink); } .theme .seg button { min-height: 1.9rem; padding: 0 0.7rem; background: transparent; border: 0; color: var(--ink-2); font-size: var(--t-sm); } .theme .seg button[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); } /* chips: tags, filters, selected values */ .chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.9rem; padding: 0 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: var(--t-sm); font-weight: 500; text-decoration: none; white-space: nowrap; } a.chip:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--line)); } .chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); } .chip button { min-height: 0; padding: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: transparent; border: 0; color: inherit; font-size: 0.9rem; } .chip button:hover { background: var(--surface-3); } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } /* mana symbols */ .pips { display: inline-flex; gap: 2px; align-items: center; flex: none; } .pip { width: 1.05rem; height: 1.05rem; display: inline-block; border-radius: 50%; box-shadow: 0 1px 0 rgb(0 0 0 / 0.35); } .pip-lg { width: 1.5rem; height: 1.5rem; } /* status gems */ .gem { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; } .gem::before { content: ""; width: 0.6rem; height: 0.6rem; transform: rotate(45deg); border-radius: 1px; background: var(--gem-uncommon); flex: none; } .gem.rare::before { background: var(--gem-rare); } .gem.mythic { color: var(--gem-mythic); } .gem.mythic::before { background: var(--gem-mythic); } .gem.ink::before { background: var(--ink); } .gem.running::before { animation: gem-pulse 1.4s var(--ease) infinite; } @keyframes gem-pulse { 50% { opacity: 0.35; } } /* the magnitude ramp: every rate drawn on the same bar */ .meter { display: inline-grid; justify-items: end; gap: 0.2rem; min-width: 4.5rem; font-variant-numeric: tabular-nums; } .meter .meter-bar { width: 100%; min-width: 4.5rem; } .meter-bar { height: 0.4rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .meter-bar > span { display: block; height: 100%; background: var(--ink); border-radius: inherit; } /* ---------- the deck card ---------- */ .deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16.5rem, 100%), 1fr)); gap: 1.25rem; margin: 0 0 2rem; } .deck { --f1: var(--id-c); --f2: var(--f1); position: relative; margin: 0; border-radius: var(--r-card); background: linear-gradient(90deg, var(--f1) 50%, var(--f2) 50%); padding: 7px; border: 3px solid var(--edge); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); } .deck:hover, .deck:focus-within { transform: translateY(-3px); box-shadow: var(--lift); } .deck-link { display: grid; grid-template-rows: auto auto auto 1fr; gap: 6px; height: 100%; color: inherit; text-decoration: none; } .deck-link:focus-visible { outline: none; } .deck:has(.deck-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; } .plate { background: var(--surface); border: 1px solid color-mix(in srgb, var(--edge) 55%, transparent); border-radius: var(--r-plate); } .deck-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; } .deck-title h2, .deck-title h3 { margin: 0; font-size: 1.1rem; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deck-art { position: relative; aspect-ratio: 16 / 10.5; border-radius: 3px; overflow: hidden; background: var(--surface-3); border: 1px solid color-mix(in srgb, var(--edge) 70%, transparent); } .deck-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .deck-art .no-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font-size: var(--t-sm); background: repeating-conic-gradient(from 45deg, var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; } .deck-flags { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; flex-wrap: wrap; } .deck-flags span { background: rgb(10 11 12 / 0.78); color: #fff; font-size: var(--t-xs); font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 4px; } .deck-type { padding: 0.3rem 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; display: flex; justify-content: space-between; gap: 0.5rem; } .deck-type .owner { color: var(--ink-2); font-weight: 600; } .deck-rules { padding: 0.55rem 0.65rem 2.1rem; font-size: var(--t-sm); display: grid; align-content: start; gap: 0.3rem; position: relative; } .deck-rules p { margin: 0; overflow-wrap: anywhere; } .deck-rules { min-width: 0; } .deck-rules .gem { white-space: normal; align-items: baseline; } .deck-stat { position: absolute; right: 0.55rem; bottom: 0.45rem; padding: 0.1rem 0.55rem; border-radius: var(--r-plate); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } .deck-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .deck { display: flex; flex-direction: column; } .deck > .deck-link { flex: 1 1 auto; height: auto; } .deck-versions { margin: 6px 0 0; padding: 0.3rem 0.6rem; font-size: var(--t-sm); color: var(--ink-2); } .deck-tags span { font-size: var(--t-xs); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.5rem; } @media (prefers-reduced-motion: no-preference) { .deck-link { view-transition-name: var(--vt, none); } } /* a white or colourless frame needs its own edge against light plates */ .deck[data-identity="w"] .plate, .deck[data-identity="c"] .plate { border-color: color-mix(in srgb, var(--edge) 35%, transparent); } /* ---------- filters ---------- */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin: 0 0 1.5rem; padding: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .filters .seg { margin: 0; } .filter-top { flex: 1 1 11rem; display: flex; gap: 0.5rem; min-width: 0; } .filter-extra { display: contents; } .filters .filter-search { flex: 1 1 auto; margin: 0; max-width: none; } .filter-toggle { display: none; } .filter-toggle .count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: var(--t-xs); } .seg-label { align-self: center; padding: 0 0.35rem 0 0.45rem; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; } .seg-bracket span:not(.seg-label) { padding: 0 0.7rem; } .filter-tags { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--line); } .filter-tags .seg-label { padding-left: 0; } .filters .filter-search input { margin: 0; } .filter-pips { display: inline-flex; gap: 2px; border: 0; padding: 0; margin: 0; } .filter-pips label { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; margin: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .filter-pips label:has(input:checked) { border-color: var(--ink); } .filter-pips label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .filter-pips input:not(:checked) + img { opacity: 0.45; filter: saturate(0.4); } .filter-pips label:hover img { opacity: 1; filter: none; } .filter-sort select { margin: 0; min-width: 0; width: auto; } .filters .choice { margin: 0; } .result-count { color: var(--ink-2); font-size: var(--t-sm); margin-left: auto; } /* ---------- empty states ---------- */ .empty { border: 1px dashed color-mix(in srgb, var(--ink) 25%, var(--line)); border-radius: var(--r-card); padding: 2.5rem 1.5rem; text-align: center; background: var(--surface); } .empty h2, .empty h3 { margin: 0 0 0.4rem; } .empty p { margin: 0 auto 1.1rem; color: var(--ink-2); } .empty .page-actions { justify-content: center; } /* ---------- panels and sections ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem 1.4rem; margin: 0 0 1.25rem; } .panel > h2:first-child, .panel > h3:first-child, .panel > section > h2:first-child { margin-top: 0; } main > section, .tab-panel > section, main > .two > section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem 1.4rem 0.5rem; margin: 0 0 1.25rem; } main > section > :is(h2, h3):first-child, .tab-panel > section > :is(h2, h3):first-child, main > .two > section > :is(h2, h3):first-child, main > section > .heading:first-child h2, .tab-panel > section > .heading:first-child h2, main > .two > section > .heading:first-child h2 { margin-top: 0; } section section { background: none; border: 0; padding: 0; margin: 0; border-radius: 0; } .heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 0.75rem; } .heading h2 { margin: 0; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 0 1.75rem; align-items: start; } .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 0 2rem; align-items: start; } .chart-wrap { max-width: 36rem; min-height: 12rem; margin: 0 0 1rem; padding: 0.75rem; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-plate); } .chart { display: block; width: 100%; max-height: 14rem; } /* legacy registration block (the public contents and a few lists still use it as a row) */ .reg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0.9rem 1.1rem; margin: 0 0 0.75rem; } .reg h2 { margin: 0; font-size: var(--t-lg); } .regline { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; font-size: var(--t-sm); color: var(--ink-2); margin: 0.35rem 0 0; } /* ---------- the deck sheet ---------- */ /* the header: the deck's card frame as one compact strip -- a 56px art thumbnail, the title plate with its mana symbols, the type line, and the market value -- so the coaching below it comes first */ .sheet-head { display: grid; gap: 0.75rem; margin: 0 0 1rem; } .sheet-id { --f1: var(--id-c); --f2: var(--f1); display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px; padding: 6px; border: 3px solid var(--edge); border-radius: var(--r-card); view-transition-name: deck-card; background: linear-gradient(90deg, var(--f1) 50%, var(--f2) 50%); } .sheet-thumb { grid-row: 1 / span 2; width: 56px; min-height: 56px; border-radius: 3px; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; } .sheet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sheet-thumb .no-art { font-size: var(--t-xs); color: var(--ink-2); text-align: center; } .sheet-title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.6rem; min-width: 0; } .sheet-title h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; } .sheet-type { margin: 0; padding: 0.2rem 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0 0.6rem; min-width: 0; } .sheet-type span:last-child { color: var(--ink-2); overflow-wrap: anywhere; } .sheet-stat { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0.3rem 0.7rem; display: grid; align-content: center; justify-items: end; background: var(--surface); border-radius: var(--r-plate); font-size: var(--t-xs); color: var(--ink-2); text-align: right; } .sheet-stat strong { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); line-height: 1.1; } .sheet-summary { min-width: 0; } .other-sheets { font-size: var(--t-sm); margin: 0 0 0.5rem; } .facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--ink-2); font-size: var(--t-sm); margin: 0.5rem 0 1rem; } .facts strong { color: var(--ink); font-weight: 600; } .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; } .actions form { display: inline-flex; margin: 0; } .actions form.action { flex-direction: row; align-items: center; gap: 0.5rem; } .actions form.action small { display: none; } .actions .edit { margin: 0; } .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; } .menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 18rem; max-width: min(24rem, 90vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--lift); padding: 0.4rem; display: grid; gap: 2px; } .menu-panel a, .menu-panel button { display: flex; align-items: center; justify-content: flex-start; text-align: left; width: 100%; min-height: 2.3rem; padding: 0.3rem 0.7rem; border-radius: 6px; background: transparent; border: 0; color: var(--ink); font-weight: 500; text-decoration: none; } .menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); } .menu-panel form { margin: 0; display: block; } .menu-panel hr { margin: 0.3rem 0; } .menu-panel .danger-link, .menu-panel button.danger-link { color: var(--gem-mythic); } .menu-panel label { margin: 0.4rem 0.6rem 0.6rem; } .menu-panel .inline-form { padding: 0.25rem 0.3rem 0.5rem; display: grid; gap: 0.4rem; } .manage { margin: 0 0 1rem; } .manage > summary { display: inline-flex; list-style: none; border-color: var(--line); } .manage > summary::-webkit-details-marker { display: none; } .manage > summary::after { content: ""; width: 0.45rem; height: 0.45rem; margin-left: 0.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform 150ms var(--ease); } .manage[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); } .manage-body { margin-top: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 0.25rem 1.25rem; } .manage-body form.action { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; } .manage-body form.action button { align-self: flex-start; } .manage-body form.action small { display: block; color: var(--ink-2); font-size: var(--t-xs); } /* the on-page tabs: sticky, the rules box becoming the report */ .onpage { position: sticky; top: 3.5rem; z-index: 20; display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1.5rem 1.25rem; padding: 0.5rem 1.5rem; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); font-size: var(--t-sm); } .onpage::-webkit-scrollbar { display: none; } .onpage a { flex: none; display: inline-flex; align-items: center; height: 2rem; padding: 0 0.7rem; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; } .onpage a:hover { color: var(--ink); background: var(--surface-3); } .onpage a[aria-current="true"] { color: var(--surface); background: var(--ink); } /* the deck's own frame colour runs under its tabs, so the report stays this deck's card */ .onpage[data-identity] { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--f1) 50%, var(--f2) 50%) 1; } .onpage.areas a { font-size: var(--t-md); height: 2.5rem; padding: 0 1.1rem; } .tab-off { display: none; } .tab-panel { scroll-margin-top: 7rem; } .tab-panel :target { scroll-margin-top: 7.5rem; } /* an area: the main column and, on a wide screen, a side column */ .area-grid { display: grid; gap: 0 1.25rem; align-items: start; } @media (min-width: 70rem) { .area-grid { grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr); } } .area-main, .area-side { min-width: 0; } .area-main > section, .area-side > section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.25rem 1.4rem 0.75rem; margin: 0 0 1.25rem; } .area-main > section > :is(h2, h3):first-child, .area-side > section > :is(h2, h3):first-child { margin-top: 0; } .area-main :is(p, li), .area-side :is(p, li) { max-width: 70ch; } /* Overview: the one problem and what to do next */ .priority { border-color: color-mix(in srgb, var(--gem-rare) 45%, var(--line)) !important; background: var(--gem-rare-wash) !important; } .priority h2 { font-size: var(--t-xl); margin: 0 0 0.4rem; } .priority .next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0.4rem; } .priority .next h3 { font-size: var(--t-sm); margin: 0; color: var(--ink-2); flex-basis: 100%; } .priority .next form { margin: 0; } dl.fresh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem; margin: 0 0 0.75rem; font-size: var(--t-sm); } dl.fresh dt { color: var(--ink-2); } dl.fresh dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } /* the site's own disclosure arrow (summary::before) stays; these only get a touch-sized row */ #freshness details > summary, #evidence details > summary, .kept-shape > summary, .more-swaps > summary, .gamelog .more > summary { font-weight: 600; min-height: 2.75rem; align-items: center !important; } #evidence details.evidence { border-top: 1px solid var(--line); } #evidence details.evidence > summary .muted { margin-left: auto; font-weight: 400; font-size: var(--t-sm); text-align: right; } #evidence details.evidence[open] { padding-bottom: 0.75rem; } .alias { display: block; height: 0; } /* Improve: the swap plan reads add, cut, why, buy -- vertically on a phone, across the columns on a wide screen */ .buy-sum { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-plate); padding: 0.75rem 0.9rem; margin: 0 0 1rem; } .buy-sum p { margin: 0 0 0.35rem; } .buy-big { font-family: var(--font-display); font-size: var(--t-2xl); font-variant-numeric: tabular-nums; } ul.swaps { list-style: none; padding: 0; margin: 0 0 0.75rem; } .sw { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.25rem 0.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); max-width: none !important; } .sw > * { grid-column: 2; margin: 0; min-width: 0; overflow-wrap: anywhere; } .sw .sw-use { grid-column: 1; grid-row: 1 / span 5; } .sw .sw-use input { width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; accent-color: var(--ink); } .sw-lab { display: inline-block; min-width: 2.2rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .sw-why { font-size: var(--t-sm); color: var(--ink-2); } .sw-why:empty { display: none; } .sw-cost { font-weight: 600; font-variant-numeric: tabular-nums; } .sw-cost .own { color: var(--ink-2); font-weight: 500; } .sw-head { display: none; } @media (min-width: 70rem) { .sw { grid-template-columns: 2.25rem minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.3fr) 6rem; gap: 0.75rem; align-items: start; } .sw > *, .sw .sw-use { grid-column: auto; grid-row: auto; } .sw .sw-cost { text-align: right; } .sw .sw-lab { display: none; } .sw-head { display: grid; padding: 0.3rem 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .sw-head span:last-child { text-align: right; } } .more-swaps { margin: 0 0 0.75rem; border-bottom: 1px solid var(--line); } .kept-shape { margin: 1rem 0 0.5rem; border-top: 1px solid var(--line); } /* Practice: seat, then one click */ .gamelog { display: grid; gap: 0.75rem; margin: 0 0 1rem; } .gamelog .seats { margin: 0; padding: 0; border: 0; min-width: 0; } .gamelog .seats legend { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin: 0 0 0.35rem; padding: 0; } .gamelog .seat-row { display: grid; grid-template-columns: repeat(4, minmax(2.75rem, 1fr)); gap: 2px; padding: 3px; background: var(--surface-3); border-radius: 10px; max-width: 24rem; } .gamelog .seats label { position: relative; margin: 0; display: block; } .gamelog .seats input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; } .gamelog .seats span { display: grid; place-items: center; min-height: 2.75rem; border-radius: 7px; font-weight: 600; color: var(--ink-2); } .gamelog .seats input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(15 16 18 / 0.14); } .gamelog .seats input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; } .gamelog .results { display: grid; grid-template-columns: repeat(3, minmax(0, 8rem)); gap: 0.5rem; } .gamelog .results button { width: 100%; min-height: 2.75rem; } .tab-panel > .subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 1rem; font-size: var(--t-sm); } .tab-panel > .subnav a { color: var(--ink-2); font-weight: 600; } .tab-panel > .subnav a:hover { color: var(--ink); } /* ---------- tables ---------- */ .scroll { overflow-x: auto; margin: 0 0 1.25rem; } table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.875rem; } caption { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); color: var(--ink); padding: 0 0 0.5rem; } th, td { padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } thead th { font-weight: 600; font-size: var(--t-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, var(--line)); background: var(--surface); white-space: nowrap; } tbody tr { transition: background-color 120ms var(--ease); } tbody tr:hover { background: var(--row-hover); } tbody tr:last-child td { border-bottom: 0; } .n { text-align: right; } .kv th { font-weight: 600; width: 14rem; color: var(--ink-2); font-size: var(--t-sm); } .qty { display: inline-block; min-width: 2.2ch; text-align: right; font-weight: 700; color: var(--ink-2); white-space: nowrap; } table.list td:first-child { width: 1%; white-space: nowrap; padding-right: 0.25rem; } /* The list reads as a list: three columns at desktop so names fit on a line, the +/× quiet until the row is in hand. */ .list-section .cols { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); } .rowact { display: inline-flex; gap: 2px; margin-left: 0.35rem; vertical-align: middle; } .rowact form { display: inline-flex; margin: 0; } .rowact button { min-height: 1.6rem; min-width: 1.6rem; padding: 0; line-height: 1; border-radius: 5px; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 55%, var(--surface)); } /* ≥3:1 against the row */ .rowact button:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); } @media (pointer: coarse) { .rowact button { min-height: 2.5rem; min-width: 2.5rem; } } :where(.long tbody tr.alt) { background: var(--surface-2); } .long thead th { position: sticky; top: 3.5rem; z-index: 1; } @media (max-width: 40rem) { .long thead th { position: static; } } .mark { display: inline-flex; align-items: center; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 4px; font-size: var(--t-xs); font-weight: 700; color: var(--gem-mythic-ink); background: var(--gem-mythic-wash); letter-spacing: 0.01em; vertical-align: 0.05em; } .mark.warn { color: var(--gem-rare-ink); background: var(--gem-rare-wash); } .mark.info { color: var(--ink-2); background: none; padding: 0; font-weight: 500; } .mark.evidence { color: var(--ink-2); background: none; font-weight: 500; border: 1px solid currentColor; margin: 0 0.4rem 0 0; } s { text-decoration-color: var(--gem-mythic); text-decoration-thickness: 2px; } /* ---------- messages ---------- */ /* banners speak the gem grammar: silver informs, gold asks for a look, red is a failure */ .banner { border: 1px solid color-mix(in srgb, var(--gem-uncommon) 55%, var(--line)); border-radius: var(--r-card); background: var(--surface-2); color: var(--ink); padding: 0.8rem 1rem; margin: 0 0 1.25rem; } .banner[role="alert"] { border-color: color-mix(in srgb, var(--gem-mythic) 45%, transparent); background: var(--gem-mythic-wash); } .banner[role="note"], .banner.warn { border-color: color-mix(in srgb, var(--gem-rare) 45%, transparent); background: var(--gem-rare-wash); } .banner.info { border-color: color-mix(in srgb, var(--gem-uncommon) 55%, var(--line)); background: var(--surface-2); } ul.verdict { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; } ul.verdict li { border: 1px solid var(--line); border-radius: var(--r-plate); background: var(--surface-2); padding: 0.55rem 0.8rem; } ul.verdict li strong { margin-right: 0.3rem; } ul.verdict li.bad { border-color: color-mix(in srgb, var(--gem-mythic) 40%, transparent); background: var(--gem-mythic-wash); } ul.verdict li.warn { border-color: color-mix(in srgb, var(--gem-rare) 40%, transparent); background: var(--gem-rare-wash); } p.ok { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-plate); padding: 0.55rem 0.8rem; margin: 0 0 1rem; } /* ---------- card previews ---------- */ a.card { position: relative; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 40%, transparent); } a.card:focus-visible { border-bottom-color: currentColor; } /* max-width: none, or the global img rule shrinks the preview to the width of the card's name */ a.card img { display: none; position: absolute; left: 0; top: 1.5em; width: min(19rem, 80vw); max-width: none; height: auto; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; box-shadow: 0 10px 28px rgb(0 0 0 / 0.35); z-index: 50; pointer-events: none; } @media (hover: hover) { a.card:hover img { display: block; } } a.card:focus-visible img { display: block; } @media (min-width: 40rem) { .scroll:not(:has(table.matrix)) { overflow: visible; } } /* List tables live in narrow grid columns; keep long card names inside each column. */ @media (min-width: 40rem) { .list-section .scroll { overflow-x: auto; min-width: 0; } } .list-section .cols > .scroll { min-width: 0; overflow-x: hidden; } .list-section .cols > .scroll td { overflow-wrap: anywhere; } /* ---------- build: the guided form ---------- */ .wizard { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; } .stepper { position: sticky; top: 5rem; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .stepper li a { display: grid; grid-template-columns: 1.75rem 1fr; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--r-control); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); } .stepper li a .step-no { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-family: var(--font-display); font-size: 0.95rem; color: var(--ink-2); } .stepper li a:hover { background: var(--surface-3); color: var(--ink); } .stepper li a[aria-current="step"] { color: var(--ink); background: var(--surface); } .stepper li a[aria-current="step"] .step-no { background: var(--ink); color: var(--surface); border-color: var(--ink); } .stepper li a.done .step-no { background: var(--surface-3); color: var(--ink); } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.4rem 1.5rem; margin: 0 0 1rem; } .step > legend, .step > h2 { font-family: var(--font-display); font-size: var(--t-xl); margin: 0 0 0.25rem; float: left; width: 100%; } .step > legend + *, .step > h2 + * { clear: both; } .step-intro { color: var(--ink-2); margin: 0 0 1.25rem; } .step-nav { display: flex; gap: 0.5rem; justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); } .js-steps .step[hidden] { display: none; } .id-pick { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.35rem 0 1rem; } .id-pick label { margin: 0; position: relative; } .id-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; } .id-pick span { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 5rem; padding: 0.7rem 0.4rem 0.55rem; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); transition: border-color 150ms var(--ease), background-color 150ms var(--ease); } .id-pick input:checked + span { border-color: var(--ink); color: var(--ink); background: var(--surface-2); } .id-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; } .summary-query { font-family: var(--font-code); font-size: var(--t-sm); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-plate); padding: 0.6rem 0.8rem; overflow-wrap: anywhere; } .build-count { color: var(--ink-2); font-size: var(--t-sm); margin: 0.4rem 0 0; } .build-count:empty { display: none; } .build-count.bad { color: var(--gem-mythic-ink); font-weight: 600; } .review-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 0 0 1rem; } .review-list dt { color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; } .review-list dd { margin: 0; } /* multi-select: a native