/* Card Search, laid out and finished like Community (2026-10-30, Brett: "make the card search page
   look like community visually"). The page is community.html's: one rounded panel with the heading
   and a short line under it, the filters sticky on the left (`.community-refine`), the tabs, chips
   and sort in Community's sticky bar over the results, and the page itself scrolls. Most of the
   finish comes from community-search.css through the shared `community-page` class. Card Search
   adds a third column, the active deck's analysis, sticky like the filters.
   It used to be a fixed-height workbench whose panels scrolled inside the window. */
.card-search-page .card-search-workspace{grid-template-columns:minmax(270px,300px) minmax(0,1fr) 230px}
.card-search-page .card-search-workspace:has(.card-search-analysis.no-active-deck){grid-template-columns:minmax(270px,300px) minmax(0,1fr)}

/* The active deck's analysis: the Deck Builder's sidebar, as a sticky panel like the filters. */
.card-search-page .card-search-analysis{position:sticky;top:96px;height:auto;max-height:calc(100vh - 116px);min-height:0;padding:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
/* Without an active deck the analysis column has nothing to analyse, so it goes and the results
   take the width — which matters for signed-out visitors, who have no active deck to have. */
.card-search-analysis.no-active-deck{display:none}

/* The results. */
.card-search-page .search-results{--result-card-width:145px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--result-card-width),100%),1fr));gap:16px}
.card-search-page .search-results.card-group-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card-search-page .results-heading{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:6px 0 12px;padding:0;border:0}
.card-search-page .results-heading #result-count{color:var(--muted);font-size:var(--text-xs)}
.results-view-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-left:auto}
/* Card size and Hover preview, beside the count (cards-page.js). */
.result-size-control{display:inline-grid;grid-template-columns:auto minmax(90px,140px) 4.5ch;align-items:center;gap:8px;margin:0;color:var(--muted);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
.result-size-control input{margin:0;padding:0;border:0;background:none;accent-color:var(--green2)}.result-size-control output{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
/* Card size, hover preview and the card sort mean nothing to a grid of Browse by tiles. */
.card-search-page .results-panel.browsing .results-view-controls,.card-search-page .results-panel.browsing .community-sort-label{display:none}

/* The filters. Community's groups; no small-capital labels anywhere on the page (Brett). */
.card-search-page .search-controls .community-filter-groups{margin-top:6px}
.card-search-page .search-controls .type-filter-label>span:first-child,
.card-search-page .search-controls .tag-filter-label>span:first-child,
.card-search-page .search-controls .set-filter-label>span:first-child{display:block;margin-bottom:6px;color:var(--muted);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
.card-search-page .search-controls .tag-filter-label small{display:block;margin-top:6px;color:var(--muted);font:var(--text-2xs)/1.5 system-ui;letter-spacing:0;text-transform:none}
.card-search-page .search-controls .filter-clear{grid-column:auto;padding:0;color:var(--copper);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
.card-search-page .search-controls .oracle-reminder-toggle,.card-search-page .search-controls .exact-printings-control{display:flex;align-items:center;gap:8px;color:var(--muted);font:var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
.card-search-page .card-search-analysis .sidebar-analysis-panel>h2{text-transform:none;letter-spacing:0;font:500 var(--text-base)/1.2 Georgia,serif;color:var(--ink)}
.card-search-page .card-search-analysis .sidebar-deck-size-label,
.card-search-page .card-search-analysis .sidebar-average-mana span{text-transform:none;letter-spacing:0}
.card-search-page .sidebar-label{margin:0 0 8px;color:var(--muted);font:600 var(--text-xs) system-ui}

/* The filters fold on a phone, as Community's do. The query box stays outside the fold, and
   cards-page.js starts the panel closed below 850px. Above that the summary is hidden and the
   panel is always open. */
.card-search-filter-panel>summary{display:none;align-items:center;justify-content:space-between;margin-top:10px;padding:9px 0;color:var(--green2);font-size:var(--text-xs);font-weight:700;cursor:pointer;list-style:none}
.card-search-filter-panel>summary::-webkit-details-marker{display:none}
.card-search-filter-panel>summary::after{content:"▾";transition:transform .15s}
.card-search-filter-panel[open]>summary::after{transform:rotate(180deg)}
.card-search-filter-panel>summary [data-active-filter-count]{margin:0 auto 0 8px;color:var(--muted);font-weight:600}
@media(prefers-reduced-motion:reduce){.card-search-filter-panel>summary::after{transition:none}}

/* Suggested for this deck: a tab since 2026-10-30, its need picker under the tabs, the filters
   greyed while it is on, and the why-line on each result. */
.card-search-page .suggested-bar{margin-top:10px}
.suggested-need-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0}
.suggested-need-control>span{color:var(--muted);font:600 var(--text-xs) system-ui}
.suggested-need-control select{width:auto;min-width:260px;max-width:100%;margin:0}
.suggested-need-control small{flex-basis:100%;color:var(--muted);font-size:var(--text-2xs);line-height:1.45}
.search-controls.suggesting .card-search-filter-panel{opacity:.45;pointer-events:none}
.result-suggestion{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.result-suggestion>span{padding:2px 6px;border-radius:99px;background:var(--accent-soft);color:var(--accent-strong);font-size:var(--text-2xs);line-height:1.35}
.result-suggestion>span.over-budget{background:var(--danger-soft);color:var(--danger)}

/* The result card's right-click menu (2026-10-21): the shared .card-context-menu, wide enough
   for "Remove one from Considering (2)", headed by the card and the deck it acts on. */
.card-context-menu.result-card-menu{width:240px}
.result-card-menu-label{margin:0;padding:6px 12px 8px;color:var(--muted);font-size:var(--text-2xs);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--line)}
.card-context-menu.result-card-menu button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}

/* Narrower columns below 1180px; below 850px everything stacks, the filters fold, and the analysis
   column becomes the Builder's drawer (builder-wide.css, through `.construction-sidebar`;
   cards-page.js mounts the toggle). */
@media(max-width:1180px){.card-search-page .card-search-workspace{grid-template-columns:240px minmax(0,1fr) 200px}.card-search-page .card-search-workspace:has(.card-search-analysis.no-active-deck){grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:850px){.card-search-page .card-search-workspace{grid-template-columns:1fr}.card-search-filter-panel>summary{display:flex}}
/* On a phone the analysis panel is the Analysis drawer (builder-wide.css): fixed to the screen's
   edge and slid off it when closed. The desktop rule above made it sticky and kept it in the page,
   where sliding it by its own width left 37px of it showing down the left edge (2026-11-03, Brett). */
@media(max-width:850px){.card-search-page .card-search-analysis{position:fixed;top:0;bottom:0;left:0;max-height:none;border-radius:0;border-width:0 1px 0 0}}

/* The bar over the results is clear, as on Community (Brett, 2026-10-30, who preferred that to the
   solid surface it carried for a few hours). */
.card-search-page .card-search-results-controls{background:transparent}
.card-search-page .results-view-controls>label{margin:0}
.card-search-page .results-view-controls .result-size-control{display:inline-grid;grid-template-columns:auto minmax(90px,140px) 4.5ch;width:auto}
.card-search-page .results-view-controls>label:not(.result-size-control){display:inline-flex;align-items:center;gap:6px;width:auto;color:var(--muted);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
/* Checkbox rows ("Include art cards…", "Include reminder text"): Community's fields stretch every input
   to the full width, which made the box 118px wide and squeezed its words into a column. */
.card-search-page .search-controls .oracle-reminder-toggle,.card-search-page .search-controls .exact-printings-control{justify-content:flex-start;align-items:flex-start;gap:8px;width:100%;text-align:left}
.card-search-page .search-controls input[type="checkbox"]{flex:none;width:auto;height:auto;margin:2px 0 0;padding:0}
/* Where the results start, for the bounded results box in community-search.css. */
.card-search-page{--results-top:230px}

/* The page title and the active-deck pill beside it went (2026-10-30, Brett): the filters' own title
   is the page's heading, and the active deck heads its analysis panel with View deck. */
.community-refine .panel-title h1.card-search-title{margin:0;font:var(--text-xl) Georgia,serif}
.card-search-page .card-search-browser{padding-top:clamp(16px,1.6vw,26px)}
.card-search-analysis .active-deck{display:flex;justify-content:center;min-width:0;margin:0 0 12px;padding:2px 2px 12px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink)}
.card-search-analysis .active-deck p{display:none}
.card-search-analysis .active-deck strong{font:500 var(--text-base)/1.3 Georgia,serif;white-space:normal;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-search-analysis .active-deck span{color:var(--muted);font-size:var(--text-2xs)}
.card-search-analysis .active-deck a{padding:5px 12px;border:1px solid color-mix(in srgb,var(--copper) 70%,transparent);border-radius:999px;color:var(--copper);font:600 var(--text-xs) system-ui;text-decoration:none}
.card-search-analysis .active-deck a:hover{background:color-mix(in srgb,var(--copper) 12%,transparent)}
.card-search-analysis .active-deck a:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
/* Without an active deck: one line over the results, with its link or retry. */
.results-panel>.active-deck-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink);font-size:var(--text-xs)}
.results-panel>.active-deck-notice p{margin:0;color:var(--muted);font:600 var(--text-xs) system-ui;letter-spacing:0;text-transform:none}
.results-panel>.active-deck-notice strong{font-weight:600}
.results-panel>.active-deck-notice a{margin-left:auto;color:var(--copper);font-weight:600;text-decoration:none}
.results-panel>.active-deck-notice button{margin-left:auto}
.search-controls .panel-title .analysis-toggle{margin-left:8px}
.card-search-page{--results-top:150px}
.card-search-page .community-tabs .card-search-tab-suggested{margin-left:auto}
/* The page scrolls the results (Brett, 2026-11-06): on Card Search the results no longer sit in a
   box of their own (community-search.css, 2026-10-30), so the window's scrollbar moves the cards.
   Only the filters and the deck analysis beside them stay put, each scrolling on its own when it
   is taller than the window. */
@media(min-width:851px){
  .card-search-page .community-results{position:static;display:block;max-height:none;min-height:0}
  .card-search-page .community-results-scroll{overflow:visible;overscroll-behavior:auto;padding:2px 0}
  /* The bar over the cards (tabs, applied filters, sort) stays frozen under the site header (60px
     once the page has scrolled and the header has shrunk) while the cards scroll (Brett,
     2026-11-06). It stays clear, on the page's own background; cards-page.js clips the results at
     its bottom edge, so they disappear there instead of passing under it. */
  .card-search-page .community-results-controls{position:sticky;top:60px;z-index:6;padding:10px 0}
}
/* A two-faced card's turn-over button (Brett, 2026-11-06): a round button at the bottom middle of the
   picture. The card is a size container so the button can sit at the foot of the picture, whose
   height follows the card's width. */
.card-search-page .result-card{position:relative;container-type:inline-size}
.card-search-page .result-card .result-flip{position:absolute;z-index:2;top:calc(100cqw * 680 / 488 - 44px);left:50%;display:grid;place-items:center;width:34px;height:34px;margin:0 0 0 -17px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 4px 12px -4px rgba(0,0,0,.7);color:var(--ink);font:600 18px/1 system-ui;cursor:pointer;backdrop-filter:blur(3px);transition:border-color .15s,color .15s,transform .2s}
.card-search-page .result-card .result-flip:hover{border-color:var(--copper);color:var(--copper)}
.card-search-page .result-card .result-flip:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.card-search-page .result-card .result-flip[aria-pressed="true"]{border-color:color-mix(in srgb,var(--copper) 70%,transparent);color:var(--copper)}
.card-search-page .result-card .result-flip[aria-pressed="true"] span{display:inline-block;transform:scaleX(-1)}