/* The Deck Builder in the language of the refreshed pages (2026-11-02, Brett): Card Search,
   Community and the Deck library. Loaded after every other Builder sheet, so these settle the
   older rules rather than racing them. The Decklist / Combos / Simulations tabs are left as they
   are, deliberately. */

/* 1. The workspace as a folio panel: rounded and keylined like Card Search's, with the analysis
   column as a card of its own inside it rather than a strip fused to the edge. `overflow:clip`
   rounds the sticky toolbar's corners without making the panel a scroll container, which would
   stop the toolbar sticking. */
@media(min-width:851px){
  .builder-page .panel.deck-editor{border-radius:16px;overflow:clip}
  .builder-page .construction-sidebar{position:sticky;top:88px;align-self:start;height:auto;max-height:calc(100vh - 100px);margin:12px 12px 12px 0;padding:6px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .builder-page .construction-toolbar{border-bottom:0}
}

/* The toolbar covers scrolling cards with the same viewport-aligned texture as the deck panel. */
.builder-page .construction-toolbar{
  background-color:var(--surface);
  background-image:var(--folio-surface-image);
  background-position:var(--folio-surface-position,center);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* 3. The toolbar as Card Search's pill bar: one capsule, quiet pill buttons, the active one
   lifted. The Display row's view switch is a segmented control and its selects are rounded, as
   Community's Sort is. */
.builder-page .construction-sections{gap:6px;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)}
/* Wrapped onto two rows on a narrow screen, a capsule would bulge: a rounded panel, as Community's. */
@media(max-width:850px){.builder-page .construction-sections{border-radius:18px}}
.builder-page #builder-search-catalog,
.builder-page .construction-sections>.deck-display-toggle,
.builder-page .construction-sections>.analysis-toggle{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 var(--text-s)/1.2 system-ui}
.builder-page #builder-search-catalog:hover,
.builder-page .construction-sections>button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.builder-page .construction-sections>.deck-display-toggle[aria-expanded="true"]{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.builder-page .builder-add-card>#builder-card-search{height:34px;border-radius:999px;padding-left:34px}
.builder-page .builder-search-icon{left:14px}
.builder-page .deck-view-control{height:36px;padding:3px;gap:2px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.builder-page .deck-view-control button{border:0;border-radius:999px;color:var(--muted);font:600 var(--text-s) system-ui}
.builder-page .deck-view-control button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.builder-page .deck-view-control button.active{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.builder-page .deck-grouping-control,.builder-page .deck-grouping-control select{height:36px}
/* Display's dropdowns are pills like the List · Cards · Cascade switch beside them (2026-11-05;
   restored 2026-11-10, Brett: an 8px radius here, loaded after command-zone.css, had squared them
   off again). The same 36px, fill, ring, type and hover as the switch, in the Builder and the deck
   page alike, both of which load this sheet. */
.builder-page .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 var(--text-s)/36px system-ui;letter-spacing:0;text-transform:none;cursor:pointer}
.builder-page .deck-display-controls .deck-grouping-control select:hover{background-color:color-mix(in srgb,var(--ink) 13%,transparent)}
.builder-page .deck-display-controls .deck-grouping-control select:focus-visible{outline:2px solid var(--green2);outline-offset:2px}

/* 4. The analysis column's headings as Card Search shows the same panels: serif section titles
   and muted labels, no small capitals. */
.builder-page .construction-sidebar .sidebar-analysis-panel>h2{text-transform:none;letter-spacing:0;font:500 var(--text-base)/1.2 Georgia,serif;color:var(--ink)}
.builder-page .construction-sidebar .sidebar-deck-size-label,
.builder-page .construction-sidebar .sidebar-average-mana span{text-transform:none;letter-spacing:0}
/* `.eyebrow` takes the accent with !important everywhere (command-zone.css); Card Search labels the
   same block with a plain muted label, so the Builder's does the same. */
.builder-page .construction-sidebar .commander-zone>.eyebrow{color:var(--muted)!important;font:600 var(--text-xs) system-ui!important;letter-spacing:0!important;text-transform:none!important}

/* 5. A group's count as a small muted figure beside its name, so "Mana value 2" and its 2 cards
   no longer read as "Mana value 2 2". */
.builder-page #deck-cards .deck-group h3 small,
.builder-page #deck-cards h3>small{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--muted);font:600 var(--text-xs)/1.5 system-ui;font-variant-numeric:tabular-nums;vertical-align:middle}

/* 6. "Your decks" before the title, a separator between them (Brett, 2026-11-05): a real pill,
   as it read as a label above the title, and placed before the name rather than after it so it
   does not move with the name's length. Centred in the header's height, the divider running down to
   the builder panel (the header's 8px bottom padding taken back). */
@media(min-width:851px){
  .builder-page .workbench-heading-row{column-gap:16px}
  .builder-page .workbench-library-nav{grid-column:1;grid-row:1;align-self:stretch;height:auto;align-items:center;margin-bottom:-8px;padding:0 16px 0 0;border-right:1px solid var(--line)}
}
.builder-page .workbench-library-nav>:is(.library-toggle,.workbench-back-link){display:inline-flex;align-items:center;height:34px;min-height:34px;gap:6px;padding:0 16px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:999px;background:transparent;color:var(--ink);font:600 13px/13px system-ui;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
.builder-page .workbench-library-nav>:is(.library-toggle,.workbench-back-link):hover,
.builder-page .workbench-library-nav>.library-toggle.open{background:color-mix(in srgb,var(--ink) 6%,transparent)}

/* 8. The folded legality warning tinted rather than filled: still the warning colour, no longer
   the loudest thing on the page. */
.builder-page .deck-legality-warning{border-color:color-mix(in srgb,var(--warning) 45%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--warning) 7%,transparent)}

/* 7. Combos and Simulations: a wider sheet with rounded corners instead of a narrow square box in
   the middle of the panel, and their controls in the same pill shapes as the toolbar. The tab
   row inside Simulations becomes Community's pill tabs; its option switches become segmented
   controls; its cards round off like the analysis column's. */
.builder-page .deck-combos,
.builder-page .deck-statistics{max-width:1240px;border-radius:14px}
.builder-page .deck-stat-tabs{gap:4px;padding:4px;border-bottom: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)}
.builder-page .deck-stat-tabs button{padding:6px 14px;border:0;border-radius:999px;color:var(--muted);font:600 var(--text-s) system-ui}
.builder-page .deck-stat-tabs button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}
.builder-page .deck-stat-tabs button.active{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.builder-page .deck-stat-tabs+.deck-stat-tabpanel .deck-stat-panel,
.builder-page .deck-stat-tabpanel>.deck-stat-panel{margin-top:10px;border-top:1px solid var(--line)}
.builder-page .deck-stat-panel{border-radius:12px}
.builder-page .deck-stat-draw-mode{gap:2px;padding:3px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.builder-page .deck-stat-draw-mode button{border:0;border-radius:999px;font-weight:600}
.builder-page .deck-stat-draw-mode button.active{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.builder-page .deck-stat-headline{border-radius:12px}
.builder-page .spellbook-summary>div,
.builder-page .spellbook-combo-card,
.builder-page .spellbook-add-group,
.builder-page .spellbook-empty{border-radius:12px}
.builder-page .spellbook-search input{border-radius:999px;padding-left:16px}
/* The tab row scrolls sideways on a phone; its scrollbar drew a grey line along the capsule's
   floor. Hidden: the cut-off last tab already says there is more. */
@media(max-width:850px){.builder-page .deck-stat-tabs{border-radius:18px;scrollbar-width:none}.builder-page .deck-stat-tabs::-webkit-scrollbar{display:none}}
/* On a phone the option switches can't fit "When it's the biggest play" beside "As soon as
   possible", and a capsule that wraps reads as a lump with half of it lit (Brett, 2026-11-02). Each
   switch spans the width in equal halves instead, a long label wraps inside its own half, and the
   corners are a rounded rectangle's so a two-line option still sits in a clean shape. */
@media(max-width:850px){
  .builder-page .deck-stat-draw-mode{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;border-radius:14px}
  .builder-page .deck-stat-draw-mode button{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border-radius:11px;text-align:center;line-height:1.25}
}

/* A simulation with recommendations carries the Spoilers link's copper dot (deck-statistics.js,
   Brett 2026-11-02), at the tab's top-right as on the link, with the same slow pulse. */
.builder-page .deck-stat-tabs button.has-recommendations{position:relative}
.builder-page .deck-stat-tabs button.has-recommendations::after{content:"";position:absolute;top:5px;right:7px;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}
@media(prefers-reduced-motion:reduce){.builder-page .deck-stat-tabs button.has-recommendations::after{animation:none}}

/* Opening hand's "What counts as spending on your plan" (deck-statistics.js, 2026-11-02): a folded
   list of the deck's non-land cards, ticked when their mana counts, in columns on a wide screen. */
.builder-page .deck-stat-plan-cards{margin-top:16px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.builder-page .deck-stat-plan-cards>summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;cursor:pointer;font:600 var(--text-s) system-ui;color:var(--ink)}
.builder-page .deck-stat-plan-cards>summary small{color:var(--muted);font-weight:500}
.builder-page .deck-stat-plan-cards>p{margin:10px 0;color:var(--muted);font-size:var(--text-xs);line-height:1.55}
.builder-page .deck-stat-plan-cards>button{margin-bottom:10px;border-radius:999px}
.builder-page .deck-stat-plan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.builder-page .deck-stat-plan-actions button{border-radius:999px}
.builder-page .deck-stat-plan-cards ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 16px;margin:0;padding:0;list-style:none}
.builder-page .deck-stat-plan-cards label{display:grid;grid-template-columns:auto 46px minmax(0,1fr);align-items:center;column-gap:10px;margin:0;padding:5px 6px;border-radius:8px;cursor:pointer;letter-spacing:0;text-transform:none}
.builder-page .deck-stat-plan-cards label>img,
.builder-page .deck-stat-plan-cards label>.deck-stat-plan-card-blank{grid-row:1/3;width:46px;height:auto;aspect-ratio:146/204;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.builder-page .deck-stat-plan-cards .deck-stat-plan-card-blank{display:block;background:color-mix(in srgb,var(--ink) 10%,transparent)}
/* An unticked card's picture fades, so what counts reads at a glance. */
.builder-page .deck-stat-plan-cards label:has(input:not(:checked))>img{opacity:.55;filter:saturate(.6)}
.builder-page .deck-stat-plan-cards label:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.builder-page .deck-stat-plan-cards input{grid-row:1/3;margin:0;accent-color:var(--green2)}
.builder-page .deck-stat-plan-cards label>span{align-self:end;overflow:hidden;color:var(--ink);font:600 var(--text-s)/1.3 system-ui;letter-spacing:0;text-transform:none;text-overflow:ellipsis;white-space:nowrap}
.builder-page .deck-stat-plan-cards label>small{align-self:start;color:var(--muted);font:var(--text-2xs)/1.4 system-ui;letter-spacing:0;text-transform:none}

/* "Running the simulations…" (deck-statistics-panel.js, 2026-11-02): a panel the first time, and a
   notice pinned under the toolbar over the previous figures when a setting changes, which dim. */
.builder-page .deck-stat-running-panel{margin:10px auto}
.builder-page .deck-stat-running-panel p{margin:4px 0 0;color:var(--muted);font-size:var(--text-xs)}
.builder-page #deck-statistics-content.is-computing>:not(.deck-stat-running){opacity:.5;pointer-events:none;transition:opacity .15s}
.builder-page .deck-stat-running{position:sticky;top:140px;z-index:5;display:flex;width:max-content;align-items:center;gap:10px;margin:0 auto 10px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface-raised);box-shadow:var(--shadow);color:var(--ink);font:600 var(--text-s) system-ui}
.builder-page .deck-stat-running>span{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--ink) 20%,transparent);border-top-color:var(--copper);border-radius:50%;animation:deck-stat-spin .8s linear infinite}
@keyframes deck-stat-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.builder-page .deck-stat-running>span{animation:none;border-color:var(--copper)}}

/* Analysis opens the analysis sidebar as a drawer, which only exists at 850px and below. Above that the
   sidebar is already on screen and the button did nothing, but `command-zone.css` showed it at every width
   (`.builder-page … >.analysis-toggle{display:inline-flex}`), over builder-wide.css's `display:none`.
   Builder second pass, 2026-11-03 (Brett). */
@media(min-width:851px){.builder-page .construction-sections>.analysis-toggle{display:none}}

/* Share, Playtest and ••• (Builder second pass, 2026-11-03, Brett, option A of three mock-ups): matching
   34px outlined pills in the system font, as Connect AI is, with Playtest picked out in copper. They
   were square, Arial at three weights and two heights. A shared deck's Share keeps its deck colour,
   which says the deck is someone else's (deck-sharing.css). */
.builder-page :is(#share-deck-button,#playtest-deck-button,#deck-more-button,#save-community-deck,#playtest-community-deck,#copy-community-deck,:where(.workbench-header-actions)>#export-deck-button){display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;min-height:34px;padding:0 16px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:999px;background:transparent;color:var(--ink);font:600 var(--text-s)/1 system-ui;letter-spacing:0;white-space:nowrap}
.builder-page :is(#playtest-deck-button,#playtest-community-deck){width:auto;border-color:color-mix(in srgb,var(--copper) 60%,transparent);color:var(--copper)}
.builder-page :is(#playtest-deck-button,#playtest-community-deck)>span{font-size:.85em}
.builder-page #deck-more-button{width:34px;min-width:34px;padding:0;font-weight:800;letter-spacing:.08em}
.builder-page :is(#share-deck-button,#deck-more-button,#save-community-deck,#copy-community-deck,:where(.workbench-header-actions)>#export-deck-button):hover:not(:disabled),.builder-page #deck-more-button[aria-expanded="true"]{border-color:color-mix(in srgb,var(--ink) 40%,transparent);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.builder-page :is(#playtest-deck-button,#playtest-community-deck):hover:not(:disabled){border-color:var(--copper);background:color-mix(in srgb,var(--copper) 12%,transparent)}
.builder-page :is(#share-deck-button,#playtest-deck-button,#deck-more-button,#save-community-deck,#playtest-community-deck,#copy-community-deck,:where(.workbench-header-actions)>#export-deck-button):focus-visible{outline:2px solid var(--copper);outline-offset:2px}
body[data-deck-access="editor"] .builder-page #share-deck-button,body[data-deck-access="viewer"] .builder-page #share-deck-button{border-color:color-mix(in srgb,var(--deck-accent) 60%,transparent);color:var(--deck-accent)}

/* The Builder's right-click menus (2026-11-03, Brett): the ••• menu's look (command-zone.css), with an
   icon per item, a divider between groups (none for a group whose items are all hidden), the
   destructive item red, the current grouping ticked at the right edge, and the card menu's copies
   stepper. Built by `menuItem`/`menuGroup` in app.js. */
.card-context-menu.builder-menu{width:max-content;min-width:220px;max-width:min(300px,calc(100vw - 16px));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)}
.builder-menu .menu-group{display:flex;flex-direction:column}
.builder-menu .menu-group:not(:has(>button:not(.hidden),>.menu-stepper)){display:none}
.builder-menu .menu-group:has(>button:not(.hidden),>.menu-stepper)~.menu-group{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.card-context-menu.builder-menu .menu-group>button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;margin:0;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 var(--text-s)/1.25 system-ui;text-align:left;white-space:nowrap;cursor:pointer}
.card-context-menu.builder-menu .menu-group>button.hidden{display:none}
.card-context-menu.builder-menu .menu-group>button:hover,.card-context-menu.builder-menu .menu-group>button:focus{background:color-mix(in srgb,var(--copper) 12%,transparent);color:var(--copper);outline:none}
.card-context-menu.builder-menu .menu-group>button:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.builder-menu .menu-icon{flex:0 0 18px;color:var(--muted);font-size:14px;text-align:center}
.card-context-menu.builder-menu .menu-group>button:hover .menu-icon,.card-context-menu.builder-menu .menu-group>button:focus .menu-icon{color:var(--copper)}
.card-context-menu.builder-menu .menu-group>button.danger,.card-context-menu.builder-menu .menu-group>button.danger .menu-icon{color:var(--danger)}
.card-context-menu.builder-menu .menu-group>button.danger:hover,.card-context-menu.builder-menu .menu-group>button.danger:focus{background:var(--danger-soft);color:var(--danger)}
.builder-menu button[aria-checked="true"]::after{content:"✓";margin-left:auto;padding-left:14px;color:var(--copper)}
.builder-menu .menu-stepper{display:flex;align-items:center;gap:10px;min-height:38px;padding:3px 6px 3px 10px;color:var(--ink);font:500 var(--text-s)/1.25 system-ui}
.builder-menu .menu-stepper>.menu-label{margin-right:auto}
.card-context-menu.builder-menu .menu-stepper>button{display:grid;width:28px;height:28px;margin:0;padding:0;place-items:center;border:1px solid var(--line-strong);border-radius:7px;background:transparent;color:var(--ink);font:700 15px/1 system-ui;cursor:pointer}
.card-context-menu.builder-menu .menu-stepper>button:hover:not(:disabled),.card-context-menu.builder-menu .menu-stepper>button:focus-visible{border-color:var(--copper);color:var(--copper);background:color-mix(in srgb,var(--copper) 12%,transparent);outline:none}
.card-context-menu.builder-menu .menu-stepper>button:disabled{opacity:.4;cursor:default}
.builder-menu .menu-stepper>output{min-width:22px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.card-context-menu.builder-menu:focus{outline:none}

/* Deck Settings, option B (2026-11-03, Brett): the Create/Move look, sections down the side shown one at
   a time, one Save. app.js builds it from the old fields (deckSettingsSections). */
#deck-settings-dialog.deck-settings-b{width:min(680px,94vw);max-height:92vh;padding:0}
.deck-settings-b .deck-settings-head{padding:22px 26px 0}
.deck-settings-b .deck-settings-head h2{margin:0}
.deck-settings-b #deck-settings-general{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 20px;padding:16px 26px 20px}
.deck-settings-b .deck-settings-nav{display:flex;flex-direction:column;gap:2px;align-self:start;position:sticky;top:0}
.deck-settings-b .deck-settings-nav button{display:block;width:100%;min-height:34px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:600 var(--text-s)/1.2 system-ui;text-align:left;cursor:pointer}
.deck-settings-b .deck-settings-nav button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.deck-settings-b .deck-settings-nav button[aria-selected="true"]{background:color-mix(in srgb,var(--copper) 13%,transparent);color:var(--copper)}
.deck-settings-b .deck-settings-nav button:focus-visible{outline:2px solid var(--copper);outline-offset:-2px}
.deck-settings-b .deck-settings-panes{min-height:300px}
.deck-settings-b [data-settings-pane]>label:not(.settings-checkbox){display:grid;gap:6px;margin:0 0 14px}
.deck-settings-b [data-settings-pane] small{display:block;margin:4px 0 0;color:var(--muted);font:400 var(--text-xs)/1.45 system-ui;letter-spacing:0;text-transform:none}
.deck-settings-b fieldset{margin:0 0 14px;padding:0;border:0;min-width:0}
.deck-settings-b legend{margin:0 0 6px;padding:0;color:var(--ink);font:600 var(--text-s)/1.3 system-ui;letter-spacing:0;text-transform:none}
.deck-settings-b input[type=checkbox],.deck-settings-b input[type=radio]{width:auto;height:auto;margin:0;accent-color:var(--copper)}
.deck-settings-b .settings-checkbox{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--ink);font:500 var(--text-s)/1.3 system-ui;letter-spacing:0;text-transform:none}
.deck-settings-b .settings-budget-input input{max-width:200px}
.deck-settings-b .deck-tag-add{display:flex;gap:8px;margin-top:8px}
.deck-settings-b .deck-tag-add input{flex:1 1 auto;min-width:0}
.deck-settings-b .deck-tag-add button{flex:0 0 auto;height:38px;padding:0 14px;border-radius:8px}
.deck-settings-b .deck-information-roles{margin:4px 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--line);background:none}
.deck-settings-b .deck-information-roles h3{margin:0 0 4px;font:600 var(--text-s)/1.3 system-ui;color:var(--ink)}
.deck-settings-b .deck-information-roles button{height:34px;padding:0 14px;border-radius:8px}
.deck-settings-b #deck-settings-general>.dialog-actions,.deck-settings-b #deck-settings-general>.settings-saved-note{grid-column:1/-1}
.deck-settings-b #deck-settings-general>.dialog-actions{margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:560px){
  .deck-settings-b #deck-settings-general{grid-template-columns:minmax(0,1fr);padding:12px 16px 16px}
  .deck-settings-b .deck-settings-nav{position:static;flex-direction:row;gap:4px;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .deck-settings-b .deck-settings-nav button{width:auto;white-space:nowrap;border-radius:999px}
  .deck-settings-b .deck-settings-panes{min-height:0}
}

/* The Primer tab (2026-11-03): the old Information section in the folio panel's look. */
.builder-page #deck-information{max-width:900px;margin:14px auto;padding:clamp(20px,2.6vw,34px);border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--surface-raised) 65%,var(--surface))}
.builder-page #deck-information h2{margin:0 0 4px;font:500 var(--text-3xl)/1.1 Georgia,serif}
.builder-page #deck-information>div>p{margin:0 0 18px;color:var(--muted);font:400 var(--text-s)/1.5 system-ui}
.builder-page #deck-information .deck-primer-head label{margin:0;color:var(--ink);font:600 var(--text-s)/1.3 system-ui;letter-spacing:0;text-transform:none}
.builder-page #deck-information textarea{border-radius:10px;padding:12px 14px;line-height:1.55}
.builder-page #deck-information .deck-primer-preview{border-radius:10px}
.builder-page #deck-information .deck-primer-modes{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.builder-page #deck-information .deck-primer-modes button{padding:5px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 var(--text-xs)/1.2 system-ui}
.builder-page #deck-information .deck-primer-modes button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.builder-page #deck-information .dialog-actions button{min-height:38px;padding:0 18px;border-radius:8px}
/* Built from, greyed out while Paper deck is unticked (2026-11-03). */
.deck-settings-b .settings-unavailable{opacity:.45}.deck-settings-b .settings-unavailable .settings-checkbox{cursor:default}
/* Change roles: Available and Assigned lists with arrows between them (2026-11-03). */
dialog.create-dialog.assign-roles-dialog{width:min(600px,calc(100vw - 24px))}
.role-transfer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px;margin:14px 0 8px}
.role-transfer-list{display:grid;gap:6px;min-width:0}
.role-transfer-list>span{color:var(--muted);font:600 var(--text-2xs)/1.3 system-ui;letter-spacing:.06em;text-transform:uppercase}
.role-transfer-list>span small{margin-left:4px;letter-spacing:0;text-transform:none;font-weight:400}
.role-transfer-box{height:230px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised)}
.role-transfer-box:focus-visible{outline:2px solid var(--copper);outline-offset:1px}
.role-transfer-item{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;overflow-wrap:anywhere;padding:6px 9px;border-radius:6px;color:var(--ink);font:500 var(--text-s)/1.3 system-ui;cursor:pointer;user-select:none}
.role-transfer-item:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.role-transfer-item.selected{background:color-mix(in srgb,var(--copper) 24%,transparent);box-shadow:inset 2px 0 0 var(--copper)}
.role-transfer-item small{margin-left:auto;color:var(--muted);font:500 var(--text-2xs)/1 system-ui}
.role-transfer-item small+small{margin-left:4px}
.role-transfer-item .role-transfer-auto{font-style:italic}
.role-transfer-empty{margin:8px;color:var(--muted);font:400 var(--text-xs)/1.4 system-ui}
.role-transfer-moves{display:grid;gap:6px;align-self:center}
.role-transfer-moves button,.role-transfer-order button{min-width:36px;min-height:32px;padding:0 8px;border-radius:8px;font-size:var(--text-m)}
.role-transfer-moves button:disabled,.role-transfer-order button:disabled{opacity:.35;cursor:default}
.role-transfer-order{display:flex;justify-content:flex-end;gap:6px}
.role-transfer-new-row{display:flex;gap:8px}.role-transfer-new-row input{flex:1 1 auto;min-width:0}
.assign-roles-dialog .dialog-actions .role-transfer-reset{margin-right:auto}
.assign-roles-dialog .role-transfer-reset:disabled{opacity:.4;cursor:default}
@media(max-width:560px){.role-transfer{grid-template-columns:1fr}.role-transfer-moves{display:flex;justify-content:center}.role-transfer-moves button{transform:rotate(90deg)}.role-transfer-box{height:160px}}
.role-transfer-item.role-transfer-other{color:var(--muted);cursor:default}.role-transfer-item.role-transfer-other:hover{background:none}
#assign-role-automatic:empty{display:none}
/* Dragging a card between roles (2026-11-03): the card lifts, the role it can land on lights copper. */
#deck-cards .deck-row.role-draggable{cursor:grab}
#deck-cards .deck-row.role-draggable.dragging{opacity:.45;cursor:grabbing}
#deck-cards.role-dragging .deck-group[data-role-group]{transition:background-color .12s,box-shadow .12s;border-radius:10px}
#deck-cards .deck-group.role-drop-target{background:color-mix(in srgb,var(--copper) 12%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--copper) 70%,transparent)}
#deck-cards .deck-group.role-drop-target>h3{color:var(--copper)}
@media(prefers-reduced-motion:reduce){#deck-cards.role-dragging .deck-group[data-role-group]{transition:none}}
#deck-cards .deck-group.role-drop-empty{opacity:.75}
#deck-cards.role-dragging .deck-group.role-drop-empty.role-drop-target{opacity:1}
#deck-cards .role-drop-empty .empty-role-group{margin:4px 0 8px;padding:14px 10px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font:400 var(--text-xs)/1.3 system-ui;text-align:center}
/* The toolbar (add a card, Search Catalog, Display; Analysis on a phone) belongs to the decklist:
   Primer, Combos and Simulations show none of it (Brett, 2026-11-03). */
.construction-main:is(.information-view,.combos-view,.statistics-view,.comments-view)>.construction-toolbar{display:none}
/* Games shown: the note's "See Opening hand" link is a link, not one of the bar's switches (2026-11-03). */
.builder-page .deck-stat-setting-text small .link-button{display:inline;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--green2);font:600 inherit/inherit inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.builder-page .deck-stat-setting-text small .link-button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
/* The two "what counts" choices look alike, under each tab's verdict (2026-11-03). */
.builder-page .deck-stat-panel-settings .deck-stat-plan-cards{margin:0;padding:0;border:0;border-radius:0;background:none}
.builder-page .deck-stat-panel-settings .deck-stat-plan-cards>summary,.builder-page .deck-stat-panel-settings .deck-stat-role-menu>summary{display:inline-flex;align-items:center;gap:4px;width:max-content;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);font:700 var(--text-xs) system-ui;color:var(--ink);cursor:pointer}
.builder-page .deck-stat-panel-settings .deck-stat-plan-cards[open]>summary{margin-bottom:8px}

/* Your decks (Brett, 2026-11-05, option A of three). A deck card's name is one line ending in "…",
   the full name in its title: two lines left no room for the colours and badge above them, and a
   long name pushed them off the card's top edge. The toolbar's buttons are the deck header's 34px
   pills (Share, Playtest), Decks/Packages the rounded switch of Create a deck's Start with, and
   the location muted text. Builder only: the Decks page keeps two-line names. */
#deck-library-panel .deck-library-card>strong{display:block;-webkit-line-clamp:unset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#deck-library-panel #library-toolbar>div{display:flex;align-items:center;gap:8px}
#deck-library-panel #library-toolbar button.ghost,#deck-library-panel #library-toolbar button.primary{height:34px;min-height:34px;padding:0 16px;border-radius:999px;font:600 13px/13px system-ui;letter-spacing:0;text-transform:none}
#deck-library-panel #library-toolbar button.ghost{border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:transparent;color:var(--ink)}
#deck-library-panel #library-toolbar button.ghost:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 6%,transparent)}
#deck-library-panel #library-toolbar button.ghost:disabled{opacity:.4}
#deck-library-panel #library-toolbar button.ghost.danger{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));color:var(--danger)}
#deck-library-panel #library-toolbar button.primary{border:1px solid var(--accent)}
#deck-library-panel #library-kind{display:inline-grid;grid-auto-flow:column;gap:2px;height:auto;padding:3px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
#deck-library-panel #library-kind button{height:28px;min-height:28px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 12px/1 system-ui;letter-spacing:0;text-transform:none}
#deck-library-panel #library-kind button:hover:not(.active){background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
#deck-library-panel #library-kind button.active{background:var(--surface-raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}
#deck-library-panel #library-location{margin-left:4px;color:var(--muted);font:400 12px system-ui;letter-spacing:0;text-transform:none}

/* The Comments tab (Brett, 2026-11-05): the thread had sat under the decklist on every tab, so
   the page scrolled to reach it while the decklist scrolled inside the page. In its own tab, in
   the panel the Combos and Simulations tabs use, and the Builder fits the window. */
.construction-main.comments-view>#deck-cards,.construction-main.comments-view>.deck-legality-warning,.construction-main.comments-view>.deck-cards-hscroll{display:none}
.construction-main.comments-view>.deck-comments{max-width:980px;margin:10px auto;padding:clamp(22px,3vw,42px);border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.builder-section-count{margin-left:4px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--copper) 18%,transparent);color:var(--copper);font:600 var(--text-2xs)/1.4 system-ui}

/* Search Catalog as a pill beside the add box (Brett, 2026-11-05): it read as plain text. The
   deck header's 34px pill (Share), so it looks like the button it is. */
.builder-page .construction-toolbar #builder-search-catalog{display:inline-flex;align-items:center;height:34px;min-height:34px;padding:0 16px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:999px;background:transparent;color:var(--ink);font:600 13px/13px system-ui;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
.builder-page .construction-toolbar #builder-search-catalog:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent);background:color-mix(in srgb,var(--ink) 6%,transparent)}