/* ============================================================
   Bug Tracker - page styles (bugs.html, bug.html, bug-report.html)

   Loaded after site.css and hub.css (and, on a bug's page and the
   report form, after hub-features.css, whose request form, screenshot
   field and gallery a website report shares). Everything the Feature
   Hub draws the same way - the home template, the detail template with
   its vote card and quick bar, rows, vote tiles, chips, the timeline,
   dialogs - comes from hub.css, so the two halves cannot drift
   apart; what is here exists on the bug pages alone: a contributor's
   quick filters and the team's severity chips, the report itself and its
   fields, the call to discuss it on Discord, the Manage card, "Also
   reported as", the grouped report's card and the two steps of "Report
   a bug".
   Everything is built from the site's tokens. Every class starts with
   hb-, and the few rules that touch a site or hub class are scoped
   inside an hb- element.
   ============================================================ */

/* A link that opens a new tab ends in the external-link mark. It is a
   finger-sized target without moving its line: 9 px of padding above and
   below grow the hit area, and the same 9 px of negative margin give the
   room back to the layout. */
.hb-ext-link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 0; margin: -9px 0; }

/* ---------------- list ---------------- */

.hb-notice { margin-bottom: 26px; }
.hb-notice .notice { margin-bottom: 0; }

/* One row of the list's grid holds the quick filters - a contributor's
   two (Unclaimed Bugs, My Claimed Bugs) and every signed-in member's two
   (Followed Bugs, Unfollowed Bugs), the site's .chip-filters pills, on
   one line - and, under them, the removable chips of the filters in use.
   Each brings its own 14 px, so a hidden one leaves no gap. */
.hb-chip-area { grid-area: chips; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 7px; }
.hb-chip-area > .hub-chiprow { flex: 1 1 100%; min-width: 0; }
.hb-claim-chips, .hb-follow-chips { margin-top: 14px; }
.hb-claim-chips button:focus-visible, .hb-follow-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .hb-claim-chips button, .hb-follow-chips button { min-height: 40px; }
}

/* The team's severity (the site's .sev pill) sits in a chip row: the
   same 26 px as the status, mode and section chips beside it, so the
   rows' one-line clip still holds. */
.hub-chips .sev, .hub-detail-chips .sev {
  display: inline-flex; align-items: center;
  line-height: 18px;
}

/* The bug page's title chips name what they show, the way Version does
   (bug-page.js paintChips): a quiet label in the version chip's look
   leads the value, and each chip keeps its own colour. */
.hb-chip-k {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.hub-detail-chips .sev, .hub-detail-chips .hub-mode { gap: 7px; }
.hub-detail-chips .hub-cat .hb-chip-k { margin-right: 7px; }

/* Under the list while searching: the way on when nothing matches. */
.hb-not-listed { margin: 28px 0 0; text-align: center; font-size: 0.92rem; color: var(--muted); }
.hb-not-listed a { font-weight: 600; }

/* ---------------- bug page: the back link's row ---------------- */

/* The back link and, at the row's far end, a Contributor's claim actions
   (Claim Bug; PR Submitted and Release Claim on their own claim), level
   with the aside's first card. When the column is too narrow for both,
   the actions wrap under the link and stay at the right. */
.hb-lead-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin-bottom: 14px;
}
.hb-lead-top .hub-back { margin-bottom: 0; }
.hb-claimbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px; margin-left: auto; min-width: 0;
}
.hb-claimbar .btn svg { width: 15px; height: 15px; }
.hb-claim-note { font-size: 0.84rem; color: var(--muted); }
/* Delete report: red, as the Feature Hub's Delete request. */
.hb-claimbar .btn-quiet.hb-act-danger { color: #ff8b97; }
.hb-claimbar .btn-quiet.hb-act-danger:hover { color: #ffb3ba; border-color: rgba(255, 92, 108, 0.45); }
/* On a phone the aside sits below the content, so the actions take
   their own line under the back link and start at the left, like the
   column under them. */
@media (max-width: 560px) {
  .hb-claimbar { flex-basis: 100%; justify-content: flex-start; margin-left: 0; }
}

/* ---------------- bug page: the title block ---------------- */

/* "This report is grouped with Bug #142": the way on sits at the end of
   the line, and drops under the text on a phone. */
.hb-grouped { flex-wrap: wrap; align-items: center; }
.hb-grouped p { flex: 1 1 260px; min-width: 0; }
.hb-grouped .btn { flex: none; }
/* A removed report, as the team and its website reporter read it. */
.hb-removed p { margin: 0; overflow-wrap: anywhere; }

.hb-bp-meta b { color: var(--ink-dim); font-weight: 600; }
/* "3 reports" is a 40 px target that keeps the line where it was: padding
   grows its hit area (only as far up as the row gap, so it never reaches
   the line above) and negative margin hands the room back. The row clips
   sideways only - that is for its separator dots - so nothing cuts the
   target off below. */
.hb-bp-meta { overflow: visible; overflow-x: clip; }
.hb-bp-meta a { font-weight: 600; padding: 6px 0 11px; margin: -6px 0 -11px; }
/* The line under the title while a fix is on its way or out. Its icon
   stays beside the first line when the text wraps on a phone; the link's
   own new-tab icon keeps hub.css's look. */
.hb-bp-fixed {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0;
  font-size: 0.9rem; color: var(--ink-dim);
}
.hb-bp-fixed > svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

/* ---------------- bug page: the report ---------------- */

.hb-report-h { margin: 0 0 16px; font-size: 1.25rem; }
.hb-fields { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.hb-field {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  padding: 4px 11px 4px 9px;
  background: #212124;
  border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: 0.78rem; line-height: 18px;
}
.hb-field-label {
  flex: none;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.hb-field-value { min-width: 0; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hb-block + .hb-block { margin-top: 26px; }
/* A website report the clean-up emptied. */
.hb-report-gone { margin: 0; font-size: 0.92rem; color: var(--muted); }
.hb-block-label {
  margin: 0 0 8px;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.hb-lead + .hb-block { margin-top: 26px; }

/* No text on file (Discord's message content is off, or the post was
   empty): the thread is the report. */
.hb-report-empty {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.hb-report-empty-icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #212124; border: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
.hb-report-empty-icon svg { width: 21px; height: 21px; }
.hb-report-empty-copy { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.hb-report-empty-copy b { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.hb-report-empty-copy span { font-size: 0.88rem; line-height: 1.55; color: var(--muted); }

/* Screenshots stay on Discord; this says how many and where. */
.hb-shots {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding: 13px 16px;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-size: 0.9rem; color: var(--ink-dim);
}
.hb-shots-icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.hb-shots-text { flex: 1 1 auto; min-width: 0; }
.hb-shots a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.hb-shots a svg { width: 13px; height: 13px; }

/* ---------------- bug page: the call to discuss it on Discord ---------------- */

/* The report closes with one plain row, not a card: the thread's Discord
   button (or the note that the report has no Discord link) and, while
   the invite is set, the muted way in for someone not in our Discord
   yet. The row wraps on a narrow column. */
.hb-discuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; }
.hb-discuss-note { margin: 0; font-size: 0.84rem; color: var(--muted); }
.hb-discuss-note a { font-weight: 600; }

/* ---------------- bug page: the aside ---------------- */

/* The Manage card, in the look of a request's (hub-features.css
   .hf-manage): a column of the team's parts - status, duplicates and
   severity - each after a hairline, labelled fields at the card's width,
   and actions as full-width rows. */
.hb-manage { display: grid; gap: 16px; }
.hb-manage .hub-card-title { margin-bottom: -2px; }
.hb-manage .hub-card-title:focus { outline: none; }
.hb-manage .hub-card-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.hb-manage .btn svg { width: 15px; height: 15px; }
.hb-manage-part { display: grid; gap: 12px; min-width: 0; }
.hb-manage-part + .hb-manage-part { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.hb-manage-hint { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.hb-manage-field { display: grid; gap: 8px; min-width: 0; }
.hb-manage-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.hb-manage-field .cselect { width: 100%; }
.hb-manage-wide { width: 100%; justify-content: flex-start; }
/* The card's main button, Save status, is centred like every other main
   button on the site (the request card's Edit request too); the quieter
   actions stay rows that start at the left (Unlink). */
.hb-manage .btn-dark.hb-manage-wide { justify-content: center; }
.hb-manage-row { display: flex; gap: 8px; min-width: 0; }
.hb-manage-row .input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 0.88rem; }
.hb-manage-row .btn { flex: none; }

/* The grouped report's card: where its votes are counted. */
.hb-vc-lead { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-dim); }
.hb-vc-big { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; }
.hb-vc-big b {
  font-family: var(--font-display); font-weight: 800; font-size: 2.4rem;
  line-height: 1.15; letter-spacing: -0.03em; color: var(--ink);
}
.hb-vc-big span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

/* The aside is narrow, so a related bug's title may take two lines
   (miniRow's wrap option) rather than being cut down to a few words
   beside its status. */
.hb-related { display: grid; margin: 0 -12px; }

.hb-aside-link { margin: 4px 0 0; padding: 0 4px; font-size: 0.86rem; color: var(--muted); }
.hb-aside-link a { font-weight: 600; }

/* ---------------- bug page: also reported as ---------------- */

.hb-own-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; font-size: 1.25rem; }
.hb-own-h span { font-family: var(--font-body); font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.hb-refs { display: grid; gap: 10px; }
.hb-ref {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color 0.18s ease;
}
.hb-ref:hover { border-color: var(--line); }
.hb-ref-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.hb-ref-title { font-weight: 600; font-size: 0.95rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.hb-ref-title:hover { color: #fff; }
.hb-ref-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hb-ref-title:focus-visible { outline: none; }
.hb-ref-title:focus-visible::after { box-shadow: 0 0 0 2px var(--accent); }
.hb-ref-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.hb-tag {
  display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 18px; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}

/* ---------------- bug page: loading ---------------- */

.hb-skel-stack { display: grid; gap: 16px; }

/* ---------------- report a bug ---------------- */

.hb-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 780px; margin: 0 auto; }
.hb-flow .form-card { max-width: none; }
.hb-step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 20px; }
.hb-step {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #212124; border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  color: var(--ink-dim);
}
/* The title wraps inside its own box next to the step number rather than
   dropping under it and leaving the number alone on a line. */
.hb-step-title { margin: 0; flex: 1 1 12rem; min-width: 0; font-size: 1.2rem; letter-spacing: -0.01em; }
.hb-big-search .input { padding: 15px 16px 15px 46px; font-size: 1rem; }
.hb-big-search svg { left: 16px; width: 18px; height: 18px; }
/* The example under the search box: the placeholder stays short enough
   for a phone, and the example is still there to read. */
.hb-query-hint { margin: 8px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.hb-step-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; min-width: 0; }
.hb-step-tools .seg { max-width: 100%; }
.hb-results { margin-top: 20px; }
.hb-results .hub-skel + .hub-skel { margin-top: 8px; }
.hb-results-hint { margin: 0; font-size: 0.9rem; color: var(--muted); }
.hb-results-foot {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0;
  font-size: 0.88rem; color: var(--ink-dim);
}
.hb-results-foot svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
/* "None of these?" under the matches: the way down to the form. */
.hb-results-foot + .hb-results-none { margin-top: 8px; }
.hb-results-none svg { transform: rotate(90deg); }
.hb-results-none .hub-linkbtn { font-weight: 600; }
.hb-no-match {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  font-size: 0.92rem; color: var(--ink-dim);
}
.hb-no-match svg { width: 17px; height: 17px; flex: none; color: var(--muted); transform: rotate(90deg); }
.hb-no-match > span { flex: 1 1 200px; min-width: 0; }
.hb-no-match .btn { flex: none; }
.hb-search-error {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 14px 16px;
  border: 1px dashed var(--line-soft); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.012);
  font-size: 0.9rem; color: var(--ink-dim);
}
.hb-search-error > svg { width: 17px; height: 17px; flex: none; color: var(--danger); }
.hb-search-error span { flex: 1 1 220px; min-width: 0; }

/* Step 2 is the request form's (hub-features.css), field for field; the
   steps to reproduce take less room than a description. */
.hb-steps { min-height: 130px; }

/* The preview gate and other whole-page states sit in the content area. */
.hb-state { max-width: 780px; margin: 0 auto; }

/* ---------------- responsive ---------------- */

@media (max-width: 720px) {
  .hb-ref { flex-wrap: wrap; gap: 10px 14px; }
  .hb-ref-main { flex-basis: 100%; }
  .hb-ref-end { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .hb-big-search .input { font-size: 16px; }
  /* Finger-sized claim and Manage actions, and a 16 px field so iOS does
     not zoom. */
  .hb-claimbar .btn-sm, .hb-manage .btn-sm { min-height: 40px; }
  .hb-manage-row .input { font-size: 16px; }
}

/* On a phone the report page's two game modes share the full width, as
   the homes' mode control does. */
@media (max-width: 480px) {
  .seg.hub-seg-sm.hb-mode { display: flex; width: 100%; }
  .seg.hub-seg-sm.hb-mode button { flex: 1 0 auto; justify-content: center; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .hb-ref { transition: none; }
}