/* Collapsible screen sections (CollapseCards). A WRAPPING ROW, not a column: that is the whole
   mechanism. An expanded section has a 100% basis so it cannot fit beside anything and wrap gives
   it its own full-width line; a collapsed one shrinks to its chip, and chips share a line.
   Scoped like .gameover-screen's override: the shell's `.app-content > .screen` sets
   `display: block` at (0,2,0) and would leave every section a full-width block. */
.cc-host,
.app-content > .screen.cc-host {
  width: 100%;
  box-sizing: border-box;
  display: flex; flex-flow: row wrap; align-items: flex-start;
  /* Row rhythm is per-item margin, not row-gap: the line-break spacer below is zero-height, and a
     flex line's cross size clamps at 0, so a row-gap would charge 16px for it that no negative
     margin can claw back. */
  column-gap: 16px; row-gap: 0;
}
/* The shell's sibling margin would push each wrapped item onto a line of its own. */
.app-content > .screen.cc-host > * + * { margin-top: 0; }
/* No :last-child exception: that is DOM order, while `order` moves chips visually, so the section
   that happens to be DOM-last would lose the margin separating the chip row from the sections. The
   trailing 16px is absorbed by the screen's own bottom padding. */
.cc-host > * { flex: 1 1 100%; min-width: 0; margin-bottom: 16px; }

/* Zero-height full-width flex item closing the chip row. Needed only when chips coexist with an
   open pair: every other expanded section has a 100% basis and breaks on its own. Sits after the
   chips (order:-1) and before every section, and carries no margin, so it costs no height. */
.cc-host.cc-has-chips.cc-pair::before {
  content: '';
  flex: 1 1 100%; height: 0;
}

/* Collapsed: a chip that is only its own control. Scoped through .cc-host so it cannot lose to the
   `> *` basis above on specificity. */
/* Under .cc-host only: with the preference off there is no control to position, and a stray
   containing block would re-anchor any absolutely-positioned descendant. */
.cc-host [data-cc] { position: relative; }
.cc-host > [data-cc].is-collapsed {
  /* Chips gather at the top whatever their DOM position, so they read as one row of buttons
     instead of stranding one between two expanded sections. DOM order is untouched, which is what
     returns a section to its own place on expand. */
  order: -1;
  /* Normalise the host's own display: a grid or flex section would lay the chip out in its tracks
     (.tr-modes is a 5-column grid), and its own border/background may not exist at all. A chip
     must look and size the same whatever it collapsed from. */
  display: flex;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: 999px;
}
.cc-host > [data-cc].is-collapsed > * { display: none; }
.cc-host > [data-cc].is-collapsed > .cc-toggle {
  display: inline-flex;
  position: static;
  width: auto; height: auto;
  padding: 7px 14px;
}

.cc-toggle {
  position: absolute; top: 8px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 0; border-radius: 999px;
  color: var(--bronze-2); cursor: pointer;
  font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.02em;
}
.cc-toggle:hover { color: var(--bronze); background: var(--bg-2); }
.cc-toggle:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
/* Expanded, the section's own heading already names it. */
.cc-toggle .cc-lbl { display: none; }
.cc-host > [data-cc].is-collapsed .cc-lbl {
  display: inline-block;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-caret {
  display: inline-flex; line-height: 1;
  /* U+203A at 0.8rem was a near-invisible dash once rotated. */
  font-size: 1.35rem; font-weight: 700;
  /* Down when open, right when collapsed — same idiom as the sidebar's nav groups. */
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}
.cc-host > [data-cc].is-collapsed .cc-caret { transform: rotate(0deg); }

/* Phones: content-width chips wrap into a ragged pile — four sections gave four different widths
   over two rows, with each caret landing wherever its label ended. Two equal columns instead, so
   the edges and the carets line up; a long label ellipsises rather than widening its chip.
   flex-grow 0 on purpose: every chip is the same size whatever the count, so an odd last one keeps
   its shape instead of stretching into a full-width bar. */
@media (max-width: 640px) {
  .cc-host > [data-cc].is-collapsed { flex: 0 1 calc(50% - 8px); }
  .cc-host > [data-cc].is-collapsed > .cc-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 8px 12px;
  }
  .cc-host > [data-cc].is-collapsed .cc-lbl { flex: 1 1 auto; text-align: left; }
  .cc-host > [data-cc].is-collapsed .cc-caret { flex: 0 0 auto; }
}