/* ============================================================================
   build.css — Build editor + build card styles.

   MHUR Tuning Optimizer — fan-made tool for My Hero Ultra Rumble.
   Author: RDH
   ============================================================================ */

.build-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.build-costume-panel {
  text-align: center;
}
.build-hint {
  color: var(--text-dim);
  font-size: 12.5px;
  margin: -6px 0 16px;
}
.build-slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.build-slot-grid .slot-col {
  min-width: 0;
}
@media (max-width: 700px) {
  .build-slot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.build-slot-item {
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.build-slot-select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 12.5px;
  margin-top: 4px;
}
.build-face-select {
  margin-top: 4px;
}
.build-face-select .face-select-btn {
  font-size: 12.5px;
  padding: 7px 8px;
}
/* Split slot trigger: main button (left, grows) opens with search/keyboard;
   the ☰ button (right) opens the list to browse without the keyboard. The ☰ is
   hidden on desktop (no keyboard problem there) and shown via mobile.css. */
/* The slot trigger is ONE rectangle. The ☰ is the RIGHT END of that same
   rectangle, marked off by a hairline divider - not a detached square button
   floating beside it. The wrapper owns the border/radius; the two buttons inside
   are borderless and transparent so they read as a single control. (RDH) */
.build-face-select .fs-trigger {
  display: flex;
  align-items: stretch;
  background: var(--panel-2);
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
.build-face-select .fs-trigger .face-select-btn {
  flex: 1;
  min-width: 0;
  width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
}
/* .fs-trigger / .fs-menu-btn base styles MOVED to style.css (2026-07-21).
   They used to live here, but index.html loads ONLY style.css + mobile.css -
   never build.css - so when the optimizer's special-tuning selects gained the
   same hamburger, the `display: none` desktop default came with no stylesheet
   and the button appeared, unstyled, on desktop. Anything shared by more than
   the build page belongs in style.css. */

.build-save-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.publish-btn {
  background: var(--panel-2);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.publish-btn:hover {
  background: var(--gold-dim);
}
.build-save-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-dim);
}
.build-save-status a {
  color: var(--hero);
}

.builds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
  min-width: 0;
}
.build-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.build-card:hover {
  border-color: var(--hero);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--hero-dim);
}

/* ---- Stat-forward card (redesigned 2026-07-17) ---------------------------
   Head = portrait + title/meta + a corner badge (upvote / published). Body =
   labeled Special Tunings + Tuning Buffs rows (chips), then a footer with tags
   and the action buttons. Replaced the old image-banner layout. */
.bc-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.bc-portrait {
  width: 46px;
  height: 58px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sunken);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bc-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.25s ease;
}
/* No hover scale on the portrait: a fractional transform forces the browser to
   resample the bitmap, which visibly softens an already-downscaled image. The
   card itself still lifts on hover. */
.bc-portrait img { image-rendering: auto; }
.bc-head-text { flex: 1; min-width: 0; }
.bc-stars { color: var(--gold); font-weight: 800; }

.bc-upvote-badge {
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.1s;
}
.bc-upvote-badge:hover { color: var(--gold); border-color: var(--gold); }
.bc-upvote-badge:active { transform: scale(0.92); }
.bc-upvote-badge.has-votes { color: var(--gold); }
.bc-upvote-badge.active {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-dim);
}
.bc-upvote-num { font-variant-numeric: tabular-nums; }
.bc-author-link { color: var(--hero); cursor: pointer; }
.bc-author-link:hover { text-decoration: underline; }
.bc-published-badge {
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--panel);
  color: var(--hero);
  border: 1px solid var(--hero-dim);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 20px;
}

/* Info body */
.build-card .bc-info {
  flex: 1;
  min-width: 0;
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.build-card .bc-name {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-card .bc-meta {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.build-card .bc-submeta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  /* One line always: on desktop grids the "by <author>" fragment wrapped to
     its own indented line (2026-07-20 screenshot). Ellipsize instead. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Stat block: labeled rows of chips */
.bc-statblock { display: flex; flex-direction: column; gap: 9px; }
.bc-empty { font-size: 12px; color: var(--text-dim); font-style: italic; }
.bc-row { display: flex; flex-direction: column; gap: 5px; }
.bc-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-special-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  color: var(--gold);
}
/* Special-tuning chips colored by role (community cards opt in via
   colorSpecials). WORDS ONLY - the box stays neutral (2026-07-19 decision):
   the Tuning Buffs row directly below is already a wall of coloured outlines,
   so giving specials a coloured border too made the two rows compete. Text
   carries the type; the chip itself recedes. Fixer keeps its dedicated purple.
   Falls back to the gold base when no spc- class is applied (My Builds). */
.bc-special-chip.spc-FIXER,
.bc-special-chip.spc-ASSAULT,
.bc-special-chip.spc-RAPID,
.bc-special-chip.spc-TECHNICAL,
.bc-special-chip.spc-SUPPORT,
.bc-special-chip.spc-STRIKE {
  background: var(--panel-2);
  border-color: var(--border);
}
.bc-special-chip.spc-FIXER     { color: var(--fixer); }
.bc-special-chip.spc-ASSAULT   { color: var(--cat-real-assault); }
.bc-special-chip.spc-RAPID     { color: var(--cat-real-rapid); }
.bc-special-chip.spc-TECHNICAL { color: var(--cat-real-technical); }
.bc-special-chip.spc-SUPPORT   { color: var(--cat-real-support); }
.bc-special-chip.spc-STRIKE    { color: var(--cat-real-strike); }

/* Author-written build description, above the Special Tunings row. Collapsed
   behind a "Build Desc." disclosure (2026-07-19) - the old 3-line clamp is
   gone because the toggle now does that job, and opening reveals the full
   text rather than a truncated version. */
.bc-desc-wrap {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.bc-desc-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  -webkit-tap-highlight-color: transparent;
  /* Both lines are needed to drop the native triangle: list-style covers
     Firefox and modern Chrome, the pseudo-element covers older WebKit/iOS. */
  list-style: none;
}
.bc-desc-toggle::-webkit-details-marker { display: none; }
.bc-desc-toggle:hover { color: var(--text-dim); }
/* Custom caret, rotated when open. */
.bc-desc-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}
.bc-desc-wrap[open] .bc-desc-toggle::after { transform: rotate(180deg); }
.bc-desc {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bc-buff-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.bc-buff-chip b { font-weight: 800; opacity: 0.85; }
.bc-buff-more { color: var(--text-dim); }
/* Category tinting — mirrors the cat-real-* palette used elsewhere */
.bc-buff-chip.cat-assault   { border-color: var(--assault);   color: var(--assault); }
.bc-buff-chip.cat-rapid     { border-color: var(--rapid);     color: var(--rapid); }
.bc-buff-chip.cat-technical { border-color: var(--technical); color: var(--technical); }
.bc-buff-chip.cat-support   { border-color: var(--support);   color: var(--support); }
.bc-buff-chip.cat-strike    { border-color: var(--strike);    color: var(--strike); }

/* Footer: tags on the left flow, actions pinned below */
.bc-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 0;
}

/* Action row - primary button grows, icon buttons stay compact */
.build-card .bc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.build-card button {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s,
    background 0.12s;
}
.build-card button:hover {
  color: var(--text);
  border-color: var(--hero);
}
.build-card button.bc-primary {
  flex: 1;
  color: var(--text);
  font-weight: 600;
  min-width: 70px;
}
.build-card button.bc-primary:hover {
  background: var(--hero);
  border-color: var(--hero);
  color: #fff;
}
.build-card button.upvote.active {
  color: var(--gold);
  border-color: var(--gold);
}
.build-card button.favorite.active {
  color: var(--gold);
  border-color: var(--gold);
}
.build-card button.bc-delete {
  font-size: 15px;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}
.build-card button.bc-delete:hover {
  color: var(--villain);
  border-color: var(--villain);
}
.tag-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.tag-picker {
  margin: 6px 0 14px;
}
.tag-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Dropdown trigger is desktop-hidden; the chip grid is always open on desktop.
   Mobile overrides (mobile.css) reveal the trigger and collapse the grid. */
.tag-dropdown-trigger {
  display: none;
}
.tag-chip {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  cursor: pointer;
}
.tag-chip:hover {
  color: var(--text);
  border-color: var(--hero);
}
.tag-chip.active {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-dim);
}

.preview-banner {
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  margin-bottom: 16px;
}
/* Community info banner reads as neutral info (blue), not a warning — the
   ⚠️ offline state carries its own icon/text. Left-accent bar for contrast. */
#communityBanner.preview-banner {
  background: linear-gradient(90deg, var(--hero-dim), var(--panel));
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--hero);
  color: var(--text);
}

.build-search-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
}
.build-search-input:focus {
  border-color: var(--hero);
}
.sort-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sort-tab {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
}
.sort-tab.active {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--gold-dim);
}

/* Build Card (shareable image) */
.build-card-sheet {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  width: 480px;
  margin: 0 auto;
}
/* #buildCardPreview is the scale-clipping viewport around .build-card-sheet -
   see "Mobile build card scaling" in buildcard.js. The sheet itself always
   renders at a fixed 480px desktop width/layout; on narrow screens JS scales
   the whole thing down with a CSS transform instead of letting it reflow, so
   it looks identical (just smaller) to the downloaded PNG instead of growing
   tall from stacked rows. */
#buildCardPreview {
  width: 100%;
  overflow: hidden;
}
.bcard-header {
  display: flex;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.bcard-costume-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--sunken);
  flex-shrink: 0;
}
.bcard-build-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
}
.bcard-costume-name {
  font-size: 13px;
  color: var(--text);
  margin-top: 3px;
}
.bcard-stars {
  margin-top: 4px;
}
.bcard-section {
  margin-bottom: 14px;
}
.bcard-section h5 {
  margin: 0 0 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.bcard-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--panel-2);
  margin-bottom: 4px;
  font-size: 12px;
}
.bcard-row-label {
  color: var(--text-dim);
  min-width: 90px;
  flex-shrink: 0;
  font-size: 10.5px;
}
.bcard-row-skill {
  font-weight: 700;
  flex: 1;
}
.bcard-row-source {
  color: var(--text-dim);
  font-size: 10.5px;
}
.bcard-row-empty {
  opacity: 0.5;
}
.bcard-row-doubled {
  border: 1.5px solid var(--fixer);
}
.bcard-row-empty-text {
  font-style: italic;
  color: var(--text-dim);
  font-size: 11.5px;
}
.bcard-footer {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-dim);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.bcard-link {
  text-align: center;
  font-size: 10.5px;
  color: var(--hero);
  word-break: break-all;
  margin-top: 4px;
}
/* ^ see PROJECT_KNOWLEDGE.md "Share link baked into the build card" */

/* ===================== Mobile / touch responsiveness ===================== */
@media (max-width: 900px) {
  .build-layout {
    padding: 14px 16px;
  }
}

@media (max-width: 700px) {
  /* NOTE: the build card used to reflow here (stacked header, wrapped rows)  (RDH)
     to fit a phone screen, which made it grow very tall vertically - much
     taller than the same card looks when downloaded as a PNG and viewed on
     a phone, since the PNG is just a fixed-layout image scaled down to fit,
     not reflowed. Reflowing is no longer done at all, at any width: the
     card's internal HTML/CSS layout (header side-by-side, rows side-by-side)
     now always stays exactly as built for desktop, and `buildcard.js`
     (`fitBuildCardToContainer`) uses a CSS transform:scale on the whole
     `.build-card-sheet` to shrink it down to fit `#buildCardPreview`'s
     actual width on narrow screens - same effect as viewing the downloaded
     image at a smaller size. See "Mobile build card scaling" in
     PROJECT_KNOWLEDGE.md.
  */

  /* The card itself scales to fit (see fitBuildCardToContainer above), but
     it was still scaling down more than it needed to on phones because
     .build-card-panel kept its normal desktop side padding/border, eating
     into the width available to scale against - the live card ended up
     visibly smaller than the same card looks as a downloaded image on the
     same phone, with a lot of dead border space around it. On mobile only,
     pull the panel out to the screen edges (negative margin cancelling
     .build-layout's 16px side padding from the 900px rule above) and trim
     its own side padding way down, so #buildCardPreview gets close to the
     full screen width and the card scales up accordingly. Doesn't touch the
     desktop/tablet look at all - only active under this breakpoint.
     Top/bottom padding and the panel's other content (heading, buttons)
     are untouched; only left/right space is reclaimed. */
  .build-card-panel {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 8px;
    padding-right: 8px;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .builds-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== EXPERIMENTAL: Undo/Redo + Presets ===================== */
.undo-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.undo-btn:hover:not(:disabled) {
  border-color: var(--hero);
  color: var(--text);
}
.undo-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- Recommended build generator modal (replaced presets 2026-07-17) ---- */

/* Same offscreen-rendering skip as .costume-card in style.css - build lists
   can also get long, and every card runs a totals computation for its
   summary line. */
.build-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* ===================== Author page ===================== */
.author-header {
  margin: 4px 0 8px;
}
.author-name-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  background: linear-gradient(90deg, var(--hero), var(--villain));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.author-stats {
  color: var(--text-dim);
  font-size: 13px;
}

/* Author byline on the build-view page */
.build-author-line {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 12px;
}
.build-author-name {
  color: var(--hero);
  cursor: pointer;
  font-weight: 600;
}
.build-author-name:hover {
  text-decoration: underline;
}

/* Report (flag) button on build cards */
.bc-report {
  color: var(--text-dim);
  opacity: 0.6;
  padding: 6px 9px !important;
}
.bc-report:hover {
  color: var(--villain) !important;
  border-color: var(--villain) !important;
  opacity: 1;
}

/* ===================== Loading skeletons ===================== */
.skeleton-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.skeleton-banner {
  height: 150px;
  background: var(--panel-2);
}
.skeleton-body {
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: var(--panel-2);
}
.skeleton-line.short {
  width: 55%;
}
.skeleton-line.med {
  width: 75%;
}
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
}
.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: translateX(-100%);
  animation: skeleton-sweep 1.3s infinite;
}
@keyframes skeleton-sweep {
  100% {
    transform: translateX(100%);
  }
}
html.mobile-ui .skeleton-banner {
  height: 118px;
}

/* ===================== Top Builders strip ===================== */
.top-builders {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;   /* tighter: no dead band under the label when collapsed */
  margin-bottom: 4px;
}
.top-builders-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 9px;
}
.top-builders-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.builder-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 12.5px;
  transition:
    border-color 0.12s,
    transform 0.1s;
}
.builder-chip:hover {
  border-color: var(--hero);
  transform: translateY(-1px);
}
.builder-rank {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 11px;
}
.builder-name {
  font-weight: 600;
}
.builder-votes {
  color: var(--gold);
  font-weight: 700;
  font-size: 11.5px;
}

/* ---------- Tuning Totals: "Include Special Tuning effects" ---------- (RDH)
   Checkboxes for Special Tunings that SCALE a whole stat family (Embrittlement
   ×1.1 Attack, Revenge Technical ×1.5 Reload, Revenge Assault ×0.80 damage taken).
   Only specials actually equipped in the build appear here. */
.tt-specials {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--panel-2);
}
.tt-specials-title {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.tt-special {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  cursor: pointer;
  flex-wrap: wrap;
}
.tt-special input { cursor: pointer; flex-shrink: 0; }
.tt-special-name { font-weight: 600; color: var(--text); }
.tt-special-eff  { color: var(--gold); font-size: 11.5px; }
/* Equipped, but there's nothing of that family to scale - say so rather than
   leaving a checkbox that silently does nothing. */
.tt-special-empty { cursor: default; opacity: 0.5; }
.tt-special-none  { color: var(--text-dim); font-size: 11px; font-style: italic; }
.tt-specials-note {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
/* A total currently being scaled by a ticked special. */
.tt-val-boosted {
  text-shadow: 0 0 9px rgba(232, 184, 74, 0.45);
}

/* ===================== Recommended Builds page (2026-07-17) =====================
   Character picker + per-archetype swipeable carousels. Placeholder content for
   now — see PROJECT_KNOWLEDGE.md. */
.rec-charpick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  max-width: 340px;
}
.rec-charpick-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rec-section { margin-bottom: 26px; }
/* Section title: icon image + text on the same baseline */
.rec-section-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Icon in the title is slightly larger than inline cat-sym chips */
.rec-section-title .cat-sym {
  width: 22px;
  height: 22px;
}
.rec-section-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 12px;
}
/* Horizontal swipe row. scroll-snap gives a clean card-to-card feel on touch;
   the fixed card width keeps every card a comfortable, thumb-swipeable size.
   2026-07-19: each carousel now sits inside a .rec-carousel-frame — a bordered
   panel whose edges act as visible left/right "walls" instead of cards
   scrolling off into nothing, with soft gradient fades hinting there's more
   to scroll. The frame also gives the first card real breathing room on the
   left (the old 2px padding sat the card's edge right on the clip line, which
   read as "slightly cut off" whenever the layout shifted). */
.rec-carousel-frame {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
/* Edge fades: panel color melting into transparency over the first/last few
   px of the frame. Pure decoration - clicks/swipes pass straight through. */
.rec-carousel-frame::before,
.rec-carousel-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  z-index: 1;
  pointer-events: none;
}
.rec-carousel-frame::before {
  left: 0;
  background: linear-gradient(90deg, var(--panel), transparent);
}
.rec-carousel-frame::after {
  right: 0;
  background: linear-gradient(270deg, var(--panel), transparent);
}
.rec-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
  scroll-padding-left: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.rec-carousel::-webkit-scrollbar { height: 8px; }
.rec-carousel::-webkit-scrollbar-track { background: transparent; }
.rec-carousel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 20px;
}
.rec-carousel > .rec-card {
  flex: 0 0 262px;
  width: 262px;
  scroll-snap-align: start;
}
.rec-preview-badge {
  flex: none;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid var(--gold);
}
.rec-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 2px 16px;
}

/* ---- Build description input (build page, above Tags) ---- */
.build-desc-optional {
  color: var(--text-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.build-desc-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 68px;
  outline: none;
}
.build-desc-input:focus {
  border-color: var(--hero);
}
.build-desc-counter {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  margin-top: 3px;
}

/* Full description on the shared/viewed build page (cards clamp to 3 lines). */
.build-view-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
  margin-bottom: 14px;
}

/* ---- Selection rectangle: tinted background in the slot type's color ----
   Each fs-trigger gets a subtle transparent fill derived from its category
   color. The border shifts to match so it reads as a unified colored block,
   not just an outline. Text stays readable because the fill is very low opacity. */
.fs-trigger.slot-cat-ASSAULT   { background: color-mix(in srgb, var(--cat-real-assault)   18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--cat-real-assault)   45%, var(--panel-2)); }
.fs-trigger.slot-cat-RAPID     { background: color-mix(in srgb, var(--cat-real-rapid)     18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--cat-real-rapid)     45%, var(--panel-2)); }
.fs-trigger.slot-cat-TECHNICAL { background: color-mix(in srgb, var(--cat-real-technical) 18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--cat-real-technical) 45%, var(--panel-2)); }
.fs-trigger.slot-cat-SUPPORT   { background: color-mix(in srgb, var(--cat-real-support)   18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--cat-real-support)   45%, var(--panel-2)); }
.fs-trigger.slot-cat-STRIKE    { background: color-mix(in srgb, var(--cat-real-strike)    18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--cat-real-strike)    45%, var(--panel-2)); }

.fs-trigger.slot-cat-ASSAULT   .fs-menu-btn { border-left-color: color-mix(in srgb, var(--cat-real-assault)   45%, var(--panel-2)); }
.fs-trigger.slot-cat-RAPID     .fs-menu-btn { border-left-color: color-mix(in srgb, var(--cat-real-rapid)     45%, var(--panel-2)); }
.fs-trigger.slot-cat-TECHNICAL .fs-menu-btn { border-left-color: color-mix(in srgb, var(--cat-real-technical) 45%, var(--panel-2)); }
.fs-trigger.slot-cat-SUPPORT   .fs-menu-btn { border-left-color: color-mix(in srgb, var(--cat-real-support)   45%, var(--panel-2)); }
.fs-trigger.slot-cat-STRIKE    .fs-menu-btn { border-left-color: color-mix(in srgb, var(--cat-real-strike)    45%, var(--panel-2)); }

/* ---- Outer slot container: same tint at lower opacity so the selection
   rectangle inside still reads as the foreground element ---- */
.build-slot-item.slot-cat-ASSAULT   { background: color-mix(in srgb, var(--cat-real-assault)   18%, var(--panel-2)); border-color: color-mix(in srgb, var(--cat-real-assault)   25%, transparent); }
.build-slot-item.slot-cat-RAPID     { background: color-mix(in srgb, var(--cat-real-rapid)     18%, var(--panel-2)); border-color: color-mix(in srgb, var(--cat-real-rapid)     25%, transparent); }
.build-slot-item.slot-cat-TECHNICAL { background: color-mix(in srgb, var(--cat-real-technical) 18%, var(--panel-2)); border-color: color-mix(in srgb, var(--cat-real-technical) 25%, transparent); }
.build-slot-item.slot-cat-SUPPORT   { background: color-mix(in srgb, var(--cat-real-support)   18%, var(--panel-2)); border-color: color-mix(in srgb, var(--cat-real-support)   25%, transparent); }
.build-slot-item.slot-cat-STRIKE    { background: color-mix(in srgb, var(--cat-real-strike)    18%, var(--panel-2)); border-color: color-mix(in srgb, var(--cat-real-strike)    25%, transparent); }


/* ===================== Build page palette (resolved) =====================
   The per-page override that lived here is GONE as of 2026-07-19. It existed
   so the Build Editor could keep the original type colours while the rest of
   the app used the game-matched palette. That difference no longer exists:
   the global palette was reverted to those same originals for four of the
   five types, so the override was a no-op for assault/rapid/support/technical
   and would have left the Build Editor showing the OLD red (#ff5252) while
   every other page showed the new one (#f26565) - a one-page inconsistency
   nobody asked for. build.html keeps its `class="page-build"` hook; if the
   Build Editor ever needs its own palette again, redeclare --cat-real-* under
   body.page-build here and it works immediately. */

/* Slot-type symbol, inline after the type name. The global .cat-sym is
   `display: block` (it's a flex child in the optimizer's skill rows); left as
   block here it becomes its own line and shoves the whole row down - very
   visible on mobile. inline-block keeps it on the text baseline. */
.slot-type-line .cat-sym {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin: 0 0 0 4px;
}


/* ============ Slot style option: "Outline only" ============================
   html[data-slot-style="inner"] (set by theme.js from the profile picker).
   Strips the tint from the OUTER slot card while leaving the inner clickable
   selector (.fs-trigger) fully coloured - so the thing you interact with still
   carries its type colour, but the surrounding card doesn't. Purely additive:
   with no attribute set, none of this applies and the default look is byte-for-
   byte unchanged. Specificity comes from the html[...] prefix, so these win
   over the .slot-cat-* rules above without !important. */
html[data-slot-style="inner"] .build-slot-item.slot-cat-ASSAULT,
html[data-slot-style="inner"] .build-slot-item.slot-cat-RAPID,
html[data-slot-style="inner"] .build-slot-item.slot-cat-TECHNICAL,
html[data-slot-style="inner"] .build-slot-item.slot-cat-SUPPORT,
html[data-slot-style="inner"] .build-slot-item.slot-cat-STRIKE {
  background: var(--panel);
  border-color: var(--border);
}


/* Owner-only "delete published build" on Community cards. Shares .bc-report's
   quiet styling so it doesn't compete with Copy/favourite, but turns the
   villain red on hover to signal it's destructive. */
/* ---- Session 27: publish management controls ---- */
/* Armed (second-tap) delete state for PUBLISHED builds on My Builds: the
   trash becomes an explicit red warning that deleting also unpublishes. */
.build-card button.bc-delete-armed {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  color: #fff;
  background: var(--villain);
  border-color: var(--villain);
  animation: bc-armed-in 0.15s ease-out;
}
.build-card button.bc-delete-armed:hover {
  color: #fff;
  filter: brightness(1.1);
}
@keyframes bc-armed-in {
  from { transform: scale(0.94); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .build-card button.bc-delete-armed { animation: none; }
}
/* Unpublish (My Builds, published cards): ⊘ = remove from Community.
   (.bc-edit-own dropped in session 34 - the community pencil became the
   card's primary "Edit" button, so the class is no longer emitted.) */
.build-card button.bc-unpub:hover {
  color: var(--gold);
  border-color: var(--gold);
}
/* Click-to-open build detail modal (community.js): wide enough for the
   fixed-width build-card sheet, which self-scales below that (buildcard.js). */
.build-detail-modal {
  max-width: 560px;
  width: min(560px, 94vw);
}
.build-detail-modal .build-save-row {
  flex-wrap: wrap;
}

.bc-unpublish:hover {
  color: var(--villain) !important;
  border-color: var(--villain) !important;
  opacity: 1;
}


/* ---- Session 32 UI fixes (2026-07-20) ---- */
/* Top Builders: breathing room + native-disclosure styling. */
.top-builders {
  margin: 16px 0 18px;
}
.tb-details > .top-builders-label {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tb-details > .top-builders-label::-webkit-details-marker { display: none; }
.tb-details > .top-builders-label::after {
  content: "▾";
  margin-left: 8px;
  color: var(--text-dim);
  display: inline-block;
  transition: transform 0.15s ease;
}
.tb-details[open] > .top-builders-label::after { transform: rotate(180deg); }
.tb-details > .top-builders-chips { margin-top: 10px; }
/* Detail modal: the scaled card must never force horizontal scroll even if a
   scale pass is skipped (belt to the render-after-open fix in community.js). */
.build-detail-modal #bdCard {
  max-width: 100%;
  overflow: hidden;
}
/* Build editor: published builds lock their loadout (see build.js
   syncPublishState) - tunings are shared with the Community listing, so
   structural edits require unpublishing first. */
.slots-locked .build-slot-grid,
.slots-locked #undoBtn,
.slots-locked #redoBtn,
.slots-locked #clearSlotsBtn {
  pointer-events: none;
  opacity: 0.5;
}
.published-lock-note {
  margin: 8px 0 10px;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}


/* ---- Session 33 (2026-07-20) ---- */
/* App-styled dialogs (faces.js appConfirm/appNotice) - replaces native
   confirm()/alert() popups. Inherits .modal, so: bottom sheet on mobile,
   centered card on desktop. */
.app-dialog { max-width: 380px; }
.app-dialog-msg {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 14px;
}
.app-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.app-dialog-btns button { min-width: 92px; }
.app-dialog-danger {
  background: var(--villain);
  border-color: var(--villain);
  color: #fff;
}
/* Detail modal header (2026-07-20): the close button used to be a sticky
   float, which reserved its own full-height row and left a tall empty band
   above "Published by". It's now pinned top-right, and the author line is a
   flex row of the same height so their text baselines sit level. The
   description keeps its .build-view-desc box and drops BELOW both.
   Modest top padding - pushed up, but not flush to the edge. */
.build-detail-modal { position: relative; }
.build-detail-modal .modal-close {
  position: absolute;
  float: none;
  /* Pin the button's CENTER to the author line's centre line (section
     padding-top 14 + half the 30px line = 29px) instead of matching top
     edges + heights. Robert's PC screenshot showed the text sitting ~10px
     above the button's centre despite the edge/height math - whatever the
     residual offset came from (borders, line box, UA button styling),
     centre-pinning is invariant to the button's own rendered height, so it
     cannot recur. Mobile gets the same treatment at its own numbers. */
  top: calc(14px + 15px);
  transform: translateY(-50%);
  right: 12px;
  margin: 0;
  z-index: 2;
}
/* The author line and the × share a top edge and the SAME height, so their
   text centres line up exactly (30px desktop / 40px mobile - the button is
   resized in mobile.css, and #bdAuthor is matched there too). The whole
   header sits 14px down: pushed up, but not crowding the edge. */
.build-detail-modal .modal-section { padding-top: 14px; }
.build-detail-modal #bdAuthor {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 12px;   /* keeps the description clear of the × */
  padding-right: 50px;
}
/* Collapsed Top Builders: chips spacing lives on the chips, not the panel. */
.tb-details > .top-builders-chips { margin-top: 10px; margin-bottom: 0; }
/* Collapsed: the label's own margin-bottom (9px, meant to separate it from
   the chips) becomes dead space inside the panel when there are no chips to
   separate it from. Only apply it while open. (2026-07-20) */
.tb-details:not([open]) > .top-builders-label { margin-bottom: 0; }
/* PC: center the editor page content (2026-07-20 request). Desktop only -
   mobile keeps its full-width stacked flow. */
@media (min-width: 768px) {
  .build-costume-panel,
  .build-editor-panel h2,
  .build-editor-panel .build-hint,
  .build-save-panel h2,
  .build-card-panel h2,
  .build-card-panel .build-hint { text-align: center; }
  .build-slot-grid { justify-content: center; }
  .build-save-row { justify-content: center; }
  #buildCardPreview { display: flex; justify-content: center; }
  .tag-picker { justify-content: center; }
}


/* ---- Session 38 (2026-07-20) ---- */
/* Profile modal collapsed into sections (auth.js): Account Settings + Site
   Themes as native <details>, so the modal opens short instead of as one
   long scroll. */
.auth-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--panel-2);
}
.auth-section-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-section-summary::-webkit-details-marker { display: none; }
.auth-section-summary::after {
  content: "▾";
  color: var(--text-dim);
  transition: transform 0.15s ease;
}
.auth-section[open] > .auth-section-summary::after { transform: rotate(180deg); }
.auth-section[open] > .auth-section-summary { border-bottom: 1px solid var(--border); }
.auth-section-body { padding: 12px 13px 13px; }
/* The theme picker keeps its own heading inside the profile modal; inside a
   titled section that heading is redundant. */
.auth-section-body .auth-theme-section { margin-top: 0; }
.auth-section-body .auth-theme-title { display: none; }

/* Slot-style A/B picker, moved onto the build page above the tuning slots. */
.slot-style-mount { margin: 0 0 14px; }
.slot-style-mount .auth-theme-section {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel-2);
}
.slot-style-mount .auth-theme-title { color: var(--gold); }

/* Tag picker inside the community Edit modal (2026-07-20). It reuses
   .tag-chip-grid for the chip styling, but NOT the build page's mobile
   dropdown behaviour - see the mobile.css override, which is load-bearing:
   there, .tag-chip-grid is display:none unless it sits inside .tag-picker.open,
   so without the override these chips would be invisible on phones. */
.em-tags {
  margin-top: 6px;
  max-height: 148px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
}

/* Build editor header row: title + undo/redo/clear. Was an inline-styled
   flex row (space-between); moved here so desktop can centre the title.
   Mobile/narrow keeps the original left-title / right-buttons layout. */
.build-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.build-editor-head h2 { margin: 0; }
@media (min-width: 768px) {
  /* Three tracks with the outer two equal (1fr each) put the middle one -
     the title - at the TRUE horizontal centre of the panel. A plain
     `flex: 1; text-align: center` would only centre it within the space the
     buttons leave over, i.e. visibly off to the left. ::before fills the
     empty first track. */
  .build-editor-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .build-editor-head::before { content: ""; }
  .build-editor-head h2 { text-align: center; }
  .build-editor-head > div:last-child { justify-self: end; }
}

/* ===================== Build discussion (comments + replies) =====================
   Added 2026-07-21 with the comments feature (comments.js / build-comments.sql).

   Design intent: the thread has to sit UNDER a very dense, very colourful build
   card without competing with it, so everything here is deliberately quiet -
   panel tokens, no new accent colour, no card chrome per comment. The one
   piece of structure that earns its ink is the THREAD SPINE: a vertical rule
   down the left of a reply group. It encodes the parent/child relationship
   that the flat list would otherwise lose, which is the single thing a reader
   needs to parse a thread at a glance. Avatar discs are tinted per author
   (hue derived from the display name in comments.js) so the same person is
   recognizable down the page without repeating their name in colour. */

.comments-panel {
  margin-top: 16px;
}
.cmt-header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
/* Matches .panel h2 (uppercase micro-label) so the section reads as part of
   the same page furniture as the rest of the app. */
.cmt-header h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0;
  font-weight: 700;
}
.cmt-count-badge {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---- Composer / editors ---- */
.cmt-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 62px;
  outline: none;
  box-sizing: border-box;
}
.cmt-input:focus {
  border-color: var(--hero);
}
.cmt-input::placeholder {
  color: var(--text-faint);
}
.cmt-editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.cmt-editor-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.cmt-count {
  font-size: 11px;
  color: var(--text-faint);
}
.cmt-count-warn {
  color: var(--gold);
}
.cmt-btn {
  background: var(--panel-2);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.cmt-btn:hover {
  background: var(--gold-dim);
}
.cmt-btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cmt-btn-ghost:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* Signed-out prompt: an empty state that asks for exactly one thing. */
.cmt-signin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  color: var(--text-dim);
  font-size: 13.5px;
}

.cmt-status {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 8px;
  min-height: 1em;
}
.cmt-status-error {
  color: var(--villain);
}
.cmt-empty {
  color: var(--text-faint);
  font-size: 13.5px;
  padding: 18px 2px 6px;
}

/* ---- Thread ---- */
.cmt-list,
.cmt-sublist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.cmt-item {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.cmt-list > .cmt-item:first-child {
  border-top: none;
}
.cmt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cmt-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.cmt-author {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hero);
  cursor: pointer;
}
.cmt-author:hover {
  text-decoration: underline;
}
.cmt-time {
  font-size: 12px;
  color: var(--text-faint);
}
.cmt-edited {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
/* pre-wrap + overflow-wrap: comment bodies are free text, so a single
   200-character "word" must wrap instead of stretching the panel. */
.cmt-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cmt-body-deleted {
  color: var(--text-faint);
  font-style: italic;
  font-size: 13px;
}
.cmt-deleted {
  opacity: 0.75;
}
.cmt-actions {
  display: flex;
  gap: 12px;
  margin-top: 7px;
}
.cmt-action {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}
.cmt-action:hover {
  color: var(--text);
  text-decoration: underline;
}
.cmt-action-danger:hover {
  color: var(--villain);
}

/* THE SIGNATURE: the reply spine. One rule, doing real work - it's the only
   thing telling you where a sub-thread starts and ends. */
.cmt-thread {
  list-style: none;
}
.cmt-sublist {
  margin: 0 0 4px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  margin-left: 11px; /* centres the spine under the 24px avatar disc */
}
.cmt-reply {
  border-top: none;
  padding: 8px 0;
}
.cmt-reply-box {
  padding-top: 4px;
}
.cmt-reply-editor {
  margin-top: 2px;
}

/* Keyboard users must always be able to see where they are. */
.cmt-btn:focus-visible,
.cmt-btn-ghost:focus-visible,
.cmt-action:focus-visible,
.cmt-author:focus-visible,
.cmt-input:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .cmt-sublist {
    padding-left: 10px;
    margin-left: 7px;
  }
  .cmt-editor-btns {
    width: 100%;
    margin-left: 0;
  }
  .cmt-editor-btns .cmt-btn,
  .cmt-editor-btns .cmt-btn-ghost {
    flex: 1;
  }
  .cmt-signin {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}