/* ========================================================================== MTG COMMANDER DISCOVERY — BASE STYLES & COMPONENTS ========================================================================== Requires tokens.css loaded first, and the same Google Fonts the three sibling sites use (this file intentionally does NOT @import them — an @import blocks the render tree and throws away the preconnect win; put this in instead, exactly as the source sites do): Section map: 1. Reset & element defaults 2. Typography primitives (eyebrow, masthead, headings) 3. Focus & utility 4. Top nav (4-mode switcher) — NEW 5. Buttons 6. Inputs, search, combobox — combobox is NEW 7. Chips, segmented control, filter sidebar — segmented is NEW 8. Range slider — NEW 9. Badges / tags / pills 10. Card portrait + skeleton — NEW 11. Nav arrows / prev-next bar — NEW 12. Favorite toggle — NEW 13. Color-identity pips — NEW 14. Results grid / list 15. Login / auth form — NEW 16. Data table — NEW 17. Toast — NEW 18. Generic card / panel primitives (from source) 19. Application shell + shared commander view 20. Responsive 21. Commander view breakpoints ========================================================================== MOBILE-FIRST. The commander view (§19, §21) is the screen the owner actually uses, on an iPad and a phone. Its base rules are the phone layout; the breakpoints add to it rather than the other way round. Before changing any height in §19's `.commander-layout` block, read the layout contract at the top of it -- those numbers are what stop the Next button moving out from under the pointer on every card advance. */ /* ── 1. Reset & element defaults ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Bug A, half two: on a desktop browser with classic (space-taking) scrollbars, a page that crosses the viewport height gains a scrollbar and LOSES ~15px of width, which re-wraps everything and shifts the layout sideways -- then loses the scrollbar on the next card and shifts back. Reserving the gutter unconditionally makes the page width a constant. Ignored by overlay-scrollbar platforms (iOS/iPadOS), where it is a no-op because there was never a shift to fix. */ scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; } body { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(67, 56, 202, 0.04), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(234, 88, 12, 0.03), transparent 60%), var(--ink); color: var(--parchment); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-base); min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } /* Default link treatment. NOTE — accessibility fix vs. the source sites: the three originals default text-links to --gold-dim (4.17–4.47:1, only clears the 3:1 "large text" bar) and darken to --gold on hover. That is backwards for AA on small link text, so this file starts at the safe color (--gold, 7.4–7.9:1) and lets hover move to --gold-dim — hover is a transient reinforcement paired with an underline change, not the only cue, so the dip there is an accepted, minor trade-off. See research/04-design-system.md §5. */ a { color: var(--gold); text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast); } a:hover { color: var(--gold-dim); } a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Dotted-underline link, for inline references (rule citations, source links) — lifted directly from .modal-rule-source a / .modal-rule-list dt a */ .link-dotted { color: var(--gold); /* set explicitly, not inherited from `a`, so this also works on a plain