/* Requests and Bugs pages (requests.html, bugs.html): page-only styles. Load after site.css.
   Everything else comes from the shared classes in site.css (see STYLEGUIDE.md).

   Sections
    1 page head          2 without script      3 layout and side panels
    4 the board: toolbar, count line, rows     5 status legends, kind badges, status chips
    6 forms and similar requests               7 detail views        8 known issues */

/* 1. Page head ------------------------------------------------------------------- */

/* The h1 names the view. In a detail view it holds a player's title of up to 120
   characters, so it drops one step and widens (the same rule as the Forums page). */
.community-head-text { display: grid; gap: 0.9rem; min-width: 0; }
.community-head-text > * { min-width: 0; }

.community-head[data-view="detail"] h1 {
  max-width: 34ch;
  font-size: clamp(var(--step-2), 1.1rem + 2vw, var(--step-3));
  line-height: 1.15;
}

.community-head-meta { display: grid; gap: 0.55rem; }
.community-head-meta .meta { font-size: var(--step--1); }
.community-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.community-jump { gap: 0.6rem 0.75rem; }

/* On the list views a character frame stands beside the title, from 720px. */
.community-head-art { display: none; }
@media (min-width: 720px) {
  .community-head[data-view="list"] .wrap,
  .community-head[data-view="main"] .wrap {
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 22vw, 17.5rem);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .community-head[data-view="list"] .community-head-art,
  .community-head[data-view="main"] .community-head-art { display: flex; margin: 6px; }
}

/* 2. Without script ---------------------------------------------------------------- */

#app:not(.js) .js-only { display: none !important; }

/* 3. Layout and side panels ---------------------------------------------------------- */

.community-side { --stack-gap: 1.5rem; }
.community-side .panel-body p,
.community-side .panel-body li,
.community-side .panel-body dd { font-size: var(--step--1); }

.community-list { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.2rem; }
.community-list li::marker { color: var(--sakura); }

.section-note { color: var(--mist); }

/* The three sections of the Bugs page are split by a hairline. */
#view-main > .band + .band { border-top: 1px solid var(--haze); }

/* 4. The board: a dock with a toolbar, a live count line and the rows ------------- */

/* Clipping keeps the last row's hover inside the dock's round corners. */
.board { overflow: hidden; }

.toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.85rem 0.75rem;
  padding: 0.9rem 1rem 1rem;
  border-bottom: 1px solid var(--haze);
}
.toolbar > * { min-width: 0; }
.toolbar .field { gap: 0.3rem; }
.toolbar .field > label,
.toolbar .field-label {
  color: var(--mist);
  font-size: var(--step--2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toolbar-wide,
.toolbar-sort { grid-column: 1 / -1; }
@media (min-width: 480px) {
  .toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .toolbar-sort { grid-column: auto; }
}

.board-status {
  max-width: none;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--haze);
  color: var(--mist);
  font-size: var(--step--2);
}
.board-note { padding: 1.25rem 1rem; color: var(--mist); }
.board .empty,
.board > .panel-body > .notice { margin: 1rem; }

/* 5. Status legends, kind badges and status chips ----------------------------------- */

.legend { row-gap: 0.7rem; align-items: start; }
.legend dt { padding-top: 0.1rem; }
.legend dd { color: var(--mist); }

/* Kinds are labels, not states: outlined only, beside the filled status badges. */
.badge-kind { --tone: var(--mist); background: transparent; }

.status-chips button { display: inline-flex; align-items: center; gap: 0.4rem; }
.chip-count {
  font-family: var(--font-utility);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--mist);
}
.status-chips button[aria-pressed="true"] .chip-count { color: var(--moon); }

/* 6. Forms and similar requests ------------------------------------------------------- */

.form-panel .form { max-width: none; }
.form-note { color: var(--mist); font-size: var(--step--1); }

.form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.form textarea.textarea-short { min-height: 6rem; }

/* "Already asked?": requests like the title being typed, voted on in place. */
.similar {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px dashed var(--haze);
  border-radius: var(--radius-control);
  background: var(--night);
}
.similar-title { font-size: var(--step--1); font-weight: 800; }
.similar-status { color: var(--mist); font-size: var(--step--1); }
.similar-list .row { padding: 0.6rem 0.75rem; }
.similar-list .vote { width: 3rem; min-height: 3rem; }
.similar-list .row-title { font-size: var(--step--1); }

/* The report and flag dialogs */
.report-form { gap: 1rem; }
.report-form textarea { min-height: 6rem; }
.report-target {
  padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--sakura);
  background: var(--night);
  color: var(--moon);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.report-note { gap: 0.6rem; font-size: var(--step--1); }

/* 7. Detail views ---------------------------------------------------------------------- */

.detail { max-width: 52rem; }
.detail > .panel-body { display: grid; gap: 1.15rem; }
.detail > .panel-body > * + * { margin-top: 0; }

.detail-vote { display: flex; align-items: center; gap: 0.85rem; }
.detail-vote p { color: var(--mist); font-size: var(--step--1); }

.detail .kv {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--haze);
  border-radius: var(--radius-control);
  background: var(--night);
}

.detail-section { display: grid; gap: 0.4rem; }
.detail-section h2 {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}

.detail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--haze);
}
.detail-foot .btn-link { min-height: 2.75rem; }

/* 8. Known issues ----------------------------------------------------------------------- */

.issue { display: flex; flex-direction: column; }
.issue > .panel-body { display: grid; flex: 1; align-content: start; gap: 0.6rem; }
.issue > .panel-body > * + * { margin-top: 0; }
.issue-title { font-size: var(--step-0); line-height: 1.35; }
.issue-fix { color: var(--mist); font-size: var(--step--1); }
.issue-meta { padding-top: 0.2rem; }