/* ============================================================
   Feature Hub - its own pages

   The home (/features), a request (/features/<n>), the request form
   (/features/new) and the member's area (/features/me). Loaded after
   site.css and hub.css; everything the Bug Hub draws the same way - the
   home template, the detail template with its vote card and quick bar,
   rows, chips, the vote control, the budget readout, comments and the
   team's dialogs - lives in hub.css, so this file only holds what exists
   on the feature pages alone, built from the site's own tokens, never a
   new palette.

   Every class here starts with hf-. Site components appear only inside
   an hf- parent, never restyled globally. Every animation has its
   reduced-motion override at the end.
   ============================================================ */

/* ---------------- shared page bits ---------------- */

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

/* ---------------- the home ---------------- */

/* The end-of-list prompt: the site's help card, with a neutral icon
   square (the hero already holds the page's one accent button). */
.hf-cta {
  display: flex; align-items: center; gap: 18px;
  margin-top: 30px; padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.hf-cta-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);
}
.hf-cta-icon svg { width: 22px; height: 22px; }
.hf-cta-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hf-cta-copy b { font-size: 1.02rem; color: var(--ink); }
.hf-cta-copy span { font-size: 0.88rem; color: var(--muted); }
.hf-cta .btn { flex: none; }

#fhGate .hub-empty { margin-top: 4px; }

/* The quick filters - the team's (Staff, Valkyries and owners), a
   Contributor's My Claimed Features and every signed-in member's Followed
   Features and Unfollowed Features: the site's pill filters, first in
   the list's chips row. The wrapper takes that row of the grid, so the
   pills and the removable chips stack inside it and a hidden one leaves
   no gap; the pills keep the chips' 14 px. The groups share one line,
   wrapping as it fills, and the removable chips take a line of their own
   under them. */
.hf-chiprows { grid-area: chips; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 7px; }
.hf-chiprows > .hub-chiprow { flex: 1 1 100%; min-width: 0; }
.hf-team-chips, .hf-claim-chips, .hf-follow-chips { margin-top: 14px; }
.hf-team-chips button:focus-visible, .hf-claim-chips button:focus-visible,
.hf-follow-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------- request page: loading ---------------- */

.hf-skel-gallery { aspect-ratio: 16 / 9; margin-bottom: 24px; }
.hf-skel-line { height: 16px; border-radius: 999px; margin-bottom: 12px; }
.hf-skel-line.is-short { width: 55%; }
.hf-skel-composer { height: 118px; margin-bottom: 8px; }

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

/* The back link and, at the row's far end, a Contributor's claim actions
   (Claim Feature; 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. */
.hf-lead-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin-bottom: 14px;
}
.hf-lead-top .hub-back { margin-bottom: 0; }
.hf-claimbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px; margin-left: auto; min-width: 0;
}
.hf-claimbar .btn svg { width: 15px; height: 15px; }
.hf-claim-note { font-size: 0.84rem; color: var(--muted); }
/* 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) {
  .hf-claimbar { flex-basis: 100%; justify-content: flex-start; margin-left: 0; }
}

/* ---------------- request page: notices and the title block ---------------- */

.hf-fp-notices .notice { margin-bottom: 18px; }
.hf-fp-notices .notice:last-child { margin-bottom: 26px; }
/* A notice with its one action at the end of the line; the action drops
   under the text on a phone. */
.hf-notice-row { align-items: center; flex-wrap: wrap; }
.hf-notice-row p { flex: 1 1 240px; min-width: 0; }
.hf-notice-row .btn { flex: none; }
.hf-notice-row .btn svg { width: 16px; height: 16px; }

/* An owner's review of a claim request (the claim review, 2026-11-01): the
   accent notice above the title, where the owner lands from the Discord
   ping - who asked, inline in its sentence, then Decline and Approve Claim
   at the end of the line. */
.hf-review-slot:empty { display: none; }
.hf-review { margin-bottom: 26px; }
.hf-review p { line-height: 1.7; }
.hf-review .hub-person { vertical-align: middle; margin-top: -2px; }
.hf-review-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: none; }
.hf-review .btn-quiet.hf-act-danger { color: #ff8b97; }
.hf-review .btn-quiet.hf-act-danger:hover { color: #ffb3ba; border-color: rgba(255, 92, 108, 0.45); }

.hf-fp-edited {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted);
  text-decoration: underline dotted; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.hf-fp-edited:hover { color: var(--ink-dim); }
.hf-fp-edited:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* The line under the title once an implementation is submitted or live,
   with the link to its pull request (the bug page's .hb-bp-fixed): its
   icon stays beside the first line when the text wraps, and the link's
   own new-tab icon keeps hub.css's look. */
.hf-fp-statusline {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0;
  font-size: 0.9rem; color: var(--ink-dim);
}
.hf-fp-statusline > svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }
/* Already in EUI: where EllesmereUI does it, as the step that closed the
   request says, in a soft accent box - it is the answer the requester and
   everyone after them came for - the place itself the brightest. */
.hf-fp-statusline.is-where {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-accent); background: var(--accent-soft);
}
.hf-fp-statusline.is-where b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.hf-h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }

/* ---------------- request page: the content ---------------- */

.hf-gallery { margin-bottom: 26px; }
.hf-gallery .detail-cover { display: block; width: 100%; margin: 0; padding: 0; cursor: zoom-in; }
.hf-gallery .detail-cover img { display: block; }
.hf-gallery .detail-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-gallery .detail-thumbs { margin: 12px 0 0; }
.hf-gallery .detail-thumbs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-fp-desc { font-size: 1rem; }

.hf-merged {
  margin-top: 30px;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.hf-merged summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 16px;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink-dim);
  border-radius: var(--radius);
}
.hf-merged summary::-webkit-details-marker { display: none; }
.hf-merged summary span { flex: 1; min-width: 0; }
.hf-merged summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.hf-merged summary:hover { color: var(--ink); }
.hf-merged summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-merged-chev { transition: transform 0.2s ease; }
.hf-merged[open] .hf-merged-chev { transform: rotate(90deg); }
.hf-merged-list { padding: 0 16px 4px; }
.hf-merged-item { display: grid; gap: 9px; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.hf-merged-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.hf-merged-head b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.hf-merged .hub-md { font-size: 0.92rem; }
.hf-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.hf-more { justify-self: start; }
.hf-merged-shots { margin-top: 0; }

/* The developer's questions: the accent rule marks the developer's own
   voice, like the Developer badge does everywhere else. */
.hf-clars { margin-top: 40px; }
.hf-clars > .hf-h2 { margin-bottom: 16px; }
.hf-clar-list { display: grid; gap: 14px; }
.hf-clar {
  position: relative;
  padding: 16px 18px 16px 21px;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.hf-clar::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 3px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent);
}
.hf-clar-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.hf-clar-time { font-size: 0.78rem; color: var(--muted); }
.hf-clar .hub-replies { margin-top: 10px; }
.hf-clar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hf-clar-actions .btn svg { width: 15px; height: 15px; }
.hf-clar-actions .hub-more { margin-left: auto; }

/* ---------------- request page: the aside ---------------- */

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

.hf-manage { display: grid; gap: 16px; }
.hf-manage .hub-card-title { margin-bottom: -2px; }
.hf-manage .btn svg { width: 15px; height: 15px; }
.hf-manage-edit, .hf-manage-delete, .hf-manage-exists { width: 100%; }
.hf-manage-hint { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.hf-manage-field { display: grid; gap: 8px; min-width: 0; }
.hf-manage-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
/* min-width: 0 lets a long module name end in an ellipsis inside the card
   instead of widening the field past it. */
.hf-manage-field .cselect { width: 100%; min-width: 0; }
.hf-manage-acts { display: grid; gap: 6px; }
.hf-manage-acts .btn, .hf-ask { width: 100%; justify-content: flex-start; }
.hf-manage .btn-quiet.hf-act-danger { color: #ff8b97; }
.hf-manage .btn-quiet.hf-act-danger:hover { color: #ffb3ba; border-color: rgba(255, 92, 108, 0.45); }
.hf-devnote, .hf-assignee { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.hf-devnote-input { width: 100%; min-height: 104px; max-height: 320px; resize: vertical; font-size: 0.9rem; }
.hf-devnote-foot { display: flex; align-items: center; gap: 12px; }
.hf-devnote-foot .hub-counter { margin: 0 auto 0 0; }
.hf-devnote .btn.is-saved { color: var(--accent); }
.hf-devnote .hub-inline-error { margin-top: 0; }
.hf-devnote-text { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.hf-devnote-text.is-empty { color: var(--muted); font-style: italic; }
/* The person on their own line, the owner's two buttons side by side
   under it. */
.hf-assignee-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 8px; }
.hf-assignee-who { flex: 1 1 100%; min-width: 0; display: inline-flex; }
.hf-assignee-none { flex: 1 1 100%; font-size: 0.88rem; color: var(--muted); }
/* Under Claimed by, the claim review's line: a claim request waiting for
   the owners, or a claim taken without their review (in the warning
   amber, so the team spots it). */
.hf-claim-line { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.hf-claim-line svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.hf-claim-line.is-unreviewed { color: var(--warn); }

.hf-report-link { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0 6px; }
.hf-report-link svg { width: 13px; height: 13px; }

/* ---------------- request page: the discussion ---------------- */

.hf-disc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; }
.hf-disc-head .hub-total { font-size: 0.86rem; }
.hf-disc-sort { margin-left: auto; }
.hf-disc-gate .notice { margin-bottom: 14px; }
.hf-disc-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.86rem; color: var(--muted); }
.hf-disc-note svg { width: 14px; height: 14px; flex: none; }
.hf-disc-empty { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.hf-thread { margin-top: 10px; }
.hf-thread .hub-comment { scroll-margin-top: calc(var(--nav-h) + 16px); }
.hf-thread > .hub-skel + .hub-skel { margin-top: 10px; }
.hf-disc-more { margin-top: 22px; }

/* The composer: the preset page's comment form, plus a counter and
   screenshots. The counter and the buttons keep to the right edge, on
   one line or, on a phone, on two. */
.hf-composer { display: flex; gap: 14px; }
.hf-composer > .hub-avatar { width: 40px; height: 40px; margin-top: 2px; }
.hf-composer-main { flex: 1; min-width: 0; }
.hf-composer-input { display: block; width: 100%; min-height: 84px; max-height: 420px; resize: vertical; }
.hf-composer.is-inline { margin: 14px 0 4px; }
.hf-composer.is-inline .hf-composer-input { min-height: 64px; }
.hf-composer-error { margin: 8px 0 0; }
.hf-composer-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.hf-composer-foot .hub-counter { margin-left: auto; }
.hf-composer-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hf-composer-buttons .btn svg { width: 15px; height: 15px; }
.hf-composer-tiles .hf-shots { margin-top: 10px; }

/* ---------------- the request form ---------------- */

.hf-flow { max-width: 780px; margin: 0 auto; }
.hf-flow > .form-card { margin: 0 auto; }

.hf-form-skel { display: grid; gap: 12px; }
.hf-skel-label { width: 120px; height: 14px; border-radius: 999px; margin-top: 10px; }
.hf-skel-label:first-child { margin-top: 0; }
.hf-skel-input { height: 46px; border-radius: var(--radius-sm); }
.hf-skel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hf-skel-cards .hub-skel { height: 104px; }
.hf-skel-area { height: 220px; border-radius: var(--radius-sm); }

/* The whole-page states of the form and the member area: the site's
   sign-in card, with the hub's neutral ring (.hub-empty-ring) in place
   of the logo. */
.hf-gate { text-align: center; padding: 46px 34px; }
.hf-gate h2 { margin: 0 0 8px; font-size: 1.35rem; }
.hf-gate p { margin: 0 auto; max-width: 440px; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.hf-gate-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hf-gate-actions .btn svg { width: 18px; height: 18px; }

#fsNotices .notice { margin-bottom: 22px; }

/* The site's form label, for the fields that are a group of buttons
   rather than one input (a <label> would point at nothing). */
.form-row .hf-label { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; }
.form-row .hf-hint { margin: 6px 0 0; color: var(--muted); }
.hf-field-foot { display: flex; align-items: flex-start; gap: 12px; margin-top: 6px; }
.hf-field-foot .hf-hint { flex: 1; margin: 0; }
.hf-field-foot .hub-counter { padding-top: 1px; }
.hf-field-error { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.45; color: #e5484d; }
.hf-optional { font-weight: 400; color: var(--muted); }

/* "Get pinged on Discord?" (Discord pings): new requests only, while the
   member's pings are off. The bell's row at the form's size; on, the icon
   and the edge take the accent. */
.hf-ping {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color 0.25s ease;
}
.hf-ping:has(input:checked) { border-color: var(--line-accent); }
.hf-ping-ic {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #232326; border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.hf-ping-ic svg { width: 18px; height: 18px; }
.hf-ping:has(input:checked) .hf-ping-ic { background: var(--accent-soft); border-color: var(--line-accent); color: var(--accent); }
.hf-ping-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hf-ping-t { font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hf-ping-s { font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.hf-ping-s a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
.hf-ping-s a:hover { color: var(--ink); }
.hf-ping-s a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hf-ping, .hf-ping-ic, .hf-ping-s a { transition: none; }
}

/* "Already requested?" right under the title, before anything else is
   asked for: voting for a match is the better outcome. */
.hf-similar {
  margin: -6px 0 26px; padding: 16px 16px 14px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  animation: hub-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hf-similar-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.hf-similar-title { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.hf-similar-foot { margin: 12px 0 0; font-size: 0.84rem; color: var(--muted); }

/* Game mode: two option cards, Retail and Forever; the chosen one wears
   the site's neutral selected outline and a check. */
.hf-mode-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hf-mode-pick {
  position: relative;
  display: grid; justify-items: start; align-content: start; gap: 8px;
  min-height: 112px; padding: 16px 44px 15px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font: inherit; text-align: left; color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.hf-mode-pick:hover { border-color: var(--line-strong); }
.hf-mode-pick.on { background: rgba(255, 255, 255, 0.06); border-color: #fff; }
.hf-mode-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-mode-pick.is-locked { opacity: 0.45; cursor: not-allowed; }
.hf-mode-pick.is-locked:hover { border-color: var(--line-soft); }
.hf-mode-title { font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.hf-mode-text { font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.hf-mode-check {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.hf-mode-check svg { width: 13px; height: 13px; }
.hf-mode-pick.on .hf-mode-check { background: #fff; border-color: #fff; color: #111; }
.hf-mode-picks.is-invalid .hf-mode-pick:not(.on) { border-color: rgba(229, 72, 77, 0.55); }

.hf-modules button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-modules .tp-row.is-invalid button { border-color: rgba(229, 72, 77, 0.55); }

.hf-desc-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.form-row .hf-desc-head .frm-label { margin-bottom: 0; }
.hf-desc { display: block; min-height: 220px; max-height: 520px; resize: vertical; line-height: 1.6; }
.hf-desc-preview {
  min-height: 220px; max-height: 520px; overflow: auto;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}

.hf-format-help { margin-top: 12px; font-size: 0.86rem; color: var(--muted); }
.hf-format-help summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px;
  list-style: none; cursor: pointer;
  font-weight: 600; color: var(--ink-dim);
  border-radius: 6px;
}
.hf-format-help summary::-webkit-details-marker { display: none; }
.hf-format-help summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.hf-format-help[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.hf-format-help summary:hover { color: var(--ink); }
.hf-format-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-format-help ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 1.2em; line-height: 1.6; }
.hf-format-help li::marker { color: var(--muted-2); }
.hf-format-help p { margin: 8px 0 0; }
.hf-format-help code {
  font-family: var(--font-mono); font-size: 0.85em;
  padding: 1px 6px;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 6px;
  color: var(--ink-dim);
}

#fsModRow .check { margin-top: 14px; }
.hf-form-note { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--muted); }
.hf-form-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hf-form-status { flex: 1 1 200px; font-size: 0.85rem; color: var(--muted); }
/* Not ready yet: dimmed but still pressable, so a press can say what is
   missing instead of doing nothing. */
.hf-form-foot .btn[aria-disabled="true"] { opacity: 0.55; box-shadow: none; }
.hf-form-foot .btn[aria-disabled="true"]:hover { transform: none; }
.hf-form-alt { margin: 14px 0 0; text-align: right; font-size: 0.86rem; color: var(--muted); }
.hf-form-alt a { font-weight: 600; }

/* The preview: the request page's title block and content, small. */
.hf-preview-label {
  margin: 0 0 16px;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.hf-preview-title {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.hf-preview-by { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 0.9rem; color: var(--muted); }
.hf-preview-gallery { margin-bottom: 22px; }
.hf-preview-gallery .detail-cover { cursor: default; }
.hf-preview-gallery .detail-cover img { max-height: 420px; }
.hf-preview-note { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 0.86rem; color: var(--muted); }
.hf-preview .hub-inline-error { margin-top: 18px; }
.hf-preview-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------------- the member's area ---------------- */

/* The site's stat tiles: four across, two by two on tablets, one column
   on phones. Number and label sit side by side, as on every other stat
   tile of the site, with a line under them that holds the feature
   budget's pips - kept, empty, in the three count tiles, so all four
   numbers line up. */
.hf-me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.hf-me-stats > .hub-skel { height: 84px; }
.hf-me-tile-main { display: grid; gap: 9px; min-width: 0; }
.hf-me-tile-line { display: flex; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.hf-me-tile .st-label { margin: 0 0 0 6px; color: var(--muted); }
.hf-me-pips { display: flex; height: 4px; }

.hf-me-tabs-wrap { margin-bottom: 26px; }

.hf-me-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 18px; }
.hf-me-head .hub-total { font-size: 0.86rem; }
.hf-me-head-act { margin-left: auto; }
.hf-me-head-act svg { width: 15px; height: 15px; }
.hf-me-intro { margin: -6px 0 18px; font-size: 0.88rem; color: var(--muted); }
.hf-me-skel { display: grid; gap: 12px; }
.hf-me-more { margin-top: 24px; }
.hf-me-list { display: grid; gap: 12px; min-width: 0; }

.hf-me-sec + .hf-me-sec { margin-top: 40px; }
.hf-me-sec > .hf-h2 { margin-bottom: 14px; }
.hf-me-meter { margin-bottom: 12px; }
.hf-me-mini { display: grid; margin: 0 -12px; }
.hf-me-none { margin: 0; padding: 6px 12px 8px; font-size: 0.9rem; color: var(--muted); }
.hf-me-mini .hub-mini-act:disabled { opacity: 0.45; cursor: default; }
.hf-unused {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 12px; padding: 12px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.hf-unused-ic {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: #212124; border: 1px solid var(--line-soft);
  color: var(--muted);
}
.hf-unused-ic svg { width: 17px; height: 17px; }
.hf-unused-text { flex: 1 1 auto; font-size: 0.92rem; font-weight: 600; color: var(--ink-dim); }
.hf-unused-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 0.88rem; font-weight: 600; }
.hf-unused-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.hf-unused-link:hover svg { transform: translateX(3px); }

.hf-me-earlier { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.hf-me-earlier summary {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink-dim);
  border-radius: 6px;
}
.hf-me-earlier summary::-webkit-details-marker { display: none; }
.hf-me-earlier summary svg { width: 15px; height: 15px; color: var(--muted); }
.hf-me-earlier summary:hover { color: var(--ink); }
.hf-me-earlier summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-me-earlier[open] .hf-merged-chev { transform: rotate(90deg); }
.hf-me-weeks { display: grid; gap: 22px; margin-top: 12px; }
.hf-me-week-title {
  margin: 0 0 4px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

.hf-me-comments { display: grid; gap: 12px; }
.hf-me-comment {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.hf-me-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.hf-me-comment-title {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere;
}
.hf-me-comment-title:hover { color: #fff; }
.hf-me-comment-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--muted); }
.hf-me-comment .hub-md { font-size: 0.93rem; }
.hf-me-comment .hub-md.is-muted { color: var(--muted); }
.hf-me-comment .hub-comment-gone { margin: 0; }
.hf-me-removed { margin: 0 0 6px; font-size: 0.84rem; color: #ff8b97; }
.hf-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Notifications: the bell's rows, larger. */
.hf-notes { display: grid; gap: 8px; }
.hf-note {
  display: flex; align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color 0.18s ease;
}
.hf-note:hover { border-color: var(--line); }
.hf-note-main {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 8px 14px 16px;
  color: inherit;
  border-radius: var(--radius) 0 0 var(--radius);
}
a.hf-note-main:hover .hf-note-title { color: #fff; }
.hf-note-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hf-note-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #212124; border: 1px solid var(--line-soft);
  color: var(--ink-dim);
}
.hf-note-ic svg { width: 17px; height: 17px; }
/* The team's notice (the writer has a badge), as in the bell. */
.hf-note.is-team .hf-note-ic {
  background: var(--accent-soft); border-color: var(--line-accent);
  color: var(--accent);
}
.hf-note-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hf-note-title { font-size: 0.95rem; font-weight: 600; color: var(--ink-dim); overflow-wrap: anywhere; }
.hf-note-body {
  font-size: 0.88rem; line-height: 1.5; color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The meta line: the writer of a reply or question (avatar, name, badge),
   then the time - one line, the name giving way first. */
.hf-note-meta { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 2px; }
.hf-note-by { display: flex; min-width: 0; }
.hf-note-by .hub-person { gap: 6px; font-size: 0.78rem; }
.hf-note-by .hub-badge { flex: none; }
.hf-note-time { flex: none; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.hf-note-dot { width: 8px; height: 8px; flex: none; margin-top: 7px; border-radius: 50%; }
.hf-note.is-unread .hf-note-dot { background: var(--accent); }
.hf-note.is-unread .hf-note-title { color: var(--ink); }
.hf-note-x {
  width: 40px; height: 40px; flex: none; align-self: center; margin-right: 8px;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.hf-note-x svg { width: 16px; height: 16px; }
.hf-note-x:hover { color: var(--ink); background: #212124; border-color: var(--line-soft); }
.hf-note-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------- screenshots ----------------
   HubImages.picker: the site's drop zone and preview tiles, plus the
   states a tile goes through (compressing and uploading, failed, the
   cover). The site's rule for a tile's button is reset first: these
   tiles carry more than one. */

.hf-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-drop.is-full { opacity: 0.5; cursor: default; }
.hf-drop.is-full:hover { border-color: var(--line-soft); background: none; }
.hf-tiles { margin-top: 14px; }
.hf-shots.is-compact .hf-tiles { margin-top: 10px; }
.hf-tile { width: 150px; background: var(--bg-2); }
.hf-shots.is-compact .hf-tile { width: 112px; }
.hf-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-tile button {
  position: static; inset: auto; width: auto; height: auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); line-height: 1.2;
}
.hf-tile .hf-tile-x {
  position: absolute; top: 5px; right: 5px;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(17, 17, 17, 0.85); border: 1px solid var(--line-soft);
  color: var(--ink-dim); cursor: pointer;
}
.hf-tile .hf-tile-x::after { content: ""; position: absolute; inset: -6px; }
.hf-tile .hf-tile-x svg { width: 14px; height: 14px; }
.hf-tile .hf-tile-x:hover { color: var(--danger); border-color: var(--line); }
.hf-tile .hf-tile-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hf-tile-cover, .hf-tile .hf-tile-make {
  position: absolute; left: 6px; bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.85); border: 1px solid var(--line-strong);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.hf-tile .hf-tile-make { color: var(--ink-dim); border-color: var(--line); cursor: pointer; }
.hf-tile .hf-tile-make:hover { color: #fff; border-color: var(--line-strong); }
.hf-tile .hf-tile-make:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hf-tile.is-busy img { opacity: 0.45; }
.hf-tile-busy {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  color: var(--ink-dim);
}
.hf-tile-busy .hub-spin { display: block; width: 18px; height: 18px; }
.hf-tile.is-error { border-color: rgba(255, 92, 108, 0.45); }
.hf-tile-err {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: center; justify-items: center; gap: 6px;
  padding: 8px;
  background: rgba(30, 18, 20, 0.92);
  text-align: center;
}
.hf-tile-err-text { font-size: 0.72rem; line-height: 1.35; color: #ffb3ba; }
.hf-tile-err-acts { display: flex; gap: 6px; }
.hf-tile .hf-tile-btn {
  min-height: 26px; padding: 3px 9px;
  border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 600; color: var(--ink-dim);
  cursor: pointer;
}
.hf-tile .hf-tile-btn:hover { color: #fff; border-color: var(--line-strong); }
.hf-tile .hf-tile-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Small tiles - the composer's, and the form's two to a row on a phone
   (below) - tighten a failed tile so Retry and Remove both fit in it. */
.hf-shots.is-compact .hf-tile-err { padding: 6px 4px; gap: 5px; }
.hf-shots.is-compact .hf-tile-err-acts { gap: 4px; }
.hf-shots.is-compact .hf-tile .hf-tile-btn { padding: 3px 4px; }
/* Why storage turned a screenshot down: one line for the whole field,
   under the tiles (the site's field-error look), gone with the tile. */
.hf-shots .hf-shots-note { margin: 10px 0 0; }
.hf-shots .hf-shots-note[hidden] { display: none; }

/* ---------------- the request page's own dialogs ----------------
   (The team's shared dialogs and their parts are hub.css's .hub-dlg-*.) */

/* Report reasons and merge targets: chosen rows wear the site's neutral
   selected look - white outline and dot - like the form's mode cards;
   the accent stays with the dialog's own primary button. */
.hf-choices { display: grid; gap: 4px; }
.hf-choice {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel);
  font-size: 0.92rem; color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hf-choice:hover { border-color: var(--line); }
.hf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hf-choice-dot {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--panel-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hf-choice:has(input:checked) { border-color: #fff; background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.hf-choice input:checked + .hf-choice-dot { border-color: #fff; box-shadow: inset 0 0 0 4px var(--panel-2), inset 0 0 0 9px #fff; }
.hf-choice input:focus-visible + .hf-choice-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-choices-error { margin: -8px 0 0; }
/* Dialogs live outside the page's <main>, so their hidden parts are
   hidden here. */
.hf-choices-error[hidden] { display: none; }

.hf-merge .search-wrap { min-width: 0; }
.hf-merge-results { display: grid; gap: 4px; }
.hf-merge-results > .hub-skel + .hub-skel { margin-top: 4px; }
.hf-merge-hint { margin: 6px 2px; font-size: 0.88rem; color: var(--muted); }
.hf-merge-opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hf-merge-opt:hover { border-color: var(--line); }
.hf-merge-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hf-merge-opt:has(input:checked) { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.hf-merge-opt input:checked + .hf-choice-dot { border-color: #fff; box-shadow: inset 0 0 0 4px var(--panel-2), inset 0 0 0 9px #fff; }
.hf-merge-opt input:focus-visible + .hf-choice-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.hf-merge-opt-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.hf-merge-opt-title { font-size: 0.92rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.hf-merge-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-merge-opt-votes { flex: none; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.hf-merge-sum {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-dim);
}
.hf-merge-sum svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--muted); }
/* Merging requests into this one: the same rows, ticked with the site's
   checkbox (.check-box) instead of the radio dot, and the ticked ones
   listed first under a small label. A request the viewer may not merge
   away stays in the list, its box unavailable, the reason under its
   title. */
.hf-merge-picked { display: grid; gap: 4px; }
.hf-merge-picked[hidden] { display: none; }
.hf-merge-label {
  margin: 0 2px 4px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.hf-merge-opt input:checked + .check-box { background: #16302a; border-color: var(--accent); color: var(--accent); }
.hf-merge-opt input:focus-visible + .check-box { box-shadow: 0 0 0 3px rgba(12, 210, 157, 0.22); }
.hf-merge-opt.is-disabled { cursor: not-allowed; }
.hf-merge-opt.is-disabled:hover { border-color: var(--line-soft); }
.hf-merge-opt.is-disabled .check-box { opacity: 0.35; }
.hf-merge-opt.is-disabled .hf-merge-opt-title { color: var(--ink-dim); }
.hf-merge-why { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.hf-merge-why svg { width: 13px; height: 13px; flex: none; }
/* The cross-mode question (HubUI.mergeCrossBox) is a neutral notice,
   which paints every icon inside it at 19 px in its muted colour: the
   box's tick keeps its own size and shows only when ticked, and the
   select's chevron keeps its size. */
.hf-merge-cross .check-box svg { width: 12px; height: 12px; margin: 0; color: inherit; }
.hf-merge-cross .cs-chev { width: 11px; height: 11px; margin: 0; }

/* A request's revisions (the cards are hub.css's .hub-rev). */
.hf-rev-title { margin: 12px 0 8px; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.hf-rev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hf-rev-chips:empty { display: none; }
.hf-rev-stub, .hf-rev-hidden {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: 0.86rem; font-style: italic; color: var(--muted);
}
.hf-rev-stub svg { width: 15px; height: 15px; flex: none; }
.hf-rev-hidden { font-style: normal; color: #ff8b97; }
.hf-rev-reason { margin: 10px 0 0; font-size: 0.84rem; color: var(--ink-dim); }
.hf-rev-act { margin-top: 12px; }

/* ---------------- phones ---------------- */

@media (max-width: 1039px) {
  .hf-me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  /* Thumbnails scroll sideways instead of stacking under the cover. */
  .hf-gallery .detail-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-left: -2px; margin-right: -2px; }
  .hf-gallery .detail-thumbs::-webkit-scrollbar { display: none; }
  .hf-gallery .detail-thumbs button { flex: none; }
}

@media (max-width: 720px) {
  .hf-cta { flex-wrap: wrap; }
  .hf-cta-copy { flex: 1 1 calc(100% - 64px); }
  .hf-cta .btn { width: 100%; justify-content: center; }
  /* The request form: the mode cards stack, the buttons go full width. */
  .hf-mode-picks, .hf-skel-cards { grid-template-columns: minmax(0, 1fr); }
  .hf-mode-pick { min-height: 0; }
  .hf-form-foot .btn, .hf-preview-actions .btn { width: 100%; }
  .hf-form-status { flex-basis: 100%; }
  .hf-form-alt { text-align: left; }
  .hf-gate { padding: 34px 22px; }
}

@media (max-width: 760px) {
  .hf-team-chips button, .hf-claim-chips button, .hf-follow-chips button { min-height: 40px; }
  /* Finger-sized claim actions. */
  .hf-claimbar .btn-sm { min-height: 40px; }
  .hf-fp-edited { min-height: 40px; }
  .hf-manage .btn-sm, .hf-clar-actions .btn-sm,
  .hf-composer-buttons .btn-sm, .hf-notice-row .btn, .hf-rev-act { min-height: 40px; }
  .hf-composer-input { font-size: 16px; }
  .hf-merged summary { padding: 12px 14px; }
  /* 16 px inputs keep iOS from zooming into the form. */
  .hf-flow .input, .hf-flow textarea.input { font-size: 16px; }
  .hf-modules button { min-height: 40px; }
  .hf-format-help summary { min-height: 40px; }
  .hf-tile .hf-tile-btn { min-height: 32px; }
}

@media (max-width: 560px) {
  /* A request row's status chip sits a little tighter, so the longest
     one ("Implemented (Pending Approval)") reads whole on a common
     phone; narrower still it ends in an ellipsis inside its outline. */
  .hub-row:not(.is-bug) .hub-chips > .hub-status { letter-spacing: 0.02em; padding: 3px 8px; }
  /* A notice's action wraps under its text: it lines up with the text,
     not with the icon. The review's two buttons go as one row. */
  .hf-notice-row .btn { margin-left: 32px; }
  .hf-review-acts { margin-left: 32px; }
  .hf-review-acts .btn { margin-left: 0; }
  .hf-me-head-act { margin-left: 0; }
  .hf-unused-link { margin-left: 50px; }
  /* A vote row's chip and "Remove vote" move under the title, so a long
     status ("Fixed (Pending Approval)") never squeezes it away. */
  .hf-me-mini .hub-mini { flex-wrap: wrap; row-gap: 2px; }
  .hf-me-mini .hub-mini-title { flex: 1 1 calc(100% - 48px); }
  .hf-me-mini .hub-mini-chip { margin-left: 48px; }
  .hf-me-mini .hub-mini-act { margin-left: auto; }
  .hf-note-main { gap: 12px; padding-left: 14px; }
  .hf-note-ic { width: 34px; height: 34px; }
  /* Two screenshot tiles to a row on a phone, as small as the composer's
     on the narrowest screens: a failed one tightens up the same way. */
  .hf-shots:not(.is-compact) .hf-tile { width: calc(50% - 6px); }
  .hf-shots .hf-tile-err { padding: 6px 4px; gap: 5px; }
  .hf-shots .hf-tile-err-acts { gap: 4px; }
  .hf-shots .hf-tile .hf-tile-btn { padding: 3px 4px; }
}

@media (max-width: 480px) {
  .hf-me-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .hf-fp-edited, .hf-choice, .hf-choice-dot, .hf-merge-opt,
  .hf-mode-pick, .hf-mode-check, .hf-merged-chev, .hf-format-help summary::after,
  .hf-unused-link svg, .hf-note, .hf-note-x { transition: none; }
  .hf-unused-link:hover svg { transform: none; }
  .hf-similar { animation: none; }
  .hf-tile-busy { animation: none; background: none; }
}