/*
 * Layout rhythm — spacing and alignment corrections.
 *
 * Two areas were producing large unintentional voids:
 *
 * 1. The My Sprites filter bar. `.overview-filters-v5` is a flex-wrap container that
 *    later modules append into: the rarity chips, the status pills, a "153 variants"
 *    counter carrying `margin-left:auto`, and the MASTERY row all became wrapped
 *    siblings. The auto margin pushed the counter to the far right of whichever line
 *    it landed on, and the mastery row stretched full width underneath, leaving the
 *    dead space in the middle. Rebuilt as an explicit grid with labelled rows.
 *
 * 2. The feedback page. The compose column and the thread column are separate panels
 *    with no shared vertical rhythm, so the short left column left a tall gap beneath
 *    it while the right column ran long.
 *
 * This file adds no new colours. It only corrects spacing, alignment and flow.
 */

/* ---- shared vertical rhythm ------------------------------------------ */

.content .hero + .stats{margin-top:var(--space-5,24px)}
.content .stats + .toolbar{margin-top:var(--space-4,16px)}
.content .toolbar + .chips{margin-top:var(--space-3,12px)}

/* ---- My Sprites filter bar ------------------------------------------- */

.overview-filters-v5{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px 14px !important;
  margin-bottom:var(--space-4,16px) !important;
  padding:14px 16px !important;
  border-radius:var(--radius-dialog,14px);
}

/* The section caption ("RARITY", "MASTERY") owns column 1 and stays vertically
   centred against its row instead of floating above it. */
.overview-filters-v5 .overview-filter-title{
  grid-column:1;
  align-self:center;
  white-space:nowrap;
  color:var(--ct-muted,#8ea3bd);
}

/* Control groups take the flexible middle column and wrap inside themselves,
   rather than wrapping as siblings of the caption. */
.overview-filters-v5 .mastery-filter-v5,
.overview-filters-v5 [role="group"]{
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}

/* The count sits in its own column. No auto margin, so it can never be flung to
   the end of an unrelated wrapped line. */
.overview-filters-v5 > strong{
  grid-column:3;
  margin-left:0 !important;
  align-self:center;
  white-space:nowrap;
  color:var(--ct-muted,#8ea3bd);
  font-size:var(--type-3xs,.68rem);
  font-weight:850;
  letter-spacing:.04em;
}

/* Standalone checkbox filters flow in the middle column too. */
.overview-filters-v5 > label{grid-column:2;justify-self:start;margin:0}

/* Rarity chips share the same rail so the two rows line up. */
.chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:var(--space-4,16px);
  overflow:visible;
}
.chip{min-height:34px;padding:6px 14px}

@media(max-width:820px){
  .overview-filters-v5{grid-template-columns:minmax(0,1fr)}
  .overview-filters-v5 .overview-filter-title,
  .overview-filters-v5 .mastery-filter-v5,
  .overview-filters-v5 [role="group"],
  .overview-filters-v5 > label,
  .overview-filters-v5 > strong{grid-column:1}
  .overview-filters-v5 > strong{justify-self:start}
}

/* ---- feedback page --------------------------------------------------- */

/* Columns start at the top and keep their own height rather than one stretching
   to match the other. */
#feedbackPage .grid2,
.feedback-layout{
  align-items:start;
  gap:var(--space-4,16px);
}

/* Compose column: consistent field rhythm, no cramped pairs. */
.feedback-compose .fields,
#feedbackForm{display:grid;gap:var(--space-3,12px)}
.feedback-compose label > span:first-child,
#feedbackForm label > span:first-child{
  display:block;
  margin-bottom:var(--space-1,4px);
  font-size:var(--type-xs,.75rem);
  font-weight:850;
}
.feedback-compose textarea,
#feedbackForm textarea{min-height:110px;resize:vertical;line-height:var(--line-body,1.55)}

/* Visibility radio cards: even padding, no text touching the control. */
.feedback-visibility-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:4px 12px;
  padding:12px 14px;
  border-radius:var(--radius-object,10px);
}
.feedback-visibility-option input{grid-row:1/3;align-self:center}
.feedback-visibility-option small{color:var(--ct-muted,#8ea3bd);line-height:var(--line-snug,1.3)}

/* Thread bubbles: breathing room between consecutive messages. */
.feedback-message-bubble + .feedback-message-bubble{margin-top:var(--space-2,8px)}
.feedback-message-bubble{padding:14px 16px;line-height:var(--line-body,1.55)}

/* The suggestion card header wrapped awkwardly when badges ran long. */
.feedback-card-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px 16px;
}
.feedback-card-head .feedback-badges{display:flex;flex-wrap:wrap;gap:6px;min-width:0}

@media(max-width:760px){
  .feedback-card-head{grid-template-columns:minmax(0,1fr)}
  .feedback-card-head > :last-child{justify-self:start}
}