/*
 * wkx-community.css — community surfaces (design §9.1, §9.5, §9.7). Always
 * loaded; every rule is scoped to wkc-* classes or body.community-active, so
 * nothing here touches the rest of the app. Gold is reserved for Challenges
 * (scoped under .wkg-root in a later stage) and trophy art.
 */

/* Aliases of the app's one palette (--pt-*, index.html :root), so community
   pages and the rest of the app can't drift apart. */
:root {
  --wkc-bg: var(--pt-bg-main, #05070d);
  --wkc-panel: var(--pt-bg-card, rgba(13, 18, 32, 0.84));
  --wkc-panel-strong: var(--pt-bg-elevated, rgba(20, 26, 41, 0.8));
  --wkc-panel-solid: var(--pt-surface-2, #111827);   /* dialogs and their sticky footers: nothing shows through */
  --wkc-border: var(--pt-border-subtle, rgba(148, 163, 255, 0.08));
  --wkc-border-strong: var(--pt-border-strong, rgba(148, 163, 255, 0.15));
  --wkc-text: var(--pt-text-primary, #f5f6fb);
  --wkc-muted: var(--pt-text-secondary, #9aa3c0);
  --wkc-muted-2: var(--pt-text-muted, #6f7898);
  --wkc-violet: #8b5cf6;
  --wkc-violet-soft: rgba(139, 92, 246, 0.16);
  --wkc-blue: #3b82f6;
  --wkc-cyan: var(--pt-cyan, #22d3ee);
  --wkc-danger: var(--pt-danger, #f87171);
  --wkc-ok: var(--pt-success, #34d399);
  --wkc-radius: var(--pt-radius-card, 16px);
  --wkc-radius-sm: var(--pt-radius-control, 10px);
}

/* ── Chrome reset while a community page is open (the 280 px trap) ─────── */
/* Beyond design §9.1's list this also hides the legacy panel header, exactly
   as every other full-page mode does (create, voice, dashboard, favorites,
   search-v3 … in index.html). Community pages sit under the app's shared top
   bar (wkx-topbar.js, with the bell), and the legacy .topbar strip is hidden
   on every page by the shell (wkx-shell.css), so it is not listed here (H13). */
body.community-active .session-panel { display: none !important; }
body.community-active { padding-right: 0 !important; }
body.community-active .panel-header,
body.community-active #status,
body.community-active #mode,
body.community-active #note,
body.community-active .embedding-status-panel,
body.community-active .profile-panel,
body.community-active #profileDefaultContent { display: none !important; }
body.community-active .main { padding-top: 0 !important; }
/* The workspace below clears the player (player + 48 px); the app's own 120 px under .main would double it
   (168 px of empty scroll above the player at every page's end). */
body.community-active .main { padding-bottom: 0 !important; }
/* .main is overflow-y:auto app-wide but never height-bound (the document
   scrolls), which only turns it into the sticky Feed rail's scroll container
   and leaves the rail inert. As on Library and Voice, it doesn't scroll here. */
body.community-active .main { overflow-x: clip !important; overflow-y: visible !important; }
/* The bottom player shows on every community page, as on Home and the library
   pages (the mockups' persistent player, H13): before anything plays it is the
   idle bar, and the ⚙ Backend pill docks in its right end (wkx-shell.css)
   instead of floating over the page. */
body.community-active .player.pre-play,
body.community-active .player.collapsed .player-center { display: flex !important; }
/* Its now-playing group as wide as Home's, so the title, the line under it
   and the brand stay on one line each (≤ 1100 px: wkx-shell.css). */
@media (min-width: 1101px) {
  body.community-active .player-left { flex: 0 1 420px; min-width: 260px; }
}
body.community-active .workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 24px 28px calc(var(--player-height, 80px) + 48px) !important;
  align-items: start;
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 12% -12%, rgba(139, 92, 246, 0.14), transparent 64%),
    radial-gradient(760px 460px at 92% 4%, rgba(59, 130, 246, 0.09), transparent 62%),
    var(--wkc-bg) !important;
}
body.community-active .content-panel {
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body.community-active .results-grid { display: block !important; padding: 0 !important; margin: 0 !important; }

/* ── Page, cards, buttons ─────────────────────────────────────────────── */
.wkc-page { max-width: 1180px; margin: 0 auto; color: var(--wkc-text); min-width: 0; }
.wkc-page *, .wkc-overlay * { box-sizing: border-box; }
.wkc-card {
  background: var(--wkc-panel);
  border: 1px solid var(--wkc-border);
  border-radius: var(--wkc-radius);
  padding: 20px 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wkc-message { max-width: 620px; margin: 48px auto; text-align: center; padding: 34px 32px 26px; }
.wkc-message::before {
  content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px;
  background: radial-gradient(circle at 30% 25%, rgba(236, 72, 153, .55), transparent 60%), linear-gradient(135deg, #6d4aff, #1d2a4d);
  box-shadow: 0 10px 30px rgba(124, 92, 255, .3);
}
.wkc-message-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.wkc-message-text { color: var(--wkc-muted); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.wkc-message-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wkc-loading { max-width: 620px; margin: 48px auto; text-align: center; color: var(--wkc-muted); }

.wkc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--wkc-border-strong); background: rgba(255, 255, 255, 0.04);
  color: var(--wkc-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.wkc-btn:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); }
.wkc-btn:disabled { opacity: .55; cursor: default; transform: none; }
.wkc-btn:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-btn-primary { background: linear-gradient(135deg, #7c3aed, #4f46e5); border-color: transparent; color: #fff; }
.wkc-btn-primary:hover { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.wkc-btn-ghost { background: transparent; }
.wkc-btn-outline { background: transparent; border-color: rgba(139, 92, 246, .6); color: #ddd6fe; }
.wkc-btn-outline:hover { background: var(--wkc-violet-soft); }
.wkc-btn-link { background: transparent; border-color: transparent; color: #c4b5fd; padding: 0 4px; }
.wkc-btn-small { min-height: 30px; padding: 0 12px; font-size: 12px; }
.wkc-btn-danger { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.5); color: #fecaca; }
.wkc-btn-danger-ghost { background: transparent; border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; align-self: flex-start; }

/* Offline card */
.wkc-offline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 620px; margin: 48px auto; padding: 14px 18px;
}
.wkc-offline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wkc-muted-2); flex: 0 0 auto; }
.wkc-offline-text { flex: 1 1 220px; color: var(--wkc-muted); font-size: 14px; }
.wkc-prof-offline .wkc-offline { max-width: none; margin: 0 0 16px; }

/* Avatars, badges, user rows */
.wkc-avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-block; background: #111528; }
.wkc-avatar-mono { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.wkc-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: var(--wkc-violet-soft); border: 1px solid rgba(139, 92, 246, .4); color: #ddd6fe;
}
.wkc-user { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wkc-user-text { display: flex; flex-direction: column; min-width: 0; }
.wkc-user-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The @handle is always shown whole beside a display name (§2.2: names are
   not unique, there are no verified badges): it wraps, it is never cut. */
.wkc-user-handle { color: var(--wkc-muted); font-size: 12px; overflow-wrap: anywhere; }

/* Toasts (text only) */
.wkc-toasts { position: fixed; right: 18px; bottom: calc(var(--player-height, 80px) + 72px); z-index: 10050; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.wkc-toast {
  max-width: 360px; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--wkc-text);
  background: var(--wkc-panel-strong); border: 1px solid var(--wkc-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  overflow-wrap: anywhere;
}
.wkc-toast-error { border-color: rgba(248, 113, 113, .5); }

/* ── Modals ───────────────────────────────────────────────────────────── */
.wkc-overlay {
  position: fixed; inset: 0; z-index: 10040; display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px; background: rgba(3, 4, 10, 0.72); overflow-y: auto;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wkc-modal {
  width: 100%; max-width: 520px; background: var(--wkc-panel-solid); border: 1px solid var(--wkc-border-strong);
  border-radius: var(--wkc-radius); padding: 22px 24px; color: var(--wkc-text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.wkc-editor { max-width: 620px; }
.wkc-editor .wkc-modal-actions {
  position: sticky; bottom: -22px; margin: 18px -24px -22px; padding: 14px 24px 18px;
  background: var(--wkc-panel-solid); border-top: 1px solid var(--wkc-border); border-radius: 0 0 var(--wkc-radius) var(--wkc-radius);
}
.wkc-modal-title { font-size: 20px; font-weight: 850; margin: 0 0 6px; letter-spacing: -0.01em; }
.wkc-modal-text { color: var(--wkc-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.wkc-modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.wkc-spacer { flex: 1 1 auto; }
.wkc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12px; font-weight: 700; color: var(--wkc-muted); }
.wkc-field > span:first-child, .wkc-field-label { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.wkc-field input, .wkc-field textarea, .wkc-field select, .wkc-link-row input, .wkc-link-row select {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--wkc-border-strong);
  background: rgba(5, 7, 16, 0.7); color: var(--wkc-text); font: inherit; font-size: 14px; font-weight: 500;
}
.wkc-field textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.wkc-field input:focus, .wkc-field textarea:focus, .wkc-field select:focus { outline: 2px solid rgba(34, 211, 238, .55); outline-offset: 1px; }
.wkc-input-prefix { display: flex; align-items: center; gap: 0; border: 1px solid var(--wkc-border-strong); border-radius: 10px; background: rgba(5, 7, 16, 0.7); padding-left: 12px; }
.wkc-input-prefix > span { color: var(--wkc-muted); font-size: 14px; flex: 0 0 auto; }
.wkc-input-prefix input { border: 0 !important; background: transparent !important; padding-left: 4px !important; }
/* The focus ring goes round the whole field, "@" included: the input's own
   ring (and the app's input focus glow) sat over the prefix. */
.wkc-input-prefix:focus-within { outline: 2px solid rgba(34, 211, 238, .55); outline-offset: 1px; }
.wkc-field .wkc-input-prefix input:focus { outline: none; box-shadow: none !important; }
.wkc-hint { font-weight: 500; color: var(--wkc-muted-2); font-size: 12px; text-transform: none; letter-spacing: 0; }
.wkc-hint-ok { color: var(--wkc-ok); }
.wkc-hint-bad, .wkc-err { color: var(--wkc-danger); font-weight: 600; font-size: 12px; }
.wkc-err:empty { display: none; }
.wkc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--wkc-muted); margin: 4px 0 14px; line-height: 1.45; }
.wkc-check input { margin-top: 3px; accent-color: var(--wkc-violet); }
.wkc-form-error { color: var(--wkc-danger); font-size: 13px; font-weight: 600; min-height: 0; margin: 8px 0 0; }
.wkc-form-error:empty { display: none; }
.wkc-divider { height: 1px; background: var(--wkc-border); margin: 6px 0 16px; }
.wkc-links { display: flex; flex-direction: column; gap: 8px; }
.wkc-link-row { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.wkc-image-field { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.wkc-image-preview { overflow: hidden; background: #0e1224; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.wkc-image-banner .wkc-image-preview { width: 240px; max-width: 100%; aspect-ratio: 3 / 1; border-radius: 12px; }
.wkc-image-avatar .wkc-image-preview { width: 72px; height: 72px; border-radius: 50%; }
.wkc-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkc-image-preview .wkc-prof-banner-fallback { width: 100%; height: 100%; }
.wkc-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1 1 200px; }
.wkc-image-actions .wkc-field-label { width: 100%; color: var(--wkc-muted); font-weight: 700; }
.wkc-image-actions .wkc-hint { width: 100%; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.wkc-tabs { display: flex; gap: 8px; margin: 22px 0 18px; overflow-x: auto; }
.wkc-tabs-small { margin: 10px 0 16px; }
.wkc-tab {
  appearance: none; background: rgba(255, 255, 255, .03); border: 1px solid var(--wkc-border); border-radius: 10px; color: var(--wkc-muted);
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 16px; cursor: pointer; white-space: nowrap;
}
.wkc-tab:hover { color: var(--wkc-text); border-color: var(--wkc-border-strong); }
.wkc-tab.is-active { color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); border-color: rgba(139, 92, 246, .6); box-shadow: 0 0 14px rgba(124, 58, 237, .3); }
.wkc-tab:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: -2px; }

/* ── Profile (/@handle) ───────────────────────────────────────────────── */
.wkc-prof-hero { background: var(--wkc-panel); border: 1px solid var(--wkc-border); border-radius: 22px; overflow: hidden; padding-bottom: 20px; }
.wkc-prof-banner { position: relative; aspect-ratio: 4 / 1; max-height: clamp(120px, 13vw, 200px); width: 100%; overflow: hidden; background: #0e1224; }
.wkc-prof-banner img, .wkc-prof-banner-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wkc-prof-head { display: flex; align-items: flex-start; gap: 18px; padding: 0 24px; margin-top: -56px; position: relative; flex-wrap: wrap; }
.wkc-prof-avatar .wkc-avatar { width: 112px; height: 112px; border: 4px solid var(--wkc-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.wkc-prof-id { flex: 1 1 240px; min-width: 0; padding-top: 66px; }   /* only the avatar overlaps the banner */
.wkc-prof-name { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.wkc-prof-handle { display: flex; align-items: center; gap: 8px; color: var(--wkc-muted); font-size: 14px; margin-top: 4px; flex-wrap: wrap; overflow-wrap: anywhere; }
.wkc-prof-headline { color: #c7d2fe; font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; }
.wkc-prof-actions { display: flex; gap: 8px; padding-top: 70px; flex-wrap: wrap; }
.wkc-prof-bio { margin: 16px 24px 0; color: #dfe4f7; font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; max-width: 760px; }
.wkc-prof-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 24px 0; color: var(--wkc-muted); font-size: 13px; }
.wkc-prof-meta-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.wkc-prof-link { color: #a5b4fc; user-select: text; }
.wkc-prof-link-kind { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--wkc-muted-2); white-space: nowrap; }
.wkc-ico { color: var(--wkc-cyan); font-size: 12px; }
.wkc-prof-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 24px 0; }
/* In the head row, beside the name (wide columns); below it in narrow ones */
.wkc-prof-head > .wkc-prof-stats { margin: 0; padding-top: 68px; flex: 0 0 auto; gap: 8px 22px; }
.wkc-stat { display: flex; flex-direction: column-reverse; gap: 2px; }
.wkc-stat dt { font-size: 12.5px; color: var(--wkc-muted); font-weight: 600; }
.wkc-stat dd { margin: 0; font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.wkc-tabpanel { min-height: 120px; }
.wkc-empty { color: var(--wkc-muted); font-size: 14px; padding: 36px 0; text-align: center; }
.wkc-about { display: flex; flex-direction: column; gap: 2px; max-width: 640px; }
.wkc-about-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--wkc-border); font-size: 14px; }
.wkc-about-row > span { color: var(--wkc-muted); flex: 0 0 auto; }
.wkc-about-row > strong { font-weight: 650; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wkc-selectable { user-select: text; }

/* My Profile slot (H5) */
.wkc-slot-btn { white-space: nowrap; }
.wkc-slot-card { max-width: 420px; padding: 14px 16px; text-align: left; }
.wkc-slot-card .wkc-message-actions { justify-content: flex-start; }
.wkc-slot-card .wkc-message-text { font-size: 13px; margin-bottom: 10px; }

/* ── Responsive (§9.7): never a horizontal page overflow ──────────────── */
@media (max-width: 1023px) {
  body.community-active .workspace { padding: 16px 16px calc(var(--player-height, 80px) + 40px) !important; }
  .wkc-prof-name { font-size: 26px; }
}
@media (max-width: 639px) {
  .wkc-prof-head { margin-top: -44px; padding: 0 16px; gap: 12px; }
  .wkc-prof-avatar .wkc-avatar { width: 88px; height: 88px; }
  .wkc-prof-id { flex-basis: 100%; padding-top: 0; }
  .wkc-prof-actions { padding-top: 0; }
  .wkc-prof-bio, .wkc-prof-meta, .wkc-prof-stats { margin-left: 16px; margin-right: 16px; }
  .wkc-prof-stats { gap: 10px 18px; }
  .wkc-link-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wkc-link-row select { grid-column: 1 / -1; }
  .wkc-modal { padding: 18px 16px; }
  .wkc-editor .wkc-modal-actions { margin: 18px -16px -18px; padding: 12px 16px 16px; bottom: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wkc-btn, .wkc-btn:hover { transition: none; transform: none; }
}

/* ── Publications (S3): cover art, waveform, creation cards ──────────────── */
/* Community components follow the width of their own column (container
   queries), not the viewport: the app's sidebar stays beside them. */
.wkc-page { container-type: inline-size; container-name: wkc; }
.wkc-page-title { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; margin: 4px 0 18px; }
.wkc-section-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--wkc-text); margin: 22px 0 12px; }
.wkc-cover { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: inherit; background: #10142a; }
.wkc-cover-hidden, .wkc-cover-pending {
  display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center;
  color: var(--wkc-muted); font-size: 12.5px; font-weight: 700; line-height: 1.4;
  background: repeating-linear-gradient(135deg, rgba(148, 163, 255, .06) 0 10px, rgba(148, 163, 255, .02) 10px 20px), #0d1124;
}
.wkc-cover-pending { border: 1px dashed var(--wkc-border-strong); border-radius: 14px; }
/* No cover: the creation's own gradient with a faint note, so it never reads as an image that failed */
.wkc-cover-seed { position: relative; }
.wkc-cover-seed::after {
  content: "\266A"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1; color: rgba(255, 255, 255, .16); pointer-events: none;
}
.wkc-cr-art .wkc-cover-seed::after { font-size: 96px; }
.wkc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wkc-wave { display: block; width: 100%; height: 100%; }
.wkc-wave path { stroke: currentColor; fill: none; }
.wkc-wave-empty { background: linear-gradient(90deg, rgba(148, 163, 255, .08), rgba(148, 163, 255, .16)); border-radius: 6px; }
.wkc-pubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.wkc-pubcard { min-width: 0; }
.wkc-pubcard-art { position: relative; border-radius: 14px; overflow: hidden; background: #10142a; border: 1px solid var(--wkc-border); transition: transform .15s, border-color .15s; }
.wkc-pubcard:hover .wkc-pubcard-art { transform: translateY(-2px); border-color: var(--wkc-border-strong); }
.wkc-pubcard-play {
  position: absolute; right: 10px; bottom: 10px; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; font-size: 15px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.wkc-pubcard:hover .wkc-pubcard-play, .wkc-pubcard-play:focus-visible { opacity: 1; transform: none; }
.wkc-pubcard-play:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-pubcard-vis { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(5, 7, 16, .72); color: #dbe2ff; }
.wkc-pubcard-open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 2px 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.wkc-pubcard-title { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-pubcard-meta { font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkc-pubcard-open:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 6px; }
.wkc-pubcard.is-unpublished .wkc-cover { opacity: .45; filter: saturate(.5); }
.wkc-pubcard.is-unpublished .wkc-pubcard-title { color: var(--wkc-muted); }
.wkc-pubcard.is-unpublished .wkc-pubcard-vis { background: var(--wkc-violet-soft); border: 1px solid rgba(139, 92, 246, .45); color: #ddd6fe; }
.wkc-empty-actions, .wkc-more { display: flex; justify-content: center; margin: 4px 0 18px; }

/* Profile: the owner's Publish a song sits in the tab row */
.wkc-tabs-row { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.wkc-tabs-row .wkc-tabs { flex: 1 1 auto; margin: 0; min-width: 0; }
.wkc-tabs-row > .wkc-btn { flex: 0 0 auto; }

/* Pending publications (own profile) */
.wkc-pending { border: 1px solid var(--wkc-border); background: var(--wkc-panel); border-radius: var(--wkc-radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.wkc-pending-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--wkc-text); }
.wkc-pending ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wkc-pending-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.wkc-pending-name { font-weight: 700; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.wkc-pending-state { color: var(--wkc-muted); font-size: 12.5px; }

/* Publish modal and picker */
.wkc-pub-modal { max-width: 800px; }
.wkc-pub-modal-status { max-width: 520px; }
.wkc-pub-modal.wkc-pub-picker, .wkc-pub-modal.wkc-cr-editor { max-width: 560px; }
/* The preview sits under the fields, in the wide column (its values get room) */
.wkc-pub-grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px 22px; align-items: start;
  grid-template-areas: "cover fields" "cover preview";
}
.wkc-pub-cover-col { grid-area: cover; min-width: 0; }
.wkc-pub-fields { grid-area: fields; min-width: 0; }
.wkc-pub-grid > .wkc-pub-preview { grid-area: preview; margin-top: 0; }
.wkc-pub-cover { border-radius: 14px; overflow: hidden; }
.wkc-pub-cover-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
/* the actions stay in view while the form scrolls (as in the profile editor) */
.wkc-pub-modal:not(.wkc-pub-modal-status):not(.wkc-pub-picker) > .wkc-modal-actions {
  position: sticky; bottom: -22px; z-index: 1; margin: 18px -24px -22px; padding: 14px 24px 18px;
  background: var(--wkc-panel-solid); border-top: 1px solid var(--wkc-border); border-radius: 0 0 var(--wkc-radius) var(--wkc-radius);
}
.wkc-pub-vis { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wkc-pub-vis legend { width: 100%; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wkc-muted); }
.wkc-pub-vis > .wkc-hint { flex-basis: 100%; }
.wkc-pub-seg { position: relative; }
.wkc-pub-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wkc-pub-seg span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--wkc-border-strong); font-size: 13px; font-weight: 700; color: var(--wkc-muted); cursor: pointer; }
.wkc-pub-seg input:checked + span { color: #fff; border-color: rgba(139, 92, 246, .7); background: var(--wkc-violet-soft); }
.wkc-pub-seg input:focus-visible + span { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
/* the take already has a post: said before the form (publishing again makes a second one) */
.wkc-pub-already {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: var(--wkc-radius-sm); border: 1px solid rgba(139, 92, 246, .45); background: var(--wkc-violet-soft); font-size: 13px;
}
.wkc-pub-already p { margin: 0; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.wkc-check.is-disabled { opacity: .55; }
.wkc-check .wkc-hint { display: block; margin-top: 2px; }
.wkc-pub-preview { margin-top: 8px; border: 1px dashed var(--wkc-border-strong); border-radius: var(--wkc-radius-sm); padding: 12px 14px; }
.wkc-pub-preview-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--wkc-text); }
.wkc-pub-preview-list { margin: 0; display: grid; gap: 4px; }
.wkc-pub-preview-row { display: flex; gap: 12px; font-size: 13px; min-width: 0; }
.wkc-pub-preview-row dt { flex: 0 0 104px; color: var(--wkc-muted); }
.wkc-pub-preview-row dd {
  margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;   /* whole lines only */
}
.wkc-pub-status { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 0 4px; }
.wkc-pub-status strong { font-size: 17px; }
.wkc-pub-done strong { color: var(--wkc-ok); }
.wkc-pub-failed strong { color: var(--wkc-danger); }
.wkc-pub-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(148, 163, 255, .2); border-top-color: var(--wkc-violet); animation: wkc-pub-spin .9s linear infinite; }
@keyframes wkc-pub-spin { to { transform: rotate(360deg); } }
.wkc-pub-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.wkc-pub-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--wkc-border); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wkc-pub-pick:hover { border-color: var(--wkc-border-strong); background: rgba(255, 255, 255, .06); }
.wkc-pub-pick:not(.is-disabled) { border-color: rgba(139, 92, 246, .35); }
.wkc-pub-pick:not(.is-disabled):hover { border-color: rgba(139, 92, 246, .65); background: var(--wkc-violet-soft); }
.wkc-pub-pick:not(.is-disabled):focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-pub-pick.is-disabled { cursor: default; opacity: .6; background: transparent; }
.wkc-pub-pick-go { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #c4b5fd; white-space: nowrap; }
.wkc-pub-pick-art { width: 48px; height: 48px; border-radius: 10px; flex: 0 0 auto; }
.wkc-pub-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.wkc-pub-pick-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-pub-pick-name.is-untitled { color: var(--wkc-muted); font-style: italic; }
.wkc-pub-pick:not(.is-disabled) .wkc-pub-pick-name.is-untitled { color: var(--wkc-text); }
.wkc-pub-pick-meta, .wkc-pub-pick-reason, .wkc-pub-pick-why { font-size: 12px; color: var(--wkc-muted-2); }
.wkc-pub-pick-more { margin-top: 12px; }
.wkc-pub-pick-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--wkc-muted); margin-bottom: 8px; }
.wkc-pub-pick-why { display: block; font-weight: 500; margin-top: 2px; }
.wkc-pub-pick-state { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--wkc-violet-soft); color: #ddd6fe; white-space: nowrap; }

/* Creation detail (/@handle/creation/:id) */
.wkc-cr-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 32px; align-items: start; }
.wkc-cr-art { border-radius: 20px; overflow: hidden; border: 1px solid var(--wkc-border); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.wkc-cr-art.is-unpublished .wkc-cover { filter: grayscale(.5) brightness(.8); }
.wkc-cr-body { min-width: 0; }
.wkc-cr-creator { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wkc-cr-creator-btn { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; min-width: 0; text-align: left; }
.wkc-cr-time, .wkc-cr-vis { font-size: 12.5px; color: var(--wkc-muted); }
.wkc-cr-vis { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--wkc-border-strong); }
.wkc-cr-title { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 8px; overflow-wrap: anywhere; }
.wkc-cr-caption { color: #dfe4f7; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 16px; }
.wkc-cr-player { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; flex-wrap: wrap; }
.wkc-cr-play { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; font-size: 20px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 12px 30px rgba(79, 70, 229, .45); }
.wkc-cr-play:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 3px; }
.wkc-cr-play:disabled { opacity: .45; box-shadow: none; cursor: default; }
.wkc-cr-wave { position: relative; flex: 1 1 200px; min-width: 0; height: 72px; cursor: pointer; color: rgba(167, 139, 250, .5); }
.wkc-cr-wave > .wkc-wave { position: absolute; inset: 0; }
.wkc-cr-wave > .wkc-cr-wave-base path { stroke: url(#wkcWaveGradDim); }   /* the unplayed part: the same gradient, muted */
.wkc-cr-wave.is-static { cursor: default; opacity: .55; }
.wkc-cr-wave-progress { position: absolute; inset: 0; color: #a78bfa; clip-path: inset(0 100% 0 0); pointer-events: none; }
.wkc-cr-wave-progress .wkc-wave path { stroke: url(#wkcWaveGrad); }
.wkc-cr-wave-progress { filter: drop-shadow(0 0 3px rgba(139, 92, 246, .55)); }   /* the played part glows softly */
.wkc-cr-dur { font-size: 13px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkc-cr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.wkc-cr-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .35); color: #cfe0ff; }
.wkc-cr-facts { font-size: 13px; color: var(--wkc-muted); margin-bottom: 12px; }
.wkc-cr-how { border-top: 1px solid var(--wkc-border); padding: 12px 0; }
.wkc-cr-how summary { cursor: pointer; font-weight: 800; font-size: 14px; }
.wkc-cr-how dl { margin: 10px 0 0; display: grid; gap: 6px; }
.wkc-cr-how-row { display: flex; gap: 12px; font-size: 13.5px; }
.wkc-cr-how-row dt { flex: 0 0 130px; color: var(--wkc-muted); }
.wkc-cr-how-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* S10c: Remix / Use This Sample on a creation, and external links (profiles, chat) */
.wkc-cr-reuse { border-top: 1px solid var(--wkc-border); padding: 12px 0; }
.wkc-cr-reuse-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wkc-cr-reuse-note { display: block; margin: 8px 0 0; line-height: 1.45; }
.wkc-cr-reuse-note.is-bad { color: var(--wkc-danger); font-weight: 600; }
.wkc-ext-link { color: #a5b4fc; text-decoration: underline; text-decoration-color: rgba(165, 180, 252, .45); text-underline-offset: 2px; overflow-wrap: anywhere; }
.wkc-ext-link:hover, .wkc-ext-link:focus-visible { color: #c7d2fe; text-decoration-color: currentColor; }
.wkc-cr-lyrics p { white-space: pre-line; color: #dfe4f7; line-height: 1.6; margin: 10px 0 0; overflow-wrap: anywhere; }
.wkc-cr-owner { border-top: 1px solid var(--wkc-border); margin-top: 8px; padding-top: 14px; }
.wkc-cr-owner-note {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; line-height: 1.45;
  border: 1px solid rgba(139, 92, 246, .45); background: var(--wkc-violet-soft); color: #ddd6fe; font-size: 13px;
}
.wkc-cr-edit-note { display: block; margin: -8px 0 14px 26px; }
.wkc-cr-owner-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Feed (/feed): the post list in the main column; the composer and Suggested
   producers in the right column (mockup 09_43_57) */
.wkc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wkc-feed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 24px; align-items: start; }
.wkc-feed-main { min-width: 0; }
.wkc-feed-rail {
  display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 12px;
  max-height: calc(100vh - 24px - var(--player-height, 80px)); overflow-y: auto; scrollbar-width: thin;   /* its end stays above the player */
}
.wkc-feed-rail > [data-wkc-feed-rail-sugg]:empty { display: none; }
.wkc-feed-tabs { margin: 0 0 16px; }
.wkc-feed-rail .wkc-feed-composer { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; margin: 0; }
.wkc-feed-composer-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wkc-feed-composer-avatar { display: inline-flex; flex: 0 0 auto; }
.wkc-feed-composer-avatar .wkc-avatar { width: 36px; height: 36px; }
.wkc-feed-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wkc-feed-end { text-align: center; color: var(--wkc-muted-2); font-size: 13px; margin: 18px 0 24px; }
.wkc-feed-empty .wkc-empty { padding-bottom: 18px; }
.wkc-feed-suggest-inline { max-width: 520px; margin: 0 auto 24px; padding: 14px 16px; border: 1px solid var(--wkc-border); border-radius: var(--wkc-radius); background: var(--wkc-panel); }
.wkc-rail-title { font-size: 15px; font-weight: 800; margin: 0 0 10px; color: var(--wkc-text); }
.wkc-feed-suggest { padding: 16px; margin: 0; max-width: none; }

/* A post: author row on top, then the art beside the music */
.wkc-post { background: var(--wkc-panel); border: 1px solid var(--wkc-border); border-radius: var(--wkc-radius); padding: 12px 16px 14px; min-width: 0; }
.wkc-post-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 10px; }
.wkc-post-author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; flex: 0 1 auto; }
.wkc-post-author .wkc-avatar { width: 40px; height: 40px; }
.wkc-post-author:focus-visible, .wkc-post-title:focus-visible, .wkc-post-art:focus-visible, .wkc-sugg-who:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 10px; }
/* "@handle · time": the handle is never cut (§2.2); when the column is
   narrow the time moves to the next line and a long handle wraps */
.wkc-post-sub { display: flex; flex-wrap: wrap; column-gap: 6px; min-width: 0; font-size: 12.5px; color: var(--wkc-muted); }
.wkc-post-handle { min-width: 0; overflow-wrap: anywhere; }
.wkc-post-when { flex: 0 0 auto; white-space: nowrap; }
.wkc-post-when::before { content: "·"; margin-right: 6px; color: var(--wkc-muted-2); }
.wkc-post-more { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--wkc-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.wkc-post-more:hover, .wkc-post-more[aria-expanded="true"] { background: rgba(255, 255, 255, .06); color: var(--wkc-text); }
.wkc-post-more:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-post-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.wkc-post-art { display: block; width: 100%; padding: 0; border: 1px solid var(--wkc-border); border-radius: 14px; overflow: hidden; background: #10142a; cursor: pointer; transition: transform .15s, border-color .15s; }
.wkc-post-art:hover { transform: translateY(-2px); border-color: var(--wkc-border-strong); }
.wkc-post-main { min-width: 0; }
.wkc-post-title { display: block; max-width: 100%; padding: 0; background: none; border: 0; color: var(--wkc-text); font: inherit; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.25; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.wkc-post-title:hover { color: #ddd6fe; }
.wkc-post-caption {
  margin: 6px 0 0; color: #cdd4ee; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wkc-post-player { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--wkc-border); background: rgba(5, 7, 16, .45); min-width: 0; }
.wkc-post-play { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; font-size: 14px; color: #fff; background: linear-gradient(135deg, #7c3aed, #4f46e5); box-shadow: 0 8px 20px rgba(79, 70, 229, .4); }
.wkc-post-play:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 3px; }
.wkc-post-wave { position: relative; flex: 1 1 120px; min-width: 0; height: 40px; cursor: pointer; }
.wkc-post-wave > .wkc-wave { position: absolute; inset: 0; }
.wkc-post-wave > .wkc-post-wave-base path { stroke: url(#wkcWaveGradDim); }
.wkc-post-wave-progress { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 3px rgba(139, 92, 246, .55)); }
.wkc-post-wave-progress .wkc-wave path { stroke: url(#wkcWaveGrad); }
.wkc-post-time { flex: 0 0 auto; font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkc-post-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wkc-post-chips .wkc-cr-chip { font-weight: 600; }
.wkc-post-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkc-post-vis { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--wkc-border-strong); font-size: 11.5px; color: var(--wkc-muted); }

/* Follow buttons, suggestions and member rows */
.wkc-follow { flex: 0 0 auto; border-color: rgba(139, 92, 246, .6); color: #ddd6fe; background: var(--wkc-violet-soft); }
.wkc-follow:hover { background: rgba(139, 92, 246, .28); }
.wkc-follow.is-following { background: transparent; border-color: var(--wkc-border-strong); color: var(--wkc-muted); }
/* On someone's profile, Follow is the page's primary action (Following stays quiet) */
.wkc-prof-actions .wkc-follow, .wkc-prof-actions .wkc-prof-more { min-height: 36px; }
.wkc-prof-actions .wkc-follow { padding: 0 20px; font-size: 13px; }
.wkc-prof-actions .wkc-follow:not(.is-following) { background: linear-gradient(135deg, #7c3aed, #4f46e5); border-color: transparent; color: #fff; }
.wkc-prof-actions .wkc-follow:not(.is-following):hover { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.wkc-sugg-list, .wkc-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wkc-sugg, .wkc-member { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 0; }
.wkc-sugg-who, .wkc-member-who { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wkc-sugg-who .wkc-avatar, .wkc-member-who .wkc-avatar { width: 40px; height: 40px; }
.wkc-sugg-why, .wkc-member-line { color: var(--wkc-muted-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a suggestion's reason is why it is there: two lines rather than cut */
.wkc-sugg-why { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
/* "@handle · N followers": only the count may be cut, never the handle */
.wkc-sugg-sub { display: flex; flex-wrap: wrap; column-gap: 6px; min-width: 0; font-size: 12px; color: var(--wkc-muted); }
.wkc-sugg-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-sugg-count::before { content: "·"; margin-right: 6px; color: var(--wkc-muted-2); }

/* The ⋯ menu (appended to body, fixed under its button) */
.wkc-menu { box-sizing: border-box; position: fixed; z-index: 10050; min-width: 200px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 12px; background: var(--wkc-panel-solid); border: 1px solid var(--wkc-border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); display: flex; flex-direction: column; }
.wkc-menu-item { box-sizing: border-box; display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--wkc-text); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-menu-item:hover, .wkc-menu-item:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.wkc-menu-item.is-danger { color: #fca5a5; }
.wkc-copy-buffer { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* Report sheet, Followers / Following lists, blocked accounts */
.wkc-report-reasons { border: 0; margin: 0 0 8px; padding: 0; }
.wkc-report-reasons legend { margin-bottom: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wkc-muted); }
.wkc-confirm .wkc-modal-actions { justify-content: flex-end; }        /* like every other dialog */
.wkc-report-reasons .wkc-check { margin: 0 0 8px; }
.wkc-list-modal { max-width: 480px; display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 48px)); }
.wkc-list-modal .wkc-field { margin-bottom: 10px; }
.wkc-list-body { overflow-y: auto; min-height: 120px; margin: 0 -6px; padding: 0 6px; }
.wkc-list-body .wkc-empty { padding: 28px 0; }
.wkc-stat[data-wkp-act] { cursor: pointer; }
.wkc-stat-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.wkc-stat[data-wkp-act]:hover dt, .wkc-stat-btn:hover { color: #ddd6fe; }
.wkc-stat-btn:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 6px; }
.wkc-blocked-list { margin-top: 6px; }
.wkc-blocked-list .wkc-user-name { color: var(--wkc-text); font-size: 13.5px; }
.wkc-blocked-list .wkc-user-handle { font-weight: 500; }
.wkc-feed-composer-input {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 14px; text-align: left; border-radius: 12px;
  border: 1px solid var(--wkc-border-strong); background: rgba(5, 7, 16, .7); color: var(--wkc-muted);
  font: inherit; font-size: 14px; cursor: pointer; overflow: hidden; white-space: normal; line-height: 1.3; padding-top: 8px; padding-bottom: 8px;
}
.wkc-feed-composer-input:hover { border-color: rgba(139, 92, 246, .55); color: var(--wkc-text); }
.wkc-feed-composer-input:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-feed-composer-types { display: flex; gap: 8px; flex-wrap: wrap; }
.wkc-feed-type { background: rgba(255, 255, 255, .03); border-color: var(--wkc-border-strong); color: var(--wkc-text); font-weight: 600; }
.wkc-feed-type:hover { border-color: rgba(139, 92, 246, .55); background: var(--wkc-violet-soft); }

/* Narrow columns: the component follows its own width (the sidebar stays) */
@container wkc (max-width: 960px) {
  .wkc-prof-head > .wkc-prof-stats { order: 5; flex-basis: 100%; padding-top: 0; margin-top: 4px; }
}
@container wkc (max-width: 900px) {
  /* one column: the tabs lead, then the composer and suggestions, then the
     posts (the rail is never under an endless list) */
  .wkc-feed-grid { grid-template-columns: minmax(0, 1fr); }
  .wkc-feed-main { display: contents; }               /* its rows join the one-column grid */
  .wkc-feed-main > * { min-width: 0; }
  .wkc-feed-tabs { order: -2; }
  .wkc-feed-rail { order: -1; position: static; max-height: none; overflow: visible; margin-bottom: 16px; gap: 12px; }
  .wkc-feed-rail .wkc-feed-composer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; }
  .wkc-feed-rail .wkc-feed-composer-row { flex: 1 1 180px; }
  .wkc-feed-suggest { padding: 12px; }
  .wkc-feed-suggest .wkc-rail-title { margin-bottom: 8px; }
  .wkc-feed-suggest .wkc-sugg-list { flex-direction: row; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  /* a strip of cards: Follow under the text, so the reason and handle get the card's width */
  .wkc-feed-suggest .wkc-sugg { flex: 0 0 min(220px, 85%); flex-direction: column; align-items: stretch; gap: 8px; scroll-snap-align: start; padding: 8px 10px; border: 1px solid var(--wkc-border); border-radius: 12px; }
  .wkc-feed-suggest .wkc-sugg > .wkc-follow { align-self: stretch; }
}
@container wkc (max-width: 640px) {
  .wkc-post-body { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .wkc-post-title { font-size: 16px; }
}
@container wkc (max-width: 460px) {
  .wkc-post { padding: 12px; }
  .wkc-post-body { grid-template-columns: minmax(0, 1fr); }
  .wkc-post-art { max-width: 220px; }
  .wkc-post-head > .wkc-spacer { display: none; }
  .wkc-post-author { flex: 1 1 0; }
  .wkc-post-player { padding: 8px; gap: 8px; }
}
@container wkc (max-width: 300px) {
  .wkc-post-wave { display: none; }         /* too narrow to read as a waveform: the length shows instead */
  .wkc-post-play { width: 34px; height: 34px; }
  .wkc-post-author .wkc-av, .wkc-post-author .wkc-avatar { display: none; }   /* the name and the whole @handle get the room (and no stray presence dot) */
  .wkc-post-head { flex-wrap: wrap; row-gap: 8px; }
  .wkc-post-author { flex: 1 0 100%; }                   /* its own row: Follow and ⋯ go under it */
  .wkc-post-more { margin-left: auto; }
  .wkc-sugg-who .wkc-avatar, .wkc-member-who .wkc-avatar { width: 32px; height: 32px; }
  .wkc-feed-rail .wkc-feed-composer-row { display: none; }        /* its chip opens the same picker */
  .wkc-feed-suggest .wkc-sugg-who .wkc-avatar { display: none; }  /* the name gets the card's width */
}
@container wkc (max-width: 820px) {
  /* art and music side by side down to 560 px: the play button and waveform stay in view */
  .wkc-cr-layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; }
  .wkc-cr-title { font-size: 28px; }
}
@container wkc (max-width: 560px) {
  .wkc-cr-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wkc-cr-art { max-width: 320px; }
}
@container wkc (max-width: 480px) {
  .wkc-pubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wkc-cr-title { font-size: 24px; }
  .wkc-pubcard-play { width: 34px; height: 34px; right: 6px; bottom: 6px; font-size: 13px; opacity: 1; transform: none; }
  .wkc-pubcard-vis { left: 6px; top: 6px; font-size: 10px; padding: 2px 6px; }
  .wkc-cr-how-row dt { flex-basis: 96px; }
  .wkc-tabs-row { flex-wrap: wrap; }
  .wkc-prof-head { margin-top: -44px; padding: 0 16px; gap: 12px; }
  .wkc-prof-avatar .wkc-avatar { width: 88px; height: 88px; }
  .wkc-prof-id { flex-basis: 100%; padding-top: 0; }
  .wkc-prof-actions { padding-top: 0; }
  .wkc-prof-name { font-size: 24px; }
  .wkc-prof-bio, .wkc-prof-meta, .wkc-prof-stats { margin-left: 16px; margin-right: 16px; }
  .wkc-prof-stats { gap: 10px 18px; }
}
@container wkc (max-width: 300px) {
  .wkc-pubgrid { grid-template-columns: minmax(0, 1fr); }
  .wkc-pubcard-vis { display: none; }
}
/* The publish modal is not inside a page container: it follows the viewport */
@media (max-width: 760px) {
  .wkc-pub-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "cover" "fields" "preview"; }
  .wkc-pub-cover { max-width: 200px; }
}
@media (max-width: 639px) {
  .wkc-pub-preview-row dt { flex-basis: 96px; }
  /* Phones: the dialog's own buttons sit clear of the app's corner Backend
     pill (bottom right, above every overlay), which the chrome owns. */
  .wkc-overlay > .wkc-modal { margin-bottom: 56px; }         /* a dialog's end can scroll above the pill */
  .wkc-pub-modal:not(.wkc-pub-modal-status):not(.wkc-pub-picker) > .wkc-modal-actions,
  .wkc-editor .wkc-modal-actions { bottom: -18px; margin: 18px -16px -18px; padding: 12px 16px 64px; }
}
@media (hover: none) {
  .wkc-pubcard-play { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wkc-pubcard-art, .wkc-pubcard-play, .wkc-post-art { transition: none; }
  .wkc-post-art:hover { transform: none; }
  .wkc-pub-spinner { animation: none; }
}

/* ── S5: the action row, comments, Insights, Saved ───────────────────────── */
/* One action row wherever a creation shows (feed card, creation page,
   profile grid): Like, Comments, Share (Copy Link), Save. Music first: quiet
   until used, counts only when above 0. */
.wkc-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.wkc-act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--wkc-muted); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; font-variant-numeric: tabular-nums; transition: color .15s, background .15s;
}
.wkc-act:hover { color: var(--wkc-text); background: rgba(255, 255, 255, .05); }
.wkc-act:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 1px; }
.wkc-act:disabled { opacity: .4; cursor: default; background: none; color: var(--wkc-muted); }
.wkc-ico-svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.wkc-act-like.is-on { color: #f472b6; }
.wkc-act-save.is-on { color: #c4b5fd; }
.wkc-act-like.is-on .wkc-ico-svg, .wkc-act-save.is-on .wkc-ico-svg { fill: currentColor; }
.wkc-act-n:empty { display: none; }
.wkc-post-foot { flex-wrap: wrap; margin-top: 8px; margin-left: -10px; gap: 4px 10px; }
.wkc-post-plays { margin-left: auto; }
/* comment_preview under a feed card's action row: one line each, the block opens the comments */
.wkc-post-cprev { display: block; width: 100%; min-width: 0; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; color: #cdd4ee; font: inherit; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer; }
.wkc-post-cprev-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-post-cprev-who { font-weight: 750; color: var(--wkc-text); margin-right: 6px; }
.wkc-post-cprev:hover .wkc-post-cprev-line { color: var(--wkc-text); }
.wkc-post-cprev:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 6px; }
.wkc-cr-body > .wkc-actions { margin: 4px 0 10px -10px; }
.wkc-actions.is-compact { gap: 0; margin: 2px 0 0 -8px; }
.wkc-actions.is-compact .wkc-act { min-height: 30px; padding: 0 8px; font-size: 12px; gap: 5px; }
.wkc-actions.is-compact .wkc-ico-svg { width: 16px; height: 16px; }
.wkc-actions.is-compact .wkc-act-save { margin-left: auto; }

/* Comments (creation page) */
.wkc-comments { border-top: 1px solid var(--wkc-border); margin-top: 12px; padding-top: 16px; }
.wkc-cm-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wkc-cm-title { font-size: 17px; font-weight: 800; margin: 0; }
.wkc-cm-count { color: var(--wkc-muted); font-weight: 700; margin-left: 4px; }
.wkc-cm-sort { margin: 0; }
.wkc-cm-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 12px 0 8px; }
.wkc-cm-form.is-reply { margin: 8px 0 4px; }
.wkc-cm-me { display: inline-flex; padding-top: 2px; }
.wkc-cm-field { min-width: 0; }
.wkc-cm-field textarea {
  box-sizing: border-box; display: block; width: 100%; min-height: 40px; max-height: 180px; field-sizing: content; resize: vertical;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--wkc-border-strong); background: rgba(5, 7, 16, .7);
  color: var(--wkc-text); font: inherit; font-size: 14px; line-height: 1.45;
}
.wkc-cm-field textarea:focus { outline: 2px solid rgba(34, 211, 238, .55); outline-offset: 1px; }
.wkc-cm-field .wkc-form-error { margin: 4px 0 0; }
.wkc-cm-form-actions { display: flex; gap: 6px; align-items: center; padding-top: 4px; }
.wkc-cm-off { margin: 12px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--wkc-border-strong); color: var(--wkc-muted); font-size: 13.5px; }
.wkc-cm-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wkc-cm-replies { margin-top: 10px; gap: 10px; }
.wkc-cm { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; min-width: 0; }
.wkc-cm.is-reply { grid-template-columns: 28px minmax(0, 1fr); }
.wkc-cm-avatar { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; }
.wkc-cm-avatar .wkc-avatar { width: 36px; height: 36px; }
.wkc-cm.is-reply .wkc-cm-avatar .wkc-avatar { width: 28px; height: 28px; }
.wkc-cm-avatar.is-gone { width: 36px; height: 36px; border-radius: 50%; border: 1px dashed var(--wkc-border-strong); box-sizing: border-box; cursor: default; }
.wkc-cm-main { min-width: 0; }
.wkc-cm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* the @handle is always shown whole beside the name (§2.2); only the name may be cut */
.wkc-cm-who { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.wkc-cm-who .wkc-user-name { font-weight: 750; font-size: 13.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-cm-who .wkc-user-handle { font-size: 12.5px; overflow-wrap: anywhere; }
.wkc-cm-when { font-size: 12px; color: var(--wkc-muted-2); }
.wkc-cm-body { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: #dfe4f7; white-space: pre-wrap; overflow-wrap: anywhere; }
.wkc-cm-removed { margin: 6px 0 0; font-size: 13.5px; font-style: italic; color: var(--wkc-muted); }
.wkc-cm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; min-height: 26px; min-width: 0; }
.wkc-cm-link { padding: 0; border: 0; background: none; color: var(--wkc-muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wkc-cm-link:hover { color: #ddd6fe; }
.wkc-cm-more { width: 28px; height: 26px; border-radius: 8px; border: 0; background: none; color: var(--wkc-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.wkc-cm-more:hover, .wkc-cm-more[aria-expanded="true"] { background: rgba(255, 255, 255, .06); color: var(--wkc-text); }
.wkc-cm-link:focus-visible, .wkc-cm-more:focus-visible, .wkc-cm-who:focus-visible, .wkc-mention:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 6px; }
.wkc-cm-thread { margin-top: 4px; }
.wkc-cm-note { font-size: 12.5px; color: var(--wkc-muted); margin: 8px 0; }
.wkc-cm-empty { padding: 18px 0; }
.wkc-mention { padding: 0; border: 0; background: none; color: #c4b5fd; font: inherit; font-weight: 700; cursor: pointer; }
.wkc-mention:hover { text-decoration: underline; }

/* Insights (the owner's creation page; only they see it) */
.wkc-cr-insights:empty { display: none; }
.wkc-ins { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--wkc-border); background: rgba(5, 7, 16, .35); }
.wkc-ins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wkc-ins-title { margin: 0; font-size: 14px; font-weight: 800; }
.wkc-ins-note { font-size: 12px; color: var(--wkc-muted-2); }
.wkc-ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px 12px; margin: 10px 0; }
.wkc-ins-cell dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--wkc-muted); }
.wkc-ins-cell dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wkc-ins-spark { margin: 0; }
.wkc-ins-spark svg { display: block; width: 100%; height: 48px; }
.wkc-ins-spark polyline { stroke: #a78bfa; }
.wkc-ins-spark figcaption { font-size: 12px; color: var(--wkc-muted); margin-top: 4px; }

/* Saved (own profile, private) */
.wkc-saved-note { margin: 0 0 12px; font-size: 12.5px; color: var(--wkc-muted); }
.wkc-pubcard-by { font-size: 12px; font-weight: 600; color: #c4b5fd; overflow-wrap: anywhere; }   /* the whole @handle, never cut */

@container wkc (max-width: 460px) {
  .wkc-act { padding: 0 8px; }
  .wkc-cm-form { grid-template-columns: minmax(0, 1fr) auto; }
  .wkc-cm-me { display: none; }
}
@container wkc (max-width: 300px) {
  .wkc-act-label { display: none; }
  .wkc-cm-form { grid-template-columns: minmax(0, 1fr); }
  /* a narrow column: the comment text gets the width (name and @handle stay) */
  .wkc-cm, .wkc-cm.is-reply { grid-template-columns: minmax(0, 1fr); }
  .wkc-cm-avatar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wkc-act { transition: none; }
}

/* ── Presence (S6): dots on avatars, profile status ───────────────────── */
/* online green, Create / Voice Studio purple, listening cyan, library /
   browsing blue, away amber, offline grey (never red). A private member
   gets no dot at all. */
.wkc-av { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; }
.wkc-pres-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: #6f7898; box-shadow: 0 0 0 2px var(--wkc-bg);
}
.wkc-av > .wkc-pres-dot { position: absolute; right: -1px; bottom: -1px; }
.wkc-av > .wkc-pres-dot.is-offline { display: none; }      /* small avatars mark activity only; "Last seen" lives on the profile */
.wkc-pres-dot.is-online { background: #34d399; color: #34d399; }
.wkc-pres-dot.is-in_create, .wkc-pres-dot.is-in_voice_studio { background: #a78bfa; color: #a78bfa; }
.wkc-pres-dot.is-listening { background: #22d3ee; color: #22d3ee; }
.wkc-pres-dot.is-in_library, .wkc-pres-dot.is-browsing { background: #60a5fa; color: #60a5fa; }
.wkc-pres-dot.is-away { background: #fbbf24; color: #fbbf24; }
.wkc-pres-dot.is-offline { background: #6f7898; color: #6f7898; }
.wkc-pres-dot.is-online, .wkc-pres-dot.is-in_create, .wkc-pres-dot.is-in_voice_studio, .wkc-pres-dot.is-listening,
.wkc-pres-dot.is-in_library, .wkc-pres-dot.is-browsing { animation: wkc-pres-pulse 2.6s ease-in-out infinite; }
@keyframes wkc-pres-pulse {        /* the halo takes the dot's own colour */
  0%, 100% { box-shadow: 0 0 0 2px var(--wkc-bg); }
  50% { box-shadow: 0 0 0 2px var(--wkc-bg), 0 0 0 5px color-mix(in srgb, currentColor 22%, transparent); }
}
/* One's own status while hidden from others: a hollow ring, never the dot others would see. */
.wkc-pres-dot.is-private { background: transparent; box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px var(--wkc-bg); animation: none; opacity: .85; }
.wkc-prof-avatar { position: relative; line-height: 0; }
.wkc-prof-avatar > .wkc-pres-dot { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; box-shadow: 0 0 0 4px var(--wkc-bg); }
.wkc-prof-avatar > .wkc-pres-dot.is-private { box-shadow: inset 0 0 0 3px currentColor, 0 0 0 4px var(--wkc-bg); }
.wkc-prof-status { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: var(--wkc-muted); flex-wrap: wrap; }
.wkc-prof-status .wkc-pres-dot { width: 8px; height: 8px; box-shadow: none; animation: none; }
.wkc-prof-status .wkc-pres-dot.is-private { box-shadow: inset 0 0 0 2px currentColor; }
.wkc-prof-status-note { font-size: 11.5px; color: var(--wkc-muted-2); border: 1px solid var(--wkc-border); border-radius: 999px; padding: 1px 8px; }
@media (prefers-reduced-motion: reduce) {
  .wkc-pres-dot { animation: none !important; }
}

/* ── Live Chat (/chat), Messages (/messages), the compact rail (S6) ──── */
.wkc-chat-page, .wkc-dm-page { max-width: 1320px; }
.wkc-chat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin: 4px 0 16px; }
.wkc-chat-title { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.wkc-chat-sub { margin: 4px 0 0; color: var(--wkc-muted); font-size: 13.5px; }
.wkc-chat-online { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #a7f3d0; white-space: nowrap; }
.wkc-chat-online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.wkc-chat-online[hidden] { display: none; }
.wkc-chat-online.is-jump { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; }   /* jumps to Online Now */
.wkc-chat-online.is-jump:hover, .wkc-chat-online.is-jump:focus-visible { text-decoration: underline; }
.wkc-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.wkc-chat-main, .wkc-dm-thread { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-width: 0; position: relative; }
.wkc-chat-tabs { margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--wkc-border); }
.wkc-tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--wkc-cyan); vertical-align: middle; }
.wkc-chat-scroll {
  height: min(62vh, 640px); min-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 6px 8px 0; border-bottom: 1px solid var(--wkc-border);
  display: flex; flex-direction: column;              /* a short conversation sits by the composer */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
.wkc-chat-scroll.is-dm { height: min(58vh, 600px); }
.wkc-chat-scroll.is-compact { height: 340px; min-height: 0; }
.wkc-msgs { list-style: none; margin: auto 0 0; padding: 0 12px; }
.wkc-msgs:has(> .wkc-chat-empty:only-child) { margin: auto 0; }
.wkc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 9px 8px; border-radius: 12px; }
.wkc-msg:hover { background: rgba(255, 255, 255, .03); }
.wkc-msg-avatar { border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; align-self: start; }
.wkc-msg-main { min-width: 0; }
.wkc-msg-head { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.wkc-msg-name {
  border: 0; padding: 0; background: none; color: var(--wkc-text); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkc-msg-name:hover { text-decoration: underline; }
.wkc-msg-handle { color: #c4b5fd; font-size: 12px; overflow-wrap: anywhere; }   /* the @handle is never cut */
.wkc-msg-time { color: #8089ab; font-size: 11.5px; white-space: nowrap; }        /* 11.5 px: AA contrast on every chat surface */
.wkc-msg-more {
  margin-left: auto; border: 0; background: none; color: var(--wkc-muted); cursor: pointer; font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 8px; opacity: 0;
}
.wkc-msg:hover .wkc-msg-more, .wkc-msg-more:focus-visible, .wkc-msg-more[aria-expanded="true"] { opacity: 1; }
.wkc-msg-body { margin: 3px 0 0; max-width: 72ch; font-size: 14px; line-height: 1.5; color: #e7e9f7; white-space: pre-wrap; overflow-wrap: anywhere; }
.wkc-msg.is-mine .wkc-msg-name { color: #ddd6fe; }
.wkc-msg-body .wkc-mention {
  border: 0; padding: 0; background: none; color: #a5b4fc; font: inherit; cursor: pointer; text-decoration: underline;
  overflow-wrap: anywhere; text-align: left;
}
.wkc-chat-link {         /* a link to one of this community's creations: a short chip (the full URL is its title) */
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 999px; vertical-align: baseline;
  background: var(--wkc-violet-soft); border: 1px solid rgba(139, 92, 246, .35); color: #ddd6fe;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 20px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.wkc-chat-link:hover, .wkc-chat-link:focus-visible { border-color: rgba(167, 139, 250, .7); }
.wkc-chat-empty, .wkc-online-empty, .wkc-dm-empty, .wkc-dm-pick { list-style: none; color: var(--wkc-muted); font-size: 14px; text-align: center; padding: 36px 16px; }
.wkc-dm-pick-icon { display: block; width: 30px; height: 30px; margin: 0 auto 10px; opacity: .55; }
.wkc-online-empty { padding: 18px 8px; font-size: 13px; }
.wkc-chat-older { list-style: none; text-align: center; padding: 6px 0 2px; }
.wkc-chat-jump {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 2;
  border: 1px solid var(--wkc-border-strong); background: var(--wkc-panel-solid); color: var(--wkc-text);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.wkc-chat-jump[hidden] { display: none; }
.wkc-chat-card {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 6px; max-width: 520px;
  padding: 10px; border-radius: 14px; border: 1px solid var(--wkc-border-strong);
  background: linear-gradient(135deg, rgba(139, 92, 246, .10), rgba(59, 130, 246, .06));
}
.wkc-chat-card.is-unavailable { display: block; color: var(--wkc-muted); font-size: 13px; font-style: italic; }
.wkc-chat-card-art { border: 0; padding: 0; background: none; cursor: pointer; width: 76px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.wkc-chat-card-art .wkc-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkc-chat-card-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.wkc-chat-card-title {
  border: 0; padding: 0; background: none; color: var(--wkc-text); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.wkc-chat-card-by { font-size: 12px; color: var(--wkc-muted); overflow-wrap: anywhere; }
.wkc-chat-card-player { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.wkc-chat-card-play {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 11px;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
}
.wkc-chat-card-wave { flex: 1 1 auto; min-width: 40px; height: 26px; }
.wkc-chat-card-wave path { stroke: rgba(167, 139, 250, .75); }
.wkc-chat-card-dur { font-size: 11.5px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkc-chat-compose { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px 14px; position: relative; }
.wkc-chat-compose.is-disabled { display: block; color: var(--wkc-muted); font-size: 13.5px; text-align: center; padding: 16px; }
.wkc-chat-input {
  resize: none; min-height: 40px; max-height: 140px; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.4;
  color: var(--wkc-text); background: rgba(255, 255, 255, .04); border: 1px solid var(--wkc-border-strong); width: 100%;
}
.wkc-chat-input:focus { outline: 2px solid rgba(34, 211, 238, .55); outline-offset: 1px; }
.wkc-chat-send { height: 40px; }
.wkc-chat-send:disabled { opacity: .5; cursor: default; }
.wkc-chat-error { grid-column: 1 / -1; margin: 0; color: var(--wkc-danger); font-size: 12.5px; font-weight: 600; }
.wkc-chat-error:empty { display: none; }
.wkc-chat-emoji-wrap { position: relative; }
.wkc-chat-emoji-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--wkc-border-strong); background: rgba(255, 255, 255, .04);
  color: var(--wkc-text); font-size: 18px; cursor: pointer;
}
.wkc-chat-emoji {
  position: absolute; left: 0; bottom: 48px; z-index: 5; width: 256px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px;
  background: var(--wkc-panel-solid); border: 1px solid var(--wkc-border-strong); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.wkc-chat-emoji[hidden] { display: none; }
.wkc-chat-emoji-item { border: 0; background: none; font-size: 20px; line-height: 1; padding: 6px 0; text-align: center; border-radius: 8px; cursor: pointer; }
.wkc-chat-emoji-item:hover, .wkc-chat-emoji-item:focus-visible { background: rgba(255, 255, 255, .08); }
.wkc-chat-side { padding: 16px; position: sticky; top: 12px; }
.wkc-chat-side-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.wkc-chat-side-count { color: var(--wkc-muted); font-weight: 700; font-size: 12.5px; }
.wkc-chat-side-count[hidden] { display: none; }
.wkc-online-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wkc-online-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wkc-online-who {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; padding: 6px 4px; border-radius: 10px;
}
.wkc-online-who:hover { background: rgba(255, 255, 255, .04); }
.wkc-online-who .wkc-user-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-online-status { display: block; font-size: 12px; color: var(--wkc-muted); }
.wkc-online-row.is-self { opacity: .8; }                  /* "You": shown only to the viewer, not a link */
.wkc-online-row.is-self .wkc-online-who { cursor: default; }
.wkc-online-row.is-self .wkc-online-who:hover { background: none; }

/* Messages */
.wkc-dm-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 901px) {         /* the landing (no conversation picked) reads as a two-pane page, not two strips */
  .wkc-dm-layout { align-items: stretch; }
  .wkc-dm-list, .wkc-dm-thread { min-height: min(72vh, 680px); }
  .wkc-dm-thread:has(> .wkc-dm-pick) { display: grid; place-items: center; }
}
.wkc-dm-list { padding: 8px; max-height: min(74vh, 760px); overflow-y: auto; }
.wkc-dm-threads { list-style: none; margin: 0; padding: 0; }
.wkc-dm-row {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  padding: 10px; border-radius: 12px; cursor: pointer; min-width: 0;
}
.wkc-dm-row:hover { background: rgba(255, 255, 255, .04); }
.wkc-dm-row.is-active { background: var(--wkc-violet-soft); }
.wkc-dm-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wkc-dm-row-top, .wkc-dm-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wkc-dm-row-top .wkc-user-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.wkc-dm-row-time { font-size: 11.5px; color: #8089ab; white-space: nowrap; }
.wkc-dm-row-preview { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--wkc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-dm-row.is-unread .wkc-dm-row-preview { color: var(--wkc-text); font-weight: 600; }
.wkc-dm-unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wkc-violet); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.wkc-dm-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--wkc-border); min-width: 0; }
.wkc-dm-peer { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.wkc-dm-peer-status { color: var(--wkc-muted); }
.wkc-dm-back { display: none; border: 0; background: none; color: var(--wkc-text); font-size: 18px; cursor: pointer; padding: 4px 8px; }

/* Share sheets (⋯ Share to Live Chat, Send in a message) and New message */
.wkc-choice-list, .wkc-sendto-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; max-height: 320px; overflow-y: auto; }
.wkc-choice-item, .wkc-sendto-row {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; background: rgba(255, 255, 255, .03);
  color: var(--wkc-text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer; min-width: 0;
}
.wkc-choice-item::before { content: "#"; color: var(--wkc-muted-2); font-weight: 800; }
.wkc-choice-item:hover, .wkc-sendto-row:hover, .wkc-choice-item:focus-visible, .wkc-sendto-row:focus-visible {
  border-color: var(--wkc-border-strong); background: var(--wkc-violet-soft);
}
.wkc-sendto-empty { margin: 8px 0; color: var(--wkc-muted); font-size: 13px; }
.wkc-overlay.is-busy .wkc-sendto { opacity: .7; pointer-events: none; }

/* The compact rail (for page rails: Challenges, later) */
.wkc-chat-rail { padding: 14px 0 10px; position: relative; overflow: hidden; }
.wkc-chat-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 8px; }
.wkc-chat-rail-title { margin: 0; font-size: 16px; font-weight: 800; }
.wkc-chat-rail .wkc-chat-tabs { padding: 0 12px 10px; }
.wkc-chat-rail .wkc-msg { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 5px 6px; }
.wkc-chat-rail .wkc-msg-name { font-size: 13px; }
.wkc-chat-rail .wkc-msg-body { font-size: 13px; line-height: 1.4; margin-top: 1px; }
/* One-line heads: the name, its @handle (always, §2.2: names aren't unique; never cut or hidden: a long
   name gives way instead), a badge that may shorten, then the time on the right */
.wkc-chat-rail .wkc-msg-head { flex-wrap: nowrap; }
.wkc-chat-rail .wkc-msg-handle { display: inline; flex: 0 0 auto; font-size: 11.5px; color: var(--wkc-muted); white-space: nowrap; }
.wkc-chat-rail .wkc-msg-name { min-width: 2.5em; flex: 0 1 auto; }
.wkc-chat-rail .wkc-msg-head .wkc-badge { flex: 0 1 auto; min-width: 0; display: inline-block; overflow: hidden; text-overflow: ellipsis; }
.wkc-chat-rail .wkc-msg-time { margin-left: auto; }
.wkc-chat-rail .wkc-msg-more { margin-left: 0; }
.wkc-chat-rail .wkc-chat-card { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 6px 8px; margin-top: 4px; align-items: center; }
.wkc-chat-rail .wkc-chat-card-art { width: 40px; border-radius: 8px; }
.wkc-chat-rail .wkc-chat-card-main { flex-direction: row; align-items: center; gap: 8px; }
.wkc-chat-rail .wkc-chat-card-title { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.wkc-chat-rail .wkc-chat-card-by { display: none; }
.wkc-chat-rail .wkc-chat-card-player { width: auto; flex: 0 0 auto; }
.wkc-chat-rail .wkc-chat-card-play { width: 26px; height: 26px; }
.wkc-chat-rail .wkc-chat-card-wave { display: none; }              /* too narrow for real bars: the length shows */
.wkc-chat-rail .wkc-chat-card-main > .wkc-btn-small { display: none; }   /* the art and the title open the post */
.wkc-chat-rail .wkc-chat-jump { bottom: 110px; }
.wkc-chat-rail-open { display: block; margin: 4px 16px 0 auto; border: 0; background: none; color: #a5b4fc; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }

@media (min-width: 1101px) {
  .wkc-chat-head .wkc-chat-online { display: none !important; }   /* Online Now beside the chat shows the count */
}
@media (max-width: 1100px) {
  .wkc-chat-layout { grid-template-columns: minmax(0, 1fr); }
  .wkc-chat-side { position: static; }
}
@media (max-width: 900px) {
  .wkc-dm-layout { grid-template-columns: minmax(0, 1fr); }
  .wkc-dm-layout.has-thread .wkc-dm-list { display: none; }
  .wkc-dm-layout:not(.has-thread) .wkc-dm-thread { display: none; }
  .wkc-dm-back { display: inline-block; }
}
@media (max-width: 639px) {
  .wkc-chat-title { font-size: 22px; }
  /* The list fits the screen above the player, and the composer stays in
     view: pinned above the fixed player bar (or the Backend pill before
     anything played) while the page scrolls. clip, not hidden: hidden would
     make the card a scroll container and the pinning would never apply. */
  .wkc-chat-main, .wkc-dm-thread { overflow: clip; }
  /* --wkc-phone-top: where the page starts (the shared top bar above it, S9; 68 px was the phone menu button's room) */
  .wkc-chat-scroll { height: calc(100dvh - 262px - var(--wkc-phone-top, 68px) - var(--player-height, 80px)); min-height: 220px; }
  .wkc-chat-scroll.is-dm { height: calc(100dvh - 322px - var(--wkc-phone-top, 68px) - var(--player-height, 80px)); min-height: 220px; }
  .wkc-chat-compose {
    position: sticky; bottom: var(--wkc-pane-clear, 62px); z-index: 3; background: var(--wkc-panel-solid); border-top: 1px solid var(--wkc-border);
    grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px;
  }
  .wkc-chat-send { padding: 0 14px; }
  .wkc-msg-handle { flex: 0 0 auto; font-size: 11.5px; white-space: nowrap; }   /* one-line heads keep the @handle whole (§2.2): a long name gives way */
  .wkc-msg-head { flex-wrap: nowrap; }
  .wkc-msg-head .wkc-badge { flex: 0 1 auto; min-width: 0; display: inline-block; overflow: hidden; text-overflow: ellipsis; }
  .wkc-msg-name { min-width: 2.5em; flex: 0 1 auto; }
  .wkc-msg-time { margin-left: auto; }
  .wkc-msg-more { margin-left: 0; }
  .wkc-chat-card { grid-template-columns: 56px minmax(0, 1fr); }
  .wkc-chat-card-art { width: 56px; }
  .wkc-chat-card-wave { display: none; }       /* too narrow for real bars: the length shows instead (as on feed cards) */
  .wkc-msg-more { opacity: 1; }
}
@media (hover: none) {
  .wkc-msg-more { opacity: 1; }
}

/* ── Live Chat and Messages fit the window above the player (S6) ──────── */
/* The one place that reads the app's player and page chrome (the player and
   sidebar owners, H6 / H13: a change to the player's markup only needs these
   rules): --wkc-pane-clear is how far the chat and DM composers stay above
   the window's bottom edge (the player bar, which every community page shows,
   idle or playing, with the Backend pill docked in it), --wkc-page-top where
   the page starts. */
body.community-active:has(.wkc-chat-page, .wkc-dm-page) { --wkc-page-top: 24px; --wkc-pane-clear: calc(var(--player-height, 80px) + 20px); }
@media (max-width: 1023px) {
  body.community-active:has(.wkc-chat-page, .wkc-dm-page) { --wkc-page-top: 16px; }
}
@media (max-width: 639px) {
  body.community-active:has(.wkc-chat-page, .wkc-dm-page) { --wkc-pane-clear: calc(var(--player-height, 80px) + 26px); }
}
/* Toasts rise above the composer on these two pages: wkx-shell.css's one
   toast column starts there (--wk-toast-base from --wkc-pane-clear). */
/* Wide /chat, and Messages from 640 px: the page is exactly the window above
   the composer's clearance (no page scroll, no double bottom padding); the
   message list takes whatever the header, tabs and composer leave. */
@media (min-width: 1101px) {
  body.community-active:has(.wkc-chat-page) .workspace,
  body.community-active:has(.wkc-chat-page) .main { padding-bottom: 0 !important; }
  .wkc-chat-page { display: flex; flex-direction: column; height: max(460px, calc(100dvh - var(--wkc-page-top) - var(--wkc-pane-clear))); }
  .wkc-chat-page > .wkc-chat-head { flex: 0 0 auto; }
  .wkc-chat-page > .wkc-chat-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .wkc-chat-page .wkc-chat-main { min-height: 0; }
  .wkc-chat-page .wkc-chat-scroll { flex: 1 1 0; height: auto; min-height: 120px; }
  .wkc-chat-page .wkc-chat-side { position: static; align-self: start; max-height: 100%; overflow-y: auto; }
}
@media (min-width: 1440px) {
  .wkc-chat-layout { grid-template-columns: minmax(0, 1fr) 340px; }      /* §9.7: a 320-360 px rail */
}
@media (min-width: 640px) {
  body.community-active:has(.wkc-dm-page) .workspace,
  body.community-active:has(.wkc-dm-page) .main { padding-bottom: 0 !important; }
  .wkc-dm-page { display: flex; flex-direction: column; height: max(460px, calc(100dvh - var(--wkc-page-top) - var(--wkc-pane-clear))); }
  .wkc-dm-page > .wkc-chat-head { flex: 0 0 auto; }
  .wkc-dm-page > .wkc-dm-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .wkc-dm-page .wkc-dm-list { max-height: none; min-height: 0; }
  .wkc-dm-page .wkc-dm-thread { min-height: 0; }
  .wkc-dm-page .wkc-chat-scroll.is-dm { flex: 1 1 0; height: auto; min-height: 120px; }
}
/* Narrower /chat (Online Now stacked below): the composer stays in view above
   the clearance while the page scrolls down to Online Now. */
@media (min-width: 640px) and (max-width: 1100px) {
  .wkc-chat-page .wkc-chat-main { overflow: clip; }
  .wkc-chat-page .wkc-chat-compose { position: sticky; bottom: var(--wkc-pane-clear); z-index: 3; background: var(--wkc-panel-solid); border-top: 1px solid var(--wkc-border); }
  .wkc-chat-page .wkc-chat-scroll { height: clamp(240px, calc(100dvh - var(--wkc-page-top) - 250px - var(--wkc-pane-clear)), 640px); }
}
/* A conversation open on a narrow screen: the thread gets the room (its head has the way back). */
@media (max-width: 900px) {
  .wkc-dm-page:has(.wkc-dm-layout.has-thread) .wkc-chat-sub,
  .wkc-dm-page:has(.wkc-dm-layout.has-thread) [data-wkc-dm-new] { display: none; }
  .wkc-dm-page:has(.wkc-dm-layout.has-thread) .wkc-chat-head { margin-bottom: 10px; }
}
@media (max-width: 639px) {
  .wkc-dm-page:has(.wkc-dm-layout.has-thread) .wkc-chat-scroll.is-dm { height: calc(100dvh - 192px - var(--wkc-phone-top, 68px) - var(--player-height, 80px)); }
}
/* ── Notifications (S7): /notifications' Community | Library strip and the
   Community tab (wkx-notify.js). The page header (.notifications-*) is the
   household page's own, styled by index.html under body.notifications-active. */
.wkc-nsrc {
  display: inline-flex; gap: 6px; padding: 4px; margin: 0 0 18px; width: max-content; max-width: 100%;
  border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
}
.wkc-nsrc-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 7px;
  background: transparent; color: rgba(218, 221, 232, .65); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wkc-nsrc-tab:hover { color: #fff; }
.wkc-nsrc-tab.is-active { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
.wkc-nsrc-tab:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-nsrc-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wkc-violet); color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.wkc-nsrc-count[hidden] { display: none; }
.wkc-notif-page { color: var(--wkc-text); min-width: 0; }
.wkc-notif-page *, .wkc-notif-body * { box-sizing: border-box; }
.wkc-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wkc-notif {
  position: relative; display: flex; align-items: center; gap: 4px; min-width: 0;
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.wkc-notif:hover { border-color: rgba(139, 92, 246, .26); }
.wkc-notif.is-unread { background: rgba(139, 92, 246, .06); border-color: rgba(139, 92, 246, .26); }
.wkc-notif-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: transparent; border: 0; border-radius: 12px; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.wkc-notif-main:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: -2px; }
.wkc-notif-av { flex: none; width: 44px; height: 44px; display: inline-flex; }
.wkc-notif-av .wkc-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.wkc-notif-sys {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #8b5cf6, #4f46e5); color: #fff;
}
.wkc-notif-sys.is-mod { background: rgba(154, 163, 192, .16); color: var(--wkc-muted); }    /* a notice, not an award */
.wkc-notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wkc-notif-line { font-size: 14px; line-height: 1.45; color: var(--wkc-text); overflow-wrap: anywhere; }
.wkc-notif-who { font-weight: 800; }
.wkc-notif-handle { color: var(--wkc-muted); font-weight: 600; }          /* never cut (the name may repeat) */
.wkc-notif-others { color: var(--wkc-muted); }
.wkc-notif-verb { color: rgba(232, 236, 249, .86); }
.wkc-notif-title { font-weight: 700; color: #ddd6fe; }
.wkc-notif-gone { color: var(--wkc-muted); font-style: italic; }
.wkc-notif-preview {
  font-size: 12.5px; color: rgba(218, 221, 232, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkc-notif-time { font-size: 11px; color: #8089ab; }
.wkc-notif-thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: inline-block; }
.wkc-notif-thumb img, .wkc-notif-seed { width: 100%; height: 100%; display: block; object-fit: cover; }
.wkc-notif-dot { flex: none; width: 8px; height: 8px; margin-right: 16px; border-radius: 50%; background: transparent; }
.wkc-notif.is-unread .wkc-notif-dot { background: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, .55); }
.wkc-notif-empty { text-align: center; color: var(--wkc-muted); font-size: 14px; line-height: 1.55; padding: 28px 22px; }
.wkc-notif-empty .wkc-btn { margin-left: 8px; }
.wkc-notif-more { display: flex; margin: 16px auto 0; }
/* Categories with their unread counts, Today / Yesterday / Earlier, the
   row's action and Mark as read, the filter card (the right rail's, or
   above the list without one). */
.wkc-notif-cats { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; }
.wkc-notif-cats .notifications-tab { display: inline-flex; align-items: center; gap: 7px; }
/* One row of tabs at every width (the mockup's): tighter tabs fit all seven
   in the column from 1366 up; a narrower column scrolls the row sideways. */
body.notifications-active .wkc-notif-body .notifications-tabs.wkc-notif-cats {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
body.notifications-active .wkc-notif-body .notifications-tabs.wkc-notif-cats::-webkit-scrollbar { display: none; }
body.notifications-active .wkc-notif-cats .notifications-tab { flex: none; padding: 8px 12px; }
.wkc-notif-cats .notifications-tab-count {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(255, 255, 255, .08);
  color: rgba(232, 236, 249, .8); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.wkc-notif-cats .notifications-tab.active .notifications-tab-count { background: var(--wkc-violet); color: #fff; }
.wkc-notif-group + .wkc-notif-group { margin-top: 20px; }
.wkc-notif-day { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--wkc-text); }
.wkc-notif-new {
  padding: 2px 10px; border-radius: 999px; background: rgba(139, 92, 246, .18); border: 1px solid rgba(139, 92, 246, .34);
  color: #c4b5fd; font-size: 11.5px; font-weight: 800;
}
.wkc-notif-acts { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.wkc-notif-act { white-space: nowrap; }
.wkc-notif-mark {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
  color: var(--wkc-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.wkc-notif-mark:hover { color: #c4b5fd; border-color: rgba(139, 92, 246, .4); }
.wkc-notif-mark:focus-visible, .wkc-notif-act:focus-visible, .wkc-notif-filter:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-notif-filters-inline { margin: 0 0 16px; }
.wkc-notif-body .wkc-notif-filters-inline .wkc-notif-filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; border: 0; background: none; }
.wkc-notif-filters-inline .notif-sidebar-title { margin: 0 6px 0 0; }
.wkc-notif-rail { display: contents; }
.wkc-notif-filter {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: rgba(232, 236, 249, .82);
  font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
}
.wkc-notif-filters-inline .wkc-notif-filter { width: auto; }
.wkc-notif-filter:hover { background: rgba(255, 255, 255, .04); }
.wkc-notif-filter.is-active { background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .34); color: #ddd6fe; }
.wkc-notif-filter-n {
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(255, 255, 255, .08);
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.wkc-notif-filter.is-active .wkc-notif-filter-n { background: var(--wkc-violet); color: #fff; }
@media (max-width: 640px) {
  .wkc-notif-act { display: none; }            /* the row opens the same place; Mark as read stays */
  .wkc-notif-acts { margin-right: 6px; }
  /* the row of tabs spans the page (it scrolls sideways, as the Feed's) */
  body.notifications-active .wkc-notif-body .notifications-tabs.wkc-notif-cats { display: flex; width: 100%; }
}
@media (max-width: 640px) {
  .wkc-notif-main { padding: 12px; gap: 10px; }
  .wkc-notif-av, .wkc-notif-av .wkc-avatar, .wkc-notif-sys { width: 36px; height: 36px; }
  /* an initials avatar carries its 44 px as an inline style (ui.avatar) */
  .wkc-notif-av .wkc-avatar-mono { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .wkc-notif-thumb { width: 40px; height: 40px; }
  .wkc-notif-dot { margin-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .wkc-notif { transition: none; } }

/* ── Trophies and unlock notices (wkx-trophies.js; S8) ─────────────────────
   Rarity frames: Common neutral, Rare blue, Epic purple, Legendary gold (gold
   here is trophy art, as design §9.5 allows). Notices sit above the player;
   the app's toasts and the text toasts stack above them (wkx-shell.css's
   toast column, lifted by the notices' height: --wk-toast-tr-h). */
.wkc-tr-stack { position: fixed; right: 18px; bottom: calc(var(--player-height, 80px) + 16px); z-index: 10060;
  display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; max-width: calc(100vw - 36px); }
.wkc-tr-toast { position: relative; display: flex; gap: 12px; align-items: center; width: 360px; max-width: 100%;
  padding: 12px 14px; border-radius: 14px; color: var(--wkc-text); background: var(--wkc-panel-strong);
  border: 1px solid var(--wkc-border-strong); box-shadow: 0 14px 36px rgba(0, 0, 0, .5); overflow: hidden;
  pointer-events: auto; animation: wkc-tr-in .32s ease-out; }
.wkc-tr-toast::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .10) 45%, transparent 60%);
  transform: translateX(-100%); animation: wkc-tr-shine 1.6s ease-out .2s 1 forwards; }
.wkc-tr-pic { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255, 255, 255, .04); }
.wkc-tr-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wkc-tr-head { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--wkc-muted); }
.wkc-tr-title { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.wkc-tr-sub { font-size: 12px; color: var(--wkc-muted); overflow-wrap: anywhere; }
.wkc-tr-view { align-self: flex-start; margin-top: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700;
  color: var(--wkc-text); background: var(--wkc-violet-soft); border: 1px solid var(--wkc-border-strong);
  border-radius: 999px; cursor: pointer; }
.wkc-tr-view:hover { border-color: var(--wkc-violet); }
.wkc-tr-common { border-color: rgba(203, 213, 225, .28); }
.wkc-tr-rare { border-color: rgba(59, 130, 246, .55); box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(59, 130, 246, .18); }
.wkc-tr-epic { border-color: rgba(168, 85, 247, .6); box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 22px rgba(139, 92, 246, .22); }
.wkc-tr-legendary { border-color: rgba(245, 196, 81, .7); box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 26px rgba(245, 196, 81, .22); }
.wkc-tr-legendary .wkc-tr-head { color: #f5c451; }
.wkc-tr-art { display: block; }
@keyframes wkc-tr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wkc-tr-shine { to { transform: translateX(100%); } }
@media (max-width: 480px) { .wkc-tr-stack { right: 10px; left: 10px; } .wkc-tr-toast { width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .wkc-tr-toast { animation: none; }
  .wkc-tr-toast::after { animation: none; display: none; }
}

/* ══ Community pages (S9) ═════════════════════════════════════════════════
   The shared top bar above every community page, the rail widgets
   (wkx-rails.js, .wkr-*), /leaderboards (.wkc-lb-*), /challenges (.wkc-ch-*,
   gold only under .wkg-root), the Feed's scored tabs and right column, and a
   profile's Trophies tab and Level. Never a horizontal page overflow at 390,
   1024 or 1600 px (§9.7). */

/* The app's one shared top bar (wkx-topbar.js), mounted by the community
   client above the page. --wkc-topbar-h (set by the client) is its height
   with its margin, so the pages that fill the window stay above the player. */
.wkc-shell { min-width: 0; --wkc-phone-top: calc(20px + var(--wkc-topbar-h, 0px)); }
.wkc-topbar-slot { display: flow-root; min-width: 0; }
.wkc-topbar-slot:empty { display: none; }
body.community-active:has(.wkc-chat-page, .wkc-dm-page) .wkc-shell { --wkc-page-top: calc(24px + var(--wkc-topbar-h, 0px)); }
@media (max-width: 1023px) {
  body.community-active:has(.wkc-chat-page, .wkc-dm-page) .wkc-shell { --wkc-page-top: calc(16px + var(--wkc-topbar-h, 0px)); }
}

/* The equipped badge beside a name: its rarity frame; the crown only for an
   equipped Weekly Sample King. */
.wkc-badge { gap: 4px; white-space: nowrap; }
.wkc-badge-rare { background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .5); color: #bfdbfe; }
.wkc-badge-epic { background: rgba(168, 85, 247, .16); border-color: rgba(168, 85, 247, .55); color: #e9d5ff; }
.wkc-badge-legendary { background: rgba(245, 196, 81, .12); border-color: rgba(245, 196, 81, .5); color: #fde68a; }
.wkc-badge-crown { flex: 0 0 auto; color: #f5c451; }
.wkc-muted { color: var(--wkc-muted); font-weight: 600; }

/* A drawer's head (the Feed's Online Now, /challenges' Live Chat): shown only
   where the page makes that column a drawer (below). */
.wkc-drawer-head { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wkc-drawer-title { font-weight: 850; font-size: 16px; }
.wkc-drawer-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--wkc-border-strong); background: none; color: var(--wkc-text); font: inherit; cursor: pointer; }
.wkc-drawer-close:hover { background: rgba(255, 255, 255, .06); }
.wkc-drawer-close:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }

/* ── Rail widgets (wkx-rails.js) ────────────────────────────────────────── */
.wkr-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wkr-card { padding: 16px 16px 14px; margin: 0; max-width: none; min-width: 0; }
.wkr-card[hidden] { display: none; }
/* One widget mounted into a host's own card (Home v2's slot): no second card around it */
.wkr-single > .wkr-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.wkr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; min-width: 0; }
.wkr-head-text { min-width: 0; }
.wkr-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--wkc-text); }
.wkr-sub { margin: 3px 0 0; font-size: 12px; color: var(--wkc-muted); line-height: 1.4; }
.wkr-count { color: var(--wkc-muted); font-weight: 700; }
.wkr-link { flex: 0 0 auto; background: none; border: 0; padding: 2px 0; color: #a5b4fc; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wkr-link:hover { color: #c7d2fe; }
.wkr-link:focus-visible, .wkr-cta:focus-visible, .wkr-trophy:focus-visible, .wkr-chal-row:focus-visible, .wkr-weekly:focus-visible,
.wkr-person-who:focus-visible, .wkr-board-who:focus-visible, .wkr-act-who:focus-visible, .wkr-act-title:focus-visible,
.wkr-perf-who:focus-visible, .wkr-tcard-open:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 8px; }
.wkr-empty { margin: 0; padding: 8px 0 2px; color: var(--wkc-muted); font-size: 13px; line-height: 1.45; }
.wkr-bar { display: block; height: 6px; border-radius: 999px; background: rgba(148, 163, 255, .14); overflow: hidden; }
.wkr-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #6366f1 55%, #38bdf8); transition: width .6s ease; }
.wkr-art { display: inline-grid; place-items: center; line-height: 0; }
.wkr-eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #a5b4fc; }
.wkr-more { display: flex; justify-content: center; margin-top: 10px; }
.wkr-rarity { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--wkc-border-strong); color: #cbd5e1; white-space: nowrap; }
.wkr-rarity-rare { color: #93c5fd; border-color: rgba(59, 130, 246, .5); }
.wkr-rarity-epic { color: #d8b4fe; border-color: rgba(168, 85, 247, .55); }
.wkr-rarity-legendary { color: #fcd34d; border-color: rgba(245, 196, 81, .6); }

/* My Progress */
.wkr-prog-id { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-width: 0; }
.wkr-prog-id .wkc-avatar { width: 44px; height: 44px; }
.wkr-prog-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wkr-prog-name { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.wkr-level { padding: 12px; border-radius: 14px; background: rgba(8, 10, 24, .6); border: 1px solid var(--wkc-border); min-width: 0; }
.wkr-level-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wkr-level-name { font-size: 18px; font-weight: 850; letter-spacing: -.01em; }
.wkr-level-rank { font-size: 12px; color: #c4b5fd; font-weight: 700; }
.wkr-level-xp { margin-left: auto; font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkr-prog-rank { margin: 10px 0 0; font-size: 12.5px; color: var(--wkc-muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.wkr-prog-rank strong { color: var(--wkc-text); font-size: 14px; }
.wkr-move { font-size: 11px; font-weight: 800; margin-left: 4px; white-space: nowrap; }
.wkr-move.is-up { color: #34d399; }
.wkr-move.is-down { color: #fb7185; }
.wkr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.wkr-stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wkr-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 9px; border-radius: 12px; background: rgba(8, 10, 24, .55); border: 1px solid var(--wkc-border); min-width: 0; text-align: center; }
.wkr-stat-val { font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wkr-stat-label { font-size: 10.5px; color: var(--wkc-muted); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.wkr-stat-ico { display: inline-flex; color: #a78bfa; }
.wkr-stat-unique .wkr-stat-ico { color: #60a5fa; }
.wkr-stat-fav .wkr-stat-ico { color: #f472b6; }
.wkr-stat-streak .wkr-stat-ico { color: #fb923c; }
.wkr-device-note { margin-top: 12px; }
.wkr-join { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wkc-border); }
.wkr-join-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* My Trophy Cabinet */
.wkr-cab-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wkr-trophy { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; border-radius: 12px; background: rgba(8, 10, 24, .55); border: 1px solid var(--wkc-border); color: inherit; font: inherit; cursor: pointer; text-align: center; min-width: 0; overflow: hidden; transition: transform .15s, border-color .15s; }
.wkr-trophy:hover { transform: translateY(-2px); }
.wkr-trophy.wkc-tr-rare, .wkr-tcard.wkc-tr-rare, .wkc-ach.wkc-tr-rare { box-shadow: none; }
.wkr-trophy.wkc-tr-epic, .wkr-tcard.wkc-tr-epic, .wkc-ach.wkc-tr-epic { box-shadow: 0 0 16px rgba(139, 92, 246, .14) inset; }
.wkr-trophy.wkc-tr-legendary, .wkr-tcard.wkc-tr-legendary, .wkc-ach.wkc-tr-legendary { box-shadow: 0 0 18px rgba(245, 196, 81, .12) inset; }
.wkr-trophy::after, .wkr-tcard-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 48%, transparent 60%); transform: translateX(-120%);
}
.wkr-trophy:hover::after, .wkr-tcard:hover .wkr-tcard-art::after { transform: translateX(120%); transition: transform .9s ease; }
.wkr-trophy-name { font-size: 11.5px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.wkr-trophy-when { font-size: 10.5px; color: var(--wkc-muted); line-height: 1.25; overflow-wrap: anywhere; }

/* Online Now */
.wkr-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wkr-person { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.wkr-person-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wkr-person-who .wkc-avatar { width: 36px; height: 36px; }
.wkr-person-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.wkr-person-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkr-person.is-me .wkr-person-name { color: #c4b5fd; }
.wkr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wkc-muted); min-width: 0; }
.wkr-status .wkc-pres-dot, .wkc-lb-status .wkc-pres-dot { width: 8px; height: 8px; box-shadow: none; }
.wkr-person .wkc-follow, .wkr-person .wkr-person-view { flex: 0 0 auto; min-height: 30px; padding: 0 12px; font-size: 12px; }
/* "@handle · status" under the name (the handle always beside a name, §2.2) */
.wkr-person-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--wkc-muted); }
.wkr-person-sub:empty { display: none; }
.wkr-person-handle { flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--wkc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkr-person-handle + .wkr-status { flex: 0 0 auto; }
.wkr-person-handle + .wkr-status::before { content: "·"; margin-right: 0; color: var(--wkc-muted-2); }

/* Active Challenges and the Feed's weekly challenge */
.wkr-chal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wkr-chal-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--wkc-border); background: rgba(8, 10, 24, .5); color: inherit; font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.wkr-chal-row:hover { border-color: var(--wkc-border-strong); }
.wkr-chal-art, .wkr-perf-art, .wkr-weekly-art { flex: 0 0 auto; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #0d1124; }
.wkr-chal-art { width: 40px; height: 40px; }
.wkr-chal-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkr-chal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wkr-chal-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; min-width: 0; }
.wkr-chal-title { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wkr-chal-val { color: var(--wkc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkr-chal-xp { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #c4b5fd; white-space: nowrap; }
.wkr-challenge { padding: 0; overflow: hidden; }
.wkr-weekly {
  width: 100%; display: flex; gap: 14px; align-items: center; padding: 16px; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  background: radial-gradient(420px 160px at 0% 0%, rgba(124, 58, 237, .22), transparent 70%);
}
.wkr-weekly-art { width: 72px; height: 72px; border-radius: 14px; }
.wkr-weekly-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wkr-weekly-title { font-size: 17px; font-weight: 850; overflow-wrap: anywhere; }
.wkr-weekly-desc { font-size: 12.5px; color: var(--wkc-muted); line-height: 1.35; }
.wkr-weekly-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkr-weekly-xp { color: #c4b5fd; font-weight: 800; }

/* Leaderboard Preview and rank glyphs */
.wkr-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wkr-board-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 1px solid transparent; background: rgba(8, 10, 24, .45); min-width: 0; }
.wkr-board-row.is-me { border-color: rgba(139, 92, 246, .55); background: rgba(124, 58, 237, .14); }
.wkr-board-me { margin-top: 6px; }
.wkr-board-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.wkr-board-who .wkc-avatar { width: 28px; height: 28px; }
.wkr-board-who.is-masked { color: var(--wkc-muted); font-style: italic; cursor: default; font-size: 13px; }
.wkr-board-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wkr-board-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wkr-board-handle { font-size: 12px; color: var(--wkc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkr-first { color: #f5c451; display: inline-flex; flex: 0 0 auto; }
.wkr-board-score { flex: 0 0 auto; font-size: 12.5px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkr-cta { margin-top: 12px; width: 100%; min-height: 36px; border-radius: 10px; border: 1px solid var(--wkc-border-strong); background: rgba(255, 255, 255, .03); color: var(--wkc-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.wkr-cta:hover { background: rgba(255, 255, 255, .07); }
.wkr-medal { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 900; color: #1b1405; flex: 0 0 auto; }
.wkr-medal-gold { background: radial-gradient(circle at 35% 30%, #fff3c4, #f5c451 45%, #b7791f); box-shadow: 0 0 10px rgba(245, 196, 81, .35); }
.wkr-medal-silver { background: radial-gradient(circle at 35% 30%, #ffffff, #d7dde8 45%, #8e99ad); }
.wkr-medal-bronze { background: radial-gradient(circle at 35% 30%, #ffe0c2, #d8894b 45%, #9a5324); }
.wkr-rank-num { min-width: 24px; text-align: center; font-weight: 800; color: var(--wkc-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Top Challenge Performers */
.wkr-perf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.wkr-perf-card { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(8, 10, 24, .5); border: 1px solid var(--wkc-border); min-width: 0; }
.wkr-perf-card.is-me { border-color: rgba(139, 92, 246, .55); }
.wkr-perf-art { width: 44px; height: 44px; }
.wkr-perf-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; gap: 1px; }
.wkr-perf-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkr-perf-who { background: none; border: 0; padding: 0; color: #a5b4fc; font: inherit; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.wkr-perf-val { color: var(--wkc-muted); font-variant-numeric: tabular-nums; }

/* Live Activity */
.wkr-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wkr-act { display: grid; grid-template-columns: 32px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--wkc-border); font-size: 13px; min-width: 0; }
.wkr-act:last-child { border-bottom: 0; }
.wkr-act .wkc-avatar { width: 32px; height: 32px; }
.wkr-act-ico { color: #a78bfa; display: inline-flex; justify-content: center; }
.wkr-act-award .wkr-act-ico { color: #f5c451; }
.wkr-act-challenge .wkr-act-ico, .wkr-act-came_online .wkr-act-ico { color: #34d399; }
.wkr-act-level .wkr-act-ico { color: #60a5fa; }
.wkr-act-followed .wkr-act-ico { color: #22d3ee; }
.wkr-act-text { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.wkr-act-who, .wkr-act-title { background: none; border: 0; padding: 0; font: inherit; color: #c4b5fd; font-weight: 700; cursor: pointer; text-align: left; }
.wkr-act-title { color: var(--wkc-text); }
.wkr-act-sub { display: block; font-size: 12px; color: var(--wkc-muted); }
.wkr-act-when { font-size: 11.5px; color: var(--wkc-muted-2); white-space: nowrap; }

/* Season card */
.wkr-season-card { display: flex; gap: 12px; align-items: center; min-width: 0; }
.wkr-season-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wkr-season-dates { font-size: 12.5px; color: var(--wkc-muted); }
.wkr-season-left { font-size: 18px; font-weight: 850; color: #c4b5fd; font-variant-numeric: tabular-nums; }
.wkr-season-note { font-size: 12px; color: var(--wkc-muted); }
.wkr-launch { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--wkc-border-strong); font-size: 9.5px; letter-spacing: .06em; color: var(--wkc-muted); }

/* My Profile (Feed) */
.wkr-profile { padding: 0 0 14px; overflow: hidden; }
.wkr-profile .wkr-head { padding: 14px 16px 0; margin-bottom: 10px; }
.wkr-prof-banner { position: relative; height: 86px; overflow: hidden; background: #0e1224; }
.wkr-prof-banner img, .wkr-prof-banner-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wkr-prof-id { display: flex; align-items: flex-end; gap: 10px; padding: 0 16px; margin-top: -30px; position: relative; min-width: 0; }
.wkr-prof-avatar { flex: 0 0 auto; line-height: 0; }
.wkr-prof-avatar .wkc-avatar { width: 64px; height: 64px; border: 3px solid #10132a; }
.wkr-prof-who { display: flex; flex-direction: column; min-width: 0; padding-bottom: 2px; gap: 2px; }
.wkr-prof-name { font-weight: 850; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.wkr-prof-handle { font-size: 12.5px; color: var(--wkc-muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere; }
.wkr-prof-headline, .wkr-prof-bio, .wkr-prof-loc { margin: 8px 16px 0; font-size: 12.5px; color: #cdd4ee; line-height: 1.45; overflow-wrap: anywhere; }
.wkr-prof-bio { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wkr-prof-loc { color: var(--wkc-muted); }
.wkr-prof-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 16px; text-align: center; }
.wkr-prof-counts > div { display: flex; flex-direction: column-reverse; }
.wkr-prof-counts dt { font-size: 11px; color: var(--wkc-muted); }
.wkr-prof-counts dd { margin: 0; font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; }
.wkr-profile .wkr-level { margin: 0 16px; }

/* A cabinet grid (My Trophies, a profile's Trophies tab) and its details */
.wkr-tgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.wkr-tcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px; border-radius: 16px; background: var(--wkc-panel); border: 1px solid var(--wkc-border); min-width: 0; }
.wkr-tcard.is-equipped { border-color: rgba(139, 92, 246, .75); box-shadow: 0 0 0 1px rgba(139, 92, 246, .35); }
.wkr-tcard-open { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: center; min-width: 0; }
.wkr-tcard-art { position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, .2), transparent 70%); }
.wkr-tcard-title { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.wkr-tcard-when { font-size: 12px; color: var(--wkc-muted); overflow-wrap: anywhere; }
.wkr-equip { align-self: stretch; }
.wkr-equip.is-on { border-color: rgba(139, 92, 246, .6); color: #ddd6fe; }
.wkr-tdetail { max-width: 420px; text-align: center; }
.wkr-tdetail-art { display: flex; justify-content: center; margin-bottom: 10px; }
.wkr-tdetail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; text-align: left; }
.wkr-tdetail-facts > div { padding: 8px 10px; border-radius: 10px; background: rgba(8, 10, 24, .55); border: 1px solid var(--wkc-border); }
.wkr-tdetail-facts dt { font-size: 11px; color: var(--wkc-muted); }
.wkr-tdetail-facts dd { margin: 2px 0 0; font-weight: 800; text-transform: capitalize; }

/* ── /leaderboards (mockup 09_08_01) ────────────────────────────────────── */
.wkc-page.wkc-lb, .wkc-page.wkc-ch, .wkc-page.wkc-feed { max-width: 1480px; }
.wkc-lb-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 2px 0 4px; }
.wkc-lb-trophy { flex: 0 0 auto; filter: drop-shadow(0 6px 18px rgba(245, 196, 81, .25)); }
.wkc-lb-titles { flex: 1 1 300px; min-width: 0; }
.wkc-lb-title { font-size: 30px; font-weight: 900; letter-spacing: -.03em; margin: 0; }
.wkc-lb-sub { margin: 4px 0 0; color: var(--wkc-muted); font-size: 14px; }
.wkc-lb-season { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.wkc-lb-season select {
  max-width: 100%; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--wkc-border-strong);
  background: rgba(8, 10, 24, .85); color: var(--wkc-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.wkc-lb-season select:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-lb-tabs { margin: 16px 0 16px; }
.wkc-lb-col { min-width: 0; display: flex; flex-direction: column; }   /* header, tabs and main: the rail runs beside them */
.wkc-lb-col > .wkc-lb-tabs { margin: 14px 0 16px; }
.wkc-lb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.wkc-lb-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wkc-lb-rail { min-width: 0; }
.wkc-lb-rail .wkr-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
@container wkc (min-width: 1120px) {
  .wkc-lb-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .wkc-lb-rail { position: sticky; top: 12px; }
  .wkc-lb-rail .wkr-stack { display: flex; align-items: stretch; }
}
@container wkc (max-width: 1119px) {
  .wkc-lb-rail .wkr-stack { align-items: stretch; }   /* the stacked rail's cards share a row's height */
}
@container wkc (max-width: 640px) {
  .wkc-lb-head { gap: 10px 12px; }
  .wkc-lb-titles { flex: 1 1 0; }                      /* the trophy stays beside the title */
  .wkc-lb-trophy svg { width: 40px; height: 40px; }
  .wkc-lb-title { font-size: 26px; }
  .wkc-lb-season { flex: 1 1 100%; }
  .wkc-lb-season select { width: 100%; }
}

/* Category cards: exactly four in view, the rest behind the › scroller (it
   sits in the strip's right padding, where the fifth card peeks, never over
   a card's text); a narrow card puts its art above the text. */
.wkc-lb-cards-wrap { position: relative; min-width: 0; container: wkclbcards / inline-size; }
.wkc-lb-cards {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 44px 8px 0; scroll-padding-right: 44px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent calc(100% - 6px));
  mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent calc(100% - 6px));   /* the next card's peek fades under the › */
}
.wkc-lb-cards-wrap.is-end .wkc-lb-cards { -webkit-mask-image: none; mask-image: none; }
.wkc-lb-cards-next[hidden] { display: none; }
.wkc-lb-card {
  --wkc-accent: rgba(139, 92, 246, .45);
  flex: 0 0 calc((100% - 36px) / 4); min-width: 170px;
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px;
  border: 1px solid var(--wkc-accent); background: linear-gradient(165deg, rgba(30, 27, 75, .7), rgba(10, 12, 28, .92));
}
@container wkclbcards (min-width: 561px) and (max-width: 1040px) {
  .wkc-lb-card-top { flex-direction: column; gap: 8px; }
  .wkc-lb-card-art svg { width: 64px; height: 64px; }   /* the trophy stays the card's focal point */
}
.wkc-lb-card-weekly_sample_king { --wkc-accent: rgba(245, 196, 81, .42); }
.wkc-lb-card-monthly_explorer { --wkc-accent: rgba(96, 165, 250, .45); }
.wkc-lb-card-deep_crate_digger { --wkc-accent: rgba(192, 132, 252, .5); }
.wkc-lb-card-discovery_streak { --wkc-accent: rgba(251, 146, 60, .45); }
.wkc-lb-card-top { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.wkc-lb-card-art { flex: 0 0 auto; }
.wkc-lb-card-text { min-width: 0; }
.wkc-lb-card-title { margin: 0; font-size: 16px; font-weight: 850; line-height: 1.15; overflow-wrap: anywhere; }
.wkc-lb-card-desc { margin: 4px 0 0; font-size: 12px; color: var(--wkc-muted); line-height: 1.35; }
.wkc-lb-card-values { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wkc-lb-card-pill { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--wkc-accent); background: rgba(8, 10, 24, .6); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wkc-lb-card-mine { font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkc-lb-card-lead { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin-top: auto; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.wkc-lb-card-lead .wkc-avatar { width: 30px; height: 30px; }
.wkc-lb-card-lead-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.wkc-lb-card-lead-label { display: block; font-size: 11px; color: var(--wkc-muted); }
.wkc-lb-card-lead-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 750; font-size: 13.5px; overflow-wrap: anywhere; }
.wkc-lb-card-lead-name { max-width: 100%; }
.wkc-lb-card-lead-name .wkc-badge { font-size: 10.5px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }   /* its title attribute holds the whole name */
.wkc-lb-card-lead-name .wkc-badge .wkc-badge-crown { vertical-align: -2px; margin-right: 3px; }
.wkc-lb-card-lead-handle { display: block; font-size: 11.5px; font-weight: 600; color: var(--wkc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-lb-card-lead.is-none { color: var(--wkc-muted); font-size: 12.5px; cursor: default; }
.wkc-lb-card-lead.is-masked { cursor: default; }
.wkc-lb-card-lead.is-masked .wkc-lb-card-lead-name { overflow-wrap: normal; color: var(--wkc-muted); font-style: italic; }
.wkc-lb-card-lead .wkc-lb-masked-av { width: 30px; height: 30px; }   /* the masked row's placeholder, at the leader avatar's size */
.wkc-lb-cards-next {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--wkc-border-strong); background: rgba(10, 12, 28, .94); color: var(--wkc-text); font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: -16px 0 18px rgba(7, 7, 13, .9);
}
.wkc-lb-cards-next:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
@container wkc (max-width: 560px) {
  .wkc-lb-cards { padding-right: 0; scroll-padding-right: 0; }
  .wkc-lb-card { flex-basis: min(260px, 78%); min-width: 0; }
  .wkc-lb-cards-next { display: none; }
}

/* The board */
.wkc-lb-board { padding: 16px; max-width: none; margin: 0; min-width: 0; }
.wkc-lb-board-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wkc-lb-board-ico { flex: 0 0 auto; }
.wkc-lb-board-titles { flex: 1 1 220px; min-width: 0; }
.wkc-lb-board-title { margin: 0; font-size: 18px; font-weight: 850; }
.wkc-lb-board-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--wkc-muted); }
.wkc-lb-toggle { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--wkc-border-strong); border-radius: 12px; padding: 3px; gap: 2px; background: rgba(8, 10, 24, .6); max-width: 100%; }
.wkc-lb-toggle-btn { border: 0; background: none; color: var(--wkc-muted); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.wkc-lb-toggle-btn:hover { color: var(--wkc-text); }
.wkc-lb-toggle-btn.is-active { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; }
.wkc-lb-toggle-btn:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 1px; }
.wkc-lb-refresh { flex: 0 0 auto; }
.wkc-lb-archive { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(124, 58, 237, .12); border: 1px solid rgba(139, 92, 246, .35); font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.wkc-lb-table { min-width: 0; }
.wkc-lb-rows { list-style: none; margin: 0; padding: 0; }
.wkc-lb-row {
  display: grid; grid-template-columns: 58px minmax(140px, 2.2fr) repeat(3, minmax(68px, 1fr)) minmax(60px, .8fr) minmax(90px, 1.3fr) 64px;
  align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--wkc-border); min-width: 0; border-radius: 12px;
}
.wkc-lb-rows > .wkc-lb-row { border-radius: 0; }
.wkc-lb-stats { display: contents; }
.wkc-lb-row-head { align-items: end; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wkc-muted); padding-top: 4px; padding-bottom: 8px; border-radius: 0; overflow-wrap: anywhere; }
.wkc-lb-rows > .wkc-lb-row.is-me { background: rgba(124, 58, 237, .14); border: 1px solid rgba(139, 92, 246, .55); border-radius: 12px; }
.wkc-lb-rows > .wkc-lb-row.is-top:not(.is-me) { background: rgba(255, 255, 255, .015); }
.wkc-lb-c { min-width: 0; }
.wkc-lb-c-num, .wkc-lb-c-streak { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
/* the header row: one size and weight for every label (the figure cells' 14 px is for rows only) */
.wkc-lb-row-head .wkc-lb-c, .wkc-lb-row-head .wkc-lb-c-num, .wkc-lb-row-head .wkc-lb-c-streak { font-size: 10.5px; font-weight: 800; line-height: 1.25; letter-spacing: .06em; }
.wkc-lb-c-score { color: #fff; }
.wkc-lb-c-rank { display: flex; align-items: center; gap: 2px; }
.wkc-lb-c-view { text-align: right; }
.wkc-lb-user { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wkc-lb-user .wkc-avatar { width: 32px; height: 32px; }
.wkc-lb-user:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; border-radius: 10px; }
.wkc-lb-user-text { display: flex; flex-direction: column; min-width: 0; }
.wkc-lb-user-name { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-lb-user-handle { font-size: 12px; color: var(--wkc-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.wkc-lb-user.is-masked { cursor: default; color: var(--wkc-muted); font-style: italic; }
.wkc-lb-masked-av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background: repeating-linear-gradient(135deg, rgba(148, 163, 255, .12) 0 6px, rgba(148, 163, 255, .04) 6px 12px); }
.wkc-lb-flame { color: #fb923c; display: inline-flex; margin-right: 4px; vertical-align: -2px; }
.wkc-lb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--wkc-muted); min-width: 0; overflow-wrap: anywhere; }
.wkc-lb-pinned { margin-top: 12px; }
.wkc-lb-pinned-label { margin: 0 0 6px; font-size: 12.5px; color: #c4b5fd; font-weight: 700; overflow-wrap: anywhere; }
.wkc-lb-empty { padding: 22px 0 8px; }
/* Narrow: each row is a card (rank, user, View; then the four figures; then the status) */
@container wkc (max-width: 640px) {
  .wkc-lb-row-head { display: none; }
  .wkc-lb-row {
    grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "rank user view" "stats stats stats" "status status status";
    row-gap: 8px; margin-bottom: 8px; border: 1px solid var(--wkc-border); background: rgba(8, 10, 24, .45);
  }
  .wkc-lb-rows > .wkc-lb-row { border-radius: 14px; }
  .wkc-lb-c-rank { grid-area: rank; }
  .wkc-lb-c-user { grid-area: user; }
  .wkc-lb-c-view { grid-area: view; }
  .wkc-lb-c-status { grid-area: status; }
  .wkc-lb-c-status:empty { display: none; }
  .wkc-lb-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .wkc-lb-stats > .wkc-lb-c { padding: 6px; border-radius: 10px; background: rgba(8, 10, 24, .6); font-size: 13px; }
  .wkc-lb-stats > .wkc-lb-c::before { content: attr(data-label); display: block; font-size: 9.5px; color: var(--wkc-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; margin-bottom: 2px; }
}

/* Achievements and My Trophies */
.wkc-ach-sec .wkc-section-title { margin-top: 4px; }
.wkc-ach-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.wkc-ach { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--wkc-panel); border: 1px solid var(--wkc-border); min-width: 0; }
.wkc-ach-locked { opacity: .55; filter: saturate(.35); }
.wkc-ach-art { flex: 0 0 56px; display: grid; place-items: center; }
.wkc-ach-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wkc-ach-title { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.wkc-ach-label { font-size: 12px; color: var(--wkc-muted); overflow-wrap: anywhere; }
.wkc-ach-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.wkc-ach-val { font-size: 12px; font-variant-numeric: tabular-nums; color: #c4b5fd; font-weight: 700; }
.wkc-ach-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.wkc-ach-xp { font-size: 12px; font-weight: 800; color: #c4b5fd; white-space: nowrap; }
.wkc-lb-mine { max-width: none; margin: 0; padding: 18px; }
.wkc-lb-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wkc-lb-mine-head .wkc-section-title { margin: 0; }
.wkc-lb-mine-badge { font-size: 13px; color: var(--wkc-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wkc-lb-mine-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0 16px; }
@container wkc (max-width: 820px) { .wkc-lb-mine-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container wkc (max-width: 420px) { .wkc-lb-mine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wkc-lb-mine-stats > div { padding: 10px 12px; border-radius: 12px; background: rgba(8, 10, 24, .55); border: 1px solid var(--wkc-border); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }   /* the figures level, a 2-line label below */
.wkc-lb-mine-stats dt { font-size: 11.5px; color: var(--wkc-muted); }
.wkc-lb-mine-stats dd { margin: 0; font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }

/* ── /challenges (mockup 09_19_29): gold scoped to .wkg-root ─────────────── */
.wkg-root {
  --wkg-gold: #f5c451; --wkg-gold-2: #ffe7a3; --wkg-gold-deep: #b7791f;
  --wkg-gold-soft: rgba(245, 196, 81, .14); --wkg-gold-line: rgba(245, 196, 81, .45);
}
.wkg-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px 28px; border-radius: 22px; overflow: hidden; border: 1px solid var(--wkg-gold-line);
  background:
    linear-gradient(90deg, rgba(7, 7, 13, .92) 0%, rgba(7, 7, 13, .62) 42%, rgba(7, 7, 13, .18) 100%),
    url("/assets/home-hero.webp") center / cover no-repeat, #0b0d1c;
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .08), 0 20px 50px rgba(0, 0, 0, .45);
}
/* The studio scene (the owner-approved Home art: a night skyline and a lit
   desk) on the right, under the ring, warmed so the page's gold reads. */
.wkg-hero::before {
  content: ""; position: absolute; inset: 0 0 0 40%; pointer-events: none;
  background: url("/assets/home-hero-scene.svg") right bottom / contain no-repeat;
  opacity: .85; filter: sepia(.25) saturate(1.1);
}
.wkg-hero > * { position: relative; z-index: 1; }
.wkg-hero-body { min-width: 0; flex: 1 1 360px; display: flex; flex-direction: column; gap: 10px; }
.wkg-season { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wkg-season-text { display: flex; flex-direction: column; min-width: 0; }
.wkg-season-name { font-size: 14px; font-weight: 900; letter-spacing: .1em; color: #fff; }
.wkg-season-dates { font-size: 12.5px; letter-spacing: .06em; color: #e5d3a1; font-weight: 700; }
.wkg-launch { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--wkg-gold-line); font-size: 10px; letter-spacing: .06em; color: var(--wkg-gold-2); vertical-align: 2px; }
.wkg-countdown {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--wkg-gold-line);
  background: rgba(20, 14, 4, .55); color: var(--wkg-gold-2); font-size: 18px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wkg-title { margin: 6px 0 0; font-size: clamp(30px, 4.2vw, 52px); line-height: 1; font-weight: 950; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.wkg-title span { background: linear-gradient(180deg, #fff3c4, #f5c451 55%, #b7791f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wkg-sub { margin: 0; font-size: 15px; color: #d7dcef; }
.wkg-ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.wkg-ring::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(7, 7, 13, .9) 58%, rgba(7, 7, 13, 0) 71%); pointer-events: none; }
.wkg-ring > svg { position: relative; }
.wkg-ring svg { display: block; }
.wkg-ring-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 9; }
.wkg-ring-fill { fill: none; stroke: url(#wkgRingGrad); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.wkg-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wkg-ring-count { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.wkg-ring-label { font-size: 10.5px; color: #e5d3a1; font-weight: 700; max-width: 92px; line-height: 1.15; }
.wkg-ring-xp { font-size: 13px; font-weight: 850; color: var(--wkg-gold); margin-top: 2px; }
.wkg-finalizing { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--wkg-gold-line); background: var(--wkg-gold-soft); color: var(--wkg-gold-2); font-size: 13px; font-weight: 700; }
.wkg-tabs-row { display: flex; align-items: center; gap: 10px; margin: 18px 0 16px; flex-wrap: wrap; min-width: 0; }
.wkg-tabs { display: flex; gap: 8px; flex: 1 1 320px; min-width: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.wkg-tab {
  appearance: none; border: 1px solid var(--wkc-border); background: rgba(10, 12, 26, .8); color: var(--wkc-muted); font: inherit;
  font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 12px; cursor: pointer; white-space: nowrap;
}
.wkg-tab:hover { color: var(--wkc-text); border-color: var(--wkc-border-strong); }
.wkg-tab.is-active { color: #fff7dd; border-color: var(--wkg-gold-line); background: linear-gradient(180deg, rgba(245, 196, 81, .22), rgba(120, 80, 10, .25)); box-shadow: 0 0 16px rgba(245, 196, 81, .18); }
.wkg-tab:focus-visible, .wkg-rewards-btn:focus-visible, .wkg-chat-btn:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkg-rewards-btn, .wkg-chat-btn {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--wkg-gold-line); background: rgba(20, 14, 4, .45);
  color: var(--wkg-gold-2); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.wkg-chat-btn { display: none; align-items: center; gap: 8px; border-color: var(--wkc-border-strong); color: var(--wkc-text); background: rgba(10, 12, 26, .8); }
.wkg-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
.wkc-ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.wkc-ch-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wkc-ch-main .wkg-tabs-row, .wkc-ch-main .wkg-finalizing { margin: 0; }   /* the column's gap spaces them */
.wkc-ch-rail { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wkc-ch-rail [data-wkg-slot="rail"] .wkr-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
/* Four overlay cards a row (the art is the backdrop, the text on a scrim), then three and two */
.wkg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container wkc (max-width: 819px) { .wkg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container wkc (max-width: 640px) { .wkg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.wkg-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; border-radius: 18px; overflow: hidden; border: 1px solid var(--wkc-border); background: linear-gradient(180deg, rgba(20, 22, 44, .92), rgba(8, 9, 20, .96)); transition: transform .15s, border-color .15s; min-width: 0; }
.wkg-card:hover { transform: translateY(-2px); border-color: var(--wkc-border-strong); }
.wkg-card-rare { border-color: rgba(59, 130, 246, .38); }
.wkg-card-epic { border-color: rgba(168, 85, 247, .45); }
.wkg-card-legendary { border-color: var(--wkg-gold-line); }
.wkg-card.is-done { border-color: var(--wkg-gold-line); box-shadow: 0 0 22px rgba(245, 196, 81, .12); }
.wkg-card-art { position: absolute; inset: 0; z-index: 0; background: #0d1124; display: grid; place-items: start center; padding-top: 18px; overflow: hidden; }
.wkg-card-art .wkr-chal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wkg-card-art .wkr-art svg { width: 72px; height: 72px; }
.wkg-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 20, .05) 15%, rgba(8, 9, 20, .72) 52%, rgba(8, 9, 20, .96)); pointer-events: none; }
.wkg-check { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #1b1405; background: radial-gradient(circle at 35% 30%, #fff3c4, #f5c451 50%, #b7791f); box-shadow: 0 0 14px rgba(245, 196, 81, .5); }
.wkg-card-body { position: relative; z-index: 1; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wkg-card-title { margin: 0; font-size: 15px; font-weight: 850; overflow-wrap: anywhere; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.wkg-card-desc { margin: 0; font-size: 12px; color: #cfd5ea; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wkg-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; margin-top: 2px; }
.wkg-card-val { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkg-card-rarity { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(8, 9, 20, .72); }
.wkg-card-xp { margin-left: auto; font-weight: 850; color: var(--wkg-gold); white-space: nowrap; }
.wkg-card.is-done .wkg-card-bar > span { background: linear-gradient(90deg, #b7791f, #f5c451, #ffe7a3); }
.wkc-ch-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.wkc-ch-bottom > div { min-width: 0; }
.wkg-chat { min-width: 0; }
.wkg-chat .wkc-chat-rail { max-width: none; margin: 0; }
.wkg-chat .wkc-chat-tabs { gap: 4px; }
.wkg-chat .wkc-chat-tabs .wkc-tab { flex: 1 1 auto; padding: 6px 10px; font-size: 12px; }
/* Top Challenge Performers under the Leaderboard Preview: three compact cards in a row */
.wkc-ch-bottom-b .wkr-perf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wkc-ch-bottom-b .wkr-perf-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; }
.wkc-ch-bottom-b .wkr-perf-art { width: 40px; height: 40px; flex: 0 0 40px; }
.wkc-ch-bottom-b .wkr-perf-text { width: 100%; }
.wkc-ch-bottom-b .wkr-perf-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
@container wkc (max-width: 420px) {
  .wkc-ch-bottom-b .wkr-perf { grid-template-columns: minmax(0, 1fr); }
  .wkc-ch-bottom-b .wkr-perf-card { flex-direction: row; align-items: center; }
}
.wkg-reward-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wkg-reward { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(8, 10, 24, .55); border: 1px solid var(--wkc-border); min-width: 0; }
.wkg-reward-art { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #0d1124; }
.wkg-reward-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-weight: 750; font-size: 13.5px; overflow-wrap: anywhere; }
.wkg-reward-desc { font-weight: 500; font-size: 12px; color: var(--wkc-muted); }
.wkg-reward-xp { flex: 0 0 auto; font-weight: 850; color: var(--wkg-gold); font-size: 13px; }
.wkg-rewards { max-width: 560px; }
@container wkc (min-width: 820px) {
  .wkc-ch-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container wkc (min-width: 1120px) {
  .wkc-ch-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .wkc-ch-rail [data-wkg-slot="rail"] .wkr-stack { display: flex; align-items: stretch; }
}
/* Under 1440 px wide the chat opens as a drawer from its button (§9.7). */
@media (max-width: 1439px) {
  .wkg-chat-btn { display: inline-flex; }
  .wkg-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 10040; width: min(420px, 100vw); padding: 14px 14px calc(var(--player-height, 80px) + 18px);
    background: var(--wkc-panel-solid); border-left: 1px solid var(--wkc-border-strong); box-shadow: -18px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; overflow-y: auto;
  }
  .wkg-drawer.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  .wkg-drawer > .wkc-drawer-head { display: flex; }
  .wkg-drawer .wkc-chat-rail-title { display: none; }   /* one "Live Chat" title: the drawer's */
}
@container wkc (max-width: 640px) {
  .wkg-hero { padding: 18px 16px; }
  .wkg-ring { width: 112px; height: 112px; }
  .wkg-ring svg { width: 112px; height: 112px; }
  .wkg-countdown { font-size: 15px; }
  .wkg-hero::before { inset: 35% 0 0 20%; opacity: .45; }
  .wkg-card { min-height: 176px; }
}
@media (prefers-reduced-motion: reduce) {
  .wkg-card, .wkg-card:hover, .wkr-trophy, .wkr-trophy:hover { transition: none; transform: none; }
  .wkr-bar > span, .wkg-ring-fill { transition: none; }
  .wkr-trophy::after, .wkr-tcard-art::after { display: none; }
  .wkg-drawer, .wkg-drawer.is-open { transition: none; }
}

/* ── /feed: the scored tabs and the right column (S9) ────────────────────── */
/* --wkc-feed-layout tells wkx-feed.js what shows: wide (three columns), two
   (the rail and My Profile / Online Now stacked beside the posts) or one (a
   narrow page: My Profile / Online Now in a drawer, no Trending This Week). */
.wkc-feed-grid { --wkc-feed-layout: two; }
.wkc-feed-slot:empty { display: none; }
.wkc-feed-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wkc-feed-side-body { min-width: 0; }
.wkc-feed-side-body:empty { display: none; }
.wkc-feed-tabbar { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 16px; }
.wkc-feed-tabbar > .wkc-feed-tabs { flex: 1 1 auto; min-width: 0; margin: 0; }
.wkc-feed-online-btn { display: none; }
.wkc-feed-trend { padding: 16px; margin: 0; max-width: none; }
.wkc-feed-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wkc-feed-trend-head .wkc-rail-title { margin: 0; }
.wkc-trend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wkc-trend-row { display: grid; grid-template-columns: 18px 40px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.wkc-trend-rank { font-weight: 850; color: #c4b5fd; text-align: center; font-variant-numeric: tabular-nums; }
.wkc-trend-art { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #10142a; cursor: pointer; }
.wkc-trend-art .wkc-cover { border-radius: 8px; }
.wkc-trend-play { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 11px; background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.wkc-trend-text { display: flex; flex-direction: column; min-width: 0; }
.wkc-trend-title { background: none; border: 0; padding: 0; color: var(--wkc-text); font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-trend-by { font-size: 11.5px; color: var(--wkc-muted); overflow-wrap: anywhere; }
.wkc-trend-plays { font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
.wkc-trend-art:focus-visible, .wkc-trend-play:focus-visible, .wkc-trend-title:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
/* Two columns (main | rail) up to 1100 px of page: the rail and My Profile /
   Online Now stack in the second column and scroll with the page; wider, a
   third column holds My Profile and Online Now, and both rails stay put
   (a 1440 px window: posts ~550 px, both right columns above the fold). */
.wkc-feed-grid > .wkc-feed-main { grid-row: 1 / span 2; }
.wkc-feed-grid > .wkc-feed-side { grid-column: 2; grid-row: 2; }
@container wkc (min-width: 901px) and (max-width: 1099px) {
  .wkc-feed-rail { position: static; max-height: none; overflow: visible; }
}
@container wkc (min-width: 1100px) {
  .wkc-feed-grid { --wkc-feed-layout: wide; grid-template-columns: minmax(0, 1fr) 290px 268px; gap: 0 20px; }
  .wkc-feed-grid > .wkc-feed-main { grid-row: 1; }
  .wkc-feed-grid > .wkc-feed-side { grid-column: 3; grid-row: 1; position: sticky; top: 12px; max-height: calc(100vh - 24px - var(--player-height, 80px)); overflow-y: auto; scrollbar-width: thin; }
}
@container wkc (min-width: 1100px) and (max-width: 1279px) {
  .wkc-post-body { grid-template-columns: 148px minmax(0, 1fr); gap: 14px; }
}
@container wkc (min-width: 1100px) {
  .wkc-feed-rail .wkc-feed-composer-input { font-size: 13.5px; }   /* the whole prompt on two lines in the 290 px rail */
}
/* One column (§9.7): the tab bar leads (with the Online Now button), then
   the composer, the weekly challenge and suggestions, then the posts; My
   Profile and Online Now are a drawer; Trending This Week is left out. */
@container wkc (max-width: 900px) {
  .wkc-feed-grid { --wkc-feed-layout: one; }
  .wkc-feed-grid > .wkc-feed-main { grid-row: auto; }
  .wkc-feed-tabbar { order: -2; margin-bottom: 12px; }
  [data-wkc-feed-trend] { display: none; }
  .wkc-feed-online-btn {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 38px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--wkc-border-strong); background: rgba(10, 12, 26, .8); color: var(--wkc-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  .wkc-feed-online-btn:hover { background: rgba(255, 255, 255, .06); }
  .wkc-feed-online-btn:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
  .wkc-feed-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; }
  .wkc-feed-grid > .wkc-feed-side.wkc-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 10040; width: min(380px, 100vw); display: block; max-height: none;
    padding: 14px 14px calc(var(--player-height, 80px) + 18px); overflow-y: auto; background: var(--wkc-panel-solid);
    border-left: 1px solid var(--wkc-border-strong); box-shadow: -18px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  .wkc-feed-grid > .wkc-feed-side.wkc-drawer.is-open { transform: none; visibility: visible; transition: transform .22s ease; }
  .wkc-feed-side.wkc-drawer > .wkc-drawer-head { display: flex; }
  .wkc-feed-side-body .wkr-stack { gap: 12px; }
}
/* A phone: a compact rail so the first post is in view */
@container wkc (max-width: 640px) {
  .wkc-feed-tabbar { gap: 8px; }
  .wkc-feed-online-btn { padding: 0 10px; }
  [data-wkc-feed-rail-a] .wkr-weekly { padding: 10px 12px; gap: 10px; }
  [data-wkc-feed-rail-a] .wkr-weekly-art { width: 44px; height: 44px; border-radius: 10px; }
  [data-wkc-feed-rail-a] .wkr-weekly-title { font-size: 15px; }
  [data-wkc-feed-rail-a] .wkr-weekly-desc { display: none; }
  .wkc-feed-suggest { padding: 10px 12px; }
  .wkc-feed-suggest .wkc-sugg { flex: 0 0 min(290px, 88%); flex-direction: row; align-items: center; gap: 8px; }   /* one row: who, then Follow */
  .wkc-feed-suggest .wkc-sugg > .wkc-follow { align-self: center; flex: 0 0 auto; }
  .wkc-feed-suggest .wkc-sugg-who .wkc-avatar { width: 32px; height: 32px; }
  .wkc-feed-suggest .wkc-sugg-why { -webkit-line-clamp: 1; line-clamp: 1; }
}
/* One column: the tab strip scrolls under the Online Now button: its end fades (the last tab scrolls clear) */
@container wkc (max-width: 900px) {
  .wkc-feed-tabbar > .wkc-feed-tabs {
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
/* A phone: the tabs get the whole row; the Online Now button (it sat
   against a half-shown tab) takes its own line above them, at the right. */
@container wkc (max-width: 640px) {
  .wkc-feed-tabbar { flex-wrap: wrap; row-gap: 10px; }
  .wkc-feed-tabbar > .wkc-feed-tabs { flex: 1 1 100%; order: 1; }
  .wkc-feed-online-btn { order: 0; margin-left: auto; min-height: 34px; }
}
/* A phone's post: a 96 px square beside the title and caption, then the player, chips and actions at full
   width (the play button and waveform come up into view; no empty column beside a 220 px art) */
@container wkc (max-width: 460px) {
  .wkc-post-body { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; row-gap: 0; }
  .wkc-post-main { display: contents; }
  .wkc-post-art { max-width: none; grid-row: 1 / span 2; margin-bottom: 10px; }
  .wkc-post-title, .wkc-post-caption { grid-column: 2; }
  .wkc-post-main > :not(.wkc-post-title):not(.wkc-post-caption) { grid-column: 1 / -1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wkc-feed-grid > .wkc-feed-side.wkc-drawer, .wkc-feed-grid > .wkc-feed-side.wkc-drawer.is-open { transition: none; }
}

/* A profile's Level (S9) */
.wkc-prof-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 24px 0; max-width: 520px; }
.wkc-prof-level-name { font-weight: 850; font-size: 14px; }
.wkc-prof-level-rank { font-size: 12px; color: #c4b5fd; font-weight: 700; }
.wkc-prof-level-bar { flex: 1 1 160px; min-width: 120px; }
.wkc-prof-level-xp { font-size: 12px; color: var(--wkc-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .wkc-prof-level { margin-left: 16px; margin-right: 16px; }
}

/* ── Stories (S11): the Feed's row, the viewer and the composer ────────── */
/* The row shows only while a live story exists (wkx-stories.js hides its slot). No LIVE badge. */
.wkc-feed-stories[hidden], .wkc-feed-stories:empty { display: none; }
.wkc-stories { margin: 0 0 14px; min-width: 0; }
.wkc-stories-list {
  list-style: none; margin: 0; padding: 4px 2px 8px; display: flex; gap: 14px; overflow-x: auto;
  scrollbar-width: thin; scroll-snap-type: x proximity; min-width: 0;
}
.wkc-story-item { position: relative; flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; }
.wkc-story-ring {
  width: 68px; height: 68px; padding: 3px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(148, 163, 255, .28); display: grid; place-items: center; box-sizing: border-box;
}
.wkc-story-ring.is-unseen { background: conic-gradient(from 210deg, #a78bfa, #60a5fa, #22d3ee, #a78bfa); }
.wkc-story-ring.is-empty { background: transparent; border: 1px dashed rgba(148, 163, 255, .4); }
.wkc-story-ring .wkc-avatar { width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--wkc-bg); box-sizing: border-box; object-fit: cover; }
.wkc-story-add {
  position: absolute; top: 46px; left: 55px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 2px solid var(--wkc-bg); background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
  font: 800 14px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center;
}
.wkc-story-ring:focus-visible, .wkc-story-add:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
.wkc-story-name { max-width: 84px; font-size: 11.5px; color: var(--wkc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-story-item.is-own .wkc-story-name { color: var(--wkc-text); font-weight: 650; }
@container wkc (max-width: 900px) {
  .wkc-feed-stories { order: -2; }      /* with the tab bar (after it in the page): tabs, then rings */
}

/* The viewer: a 9:16 card over the page (the whole window on a phone) */
.wkc-story-overlay { align-items: center; padding: 16px; background: rgba(3, 4, 10, .9); }
.wkc-story-stage { display: flex; align-items: center; gap: 16px; max-width: 100%; }
.wkc-story-card {
  position: relative; width: min(420px, calc(100vw - 132px), calc((100vh - 32px) * 9 / 16)); aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden; background: #0b0e1c; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); color: #fff;
}
.wkc-story-bars { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.wkc-story-bar { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.wkc-story-bar-fill { display: block; height: 100%; width: 0; background: #fff; }
.wkc-story-head { position: absolute; top: 20px; left: 8px; right: 8px; display: flex; align-items: center; gap: 4px; z-index: 3; min-width: 0; }
.wkc-story-who { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.wkc-story-who .wkc-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.wkc-story-who-text { display: flex; flex-direction: column; min-width: 0; }
.wkc-story-who-name { font-weight: 800; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkc-story-who-sub { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 11.5px; color: rgba(255, 255, 255, .8); }
.wkc-story-aud { padding: 0 6px; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.wkc-story-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .3); color: #fff; font-size: 14px; cursor: pointer; }
.wkc-story-media { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.wkc-story-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.wkc-story-textbox { padding: 84px 28px 64px; }
.wkc-story-text { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.3; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.wkc-story-audio { flex-direction: column; gap: 14px; padding: 84px 24px 72px; }
.wkc-story-audio-play { position: relative; z-index: 3; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: #1e1b4b; font-size: 20px; cursor: pointer; }
.wkc-story-wave { width: 100%; height: 72px; }
.wkc-story-wave .wkc-wave { display: block; width: 100%; height: 100%; }
.wkc-story-wave path { stroke: rgba(255, 255, 255, .85); }
.wkc-story-audio-time { font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.wkc-story-note { margin: 0; font-size: 12.5px; text-align: center; }
.wkc-story-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 18px 18px 22px; font-size: 14.5px; line-height: 1.4;
  text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.wkc-story-card.has-foot .wkc-story-caption { padding-bottom: 52px; }   /* above the owner's Seen by */
.wkc-story-foot { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; display: flex; justify-content: center; }
.wkc-story-foot .wkc-btn { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .3); }
.wkc-story-zone { position: absolute; top: 72px; bottom: 56px; z-index: 1; width: 32%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.wkc-story-zone.is-prev { left: 0; }
.wkc-story-zone.is-next { right: 0; }
.wkc-story-nav { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.wkc-story-nav:disabled { opacity: .3; cursor: default; }
.wkc-story-nav:focus-visible, .wkc-story-icon:focus-visible, .wkc-story-who:focus-visible, .wkc-story-audio-play:focus-visible,
.wkc-story-zone:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 2px; }
@media (max-width: 560px) {
  .wkc-story-overlay { padding: 0; }
  .wkc-story-stage { width: 100%; height: 100%; }
  .wkc-story-nav { display: none; }
  .wkc-story-card { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  /* full-bleed: the caption stays clear of the app's corner Backend pill (bottom right, above every overlay) */
  .wkc-story-card:not(.has-foot) .wkc-story-caption { padding-bottom: 68px; }
}
/* The owner's Seen by list, over the viewer */
.wkc-story-viewers { max-width: 420px; }
.wkc-story-viewer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.wkc-story-viewer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }

/* The composer */
.wkc-story-composer .wkc-story-kinds { margin-bottom: 14px; }
.wkc-story-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.wkc-story-pick-preview { width: 108px; aspect-ratio: 9 / 16; border-radius: 12px; border: 1px dashed var(--wkc-border-strong); display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, .03); text-align: center; padding: 4px; box-sizing: border-box; }
.wkc-story-pick-preview img { width: 100%; height: 100%; object-fit: contain; }
.wkc-seg-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wkc-pub-modal [data-wkc-pub-clip-range] { display: block; margin: -6px 0 14px; }

/* Clips (S11): the kind chip on feed cards and the creation page */
.wkc-clip-chip { border-color: rgba(34, 211, 238, .45); color: #a5f3fc; }
/* A profile's story ring: its avatar opens the member's live stories */
.wkc-prof-avatar-story { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.wkc-prof-avatar-story > .wkc-avatar { outline: 3px solid rgba(148, 163, 255, .45); outline-offset: 3px; }
.wkc-prof-avatar-story.is-unseen > .wkc-avatar { outline-color: #8b5cf6; }
.wkc-prof-avatar-story:focus-visible { outline: 2px solid var(--wkc-cyan); outline-offset: 6px; }
/* Narrow profiles: Publish a song takes its own line and the tabs wrap, so none
   (Saved, after the S11 Clips tab) is ever scrolled out of sight */
@container wkc (max-width: 560px) {
  .wkc-tabs-row { flex-wrap: wrap; }
  .wkc-tabs-row .wkc-tabs { flex: 1 1 100%; flex-wrap: wrap; overflow-x: visible; }
}