/* brand.css — SoundButtons layer over the cloned competitor design system.
 *
 * The visual system (typography, layout, the sprite play-button atlas, the
 * icon set) is carried verbatim from the competitor clone at
 * /build/assets/app-D29J_t8s.css plus the clone's inline <symbol> sprite.
 * This file only supplies:
 *   1. our brand identity (logo mark + wordmark) — NOT the competitor logo image,
 *   2. the component classes the clone CSS does not define.
 *
 * Per SEXTANT R-907 §1.1: 100% clone of the UI, brand transformed, base problems
 * fixed (no /api backend, so content is statically generated by apply_ui_shell.py).
 */

:root {
  --accent: #5752ff;
  --accent-hover: #6c67ff;
}

/* Legacy sprite class — the clone's sprite is hidden inline, but a stale
   copy from an earlier build must never render as a block. */
.icon-sprite { display: none; }

/* ---- brand logo (four-dot mark + wordmark) — ours, not the competitor logo ---- */
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}
.logo-mark span {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--accent);
}
.logo-mark span:nth-child(2) { background: var(--accent-hover); }
.logo-mark span:nth-child(3) { background: #ff5c8a; }
.logo-mark span:nth-child(4) { background: #3ddc97; }

.logo-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
}
.footer-logo-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  color: #fff;
}

/* the clone's logo is a 26.6rem image; ours is a mark + wordmark, so the
   header logo box is sized to keep the same visual weight */
.logo { min-width: 26.6rem; }
.footer-logo { min-width: 26.6rem; }

/* ---- boards page tiles ---- */
.board-tile {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  border-radius: 1.6rem;
  background: var(--bg-2, #252732);
  text-decoration: none;
  color: inherit;
}
.board-tile:hover { background: var(--bg-3, #181b25); }
.bt-em { font-size: 2.8rem; line-height: 1; }
.bt-body { display: flex; flex-direction: column; }
.bt-name { font-weight: 700; font-size: 1.7rem; }
.bt-count { font-size: 1.3rem; opacity: .7; }

/* ---- prose + page head + empty state ---- */
.prose-wrap { padding-block: 0; }
/* .prose caps itself at 72rem + gutters but never centres, and its max-width
   *assumes* the element also carries padding-inline of one gutter (that is what
   .page supplies when both classes sit on the same element). Nested one level
   deeper (home) neither holds, so the column stuck to the left and read 816px
   wide instead of 720. Supply both here. */
.prose-wrap .prose {
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.page-head { padding-block: 4rem 1.6rem; }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.6rem;
  letter-spacing: -.02em;
  color: var(--text);
}
.feed-empty {
  display: none;
  text-align: center;
  padding: 4.8rem 2rem;
  font-size: 1.7rem;
  color: var(--text-2);
}
.feed-empty a { color: var(--link); }

/* ---- footer back-to-top ---- */
.footer-back {
  white-space: nowrap;
  justify-self: end;
  color: var(--footer-muted, var(--text-2));
  text-decoration: none;
}
.footer-back:hover { color: var(--text); }

/* ---- card title is a link (crawlable) but must look like the clone's div ----
   The clone renders .sc-name as a plain div (the whole card is a play button);
   we keep the anchor so engines can reach each board, but the clone's global
   `a` rules would colour and underline it, so we neutralise both. */
.sc-name {
  color: #f5f5fb;
  text-decoration: none;
}
.sc-name:hover { color: #f5f5fb; }


/* ---- play buttons ----
 * The competitor's sprite atlas (--sb-image) and its full geometry are carried
 * over verbatim in app-*.css, so the buttons render exactly like the clone's.
 * No CSS redrawing happens here (standing directive: 直接搬运 clone).
 */

/* ---- site-wide auth state (injected by /auth-ui.js into .header-actions) ----
 * Mirrors the clone's header pill (.btn-upload) so the login / account control
 * reads as part of the same header, on every page, anon or signed-in. */
.auth-slot {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.auth-chip {
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  min-height: 4.4rem;
  color: var(--text);
  white-space: nowrap;
  border-radius: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s, border-color .16s;
}
.auth-chip:hover { background: var(--bg-2); border-color: var(--accent); }
.auth-chip.auth-signup { background: var(--accent); border-color: var(--accent); color: #fff; }
.auth-chip.auth-signup:hover { filter: brightness(1.05); }
.auth-chip.auth-logout { background: transparent; }
@media (max-width: 640px) {
  .auth-slot { gap: .6rem; }
  .auth-chip { min-height: 3.8rem; padding: .8rem 1.2rem; font-size: 1.3rem; }
}

/* ---- mobile menu: honour [hidden] even where the clone forces display:flex ---- */
.header-root .mobile-menu[hidden] { display: none !important; }

/* ---- catalog pagination (rendered by catalog.js) -----------------------------
 * The clone CSS already gives .pg its box (4.4rem square, 1.2rem radius,
 * tabular digits) but no colour, and it keys the current page off
 * [aria-current]. catalog.js emits both is-active and aria-current, so either
 * selector lights the button up. */
.catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 3.2rem 0 .8rem;
}
.catalog-pagination .pg {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.catalog-pagination .pg:hover:not(:disabled):not(.is-active) {
  background: var(--bg-3);
  border-color: var(--accent);
}
.catalog-pagination .pg.is-active,
.catalog-pagination .pg[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.catalog-pagination .pg[disabled] { opacity: .4; cursor: default; }
.catalog-pagination .pg--arrow { font-size: 2.2rem; line-height: 1; }
.catalog-pagination .pg.dots {
  background: none;
  border: 0;
  color: var(--text-3);
  min-width: 2.4rem;
  cursor: default;
}
.catalog-pagination .pg-info {
  margin-left: .6rem;
  color: var(--text-2);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .catalog-pagination { gap: .4rem; margin-top: 2.4rem; }
  .catalog-pagination .pg { min-width: 3.6rem; min-height: 3.6rem; padding: .4rem; }
  .catalog-pagination .pg-info { flex-basis: 100%; margin-left: 0; }
}