/* The Community search: a Card Search-style sidebar beside a results column, with category
   tabs across the top of the results. Loaded by community.html only, after /styles.css, so
   these rules win ties against the shared community.css rules they refine. */

.community-browser-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px 24px;margin-bottom:22px}
.community-shelf-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* With the hero gone, the browser is the page: it starts under the header with a real h1. */
.community-page{width:100%;max-width:none;padding:28px clamp(16px,2vw,34px) 70px}
.community-browser{padding:clamp(20px,2vw,34px)}
.community-browser-head h1{margin:0;font:var(--text-4xl) Georgia,serif}
.community-lede{margin:6px 0 0;color:var(--muted);font-size:var(--text-xs);max-width:620px}


.community-layout{display:grid;grid-template-columns:minmax(270px,310px) minmax(0,1fr);gap:clamp(18px,2vw,30px);align-items:start}
.community-refine{position:sticky;top:96px;padding:20px;box-shadow:none;max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.community-refine .panel-title{margin-bottom:12px}
.community-refine .panel-title h2{font:var(--text-xl) Georgia,serif}
.community-refine .community-query-label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.community-refine .search{width:100%}
/* Direct children only: the mana checkboxes are labels too, and must keep their 32px circles. */
.community-fields>label{display:grid;gap:4px;width:100%;margin:0;color:var(--muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em}
.community-fields>label input{margin:0;text-transform:none;letter-spacing:normal}
.community-refine select{width:100%}
/* Not `.community-filters`: community.css still styles that name as the old row of format
   chips, and those rules would turn this column into a wrapping row of pills. */
.community-fields{display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px}
.community-fields select{margin:0;padding:9px 10px;font-size:var(--text-2xs)}
.community-fields input{padding:10px 11px}
/* All six colors on one row. At the sidebar's 290px the fieldset has about 226px inside it,
   and six 32px circles with 7px gaps need 227 — so they wrapped one onto a second line. The gap
   is tighter here and the circles may shrink a little, never below 24px, rather than wrap. */
.community-fields .color-filter{flex-wrap:nowrap;gap:5px;justify-content:space-between;margin:0}
/* community.css sizes every label in the browser to min(380px,100%), which outranks the 32px
   `.mana-check` circle from filters.css — and the symbol inside is 100% of its label. Pinned
   back here so each color is the same small circle it is on Card Search. */
.community-fields .color-filter .mana-check{width:32px;height:32px;flex:0 1 32px;min-width:24px;height:auto;aspect-ratio:1;margin:0}
.community-fields .filter-clear{border:0;background:transparent;color:var(--green2);padding:5px;cursor:pointer;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
/* The filters fold away on a phone, where they would otherwise stand between the query and
   the results. On a wide screen they are always open and the summary is not shown. */
.community-filter-panel>summary{display:none}
.community-inline-add{display:flex;gap:6px}
.community-inline-add input{flex:1;min-width:0}
.community-inline-add button{padding:8px 10px}

.community-syntax{margin:8px 0 2px;font-size:var(--text-2xs);color:var(--muted)}
.community-syntax summary{color:var(--green2);font-weight:700;cursor:pointer}
.community-syntax p{margin:8px 0}
.community-syntax dl{display:grid;gap:7px;margin:0}
.community-syntax dt{display:flex;flex-wrap:wrap;gap:4px}
.community-syntax dd{margin:0 0 2px;line-height:1.45}
.community-syntax code{background:var(--surface-muted);color:var(--green2);padding:2px 5px;font:700 var(--text-2xs) system-ui}

.community-results{min-width:0}
.community-results-controls{position:sticky;top:76px;z-index:8;margin:-8px 0 0;padding:12px;border:1px solid var(--line);border-radius:4px;background:var(--surface);box-shadow:var(--shadow)}
.community-results-topline{display:flex;align-items:end;gap:16px}
.community-results-topline .community-tabs{flex:1 1 auto;min-width:0}
.community-results-topline .community-shelf-controls{flex:0 0 auto;padding-bottom:3px}
/* One row that scrolls sideways on a narrow screen rather than wrapping into three. */
.community-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.community-tabs button{flex:0 0 auto;padding:10px 13px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--muted);font-weight:700;font-size:var(--text-xs);cursor:pointer;white-space:nowrap}
.community-tabs button:hover{color:var(--ink)}
.community-tabs button.active{color:var(--green2);border-bottom-color:var(--green2)}
.community-tabs button:focus-visible{outline:2px solid var(--green2);outline-offset:-2px}

.community-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 0 2px}
.community-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.community-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 9px;border:1px solid var(--green);border-radius:999px;background:var(--accent-soft);color:var(--green2);font-size:var(--text-2xs);font-weight:700;cursor:pointer}
.community-chip>span:not(.community-chip-symbols){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-chip:hover{border-color:var(--danger);color:var(--danger)}
.community-chip-symbols{display:inline-flex;gap:2px}
.community-chip-symbols img{width:13px;height:13px}
.community-sort-label{display:flex;align-items:center;gap:8px;margin:0 0 0 auto;color:var(--muted);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.1em}
/* Sort stays at the right whether or not chips sit beside it (2026-10-30, Brett): `.community-browser
   label{margin:0}` in community.css outranks the rule above, so with no chips Sort sat at the left and
   jumped across when a filter was applied. Community and Card Search both. */
.community-toolbar .community-sort-label{width:auto;margin-left:auto}
.community-sort-label select{width:auto;margin:0;padding:7px 9px;font-size:var(--text-2xs)}

/* Fill every available row in the results column, including the former right margin. */
.community-layout .community-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.community-deck-upcoming{border-left-color:var(--copper)!important}

/* Category cards: the same footprint as a deck card, so switching tabs does not reflow the
   page, with the category's art behind its name and its deck count beneath. */
.community-category-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0;height:150px;padding:14px;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-left:3px solid var(--copper);background:var(--surface-raised);color:var(--ink);text-align:left;cursor:pointer}
.community-category-card:hover,.community-category-card:focus-visible{border-color:var(--green)}
.community-category-card:focus-visible{outline:2px solid var(--green2);outline-offset:2px}
.community-category-card strong{font:var(--text-l) Georgia,serif;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.community-category-card small{color:var(--muted);font-size:var(--text-2xs)}
.community-category-art,.community-category-scrim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.community-category-art{z-index:-2;object-fit:cover;object-position:center 18%;transform:scale(1.12);filter:saturate(.85);transition:transform .25s}
.community-category-scrim{z-index:-1;background:linear-gradient(180deg,rgba(12,18,15,.08) 0%,rgba(12,18,15,.45) 45%,rgba(12,18,15,.94) 100%)}
.community-category-card.has-art{color:var(--on-inverse)}
.community-category-card.has-art strong{text-shadow:0 1px 3px rgba(0,0,0,.8)}
.community-category-card.has-art small{color:rgba(244,239,228,.82)}
.community-category-card.has-art:hover .community-category-art{transform:scale(1.18)}
/* A builder's own picture is usually a face or a square logo: centre it, and zoom it less. */
.community-category-art.community-avatar-art{object-position:center;transform:none}
.community-category-card.has-art:hover .community-avatar-art{transform:scale(1.05)}
/* Two commanders. Each art is a 60%-wide box centred on its own half of the card — at 25% and
   75% — so each commander sits in the middle of the half it owns rather than drifting toward
   the seam. The left box runs from -5% to 55% and fades out over its last sixth, which is the
   45–55% band of the card, onto the right art underneath it. */
.community-pair-art{transform:none;object-position:center 18%}
.community-pair-left{z-index:-2;left:-5%;width:60%;-webkit-mask-image:linear-gradient(90deg,black 83%,transparent);mask-image:linear-gradient(90deg,black 83%,transparent)}
.community-pair-right{z-index:-3;left:45%;width:60%}
.community-category-card.has-pair-art:hover .community-category-art{transform:scale(1.05)}
/* Same top-left slot as a deck card's colors, and the same rule: stop short of the badges. */
.community-category-symbols{position:absolute;z-index:3;top:12px;left:14px;display:flex;gap:4px;max-width:calc(100% - 92px)}
.community-category-symbols img{flex:0 1 26px;min-width:16px;width:26px;height:auto;aspect-ratio:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

@media(max-width:1050px){
  .community-results-topline{align-items:stretch;flex-direction:column;gap:8px}
  .community-results-topline .community-shelf-controls{padding-bottom:0}
}
/* Below the Card Search breakpoint the sidebar stops being a sidebar: it sits above the
   results, unstuck, and the page scrolls as one. */
@media(max-width:850px){
  .community-layout{grid-template-columns:1fr}
  .community-refine{position:static;max-height:none;overflow:visible}
  .community-results-controls{position:static;margin:0;padding-top:0}
  .community-filter-panel>summary{display:block;margin-top:10px;padding:9px 0;color:var(--green2);font-size:var(--text-xs);font-weight:700;cursor:pointer}
  .community-layout .community-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .community-browser-head{align-items:stretch;flex-direction:column}
  .community-shelf-controls{flex-direction:column;align-items:stretch}
  .community-shelf-controls .library-kind-control{display:flex;width:100%}
  .community-shelf-controls .library-kind-control button{flex:1}
  .community-layout .community-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .community-toolbar .community-sort-label{margin-left:0}
}
@media(max-width:400px){.community-layout .community-grid{grid-template-columns:1fr}}

/* Color-identity cards as stacked coins (2026-10-29), replacing the sunburst wash. The mana
   symbols sit large and overlapping in the middle; the stripe along the top gives each color an
   equal band. These colors are richer than the --mana tokens, which are muted for small pips and
   read as grey and beige across a whole band. The coin ring is the card's own surface, so it
   follows the theme. */
.community-coin-card { justify-content: center; align-items: center; gap: 4px; padding-top: 22px; border-left: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); text-align: center; }
.community-coin-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--coin-edge, var(--line)); }
.community-coin-card:hover, .community-coin-card:focus-visible { border-color: var(--copper); }
.community-coins { display: flex; justify-content: center; margin-bottom: 10px; }
.community-coins img { width: 44px; height: 44px; margin-left: -12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-raised), 0 6px 12px -4px rgba(0, 0, 0, .55); }
.community-coins img:first-child { margin-left: 0; }
.community-coin-card strong { font-size: var(--text-l); }

/* A cleaner Community page (Brett, 2026-10-29, from a mock-up): no small-capital labels over the
   heading or the sidebar, sentence-case field labels, softly rounded fields, a toolbar without its
   box, segmented switches for Decks/Packages and the shelves, and larger deck tiles. */
.community-browser { border-radius: 16px; }
.community-browser-head h1 { margin-bottom: 8px; }
.community-page .community-lede { max-width: 62ch; font-size: var(--text-base); line-height: 1.55; }
.community-page .community-refine { border-color: var(--line); border-radius: 14px; }
.community-page .community-refine label,
.community-page .community-refine legend { color: var(--muted); font-size: var(--text-s); font-weight: 600; letter-spacing: 0; text-transform: none; }
.community-page .community-refine input,
.community-page .community-refine select,
.community-page .community-refine .community-inline-add button { border-radius: 8px; }
.community-page .community-refine fieldset { border-radius: 10px; }
.community-page .community-results-controls { padding: 6px 0 0; border: 0; border-radius: 0; box-shadow: none; }
.community-page .community-results-topline { align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.community-page .community-results-topline .community-tabs { border-bottom: 0; }
.community-page .community-results-topline .community-shelf-controls { padding-bottom: 0; }
.community-page .community-toolbar { padding-top: 10px; }
.community-page .community-shelf-controls .library-kind-control { height: auto; gap: 2px; padding: 3px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.community-page .community-shelf-controls .library-kind-control button { padding: 6px 13px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: var(--text-s); box-shadow: none; }
.community-page .community-shelf-controls .library-kind-control button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.community-page .community-shelf-controls .library-kind-control button.active,
.community-page .community-shelf-controls .library-kind-control button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.community-page .community-sort-label { font-size: var(--text-s); font-weight: 600; letter-spacing: 0; text-transform: none; }
.community-page .community-sort-label select { border-radius: 8px; }
.community-page .community-grid .community-deck-card { height: 180px; border-radius: 12px; }
.community-page .community-category-card:not(.community-coin-card) { border-left: 1px solid var(--line); border-radius: 12px; }

/* Browse tabs as "All decks" plus "Browse by" links (2026-10-29). */
.community-page .community-tabs { align-items: center; gap: 2px; padding: 2px 0; }
.community-page .community-tabs button { margin: 0; padding: 6px 10px; border: 0; border-radius: 7px; color: var(--muted); font-size: var(--text-s); font-weight: 600; text-transform: none; }
.community-page .community-tabs button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.community-page .community-tabs button.active { background: var(--surface-raised); color: var(--ink); border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.community-page .community-tabs .community-tab-all { padding: 7px 14px; font-size: var(--text-base); }
.community-tabs-divider { flex: 0 0 1px; height: 22px; margin: 0 12px 0 10px; background: var(--line-strong); }
.community-tabs-lead { flex: 0 0 auto; margin-right: 4px; color: var(--muted); font-size: var(--text-s); white-space: nowrap; }

/* The toolbar as one pill bar (Brett, 2026-10-29): the tab row in a single rounded capsule, with
   no hard-cornered band behind it. Decks/Packages keeps a visible track of
   its own inside the bar. The bar's
   wrapper stays sticky on the panel colour, so it is solid when scrolled over the deck grid. */
.community-page .community-results-topline { gap: 12px; padding: 5px 6px; 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); }
.community-page .community-tabs button { border-radius: 999px; }
.community-page .community-shelf-controls .library-kind-control { padding: 3px; 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); }
.community-page .community-shelf-controls .library-kind-control button { border-radius: 999px; }
.community-page .community-toolbar { padding-top: 12px; }
@media (max-width: 850px) {
  /* Stacked on narrow screens, the row is a rounded panel rather than a capsule. */
  .community-page .community-results-topline { border-radius: 18px; }
}
/* Stacked (1050px and below), the bar's rows fill its width. The centring above would otherwise
   carry over to the column, and a centred row takes its full content width: Card Search's tab
   strip grew to 662px on a phone, spilling past both edges, and the phone zoomed the whole page
   out to fit it (2026-11-03, Brett). Stretched, the strip scrolls sideways inside the bar, as its
   overflow-x always meant it to. */
@media (max-width: 1050px) {
  .community-page .community-results-topline { align-items: stretch; }
}

/* No filled box behind the pill bar and the Sort row (Brett, 2026-10-29). */
.community-page .community-results-controls { background: transparent; }

/* The Deck search sidebar in folding groups (Brett, 2026-10-29, from a mock-up): Colors open, Deck,
   Includes and Built by folded, each naming what is set in it. Clear all filters sits by the heading.
   Match is a three-way switch over the hidden select, styled like the toolbar's toggles. */
.community-page .community-refine .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.community-page .community-refine .panel-title .filter-clear { padding: 4px 0; border: 0; background: transparent; color: var(--copper); font-size: var(--text-s); font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
.community-page .community-refine .panel-title .filter-clear:hover { text-decoration: underline; }
.community-filter-groups { margin-top: 12px; }
.community-filter-group { border-top: 1px solid var(--line); }
.community-filter-group > summary { display: flex; align-items: center; gap: 8px; padding: 14px 2px; color: var(--ink); font-weight: 600; font-size: var(--text-s); list-style: none; cursor: pointer; }
.community-filter-group > summary::-webkit-details-marker { display: none; }
.community-filter-group > summary small { margin-left: auto; overflow: hidden; color: var(--muted); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.community-filter-group.has-filters > summary small { color: var(--copper); }
.community-filter-group > summary::after { content: ""; flex: 0 0 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.community-filter-group[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
.community-filter-group > summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 6px; }
.community-filter-group > .community-fields { margin-top: 0; padding-bottom: 16px; }
.community-filter-group .color-filter { justify-content: center; gap: 6px; padding: 0; border: 0; margin: 0 0 14px; }
.community-filter-group .color-filter legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.community-filter-group .community-fields label { display: grid; gap: 5px; margin: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; }
.community-filter-group .community-fields label:has(> select.hidden) { display: none; }
.community-filter-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.community-match { display: flex; gap: 2px; padding: 3px; 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); }
.community-match button { flex: 1; min-height: 30px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.community-match button:hover { color: var(--ink); }
.community-match button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.community-match button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.community-match-select { display: none; }

/* The results scroll in a box of their own (2026-10-30, Brett), on Community and Card Search alike.
   The bar over them (tabs, chips, sort) is clear, and as the page scrolled the cards passed under
   it and showed through on their way up to the filters. Side by side, the results column is now
   as tall as the window below the header, like the sticky filters beside it; the bar stays put at
   its top and only the grid scrolls, so a card leaves at the box's edge. Stacked below 850px the
   page scrolls as before. */
@media(min-width:851px){
  /* Sized so the whole box fits the window below where the results start on first load: a box
     taller than that left its bottom off-screen, and scrolling inside it never moved the page to
     show it. `--results-top` is that start, set per page (Card Search's heading is shorter). */
  .community-results{position:sticky;top:96px;display:flex;flex-direction:column;max-height:calc(100vh - var(--results-top, 280px));min-height:320px}
  .community-results-controls{position:static;flex:none}
  .community-results>.results-heading{flex:none}
  .community-results-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 4px 2px 0}
}

/* Browse by on a phone (Brett, 2026-11-03, option C): All decks, then a Browse by button that opens
   the categories as a menu in the Builder menus' look. On a wider screen the wrapper and the toggle
   step aside and the categories sit in the row as before. The toggle names the chosen category. */
.community-browse, .community-browse-menu { display: contents; }
.community-page .community-tabs .community-browse-toggle { display: none; }
@media (max-width: 700px) {
  .community-page #community-tabs { overflow: visible; }
  .community-page #community-tabs .community-tabs-divider, .community-page #community-tabs .community-tabs-lead { display: none; }
  .community-browse { position: relative; display: block; }
  .community-page .community-tabs .community-browse-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .community-browse-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: none; flex-direction: column; min-width: 220px; 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); }
  .community-browse.open .community-browse-menu { display: flex; }
  .community-page .community-browse-menu button { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-weight: 500; text-align: left; box-shadow: none; background: transparent; }
  .community-page .community-browse-menu button:hover, .community-page .community-browse-menu button:focus-visible { background: color-mix(in srgb, var(--copper) 12%, transparent); color: var(--copper); outline: none; }
  .community-page .community-browse-menu button.active { background: transparent; box-shadow: none; color: var(--ink); }
  .community-page .community-browse-menu button.active::after { content: "✓"; margin-left: auto; padding-left: 14px; color: var(--copper); }
}