/* ============================================================
   COMMUNITY — studio theme layer  (relaunch Phase 5)
   Loaded via {% block extra_head %} on the community pages, so
   it lands AFTER the global theme CSS and owns the community look.

   The community templates/JS no longer use memphis-* classes:
   per-tag colour comes from [data-tag-color], the like heart from
   [aria-pressed], and everything else from the studio tokens
   (see tokens.css / build.css). Nothing here composes a colour
   into a class name, so JS never builds bg-memphis-<colour>.
   ============================================================ */

/* ---- Buttons: a11y contrast fix ----------------------------
   .lw-btn--primary uses --accent (#6366f1) = 4.46:1 on white, just
   under WCAG AA at small font sizes (matches the note in legacy.css
   for .btn-memphis). Community primary buttons use --accent-strong
   (#4f46e5, passes). This sheet only loads on community pages, so the
   override is scoped to them. */
.lw-btn--primary { background: var(--accent-strong); }
[data-theme="build"] .lw-btn--primary:hover,
[data-theme="home"] .lw-btn--primary:hover { background: color-mix(in srgb, var(--accent-strong) 85%, black); }

/* ---- Card ---------------------------------------------------
   Replaces `card-memphis bg-memphis-white`. No hover-lift by
   default (panels/comments stay put); add --hover for the
   clickable feed cards. */
.community-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.community-card--hover {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.community-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
/* Admin / pinned emphasis stripe */
.community-card--accent { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

/* ---- Tinted notes / banners --------------------------------
   Read-only banner, moderation status, locked comment box, etc.
   Light tint of a signal colour + an AA-safe deep-ink for icons
   and emphasis (--note-ink), body text stays var(--ink). */
.community-note {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.community-note--warn {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  --note-ink: #8a6d0f;
}
.community-note--info {
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
  --note-ink: #0f766e;
}
.community-note--accent {
  background: color-mix(in srgb, var(--accent-3) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-3) 45%, var(--line));
  --note-ink: #b4552a;
}
.community-note--danger {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  --note-ink: #b42318;
}
.community-note__ink { color: var(--note-ink, var(--ink)); }

/* ---- Tags ---------------------------------------------------
   Categorical hue carried by --tag (keyed on [data-tag-color]),
   text leans on --ink so contrast holds for every hue. The
   attribute selector wins over the base .community-tag rule via
   specificity, so ordering in this file doesn't matter. */
.community-tag {
  --tag: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tag) 12%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, var(--tag));
  border: 1px solid color-mix(in srgb, var(--tag) 30%, var(--line));
}
.community-tag[data-tag-color="pink"]   { --tag: #d16a86; }
.community-tag[data-tag-color="teal"]   { --tag: var(--signal); }
.community-tag[data-tag-color="purple"] { --tag: var(--accent-2); }
.community-tag[data-tag-color="coral"]  { --tag: var(--accent-3); }
.community-tag[data-tag-color="yellow"] { --tag: #c39412; }
.community-tag[data-tag-color="gray"]   { --tag: var(--muted); }

/* Interactive filter/picker chip */
.community-tag--btn {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.community-tag--btn:hover {
  background: color-mix(in srgb, var(--tag) 20%, transparent);
  border-color: color-mix(in srgb, var(--tag) 45%, var(--line));
}
.community-tag--btn.is-active {
  background: color-mix(in srgb, var(--tag) 22%, transparent);
  border-color: color-mix(in srgb, var(--tag) 60%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag) 26%, transparent);
}
.community-tag--locked { opacity: .6; }
/* "students" sub-badge on course tags */
.community-tag__students {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}

/* ---- Author course badges (enrollment) ---------------------
   Small round course-badge icons beside an author's name. Each
   links to its course and reveals the badge name on hover/focus
   through a pure-CSS tooltip (the card doesn't clip, so it can
   float above). Colours use theme tokens so both themes adapt. */
.community-badges {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.community-badge {
  position: relative;
  display: inline-flex;
  line-height: 0;
  border-radius: 9999px;
}
.community-badge__img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.community-badge:hover .community-badge__img,
.community-badge:focus-visible .community-badge__img {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.community-badge:focus-visible {
  outline: none;
}
/* Tooltip bubble (badge name), floated above the icon */
.community-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.community-badge:hover::after,
.community-badge:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .community-badge__img,
  .community-badge::after { transition: none; }
}

/* ---- Like heart --------------------------------------------
   Filled + coloured purely from aria-pressed (JS just flips the
   attribute). --like keeps the familiar pink without a memphis
   class. */
.community-like {
  --like: #d94f7d;
  color: var(--muted);
  transition: color .15s ease;
}
.community-like:hover { color: var(--like); }
.community-like[aria-pressed="true"] { color: var(--like); }
.community-like[aria-pressed="true"] svg { fill: currentColor; }

/* Sidebar nav / filter links — active state driven by .is-active so
   feed.js toggles one class instead of composing colour utilities. */
.community-navlink {
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.community-navlink:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.community-navlink.is-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
  font-weight: 500;
}

/* Pending / awaiting-review badge (colour flipped to error by JS via .is-error) */
.community-pending { color: #8a6d0f; }
.community-pending.is-error { color: var(--danger); }

/* Mobile filter pill (All / Unanswered) — .is-active toggled by feed.js,
   same hook as the sidebar .community-navlink. */
.community-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.community-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 20%, var(--line)); }
.community-chip.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* Avatar fallback tile (no profile picture) */
.community-avatar {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--line);
  color: var(--accent);
}

/* Secondary action icon buttons (comment link, report, menu) */
.community-action { color: var(--muted); transition: color .15s ease; }
.community-action:hover { color: var(--ink); }
.community-action--signal:hover { color: var(--signal); }
.community-action--danger:hover { color: var(--danger); }

/* ---- Menus (⋯ dropdowns) -----------------------------------
   Replaces `bg-white border-2 border-memphis-black/10`. */
.community-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.community-menu__item { color: var(--ink); }
.community-menu__item:hover { background: var(--surface-2); }
.community-menu__item--danger { color: var(--danger); }
.community-menu__item--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ---- Mini editor -------------------------------------------
   Structural styling keyed on .mini-editor so both the template
   copy and the JS-built edit forms drop their utility classes. */
.mini-editor__toolbar {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.mini-editor__divider { width: 1px; height: 1rem; background: var(--line); margin: 0 .25rem; }
.mini-editor .editor-btn {
  padding: .375rem;
  border-radius: 6px;
  color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
.mini-editor .editor-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.mini-editor__input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  resize: none;
  font-family: var(--font-body);
}
.mini-editor__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- Collapsible composer (Twitter-style: compact until focused) ----------
   .community-composer starts .is-collapsed; JS removes that on focus/click. In
   the collapsed state we hide the formatting toolbar, char-count footer, and
   action bar, and shrink the textarea to a single line (with full rounding,
   since no toolbar sits above it). Only .community-composer forms collapse, so
   the inline edit editors are unaffected. */
.community-composer.is-collapsed .mini-editor__toolbar,
.community-composer.is-collapsed .mini-editor__footer,
.community-composer.is-collapsed .composer-actions,
.community-composer.is-collapsed #tags-selection {
  display: none;
}
.community-composer.is-collapsed .mini-editor__input {
  min-height: 0;
  height: 2.75rem;
  overflow-y: hidden;
  border-radius: var(--radius-sm);
}

/* Composer media toggle buttons — per-type accent keyed on data-type,
   active state via .is-active (JS toggles the class, not colour utils). */
.community-mediabtn {
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.community-mediabtn:hover,
.community-mediabtn.is-active {
  color: var(--mb, var(--accent));
  background: color-mix(in srgb, var(--mb, var(--accent)) 15%, transparent);
}
.community-mediabtn[data-type="image"] { --mb: var(--signal); }
.community-mediabtn[data-type="link"]  { --mb: var(--accent-2); }
.community-mediabtn[data-type="video"] { --mb: var(--danger); }

/* ---- Media-input sub-panels + plain fields -----------------
   Composer link/video/image sections and their url inputs. */
.community-panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.community-field {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.community-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.community-dropzone { border: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--radius-sm); }
.community-progress__track { background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--radius-pill); overflow: hidden; }
.community-progress__bar { background: var(--signal); height: 100%; transition: width .2s ease; }

/* ---- Search field (right panel + mobile bar) ---------------- */
.community-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: .875rem;
}
.community-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ============================================================
   Community-specific structural rules — migrated off the memphis
   CSS vars in custom.css onto tokens (same selectors, community
   scope only).
   ============================================================ */

.community-feed-wrapper {
  min-height: calc(100vh - 80px);
  padding-bottom: 3rem;
}
@media (max-width: 1023px) {
  .community-feed-wrapper { padding-bottom: 80px; }
}

/* Mobile bottom navigation */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(26, 26, 46, .06);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav__fab {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Skeleton loading — token gradient (keyframes live in custom.css) */
.skeleton-shimmer {
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    color-mix(in srgb, var(--surface-2) 40%, var(--surface)) 50%,
    var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-card { pointer-events: none; }
.skeleton-card:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; }

/* Mention autocomplete (rendered content links + dropdown) */
.mention-link { color: var(--accent); font-weight: 500; text-decoration: none; transition: color .15s ease; }
.mention-link:hover { color: var(--accent-strong); text-decoration: underline; }
.mention-dropdown {
  min-width: 200px;
  max-width: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.mention-item { transition: background-color .1s ease; }
.mention-item:hover,
.mention-item.is-active { background: var(--surface-2); }
.mention-item:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.mention-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.mention-item:only-child { border-radius: var(--radius-sm); }