/* 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. The type scale at the bottom of this file works the same
 * way and for the same reason: no stylesheet should contain a raw font size.
 *
 * Theme selection, in order of precedence:
 *   1. data-theme="light" or "dark" on <html>, 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, .84);
  /* The header mark stands on the bar itself (2026-10-28, at Brett's direction: the cream disc
     behind it was invisible in light and a bright sticker in dark). In dark, a hair of cream
     traces its edge so the dark green still reads; in light it needs nothing. */
  --logo-keyline: none;

  /* Ink */
  --ink: #292724;
  --muted: #6c655b;
  --faint: #887f72;
  --on-accent: #fffaf0;
  /* Text on a mana pigment, and on the danger fill. Separate from --on-accent because
   * those backgrounds are dark in one theme and light in the other, so a single
   * foreground cannot serve both. See the note above the identity overrides below. */
  --on-identity: #fffaf0;
  --on-danger: #fffaf0;

  /* Rules and edges */
  --line: #d2c4ad;
  --line-strong: #b8a98f;

  /* Forest emerald is the fixed brand accent; --deck-accent overrides it per deck. */
  --accent: #123f2d;
  --accent-strong: #103827;
  --accent-soft: #d2ddd5;

  --danger: #8b332c;
  --danger-soft: #f5e5e2;
  --positive: #174a35;
  --warning: #89502f;
  /* Deck-card status lights. Distinct from --danger and --warning, which sit a few degrees
     apart in dark mode and cannot be told apart on a 9px dot. */
  --status-illegal: #b3261e;
  --status-incomplete: #b7791f;
  --status-light-ring: #0c120fcc;
  --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;
  /* The success mark on a toast (2026-10-28): a forest green that reads on the dark toast in
     both themes, so it is set once here. */
  --on-inverse-success: #6fa58a;

  /* Earth pigments for the five colours, plus colourless and multicolour gold.
   * Deliberately desaturated: these are manuscript pigments, not spot inks. */
  --mana-w: #7f6e3e;
  --mana-u: #42627d;
  --mana-b: #4c4150;
  --mana-r: #8c3a2a;
  --mana-g: #174a35;
  --mana-c: #7c7166;
  --mana-gold: #a6552d;
  /* Rarity dots on the Collection page: fixed hues, ringed, so they read on either surface. */
  --rarity-common: #2b2b2b;
  --rarity-common-ring: #d8d4c8;
  --rarity-uncommon: #b7c6d2;
  --rarity-rare: #e2bf5f;
  --rarity-mythic: #ff7a33;
  --rarity-special: #b07ee0;

  /* Semantic aliases used by archival presentation surfaces. */
  --copper: var(--mana-gold);
  --inverse-line: var(--line-strong);
  /* The homepage folio sits on a photographic parchment surface in both themes, so
   * its foregrounds must remain stable instead of following the page theme. */
  --archive-ink: #1c1a17;
  --archive-accent: #173d2d;
  --archive-frame-stud: #c28a45;
  --archive-frame-stud-shadow: #6f4927;
  /* The folio's other stable inks (2026-10-30, moved from homepage-folio.css). */
  --archive-ink-soft: #2e2820;
  --archive-danger: #8a2a1c;
  --archive-paper: #f3ead8;
  /* Community's colour coins: richer than the --mana pigments, which read as grey and beige
   * across a whole band, and the same in both themes (moved from community-search.css). */
  --coin-w: #e9dcb4;
  --coin-u: #4a86c2;
  --coin-b: #4a3f52;
  --coin-r: #c9503f;
  --coin-g: #3f9361;
  --coin-c: #a8a297;
  /* The homepage search button's label on copper in light mode (moved from homepage.css). */
  --on-copper-light: #fff;

  /* Set per deck at runtime; gold is the multicolour convention and a safe default. */
  --deck-accent: var(--mana-gold);
  /* The label colour for whatever --deck-accent currently is. Its own token rather than
   * --on-accent: every --deck-accent value is a mana pigment, which is dark in light mode
   * and a light pastel in dark mode, while --accent is dark forest in both. One foreground
   * cannot serve both, and overriding --on-accent per identity would shadow it for
   * everything inside that container, including text sitting on --accent. */
  --on-deck-accent: var(--on-identity);

  --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, .84);
  --logo-keyline: drop-shadow(0 0 .6px rgba(248, 243, 233, .95)) drop-shadow(0 0 .6px rgba(248, 243, 233, .8));

    --ink: #eee5d4;
    --muted: #b8ad9c;
    --faint: #968b7d;
    --on-accent: #fffaf0;
    --on-identity: #1b1a18;
    --on-danger: #1b1a18;

    --line: #464843;
    --line-strong: #5b5d56;

    --accent: #275b43;
    --accent-strong: #79b395;
    --accent-soft: #25362f;

    --danger: #ce8272;
    --danger-soft: #382522;
    --positive: #79b395;
    --warning: #d18457;
    --status-illegal: #ef6a60;
    --status-incomplete: #e3b341;
    --status-light-ring: #0c120fcc;
    --warning-soft: #493428;
    --inverse: #202321;
    --inverse-2: #181a19;
    --on-inverse: #eee5d4;
    --on-inverse-muted: #a1978a;
    --on-inverse-accent: #d18457;
    --on-inverse-success: #6fa58a;

    --mana-w: #c5b795;
    --mana-u: #7892a8;
    --mana-b: #95869d;
    --mana-r: #c07961;
    --mana-g: #79b395;
    --mana-c: #9c9387;
    --mana-gold: #d18457;
    /* Rarity dots on the Collection page: fixed hues, ringed, so they read on either surface. */
    --rarity-common: #2b2b2b;
    --rarity-common-ring: #d8d4c8;
    --rarity-uncommon: #b7c6d2;
    --rarity-rare: #e2bf5f;
    --rarity-mythic: #ff7a33;
    --rarity-special: #b07ee0;

    --archive-ink: #1c1a17;
    --archive-accent: #173d2d;
    --archive-frame-stud: #c28a45;
    --archive-frame-stud-shadow: #6f4927;
    --archive-ink-soft: #2e2820;
    --archive-danger: #8a2a1c;
    --archive-paper: #f3ead8;
    --coin-w: #e9dcb4;
    --coin-u: #4a86c2;
    --coin-b: #4a3f52;
    --coin-r: #c9503f;
    --coin-g: #3f9361;
    --coin-c: #a8a297;
    --on-copper-light: #fff;

    --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, .84);
  --logo-keyline: drop-shadow(0 0 .6px rgba(248, 243, 233, .95)) drop-shadow(0 0 .6px rgba(248, 243, 233, .8));

  --ink: #eee5d4;
  --muted: #b8ad9c;
  --faint: #968b7d;
  --on-accent: #fffaf0;
  --on-identity: #1b1a18;
  --on-danger: #1b1a18;

  --line: #464843;
  --line-strong: #5b5d56;

  --accent: #275b43;
  --accent-strong: #79b395;
  --accent-soft: #25362f;

  --danger: #ce8272;
  --danger-soft: #382522;
  --positive: #79b395;
  --warning: #d18457;
  --status-illegal: #ef6a60;
  --status-incomplete: #e3b341;
  --status-light-ring: #0c120fcc;
  --warning-soft: #493428;
  --inverse: #202321;
  --inverse-2: #181a19;
  --on-inverse: #eee5d4;
  --on-inverse-muted: #a1978a;
  --on-inverse-accent: #d18457;
  --on-inverse-success: #6fa58a;

  --mana-w: #c5b795;
  --mana-u: #7892a8;
  --mana-b: #95869d;
  --mana-r: #c07961;
  --mana-g: #79b395;
  --mana-c: #9c9387;
  --mana-gold: #d18457;
  /* Rarity dots on the Collection page: fixed hues, ringed, so they read on either surface. */
  --rarity-common: #2b2b2b;
  --rarity-common-ring: #d8d4c8;
  --rarity-uncommon: #b7c6d2;
  --rarity-rare: #e2bf5f;
  --rarity-mythic: #ff7a33;
  --rarity-special: #b07ee0;

  --archive-ink: #1c1a17;
  --archive-accent: #173d2d;
  --archive-frame-stud: #c28a45;
  --archive-frame-stud-shadow: #6f4927;
  --archive-ink-soft: #2e2820;
  --archive-danger: #8a2a1c;
  --archive-paper: #f3ead8;
  --coin-w: #e9dcb4;
  --coin-u: #4a86c2;
  --coin-b: #4a3f52;
  --coin-r: #c9503f;
  --coin-g: #3f9361;
  --coin-c: #a8a297;
  --on-copper-light: #fff;

  --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: #123f2d;
  --preview-dark-paper: #1e201f;
  --preview-dark-accent: #275b43;

  /* Status seals (public/badges.js) are fixed too: they are pressed onto deck art, which is
   * dark in both themes, so a seal that flipped would lose its wax. Red wax for Trending,
   * Cartheca's green for Upcoming (chosen with the user, 2026-09-25), brass for an official
   * precon (2026-10-09). */
  --seal-precon: #8a6a1f;
  --seal-trending: #8b332c;
  --seal-upcoming: #123f2d;
  --on-seal: #fffaf0;
}

/* A deck's colour identity sets --deck-accent on a container; anything inside it that
 * uses the accent follows along. */
/* The pigment only. The label colour that goes on it is --on-deck-accent, set once beside
 * the default above, because every value here is a mana pigment and they all want the same
 * treatment.
 *
 *
 * A single cream --on-accent used to serve all seven, which worked only in light mode and
 * only just: in dark mode these pigments are *light* pastels, so cream on cream ran from
 * 3.28:1 down to 1.91:1 for W — below even the 3:1 interface floor on five of them. The
 * foreground has to flip with the theme because the background does, and --on-identity is
 * what flips.
 */
[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); }
/* Phones drop the header's blur (styles.css, for the nav drawer), so the 94% tint alone let
 * content show through while scrolling. The same tint is laid over the page colour there,
 * which keeps the look and makes it solid (2026-10-01, at the user's direction). */
@media (max-width: 800px) {
  body .topbar { background: linear-gradient(var(--topbar-bg), var(--topbar-bg)), var(--paper); }
}
/* The same where the row did not fit and became the drawer above 800px (2026-10-28). The tint is
   84% since the same day, so the workshop shows faintly through the bar where it is blurred. */
body .topbar.nav-compact { background: linear-gradient(var(--topbar-bg), var(--topbar-bg)), var(--paper); }
.topbar .brand { color: var(--ink); }
/* No disc behind it (2026-10-28): the mark itself at 44px, keylined in dark (see --logo-keyline). */
.topbar .sigil { width: 44px; height: 44px; flex-basis: 44px; filter: var(--logo-keyline); }

/* 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: var(--text-2xs); 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: var(--text-xl) 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: var(--text-s); text-transform: none; letter-spacing: 0; }
.proposal-changes input { width: auto; margin: 2px 0 0; }


/* --- The type scale ---
 *
 * Before this existed there were 541 size declarations across 49 distinct values, split
 * between two properties that never agreed: `font-size` held the small end and the `font`
 * shorthand held every heading, so the product had two vocabularies and neither had a top.
 * 121 declarations were below 11px and 9px was the single most common size in the product.
 *
 * Thirteen steps, roughly a 1.2 ratio at the reading end and opening up for display sizes.
 * Named for size rather than for use, because the same step legitimately serves a table cell
 * on one page and a caption on another; what a step must never be is "whatever looked right
 * in this file".
 *
 * In rem, so that a reader who has set a larger default font size in their browser gets one.
 * Every value lands on a whole pixel at the default 16px root, so nothing moves for a reader
 * who has not. That is the whole reason to prefer rem here: it costs nothing and it is the
 * difference between a type scale and a type scale somebody can actually read.
 */
:root {
  /* The exception, and it is deliberately the first thing here so it stays visible. 10px is
   * below the floor and is for the two surfaces where density is the information: the deck
   * builder's command zone and analysis column, and the playtest tabletop's counters. Those
   * are instrument panels, not prose. Anywhere else, --text-2xs is the smallest step. */
  --text-dense: 0.625rem;   /* 10px */

  --text-2xs: 0.6875rem;    /* 11px — the floor for everything that is not an instrument */
  --text-xs: 0.75rem;       /* 12px */
  --text-s: 0.8125rem;      /* 13px */
  --text-m: 0.875rem;       /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-l: 1.125rem;       /* 18px */
  --text-xl: 1.3125rem;     /* 21px */
  --text-2xl: 1.5625rem;    /* 25px */
  --text-3xl: 1.875rem;     /* 30px */
  --text-4xl: 2.25rem;      /* 36px */
  --text-5xl: 2.625rem;     /* 42px */
  --text-6xl: 3rem;         /* 48px */
}

*{box-sizing:border-box}
/* Room for the scrollbar always (2026-10-28, from Brett's audit of the signed-in header): most pages
   paint short and grow as their content loads, and the scrollbar arriving moved everything centred
   or right-aligned, the whole header included, 15px left on Windows. Not on the full-screen
   playtester and Streamer View, which never scroll and would keep an empty strip down the side. */
html{scrollbar-gutter:stable}
html:has(>body.playtest-body,>body.stream-body){scrollbar-gutter:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.topbar{--topbar-height:76px;height:var(--topbar-height);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:var(--text-xl)}.brand small{display:block;color:var(--muted);font:var(--text-2xs)/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;flex-wrap:nowrap;gap:2px;align-items:center}.topbar .brand{flex-shrink:0;white-space:nowrap}.topbar nav>a,.topbar .account-nav-slot>a,.nav{border:0;background:none;color:var(--muted);font:600 var(--text-xs) system-ui;text-decoration:none;padding:10px 14px;cursor:pointer;white-space:nowrap}.topbar nav>a:hover,.topbar .account-nav-slot>a:hover{color:var(--ink);background:color-mix(in srgb,var(--copper) 10%,transparent)}.topbar nav>a.active{position:relative;color:var(--copper)}.topbar nav>a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--copper)}.nav.active{color:var(--green2);background:var(--accent-soft);border-radius:99px}
/* The header's look (2026-10-28, at Brett's direction, from a mock-up on his Card Search page): the
   links in the small spaced capitals the pages already use for their labels (REFINE, CATALOG), the
   current page in copper, Connect AI as an outlined button, a divider before the account controls,
   the wordmark larger with a tagline, and a copper rule along the bottom that fades at both ends. */
.topbar{border-bottom-color:transparent;border-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--copper) 70%,transparent) 18%,color-mix(in srgb,var(--copper) 70%,transparent) 82%,transparent) 1;box-shadow:0 6px 18px -14px rgba(0,0,0,.55)}
/* Only the header's own links, the nav's and Sign in (2026-10-28): `.topbar nav a` also reached the
   links inside the account menu and the notifications panel, which have looks of their own. */
.topbar nav>a,.topbar .account-nav-slot>a{font-size:var(--text-2xs);font-weight:650;line-height:1;letter-spacing:.12em;text-transform:uppercase;padding:10px 13px;color:color-mix(in srgb,var(--ink) 64%,transparent);border-radius:6px;transition:color .15s,background-color .15s}
.topbar nav>a[href="/connect-ai.html"]{margin-left:8px;border:1px solid color-mix(in srgb,var(--copper) 55%,transparent);border-radius:99px;color:var(--copper)}
.topbar nav>a[href="/connect-ai.html"].active{background:color-mix(in srgb,var(--copper) 14%,transparent)}
.topbar nav>a[href="/connect-ai.html"].active::after{display:none}
/* content-box, so the 76px the slot reserves for the bell and puck is still all theirs. */
.topbar nav .account-nav-slot{box-sizing:content-box;margin-left:12px;padding-left:14px;border-left:1px solid var(--line)}
.topbar .brand-name{display:flex;flex-direction:column;font-size:1.4375rem;line-height:1.05}
.topbar .brand-tag{display:block;margin-top:4px;font:650 var(--text-2xs)/1.2 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
@media(max-width:520px){.topbar .brand-tag{display:none}}
@media(prefers-reduced-motion:reduce){.topbar nav>a{transition:none}}
/* The account controls in the header's palette (2026-10-28): a copper ring around the account
   button, brighter on hover, and the bell in the links' colour. Rings are box-shadows, so nothing
   moves; the placeholder wears the same ring so the swap stays still. */
.topbar #account-button,.topbar .account-button-placeholder{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px color-mix(in srgb,var(--copper) 70%,transparent);transition:box-shadow .15s}
.topbar #account-button:hover,.topbar #account-button[aria-expanded=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--copper)}
.topbar #notification-bell,.topbar .notification-button-placeholder{color:color-mix(in srgb,var(--ink) 64%,transparent)}
.topbar #notification-bell:hover,.topbar .notification-menu>#notification-bell[aria-expanded=true]{color:var(--ink)}
/* Copper focus rings for keyboard readers, shaped like what they surround. */
.topbar nav>a:focus-visible,.topbar .account-nav-slot>a:focus-visible,.topbar .brand:focus-visible,.topbar .nav-toggle:focus-visible,.topbar #notification-bell:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:6px}
.topbar nav>a[href="/connect-ai.html"]:focus-visible{border-radius:99px}
.topbar #account-button:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
/* And inside the account menu (2026-10-28, from Brett's audit of it: the browser's own ring showed). */
#account-popover a:focus-visible,#account-popover button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
/* Spoilers is only in the header while a set is in season, so while it is there a copper dot says
   so; not on the Spoilers page itself, which is where it points. */
.topbar nav>a[href="/spoilers.html"]:not(.active){position:relative}
.topbar nav>a[href="/spoilers.html"]:not(.active)::before{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 0 color-mix(in srgb,var(--copper) 60%,transparent);animation:spoiler-dot 2.4s ease-out infinite}
@keyframes spoiler-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--copper) 55%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
/* Slimmer once the page has scrolled (2026-10-28): 76px becomes 60px, the tagline goes and the
   shadow firms up. The bar's place in the page stays 76px (margin-bottom makes up the difference),
   so nothing below it moves when it shrinks — a shrinking sticky header otherwise pulls the page
   up under the reader and can toggle itself back and forth at the threshold. Set by site-nav.js. */
.topbar{transition:height .2s ease,margin-bottom .2s ease,box-shadow .2s ease}
.topbar.scrolled{--topbar-height:60px;margin-bottom:16px;box-shadow:0 8px 22px -12px rgba(0,0,0,.6)}
.topbar .brand-tag{transition:opacity .15s ease,max-height .2s ease;max-height:2em;overflow:hidden}
.topbar.scrolled .brand-tag{opacity:0;max-height:0;margin-top:0}
.topbar .sigil{transition:width .2s ease,height .2s ease,flex-basis .2s ease}
.topbar.scrolled .sigil{width:36px;height:36px;flex-basis:36px}
@media(prefers-reduced-motion:reduce){.topbar,.topbar .brand-tag,.topbar .sigil,.topbar #account-button{transition:none}.topbar nav>a[href="/spoilers.html"]::before{animation:none}}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:var(--text-base)/1.7 Georgia,serif}.eyebrow{color:var(--gold)!important;font:700 var(--text-2xs)/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:var(--text-2xs);letter-spacing:.18em;color:var(--faint)}.hero-card strong{display:block;font:var(--text-2xl) Georgia,serif;margin:40px 0 10px}.hero-card p{color:var(--surface-sunken);font-size:var(--text-s);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:var(--text-3xl) Georgia,serif;margin:0}.panel-title span{color:var(--muted);font-size:var(--text-xs)}.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)}
.search:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-strong);outline-offset:1px}.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:var(--text-xs) Georgia,serif}.card-row strong{display:block;font:var(--text-base) Georgia,serif}.card-row small{color:var(--muted);font-size:var(--text-2xs)}.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:var(--text-l)}.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:var(--text-5xl);color:var(--gold);margin-bottom:20px}.empty h3{font:var(--text-2xl) 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:var(--text-2xl) Georgia,serif}.stat span{font-size:var(--text-2xs);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:var(--text-2xs)}.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:var(--text-2xs)}.pick-card strong{font:var(--text-l)/1.15 Georgia,serif;margin-top:auto}.pick-card p{font-size:var(--text-2xs);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:var(--text-xs)}.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:var(--text-3xl) Georgia,serif;margin:0 0 24px}label{display:block;font-size:var(--text-2xs);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}.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:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.add-board button{font:inherit;font-size:var(--text-xs);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-strong);outline-offset:2px;z-index:2}
@media(max-width:620px){.add-board-label{display:none}}

/* The account controls are hydrated after the session request. Reserve their final desktop
   footprint in the server-rendered header so the primary links never move when they arrive. */
.account-nav-slot{display:flex;flex:0 0 76px;width:76px;align-items:center;justify-content:flex-end;gap:8px}
.notification-button-placeholder,.account-button-placeholder{display:block;width:34px;height:34px;flex:0 0 34px}
/* Drawn as the real bell and account button, so the swap barely shows (see site-header.js). */
.notification-button-placeholder{display:grid;place-items:center;color:var(--muted)}
.notification-button-placeholder svg{display:block}
.account-button-placeholder{border-radius:50%;background:var(--green2)}
/* The swap itself, eased (2026-10-01): the bell and the green circle are already drawn, so only what is
   new fades in, the account letter or the signed-out link. Fading the whole control would blink, since
   the placeholder under it is gone the moment it arrives. */
.account-nav-slot>.account-menu>#account-button{animation:account-letter-in .15s ease-out}
.account-nav-slot>a[href="/login.html"]{animation:account-link-in .15s ease-out}
@keyframes account-letter-in{from{color:transparent}}
@keyframes account-link-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.account-nav-slot>.account-menu>#account-button,.account-nav-slot>a[href="/login.html"]{animation:none}}
/* Served signed out (2026-10-28): there is no swap to ease, so nothing fades in. */
.account-nav-slot[data-session="out"]>a[href="/login.html"]{animation:none}

/* --- The mobile nav drawer ---------------------------------------------------------------
 *
 * This replaces `@media(max-width:800px){.topbar nav>a{display:none}}`, which hid the six
 * primary destinations on a phone and put nothing in their place. It also hid the Sign in link,
 * because account-nav.js injects that into the same nav as an `<a>` — so a signed-out reader on
 * a phone had no way into the product at all.
 *
 * The drawer *is* the existing nav, repositioned. Rendering a second copy of the links would
 * have reintroduced exactly the bug being fixed: anything injected into the nav later would
 * appear in one copy and not the other. */
.nav-toggle{display:none;width:42px;height:42px;padding:0;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .15s}
.nav-toggle:hover{background:color-mix(in srgb,var(--copper) 12%,transparent)}
/* The three bars fold into an × while the menu is open (2026-10-28). */
.nav-toggle>span,.nav-toggle>span::before,.nav-toggle>span::after{border-radius:2px;transition:transform .2s ease,background-color .2s ease,top .2s ease}
.nav-toggle[aria-expanded=true]>span{background:transparent}
.nav-toggle[aria-expanded=true]>span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true]>span::after{top:0;transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.nav-toggle,.nav-toggle>span,.nav-toggle>span::before,.nav-toggle>span::after{transition:none}}
.nav-toggle>span{position:relative;display:block;width:18px;height:2px;background:currentColor}
.nav-toggle>span::before,.nav-toggle>span::after{position:absolute;left:0;display:block;width:18px;height:2px;background:currentColor;content:""}
.nav-toggle>span::before{top:-6px}
.nav-toggle>span::after{top:6px}
.nav-scrim{display:none}

@media(max-width:800px){
  .nav-toggle{display:grid}
  /* The account area is the drawer's last row (2026-10-28): Sign in as a full-width button, or
     the account button and the bell side by side, under a divider. */
  .topbar nav .account-nav-slot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:auto;flex:0 0 auto;margin:18px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--line)}
  .topbar nav .account-nav-slot>a[href="/login.html"]{flex:1;margin:0;padding:13px;border:0;border-radius:99px;text-align:center;background:var(--copper);color:var(--paper)}
  .topbar nav .account-nav-slot>a[href="/login.html"]:hover{background:color-mix(in srgb,var(--copper) 88%,var(--ink));color:var(--paper)}
  /* `backdrop-filter` on .topbar establishes a containing block for fixed descendants, which
     would position the drawer against the 76px bar instead of the viewport. The blur is a
     nicety; a reachable menu is not, so it is dropped at this width rather than worked around
     with absolute positioning and viewport arithmetic. */
  .topbar{backdrop-filter:none}
  .nav-scrim{position:fixed;inset:var(--topbar-height) 0 0 0;z-index:11;display:block;background:var(--backdrop)}
  .nav-scrim[hidden]{display:none}
  .topbar nav{position:fixed;top:var(--topbar-height);right:0;z-index:12;width:min(300px,86vw);max-height:calc(100dvh - var(--topbar-height));padding:8px 18px 18px;border-bottom:1px solid var(--line);border-bottom-left-radius:10px;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;border-left:1px solid var(--line);background:var(--surface-raised);box-shadow:var(--shadow);visibility:hidden;transform:translateX(100%);transition:transform .22s ease,visibility 0s linear .22s}
  .topbar.nav-open nav{visibility:visible;transform:none;transition-delay:0s}
  /* Rows (2026-10-28): the bar's small capitals at 12px rather than 15px, which shouted, and square
     corners, so the dividers run straight instead of curving up into the bar's rounded hover box. */
  .topbar nav>a{padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 78%,transparent)}
  .topbar nav>a:hover{background:none;color:var(--copper)}
  /* The active marker is an underline in the bar and a left edge in the column, because an
     underline on a full-width row reads as a divider rather than as "you are here". */
  .topbar nav>a.active{box-shadow:none;padding-left:14px}
  .topbar nav>a.active::after{display:none}
  .topbar nav>a.active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--copper)}
  /* Connect AI stays a button: full width, below the links. */
  .topbar nav>a[href="/connect-ai.html"]{margin:18px 0 0;padding:13px;border:1px solid color-mix(in srgb,var(--copper) 60%,transparent);border-radius:99px;text-align:center;color:var(--copper)}
  .topbar nav>a[href="/connect-ai.html"].active{padding-left:13px}
  .topbar nav>a[href="/connect-ai.html"].active::before{display:none}
  /* The account popover floats beside the puck in the bar; inside a 252px column it would hang
     off the edge, so in the drawer it becomes an ordinary block that pushes the column taller.
     Still toggled by .hidden, which is untouched. */
  /* The account button left, the bell right, and the account menu, once opened, across the full
     width beneath both: the menu's wrapper steps aside so its button and panel are items of the row. */
  .topbar nav .account-menu{display:contents}
  .topbar nav .account-menu>#account-button{order:-1;margin:0}
  .topbar nav .account-nav-slot>.notification-menu{margin-left:auto}
  .topbar nav .account-menu>div{order:1;flex:1 1 100%;position:static;width:100%;margin-top:4px;padding:12px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
  /* The account button is right above it here, so the menu's own copy of the picture steps aside. */
  .topbar nav .account-identity-puck{display:none}
  .topbar nav .account-identity{padding:2px 12px 12px}
  body.nav-locked{overflow:hidden}
}
/* The same drawer above 800px when the row does not fit on one line (2026-10-28, at Brett's
   direction: wrapped link text looked unprofessional). site-nav.js measures the row and sets
   .nav-compact. A copy of the block above, scoped to the class, because a media query and a class
   cannot share one rule; test/site-nav.test.js keeps the two the same. */
  .topbar.nav-compact .nav-toggle{display:grid}
  .topbar.nav-compact nav .account-nav-slot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:auto;flex:0 0 auto;margin:18px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--line)}
  .topbar.nav-compact nav .account-nav-slot>a[href="/login.html"]{flex:1;margin:0;padding:13px;border:0;border-radius:99px;text-align:center;background:var(--copper);color:var(--paper)}
  .topbar.nav-compact nav .account-nav-slot>a[href="/login.html"]:hover{background:color-mix(in srgb,var(--copper) 88%,var(--ink));color:var(--paper)}
  .topbar.nav-compact{backdrop-filter:none}
  .topbar.nav-compact .nav-scrim{position:fixed;inset:var(--topbar-height) 0 0 0;z-index:11;display:block;background:var(--backdrop)}
  .topbar.nav-compact .nav-scrim[hidden]{display:none}
  .topbar.nav-compact nav{position:fixed;top:var(--topbar-height);right:0;z-index:12;width:min(300px,86vw);max-height:calc(100dvh - var(--topbar-height));padding:8px 18px 18px;border-bottom:1px solid var(--line);border-bottom-left-radius:10px;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;border-left:1px solid var(--line);background:var(--surface-raised);box-shadow:var(--shadow);visibility:hidden;transform:translateX(100%);transition:transform .22s ease,visibility 0s linear .22s}
  .topbar.nav-compact.nav-open nav{visibility:visible;transform:none;transition-delay:0s}
  .topbar.nav-compact nav>a{padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 78%,transparent)}
  .topbar.nav-compact nav>a:hover{background:none;color:var(--copper)}
  .topbar.nav-compact nav>a.active{box-shadow:none;padding-left:14px}
  .topbar.nav-compact nav>a.active::after{display:none}
  .topbar.nav-compact nav>a.active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--copper)}
  .topbar.nav-compact nav>a[href="/connect-ai.html"]{margin:18px 0 0;padding:13px;border:1px solid color-mix(in srgb,var(--copper) 60%,transparent);border-radius:99px;text-align:center;color:var(--copper)}
  .topbar.nav-compact nav>a[href="/connect-ai.html"].active{padding-left:13px}
  .topbar.nav-compact nav>a[href="/connect-ai.html"].active::before{display:none}
  .topbar.nav-compact nav .account-menu{display:contents}
  .topbar.nav-compact nav .account-menu>#account-button{order:-1;margin:0}
  .topbar.nav-compact nav .account-nav-slot>.notification-menu{margin-left:auto}
  .topbar.nav-compact nav .account-menu>div{order:1;flex:1 1 100%;position:static;width:100%;margin-top:4px;padding:12px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
  .topbar.nav-compact nav .account-identity-puck{display:none}
  .topbar.nav-compact nav .account-identity{padding:2px 12px 12px}
  body.nav-locked{overflow:hidden}
@media(prefers-reduced-motion:reduce){.topbar nav{transition:none}}

/* Shared workshop atmosphere for the site's standard pages. The homepage composes the same
 * scene directly into its split hero, while playtest, stream, and authentication screens keep
 * their purpose-built full-screen surfaces. */
body:not(.home-page):not(.playtest-body):not(.stream-body):not(.auth-page){
  min-height:100vh;
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--paper) 90%,transparent),color-mix(in srgb,var(--paper) 74%,transparent) 56%,color-mix(in srgb,var(--paper) 66%,transparent)),
    linear-gradient(0deg,color-mix(in srgb,var(--paper) 88%,transparent),transparent 32%,transparent 70%,color-mix(in srgb,var(--paper) 82%,transparent)),
    url('/brand/home-workshop-background-v5.png');
  background-position:center,right center,right center;
  background-size:cover,cover,cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:850px){
  body:not(.home-page):not(.playtest-body):not(.stream-body):not(.auth-page){
    background-position:center,center,62% center;
    background-attachment:scroll;
  }
}

/* The ™ on the Cartheca wordmark and on the name's first mention in a page. Small and raised,
   in the text's own colour and face, so it claims the name without competing with it. The zero
   line height stops it pushing a heading's line apart. See `wordmark` in src/pages/site-header.js
   for where it goes and where it deliberately does not. */
.tm{margin-left:.05em;font-size:.5em;font-weight:inherit;letter-spacing:0;line-height:0;vertical-align:super}

/* Reject all in the assistant review: a decline, so it reads as one, without competing with
   Approve for the primary slot. */
.review-dialog .dialog-actions .danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.review-dialog .dialog-actions .danger:hover:not(:disabled){background:var(--danger-soft)}

/* The hover preview of a card while searching and building (card-hover-preview.js). Sized like
   the playtester's own preview, never taller than most of the window, and never in the way of
   the pointer. */
.card-zoom-preview{position:fixed;z-index:2147483646;width:min(340px,calc(100vw - 16px),calc(70vh - 12px));aspect-ratio:488/680;pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55))}.card-zoom-preview.hidden{display:none}.card-zoom-preview img{display:block;width:100%;height:auto;border-radius:4.75%/3.5%}
.card-preview-toggle{display:inline-flex;align-items:center;gap:7px;margin:0;color:var(--muted);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}.card-preview-toggle input{width:auto;margin:0;padding:0;accent-color:var(--green2)}
@media (hover:none){.card-preview-toggle{display:none}}
/* The update popup (public/update-notice.js; layout 2026-10-23). The days scroll between a fixed
   header and footer; one body size throughout, with the update titles as the only step up. */
.update-notice{width:min(600px,calc(100vw - 24px));max-height:85dvh;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.update-notice[open]{display:flex;flex-direction:column}
.update-notice::backdrop{background:rgba(12,18,15,.6)}
.update-notice-header{padding:22px 24px 14px;border-bottom:1px solid var(--line)}
.update-notice-header .eyebrow{margin:0 0 6px}
.update-notice h2{margin:0;font:var(--text-3xl)/1.15 Georgia,serif}
.update-notice-header>p:last-child{margin:6px 0 0;color:var(--muted);font-size:var(--text-s)}
.update-notice-days{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 24px}
.update-notice details{padding:12px 0;border-top:1px solid var(--line)}
.update-notice details:first-child{border-top:0}
.update-notice summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:var(--text-s);font-weight:700;border-radius:6px}
.update-notice summary::-webkit-details-marker{display:none}
.update-notice summary::before{content:"";width:7px;height:7px;flex:none;margin:0 2px 0 1px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s ease}
.update-notice details[open]>summary::before{transform:rotate(45deg) translate(-2px,-1px)}
.update-notice summary:focus{outline:none}
.update-notice summary:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.update-notice-latest{padding:1px 8px;border-radius:99px;background:var(--accent-soft);color:var(--green2);font:700 var(--text-2xs)/1.6 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.update-notice-count{margin-left:auto;color:var(--muted);font-size:var(--text-xs);font-weight:400}
.update-notice section{padding:12px 0 2px}
.update-notice section+section{margin-top:6px;border-top:1px dashed var(--line)}
.update-notice h3{margin:0 0 6px;font:var(--text-l)/1.3 Georgia,serif}
.update-notice ul{margin:0;padding-left:20px}
.update-notice li{margin:0 0 6px;font-size:var(--text-s);line-height:1.5;overflow-wrap:anywhere}
.update-notice li::marker{color:var(--muted)}
.update-notice-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 24px;border-top:1px solid var(--line)}
.update-notice-footer .auth-error{flex-basis:100%;margin:0;text-align:right}
/* A deck stepper's number, clickable to type a quantity (quantity-entry.js, 2026-10-23). */
.quantity-control .quantity-number{width:auto;min-width:26px;height:28px;padding:0 4px;border:0;border-radius:3px;background:transparent;color:inherit;font-family:inherit;font-weight:700;font-size:inherit;text-align:center;cursor:text}
.quantity-control .quantity-number:hover{background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--line-strong)}
.quantity-control .quantity-number:focus-visible{outline:2px solid var(--accent-strong);outline-offset:1px}
.deck-quantity-control .quantity-number{min-width:30px;font-size:var(--text-m)}
.quantity-number-input{width:52px;height:28px;padding:0 4px;border:1px solid var(--accent);border-radius:3px;background:var(--surface-raised);color:var(--ink);font-family:inherit;font-weight:700;font-size:inherit;text-align:center;-moz-appearance:textfield}
.quantity-number-input::-webkit-inner-spin-button,.quantity-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Reduced motion, site-wide (motion audit, 2026-10-29). Individual rules above already switch off
   their own animations; this catches every one that does not, on every page including the
   playtester. Durations shrink to almost nothing rather than to none, so code that waits for an
   animation or transition to end still hears that it ended. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}

/* Form fields at 16px on touch screens (on-screen keyboard audit, 2026-10-29). iPhones zoom the
   whole page in when a field under 16px is tapped, and leave it zoomed. Desktop keeps the
   smaller sizes set above. */
@media(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px!important}}

/* Touch targets at least 24px tall on touch screens (touch audit, 2026-10-29). Measured at phone
   width, these were the ones under 24px and too close to their neighbours: Clear all filters
   (Card Search, Community), the card-size sliders, and the playtester's New turn, Impulse and
   Playable Exile. Desktop keeps the tighter sizes; !important because playtest.css loads later. */
@media(pointer:coarse){.filter-clear,.new-turn-action,.hand-zone-toggles button,input[type=range]{min-height:24px!important}}
/* The paper deck mark (paper-mark.js, 2026-11-09): a card symbol, the size and colour of its text. */
.paper-mark{display:inline-flex;align-items:center;justify-content:center;line-height:1}.paper-mark.hidden{display:none}.paper-mark svg{display:block}

.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:var(--text-6xl) 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:var(--text-l)/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:var(--text-2xs);letter-spacing:.18em;color:var(--faint)}.vault-visual strong{display:block;font:var(--text-6xl) 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:var(--text-2xs)}.feature-grid h2{font:var(--text-3xl) 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:var(--text-xs)}.assistant-band{text-align:center;padding:110px 20px 60px}.assistant-band h2{font:var(--text-6xl)/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. */
/* The footer in the header's look (2026-10-28, at Brett's direction, from a mock-up on his About
   page): the same copper rule fading at both ends along its top edge, gold spaced-capital headings,
   copper hovers and switch in place of green. */
.site-footer{margin-top:70px;padding:52px 4vw 30px;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--copper) 70%,transparent) 18%,color-mix(in srgb,var(--copper) 70%,transparent) 82%,transparent) 1;box-shadow:0 -10px 24px -18px rgba(0,0,0,.55);background:var(--surface);color:var(--muted);font-size:var(--text-s)}.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:1.1875rem Georgia,serif;font-weight:500}.footer-brand p{max-width:44ch;margin:9px 0 0;line-height:1.65;text-wrap:pretty}.footer-column h2{margin:0 0 14px;color:var(--gold);font:650 var(--text-2xs)/1.2 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}.footer-column ul{margin:0;padding:0;list-style:none}.footer-column li+li{margin-top:11px}.site-footer a{color:var(--green2)}.footer-column a{color:var(--muted);text-decoration:none;line-height:1.5;transition:color .15s}.footer-column a:hover,.footer-column a:focus-visible{color:var(--copper)}
@media(prefers-reduced-motion:reduce){.footer-column a{transition:none}}.footer-notice{max-width:1400px;margin:34px auto 0;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:var(--text-xs);line-height:1.6}
.footer-notice a{color:inherit;text-decoration-color:color-mix(in srgb,var(--copper) 60%,transparent);text-underline-offset:3px}
.footer-notice a:hover{color:var(--copper)}.footer-version{max-width:1400px;margin:14px auto 0;font-size:var(--text-2xs);line-height:1.6;color:var(--muted)}.footer-version code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--text-2xs)}
/* The footer's light/dark switch (2026-10-28): the version on the left, the switch on the right. */
.footer-meta{max-width:1400px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.footer-meta .footer-version{margin:0}
.footer-theme-toggle:not([hidden]){display:inline-flex;align-items:center;gap:9px;margin-left:auto;min-height:32px;padding:4px 2px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--text-2xs);cursor:pointer}
.footer-theme-toggle:hover{color:var(--ink)}
/* Copper focus rings in the footer, as in the header (2026-10-28, from Brett's audit of the footer:
   the browser's own white ring showed instead). */
.site-footer a:focus-visible,.footer-theme-toggle:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}
.footer-theme-track{position:relative;width:34px;height:18px;flex:0 0 34px;border-radius:9px;background:var(--surface-muted);border:1px solid var(--line);transition:background .2s}
.footer-theme-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.footer-theme-toggle[aria-checked="true"] .footer-theme-track{background:var(--copper)}
.footer-theme-toggle[aria-checked="true"] .footer-theme-thumb{transform:translateX(16px);background:var(--paper)}
@media(prefers-reduced-motion:reduce){.footer-theme-track,.footer-theme-thumb{transition:none}}@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:var(--text-2xs);margin:5px 0}.active-deck a{color:var(--line-strong);font-size:var(--text-2xs);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:var(--text-base) Georgia,serif}.result-copy span{color:var(--muted);font-size:var(--text-2xs);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}
/* Status seals (public/badges.js): a wax seal pressed into a card's top-right corner, so Trending
   and Upcoming set cost no room in the card's text. Designed with the user 2026-09-25: a wax
   seal (over a corner fold, a bookmark ribbon and a plain medallion), red wax with a flame for
   Trending, green wax with an hourglass for Upcoming, side by side when a deck is both, and a
   size up on the home fan's larger cards. Shared by deck cards, Community category cards and
   the home folio, all of which are positioned containers.

   The irregular radius is what makes it wax rather than a coin; the two inset rings are the
   pressed rim and the raised lip of the impression. */
.status-badges{position:absolute;top:6px;right:6px;z-index:4;display:flex;gap:4px;font-style:normal;pointer-events:auto}
.status-badge{--seal-size:26px;display:grid;place-items:center;width:var(--seal-size);height:var(--seal-size);border-radius:47% 53% 51% 49%/52% 46% 54% 48%;color:var(--on-seal);box-shadow:inset 0 0 0 3px rgba(0,0,0,.2),inset 0 0 0 5px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.22),0 2px 5px rgba(0,0,0,.5)}
.status-badge svg{width:55%;height:55%;fill:currentColor;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.status-badge-precon{background:var(--seal-precon)}
.status-badge-trending{background:var(--seal-trending)}
.status-badge-upcoming{background:var(--seal-upcoming);transform:rotate(-8deg)}
.status-badge-upcoming svg{transform:rotate(8deg)}
/* The folio fan's cards are rotated and larger: the seal is a size up and sits a little further
   in, clear of the card's inner frame line. */
/* The home fan overlaps each card's right side with its neighbour, so its ribbon and seals hang from the exposed left edge instead (ISSUE-001, 2026-10-20). A ribbon on the right was drawn under the next card, and a click on it opened that deck. */
.folio-card .status-badges{top:10px;right:auto;left:10px}
.folio-card .status-badge{--seal-size:32px}
/* The status light moved to the top-left block, so a deck card's badges have the corner. */
.deck-library-card .status-badges{top:8px;right:8px}
/* Save ribbons (public/deck-saves.js): a bookmark hanging from the card's top edge at the far
   right, the same place on every card, with any seals moved to its left (designed with the user
   2026-09-25). Unsaved it is a dark ribbon with an outlined bookmark; saved it is gold. */
.deck-save-ribbon{position:absolute;z-index:5;top:0;right:10px;width:22px;height:31px;min-height:0;margin:0;padding:5px 0 0;border:0;border-radius:0;display:grid;justify-items:center;align-content:start;background:rgba(9,15,12,.66);color:var(--on-seal);cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:none;transition:background .15s,height .15s}
.deck-save-ribbon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.deck-save-ribbon:hover,.deck-save-ribbon:focus-visible{height:35px;background:rgba(9,15,12,.86);outline:none}
.deck-save-ribbon[aria-pressed="true"]{background:var(--archive-frame-stud);color:var(--archive-ink)}
.deck-save-ribbon[aria-pressed="true"] svg{fill:currentColor}
.deck-save-ribbon:disabled{opacity:.6;cursor:progress}
.deck-library-card:has(> .deck-save-ribbon) .status-badges{right:40px}
.folio-card .deck-save-ribbon{right:auto;left:14px;width:26px;height:37px;padding-top:6px}
.folio-card .deck-save-ribbon svg{width:15px;height:15px}
.folio-card .deck-save-ribbon:hover,.folio-card .deck-save-ribbon:focus-visible{height:41px}
.folio-card:has(> .deck-save-ribbon) .status-badges{top:50px;left:11px;flex-direction:column}

/* The deck page's Save button, beside Copy: the same bookmark, filled once saved. */
.deck-save-button{display:inline-flex;align-items:center;gap:6px}
.deck-save-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.deck-save-button[aria-pressed="true"] svg{fill:currentColor}

.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:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em}.mana-check{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:bold var(--text-xs) 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 var(--text-2xs) 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:var(--text-2xs)}.advanced-filters input,.advanced-filters select{margin-top:5px;padding:9px 10px;font-size:var(--text-2xs)}.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-identity)}.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.
   Every symbol in text is the size of its text, everywhere (Brett, 2026-10-27): no surface
   enlarges them. The sizing is `!important` because these images sit inside containers whose
   own `img` rules are written for card pictures — `.stack-card img` gave every symbol in a
   stack card's rules text an 80px width and a card's aspect ratio — and a symbol must never
   take a card picture's shape, whatever container it lands in next. */
.mana-symbol-inline{display:inline-block!important;width:auto!important;height:1em!important;max-width:none!important;aspect-ratio:auto!important;object-fit:contain!important;border:0!important;border-radius:0!important;vertical-align:-.115em;pointer-events:none}

.search-syntax{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0 2px;color:var(--muted);font-size:var(--text-2xs)}.search-syntax code{background:var(--surface-muted);color:var(--green2);padding:3px 5px;font:700 var(--text-2xs) system-ui}.search-syntax span{margin-left:2px}

/* Sidebars that scroll on a wide screen, and the scrollbar they scroll with.
 *
 * Two columns, both tall enough to outrun the viewport: Card Search's filter column, which is
 * sticky and bounded by max-height, and the deck builder's analysis column, which is a grid
 * item bounded by its row.
 *
 * Only the cosmetics are here. The builder's `overflow` lives in builder-wide.css, and has to:
 * this file is seventh in the /styles.css bundle and builder-wide.css is eighteenth, so a
 * competing `overflow` written here would be silently dead on arrival against the rule there.
 * That failure mode has already happened once in this codebase, to a .deck-view-control
 * override, which is why the order is exported from src/http/static.js and tested.
 */
@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}.construction-sidebar{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.search-controls::-webkit-scrollbar,.construction-sidebar::-webkit-scrollbar{width:7px}.search-controls::-webkit-scrollbar-thumb,.construction-sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}.search-controls::-webkit-scrollbar-track,.construction-sidebar::-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:var(--text-base) Georgia,serif}.deck-list-item span{color:var(--muted);font-size:var(--text-2xs);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:var(--text-4xl) 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:var(--text-xs)}.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:var(--text-2xs);margin-top:5px}.curve-column small{color:var(--muted);font-size:var(--text-2xs)}.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 var(--text-xs) 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:var(--text-xl) Georgia,serif;border-bottom:1px solid var(--line);padding-bottom:8px}.empty-role-group{margin:0;padding:9px 4px;color:var(--muted);font-size:var(--text-2xs);font-style:italic;border-bottom:1px solid var(--surface-muted)}.deck-row{display:grid;grid-template-columns:46px minmax(0,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 strong{overflow-wrap:anywhere}.deck-row-copy span{color:var(--muted);font-size:var(--text-2xs)}.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:var(--text-2xs)}@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 minmax(0,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:var(--text-2xs);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 var(--text-2xl) Georgia,serif;animation:deck-loading-pulse 1.4s ease-in-out infinite}.deck-loading h3{margin:0;color:var(--ink);font:var(--text-2xl) 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:var(--text-2xs);text-align:center}/* The two .deck-view-control rules that used to sit in this block moved to command-zone.css,
   beside the unconditional rule they override. This file is 8th in the /styles.css bundle and
   command-zone.css is 17th, so at equal specificity the wide rule won and the narrow one was
   dead — the labels hid but the 64px boxes stayed. */
@media(max-width:620px){#deck-cards[data-card-view="cards"] .deck-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.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;white-space:nowrap;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:var(--text-2xs);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:var(--text-2xs);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:var(--text-2xs)}
.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:var(--cascade-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:var(--text-m);line-height:1.25;overflow-wrap:break-word}
#deck-cards[data-card-view="cascade"] .deck-group h3 small{color:var(--muted);font-size:var(--text-2xs)}
#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}
/* Collapsing back is immediate; opening waits (below). */
#deck-cards[data-card-view="cascade"] .deck-row+.deck-row{margin-top:calc(var(--cascade-strip) - var(--cascade-card-height));transition:margin-top .18s ease}
#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:var(--text-2xs);line-height:1.3}

/* Revealed in place (2026-10-01, at the user's direction, replacing a lift above the column).
   Resting on a card for a quarter of a second slides the cards below it down until the whole card
   shows; the card itself stays where it is and is never raised over the others. The quarter-second
   delay is the transition's, so a pointer passing down a column opens nothing. Focus reveals the
   same way, without the wait, since keyboard focus is deliberate. */
#deck-cards[data-card-view="cascade"] .deck-row:hover+.deck-row{margin-top:6px;transition-delay:.25s}
#deck-cards[data-card-view="cascade"] .deck-row:focus-visible+.deck-row{margin-top:6px}
#deck-cards[data-card-view="cascade"] .deck-row:focus-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 0 0 2px var(--deck-accent)}

@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+.deck-row{transition-duration:0s}
}

#deck-cards[data-card-view="cards"] .deck-row>.deck-row-placeholder{display:grid;place-items:center;padding:10px;color:var(--muted);font-size:var(--text-2xs);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:var(--text-2xs);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-danger);font-style:normal;font-size:var(--text-2xs);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;inset:0;border:2px solid var(--danger);border-radius:5px;background:transparent;pointer-events:none}

/* A row's cost symbols are the size of its text, as everywhere (Brett, 2026-10-27, replacing the
   1.45em of 2026-10-02); color-icons.css keeps the row's 42x58 artwork rule off them. */
.deck-row-copy>span .mana-symbol-inline{margin-right:1px}

/* The ⋯ that opens a card's menu on a touch screen. Card and Cascade view hide the row buttons
   and say "Right-click for more actions", which a phone cannot do, so every action beyond the
   stepper was out of reach there. Keyed on `hover:none` rather than width: a narrow desktop
   window can still right-click, and a tablet in landscape still cannot. Top-right, so in a
   cascade it lands on the 32px strip each card keeps visible. */
#deck-cards .row-menu-button{display:none}
@media(hover:none){
  #deck-cards[data-card-view="cards"] .row-menu-button,#deck-cards[data-card-view="cascade"] .row-menu-button{position:absolute;z-index:2;top:6px;right:6px;display:grid;width:32px;height:28px;padding:0;place-items:center;border:1px solid var(--line-strong);border-radius:5px;background:rgba(12,18,15,.78);color:var(--on-inverse);font:800 var(--text-base)/1 inherit;letter-spacing:.06em;cursor:pointer}
  #deck-cards[data-card-view="cards"] .deck-row:not(.token-row)::after{content:none}
}

/* --- List view: a text list in columns (Builder second pass, 2026-11-03, Brett) -----------------
   Each row is the mana cost, right-aligned in a fixed column so the names line up, then the name,
   its marks and the quantity: no picture and no type line (hovering still shows the card). The
   groups flow into as many ~340px columns as fit, inside `.deck-list-columns`, which grows to their
   height so the list scrolls down. The move and remove buttons are gone from the row (they were
   shown on hover since 2026-10-02): right-click has them, as in Card and Cascade view, and a touch
   screen gets the same ⋯ button those views have. Tokens and emblems are names, lined up with the
   card names. The row keeps its old copy line (cost · type) for the other views, hidden here. */
#deck-cards .deck-row-copy .deck-row-cost{display:none}
.deck-list-columns{column-width:340px;column-gap:28px}
#deck-cards[data-card-view="list"] .deck-group{display:block;margin:0 0 14px;break-inside:avoid}
#deck-cards[data-card-view="list"] .deck-group h3{margin:0 0 4px;padding-bottom:4px}
#deck-cards[data-card-view="list"] .deck-row{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;min-height:26px;padding:2px 4px;border-bottom:0;border-radius:4px}
#deck-cards[data-card-view="list"] .deck-row:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
#deck-cards[data-card-view="list"] .deck-row>img,#deck-cards[data-card-view="list"] .deck-row>.deck-row-placeholder,#deck-cards[data-card-view="list"] .deck-row>.token-placeholder,#deck-cards[data-card-view="list"] .deck-row>.row-actions{display:none}
#deck-cards[data-card-view="list"] .deck-row-copy{display:flex;align-items:center;gap:8px;min-width:0}
#deck-cards[data-card-view="list"] .deck-row-copy>span:not(.deck-row-cost){display:none}
#deck-cards[data-card-view="list"] .deck-row-cost{display:inline-flex;flex:0 0 76px;justify-content:flex-end;gap:1px}
#deck-cards[data-card-view="list"] .deck-row-cost .mana-symbol-inline{margin:0}
#deck-cards[data-card-view="list"] .deck-row-copy strong{min-width:0;overflow:hidden;font-size:var(--text-s);white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
#deck-cards[data-card-view="list"] .deck-row-marks{flex:0 0 auto;margin:0}
#deck-cards[data-card-view="list"] .quantity-control button{width:22px;height:22px}
#deck-cards[data-card-view="list"] .token-row .deck-row-copy{padding-left:84px}
@media(hover:none){
  #deck-cards[data-card-view="list"] .row-menu-button{display:grid;width:30px;height:26px;padding:0;place-items:center;border:1px solid var(--line-strong);border-radius:5px;background:transparent;color:var(--ink);font:800 var(--text-base)/1 inherit;cursor:pointer}
}
/* --- Card view: the card and its quantity (Builder second pass, 2026-11-03, Brett) ----------------
   The panel under each picture (name, cost and type line, and "Right-click for more actions") is
   gone: the picture already says all of that, and right-click works without being told. What is
   left is the stepper, centred under the card, with no box around either. Tokens and emblems,
   which have no stepper, are the bare picture. */
#deck-cards[data-card-view="cards"] .deck-row{gap:6px;padding:0;border:0;background:transparent;box-shadow:none}
#deck-cards[data-card-view="cards"] .deck-row>.deck-row-copy{display:none}
#deck-cards[data-card-view="cards"] .deck-row:not(.token-row)>.quantity-control,#deck-cards[data-card-view="cards"] .deck-row:not(.token-row)>.deck-row-count{align-self:center}
#deck-cards[data-card-view="cards"] .deck-row:not(.token-row)::after{content:none}
/* --- Size: Small, Medium, Large (Builder second pass, 2026-11-03, Brett) -------------------------
   Display's Size choice, set on the list as `data-card-size` by setupDeckCardSize (deck-workspace.js).
   Medium is the look above. List view scales its text, cost and columns; Card view its pictures;
   Cascade its columns, whose overlap strips scale with them. Cascade's sizes apply above 850px,
   where a phone's narrower columns stay as they are. */
#deck-cards[data-card-view="list"][data-card-size="small"] .deck-list-columns{column-width:280px}
#deck-cards[data-card-view="list"][data-card-size="small"] .deck-row{min-height:22px;padding-top:1px;padding-bottom:1px}
#deck-cards[data-card-view="list"][data-card-size="small"] .deck-row-copy strong{font-size:var(--text-xs)}
#deck-cards[data-card-view="list"][data-card-size="small"] .deck-row-cost{flex-basis:64px}
#deck-cards[data-card-view="list"][data-card-size="small"] .token-row .deck-row-copy{padding-left:72px}
#deck-cards[data-card-view="list"][data-card-size="large"] .deck-list-columns{column-width:420px}
#deck-cards[data-card-view="list"][data-card-size="large"] .deck-row{min-height:32px;padding-top:3px;padding-bottom:3px}
#deck-cards[data-card-view="list"][data-card-size="large"] .deck-row-copy strong{font-size:var(--text-base)}
#deck-cards[data-card-view="list"][data-card-size="large"] .deck-row-cost{flex-basis:96px}
#deck-cards[data-card-view="list"][data-card-size="large"] .token-row .deck-row-copy{padding-left:104px}
#deck-cards[data-card-view="cards"][data-card-size="small"] .deck-group{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
#deck-cards[data-card-view="cards"][data-card-size="large"] .deck-group{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media(min-width:851px){
  #deck-cards[data-card-view="cascade"][data-card-size="small"]{--cascade-column:122px;--cascade-strip:31px}
  #deck-cards[data-card-view="cascade"][data-card-size="large"]{--cascade-column:200px;--cascade-strip:48px}
}
/* A cascade's basic lands are one card with their count (2026-11-03), in the playtester's token badge.
   On a touch screen the ⋯ button takes that corner, so the badge sits beside it. */
.deck-copy-badge{display:none}
#deck-cards[data-card-view="cascade"] .deck-copy-badge{position:absolute;top:5px;right:5px;z-index:3;display:flex;min-width:22px;height:22px;padding:0 5px;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--gold);border-radius:999px;background:color-mix(in srgb,var(--inverse) 94%,transparent);box-shadow:0 2px 7px rgba(0,0,0,.55);color:var(--gold);font:700 var(--text-s)/1 Arial,sans-serif;pointer-events:none}
@media(hover:none){#deck-cards[data-card-view="cascade"] .deck-copy-badge{right:44px}}
/* Only owned cards are marked; a short count reads as a warning. */
.deck-owned-status.owned.short{background:color-mix(in srgb,var(--warning) 14%,transparent);color:var(--warning)}

/* List view's mana symbols scale with Size (Brett, 2026-11-05): they were 11px at every size.
   Small keeps 11px; Medium is 14px and Large 17px, with the cost column, and the token rows that
   line up with it, widened to match. Symbols take their size from the text (color-icons.css). */
#deck-cards[data-card-view="list"] .deck-row-cost{font-size:14px;flex-basis:96px}
/* Medium's columns widened with its symbols (Brett, same day): 340px cut 8 of Alela's 86 names, 360px none.
   Large's 420px was left: wider changes nothing until it drops to two columns, and only the longest name is cut. */
#deck-cards[data-card-view="list"] .deck-list-columns{column-width:360px}
#deck-cards[data-card-view="list"] .token-row .deck-row-copy{padding-left:104px}
#deck-cards[data-card-view="list"][data-card-size="small"] .deck-row-cost{font-size:11px;flex-basis:64px}
#deck-cards[data-card-view="list"][data-card-size="small"] .token-row .deck-row-copy{padding-left:72px}
#deck-cards[data-card-view="list"][data-card-size="large"] .deck-row-cost{font-size:17px;flex-basis:120px}
#deck-cards[data-card-view="list"][data-card-size="large"] .token-row .deck-row-copy{padding-left:128px}

.folder-heading{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 4px 6px;color:var(--muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.12em}.folder-heading button{border:0;background:transparent;color:var(--green2);font-size:var(--text-xl);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:var(--text-xl)}.library-toggle{display:block;border:0;background:transparent;color:var(--green2);padding:5px 0 0;cursor:pointer;font-size:var(--text-2xs);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}/* `flex-direction:column` and `.deck-library #deck-list{width:100%}` used to be in this block
   and are gone: a second @media(max-width:700px) block further down set `flex-direction:row`
   and `width:auto` for the same selectors, and being later it won. The library became a
   horizontal scroller and this block was left behind describing the stacked layout it replaced.
   Nothing here changes what renders — these two declarations had no effect at any width. */
@media(max-width:700px){.library-body{display:flex}.folder-list{max-width:none}.library-divider{border:0;border-top:1px solid var(--line)}}
.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:var(--text-2xs)}.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:var(--text-2xl);opacity:.28}.library-card strong{font:var(--text-l) Georgia,serif}.library-card small,.deck-list-item.library-card span:last-child{margin-top:5px;color:inherit;opacity:.7;font-size:var(--text-2xs)}.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)}
.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):not(.deck-save-ribbon):not(.status-badges):not(.deck-card-top){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:var(--text-2xs)}.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 var(--text-2xs)/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}
/* A pair of commanders on a deck card: each art in a 60%-wide box centred on its own half (25%
   and 75%), the left one fading out across the middle band onto the right. The single-art zoom
   is dropped for pairs, since scaling both boxes about their own centres pulls each subject
   toward the seam. */
.deck-library-card .deck-card-art-pair{transform:none;object-position:center 18%}
.deck-library-card .deck-card-art-left{left:-5%;width:60%;z-index:-2;-webkit-mask-image:linear-gradient(90deg,black 83%,transparent);mask-image:linear-gradient(90deg,black 83%,transparent)}
.deck-library-card .deck-card-art-right{left:45%;width:60%;z-index:-3}
.deck-library-card.has-pair-art:hover .deck-card-art,.deck-library-card.has-pair-art:focus-visible .deck-card-art{transform:scale(1.04)}
/* The standard deck card (see renderDeckCard in library-cards.js). The top-left block holds the
   status light, the color identity and the bracket, absolutely placed so it never moves the
   name; its width stops short of the badges in the top-right corner, and the mana symbols
   shrink rather than run into them. The name gets two lines at most. */
.deck-library-card .deck-card-top{position:absolute;z-index:3;top:12px;left:14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:calc(100% - 92px)}
.deck-library-card .deck-card-identity{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.deck-library-card .deck-card-top .deck-status-light{position:static;flex:0 0 9px}
.deck-library-card .deck-card-top .deck-pips{margin-top:0;min-width:0;max-width:100%}
.deck-library-card .deck-card-top .deck-mana-symbol{flex:0 1 14px;min-width:10px;height:auto;aspect-ratio:1}
.deck-library-card .deck-card-bracket{padding:2px 6px;border-radius:999px;background:rgba(9,15,12,.58);color:var(--on-inverse);font:700 var(--text-2xs)/1.2 system-ui;letter-spacing:.04em;white-space:nowrap}
/* The chip always sits on the deck art, so its text is always light. `.deck-list-item.library-card span:last-child` (color: inherit) outranked the rule above and handed it the muted text colour, which is dark grey in light theme: the label all but vanished (Community audit, 2026-10-29). */
.deck-list-item.library-card span.deck-card-bracket{color:var(--on-inverse)}
/* The legality words that stand in for the bracket on an illegal or unfinished deck. */
.deck-library-card .deck-card-legality{text-transform:none}
.deck-library-card .deck-card-legality.illegal{color:var(--status-illegal);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--status-illegal) 55%,transparent)}
/* The Paper mark (2026-10-21): paper decks are the marked ones, online being the default. */
/* The paper mark among the colours (2026-11-09): pip-sized, so it takes no room from the name. */
.deck-library-card .deck-card-paper{flex:0 0 auto;color:var(--copper);font-size:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.deck-list-item.library-card span.deck-card-paper{color:var(--copper)}
.deck-library-card .deck-card-legality.incomplete{color:var(--status-incomplete);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--status-incomplete) 50%,transparent)}
.deck-library-card>strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Under the sticky topbar (z-index 10), not over it. Above 850px the builder page does not
   scroll, so the open Your Decks panel never meets the topbar; below it the page scrolls, and at
   z-index 20 the panel slid over the site header. 9 still clears everything in the workspace,
   none of which sets a z-index of its own at that level. */
@media(max-width:850px){.deck-library{z-index:9}}
/* The dark ring under every light (2026-10-02): green on pale card art all but vanished.
   Before the coloured states, which add their halo outside it. */
.deck-library-card .deck-card-top .deck-status-light{box-shadow:0 0 0 2px var(--status-light-ring)}
/* An illegal deck that is not the one open. Specific enough to outrank the plain grey light in
   decks-landing.css, which comes later in the bundle; the active deck never carries the class. */
.deck-library-card .deck-status-light.illegal{background:var(--status-illegal);box-shadow:0 0 0 2px var(--status-light-ring),0 0 0 4px color-mix(in srgb,var(--status-illegal) 35%,transparent),0 0 8px color-mix(in srgb,var(--status-illegal) 60%,transparent)}
/* A deck that breaks no rule but is not at its size yet: the builder header's amber. */
.deck-library-card .deck-status-light.incomplete{background:var(--status-incomplete);box-shadow:0 0 0 2px var(--status-light-ring),0 0 0 4px color-mix(in srgb,var(--status-incomplete) 35%,transparent)}
/* Green for a legal deck at its size. The light is legality alone now; the open deck is marked
   by the ring below instead of by its light. */
.deck-library-card .deck-status-light.legal{background:var(--positive);box-shadow:0 0 0 2px var(--status-light-ring),0 0 0 4px color-mix(in srgb,var(--positive) 35%,transparent)}
/* The deck open in Deck Builder: a green ring with a slight glow, at the user's direction. Box
   shadows rather than a border so the card keeps its size and nothing in it moves. Later than,
   and as specific as, `.library-card.active`, whose lift it keeps and whose shadow it replaces. */
.deck-library-card.active{box-shadow:0 0 0 2px var(--positive),0 0 14px color-mix(in srgb,var(--positive) 45%,transparent),0 8px 20px rgba(23,38,31,.18)}

.deck-home{padding-bottom:70px}.deck-home-hero{padding:36px 4vw 34px}.deck-home-hero h1{font:500 clamp(36px,4.4vw,56px)/1 Georgia,serif;letter-spacing:-.035em;margin:8px 0 14px}.deck-home-hero h1 em{color:var(--green2);font-weight:400}.deck-home-hero>div>p:last-of-type{max-width:610px;margin:0;color:var(--muted);font:var(--text-m)/1.6 Georgia,serif}.deck-home-actions{display:flex;gap:10px;margin-top:20px}.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:var(--text-l) 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:var(--text-2xl) 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:var(--text-2xs)}.deck-paths h2{font:var(--text-2xl) 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:var(--text-2xs)}/* `gap:35px` was here and is gone: a later @media(max-width:850px) block sets `gap:34px` for the
   same selector and wins on order, so 35 never rendered. `padding-top` is untouched — that one
   is not re-declared and does apply. */
@media(max-width:850px){.deck-home-hero{padding-top:28px}.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:var(--text-4xl) 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:var(--text-4xl) 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(auto-fill,minmax(150px,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:var(--text-2xs)/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):not(.deck-card-top){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)}
.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:var(--text-2xs)}
.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:48px}
.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:150px!important;max-width:none;text-decoration:none}
.deck-home-active .library-card strong{font:var(--text-xl) Georgia,serif}
.deck-home-active .deck-card-detail{display:block;font-size:var(--text-xs)}
.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:150px;padding:22px;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:var(--text-xl) Georgia,serif;font-weight:500}
.deck-home-active-empty p{margin:8px 0 0;color:var(--muted);font-size:var(--text-m);line-height:1.6}
@media(max-width:850px){
  .deck-home-hero{grid-template-columns:1fr;gap:24px}
  .deck-home-hero>div{max-width:900px}
}

/* The deck hall uses the shared workshop backdrop from styles.css. */
.deck-home-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0 max(-4vw,-60px);
  padding-right:max(4vw,24px);
  padding-left:max(4vw,24px);
  background:transparent;
}
.deck-home-hero::before{
  content:none;
}
.deck-home-hero::after{
  content:none;
}

/* The call to action belongs to the feature card instead of reading like a loose
 * third object beneath it. */
.deck-home-active-open{
  align-self:stretch;
  text-align:center;
  border-radius:0 0 4px 4px;
  box-shadow:0 5px 14px color-mix(in srgb,var(--copper) 18%,transparent);
}
.deck-home-active{gap:0}
.deck-home-active>.eyebrow{margin:0 0 12px}
.deck-home-active .deck-home-active-card{border-radius:10px 10px 0 0}

/* A quiet paper grain and warm keyline give the library the folio's material language
 * without introducing a rigid picture-frame edge that would fight responsive sizing. */
.landing-library{
  position:relative;
  isolation:isolate;
  border-color:color-mix(in srgb,var(--gold) 34%,var(--line));
  background:
    linear-gradient(color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface) 88%,transparent)),
    url('/brand/home-folio-surface.png') center/cover no-repeat;
  box-shadow:0 16px 40px color-mix(in srgb,var(--inverse) 11%,transparent),inset 0 1px color-mix(in srgb,var(--gold) 13%,transparent);
}
.landing-library::before{
  position:absolute;
  inset:8px;
  z-index:-1;
  border:1px solid color-mix(in srgb,var(--gold) 12%,transparent);
  pointer-events:none;
  content:"";
}
.landing-library>header{border-bottom-color:color-mix(in srgb,var(--gold) 24%,var(--line))}

/* Library navigation is one compact toolbar; each permanent section keeps its own creation
 * action in the same right-hand column so folders, decks and packages are always available. */
.landing-library>header{padding-bottom:16px}
/* Centered only beside each other: below 700px the header stacks and stays flex-start. */
@media(min-width:701px){.landing-library>header{align-items:center}}
.landing-library-actions{gap:7px}
.landing-library-actions .ghost,
.landing-library-actions .library-kind-control{height:32px}
.landing-library-actions .ghost{display:inline-flex;align-items:center;padding:0 12px}
.landing-library-actions .library-kind-control button{padding-inline:12px}
.landing-library>section{padding-top:20px}
.landing-library>section+section{
  margin-top:4px;
  padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--gold) 18%,var(--line));
}
.landing-library>section.is-disabled .landing-section-heading .eyebrow{color:var(--muted)!important;opacity:.7}
.landing-library>section.is-disabled .landing-card-row{opacity:.45}
.landing-library>section.is-disabled button:disabled{cursor:not-allowed;opacity:.45}
.landing-section-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  align-items:center;
  margin-bottom:10px;
}
.landing-section-heading .eyebrow{
  color:var(--copper)!important;
  font-size:var(--text-xs)!important;
  letter-spacing:.16em;
}
.landing-section-heading button{
  width:112px;
  margin-left:0;
  justify-self:end;
  text-align:center;
}
.landing-card-row{padding-bottom:10px}

/* Folder cards read as small leather folios rather than disabled deck cards. */
.landing-card-row .folder-item.library-card{
  height:64px!important;
  justify-content:center!important;
  padding:10px 14px!important;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line-strong))!important;
  background:
    linear-gradient(125deg,rgba(255,255,255,.06),transparent 27%),
    linear-gradient(145deg,color-mix(in srgb,var(--green) 78%,var(--inverse)),color-mix(in srgb,var(--inverse-2) 83%,var(--copper)));
  color:var(--on-inverse);
  box-shadow:0 8px 18px color-mix(in srgb,var(--inverse) 20%,transparent),inset 0 1px rgba(255,255,255,.08);
}
.landing-card-row .folder-item.library-card::before{
  position:absolute;
  top:0;
  left:16px;
  width:46px;
  height:7px;
  border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
  border-top:0;
  border-radius:0 0 3px 3px;
  background:color-mix(in srgb,var(--copper) 52%,var(--green));
  content:"";
}
.landing-card-row .folder-item.library-card .library-card-icon{
  color:var(--gold);
  opacity:.7;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.landing-card-row .folder-item.library-card small{opacity:.76}

/* The small library controls need to remain legible over the more tactile surface. */
.landing-library .ghost,
.landing-library .library-kind-control{
  border-color:color-mix(in srgb,var(--accent) 46%,var(--line));
  background:color-mix(in srgb,var(--surface-raised) 86%,transparent);
  box-shadow:0 2px 7px color-mix(in srgb,var(--inverse) 7%,transparent);
}
.landing-library .ghost{color:var(--accent-strong)}
.landing-library .ghost:hover:not(:disabled){
  border-color:var(--accent);
  background:var(--accent-soft);
}
.landing-library .library-kind-control button{color:var(--ink)}
.landing-library .library-kind-control button.active{
  color:var(--on-accent);
  background:var(--accent);
}

@media(max-width:850px){
  .deck-home-hero{
    margin:0 max(-4vw,-24px);
    padding-right:max(4vw,24px);
    padding-left:max(4vw,24px);
  }
}
@media(max-width:600px){
  .deck-home-hero{gap:20px;padding-bottom:28px}
  .landing-library::before{inset:5px}
  .landing-library-actions{width:100%}
  .landing-section-heading{grid-template-columns:minmax(0,1fr) 106px}
  .landing-section-heading button{width:106px}
}

/* Decks page rework (2026-10-02): breadcrumbs above a folder's name, the Folders / All decks
   toggle, and the search, format and sort row. */
.landing-library-title{min-width:0}
.landing-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 2px;color:var(--muted);font-size:var(--text-xs)}
.landing-crumbs.hidden{display:none}
.landing-library .landing-crumb{padding:2px 4px;border:1px solid transparent;border-radius:4px;background:none;box-shadow:none;color:var(--accent-strong);font:inherit;cursor:pointer}
.landing-library .landing-crumb:hover,.landing-library .landing-crumb.deck-drop-target{border-color:var(--accent);background:var(--accent-soft)}
.landing-library-tools{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.landing-library-tools input,.landing-library-tools select{height:36px;margin:0;padding:0 12px;font-size:var(--text-s)}
.landing-library-tools input{flex:1 1 240px;min-width:0}
.landing-library-tools select{flex:0 0 auto;width:auto;padding-right:30px}
.deck-card-detail time{white-space:nowrap;text-transform:none}
.landing-library>section.hidden{display:none}
@media(max-width:600px){.landing-library-tools select{flex:1 1 40%}}

/* The ••• button on every library card (2026-10-02): the right-click menu, for touch and keys. */
.library-cell{position:relative;min-width:0}
.landing-library .library-card-more{position:absolute;z-index:4;top:8px;right:8px;display:grid;place-items:center;width:30px;height:24px;padding:0;border:1px solid color-mix(in srgb,var(--on-inverse) 22%,transparent);border-radius:6px;background:color-mix(in srgb,var(--inverse) 72%,transparent);box-shadow:none;color:var(--on-inverse);font:700 var(--text-2xs)/1 system-ui;letter-spacing:.06em;cursor:pointer}
.landing-library .library-card-more:hover,.landing-library .library-card-more[aria-expanded="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--inverse) 90%,transparent)}
@media(hover:hover){.library-cell .library-card-more{opacity:0;transition:opacity .15s}.library-cell:hover .library-card-more,.library-cell .library-card-more:focus-visible,.library-cell .library-card-more[aria-expanded="true"]{opacity:1}}
.landing-library .library-cell:has(.folder-item) .library-card-more{top:50%;right:44px;transform:translateY(-50%)}

/* --- Audit pass, 2026-10-30 (Brett) -----------------------------------------------------------
   Plain headings in place of the small-capital labels. */
.landing-section-title{margin:0;color:var(--ink);font:500 var(--text-l)/1.2 Georgia,serif;letter-spacing:0;text-transform:none}
.landing-library>section.is-disabled .landing-section-title{color:var(--muted);opacity:.7}
.deck-home-active-label{margin:0 0 8px;color:var(--muted);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
/* A tile's detail line reads as written ("Commander · 38 cards"); the builder's list capitalized
   every word of it, which is how "38 Cards" happened. */
.library-card .deck-card-foot,.library-card .deck-card-detail{text-transform:none}
/* A folder holding nothing: one message with both ways to fill it, in place of the sections. */
.landing-library>section.landing-section-quiet{display:none}
.landing-empty-folder{display:grid;justify-items:center;gap:8px;margin:18px 0 6px;padding:34px 20px;border:1px dashed var(--line-strong);border-radius:12px;text-align:center}
.landing-empty-folder h3{margin:0;font:500 var(--text-xl) Georgia,serif}
.landing-empty-folder p{margin:0;color:var(--muted)}
.landing-empty-folder-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
/* The Library menu (UI audit, 2026-11-02): one divider set by group, so Delete carries none of its own; a visible keyboard focus. */
.library-context-menu{width:max-content;min-width:180px;max-width:min(260px,calc(100vw - 16px))}.library-context-menu button.danger{border-top:0}.library-context-menu button.danger.section-separator{border-top:1px solid var(--line)}.library-context-menu button:focus{background:var(--accent-soft);outline:none}.library-context-menu button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}

.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:var(--text-l)/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:var(--text-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--on-inverse-accent)}.community-hero aside strong{display:block;margin:34px 0 10px;font:var(--text-2xl) 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:var(--text-4xl) 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:var(--text-xs)}.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):not(.deck-card-top){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 var(--text-3xl) Georgia,serif}.community-empty h3{margin:20px 0 8px;font:var(--text-3xl) 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:var(--text-xs)}#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:var(--text-base)/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:var(--text-2xl)}
.deck-primer h4{font-size:var(--text-xl)}
.deck-primer h5{font-size:var(--text-l)}
.deck-primer h6{font-size:var(--text-base);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%}

/* The standard deck card's layout, loaded after every page's own card rules so it has the last word.

   The card used to place its top block and its builder label absolutely, over a bottom-aligned
   stack of name and detail line. Nothing stopped the two from meeting: a two-line name or a
   detail line wrapped around the label grew the stack upwards into the colors and bracket, and
   the label sat over whatever the detail line wrapped to. Now every part is in the card's own
   flow, so a part that runs out of room is clipped rather than drawn over another:

     top      colors (and status light), bracket beneath        [badge, top-right]
     (space)
     name     up to two lines
     foot     format · sort figure ........................ [By builder]

   The badge stays absolute in the corner, and the top block is kept clear of it by max-width. */

.deck-list-item.deck-library-card>.deck-card-top{position:relative;top:auto;left:auto;margin:0 0 auto;flex:0 0 auto}
.deck-list-item.deck-library-card>strong{flex:0 0 auto;max-width:100%;margin-top:8px}

.deck-list-item.deck-library-card>.deck-card-foot{display:flex!important;align-items:center;gap:8px;width:100%;min-width:0;margin-top:5px;padding:0!important;opacity:1;font-size:inherit}
.deck-list-item.deck-library-card .deck-card-foot>.deck-card-detail{display:block;flex:1 1 auto;min-width:0;margin:0;padding:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-list-item.deck-library-card .deck-card-foot>.deck-folder-label{position:static;flex:0 1 auto;min-width:0;max-width:55%;margin:0 0 0 auto}

/* `.deck-list-item.library-card span:last-child` styles a card's closing detail line, but as a
   descendant selector it also reached the last span inside the top block: the pips and the
   bracket picked up a stray top margin and were dimmed. */
.deck-list-item.deck-library-card .deck-card-top span:last-child{margin-top:0;opacity:1}

/* A card with a save ribbon keeps its top block clear of the ribbon and two seals. */
.deck-list-item.deck-library-card:has(> .deck-save-ribbon)>.deck-card-top{max-width:calc(100% - 128px)}

.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:var(--text-5xl) 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:var(--text-2xs);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-hint{color:var(--muted);font-size:var(--text-xs);margin:10px 0 0}.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:var(--text-2xs);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;padding:0;overflow:hidden}.account-menu>#account-button>img{display:block;width:100%;height:100%;object-fit:cover}/* The account menu (2026-10-28, at Brett's direction, from a mock-up): a rounded panel with the
   header's copper edge, who is signed in at the top beside their picture, the three destinations as
   plain menu rows with the copper hover, and Sign out set apart below a divider. */
.account-menu>div{position:absolute;right:0;top:48px;z-index:100;width:260px;padding:6px;background:var(--surface-raised);border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--copper) 75%,transparent);border-radius:12px;box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.account-identity{display:flex;align-items:center;gap:12px;padding:12px 12px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.account-identity-puck{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border-radius:50%;background:var(--green2);color:var(--surface-raised);font-weight:800;box-shadow:0 0 0 2px var(--surface-raised),0 0 0 3.5px color-mix(in srgb,var(--copper) 70%,transparent)}
.account-identity-puck>img{display:block;width:100%;height:100%;object-fit:cover}
.account-identity-text{min-width:0}
.account-identity-text strong{display:block;color:var(--ink);font:500 1.0625rem/1.25 Georgia,serif;overflow-wrap:anywhere}
/* Two lines at most, then an ellipsis (2026-10-28); the full name is its title. */
.account-identity-text strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.account-identity-email{display:block;margin-top:3px;color:var(--muted);font-size:var(--text-2xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu>div a.account-link,.account-menu>div .account-signout{display:block;width:100%;margin:0 0 2px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 var(--text-s) system-ui,sans-serif;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.account-menu>div a.account-link:hover,.account-menu>div .account-signout:hover{background:color-mix(in srgb,var(--copper) 12%,transparent);color:var(--copper)}
.account-menu>div .account-signout{margin:6px 0 0;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.account-menu>div a.account-link,.account-menu>div .account-signout{transition: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:var(--text-2xl) Georgia,serif;margin:0}.key-intro{color:var(--muted);font:var(--text-m)/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:var(--text-xs) 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:var(--text-s)}.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:var(--text-2xs)}.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:var(--text-2xl) Georgia,serif;margin:0}.prefs-intro{color:var(--muted);font:var(--text-m)/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:var(--text-xs);margin:18px 0 0}/* The change-password dialog. `dialog` itself is styled in styles.css — border, shadow,
 * backdrop and a width — so only the inside of it is here. */
.settings-dialog{width:min(460px,92vw);background:var(--surface)}
.settings-dialog form{padding:22px;margin:0;max-width:none}
.settings-dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.settings-dialog-heading h2{margin:0;font:var(--text-2xl) Georgia,serif}
.settings-dialog .auth-error{margin:8px 0 0!important;font-size:var(--text-xs)}
/* The Settings page's account sections. Narrow on purpose — these are short, deliberate
 * forms, and a password field stretched across 820px invites the wrong kind of confidence. */
.settings-form{display:grid;gap:8px;max-width:420px;margin:22px 0 0}
.settings-form label{font-size:var(--text-xs);font-weight:700;color:var(--ink)}
.settings-form label+input{margin-bottom:6px}
.settings-form input{width:100%;padding:11px 12px;background:var(--surface-raised);border:1px solid var(--line);color:var(--ink);font-size:var(--text-s)}
.settings-form input:focus-visible{outline:2px solid var(--accent-strong);outline-offset:1px}
.settings-form small{color:var(--muted);font-size:var(--text-2xs);margin-top:-2px}
.settings-form .dialog-actions{margin-top:14px}
/* Marked by a rule and a tint, never by colour alone — the same standard the admin portal
 * holds itself to for irreversible controls. */
.settings-danger{border-left:3px solid var(--danger)}
.settings-danger .prefs-note{color:var(--danger)}
.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:var(--text-s);margin-top:12px}.theme-option small{display:block;color:var(--muted);font-size:var(--text-2xs);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-strong);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 var(--text-2xs) ui-monospace,SFMono-Regular,Menlo,monospace}.key-scope-tag.full{background:var(--accent-soft);color:var(--green2);font-family:inherit;font-size:var(--text-2xs);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:var(--text-2xs);font-weight:700}.key-scopes>small{display:block;margin-top:10px;color:var(--muted);font-size:var(--text-2xs);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:var(--text-xs)}.key-scope-option small{display:block;margin-top:2px;color:var(--muted);font:var(--text-2xs) ui-monospace,SFMono-Regular,Menlo,monospace}

/* The sign-up acceptance tick. Rendered by auth-page.js from /api/policies rather than written
   into register.html, so it is absent entirely while nothing is published. */
.auth-consent{display:flex;align-items:flex-start;gap:9px;margin:4px 0 14px;font-weight:400;font-size:var(--text-xs);line-height:1.5}
.auth-consent input{width:auto;margin:2px 0 0;flex:none}
.auth-consent a{color:var(--accent-strong)}

/* The re-acceptance prompt. Raised by policy-prompt.js only after a write was refused, never on
   arrival, because the gate it reports leaves reading alone. */
/* The re-acceptance prompt in the menus' look (2026-10-28, at Brett's direction, from a mock-up):
   rounded, the copper edge, each document a card with a Read link, rounded buttons, copper focus. */
.policy-prompt{width:min(470px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--copper) 75%,transparent);border-radius:14px;background:var(--surface-raised);color:inherit;box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.policy-prompt form{padding:clamp(22px,2.6vw,30px)}
.policy-prompt h2{margin:4px 0 10px;font:var(--text-2xl) Georgia,serif}
.policy-prompt p{margin:0 0 12px;color:var(--muted);font-size:var(--text-s);line-height:1.55}
.policy-prompt::backdrop{background:var(--backdrop)}
.policy-prompt-list{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.policy-prompt-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:600 var(--text-s) system-ui,sans-serif;text-decoration:none;transition:border-color .15s,color .15s}
.policy-prompt-list a:hover{border-color:color-mix(in srgb,var(--copper) 60%,transparent);color:var(--copper)}
.policy-prompt-read{color:var(--copper);font:600 var(--text-2xs) system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.policy-prompt a:focus-visible,.policy-prompt button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.policy-prompt-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.policy-prompt-actions button{padding:10px 20px;border-radius:99px;font:600 var(--text-xs) system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
.policy-prompt-actions button[value=later]{border:1px solid var(--line);background:transparent;color:var(--ink)}
.policy-prompt-actions button[value=later]:hover{border-color:color-mix(in srgb,var(--copper) 60%,transparent);color:var(--copper)}
@media(prefers-reduced-motion:reduce){.policy-prompt-list a{transition:none}}

/* The daily spoiler notice switch on the Settings page (2026-10-21). */
.settings-toggle{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:var(--text-s);letter-spacing:0;text-transform:none}.settings-toggle input{width:auto;margin:0;accent-color:var(--accent)}

.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 var(--text-xs) 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:var(--text-2xs)/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 var(--text-3xl) 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:var(--text-5xl)}.public-profile-hero h1{margin:3px 0 8px;font:var(--text-6xl)/1.05 Georgia,serif}.profile-since{margin:0;color:var(--muted)}.public-profile-bio{max-width:720px;margin:28px 0;font:var(--text-l)/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:var(--text-3xl) 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:var(--text-2xl) Georgia,serif}.profile-shelf>header>span{color:var(--muted);font-size:var(--text-xs)}.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:var(--text-xs)}.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 var(--text-xl) Georgia,serif}.profile-shelf-empty h4{margin:15px 0 6px;font:var(--text-2xl) 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:var(--text-4xl)}.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}}

/* --- Two columns: who the builder is, and what they make (2026-10-02, designed with the user) ---
   Left: avatar, name, counts (public), Follow, bio, and on your own profile the follower lists
   (private). Right: the builder's activity, then their shelves. One column below 900px. */
.profile-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:start}
.profile-layout.hidden{display:none}
.profile-card{position:sticky;top:96px;display:grid;justify-items:start;gap:6px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.profile-card .profile-avatar-public{width:112px;height:112px;margin-bottom:10px}
.profile-card h1{margin:2px 0 2px;font:var(--text-4xl)/1.05 Georgia,serif;overflow-wrap:anywhere}
/* A very long display name stops at three lines with an ellipsis (2026-10-28, at Brett's
   direction: 80 characters took six lines of the sidebar); the full name is its title. */
.profile-card h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.profile-card .profile-since{font-size:var(--text-xs)}
.profile-counts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 4px;color:var(--muted);font-size:var(--text-s)}
.profile-counts strong{color:var(--ink);font-variant-numeric:tabular-nums}
.profile-card-actions{display:flex;gap:8px;margin:6px 0 4px;width:100%}
.profile-card-actions>*{flex:1 1 0;justify-content:center;min-height:40px}
.profile-card .public-profile-bio{max-width:none;margin:12px 0 0;font:var(--text-base)/1.65 Georgia,serif}
.profile-own-follows{width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.profile-own-note{margin:0 0 8px;color:var(--muted);font-size:var(--text-2xs)}
.profile-own-follows details{padding:6px 0;border-bottom:1px solid var(--line)}
.profile-own-follows summary{cursor:pointer;font-weight:700;font-size:var(--text-s)}
.profile-own-follows summary span{color:var(--muted);font-weight:400}
.profile-people{display:grid;gap:6px;margin:10px 0 4px;padding:0;list-style:none}
.profile-people a{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:var(--text-s);text-decoration:none}
.profile-people a:hover{color:var(--green2)}
.profile-person-avatar{display:grid;width:28px;height:28px;flex:none;place-items:center;overflow:hidden;border-radius:50%;background:var(--accent-soft);color:var(--green2);font:700 var(--text-xs) Georgia,serif}
.profile-person-avatar img{width:100%;height:100%;object-fit:cover}
.profile-people-empty{color:var(--muted);font-size:var(--text-xs)}
.profile-main{min-width:0}
.profile-activity{padding-bottom:30px;border-bottom:1px solid var(--line)}
.profile-activity h2{margin:4px 0 14px;font:var(--text-3xl) Georgia,serif}
.profile-activity-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.profile-activity-item{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.profile-activity-item:last-child{border-bottom:0}
.profile-activity-mark{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--copper)}
.profile-activity-item[data-activity-kind="updated"] .profile-activity-mark{color:var(--green2)}
.profile-activity-item p{margin:0 0 3px;font-size:var(--text-base)}
.profile-activity-item p a{color:var(--ink);font-weight:700;text-decoration:none}
.profile-activity-item p a:hover{color:var(--green2)}
.profile-activity-item p small{margin-left:6px;color:var(--muted);font-size:var(--text-xs)}
.profile-activity-item>div>small{color:var(--muted);font-size:var(--text-xs)}
.profile-activity-empty{padding:18px;border:1px dashed var(--line);color:var(--muted);font-size:var(--text-s)}
.profile-layout .profile-shelves{margin-top:28px}
@media(max-width:900px){
  .profile-layout{grid-template-columns:1fr;gap:28px}
  .profile-card{position:static}
}

/* Profile cleanup (Brett, 2026-10-29, as Community): no small-capital labels, rounded controls,
   Community's deck tiles, and the right column on a panel like the left card, so its small text no
   longer sits straight on the photo (it was faint in light theme). */
.profile-main { padding: 24px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.profile-card { border-radius: 16px; }
.profile-card h1 { margin-top: 6px; }
.profile-card .button-link, .profile-card button { border-radius: 8px; }
.profile-card .public-profile-bio.profile-bio-missing { color: var(--muted); font-size: var(--text-s); }
.profile-card .public-profile-bio a { color: var(--copper); }
.profile-activity h2 { margin-top: 0; }
.profile-shelves-header label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-s); font-weight: 600; letter-spacing: 0; text-transform: none; }
.profile-shelves-header select { width: auto; border-radius: 8px; }
.profile-layout .profile-card-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.profile-layout .profile-card-grid .community-deck-card { height: 180px; border-radius: 12px; }
.profile-shelf-empty { border-radius: 12px; }
.profile-pagination button { border-radius: 8px; }
@media (max-width: 640px) { .profile-main { padding: 18px 16px; } .profile-layout .profile-card-grid { grid-template-columns: 1fr; } }

/* Profile layout (Brett, 2026-10-29, from a mock-up): a banner of the builder's deck art across the
   top, a compact identity with a stats row, recent activity in the side card, and one shelf at a
   time behind a switch. */
#public-profile { position: relative; }
/* Tall enough to show a commander's head, with the panels starting below it (Brett, 2026-10-29: Frodo was cut off at the eyes). */
#public-profile.has-banner { padding-top: 230px; }
.profile-banner { position: absolute; inset: 0 0 auto; z-index: 0; height: 340px; border-radius: 18px; background-position: center 20%; background-size: cover; opacity: .75; -webkit-mask: linear-gradient(black 55%, transparent); mask: linear-gradient(black 55%, transparent); }
.profile-banner.hidden { display: none; }
/* The card keeps its sticky position (relative would turn its sticky top into an offset). */
.profile-layout > .profile-card { z-index: 1; }
.profile-layout > .profile-main { position: relative; z-index: 1; }
.profile-card { gap: 10px; }
.profile-identity { display: flex; align-items: center; gap: 14px; width: 100%; }
.profile-identity > div:last-child { min-width: 0; }
.profile-card .profile-identity .profile-avatar-public { flex: none; width: 64px; height: 64px; margin: 0; font-size: var(--text-2xl); }
.profile-card .profile-identity h1 { margin: 0; font-size: var(--text-2xl); }
.profile-card .profile-identity .profile-since { margin: 2px 0 0; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin: 4px 0; padding: 10px 0; border-block: 1px solid var(--line); }
.profile-stats > span { display: grid; justify-items: center; color: var(--muted); font-size: var(--text-2xs); text-align: center; }
.profile-stats strong { color: var(--ink); font: 500 var(--text-xl) Georgia, serif; }
.profile-card .profile-activity { width: 100%; margin-top: 6px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); }
.profile-card .profile-activity h2 { margin: 0 0 6px; font: 600 var(--text-s) system-ui, sans-serif; }
.profile-card .profile-activity-item { grid-template-columns: 1fr; gap: 0; padding: 7px 0; }
.profile-card .profile-activity-item p { font-size: var(--text-s); }
.profile-card .profile-activity-empty { padding: 10px 12px; font-size: var(--text-xs); }
.profile-activity-more { margin-top: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--copper); font-size: var(--text-s); font-weight: 600; cursor: pointer; }
.profile-activity-more:hover { text-decoration: underline; }
.profile-activity-more.hidden { display: none; }
.profile-main .profile-shelves { margin-top: 0; }
.profile-main .profile-shelves-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 5px 6px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent); }
.profile-shelf-switch { display: flex; flex-wrap: wrap; gap: 2px; }
.profile-shelf-switch button { padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: var(--text-s); font-weight: 600; cursor: pointer; }
.profile-shelf-switch button span { margin-left: 4px; font-weight: 500; }
.profile-shelf-switch button:not(:disabled):hover { color: var(--ink); }
.profile-shelf-switch button:disabled { opacity: .45; cursor: default; }
.profile-shelf-switch button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.profile-shelf-switch button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.profile-main .profile-shelves-header label { margin-right: 4px; }
.profile-main .profile-shelves-header label.profile-sort-idle { visibility: hidden; }
.profile-main .profile-shelves-header select { padding: 6px 30px 6px 12px; border-radius: 999px; }
.profile-main .profile-shelf { padding-top: 0; border: 0; }
.profile-main .profile-shelf > header { display: none; }
@media (max-width: 900px) { #public-profile.has-banner { padding-top: 150px; } .profile-banner { height: 240px; } }
@media (max-width: 640px) { .profile-main .profile-shelves-header { flex-wrap: wrap; border-radius: 18px; } }

/* Followers and following as stats you can open (2026-10-29). On someone else's profile the
   buttons are disabled and look like the plain numbers they are. */
.profile-stats > .profile-stat { display: grid; justify-items: center; padding: 4px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: var(--text-2xs); text-align: center; }
.profile-stats > .profile-stat:not(:disabled) { cursor: pointer; }
.profile-stats > .profile-stat:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.profile-stats > .profile-stat:not(:disabled):hover strong { color: var(--copper); }
.profile-stats > .profile-stat:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.profile-follows-dialog { width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 64px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.profile-follows-dialog::backdrop { background: rgba(8, 10, 9, .55); }
.profile-follows-dialog form { display: grid; gap: 4px; padding: 18px 20px 20px; }
.profile-follows-dialog header { display: flex; align-items: center; justify-content: space-between; }
.profile-follows-dialog h2 { margin: 0; font: 500 var(--text-xl) Georgia, serif; }
.profile-follows-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.profile-follows-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.profile-follows-dialog .profile-people { max-height: 400px; overflow-y: auto; margin-top: 8px; }

.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:var(--text-xs);line-height:1.6}
.oauth-consent-scopes code{padding:2px 5px;border-radius:3px;background:var(--surface-muted);font-size:var(--text-2xs);word-break:break-word}
.oauth-consent-actions{display:flex;gap:10px;margin-top:22px}
.oauth-consent-actions button{flex:1}
.oauth-consent-unverified{margin:14px 0 0;padding:12px 14px;background:var(--danger-soft);color:var(--danger);font-size:var(--text-xs);line-height:1.6;border-left:3px solid var(--danger)}.oauth-consent-unverified code{background:transparent;font:var(--text-xs) ui-monospace,SFMono-Regular,Menlo,monospace}

.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:var(--text-2xs)}.commander-chip button{border:0;background:transparent;color:var(--green2);cursor:pointer;font-size:var(--text-base)}.commander-add-second{margin-top:2px}.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:var(--text-base) Georgia,serif}
/* The last resort for a one-word name too long even at the smallest size fitCommanderNames uses
   (2026-10-28: Asmoranomardicadaistinaculdacar was clipped at the zone's edge): it breaks. */
.commander-zone strong{overflow-wrap:anywhere}.commander-zone small{max-width:260px;color:var(--muted);font-size:var(--text-dense);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:var(--text-m);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:var(--text-2xs);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 var(--text-dense)/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)}

.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:var(--text-l) 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:var(--text-dense);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:var(--text-dense);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:var(--text-dense);text-transform:uppercase;letter-spacing:.14em}
.sidebar-average-mana strong{font:var(--text-l) 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:var(--text-dense)}
/* The cheapest-printing value, after the chosen-printing one: secondary, but the number Community searches by. */
.sidebar-deck-value .deck-value-cheapest{color:var(--muted);font-weight:500;font-size:.8em;white-space:nowrap}
/* Over budget (2026-10-08): advisory, drawn like the illegal-deck size card rather than as an error. */
.sidebar-deck-value.over-budget{border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}.sidebar-deck-value.over-budget small{color:var(--danger);font-weight:700}
.sidebar-mana-curve-card{padding:10px 14px;background:var(--surface);border:1px solid var(--line)}
.sidebar-mana-curve-card .mana-curve{--curve-step:6px;height:max(115px,calc(var(--curve-maximum,0) * var(--curve-step) + 40px));gap:4px}
.sidebar-mana-curve-card .curve-bar{height:max(2px,calc(var(--curve-count,0) * var(--curve-step)));flex-shrink:0}
.sidebar-mana-curve-card .curve-column strong{font-size:var(--text-dense)}
.sidebar-mana-curve-card .curve-column small{font-size:var(--text-dense)}
.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:var(--text-s)}.card-category-list strong{font:var(--text-m) 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}/* One column, not two, and at the top level rather than inside @media(min-width:851px).
 * It was written there, correctly reasoned and completely dead: this same selector set two
 * columns a few lines further down at the top level, which beats a media block of equal
 * specificity regardless of the condition. "Planeswalkers" was reported clipped and the fix
 * never took; "Enchantments" then pushed its own count into the next column and over the
 * "Lands" beside it. `repeat(2,minmax(0,1fr))` leaves 96.5px per column in a 240px sidebar
 * and "Planeswalkers" with its count needs about 114px. The wide drawer below still gets
 * two, which is why that is the override and this is the default. */
.sidebar-composition-panel .card-category-list{grid-template-columns:minmax(0,1fr)}
/* A custom role may be 40 characters (maxlength="40"), which needs about 276px — wider than
 * this sidebar at any number of columns. So the label is allowed to shrink and wrap rather
 * than shove the count out of its cell: a flex item's automatic minimum size is its content,
 * and min-width:0 is what lets it be smaller than the word inside it. Wrapping rather than
 * ellipsis because a truncated role name is not a role name. */
.card-category-list>div>span{min-width:0;overflow-wrap:anywhere}
.card-category-list>div>strong{flex:0 0 auto}.composition-empty{grid-column:1/-1;margin:3px 0;color:var(--muted);font-size:var(--text-dense);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:var(--text-l);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:var(--text-2xs)/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}/* Two rows (2026-10-02, at the user's direction): the section tabs, always first, and the
   decklist's tools under them, wrapping instead of overflowing. It was one row that could not
   wrap, so between about 1100px and 1700px the view switch and Group were pushed off its left edge. */
.construction-toolbar{display:grid;gap:8px;margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.construction-sections{display:flex;align-items:center;gap:8px}
.construction-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.construction-tools>.deck-display-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
.construction-tools>.builder-card-toolbar{flex:1 1 300px;width:auto;max-width:560px}
.deck-grouping-control{display:flex;flex:0 0 auto;height:38px;align-items:stretch;margin:0}.deck-grouping-control select{width:auto;min-width:0;field-sizing:content;height:38px;margin:0;padding:7px 28px 7px 10px;border:1px solid var(--line-strong);background-color:var(--surface-raised);font-size:var(--text-s);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 var(--text-s)/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>.builder-card-result{display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:var(--surface-raised)}.builder-card-results>.builder-card-result:last-child{border-bottom:0}.builder-card-results>.builder-card-result:hover,.builder-card-results>.builder-card-result.active{background:var(--accent-soft);box-shadow:inset 3px 0 var(--green2)}.builder-card-result-info{display:grid;flex:1 1 auto;min-width:0;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;padding:7px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.builder-card-result-add{display:grid;flex:0 0 auto;width:44px;place-items:center;padding:0;border:0;background:none;cursor:pointer}.builder-card-result-add::before{content:"+";display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--green2);font-size:var(--text-base);font-weight:700}.builder-card-result-add:hover::before,.builder-card-result-add:focus-visible::before{box-shadow:0 0 0 2px 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:var(--text-s) Georgia,serif}.builder-card-results small{margin-top:2px;color:var(--muted);font-size:var(--text-dense)}.builder-card-results p{margin:0;padding:12px;color:var(--muted);font-size:var(--text-s);text-align:center}
#builder-catalog-search{display:inline-flex;min-height:38px;align-items:center;padding:8px 13px;color:var(--green2);font-size:var(--text-s);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:var(--text-dense);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:var(--text-dense) Georgia,serif}.mana-requirements-labels small{color:var(--muted);font-size:var(--text-dense);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:var(--text-s);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:var(--text-dense);font-weight:800;letter-spacing:.12em;line-height:1;text-transform:uppercase}
.workbench-status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--muted);font-size:var(--text-xs)}
/* The mainboard's progress toward its size, beside the count. */
.workbench-progress{display:block;width:96px;height:5px;border-radius:99px;background:color-mix(in srgb,currentColor 24%,transparent);overflow:hidden}
.workbench-progress>b{display:block;height:100%;border-radius:inherit;background:currentColor;transition:width .2s ease}
.workbench-progress.over>b{background:var(--danger)}
.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:var(--text-s);font-weight:800;white-space:nowrap}.playtest-deck-button span{font-size:var(--text-dense)}.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:var(--text-m);font-weight:800;letter-spacing:.08em}
/* The ••• menu (2026-11-03, Brett, option B): the account menu's rounded panel, copper top edge and
   copper hover; an icon column; a divider between groups (app.js `deckMoreGroups`), and none
   for a group whose items are all hidden. */
.deck-more-menu{position:absolute;z-index:230;top:calc(100% + 7px);right:0;width:max-content;min-width:236px;max-width:min(300px,calc(100vw - 24px));padding:6px;border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--copper) 75%,transparent);border-radius:12px;background:var(--surface-raised);box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.deck-more-group{display:flex;flex-direction:column}
.deck-more-group:not(:has(>button:not(.hidden))){display:none}
.deck-more-group:has(>button:not(.hidden))~.deck-more-group{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.deck-more-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-family:system-ui;font-weight:500;font-size:var(--text-s);line-height:1.25;text-align:left;white-space:nowrap;cursor:pointer}
.deck-more-menu button:hover,.deck-more-menu button:focus-visible{background:color-mix(in srgb,var(--copper) 12%,transparent);color:var(--copper)}.deck-more-menu button:hover .deck-more-icon,.deck-more-menu button:focus-visible .deck-more-icon{color:var(--copper)}
.deck-more-menu button:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.deck-more-menu button:disabled{opacity:.45;cursor:default}
.deck-more-icon{flex:0 0 18px;color:var(--muted);font-size:14px;text-align:center}
/* Below here rather than above, and that is the whole point of it.
 * Every rule in this block is a desktop compaction of the base rules further up, and a
 * media condition adds no specificity — so while this sat above them, eleven of its
 * declarations lost to the plain rules they were written to override and had never
 * rendered. The mana curve was 115px where this says 66px. Anything added here from now
 * on has to stay below the rule it compacts. */
@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:var(--text-xs);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:var(--text-dense)}
  .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:var(--text-dense)}
  .sidebar-deck-size,.sidebar-average-mana{padding:8px 10px}
  .sidebar-deck-size strong,.sidebar-average-mana strong{font-size:var(--text-base)}
  .sidebar-deck-size small{margin-top:3px;font-size:var(--text-dense)}
  .sidebar-deck-size-label,.sidebar-average-mana span{font-size:var(--text-dense)}
  .sidebar-mana-curve-card{padding:6px 9px}
  .sidebar-mana-curve-card>.eyebrow{margin-bottom:2px}
  .sidebar-mana-curve-card .mana-curve{--curve-step:4px;height:max(66px,calc(var(--curve-maximum,0) * var(--curve-step) + 40px));gap:3px}
  .sidebar-mana-curve-card .curve-column strong{margin-top:2px;font-size:var(--text-dense)}
  .sidebar-mana-curve-card .curve-column small{font-size:var(--text-dense)}
  .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:var(--text-dense)}
  .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:var(--text-dense)}
  .mana-requirements-labels small{font-size:var(--text-dense)}
  .card-category-list>div{padding:4px 0}
  /* 13px, and it was 9px here until 2026-09-15 — dead, because a second @media(min-width:851px)
     block further down re-declared it at 13px and won on order. That block was a strict subset
     of this one apart from this single line, so it is gone and this value is what was actually
     shipping. Note what 13px means: it is the same size as the unconditional rule, so the only
     surviving effect of declaring it here at all is to say so out loud.
     The 9px was plausibly the intent — every other label in this block shrinks to 6-8px for the
     240px sidebar — but restoring it would be a visual change rather than a merge, and the
     pressure that motivated it is gone now that this grid is one column at this width. */
  .card-category-list span{font-size:var(--text-s)}
  .card-category-list strong{font-size:var(--text-xs)}
}
@media(max-width:850px){.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}.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-tools>.builder-card-toolbar{flex-basis:100%;max-width:none}.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:var(--text-s)}}
/* `flex-wrap:wrap` moved up to the 850px block above, because `.builder-card-toolbar` goes
   `width:100%` there: between 621px and 850px the toolbar was a single non-wrapping row with a
   min-content of roughly 1,464px, which pushed the page sideways through the overflow:visible
   ancestors builder-wide.css sets below 850px. */
@media(max-width:620px){
  /* Two selects, one row. Each used to take `width:100%` with `flex:0 0 auto`, so the pair
     burned two full rows of a seven-row toolbar with about 157px of empty space on each — and
     vertical space, not overflow, is what makes this toolbar unusable on a phone. */
  .deck-grouping-control{flex:1 1 calc(50% - 4px);width:auto;justify-content:stretch}
  /* Tighter padding and a step down in size so "Sort: Alphabetical" and "Group: Mana value"
     fit half a phone's width whole instead of ending in "Alphabetic…". */
  .deck-grouping-control select{width:100%;min-width:0;padding:7px 22px 7px 8px;font-size:var(--text-xs);text-overflow:ellipsis}
  .builder-card-toolbar{width:100%}
  /* Lived in deckbuilder.css, which is 8th in the /styles.css bundle against command-zone.css's
     17th. At equal specificity the unconditional `min-width:64px` above won and this never
     applied, so the labels hid and the boxes stayed 64px wide — 196px of control for three
     glyphs. Moved here so the narrow rule sits beside the rule it overrides and bundle order
     cannot silently kill it again. */
  .deck-view-control button{min-width:38px;padding:0 8px}
  .deck-view-control button span{display:none}
  /* Phone header: one column of full-width rows. It was two columns, title beside the actions,
     and the title column could not shrink below its meta row — the bracket badge and the status
     side by side, about 283px of min-content — so on a 375px phone the title and status ran
     underneath Share and Playtest. Stacked, each row gets the full width and a long deck name
     wraps. This block sits after the 850px and 560px ones on purpose: same specificity, so
     position is what lets it win. */
  .workbench-heading-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .workbench-library-nav{grid-column:1;justify-content:flex-start;padding:0 0 5px;border-right:0;border-bottom:1px solid var(--line)}
  .workbench-heading-copy{grid-column:1}
  /* Wraps, but at most two lines and a phone-sized face: at the desktop size a sixty-character
     deck name ran to 330px, most of the first screen. The full name is on Deck Settings. */
  .workbench-heading-copy #workbench-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:clamp(28px,9vw,40px);line-height:1.1;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  .workbench-deck-meta{flex-wrap:wrap;row-gap:6px}
  .workbench-status span{max-width:none;white-space:normal}
  .workbench-header-actions{grid-column:1;justify-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .workbench-header-actions>.share-deck-button{justify-content:center}
  .playtest-deck-button{width:auto;padding:8px 13px;justify-content:center;font-size:var(--text-s)}
}
/* 570px, not 520px. The row's min-content is about 509px — the search input's 180px, the two
   Add-to buttons, and "Search catalog" at `white-space:nowrap` — against a viewport minus 62px
   of chrome, so it stops fitting at 571px and used to overflow all the way down to 521px. It is
   not moved any earlier than that on purpose: a column costs three rows of vertical space, and
   vertical space is the scarce thing here. */
@media(max-width:570px){.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}}
.eyebrow{color:var(--deck-accent)!important}.mana-curve .curve-bar{background:var(--deck-accent)}.primary{background:var(--deck-accent);color:var(--on-deck-accent)}.sidebar-color-pip{box-shadow:0 0 0 1px var(--line-strong)}

/* On a phone: the view switch across the width, then Group and Sort side by side. */
@media(max-width:620px){.construction-tools>.deck-display-controls{flex:1 1 100%;justify-content:stretch;margin-left:0}.deck-display-controls>.deck-view-control{flex:1 1 100%}.deck-display-controls>.deck-view-control button{flex:1 1 0;justify-content:center}}

/* The view switch, Group and Sort fold behind a Display button (2026-10-02 below 1100px; at every
   width since 2026-10-30 — see the audit pass at the end of this file). */
.deck-display-toggle{display:none;align-items:center;gap:6px;height:38px;margin-left:auto;padding:0 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface-raised);color:var(--muted);font:700 var(--text-s)/1 inherit;cursor:pointer}
.deck-display-toggle[aria-expanded="true"]{color:var(--green2);border-color:var(--green2)}
.construction-main:is(.information-view,.combos-view,.statistics-view,.comments-view) .deck-display-toggle{display:none!important}

/* On a phone the tab row wraps: the tabs across the width, then Analysis and Display side by side. */
@media(max-width:620px){
  .construction-sections{flex-wrap:wrap}
  .construction-sections>.builder-section-control{order:-1}
  .construction-sections>.analysis-toggle,.construction-sections>.deck-display-toggle{flex:1 1 0;justify-content:center;margin-left:0}
}

/* The deck's badges and status wrap instead of running under the header actions (2026-10-02, at
   the user's direction): on the deck page at about 800px "Needs 94 more" ran under Save and was cut. */
.workbench-deck-meta{flex-wrap:wrap;row-gap:6px}

/* --- Audit pass, 2026-10-30 (Brett) -----------------------------------------------------------
   Plain labels in the builder and the deck viewer: no small capitals, as on Card Search. */
.construction-sidebar .eyebrow,.construction-sidebar .sidebar-analysis-panel>h2,.construction-sidebar .sidebar-deck-size-label,.construction-sidebar .sidebar-average-mana span,.construction-sidebar .deck-value-cheapest,.workbench-deck-meta .workbench-format-badge,.add-board-label,.deck-row .illegal-mark{text-transform:none!important;letter-spacing:0!important}
.construction-sidebar .eyebrow{font:600 var(--text-xs)/1.3 system-ui!important}
/* The Display button folds the view, Group, Sort and Printings choices at every width now, so the
   toolbar is two tidy rows: the tabs and Display, then the add-a-card bar. */
.deck-display-toggle{display:inline-flex}
.construction-tools>.deck-display-controls:not(.open){display:none}
.construction-tools>.deck-display-controls.open{flex:1 1 100%;justify-content:flex-start;margin-left:0}
/* A long deck name wraps to a second line in a smaller size rather than being cut off. */
.workbench-heading-copy #workbench-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.workbench-heading-copy #workbench-title.long-title{font-size:clamp(26px,2.4vw,36px)}
/* One toolbar row (2026-10-30, Brett): the tabs, the add box filling the middle, then Display.
   The Mainboard/Considering switch went; each result carries + Main and + Consider, and the
   full catalog is the last line of the results. */
.construction-sections>.deck-display-toggle{margin-left:0}
.builder-card-result-adds{display:flex;flex:0 0 auto;align-self:center;align-items:center;gap:4px;padding-right:6px}
.builder-card-result-add{display:inline-flex;width:auto;height:auto;flex:none;align-self:center;align-items:center;padding:5px 9px;border:1px solid color-mix(in srgb,var(--green2) 55%,transparent);border-radius:999px;background:var(--accent-soft);color:var(--green2);font:600 var(--text-2xs) system-ui;white-space:nowrap;cursor:pointer}
.builder-card-result-add::before{content:none}
.builder-card-result-add.consider{border-color:var(--line-strong);background:transparent;color:var(--muted)}
.builder-card-result-add:hover,.builder-card-result-add:focus-visible{box-shadow:0 0 0 2px var(--green2)}
.builder-card-results>p{margin:0;padding:10px 12px;color:var(--muted)}
.builder-catalog-link{display:block;padding:9px 12px;border-top:1px solid var(--line);color:var(--copper);font:600 var(--text-xs) system-ui;text-decoration:none}
.builder-catalog-link:hover,.builder-catalog-link:focus-visible{background:color-mix(in srgb,var(--copper) 10%,transparent)}
/* The section tabs as tabs, in the deck's header beside the card-count bar (2026-10-30, Brett). */
.workbench-deck-meta .builder-section-control{height:auto;margin:0 0 0 14px;border:0;border-radius:0;background:none;overflow:visible;gap:2px}
.workbench-deck-meta .builder-section-control button{flex:none;padding:3px 10px 5px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font:600 var(--text-s) system-ui}
.workbench-deck-meta .builder-section-control button:hover{color:var(--ink)}
.workbench-deck-meta .builder-section-control button.active{border-bottom-color:var(--green2);background:none;color:var(--ink)}
.workbench-deck-meta .builder-section-control button:focus-visible{outline:2px solid var(--green2);outline-offset:-2px}
/* The add box is a sensible width rather than the whole row; Display keeps the far end. */
.construction-sections>.builder-card-toolbar{flex:0 1 380px;max-width:380px;margin:0}
.construction-sections{justify-content:space-between}
@media(max-width:620px){.workbench-deck-meta .builder-section-control{flex:1 1 100%;margin:4px 0 0}.construction-sections>.builder-card-toolbar{flex:1 1 100%;max-width:none}}
/* Folder tabs (2026-10-30, Brett): outlined in the deck panel's own border colour and set down onto
   the panel's top edge, so the open tab has no bottom line and runs into the page below it, like
   the tab of a folder. The panel's border is `color-mix(gold 26%, line)` (notifications.css). */
@media(min-width:621px){
  .workbench-deck-meta .builder-section-control{position:relative;z-index:7;top:8px;align-self:flex-end;gap:4px;margin-left:18px}
  .workbench-deck-meta .builder-section-control button{padding:6px 14px 7px;border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--muted)}
  .workbench-deck-meta .builder-section-control button:hover{background:color-mix(in srgb,var(--surface) 80%,transparent)}
  .workbench-deck-meta .builder-section-control button.active{border-bottom-color:var(--surface);background:var(--surface);color:var(--ink)}
}
/* The decklist's own scroll box (app.js sizeDeckCards, 2026-10-30): from where the list starts to
   the bottom of the window, so the cards disappear under the add box and Display. */
@media(min-width:851px){
  .builder-page #deck-cards{max-height:var(--deck-cards-height,none);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
}
/* The decklist's sideways scrollbar, at the top under the add box (app.js syncTopScroller): slim,
   in the deck's colours, and only there when the list is wider than its box. */
.deck-cards-hscroll{height:6px;margin:2px 0 8px;overflow-x:auto;overflow-y:hidden}
/* Chrome and Safari take the styled bar below; the standard properties would override it there,
   so they are for browsers without it (Firefox). */
@supports not selector(::-webkit-scrollbar){.deck-cards-hscroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--copper) 38%,transparent) color-mix(in srgb,var(--ink) 4%,transparent)}}
.deck-cards-hscroll::-webkit-scrollbar-button{display:none}
.deck-cards-hscroll>div{height:1px}
.deck-cards-hscroll::-webkit-scrollbar{height:5px}
.deck-cards-hscroll::-webkit-scrollbar-track{border-radius:999px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.deck-cards-hscroll::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--copper) 38%,transparent)}
.deck-cards-hscroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--copper) 70%,transparent)}
@media(min-width:851px){.builder-page #deck-cards.has-top-scroll{overflow-x:hidden}}

/* Match the warm surfaces and outlined controls used in the refreshed library. */
.builder-page .construction-toolbar{border-bottom-color:color-mix(in srgb,var(--gold) 26%,var(--line));background:var(--surface)}
.builder-page .construction-sections{justify-content:flex-start;gap:10px;padding:8px;border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--surface-raised) 65%,var(--surface));box-shadow:0 2px 7px color-mix(in srgb,var(--inverse) 5%,transparent)}
.builder-page .construction-sections>.builder-card-toolbar{display:flex;flex:0 1 540px;flex-direction:row;max-width:540px;min-width:0;gap:8px}
.builder-page .builder-add-card{min-width:0}
.builder-page .builder-add-card>#builder-card-search{height:38px;border-radius:7px;background:var(--surface);font-family:system-ui}
.builder-page #builder-search-catalog,.builder-page .construction-sections>.deck-display-toggle,.builder-page .construction-sections>.analysis-toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line));border-radius:7px;background:var(--surface-raised);color:var(--accent-strong);font:600 var(--text-s)/1.2 system-ui;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
.builder-page .construction-sections>.deck-display-toggle{margin-left:auto;gap:6px}
.builder-page #builder-search-catalog:hover,.builder-page .construction-sections>button:hover{border-color:var(--accent);background:var(--accent-soft)}
.builder-page #builder-search-catalog:focus-visible,.builder-page .construction-sections>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.builder-page .construction-sections>.deck-display-toggle[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:620px){.builder-page .construction-sections>.builder-card-toolbar{flex:1 1 100%;max-width:none;order:-1}.builder-page #builder-search-catalog{padding:0 10px}.builder-page .builder-add-card-dropdown{min-width:100%;width:min(330px,calc(100vw - 80px))}}

/* What the deck already holds of a search result (2026-11-05). */
.builder-card-result-held{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--green2) 18%,transparent);color:var(--green2);font:600 var(--text-2xs)/1.4 system-ui;font-style:normal}
.builder-card-result-held.considering{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--muted)}
.builder-card-result-add:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* Display's dropdowns as pills, matching the List · Cards · Cascade switch beside them (Brett,
   2026-11-05): the same 36px height, fill, ring and type. */
.deck-display-controls .deck-grouping-control select{height:36px;padding:0 30px 0 14px;border:0;border-radius:999px;background-color:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);font:600 13px/36px system-ui;letter-spacing:0;text-transform:none;cursor:pointer}
.deck-display-controls .deck-grouping-control select:hover{background-color:color-mix(in srgb,var(--ink) 13%,transparent)}
.deck-display-controls .deck-grouping-control select option{background:var(--surface-raised);color:var(--ink)}
.deck-display-controls>label:not(.deck-grouping-control){font:600 13px system-ui;letter-spacing:0;text-transform:none}

/* The builder scrolls as one page (2026-10-02, at the user's direction), as the Collection does:
   the decklist used to scroll inside a box of its own. The analysis column sticks beside it and
   scrolls itself only when taller than the window; the toolbar sticks under the site header. */
main.builder-page{display:flex;width:100%;max-width:1920px;min-height:calc(100vh - 76px);padding:0 clamp(12px,1.8vw,34px) 10px;flex-direction:column}.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:var(--text-2xs)}.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{padding:0}.construction-layout{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start}.construction-sidebar{position:sticky;top:76px;height:calc(100vh - 76px);min-height:0;min-width:0;background:var(--surface-muted);border-right:1px solid var(--line);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.construction-main{min-width:0;padding:clamp(20px,2vw,36px)}#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}@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-main{height:auto;padding:18px;overflow:visible}#assistant-proposals{width:calc(100vw - 20px);max-height:calc(100vh - 40px);padding:20px}}

/* --- The analysis drawer -------------------------------------------------------------------
 *
 * `@media(max-width:850px){.construction-sidebar{display:none}}` used to live in the block
 * above. It meant Deck health, Mana and Composition did not exist on a phone at all — the
 * "Mobile analysis" roadmap item read as though those panels were cramped, and they were
 * absent. They are a left-edge drawer now, opened from the toolbar, so they cost no vertical
 * space on a screen whose toolbar already spends a fifth of it.
 *
 * Left edge because the site nav drawer comes from the right. */
.analysis-toggle{display:none;height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface-raised);color:var(--muted);font:700 var(--text-s)/1 inherit;cursor:pointer}
.analysis-scrim{display:none}
.analysis-close-row{display:none}

@media(max-width:850px){
  .analysis-toggle{display:inline-flex;align-items:center}
  /* `top:0`, not below the topbar: the panel is a full-height sheet and the bar it would sit
     under is sticky at z-index 10, so anything less would put the topbar over the drawer. */
  .construction-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:40;width:min(320px,86vw);height:auto;padding-bottom:20px;overflow-y:auto;border-right:1px solid var(--line);background:var(--surface-muted);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform .22s ease}
  .analysis-open .construction-sidebar{transform:none}
  .analysis-scrim{position:fixed;inset:0;z-index:39;display:block;background:var(--backdrop)}
  .analysis-scrim[hidden]{display:none}
  /* Sticky so the way out stays in reach however far the panels are scrolled. */
  .analysis-close-row{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface-muted)}
  .analysis-close{min-height:36px;padding:6px 12px;font-size:var(--text-s);font-weight:700}
}

@media(prefers-reduced-motion:reduce){.construction-sidebar{transition:none}}

@media(min-width:851px){
  .construction-toolbar{position:sticky;top:76px;z-index:6;margin:calc(-1 * clamp(20px,2vw,36px)) calc(-1 * clamp(20px,2vw,36px)) 4px;padding:10px clamp(20px,2vw,36px) 8px;background:var(--surface)}
  .builder-page .construction-toolbar{margin-top:-8px}
}

#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:var(--text-s)/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:var(--text-s)/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}

/* The Create a deck and Create a folder dialogs (new-deck-dialog.js, new-folder-dialog.js, UI audit
   2026-11-02), each shared by Deck Builder and the Decks page, under `.create-dialog`. Sentence-case labels instead of the site-wide small-capital `label` rule, rounded
   fields, Folder and Visibility side by side, and the Commander starts as one three-way switch
   with a line on the chosen one. Kept compact so Create stays on screen with a list pasted. */
dialog.create-dialog{width:min(480px,92vw);border-radius:14px}
.create-dialog form{padding:22px 26px 20px}
.create-dialog h2{margin:0 0 14px;font:500 var(--text-3xl)/1.1 Georgia,serif}
.create-dialog label,.create-dialog legend{color:var(--ink);font:600 var(--text-s)/1.3 system-ui;letter-spacing:0;text-transform:none}
.create-dialog .new-deck-field{display:grid;gap:6px;margin:0 0 12px}
.create-dialog small,.create-dialog .commander-picker>label>small{color:var(--muted);font:400 var(--text-xs)/1.45 system-ui;letter-spacing:0;text-transform:none}
.create-dialog .new-deck-field>span small{margin-left:4px}
.create-dialog input:not([type=radio]),.create-dialog select,.create-dialog textarea{width:100%;margin:0;border-radius:8px}
.create-dialog input:not([type=radio]),.create-dialog select{height:38px;padding-top:0;padding-bottom:0;line-height:36px}
.create-dialog .new-deck-import-field textarea{min-height:96px;padding:8px 12px;line-height:1.45}
.create-dialog .new-deck-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin:0 0 12px}
.create-dialog .new-deck-pair>.new-deck-field{margin:0}
.create-dialog .new-deck-pair-note{grid-column:1/-1;margin-top:6px}
.create-dialog .commander-picker{margin:0 0 12px}
.create-dialog .commander-picker>label{margin:0}
.create-dialog .commander-start-mode{display:grid;gap:6px;margin:0 0 12px;padding:0;border:0}
.create-dialog .commander-start-mode.hidden{display:none}
.create-dialog .commander-start-mode legend{float:left;width:100%;margin:0 0 6px;padding:0}
.create-dialog .commander-start-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.create-dialog .commander-start-options label{position:relative;display:flex;align-items:center;justify-content:center;min-height:32px;margin:0;padding:4px 8px;border-radius:8px;color:var(--muted);font:600 var(--text-xs)/1.2 system-ui;text-align:center;cursor:pointer}
.create-dialog .commander-start-options label:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.create-dialog .commander-start-options input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.create-dialog .commander-start-options label:has(input:checked){background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.create-dialog .commander-start-options label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.create-dialog .dialog-actions{margin-top:4px}
.create-dialog .dialog-actions button{min-height:38px;padding:0 18px;border-radius:8px}
@media(max-width:420px){.create-dialog .new-deck-pair{grid-template-columns:1fr;gap:12px 0}.create-dialog .new-deck-pair-note{margin-top:0}}
.create-dialog .create-dialog-note{margin-top:2px}
/* Declare commander joined the shared dialogs' look (Brett, 2026-11-05): its explanation is a note
   under the title, like the notes under the Create dialog's fields, not a paragraph of body text. */
.create-dialog p.declare-commander-note{margin:-6px 0 14px;color:var(--muted);font:400 var(--text-xs)/1.45 system-ui}
/* The picker's results float over the fields below them in Create a deck; Declare commander has
   none below, so a floating list ran off the dialog's foot and made it scroll. Here it is in flow. */
.declare-commander-dialog .commander-results{position:static;margin-top:6px}
dialog.new-folder-dialog{width:min(400px,92vw)}
/* A button waiting on the form (Move before a new destination, Create while a paste has a bad line)
   looks it, rather than staying the full accent colour. */
.create-dialog .dialog-actions button:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.6)}
/* Rename (library-prompts.js) and every confirmation (confirm-dialog.js), 2026-11-03: the message reads as prose, and a destructive button is the one red choice. */
.create-dialog .confirm-dialog-body{margin:0 0 18px;color:var(--ink);font:400 var(--text-base)/1.55 system-ui;overflow-wrap:anywhere}.create-dialog .confirm-dialog-choices{display:contents}.create-dialog .confirm-dialog-body p{margin:0 0 8px}.create-dialog .confirm-dialog-body p:last-child{margin-bottom:0}
/* Import decklist joined the shared dialogs' look (Brett, 2026-11-05): the note under the title,
   label-over-field rows, a rounded list box, and the check as a muted line with problems in red,
   as Create a deck's "Paste a list" shows them. Wider than the others, for the list. */
#deck-import-dialog.create-dialog{width:min(640px,94vw)}
/* Import a card package, the same way (Brett, 2026-11-05); its count line reuses .deck-import-preview. */
.create-dialog p.package-import-note{margin:-6px 0 14px;color:var(--muted);font:400 var(--text-xs)/1.45 system-ui}
.create-dialog p.deck-import-note{margin:-6px 0 14px;color:var(--muted);font:400 var(--text-xs)/1.45 system-ui}
.create-dialog p.deck-import-note strong{color:var(--ink);font-weight:600}
#deck-import-dialog #deck-import-text{min-height:300px;border-radius:8px;padding:10px 12px}
.deck-import-preview{margin:-4px 0 14px;color:var(--muted);font:400 var(--text-xs)/1.5 system-ui}
.deck-import-preview strong{color:var(--ink);font-weight:600}
.deck-import-preview .deck-import-problem{color:var(--danger);font-weight:600}
.create-dialog .dialog-actions .danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}.create-dialog .dialog-actions .danger:hover:not(:disabled){background:var(--danger-soft)}

#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:var(--text-2xs);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-list-field[hidden]{display:none}
#deck-export-considering,#deck-export-sideboard{margin-top:16px}
#deck-export-considering .dialog-description,#deck-export-sideboard .dialog-description{margin:0}
#deck-export-considering button,#deck-export-sideboard button{align-self:flex-start}
#deck-export-text,#deck-export-considering-text,#deck-export-sideboard-text{display:block;width:100%;min-height:340px;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);padding:14px;font:var(--text-s)/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:0;text-transform:none;resize:vertical}
#deck-export-considering-text,#deck-export-sideboard-text{min-height:110px}
@media(max-width:600px){.deck-export-options{grid-template-columns:1fr}}

/* Export decklist joined the shared dialogs' look (create-dialog in deck-import.css; Brett,
   2026-11-05): the preset's description as a note under it, a rounded options panel with a
   sentence-case legend, rounded preview boxes, and a shorter preview so the dialog fits a laptop
   screen without scrolling. The shared input rule would stretch the checkboxes, hence the reset. */
#deck-export-dialog.create-dialog{width:min(720px,95vw)}
#deck-export-dialog .deck-export-options{margin:4px 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
#deck-export-dialog .deck-export-options legend{padding:0 6px;color:var(--ink);font:600 var(--text-s)/1.3 system-ui;letter-spacing:0;text-transform:none}
#deck-export-dialog .deck-export-options label{font:400 var(--text-s)/1.3 system-ui}
#deck-export-dialog .deck-export-options input[type=checkbox]{width:auto;height:auto;margin:0;line-height:normal}
#deck-export-dialog .deck-export-list-field{margin:0 0 12px}
#deck-export-dialog #deck-export-text{min-height:240px;border-radius:8px;padding:10px 12px;line-height:1.5}
#deck-export-dialog #deck-export-considering-text,#deck-export-dialog #deck-export-sideboard-text{min-height:96px;border-radius:8px;padding:10px 12px;line-height:1.5}
#deck-export-dialog #deck-export-considering,#deck-export-dialog #deck-export-sideboard{margin:0 0 12px}
#deck-export-dialog #deck-export-considering button,#deck-export-dialog #deck-export-sideboard button{min-height:34px;padding:0 14px;border-radius:8px}

/* The Collection page (reorganised 2026-10-01, at the user's direction).
 *
 * A pinned bar on top (the views, Add a card, the scope and the CSV menu), a sticky overview column on the left (totals,
 * highlights, the sets closest to completion, recent activity), and the collection itself on the
 * right, in My cards or Set completion. The page scrolls as a whole; each view's search and filter
 * row sticks under the site header, so the controls never scroll away and there is no list inside
 * a list. Below 1100px the overview becomes a drawer behind an Overview button, because beside the
 * set list it would squeeze the set names. */

:root { --collection-bar-height:66px; --collection-tools-height:70px; } /* measured by collection.js */
.collection-page { max-width:1440px; margin:0 auto; padding:0 28px 18px; }
.collection-visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* The bar (2026-10-01, replacing the page heading): Overview, the two views, Add a card, Full set /
   Base set only and the CSV menu, pinned under the site header. The views' own controls pin under
   it, at the height measured into --collection-bar-height. */
.collection-bar { position:sticky; top:76px; z-index:8; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 -28px 12px; padding:12px 28px; border-bottom:1px solid var(--line); background:var(--paper); }
.collection-add { position:relative; flex:1 1 240px; min-width:0; max-width:420px; }
.collection-csv { position:relative; }
.collection-csv-button { height:42px; padding:0 14px; border-radius:9px; }
.collection-csv-menu { position:absolute; z-index:20; top:calc(100% + 6px); right:0; display:grid; min-width:160px; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); box-shadow:var(--shadow); }
.collection-csv-menu button { padding:9px 12px; border:0; border-radius:7px; background:transparent; color:var(--ink); font-size:var(--text-xs); text-align:left; cursor:pointer; }
.collection-csv-menu button:hover,.collection-csv-menu button:focus-visible { background:var(--surface-sunken); }
.collection-add>input { width:100%; height:42px; margin:0; }
.collection-search-results { position:absolute; z-index:20; top:calc(100% + 6px); right:0; width:min(460px,92vw); 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-search-heading { margin:2px 7px 6px; color:var(--muted); font-size:var(--text-xs); }
.collection-show-all { display:block; width:100%; margin-top:6px; padding:9px 7px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--green2); font-size:var(--text-xs); text-align:left; cursor:pointer; }
.collection-show-all:hover,.collection-show-all:focus-visible { background:var(--surface-sunken); }
.collection-search-hint { margin:6px 7px 2px; color:var(--muted); font-size:var(--text-2xs); }

.collection-layout { display:grid; grid-template-columns:300px minmax(0,1fr); align-items:start; gap:16px; }
/* Sticky beside the cards; it scrolls itself only if it is taller than the window. */
.collection-sidebar { position:sticky; top:calc(88px + var(--collection-bar-height)); display:grid; align-content:start; gap:12px; max-height:calc(100dvh - 100px - var(--collection-bar-height)); overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin; }
.collection-sidebar-heading { display:none; }
.collection-overview-button,.collection-overview-scrim { display:none; }
.collection-sidebar>.panel { padding:14px 16px; }
.collection-sidebar h2 { margin:0 0 8px; color:var(--muted); font-size:var(--text-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.collection-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.collection-stats>div { display:grid; gap:2px; min-width:0; }
.collection-stats span { color:var(--muted); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; }
.collection-stats strong { color:var(--gold); font:var(--text-xl)/1.1 Georgia,serif; font-variant-numeric:tabular-nums; }
.collection-highlights { display:grid; gap:12px; }
.collection-highlights article { display:grid; gap:5px; }
.collection-highlights article+article { padding-top:12px; border-top:1px solid var(--line); }
.collection-highlights article>span { color:var(--muted); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; }
.collection-highlights article>strong,.collection-highlights article>a { color:var(--ink); font:var(--text-m)/1.25 Georgia,serif; }
.collection-highlights article>a:hover { color:var(--green2); }
.collection-highlights small { color:var(--muted); font-size:var(--text-2xs); }
.valuable-printing-card { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:start; gap:10px; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; }
.valuable-printing-card>img,.valuable-printing-placeholder { display:block; width:62px; aspect-ratio:488/680; object-fit:cover; border-radius:5%; box-shadow:0 4px 10px var(--shadow-tint); }
.valuable-printing-placeholder { display:grid; place-items:center; padding:6px; border:1px solid var(--line); background:var(--surface-sunken); color:var(--muted); font-size:var(--text-2xs); text-align:center; }
.valuable-printing-card>span { display:grid; gap:3px; min-width:0; }
.valuable-printing-card strong { font:var(--text-base)/1.2 Georgia,serif; }
.valuable-printing-card:hover strong { color:var(--green2); }
#collection-dashboard-category-list { display:grid; }
.collection-dashboard-category { display:grid; grid-template-columns:minmax(0,1fr) 38px; grid-template-rows:auto auto; align-items:center; gap:4px 10px; padding:9px 2px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.collection-dashboard-category:last-child { border-bottom:0; }
.collection-dashboard-category:hover { color:var(--gold); }
.collection-dashboard-category>span:first-child { display:grid; gap:2px; min-width:0; }
.collection-dashboard-category strong { overflow:hidden; font-size:var(--text-s); text-overflow:ellipsis; white-space:nowrap; }
.collection-dashboard-category small { color:var(--muted); font-size:var(--text-2xs); }
.collection-dashboard-category>b { grid-row:1; grid-column:2; text-align:right; font-size:var(--text-xs); }
.collection-dashboard-progress { grid-column:1 / -1; height:6px; border-radius:99px; background:var(--surface-sunken); overflow:hidden; }
.collection-dashboard-progress i { display:block; height:100%; border-radius:inherit; background:var(--gold); }
.collection-dashboard-empty { padding:6px 0; color:var(--muted); }
.collection-dashboard-empty small { font-size:var(--text-xs); }
#collection-history-list { display:grid; }
.collection-history-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"source action" "copy action"; align-items:center; gap:3px 10px; padding:9px 0; border-bottom:1px solid var(--line); }
.collection-history-entry:last-child { border-bottom:0; }
.collection-history-entry.undone { opacity:.58; }
.collection-history-source { grid-area:source; display:flex; align-items:center; gap:8px; }
.collection-history-copy { grid-area:copy; display:grid; gap:2px; min-width:0; }
.collection-history-source>span { padding:2px 7px; border-radius:99px; background:var(--surface-sunken); font-size:var(--text-2xs); 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:var(--text-2xs); }
.collection-history-copy strong { font-size:var(--text-xs); }
.collection-history-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collection-history-entry button { grid-area:action; padding:6px 9px; font-size:var(--text-xs); white-space:nowrap; }

.collection-main { display:flex; flex-direction:column; min-width:0; }
.collection-overview-button { align-items:center; height:42px; padding:0 14px; border-radius:9px; }
.collection-view-toggle { display:inline-flex; align-self:flex-start; gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.collection-view-toggle button { padding:8px 16px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; }
.collection-view-toggle button:hover { color:var(--ink); }
.collection-view-toggle button.active { background:var(--accent-soft); color:var(--green2); }
/* Full set / Base set only: what completion, price to complete, the set sorts and the highlights measure. */
.collection-scope-toggle { display:inline-flex; gap:2px; margin-left:auto; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.collection-scope-toggle button { padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:var(--text-xs); font-weight:700; cursor:pointer; white-space:nowrap; }
.collection-scope-toggle button:hover { color:var(--ink); }
.collection-scope-toggle button.active { background:var(--surface-sunken); color:var(--gold); }
.collection-panel { display:flex; flex-direction:column; padding:16px; }
.collection-panel.hidden { display:none; }
/* Each view's controls stick under the site header while the cards scroll beneath them. */
.collection-tools { position:sticky; top:calc(76px + var(--collection-bar-height)); z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:-16px -16px 12px; padding:16px 16px 12px; border-bottom:1px solid var(--line); background:var(--surface); }
.collection-tools>input,.collection-tool-row>input { flex:1 1 220px; min-width:0; height:42px; margin:0; }
.collection-card-tools { display:grid; }
.collection-tool-row,.collection-filter-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.collection-filters-button { display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.collection-filters-button:hover,.collection-filters-button[aria-expanded="true"] { border-color:var(--line-strong); background:var(--surface-raised); }
.collection-filters-button.active { border-color:var(--positive); color:var(--positive); }
.collection-filter-count { display:grid; min-width:20px; height:20px; padding:0 6px; place-items:center; border-radius:99px; background:var(--accent-soft); color:var(--green2); font-size:var(--text-2xs); }
.collection-filters-clear { height:42px; padding:0 12px; font-size:var(--text-xs); }
.collection-select { display:flex; align-items:center; gap:7px; height:42px; margin:0; padding-left:10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font-size:var(--text-xs); letter-spacing:0; text-transform:none; white-space:nowrap; }
.collection-select select { width:auto; min-width:92px; height:40px; margin:0; padding:7px 28px 7px 8px; border:0; background:var(--surface-raised); color:var(--ink); font-size:var(--text-xs); }
.collection-select select option { background:var(--surface-raised); color:var(--ink); }
.collection-only-control { display:flex; align-items:center; gap:7px; height:42px; margin:0; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font-size:var(--text-xs); white-space:nowrap; }
.collection-only-control input { width:auto; margin:0; accent-color:var(--accent); }
.collection-only-control:has(input:checked) { border-color:var(--positive); color:var(--positive); }
.collection-result-count { flex:0 0 auto; margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); }

/* My cards: a grid of owned printings, each with its finish's count. */
.collection-owned-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); align-content:start; gap:8px; }
.collection-owned-list>.state-panel { grid-column:1 / -1; }
.collection-owned-card { display:grid; grid-template-columns:58px minmax(0,1fr); grid-template-rows:auto auto; align-items:start; gap:6px 12px; padding:8px 10px 8px 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); cursor:pointer; }
.collection-owned-card:hover { border-color:var(--gold); }
.collection-owned-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.collection-owned-card>img,.collection-owned-card>.collection-card-placeholder { grid-row:1 / span 2; display:block; width:58px; aspect-ratio:488/680; object-fit:cover; border-radius:4px; background:var(--surface-sunken); font-size:var(--text-2xs); }
.collection-owned-card .collection-finish { grid-column:2; grid-template-columns:minmax(0,1fr) 30px 28px 30px; cursor:default; }
.collection-owned-card .collection-finish>span { display:flex; align-items:baseline; gap:8px; }
.collection-more { flex:0 0 auto; align-self:center; margin-top:10px; padding:9px 16px; }

/* Set completion: every real set in one list, newest first. */
.collection-set-list { display:grid; align-content:start; gap:8px; }
.collection-set-card { display:grid; grid-template-columns:52px minmax(0,1fr) 54px 120px 18px; align-items:center; gap:14px; width:100%; min-height:64px; padding:8px 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; flex-shrink:0; width:44px; height:44px; aspect-ratio:1; place-items:center; border-radius:50%; background:var(--preview-light-paper); overflow:hidden; }
.collection-set-symbol>img { display:block; width:68%; height:68%; min-width:0; min-height:0; object-fit:contain; }
.collection-set-name { display:grid; min-width:0; }
.collection-set-name strong { overflow:hidden; font:var(--text-l)/1.2 Georgia,serif; text-overflow:ellipsis; white-space:nowrap; }
.collection-set-name small { margin-top:3px; color:var(--muted); font-size:var(--text-xs); }
.collection-set-arrow { color:var(--muted); font-size:var(--text-xl); }
.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:var(--text-2xs); }
.collection-set-owned-count { display:grid; color:var(--ink); font-size:var(--text-s); }
.collection-set-owned-count small { margin-top:2px; color:var(--muted); font-size:var(--text-2xs); }

/* A set: its cards (one scroll, with the pagination, then its tokens and Art Series) beside its summary. */
.collection-set-card-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; align-items:start; gap:16px; }
.collection-set-cards { min-width:0; }
.set-detail-tools #collection-back { height:42px; padding:0 12px; white-space:nowrap; }
.collection-list { display:grid; gap:8px; }
.collection-set-card-row { display:grid; grid-template-columns:62px minmax(0,1fr) minmax(250px,auto); align-items:center; gap:14px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); cursor:pointer; }
.collection-set-card-row:hover { border-color:var(--gold); }
/* Cards you do not own are dimmed, so a set reads as a checklist; hovering or focusing restores them. */
.collection-set-card-row.unowned>img,.collection-set-card-row.unowned .collection-card-copy,.collection-binder-card.unowned .collection-binder-image img,.collection-binder-card.unowned .collection-binder-caption { opacity:.45; filter:grayscale(.6); transition:opacity .15s ease,filter .15s ease; }
.collection-set-card-row.unowned:hover>img,.collection-set-card-row.unowned:hover .collection-card-copy,.collection-set-card-row.unowned:focus-visible>img,.collection-set-card-row.unowned:focus-visible .collection-card-copy,.collection-binder-card.unowned:hover .collection-binder-image img,.collection-binder-card.unowned:hover .collection-binder-caption,.collection-binder-card.unowned:focus-visible .collection-binder-image img { opacity:1; filter:none; }
/* Binder view: the card images in pockets, as in a binder page. */
.collection-list.binder { grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; }
.collection-binder-card { display:grid; align-content:start; gap:6px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); cursor:pointer; }
.collection-binder-card:hover { border-color:var(--gold); }
.collection-binder-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.collection-binder-image { position:relative; display:block; }
.collection-binder-image img,.collection-binder-image .collection-card-placeholder { display:grid; width:100%; aspect-ratio:488/680; place-items:center; object-fit:cover; border-radius:4.75% / 3.5%; background:var(--surface-sunken); color:var(--muted); font-size:var(--text-2xs); text-align:center; }
.collection-binder-count { position:absolute; top:6px; right:6px; padding:2px 7px; border-radius:99px; background:var(--inverse-2); color:var(--on-inverse); font-size:var(--text-2xs); box-shadow:0 2px 6px var(--shadow-tint); }
.collection-binder-caption { overflow:hidden; font-size:var(--text-xs); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.collection-binder-card .collection-finish { grid-template-columns:minmax(0,1fr) 26px 22px 26px; gap:4px; }
.collection-binder-card .collection-finish button { width:26px; height:26px; }
.collection-binder-card .collection-filled-by { color:var(--gold); font-size:var(--text-2xs); font-weight:700; }
.collection-layout-toggle { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.collection-layout-toggle button { height:34px; padding:0 12px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.collection-layout-toggle button.active { background:var(--accent-soft); color:var(--green2); }
.collection-set-card-row:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.collection-set-card-row>img,.collection-set-card-row>.collection-card-placeholder { display:block; width:62px; aspect-ratio:488/680; object-fit:cover; border-radius:4px; background:var(--surface-sunken); }
.collection-card-copy { display:grid; gap:1px; min-width:0; }
.collection-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collection-card-copy span,.collection-card-copy small { overflow:hidden; color:var(--muted); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.collection-card-copy .collection-deck-usage { margin-top:3px; font-size:var(--text-2xs); }
.collection-card-copy .collection-deck-usage.used { color:var(--green2); font-weight:700; }
.collection-card-copy .collection-filled-by { color:var(--gold); font-size:var(--text-2xs); font-weight:700; }
.collector-number { color:var(--muted); font:var(--text-xs) system-ui; }
.collection-finish-list { display:grid; gap:6px; cursor:default; }
.collection-finish { display:grid; grid-template-columns:minmax(58px,1fr) 30px 28px 30px; align-items:center; gap:5px; }
.collection-finish>span { display:grid; }
.collection-finish>span em { color:var(--muted); font-size:var(--text-xs); font-style:normal; text-transform:capitalize; }
.collection-finish>span small { color:var(--ink); font-size:var(--text-2xs); font-weight:700; }
.collection-finish button { width:30px; height:30px; padding:0; }
.collection-finish strong { text-align:center; font-variant-numeric:tabular-nums; }
.collection-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 10px; color:var(--muted); font-size:var(--text-s); }
#collection-pagination-bottom { margin:10px 0 0; }
.collection-pagination.single-page>div { visibility:hidden; }
#collection-pagination-bottom.single-page { display:none; }
.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-extra { margin-top:18px; padding-top:14px; border-top:1px dashed var(--line-strong); }
.collection-set-extra>header { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:10px; }
.collection-set-extra h3 { margin:0; font:var(--text-l) Georgia,serif; }
.collection-set-extra small { color:var(--muted); font-size:var(--text-xs); }
.collection-set-summary { position:sticky; top:calc(88px + var(--collection-bar-height) + var(--collection-tools-height)); max-height:calc(100dvh - 100px - var(--collection-bar-height) - var(--collection-tools-height)); overflow-y:auto; scrollbar-width:thin; 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:var(--text-base)/1.2 Georgia,serif; text-overflow:ellipsis; }
.collection-summary-heading small { margin-top:3px; color:var(--muted); font-size:var(--text-2xs); }
.collection-summary-ring { position:relative; display:grid; width:120px; height:120px; margin:16px 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:var(--text-2xl)/1 Georgia,serif; }
.collection-summary-ring>div>span { margin-top:5px; color:var(--muted); font-size:var(--text-2xs); 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:var(--text-2xs); }
.collection-set-summary dd { margin:0; font-weight:700; font-size:var(--text-xs); }
/* Completion by rarity; a row filters the set's cards to that rarity, and clicking it again clears it. */
.collection-rarity-breakdown { display:grid; gap:2px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.collection-rarity-breakdown h3 { margin:0 0 4px; color:var(--muted); font-size:var(--text-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.collection-rarity-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:2px 8px; width:100%; padding:6px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink); font-size:var(--text-xs); text-align:left; cursor:pointer; }
.collection-rarity-row:hover { background:var(--surface-sunken); }
.collection-rarity-row.active { border-color:var(--gold); background:var(--surface-sunken); }
.collection-rarity-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collection-rarity-row small { grid-column:2 / -1; color:var(--muted); font-size:var(--text-2xs); font-variant-numeric:tabular-nums; }
.collection-rarity-row b { text-align:right; font-size:var(--text-2xs); }
.collection-rarity-row .collection-dashboard-progress { height:4px; }
/* Fixed colours, ringed so each reads on light and dark surfaces alike. Qualified by .rarity-dot
   because card-dialog.css styles the same .rarity-* classes as badges and loads later. */
.rarity-dot { width:10px; height:10px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 1px var(--line-strong); }
.collection-rarity-row .rarity-dot { grid-row:1; }
.rarity-dot.rarity-common { background:var(--rarity-common); box-shadow:0 0 0 1px var(--rarity-common-ring); }
.rarity-dot.rarity-uncommon { background:var(--rarity-uncommon); }
.rarity-dot.rarity-rare { background:var(--rarity-rare); }
.rarity-dot.rarity-mythic { background:var(--rarity-mythic); }
.rarity-dot.rarity-special,.rarity-dot.rarity-bonus { background:var(--rarity-special); }
/* Below 1000px the summary sits above the cards, folded to one line that opens it. */
.collection-summary-toggle { display:none; }
.collection-export-unowned { width:100%; margin-top:12px; padding:9px 10px; font-size:var(--text-xs); }

/* Import and export. */
.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:var(--text-s); 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-export-format { display:grid; gap:6px; margin-top:12px; font-size:var(--text-s); }
#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:var(--text-xs)/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:var(--text-xs); }
.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; }

/* Narrower screens. Below 1100px the overview is a drawer over the page, opened by the Overview
   button beside the view toggle, so the collection gets the full width. */
@media(max-width:1100px) {
  .collection-layout { grid-template-columns:minmax(0,1fr); }
  .collection-overview-button { display:inline-flex; }
  .collection-sidebar { position:fixed; top:76px; bottom:0; left:0; z-index:30; width:min(320px,88vw); max-height:none; padding:14px; border-right:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); visibility:hidden; transform:translateX(-105%); transition:transform .22s ease,visibility 0s linear .22s; }
  .collection-overview-open .collection-sidebar { visibility:visible; transform:none; transition:transform .22s ease; }
  .collection-sidebar-heading { display:flex; align-items:center; justify-content:space-between; }
  .collection-sidebar-heading h2 { margin:0; }
  .collection-overview-scrim { position:fixed; inset:76px 0 0; z-index:29; display:block; background:var(--backdrop); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .collection-overview-open .collection-overview-scrim { opacity:1; pointer-events:auto; }
}
@media(max-width:1000px) {
  .collection-set-card-layout { grid-template-columns:1fr; }
  .collection-set-summary { position:static; grid-row:1; max-height:none; overflow:visible; padding:10px 12px; }
  .collection-summary-toggle { display:flex; align-items:center; gap:10px; width:100%; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; }
  .collection-summary-toggle .collection-set-symbol { width:34px; height:34px; flex:0 0 34px; }
  .collection-summary-toggle>span:nth-child(2) { display:grid; gap:2px; min-width:0; margin-right:auto; }
  .collection-summary-toggle strong { font-size:var(--text-s); }
  .collection-summary-toggle small { color:var(--muted); font-size:var(--text-2xs); }
  .collection-summary-toggle>i { color:var(--muted); font-style:normal; }
  .collection-set-summary:not(.open) .collection-summary-body { display:none; }
  .collection-set-summary.open .collection-summary-body { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .collection-summary-heading { display:none; }
  .collection-summary-ring { display:none; }
  /* Each figure stacked, label over value, so none of them run together. */
  .collection-set-summary dl { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px 14px; }
  .collection-set-summary dl>div { display:grid; justify-content:start; gap:2px; }
  .collection-set-summary dd { font-size:var(--text-s); }
  .collection-rarity-breakdown { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:4px 12px; }
  .collection-rarity-breakdown h3 { grid-column:1 / -1; }
}
@media(max-width:800px) {
  .collection-page { padding:0 12px 24px; }
  /* On a phone the bar is three rows, too tall to pin as well as the view's controls, so it
     scrolls away and only the controls stay pinned under the site header. */
  .collection-bar { position:static; margin:0 -12px 12px; padding:10px 12px; gap:8px; }
  .collection-tools { top:76px; }
  /* A set's controls are five rows on a phone; pinned they would cover half the screen. */
  .set-detail-tools { position:static; }
  .collection-only-control { flex:1 1 calc(50% - 5px); min-width:0; }
  .collection-add { order:5; flex:1 1 100%; max-width:none; }
  .collection-scope-toggle { margin-left:0; }
  .collection-list.binder { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .collection-panel { padding:12px; }
  .collection-tools { margin:-12px -12px 12px; padding:12px; }
  .collection-owned-list { grid-template-columns:1fr; }
  .collection-tools>input,.collection-tool-row>input { flex-basis:100%; }
  .collection-select { flex:1 1 calc(50% - 5px); min-width:0; padding-left:8px; }
  .collection-select select { flex:1; min-width:0; padding-right:22px; }
  .collection-set-card { grid-template-columns:44px minmax(0,1fr) 48px; gap:10px; padding:8px 10px; }
  .collection-set-owned-count,.collection-set-arrow { display:none; }
  .collection-set-card-row { grid-template-columns:54px minmax(0,1fr); }
  .collection-set-card-row>.collection-finish-list { grid-column:1 / -1; }
  .collection-pagination { flex-wrap:wrap; }
}

/* Binder view at a binder page's size (see renderSetDetail): three rows of pockets, 3 across for a
   9-pocket page and 4 for a 12-pocket page. 18 and 24 are two of those pages, one above the other,
   with a gap between them (Brett, 2026-10-12: side by side, eight pockets across left the price and
   buttons overlapping and the card too big for its pocket). Pockets grow to 250px wide, so the page
   uses the panel's width, and stop there so three cards never stretch across a wide screen. */
.collection-list.binder[data-binder-pocket] { --binder-columns:3; grid-template-columns:repeat(var(--binder-columns),minmax(0,250px)); justify-content:center; }
.collection-list.binder:is([data-binder-pocket="12"],[data-binder-pocket="24"]) { --binder-columns:4; }
.collection-list.binder[data-binder-pocket="18"]>:nth-child(n+10):nth-child(-n+12),
.collection-list.binder[data-binder-pocket="24"]>:nth-child(n+13):nth-child(-n+16) { margin-top:18px; }

/* Shared collection pools (2026-10-21): the Share button in the bar, the invitations strip
   above the cards, and the two dialogs (public/collection-pool.js). The member list and invite
   row borrow the deck Collaborators dialog's rules from deck-sharing.css, which is served after
   this sheet, so the overrides below carry a second class rather than relying on order. */
.collection-pool-button { height:42px; padding:0 14px; border-radius:9px; white-space:nowrap; }
.collection-pool-button.active { border-color:var(--green2); background:var(--accent-soft); }
/* Shared or Personal (2026-10-23), for a member who set their own collection aside. */
.collection-view-switch { display:inline-flex; height:42px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface-raised); }
.collection-view-switch.hidden { display:none; }
.collection-view-switch button { padding:0 12px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:inherit; font-size:var(--text-xs); font-weight:600; cursor:pointer; }
.collection-view-switch button.active { background:var(--accent-soft); color:var(--green2); }
.collection-view-switch button:focus-visible { outline:2px solid var(--accent-strong); outline-offset:1px; }
.collection-pool-invitations { margin:0 0 12px; }
.collection-pool-dialog .collection-pool-lead { margin:12px 0; color:var(--muted); font-size:var(--text-s); line-height:1.55; }
.collection-pool-dialog #collection-pool-start { margin-top:6px; }
.deck-sharing-invite.collection-pool-invite { grid-template-columns:minmax(0,1fr) auto; margin-top:16px; }
.collection-pool-dialog .deck-sharing-list li { grid-template-columns:auto minmax(0,1fr) auto; }
.collection-pool-summary span { color:var(--ink); }
.collection-pool-how { margin:0 0 4px; font-size:var(--text-s); }
.collection-pool-how summary { width:fit-content; color:var(--green2); font-weight:600; cursor:pointer; }
.collection-pool-how ul { margin:8px 0 0; padding-left:18px; color:var(--muted); line-height:1.55; }
.collection-pool-how li + li { margin-top:4px; }
.collection-pool-members > header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.collection-pool-members h3 { margin:0; font:var(--text-l) Georgia,serif; }
.collection-pool-members > header span { color:var(--muted); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.collection-pool-members li:first-child { border-top:0; }
.collection-pool-members strong { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.collection-pool-you { color:var(--muted); font-weight:400; font-size:var(--text-s); }
.collection-pool-tag { padding:2px 8px; border-radius:99px; background:var(--accent-soft); color:var(--green2); font:700 var(--text-2xs)/1.5 system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.collection-pool-tag.pending { background:transparent; border:1px dashed var(--line-strong); color:var(--muted); }
.collection-pool-pending .user-avatar { opacity:.5; }
.collection-pool-pending .deck-sharing-person strong { color:var(--muted); }
.collection-pool-row-menu { position:relative; }
.collection-pool-menu-button { width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:var(--text-l); line-height:1; cursor:pointer; }
.collection-pool-menu-button:hover, .collection-pool-menu-button[aria-expanded="true"] { border-color:var(--line); background:var(--surface-raised); color:var(--ink); }
.collection-pool-menu-button:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.card-context-menu.collection-pool-menu { position:absolute; top:calc(100% + 4px); right:0; width:max-content; min-width:190px; z-index:6; }
.card-context-menu.collection-pool-menu button.danger { color:var(--danger); }
.card-context-menu.collection-pool-menu button:focus-visible { outline:2px solid var(--accent-strong); outline-offset:-2px; }
.collection-pool-leave-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:16px; }
.collection-pool-leave-row small { color:var(--muted); font-size:var(--text-xs); }
.link-button.danger { padding:0; border:0; background:none; color:var(--danger); font:inherit; font-size:var(--text-s); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.link-button.danger:hover:not(:disabled) { background:none; }
.link-button.danger:disabled { color:var(--muted); text-decoration:none; cursor:default; }
.collection-pool-join-dialog { width:min(560px,94vw); }
.collection-pool-modes { display:grid; gap:10px; margin:16px 0 0; padding:0; border:0; }
.collection-pool-modes label { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; margin:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-raised); text-transform:none; letter-spacing:0; font-size:var(--text-s); cursor:pointer; }
.collection-pool-modes label:has(input:checked) { border-color:var(--green2); background:var(--accent-soft); }
.collection-pool-modes input { width:auto; margin:3px 0 0; }
.collection-pool-modes span { display:grid; gap:4px; }
.collection-pool-modes small { color:var(--muted); font-size:var(--text-xs); line-height:1.5; }
@media(max-width:620px) {
  .deck-sharing-invite.collection-pool-invite { grid-template-columns:1fr; }
  .collection-pool-dialog .deck-sharing-list li { grid-template-columns:auto minmax(0,1fr) auto; }
}

.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:var(--text-3xl) 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:var(--text-2xs); 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:var(--text-xs); 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:var(--text-2xs); }
.printing-prices em { color:var(--muted); font-style:normal; text-transform:capitalize; }
.printing-prices strong { font-size:var(--text-xs); }
.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:var(--text-xs); }
.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:var(--text-xs); }
.printing-scryfall-link { color:var(--muted); font-size:var(--text-xs); 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:var(--text-xs); 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:var(--text-2xs); 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:var(--text-s); font-weight:650; }
.set-suggestions small { margin-top:2px; color:var(--muted); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; }
.set-suggestions-empty { padding:10px; color:var(--muted); font-size:var(--text-xs); }

/* 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.
 * Every page opens the one dialog (card-info-dialog.js; Card Search's own copy was merged into it
 * on 2026-10-01). The rules address the dialog's single child rather than its 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:var(--text-2xl);cursor:pointer;color:var(--muted)}
.detail-copy h2{font:var(--text-4xl)/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:var(--text-base) Georgia,serif}
.detail-oracle{white-space:pre-line;line-height:1.6;font-size:var(--text-m)}
.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0;color:var(--muted);font-size:var(--text-2xs)}
/* 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:var(--text-2xl) 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-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:var(--text-l)/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:var(--text-2xs);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:var(--text-2xs);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 var(--text-m)/1 inherit}.deck-quantity-static{font:700 var(--text-m)/1 inherit}.deck-quantity-elsewhere{flex:1 0 100%;color:var(--muted);font-size:var(--text-2xs)}.deck-quantity-empty{color:var(--muted);font-size:var(--text-2xs)}

/* --- Redesign, steps 1-3 (2026-10-01, at the user's direction) ---------------------------
 *
 * 1. Identity: set, name and cost together as the card prints them, then the type line.
 * 2. One actions panel: the deck row and the collection row as matching boxes, under the
 *    identity, so what acts on the card is in one place rather than split around the text.
 * 3. Facts as a grid, the price as a small table per finish, and every format's legality with
 *    its status (the old list stopped at six, which could drop Commander).
 */
.detail-identity-block{display:grid;gap:2px}
.detail-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:10px 0 0}
.detail-copy .detail-title h2{margin:0}
.detail-title .detail-cost{flex:none;padding-top:8px;white-space:nowrap}
.detail-identity-block .detail-type{margin:10px 0 0;padding:9px 0;border-bottom:0}

.detail-actions-panel{display:grid;gap:8px;margin:14px 0 18px}
.detail-panel-row>.deck-quantity,.detail-panel-row>.card-holdings{margin:0}
.detail-panel-row>.card-holdings .deck-quantity{margin:0}
.detail-collection-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--surface-muted)}
.detail-panel-label{color:var(--muted);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase}
.detail-collection-action{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.detail-collection-action select{min-height:32px}
.detail-extra-actions{display:flex;flex-wrap:wrap;gap:8px}

.detail-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.detail-facts>div{min-width:0}
.detail-facts dt{margin:0 0 3px;color:var(--muted);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase}
.detail-facts dd{margin:0;font-size:var(--text-s)}
.detail-identity .mana-symbol-inline{margin-right:2px}
.rarity-badge{display:inline-block;padding:2px 9px;border:1px solid var(--line-strong);border-radius:999px;font-size:var(--text-2xs);font-weight:700}
.rarity-uncommon{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.rarity-rare,.rarity-mythic{border-color:var(--gold);color:var(--gold)}
.rarity-mythic{background:color-mix(in srgb,var(--copper) 16%,transparent)}
.detail-prices{border-collapse:collapse;font-size:var(--text-s)}
.detail-prices th{padding:0 14px 2px 0;color:var(--muted);font-weight:500;text-align:left}
.detail-prices td{padding:0 0 2px;font-weight:700;font-variant-numeric:tabular-nums}

.detail-legality{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.detail-legality h3{margin:0 0 10px;color:var(--muted);font-size:var(--text-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.legality-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 14px;margin:0;padding:0;list-style:none}
.legality-grid li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:3px 0;font-size:var(--text-xs)}
.legality-grid li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legality-grid strong{flex:none;padding:1px 8px;border-radius:999px;font-size:var(--text-2xs);font-weight:700}
.legality-legal strong{background:var(--accent-soft);color:var(--green2)}
.legality-restricted strong{background:var(--warning-soft);color:var(--warning)}
.legality-banned strong{background:var(--danger-soft);color:var(--danger)}
.legality-not_legal strong{color:var(--faint)}
.legality-not_legal>span{color:var(--muted)}
.legality-grid li.current-format{margin:0 -6px;padding:3px 6px;border-radius:5px;background:var(--surface-muted);font-weight:700}
.legality-empty{margin:0;color:var(--muted);font-size:var(--text-xs)}

.detail-scryfall{align-self:flex-start;margin-top:18px;color:var(--muted);font-size:var(--text-xs);text-decoration:none}
.detail-scryfall:hover,.detail-scryfall:focus-visible{color:var(--ink);text-decoration:underline}

@media(max-width:650px){
  .detail-facts{grid-template-columns:1fr 1fr}
  .legality-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* Each format as its own tile (Brett, 2026-10-01: the plain rows ran together). A coloured edge
   says the status at a glance, the pill says it in words, and not-legal tiles recede. */
.legality-grid{gap:6px}
.legality-grid li{padding:6px 9px;border:1px solid var(--line);border-left-width:3px;border-radius:6px;background:var(--surface-muted)}
.legality-grid li.legality-legal{border-left-color:var(--green2)}
.legality-grid li.legality-restricted{border-left-color:var(--warning)}
.legality-grid li.legality-banned{border-left-color:var(--danger)}
.legality-grid li.legality-not_legal{border-left-color:var(--line);background:transparent}
.legality-grid li.current-format{margin:0;padding:6px 9px;border-color:var(--gold);border-left-color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}
/* A long name wraps rather than being cut to "Duel Comman…" in a narrow dialog. */
.legality-grid li>span{overflow:visible;line-height:1.25;white-space:normal}

/* --- The rules box (step 4, 2026-10-01) ---------------------------------------------------
   The Oracle text framed like a card's text box: a paragraph per ability, reminder text quieter,
   flavor text in italics under a rule, and power/toughness, loyalty or defense in the corner. A
   card with faces gets a block per face, each with its own name, cost and type. */
.detail-rules{position:relative;display:grid;gap:12px;margin:0 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);white-space:normal;line-height:1.55;font-size:var(--text-m)}
.detail-face{position:relative;display:grid;gap:8px}
.detail-rules.has-faces .detail-face+.detail-face{padding-top:12px;border-top:1px dashed var(--line)}
.detail-face-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.detail-face-head strong{font:var(--text-base) Georgia,serif}
.detail-face-head small{flex:1 0 100%;color:var(--muted);font-size:var(--text-xs)}
.detail-abilities{display:grid;gap:7px}
.detail-abilities p{margin:0}
.detail-reminder{color:var(--muted);font-style:italic}
.detail-no-text{color:var(--muted);font-style:italic}
.detail-flavor{padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font:italic var(--text-s)/1.5 Georgia,serif}
.detail-flavor p{margin:0}
.detail-stat{justify-self:end;min-width:44px;padding:3px 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-muted);font:700 var(--text-base)/1.2 Georgia,serif;text-align:center;font-variant-numeric:tabular-nums}
.detail-loyalty{border-color:var(--gold);color:var(--gold);clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);padding-bottom:7px}
.detail-defense{border-color:var(--danger);color:var(--danger)}

/* --- The printings strip (step 6, 2026-10-01) ---------------------------------------------
   A row of the card's printings under its text; picking one shows that printing here. */
.detail-printings-strip{margin-top:18px}
.detail-printings-strip>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.detail-printings-strip h3{margin:0;color:var(--muted);font-size:var(--text-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.detail-strip-all{padding:0;border:0;background:none;color:var(--green2);font-size:var(--text-xs);font-weight:700;cursor:pointer}
.detail-strip-all:hover,.detail-strip-all:focus-visible{text-decoration:underline}
.strip-status{margin:0;color:var(--muted);font-size:var(--text-xs)}
.detail-strip-items{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;scroll-snap-type:x proximity}
.detail-strip-printing{display:grid;flex:0 0 76px;gap:5px;padding:5px;border:1px solid var(--line);border-radius:7px;background:var(--surface-muted);color:var(--ink);text-align:left;cursor:pointer;scroll-snap-align:start}
.detail-strip-printing:hover,.detail-strip-printing:focus-visible{border-color:var(--line-strong)}
.detail-strip-printing.current{border-color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent)}
.detail-strip-printing img,.detail-strip-placeholder{display:block;width:100%;aspect-ratio:488/680;border-radius:4px;object-fit:cover;background:var(--surface-sunken)}
.detail-strip-printing>span{display:grid;gap:1px;min-width:0;font-size:var(--text-2xs);line-height:1.25}
.detail-strip-printing strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-strip-printing small{color:var(--muted)}
.detail-strip-printing em{color:var(--gold);font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.detail-strip-more{flex:0 0 auto;align-self:center;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:7px;background:none;color:var(--muted);font-size:var(--text-xs);cursor:pointer}

/* What you have of the card sits under its art (2026-10-01, at the user's direction), and the
   column stays in view while the card's text, printings and legality scroll beside it. */
.detail-media{display:grid;gap:10px;align-self:start}
.detail-media>.detail-actions{margin:0;padding:0;justify-content:center}
.detail-media .detail-actions-panel{margin:4px 0 0}
.detail-media .detail-collection-row{flex-direction:column;align-items:stretch}
.detail-media .detail-collection-action{justify-content:space-between}
.detail-media .detail-collection-action select{flex:1 1 auto}
.detail-media .card-holdings{gap:6px}
.detail-copy .detail-identity-block{margin-bottom:14px}
/* Sticky was not enough: the column slid up by the panel's padding before it stuck, and a column
   taller than the dialog scrolled away. So on a wide screen the details panel itself no longer
   scrolls; the copy column does, and the image column scrolls on its own only if it is taller
   than the dialog. On a phone the panel scrolls as one, as before. */
@media(min-width:651px){
  /* The grid is pinned to the panel's edges rather than sized by height:100%, which depends on
     the browser resolving a percentage inside a flex item; where it does not, the copy column
     grew past the panel and its lower half (the printings, the legality) was clipped unseen. */
  .card-dialog #card-info-details-panel{position:relative;overflow:hidden}
  #card-info-details-panel .card-detail{position:absolute;inset:0;min-height:0;box-sizing:border-box;grid-template-rows:minmax(0,1fr);padding-right:12px}
  #card-info-details-panel .detail-copy{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:14px;scrollbar-gutter:stable;scrollbar-width:thin}
}

/* --- The Printings tab as a list (2026-10-01) ---------------------------------------------
   One row per printing, so its prices and controls are full size: thumbnail, set and number,
   prices per finish, then the finish, Add to collection, the deck action and Scryfall. */
.card-dialog .printings-list{display:grid;grid-template-columns:1fr;gap:8px}
.card-dialog .printing-row{display:grid}
.card-dialog .printing-row.current{border-color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent)}
.card-dialog .printing-thumb{display:block;width:62px;padding:0;border:0;border-radius:4px;background:none;cursor:zoom-in}
.card-dialog .printing-thumb img,.card-dialog .printing-thumb .printing-placeholder{display:block;width:100%;aspect-ratio:488/680;border-radius:4px;object-fit:cover;font-size:var(--text-2xs)}
.card-dialog .printing-thumb:hover img,.card-dialog .printing-thumb:focus-visible img{outline:2px solid var(--gold);outline-offset:1px}
.card-dialog .printing-info{display:grid;gap:3px;min-width:0}
.card-dialog .printing-info strong{font:var(--text-base) Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-dialog .printing-info small{color:var(--muted);font-size:var(--text-xs)}
.printing-current-tag{justify-self:start;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);font-size:var(--text-2xs);font-weight:700}
.card-dialog .printing-row .printing-prices{gap:4px;padding:6px 10px;border-radius:6px}
.card-dialog .printing-row .printing-prices span{font-size:var(--text-xs)}
.card-dialog .printing-row .printing-prices strong{font-size:var(--text-s);font-variant-numeric:tabular-nums}
.card-dialog .printing-controls{display:grid;gap:7px;min-width:0}
.card-dialog .printing-row .printing-collection-action{grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:6px}
.card-dialog .printing-row .printing-collection-action select,.card-dialog .printing-row .printing-collection-action button{padding:7px 9px;font-size:var(--text-xs)}
.card-dialog .printing-row .printing-collection-action select{text-transform:capitalize}
.card-dialog .printing-row .printing-actions{display:flex;align-items:center;gap:10px}
.card-dialog .printing-row .printing-actions button{flex:1;padding:7px 9px;font-size:var(--text-xs)}
.card-dialog .printing-row .printing-actions a{flex:none;white-space:nowrap}

/* Two columns of printings (2026-10-01, at the user's direction: one per row left the dialog
   too empty). Each printing stacks beside its thumbnail: set and number, prices, then controls. */
.card-dialog .printings-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card-dialog .printing-row{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"thumb info" "thumb prices" "controls controls";align-items:start;gap:8px 12px;padding:10px}
.card-dialog .printing-row .printing-thumb{grid-area:thumb;width:72px}
.card-dialog .printing-row .printing-info{grid-area:info}
.card-dialog .printing-row .printing-prices{grid-area:prices;align-self:end}
.card-dialog .printing-row .printing-controls{grid-area:controls}
@media(max-width:640px){.card-dialog .printings-list{grid-template-columns:1fr}}
/* One control row per printing: finish, the deck action, Add to collection (2026-10-01). */
.card-dialog .printing-row .printing-collection-action.with-deck-action{grid-template-columns:minmax(84px,auto) minmax(0,1fr) minmax(0,1fr)}
.card-dialog .printing-row .printing-collection-action.no-collection{grid-template-columns:minmax(84px,auto) minmax(0,1fr)}
.card-dialog .printing-row .printing-collection-action button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Phone layout (card details step 8, 2026-10-01, at the user's direction) ----------------
   The image took the whole first screen and the card's name started below it. On a phone the
   dialog fills the screen, and the two columns dissolve (display: contents) into one grid: a
   smaller image beside the set, name, cost and type, then the deck and collection rows across
   the full width, then the rules box, printings, facts and legality. */
@media(max-width:650px){
  .card-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .card-dialog .detail-dialog-head{padding-inline:10px}
  #card-info-details-panel .card-detail{display:grid;grid-template-columns:minmax(104px,36%) minmax(0,1fr);align-items:start;gap:12px 14px;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}
  #card-info-details-panel .detail-media,#card-info-details-panel .detail-copy{display:contents}
  #card-info-details-panel .detail-image,#card-info-details-panel .image-placeholder{grid-column:1;grid-row:1;width:100%;max-width:none;margin:0}
  #card-info-details-panel .detail-media>.detail-actions{grid-column:1;grid-row:2;margin:-4px 0 0}
  #card-info-details-panel .detail-media>.detail-actions button{width:100%;padding:5px 6px;font-size:var(--text-2xs)}
  #card-info-details-panel .detail-identity-block{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0}
  #card-info-details-panel .detail-title{flex-direction:column;gap:6px;margin-top:6px}
  #card-info-details-panel .detail-copy .detail-title h2{font-size:var(--text-2xl)}
  #card-info-details-panel .detail-title .detail-cost{padding-top:0}
  #card-info-details-panel .detail-status-line{flex-direction:column;align-items:flex-start;gap:6px}
  #card-info-details-panel .detail-identity-block .detail-type{margin-top:6px;padding:6px 0 0;font-size:var(--text-s)}
  #card-info-details-panel .detail-actions-panel,#card-info-details-panel .detail-rules,#card-info-details-panel .detail-printings-strip,#card-info-details-panel .detail-facts,#card-info-details-panel .detail-legality,#card-info-details-panel .detail-scryfall{grid-column:1 / -1;margin-top:0}
  #card-info-details-panel .detail-collection-row{flex-direction:row;align-items:center}
  #card-info-details-panel .detail-collection-action{flex:1 1 auto;justify-content:flex-end}
  #card-info-details-panel .detail-collection-action select{flex:0 1 auto}
  .card-dialog .card-printings-panel{padding:14px 12px calc(18px + env(safe-area-inset-bottom))}
  .card-dialog .printing-row .printing-collection-action.with-deck-action{grid-template-columns:minmax(76px,auto) minmax(0,1fr);grid-auto-rows:auto}
  .card-dialog .printing-row .printing-collection-action.with-deck-action [data-add-collection-printing]{grid-column:1 / -1}
}
/* Explicit placement for each printing tile at every width: the earlier list-layout breakpoints
   set grid-column on the controls and prices, which pulled them out of the tile's areas and
   squeezed the buttons on a phone. */
.card-dialog .printing-row .printing-thumb{grid-column:1;grid-row:1 / span 2}
.card-dialog .printing-row .printing-info{grid-column:2;grid-row:1}
.card-dialog .printing-row .printing-prices{grid-column:2;grid-row:2}
.card-dialog .printing-row .printing-controls{grid-column:1 / -1;grid-row:3}

/* --- Audit pass, 2026-10-30 (Brett) -----------------------------------------------------------
   Plain labels: the small capitals went here as they did across Card Search. */
.card-dialog .detail-set-line{margin:0;color:var(--copper);font:600 var(--text-xs) system-ui}
.card-dialog .detail-panel-label,.card-dialog .deck-quantity-label,.card-dialog .detail-facts dt,.card-dialog .detail-legality h3,.card-dialog .detail-printings-strip h3,.card-dialog .printings-set-filter{font-size:var(--text-xs);font-weight:600;letter-spacing:0;text-transform:none}
/* A signed-out reader gets this in place of the add controls, which could only fail. */
.card-dialog .detail-sign-in{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;color:var(--copper);font:600 var(--text-xs)/1.4 system-ui;text-decoration:none}
.card-dialog .detail-sign-in:hover{border-color:var(--copper)}
.card-dialog .printings-heading .detail-sign-in{display:inline-block;margin-top:6px;padding:0;border:0}
/* The picture stays put: the image column no longer scrolls on its own beside the text. The
   picture gives way to the controls under it, shrinking to fit the dialog's height. */
@media(min-width:651px){
  #card-info-details-panel .detail-media{display:flex;flex-direction:column;align-self:stretch;min-height:0;overflow:hidden}
  #card-info-details-panel .detail-media>*{flex:none}
  #card-info-details-panel .detail-media>.detail-image,#card-info-details-panel .detail-media>.image-placeholder{flex:0 1 auto;min-height:0;width:auto;max-width:100%;height:auto;align-self:center}
}
/* The deck counts as one box, "In your deck", a row per board with its stepper on the right
   (2026-10-30, Brett, from four layouts). */
.deck-quantity-group{display:grid;flex:1 1 100%;width:100%;box-sizing:border-box;gap:2px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-muted)}
.deck-quantity-group.held{border-color:var(--green2);background:var(--accent-soft)}
.deck-quantity-heading{margin:0 0 2px;color:var(--ink);font:600 var(--text-xs) system-ui}
.deck-quantity-group .deck-quantity{justify-content:space-between;margin:0;padding:3px 0;border:0;border-radius:0;background:none}
.deck-quantity-group .deck-quantity+.deck-quantity{border-top:1px solid var(--line)}
.deck-quantity-group .deck-quantity-elsewhere{flex-basis:100%}

/* --- The Printings tab (2026-10-30, Brett) ------------------------------------------------------
   One printing per row: thumbnail, set and number, then its finishes, each with its price and a
   Mainboard, Considering and Collection count with − and +. The column labels sit once above the
   list, on the same grid as the finish rows. A sort sits beside the set filter. */
.card-dialog .printings-heading{grid-template-columns:minmax(0,1fr) minmax(150px,220px) auto auto;align-items:end}
.card-dialog .printings-sort{display:grid;gap:5px;margin:0;color:var(--muted);font-size:var(--text-xs);font-weight:600;letter-spacing:0;text-transform:none}
.card-dialog .printings-sort select{width:auto;margin:0;padding:8px 10px;font-size:var(--text-xs)}
.card-dialog .printings-heading>[data-printings-count]{align-self:center;padding-bottom:4px;font-size:var(--text-xs)}
.card-dialog .printings-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.card-dialog .printing-row,.card-dialog .printings-columns{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:none;align-items:center;gap:14px}
.card-dialog .printing-row{padding:10px 6px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.card-dialog .printings-columns{padding:0 6px 6px}
.card-dialog .printing-row.current{border-color:var(--line);background:color-mix(in srgb,var(--gold) 7%,transparent);box-shadow:inset 3px 0 0 var(--gold)}
.card-dialog .printing-row .printing-thumb{grid-column:1;grid-row:1;width:52px}
.card-dialog .printing-row .printing-info{grid-column:2;grid-row:1}
.card-dialog .printing-finishes{grid-column:3;grid-row:1;display:grid;gap:4px}
.card-dialog .printing-finish{display:grid;grid-template-columns:118px repeat(var(--printing-columns,0),92px);align-items:center;gap:6px}
.card-dialog .with-use>.printing-finish{grid-template-columns:118px repeat(var(--printing-columns,0),92px) 44px}
.card-dialog .printing-finish-labels{color:var(--muted);font-size:var(--text-2xs);font-weight:600}
.card-dialog .printing-finish-labels>span:not(:first-child){text-align:center}
.card-dialog .printing-finish-name{display:flex;justify-content:space-between;gap:8px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:var(--text-xs)}
.card-dialog .printing-finish-name em{font-style:normal;color:var(--muted);text-transform:capitalize}
.card-dialog .printing-finish-name strong{font-variant-numeric:tabular-nums}
.card-dialog .printing-step{display:inline-grid;grid-template-columns:26px minmax(22px,1fr) 26px;align-items:center;justify-self:center;width:92px;border:1px solid var(--line);border-radius:6px;background:var(--surface-muted)}
.card-dialog .printing-step:not(:has(button)){grid-template-columns:1fr;width:auto;border:0;background:none}
.card-dialog .printing-step button{width:26px;height:28px;margin:0;padding:0;border:0;background:none;color:var(--ink);font-size:var(--text-base)}
.card-dialog .printing-step button:disabled{opacity:.35}
.card-dialog .printing-step button:not(:disabled):hover{background:var(--accent-soft)}
.card-dialog .printing-step strong{text-align:center;font-variant-numeric:tabular-nums;font-size:var(--text-s)}
.card-dialog .printing-use{padding:5px 6px;font-size:var(--text-2xs)}
@media(max-width:820px){
  .card-dialog .printing-row{grid-template-columns:52px minmax(0,1fr)}
  .card-dialog .printing-finishes{grid-column:1/-1;grid-row:2}
  .card-dialog .printings-columns{display:none}
  .card-dialog .printing-finish{grid-template-columns:minmax(96px,1fr) repeat(var(--printing-columns,0),minmax(76px,92px)) auto}
  .card-dialog .printing-step{width:auto}
  /* The column labels are hidden this narrow, so each count names its column. */
  .card-dialog .printing-step::before{content:attr(data-step-label);grid-column:1/-1;padding-top:3px;color:var(--muted);font-size:var(--text-2xs);text-align:center}
}
@media(max-width:650px){.card-dialog .printings-heading{grid-template-columns:1fr 1fr}.card-dialog .printings-heading>div:first-child{grid-column:1/-1}}
/* The heading, filter, sort and column labels stay at the top while the printings scroll under
   them (2026-10-30, Brett). Pulled up over the panel's top padding so nothing shows above it. */
.card-dialog .card-printings-panel{--printings-pad:22px}
.card-dialog .printings-top{position:sticky;top:calc(-1 * var(--printings-pad));z-index:2;margin-top:calc(-1 * var(--printings-pad));padding-top:var(--printings-pad);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.card-dialog .printings-top .printings-heading{margin-bottom:12px}
@media(max-width:650px){.card-dialog .card-printings-panel{--printings-pad:14px}}
/* Swiping between cards (card-info-dialog.js): the browser keeps vertical scrolling, and the
   card is free to move sideways under the finger without spilling out of the dialog. */
#card-info-details-panel{overflow-x:hidden}
#card-info-details-panel .card-detail{touch-action:pan-y;will-change:transform}

/* 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);
}
/* A panel that has replaced a whole list spans it (2026-10-28, from Brett's audit: Card Search's
   failure sat squeezed into the first column of its card grid). `grid-column` does nothing in a
   container that is not a grid, and a panel composed into one cell beside others is not alone. */
.state-panel:only-child { grid-column: 1 / -1; }
.state-panel h3 { margin: 20px 0 8px; color: var(--ink); font:var(--text-2xl) Georgia, serif; }
.state-panel p { max-width: 460px; margin: 0; line-height: 1.7; }
.state-panel button { margin-top: 22px; }
/* Copper outlined buttons, as in the menus and dialogs (2026-10-28). */
.state-panel button { padding: 10px 20px; border: 1px solid color-mix(in srgb, var(--copper) 60%, transparent); border-radius: 99px; background: transparent; color: var(--copper); font: 600 var(--text-xs) system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; transition: background-color .15s; }
.state-panel button:hover { background: color-mix(in srgb, var(--copper) 12%, transparent); }
.state-panel button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.state-sigil {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--copper);
  border-radius: 50%;
  color: var(--copper);
  font:italic var(--text-2xl) Georgia, serif;
}
.state-panel-loading .state-sigil { animation: state-pulse 1.4s ease-in-out infinite; }
/* The mark stands without a circle, keylined in dark like the header's (--logo-keyline). */
.state-panel-loading .state-sigil { width: 64px; height: 64px; border: 0; filter: var(--logo-keyline); }
.state-panel-loading .state-sigil img { display: block; width: 100%; height: 100%; object-fit: contain; }
.state-panel-inline.state-panel-loading .state-sigil { width: 38px; height: 38px; }
.state-panel-failure .state-sigil { border-color: var(--danger); color: var(--danger); font-style: normal; }
.state-sigil svg { display: block; width: 28px; height: 28px; }
.state-panel-inline .state-sigil svg { width: 18px; height: 18px; }

@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:var(--text-l); }
.state-panel-inline h3 { margin: 12px 0 4px; font-size:var(--text-l); }
.state-panel-inline p { font-size:var(--text-s); }
.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. */
/* A pill with a slowly pulsing dot (2026-10-28, at Brett's direction), like the toasts it sits
   opposite: rounded, soft-shadowed, and saying "still trying" without being alarming. */
.live-updates-notice {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
  border-radius: 99px;
  background: var(--warning-soft);
  color: var(--ink);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45);
  font:600 var(--text-xs) system-ui;
}
.live-updates-notice::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--warning); animation: live-dot 1.4s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live-updates-notice::before { animation: none; } .state-panel button { transition: none; } }

/* 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:var(--text-xl); 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:var(--text-s);
}
.supporting-failure button { flex: 0 0 auto; padding: 7px 12px; font-size:var(--text-xs); }

/* 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;
}
/* Toasts (2026-10-28, at Brett's direction): rounded, with a small mark saying which kind each
   is — copper "i", a forest ✓, a red ! — in place of a thin coloured left edge. Dark in both
   themes, so they stand apart from the page. */
#toast { display: flex; align-items: flex-start; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px 13px 14px; border: 1px solid color-mix(in srgb, var(--on-inverse) 14%, transparent); border-radius: 12px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6); line-height: 1.5; }
#toast::before { content: "i"; flex: 0 0 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--on-inverse-accent); color: var(--inverse-2); font: italic 700 12px/1 Georgia, serif; }
#toast.success::before { content: "✓"; background: var(--on-inverse-success); font: 700 12px/1 system-ui, sans-serif; }
#toast.error::before { content: "!"; background: var(--danger); color: var(--on-danger); font: 700 12px/1 system-ui, sans-serif; }

@media (max-width: 800px) {
  .state-panel { min-height: 220px; padding: 24px 14px; }
  .state-panel h3 { font-size:var(--text-xl); }
  .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-danger);border-radius:9px;font:700 var(--text-2xs)/1 system-ui}

/* The panel in the account menu's look (2026-10-28, at Brett's direction): rounded, the header's
   copper edge, a deeper shadow, copper in place of green, and copper focus rings. */
#notification-panel{position:absolute;right:0;top:48px;z-index:100;width:min(360px,calc(100vw - 32px));overflow:hidden;background:var(--surface-raised);border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--copper) 75%,transparent);border-radius:12px;box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
#notification-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
#notification-panel>header>strong{color:var(--ink);font:500 1.0625rem/1.2 Georgia,serif}
.notification-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
#notification-panel>header a,.notification-read-all{padding:0;border:0;background:none;color:var(--copper);font:600 var(--text-2xs) system-ui;text-decoration:none;cursor:pointer}
#notification-panel>header a:hover,.notification-read-all:hover{text-decoration:underline;text-underline-offset:3px}
.notification-read-all:disabled{opacity:.5;cursor:default}
#notification-panel a:focus-visible,#notification-panel button:focus-visible,#notifications-history a:focus-visible,#notifications-history button:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:4px}
#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(--copper);padding-left:13px}
/* Clicking an unread notice reads it, so it says it can be clicked. */
#notification-panel .notification{transition:background-color .15s}
#notification-panel .notification.unread{cursor:pointer}
#notification-panel .notification:hover{background:color-mix(in srgb,var(--copper) 6%,transparent)}
@media(prefers-reduced-motion:reduce){#notification-panel .notification{transition:none}}
.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(--copper)}
.notification-text strong{display:block;font:600 var(--text-s) system-ui;color:var(--ink)}
.notification-text p{margin:5px 0 0;color:var(--muted);font:var(--text-xs)/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 var(--text-xs)/1.6 Georgia,serif}
.notification-time{display:inline-block;margin-top:7px;color:var(--faint);font:var(--text-2xs) system-ui}
.notification-link{margin:7px 0 0 10px;color:var(--copper);font:600 var(--text-2xs) system-ui;text-decoration:none}
.notification-link:hover{text-decoration:underline;text-underline-offset:3px}
.notification-dismiss{border:0;background:none;color:var(--faint);font-size:var(--text-base);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:var(--text-xs)/1.7 system-ui}

/* --- Full history page --- */
/* In the bell panel's look (2026-10-30, at Brett's direction from a mock-up): centred, rounded,
   the copper top edge, Georgia titles, no small-capital labels, and Mark all read as the panel's
   copper text button. */
.notifications-main{max-width:820px;margin:0 auto}
.notifications-main .workspace-intro{padding-left:0;padding-right:0}
.notifications-page{max-width:none;border-radius:16px}
.notifications-page .panel-title{display:flex;align-items:center;justify-content:space-between;gap:20px}
#mark-all-read{flex:none;padding:0;border:0;background:none;color:var(--copper);font:600 var(--text-xs) system-ui;cursor:pointer}
#mark-all-read:hover{text-decoration:underline;text-underline-offset:3px}
#mark-all-read:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}
#mark-all-read:disabled{opacity:.45;cursor:default;text-decoration:none}
.notifications-page h1{font:var(--text-4xl) Georgia,serif;margin:0}
.notifications-intro{color:var(--muted);font:var(--text-s)/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;overflow:hidden;border:1px solid var(--line);border-top:2px solid color-mix(in srgb,var(--copper) 75%,transparent);border-radius:12px;background:var(--surface-raised);box-shadow:0 14px 34px -18px rgba(0,0,0,.45)}
/* A state panel (loading, empty, failure) brings its own frame. */
#notifications-history:has(>.state-panel){border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#notifications-history .notification{padding:16px 18px;transition:background-color .15s}
#notifications-history .notification.unread{padding-left:15px;cursor:pointer}
#notifications-history .notification:hover{background:color-mix(in srgb,var(--copper) 6%,transparent)}
#notifications-history .notification-text strong{font:500 var(--text-base)/1.35 Georgia,serif}
@media(prefers-reduced-motion:reduce){#notifications-history .notification{transition:none}}

/* --- 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:var(--text-2xl) Georgia,serif;color:var(--ink)}
.stream-stopped-dialog p{margin:12px 0 0;color:var(--muted);font:var(--text-s)/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 var(--text-s)/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 var(--text-m)/1.7 Georgia,serif}
.lock-reason-missing{margin:16px 0 0;color:var(--muted);font:italic var(--text-s)/1.7 Georgia,serif}
.lock-when{margin:10px 0 0;color:var(--faint);font:var(--text-2xs) system-ui}
.appeal-status{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.appeal-status h2{margin:0;font:var(--text-l) Georgia,serif;color:var(--ink)}
.appeal-status h3{margin:16px 0 0;font:600 var(--text-2xs) system-ui;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.appeal-state{margin:8px 0 0;color:var(--muted);font:var(--text-xs)/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:var(--text-s)/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:var(--text-2xs);font-weight:700}
#appeal-form textarea{display:block;width:100%;margin-top:7px;padding:10px;font:var(--text-s)/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:var(--text-s)/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:var(--text-s)/1.7 system-ui}
.hidden-deck-notice .lock-reason{background:var(--surface-raised)}
.hidden-deck-notice h3{margin:14px 0 0;font:600 var(--text-2xs) 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:var(--text-2xs);font-weight:700}
.hidden-deck-notice #deck-appeal-form textarea{display:block;width:100%;margin-top:7px;padding:10px;font:var(--text-s)/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}
/* The final shared surface layer. It lives at the end of the existing bundle so the texture
 * wins over component fills and is available immediately to already-running development
 * servers. Each panel crops one continuous surface; nothing is tiled. */
body:not(.home-page):not(.playtest-body):not(.stream-body):not(.auth-page) :is(
  .panel,
  .landing-library,
  .community-browser,
  .assistant-panel-intro,
  .sidebar-analysis-panel,
  .deck-statistics,
  .deck-stat-panel
){
  border-color:color-mix(in srgb,var(--gold) 26%,var(--line));
  background-color:var(--surface);
  background-image:
    linear-gradient(color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface) 88%,transparent)),
    url('/brand/home-folio-surface.png');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:var(--shadow),inset 0 1px color-mix(in srgb,var(--gold) 13%,transparent);
}

/* The deck panel and the Simulations panel change height as you use them: a cascade stack opens
   under the pointer, a tab shows a taller chart. With `cover` sized from the panel's own box, every
   change of height rescaled and recentred the texture, so it slid behind the cards (Brett,
   2026-10-12). Fixed to the window instead, it stays put whatever the panel's height. (iOS Safari
   ignores `fixed` and keeps the old behaviour there.) */
body:not(.home-page):not(.playtest-body):not(.stream-body):not(.auth-page) :is(.deck-editor,.deck-statistics){
  background-attachment:fixed;
}

/* Nested analysis cards stay quieter than their containing panel. */
body:not(.home-page):not(.playtest-body):not(.stream-body):not(.auth-page) .deck-stat-panel{
  background-image:
    linear-gradient(color-mix(in srgb,var(--surface-raised) 94%,transparent),color-mix(in srgb,var(--surface-raised) 94%,transparent)),
    url('/brand/home-folio-surface.png');
  box-shadow:inset 0 1px color-mix(in srgb,var(--gold) 8%,transparent);
}

@media(max-width:700px){
  body:not(.home-page):not(.playtest-body):not(.stream-body):not(.auth-page) :is(
    .panel,
    .landing-library,
    .community-browser,
    .assistant-panel-intro,
    .sidebar-analysis-panel,
    .deck-statistics,
    .deck-stat-panel
  ){
    background-position:58% center;
  }
}

/* On a phone: a sheet across the top of the page, under the site header, instead of a popout
   inside the nav drawer, where the drawer's transform clipped it. notification-bell.js moves the
   panel out of the drawer and sets `top` and `max-height` from the header's real height. */
.notification-close{display:none}
#notification-panel.notification-sheet{position:fixed;left:12px;right:12px;width:auto;z-index:60;display:flex;flex-direction:column}
#notification-panel.notification-sheet.hidden{display:none}
#notification-panel.notification-sheet #notification-list{flex:1 1 auto;max-height:none;min-height:0}
#notification-panel.notification-sheet .notification-close{display:grid;width:34px;height:34px;margin:-6px -8px -6px 0;place-items:center;border:0;background:none;color:var(--muted);font-size:var(--text-xl);line-height:1;cursor:pointer}
#notification-panel.notification-sheet>header a{margin-left:auto}

/* Deck sharing: the Share dialog, the "Shared by" note beside a shared deck's title, the
   invitations strip on the Decks page, and the primer conflict notice. Colours come from the
   theme tokens only, so both themes are covered without a rule here for each. */

.share-deck-button { white-space: nowrap; }
body[data-deck-access="editor"] .share-deck-button,
body[data-deck-access="viewer"] .share-deck-button { border-color: var(--deck-accent); color: var(--deck-accent); }

.workbench-shared { margin: 6px 0 0; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; }

#deck-sharing-dialog { width: min(620px, calc(100vw - 32px)); max-height: min(86vh, 760px); background: var(--surface); color: inherit; }
#deck-sharing-dialog > form { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.deck-sharing-invite { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 10px; align-items: end; }
.deck-sharing-invite label { margin: 0; }
/* The picker's parts sit in the invite row's own grid: the search box beside Access and
   Invite, and the status line and profile link on the row below, so the button stays level
   with the box whatever the status says. */
.deck-sharing-invite [data-invite-user-picker] { display: contents; }
.invite-user-field { position: relative; min-width: 0; }
.invite-user-field label { display: block; margin: 0 0 7px; }
.invite-user-results { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; max-height: 264px; overflow-y: auto; margin: 4px 0 0; padding: 4px 0; list-style: none; border: 1px solid var(--line-strong, var(--line)); background: var(--surface-raised); box-shadow: var(--shadow); }
/* Matches the header's account puck (#account-button in auth.css), so a person's initial looks the same everywhere. */
.user-avatar { display: grid; width: 36px; height: 36px; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: var(--green2); color: var(--surface-raised); font: 800 var(--text-s) system-ui, sans-serif; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.invite-user-results .user-avatar { width: 30px; height: 30px; font-size: var(--text-xs); }
.invite-user-results li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.invite-user-results li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 14px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.invite-user-results li[aria-selected="true"] { background: var(--accent-soft); }
.invite-user-results li[aria-disabled="true"] { cursor: default; opacity: .55; }
.invite-user-results li[aria-disabled="true"][aria-selected="true"] { background: transparent; }
.invite-user-results strong { font-weight: 600; overflow-wrap: anywhere; }
.invite-user-results small { color: var(--muted); font-size: var(--text-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-user-meta { grid-row: 2; grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.invite-user-meta:not(:has(p:not(:empty), a:not(.hidden))) { display: none; }
.deck-sharing-invite [data-user-search-status] { margin: 0; color: var(--muted); font-size: var(--text-s); }
.deck-sharing-invite [data-user-search-status]:empty { display: none; }
.deck-sharing-invite [data-invite-user-profile] { font-size: var(--text-s); }
.deck-sharing-invite button { height: 46px; }
.deck-sharing-note { margin: 10px 0 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.55; }
.deck-sharing-list { margin-top: 18px; }
.deck-sharing-list ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.deck-sharing-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.deck-sharing-list li:first-child { border-top: 0; }
.deck-sharing-list select { width: auto; padding: 8px 10px; }
.deck-sharing-person { display: grid; gap: 3px; min-width: 0; }
.deck-sharing-person strong { overflow-wrap: anywhere; }
.deck-sharing-person small { color: var(--muted); font-size: var(--text-2xs); overflow-wrap: anywhere; }
#deck-sharing-dialog .ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

.deck-information-conflict { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 12px 14px; border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--ink); }
.deck-information-conflict p { margin: 0; font-size: var(--text-s); line-height: 1.5; }
.deck-information-conflict button { flex: 0 0 auto; }

/* The Decks page's invitations, in the Deck library's material and at its width (UI audit,
   2026-11-02): it ran 2vw past the library on each side, square rows with a thick left border
   under an uppercase label. Now one panel, keylined in gold on the folio surface like the library,
   with a serif heading and the rows divided by rules. Collection's invitation strip reuses
   `.deck-invitations`; these rules are scoped to this panel so that one is unchanged. */
.landing-invitations { margin: 0 2vw 24px; padding: 18px 26px 10px; border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); background: linear-gradient(color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)), url('/brand/home-folio-surface.png') center/cover no-repeat; box-shadow: 0 16px 40px color-mix(in srgb, var(--inverse) 11%, transparent), inset 0 1px color-mix(in srgb, var(--gold) 13%, transparent); scroll-margin-top: 96px; }
.landing-invitations { position: relative; isolation: isolate; }
.landing-invitations::before { position: absolute; inset: 8px; z-index: -1; border: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); pointer-events: none; content: ""; }
.landing-invitations-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font: 500 var(--text-2xl) Georgia, serif; color: var(--ink); }
.landing-invitations-title small { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); font: 600 var(--text-xs)/1.5 system-ui; }
.landing-invitations .deck-invitations { gap: 0; }
.landing-invitations .deck-invitations li { padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; }
.landing-invitations .deck-invitations li:first-child { border-top: 0; }
.landing-invitations .deck-invitation-actions button { min-height: 34px; padding: 0 16px; }
.deck-invitations { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.deck-invitations li { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); }
.deck-invitations li > div:first-child { display: grid; gap: 4px; min-width: 0; }
.deck-invitations strong { font: var(--text-l) Georgia, serif; overflow-wrap: anywhere; }
.deck-invitations small { color: var(--muted); font-size: var(--text-xs); }
.deck-invitation-actions { display: flex; gap: 8px; flex: 0 0 auto; }

#landing-shared-section { margin-top: 28px; }

@media(max-width:620px) {
  .deck-sharing-invite { grid-template-columns: 1fr; }
  .invite-user-meta { grid-row: auto; }
  .deck-sharing-list li { grid-template-columns: 1fr auto; }
  .deck-sharing-list li .deck-sharing-person { grid-column: 1 / -1; }
  .deck-information-conflict { flex-direction: column; align-items: flex-start; }
  .deck-invitations li { flex-direction: column; align-items: flex-start; }
}
/* Edge to edge with the library below 700px, where it drops its side margins too. */
@media(max-width:700px) { .landing-invitations { margin: 0 0 20px; padding: 16px 18px 6px; } }

/* Share (2026-11-03): the link to copy, Send to a follower, and a private deck's visibility choice. */
.share-deck-dialog h3 { margin: 16px 0 8px; font: 600 var(--text-s)/1.3 system-ui; color: var(--ink); }
.share-deck-dialog .share-link-row { display: flex; gap: 8px; }
.share-deck-dialog .share-link-row input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace; font-size: var(--text-xs); }
.share-deck-dialog .share-link-row button { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 8px; }
.share-deck-dialog textarea { min-height: 60px; padding: 8px 12px; line-height: 1.45; resize: vertical; }
.share-deck-dialog .share-send { border-top: 1px solid var(--line); margin-top: 6px; }
.share-deck-dialog .share-private-text { margin: 0 0 12px; color: var(--ink); font: 400 var(--text-s)/1.5 system-ui; }
.share-visibility-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.share-visibility-choices button { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.share-visibility-choices button:hover:not(:disabled), .share-visibility-choices button:focus-visible { border-color: var(--copper); background: color-mix(in srgb, var(--copper) 10%, transparent); outline: none; }
.share-visibility-choices strong { font: 600 var(--text-s)/1.2 system-ui; }
.share-visibility-choices small { color: var(--muted); font: 400 var(--text-xs)/1.35 system-ui; }

/* Collaborators joined the shared dialogs' look (create-dialog in deck-import.css; Brett,
   2026-11-05): no eyebrow, the lead as a muted note under the title, sentence-case labels and
   38px rounded fields and buttons. It keeps its own width, as the invite row needs it. Scoped to
   this dialog: the Shared Collection dialog borrows the rules above (collection.css). */
#deck-sharing-dialog.create-dialog { width: min(620px, calc(100vw - 32px)); }
#deck-sharing-dialog .deck-sharing-lead { margin: -6px 0 16px; color: var(--muted); font: 400 var(--text-xs)/1.45 system-ui; }
#deck-sharing-dialog .invite-user-field label { margin: 0 0 6px; }
#deck-sharing-dialog .deck-sharing-invite > label { display: grid; gap: 6px; }
#deck-sharing-dialog .invite-user-field input { font: 400 var(--text-s) system-ui; }
#deck-sharing-dialog .deck-sharing-invite button { height: 38px; padding: 0 18px; border-radius: 8px; }
#deck-sharing-dialog .deck-sharing-note { font: 400 var(--text-xs)/1.45 system-ui; }
#deck-sharing-dialog .deck-sharing-list select { width: 120px; height: 34px; line-height: 32px; padding: 0 10px; font: 600 13px system-ui; }
#deck-sharing-dialog .deck-sharing-list li button { min-width: 92px; min-height: 34px; padding: 0 14px; border-radius: 8px; }

/* The Settings page (public/preferences.html; layout 2026-10-23, Brett). Two tabs of compact
   rows, the setting on the left and its control on the right, in one centred panel. Scoped to
   .settings-page and the settings dialogs, and served last in the bundle so it settles the older
   .prefs, .theme-choice and .settings-form rules in auth.css. */
.settings-page { max-width:860px; margin:0 auto; padding:0 20px 56px; }
.settings-page .workspace-intro { padding:44px 0 18px; }
.settings-shell { padding:0; overflow:hidden; }

.settings-tabs { display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--line); }
.settings-tabs [role=tab] { position:relative; padding:14px 14px 12px; border:0; background:none; color:var(--muted); font:600 var(--text-s) system-ui, sans-serif; cursor:pointer; }
.settings-tabs [role=tab]:hover { color:var(--ink); }
.settings-tabs [role=tab][aria-selected=true] { color:var(--ink); box-shadow:inset 0 -2px var(--copper); }
.settings-tabs [role=tab]:focus-visible { outline:2px solid var(--accent-strong); outline-offset:-4px; border-radius:6px; }

.settings-panel { padding:4px 24px 8px; }
.settings-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 28px; align-items:center; padding:16px 0; border-top:1px solid var(--line); }
.settings-panel > .settings-row:first-child, .settings-panel > div > .settings-row:first-child { border-top:0; }
.settings-row.hidden { display:none; }
.settings-row-wide { grid-template-columns:1fr; }
.settings-row-text h2 { margin:0; font:600 var(--text-base)/1.35 system-ui, sans-serif; color:var(--ink); }
.settings-row-text p { margin:3px 0 0; max-width:60ch; color:var(--muted); font-size:var(--text-xs); line-height:1.5; }
.settings-row-text p strong { color:var(--ink); font-weight:600; }
.settings-row > button, .settings-row > .button-link { justify-self:end; white-space:nowrap; }
.settings-page a:not(.button-link), .settings-dialog a { color:var(--green2); text-underline-offset:3px; }
.settings-page a:not(.button-link):hover { color:var(--ink); }

/* Danger: a quiet red outline here; the weight is in the dialog it opens. */
.settings-row-danger h2 { color:var(--danger); }
.settings-page button.danger, .settings-dialog button.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); background:transparent; }
.settings-page button.danger:hover:not(:disabled) { background:var(--danger-soft); }
.settings-dialog .danger-fill { background:var(--danger); border-color:var(--danger); color:var(--on-danger); }

/* Theme: three compact choices in a row, a small swatch beside each name. */
.settings-page .theme-choice { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:12px 0 2px; padding:0; border:0; }
.settings-page .theme-option { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); cursor:pointer; text-transform:none; letter-spacing:0; }
.settings-page .theme-option:has(input:checked) { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.settings-page .theme-swatch { width:38px; height:28px; flex:none; border-radius:5px; }
.settings-page .theme-option-text { display:grid; gap:1px; min-width:0; }
.settings-page .theme-option strong { margin:0; font:600 var(--text-s) system-ui, sans-serif; text-transform:none; letter-spacing:0; }
.settings-page .theme-option small { margin:0; color:var(--muted); font-size:var(--text-2xs); line-height:1.35; text-transform:none; letter-spacing:0; }

/* A switch for on/off settings, drawn over a real checkbox so it keeps keyboard and label behaviour. */
.settings-switch { position:relative; display:inline-flex; margin:0; cursor:pointer; text-transform:none; letter-spacing:0; }
.settings-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:inherit; }
.settings-switch-track { width:42px; height:24px; border-radius:99px; background:var(--line-strong, var(--line)); transition:background .15s ease; }
.settings-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--surface-raised); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s ease; }
.settings-switch input:checked + .settings-switch-track { background:var(--accent); }
.settings-switch input:checked + .settings-switch-track::after { transform:translateX(18px); }
.settings-switch input:focus-visible + .settings-switch-track { outline:2px solid var(--accent-strong); outline-offset:2px; }
.settings-switch input:disabled + .settings-switch-track { opacity:.5; }
.settings-switch:has(input:disabled) { cursor:default; }

/* Dialogs: the email and delete forms, and the password one. */
.settings-dialog { border-radius:12px; }
.settings-dialog .settings-form { max-width:none; }
.settings-dialog-note { margin:6px 0 4px; color:var(--muted); font-size:var(--text-xs); line-height:1.55; }
.settings-dialog-danger { border-top:3px solid var(--danger); }
.settings-dialog-danger h2 { color:var(--danger); }

@media (max-width:640px) {
  .settings-page { padding:0 16px 40px; }
  .settings-panel { padding:4px 16px 8px; }
  .settings-page .theme-choice { grid-template-columns:1fr; }
  .settings-row { grid-template-columns:1fr; }
  .settings-row > button, .settings-row > .button-link { justify-self:start; }
  .settings-row:has(.settings-switch) { grid-template-columns:minmax(0, 1fr) auto; }
}