/* ============================================================================
   Mushimu · Design System v2
   Content first. Chrome second. Brand in the details.

   This file is the last stylesheet loaded on every page (via the shared
   account fragment), so it is the final say in the cascade. It defines:

     0. Design tokens (palette, type, radii, motion, shadows)
     1. Global defaults (body, focus, selection, scrollbars)
     2. Controls (buttons, inputs, switches)
     3. Chrome (topbar, search, account, translation)
     4. Rails (navigation, discovery, footer)
     5. Feed (header, tabs, posts, votes, empty states)
     6. Communities (cards, avatars, detail header)
     7. Explore / search (hero, sections, rows)
     8. Auth + standalone pages
     9. Mobile (bottom nav, scale, touch targets)
    10. Mushimu iconography & brand details (~ mark, ~M empty states, shimmer)

   Rules of the system:
     - One accent (Mushimu coral). State colors only for meaning.
     - No glows, no glassmorphism, no gradients except brand moments.
     - Borders over shadows; shadows only on floating menus.
     - Radii: buttons 8 · inputs 10 · media 10 · cards 12 · popovers 12 · pills 999
     - Everything responds in 120–140ms.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* Palette — charcoal surfaces, warm coral brand accent */
  --bg:#090D12;
  --surface:#10161E;
  --surface-2:#161E28;
  --surface-hover:#1C2733;
  --post-hover:#141C25;
  --border:#293544;
  --border-subtle:rgba(226,232,240,.075);
  --text:#F2F0EB;
  --text-soft:#D0D5DC;
  --muted:#A6B0BE;
  --muted-2:#8996A7;
  --accent:#D97862;
  --accent-hover:#E68A73;
  --accent-soft:rgba(217,120,98,.14);
  --accent-ink:#090D12;
  --accent-blue:#8299A8;
  --accent-secondary:#8299A8;
  --accent-link:#E59A86;
  --brand-gradient:linear-gradient(135deg,#D97862,#B86D78);
  /* State colors — used only for meaning */
  --state:#4FBF9F;
  --state-soft:rgba(79,191,159,.12);
  --danger:#E5484D;
  --danger-soft:rgba(229,72,77,.12);
  --warning:#E0A458;
  --warning-soft:rgba(224,164,88,.12);

  /* Legacy token names used by older stylesheets */
  --accent-2:var(--accent-secondary);
  --accent-peach:var(--warning);
  --accent-pink:var(--muted);
  --success:var(--state);
  --hairline:rgba(255,255,255,.08);
  --surface-pressed:#263341;
  --text-primary:var(--text);
  --text-secondary:var(--muted);
  --text-tertiary:var(--muted-2);

  /* Radii */
  --radius-btn:8px;
  --radius-input:10px;
  --radius-media:10px;
  --radius-card:12px;
  --radius-popover:12px;
  --radius-pill:999px;
  --radius:var(--radius-card);
  --control-radius:var(--radius-btn);
  --control-radius-sm:var(--radius-btn);

  /* Typography */
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;

  /* Motion */
  --t-fast:120ms ease;
  --t:140ms ease;
  --t-slow:200ms ease;

  /* Shadows — floating menus only */
  --shadow-pop:0 1px 2px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.30);
  --shadow-soft:0 1px 2px rgba(0,0,0,.25);

  /* Controls */
  --control-h:36px;
  --control-h-sm:32px;
  --shell-header-height:60px;
  --mobile-feed-gap:8px;

  /* Community identity — deterministic hue, set per community by community-avatar.js */
  --m-h:232;
}

/* ---------------------------------------------------------------------------
   1. GLOBAL
   --------------------------------------------------------------------------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(244,122,96,.30);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{cursor:pointer}
button:active:not(:disabled){transform:translateY(1px)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

.eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--muted-2);
  text-transform:uppercase;
}
.section-heading .eyebrow,
.explore-hero .eyebrow{color:var(--muted-2)}

/* ---------------------------------------------------------------------------
   2. CONTROLS
   --------------------------------------------------------------------------- */
/* Primary — Mushimu coral. The only filled button. */
.primary{
  min-height:var(--control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:650;
  letter-spacing:-.01em;
  box-shadow:none;
  text-decoration:none;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast);
}
.primary:hover{background:var(--accent-hover)}
.primary:disabled{opacity:.5;cursor:not-allowed}

/* Secondary — bordered, quiet. */
.account-button,.membership-button,.text-button,.ghost{
  min-height:var(--control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--text-soft);
  font-weight:600;
  box-shadow:none;
  text-decoration:none;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.account-button:hover,.membership-button:hover,.text-button:hover,.ghost:hover{
  background:var(--surface-hover);
  border-color:#303D4D;
  color:var(--text);
}
.text-button{min-height:auto;padding:4px 0;border:0;background:transparent;color:var(--muted)}
.text-button:hover{background:transparent;color:var(--text);text-decoration:underline}
.membership-button.joined{color:var(--state);border-color:rgba(79,191,159,.30)}
.membership-button.joined:hover{color:var(--danger);border-color:rgba(229,72,77,.35);background:var(--danger-soft)}

/* Ghost — no border. Used inside rows and cards. */
.panel-action,.back,.feed-secondary-link,.rail-see-all{
  background:transparent;
  border:0;
  color:var(--muted);
  box-shadow:none;
}
.panel-action:hover,.back:hover,.feed-secondary-link:hover,.rail-see-all:hover{
  background:transparent;
  color:var(--text);
}
.feed-secondary-link.active{background:var(--accent-soft);color:var(--accent-hover)}
.feed-secondary-link.active:hover{background:var(--accent-soft);color:var(--accent-hover)}

/* Inputs — one step lighter than the page, never harsh. */
input:not([type=hidden]):not([type=radio]):not([type=checkbox]),
select,
textarea{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-input) !important;
  font-family:inherit;
  box-shadow:none !important;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
input:not([type=hidden]):not([type=radio]):not([type=checkbox]):hover,
select:hover,
textarea:hover{border-color:#303D4D !important}
input:not([type=hidden]):not([type=radio]):not([type=checkbox]):focus,
select:focus,
textarea:focus{
  outline:0 !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
}
input::placeholder,textarea::placeholder{color:var(--muted-2) !important;opacity:1}

/* Error & feedback */
.field-error,.vote-error{color:var(--danger) !important}
.form-error{
  border:1px solid rgba(229,72,77,.28) !important;
  background:var(--danger-soft) !important;
  color:#F2A0A4 !important;
  border-radius:var(--radius-btn);
}
.inline-form-feedback{
  border-color:rgba(224,164,88,.28) !important;
  background:var(--warning-soft) !important;
  color:var(--warning) !important;
}

/* ---------------------------------------------------------------------------
   3. CHROME — topbar, search, account, translation
   --------------------------------------------------------------------------- */
.topbar{
  height:60px;
  background:rgba(12,17,23,.92);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text);
}
.home-topbar{background:rgba(12,17,23,.92)}

/* Brand — the ~m mark carries the accent, nothing else does. */
.brand{color:var(--text)}
.brand-mark{
  color:var(--accent);
  text-shadow:none;
  font-family:var(--font-mono);
  letter-spacing:-.06em;
}
.brand-name{color:var(--text);letter-spacing:-.02em}
.brand:hover{transform:none;filter:none}
.brand:hover .brand-mark{color:var(--accent-hover)}

/* Header search */
.home .header-search input{
  height:40px;
  padding:10px 14px 10px 42px;
  border-radius:var(--radius-input) !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  font-size:13.5px;
}
.home .header-search input:hover{border-color:#303D4D !important}
.home .header-search:focus-within input{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
}
.search-leading-icon{stroke:var(--muted)}
.search-leading-icon .search-spark{stroke:var(--accent)}
.header-search:focus-within .search-leading-icon{stroke:var(--text)}
.header-search:focus-within .search-leading-icon .search-spark{stroke:var(--accent-hover)}

/* Search suggestions popover */
.search-suggestions{
  border:1px solid var(--border);
  border-radius:var(--radius-popover);
  background:var(--surface);
  box-shadow:var(--shadow-pop);
}
.suggestion-heading{color:var(--muted-2)}
.suggestion-row:hover,.suggestion-row.active{background:var(--surface-hover)}
.suggestion-mark{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(244,122,96,.22)}
.suggestion-community .suggestion-mark{background:var(--state-soft);color:var(--state);border-color:rgba(79,191,159,.24)}
.suggestion-post .suggestion-mark{background:var(--accent-soft);color:var(--accent);border-color:rgba(244,122,96,.24)}
.suggestion-all{color:var(--muted)}
.suggestion-all:hover{color:var(--text)}

/* Account menu */
.compact-account{color:var(--text)}
.notification-button{
  width:36px;height:36px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
  box-shadow:none;
}
.notification-button:hover{background:var(--surface-hover);border-color:#303D4D;color:var(--text)}
.notification-button svg{stroke:currentColor !important;fill:none;filter:none}
.notification-dot{
  background:var(--accent);
  color:var(--accent-ink);
  border:2px solid var(--bg);
  font-size:10px;
}
.account-chip{
  border:1px solid var(--hairline) !important;
  background:transparent !important;
  box-shadow:none;
}
.account-chip:hover{background:var(--surface-hover) !important;border-color:#303D4D !important}
.account-avatar{
  background:var(--brand-gradient);
  color:var(--accent-ink);
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  overflow:hidden;
}
.account-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.account-avatar.avatar-variant-official img{width:82%;height:82%;object-fit:contain}
.mobile-profile-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.mobile-profile-avatar.avatar-variant-official img{width:82%;height:82%;object-fit:contain}
.topbar .account-avatar:is(.avatar-variant-classic),.mobile-profile-avatar:is(.avatar-variant-classic){background:var(--surface-2);border-color:var(--border)}
.topbar .account-avatar.avatar-variant-aura,.mobile-profile-avatar.avatar-variant-aura{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,var(--surface-2)),var(--surface) 72%);border-color:color-mix(in srgb,var(--accent) 52%,var(--border));box-shadow:inset 0 0 12px color-mix(in srgb,var(--accent) 18%,transparent)}
.topbar .account-avatar.avatar-variant-constellation,.mobile-profile-avatar.avatar-variant-constellation{background:radial-gradient(circle at 22% 24%,#F2F0EB 0 1px,transparent 2px),radial-gradient(circle at 76% 30%,#B9C8D3 0 1px,transparent 2px),radial-gradient(circle at 68% 78%,#F2F0EB 0 1px,transparent 2px),linear-gradient(145deg,#17212C,#0B1016);border-color:color-mix(in srgb,var(--accent-blue) 58%,var(--border));box-shadow:none}
.account-name{font-family:var(--font-mono);font-size:12px;letter-spacing:-.02em;color:var(--text-soft)}
.account-popover-menu{
  border:1px solid var(--border);
  border-radius:var(--radius-popover);
  background:var(--surface);
  box-shadow:var(--shadow-pop);
}
.account-popover-menu a,.account-popover-menu form button{
  color:var(--text-soft);
  border-radius:var(--radius-btn);
}
.account-popover-menu a:hover,.account-popover-menu form button:hover{
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.account-popover-menu svg{stroke:var(--muted) !important;filter:none !important}
.account-popover-menu a:hover svg,.account-popover-menu form button:hover svg{stroke:var(--text) !important;filter:none !important}
.account-popover-menu .menu-warning svg{stroke:var(--danger) !important}
.account-popover-menu form button:hover svg{stroke:var(--danger) !important}
.compact-auth a{color:var(--muted);font-size:13px;font-weight:600}
.compact-auth a:hover{color:var(--text)}
.compact-auth .register-link{
  color:var(--accent-ink);
  background:var(--accent);
  border-radius:var(--radius-btn);
  padding:7px 12px;
}
.compact-auth .register-link:hover{background:var(--accent-hover);color:var(--accent-ink)}

/* Translation — quiet trigger, the popover carries the copy. */
.translation-menu-trigger{
  width:36px;height:36px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  transform:none;
}
.translation-menu-trigger:hover,.global-translation[open] .translation-menu-trigger{
  background:var(--surface-hover);
  border-color:#303D4D;
  color:var(--text);
  transform:none;
}
.translation-symbol svg path:first-child{stroke:var(--accent)}
.translation-active-dot{
  background:var(--state);
  border:2px solid var(--bg);
  box-shadow:none;
}
.translation-menu-panel{
  border:1px solid var(--border);
  border-radius:var(--radius-popover);
  background:var(--surface);
  box-shadow:var(--shadow-pop);
}
.translation-menu-mark{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:rgba(244,122,96,.24);
  border-radius:var(--radius-btn);
}
.translation-locale{
  font-family:var(--font-mono);
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--muted);
}
.translation-setting:hover{background:rgba(255,255,255,.04)}
.translation-switch{background:var(--surface-2);border-color:var(--border)}
.translation-setting input:checked + .translation-switch{
  background:var(--accent);
  border-color:var(--accent);
}
.translation-setting input:checked + .translation-switch:after{background:#fff}
.translation-settings-link{color:var(--muted)}
.translation-settings-link:hover{background:rgba(255,255,255,.04);color:var(--text)}

/* Per-post translation toggle (card level) */
.translation-toggle{
  width:32px;height:32px;
  border:0;
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
}
.translation-toggle:hover{background:var(--surface-hover);color:var(--text)}
.post-detail-copy .copy-line{display:flex;align-items:flex-start;gap:10px}
.post-detail-copy .copy-line>h1,.post-detail-copy .copy-line>.copy-body{min-width:0;flex:1}
.translation-request{
  width:36px;height:36px;min-width:36px;min-height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:0;border-radius:10px;background:rgba(18,25,35,.94);color:#aeb7c5;cursor:pointer;
  backdrop-filter:blur(10px);
}
.translation-request:hover,.translation-request:focus-visible{background:#22303B;color:var(--text);outline:2px solid var(--accent-2);outline-offset:2px}
.translation-request svg{width:16px;height:16px;flex:0 0 16px}
/* Inside a post card the toggle sits in the top-right corner, out of the text flow. */
.post-card{position:relative}
.post-card .translation-toggle{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
  border:0;
}
.home .post-card .translation-request{position:absolute;top:9px;right:9px;z-index:4}
.translation-toggle svg{filter:none}
.translation-state-badge{
  background:var(--state);
  color:#062B21;
  border:2px solid var(--surface);
  box-shadow:none;
}
.translation-note{color:var(--muted-2);font-size:11px}

/* ---------------------------------------------------------------------------
   4. RAILS — left navigation, right discovery, footer
   --------------------------------------------------------------------------- */
.home-nav a{
  min-height:42px;
  gap:12px;
  padding:9px 12px;
  border-radius:var(--radius-btn);
  color:var(--muted);
  font-weight:600;
  font-size:13.5px;
  background:transparent;
  box-shadow:none;
  transition:background var(--t),color var(--t);
}
.home-nav a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.home-nav a.active{
  background:var(--accent-soft);
  color:#FFD8CF;
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav-icon{
  color:var(--muted);
  transition:color var(--t);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.home-nav a:hover .nav-icon{color:var(--text)}
.home-nav a.active .nav-icon{color:var(--accent-hover)}
.nav-count{
  background:var(--accent-soft);
  color:#FFB19E;
  border:1px solid rgba(244,122,96,.25);
}

/* Create — primary CTA in the rail. Solid accent, no gradient, no glow. */
.rail-create,.rail-create-button{
  min-height:42px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:700;
  box-shadow:none;
  letter-spacing:-.01em;
}
.rail-create:hover,.rail-create-button:hover{
  background:var(--accent-hover);
  filter:none;
  transform:none;
}
.rail-create svg,.rail-create-button svg{stroke:currentColor;filter:none}
.rail-create .create-mark,.rail-create-button .create-mark{color:var(--accent-ink)}

/* Your communities */
.rail-heading{color:var(--muted-2);font-family:var(--font-mono);font-size:11px}
.rail-heading svg{stroke:var(--muted-2)}
.rail-community{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;
  border-radius:var(--radius-btn);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:-.01em;
  background:transparent;
  transition:background var(--t),color var(--t);
}
.rail-community:hover{background:rgba(255,255,255,.05);color:var(--text)}
.rail-community.active{background:var(--accent-soft);color:#FFD8CF}
.rail-see-all{color:var(--muted-2);font-size:11px}
.rail-see-all:hover{color:var(--text)}

/* Community avatar system — deterministic hue per community (see community-avatar.js).
   Fallback hue on :root keeps no-JS renders coherent. */
.community-glyph,
.community-avatar,
.community-result-mark,
.community-identity-mark,
.simple-community > span,
.community-card-distinct .community-mark,
.explore-community-mark,
.interest-mark,
.admin-community-mark,
.community-mini-mark{
  background:hsl(var(--m-h) 42% 18%);
  border:1px solid hsl(var(--m-h) 45% 30%);
  color:hsl(var(--m-h) 85% 76%);
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:-.03em;
}

/* Right rail — small blocks, no mega cards. */
.home-panel{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:none;
}
.home-panel-title{border-bottom:1px solid var(--border-subtle)}
.home-panel-title strong{font-size:12.5px;font-weight:650;color:var(--text)}
.home-panel-title a{color:var(--muted-2);font-size:11px}
.home-panel-title a:hover{color:var(--text)}
.discover-community{
  border-radius:var(--radius-btn);
  transition:background var(--t);
}
.discover-community:hover{background:rgba(255,255,255,.045)}
.discover-community strong{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:-.01em;
  color:var(--text);
}
.discover-community small{color:var(--muted-2);font-size:11px;font-variant-numeric:tabular-nums}
.discover-community .community-avatar{
  width:34px;height:34px;
  border-radius:9px;
  display:grid;place-items:center;
  font-size:12px;
}
.home-quick-links a{
  border-radius:var(--radius-btn);
  color:var(--text-soft);
  transition:background var(--t);
}
.home-quick-links a:hover{background:rgba(255,255,255,.045)}
.home-quick-links a strong{font-size:12.5px;font-weight:650;color:var(--text)}
.home-quick-links a small{color:var(--muted-2);font-size:11px}
.home-quick-links a b{color:var(--muted-2)}
.panel-action{font-size:12px}

/* Footer — present, but never competes. */
.home-footer{color:var(--muted-2);font-size:11px}
.home-footer a{display:inline-flex;align-items:center;min-height:28px;padding-inline:3px;color:var(--muted-2)}
.home-footer a:hover{color:var(--text)}
.home-footer small{color:var(--muted-2)}

/* ---------------------------------------------------------------------------
   5. FEED — header, tabs, posts, votes, empty states
   --------------------------------------------------------------------------- */
/* Header: Home + tabs + rule. Nothing else explains the page. */
.feed-header{
  position:sticky;
  top:var(--shell-header-height);
  z-index:6;
  margin:0;
  padding:0 18px;
  background:rgba(12,15,20,.92);
  backdrop-filter:blur(14px) saturate(1.1);
  border:0;
  border-bottom:1px solid var(--border-subtle);
  border-radius:0;
}
.feed-title-row h1{font-size:18px;font-weight:650;letter-spacing:-.02em;margin:0}
/* "Live feed" is chrome noise. */
.live-indicator{display:none}
/* Per-mode explanations: Home already explains itself. */
.feed-context{display:none}

/* Tabs — text first, with a restrained accent line marking the active choice. */
.home-tabs a,.tabs a,.community-tabs a,.search-filters a{
  position:relative;
  background:transparent;
  border:0;
  border-radius:var(--radius-btn);
  color:var(--muted);
  font-weight:600;
  font-size:13px;
  min-height:38px;
  padding:9px 13px;
  box-shadow:none;
  transition:background var(--t),color var(--t);
}
.home-tabs a:hover,.tabs a:hover,.community-tabs a:hover,.search-filters a:hover{
  background:rgba(255,255,255,.045);
  color:var(--text);
}
/* Tabs underline: neutral rules keep the row legible; the active rule uses the
   same solid accent across feeds, communities and filters. */
.home-tabs a::after,.tabs a::after,.community-tabs a::after,.search-filters a::after{
  content:"";
  position:absolute;
  left:13px;right:13px;bottom:4px;height:2px;
  background:var(--border,#303a4b);
  opacity:1;
  transform:translateY(0);
  transition:background var(--t),opacity var(--t),transform var(--t);
  pointer-events:none;
}
.home-tabs a.active,.tabs a.active,.community-tabs a.active,.search-filters a.active{
  background:transparent;
  color:#FFD8CF;
  box-shadow:none;
  border-color:transparent;
}
.home-tabs a.active::after,.tabs a.active::after,.community-tabs a.active::after,.search-filters a.active::after{
  bottom:5px;
  height:3px;
  border-radius:999px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='7' viewBox='0 0 30 7'%3E%3Cpath d='M1 4c2.3-2.8 4.7-2.8 7 0s4.7 2.8 7 0 4.7-2.8 7 0 4.7 2.8 7 0' fill='none' stroke='%23FF7A5C' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom/auto 5px;
  opacity:1;
}

/* Use the same solid, continuous active marker for every tab family. */
.home-tabs a.active::after,.tabs a.active::after,.community-tabs a.active::after,.search-filters a.active::after{
  bottom:3px;
  height:2px;
  background:var(--accent,#F47A60);
}

/* Mobile home feed: four equal-width tabs so translations and label length
   cannot make the navigation look off-centre. */
@media(max-width:680px){
  .feed-header{padding-inline:0}
  .feed-header-row{width:100%}
  .home-tabs{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    overflow:visible;
  }
  .home-tabs a{
    width:100%;
    min-width:0;
    min-height:50px;
    padding:10px 4px;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    font-size:14px;
    border-radius:0;
  }
  .home-tabs a::after{
    left:50%;
    right:auto;
    width:48px;
    bottom:3px;
    transform:translateX(-50%);
  }
  .home-tabs a.active::after{
    bottom:4px;
    transform:translateX(-50%);
  }
}
@media(max-width:390px){
  .home-tabs a{font-size:13px;padding-inline:2px}
  .home-tabs a::after{width:42px}
}

/* Feed surface — a continuous timeline, not a stack of boxes. */
.home-feed{gap:0;border:0;border-radius:0;background:transparent;overflow:visible}
.feed-reason-row{background:transparent;min-height:0;padding:10px 18px 0}
.feed-reason-row .feed-reason{font-size:11.5px;color:var(--muted-2)}
.feed-hide{color:var(--muted-2);font-size:11px;border-radius:var(--radius-btn);background:transparent}
.feed-hide:hover{background:rgba(255,255,255,.05);color:var(--text)}
.feed-hidden-placeholder{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  border-radius:var(--radius-card);
}
.feed-hidden-placeholder::before{background:var(--muted-2)}
.feed-hidden-show{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-soft);
  border-radius:var(--radius-pill);
}
.feed-hidden-show:hover{background:var(--accent-soft);border-color:rgba(244,122,96,.35);color:#FFD8CF}

/* Post — editorial density. */
.home .mixed-feed .post-card{overflow:visible}
.home .post-card{
  margin:0;
  padding:18px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border-subtle);
  border-radius:0 !important;
  box-shadow:none;
  overflow:visible;
  transition:background var(--t);
}
.home .post-card:hover{
  background:var(--post-hover);
  transform:none;
  box-shadow:none;
  border-bottom-color:var(--border-subtle);
}
.home .post-card .meta{font-size:12.5px;color:var(--muted-2);align-items:center}
.home .post-card .meta a{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:-.01em;
}
.home .post-card .meta a:hover{color:var(--text)}
.home .post-card .meta time{color:var(--muted-2)}
.home .post-card .meta .eyebrow{color:var(--warning)}
.home .post-card .post-link h3,
.home .post-card .post-link h2{
  font-size:17px;
  font-weight:600;
  line-height:1.38;
  letter-spacing:-.015em;
  color:var(--text);
  margin:9px 0 6px;
}
.home .post-card .post-link p{
  font-size:15px;
  line-height:1.55;
  color:var(--text-soft);
}
.home .post-card .post-media,
.home .post-card [data-content-preview]{border-radius:var(--radius-media) !important}
.post-source{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent-blue);
  border:1px solid var(--border-subtle);
  background:rgba(255,255,255,.03);
  border-radius:var(--radius-btn);
  padding:4px 9px;
  font-family:var(--font-mono);
  font-size:11.5px;
}
.post-source:hover{background:var(--surface-hover);color:#FFB19E}
.post-source svg{
  width:13px;
  height:13px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.poll-preview{
  background:var(--accent-soft) !important;
  border:1px solid rgba(244,122,96,.28) !important;
  border-radius:var(--radius-btn);
  color:var(--text);
}
.poll-preview:hover{background:rgba(244,122,96,.20) !important}

/* Vote — the signature capsule. Light, geometric, one accent. */
.vote-controls{
  display:inline-flex !important;
  align-items:center;
  gap:2px;
  margin:0;
  padding:3px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.025);
  box-shadow:none;
  position:static;
  isolation:auto;
  overflow:visible;
}
.vote-controls::before{display:none}
.vote-controls button{
  width:30px;height:30px;
  min-width:30px;min-height:30px;
  padding:0;
  border:0 !important;
  border-radius:var(--radius-pill);
  background:transparent !important;
  color:var(--muted-2);
  display:grid;place-items:center;
  box-shadow:none !important;
  transition:color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.vote-controls button::after{display:none}
.vote-controls button svg{
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--t-fast);
  filter:none;
}
.vote-controls button:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.05)}
.vote-controls button:active:not(:disabled){transform:scale(.9)}
.vote-controls button.selected{color:var(--accent);background:var(--accent-soft)}
.vote-controls button.selected svg{transform:scale(1.05)}
.vote-controls button:first-of-type.selected{color:var(--accent);background:var(--accent-soft)}
.vote-controls button:last-of-type.selected{color:var(--danger);background:var(--danger-soft)}
.vote-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vote-controls button:disabled{opacity:.4;cursor:not-allowed}
.vote-controls output{
  min-width:32px;height:26px;
  display:grid;place-items:center;
  padding:0 8px;
  border-left:1px solid var(--border-subtle);
  border-right:1px solid var(--border-subtle);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  text-shadow:none;
}
.vote-controls:has(button:first-of-type.selected) output{color:#FFB19E}
.vote-controls:has(button:last-of-type.selected) output{color:#F2B8BA}

/* Shared Mushimu branding for empty states. */
.empty,.home-empty,.community-empty{
  border:1px dashed var(--border);
  border-radius:var(--radius-card);
  background:transparent;
  padding:44px 22px;
  text-align:center;
  margin-top:14px;
}
.empty::before,.home-empty::before,.community-empty::before{
  content:"";
  display:block;
  width:72px;height:48px;
  margin:0 auto 12px;
  background:url("/branding/mushimu-mark-39b6fd7200f458a2ed68a347dc6333e9.svg") center/contain no-repeat;
}
.empty strong,.home-empty strong,.community-empty strong{font-size:15px;font-weight:600;color:var(--text)}
.empty p,.home-empty p,.community-empty p{margin:7px 0 0;font-size:13px;color:var(--muted)}
.empty a,.home-empty a,.community-empty a{color:var(--accent-hover)}

/* Shell navigation loading — quiet shimmer, no spinners. */
#shell-main{transition:opacity var(--t)}
#shell-main[aria-busy="true"]{opacity:.55;pointer-events:none}
@keyframes mushimu-shimmer{
  0%{background-position:-160px 0}
  100%{background-position:160px 0}
}
.mushimu-shimmer{
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  background-size:160px 100%;
  background-repeat:no-repeat;
  animation:mushimu-shimmer 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   6. COMMUNITIES — discovery list, detail header
   --------------------------------------------------------------------------- */
.communities-page{max-width:820px}
.communities-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 6px}
.communities-heading h1{font-size:28px;font-weight:650;letter-spacing:-.03em;margin:6px 0 4px}
.communities-heading p{margin:0;font-size:13.5px;color:var(--muted)}
.communities-heading-actions{display:flex;gap:8px;align-items:center}
.community-home-link{color:var(--muted);font-size:13px}
.community-home-link:hover{color:var(--text)}

.community-tabs{margin:14px 0 4px}
.community-mode-copy{padding:6px 2px 12px;font-size:12.5px;color:var(--muted-2)}
.community-mode-copy strong{font-weight:600;color:var(--muted)}
.community-mode-copy span{color:var(--muted-2)}

.community-discovery-list{display:grid;gap:8px}
.community-result{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface);
  transition:background var(--t),border-color var(--t);
}
.community-result:hover{background:var(--surface-2);border-color:var(--border)}
/* The whole card is the link. */
.community-result .community-result-mark{cursor:pointer}
.community-result .community-result-mark::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:var(--radius-card);
}
/* Arrow appears on hover — replaces the old "Enter →" button. */
.community-result-arrow{
  position:absolute;
  right:18px;top:50%;
  z-index:1;
  color:var(--muted);
  font-size:15px;
  opacity:0;
  transform:translate(6px,-50%);
  transition:opacity var(--t),transform var(--t),color var(--t);
  pointer-events:none;
}
.community-result:hover .community-result-arrow{opacity:1;transform:translate(0,-50%);color:var(--text)}
.community-result-mark{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:10px;
  font-size:14px;
  z-index:1;
}
.community-result-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.community-result-title h2{
  font-family:var(--font-mono);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text);
  margin:0;
}
.community-result-title a{color:inherit}
.joined-pill{
  background:var(--state-soft);
  color:var(--state);
  border:1px solid rgba(79,191,159,.28);
  border-radius:var(--radius-pill);
  font-size:10.5px;
  font-weight:700;
  padding:2px 9px;
  letter-spacing:.02em;
}
.community-result-body p{
  margin:6px 26px 8px 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.community-signal-row{
  display:flex;
  align-items:center;
  gap:4px 14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.community-signal-row b{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:-.02em;
}
/* "Enter →" is redundant when the card is the link. */
.community-enter{display:none}

/* Mixed-feed community cards (home timeline) */
.community-discovery-card,
.community-card-distinct{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:none;
}
.community-card-distinct .community-mark{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:10px;
  font-size:15px;
}
.community-card-distinct h3,
.community-card-distinct h2{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.015em;
  margin:3px 0 0;
}
.community-open{color:var(--muted);font-size:12.5px}
.community-open:hover{color:var(--text)}
.content-kind{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.10em;
  color:var(--muted-2);
  text-transform:uppercase;
}

/* Community detail header */
.community-identity{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:none;
}
.community-identity-mark{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:12px;
  font-size:20px;
  padding-bottom:5px;
}
.community-identity h1{
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
}
.community-identity p{color:var(--muted);font-size:13.5px}
.community-back{color:var(--muted);font-size:13px}
.community-back:hover{color:var(--text)}
.community-feed-tabs{gap:2px}
.community-post-feed{padding:14px 0}

/* ---------------------------------------------------------------------------
   7. EXPLORE / SEARCH
   --------------------------------------------------------------------------- */
.explore-v2{background:var(--bg);min-height:100vh}
.explore-shell{max-width:960px;margin:0 auto;padding:44px 22px 90px}
.explore-hero{max-width:640px;margin:0 0 40px;text-align:left}
.explore-hero:after{display:none}
.explore-hero h1{font-size:30px;line-height:1.12;letter-spacing:-.035em;margin:8px 0 8px;font-weight:650}
.explore-hero > p{margin:0;font-size:14px;color:var(--muted);max-width:480px}
.explore-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  max-width:560px;
  margin:22px 0 0;
  padding:6px;
  border:1px solid var(--border);
  border-radius:var(--radius-popover);
  background:var(--surface);
  box-shadow:none;
  transition:border-color var(--t),box-shadow var(--t);
}
.explore-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.explore-search input{
  min-height:40px;
  font-size:14px;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 12px;
}
.explore-search input::placeholder{color:var(--muted-2) !important}
.explore-search .primary{min-height:40px}

.section-heading{
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:34px 0 4px;
  padding:0 0 12px;
  border-bottom:1px solid var(--border-subtle);
}
.section-heading h2{font-size:17px;font-weight:650;letter-spacing:-.02em;margin:4px 0 0}
.section-heading > a{color:var(--muted);font-size:12.5px;font-weight:600}
.section-heading > a:hover{color:var(--text)}

.simple-explore{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;margin-top:8px}
.simple-post{
  display:grid;
  grid-template-columns:16px minmax(0,1fr) auto;
  gap:12px;
  padding:15px 2px;
  border-bottom:1px solid var(--border-subtle);
  align-items:start;
  color:inherit;
}
.simple-post:first-child{border-top:1px solid var(--border-subtle)}
.simple-post strong{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.4}
.simple-post:hover strong{color:var(--text)}
.simple-post p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:4px 0}
.simple-post small,.simple-post > span:last-child{color:var(--muted-2);font-size:11px}
.post-dot{color:var(--accent);font-size:7px;margin-top:8px}
.simple-communities{padding-top:2px}
.simple-community{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:11px;
  padding:12px 0;
  border-bottom:1px solid var(--border-subtle);
  align-items:center;
  color:inherit;
}
.simple-community > span{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  font-size:13px;
}
.simple-community strong{font-family:var(--font-mono);font-size:13px;letter-spacing:-.01em;color:var(--text)}
.simple-community p{font-size:11px;color:var(--muted-2);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.connected-results{margin-top:8px}
.connected-columns{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;margin-top:8px}
.compact-result{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:11px;
  padding:13px 2px;
  border-bottom:1px solid var(--border-subtle);
  align-items:center;
  color:inherit;
}
.compact-result strong{font-size:13.5px;font-weight:600;color:var(--text)}
.compact-result p{font-size:11.5px;color:var(--muted);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-row{
  display:flex;align-items:center;gap:11px;
  padding:11px 2px;
  border-bottom:1px solid var(--border-subtle);
  color:inherit;
}
.person-avatar{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-soft);
  font-weight:700;
  font-size:12px;
}
.person-row strong{font-size:13px;color:var(--text);font-family:var(--font-mono);letter-spacing:-.01em}
.person-row small{font-size:11px;color:var(--muted-2)}
.person-row > span:last-child{color:var(--muted-2);margin-left:auto}
.all-results{margin-top:30px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.search-pagination{color:var(--muted-2)}
.search-pagination a{color:var(--muted)}
.search-pagination a:hover{color:var(--text)}

/* ---------------------------------------------------------------------------
   8. AUTH + STANDALONE PAGES
   --------------------------------------------------------------------------- */
body > .topbar,
.auth-page,
.composer-page,
.account-settings{color:var(--text)}
.auth-page{
  background:var(--bg);
  min-height:100vh;
}
.auth-page > h1{font-size:32px;font-weight:650;letter-spacing:-.03em}
.auth-page > .eyebrow{color:var(--muted-2)}
.auth-page > p,.auth-page > .feed-hint{color:var(--muted);font-size:13px}
.auth-page > .composer,.auth-page > .card{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:none;
}
.auth-page .primary{
  background:var(--accent) !important;
  color:var(--accent-ink) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.auth-page .primary:hover{background:var(--accent-hover) !important}
.auth-page .composer-actions a,.auth-page > .feed-hint a{color:var(--accent-hover)}
.auth-page .text-button{color:var(--muted)}
.auth-page .text-button:hover{color:var(--text)}
.auth-page .auth-notice,.auth-page p[role="status"]{
  border:1px solid rgba(79,191,159,.28) !important;
  background:var(--state-soft) !important;
  color:var(--state) !important;
  border-radius:var(--radius-btn);
}
.auth-page .form-error{
  border-color:rgba(229,72,77,.28) !important;
  background:var(--danger-soft) !important;
  color:#F2A0A4 !important;
}
.google-auth-button{box-shadow:none}
.google-auth-button:hover{box-shadow:none}
.oauth-entry{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.back{color:var(--muted);font-size:13px}
.back:hover{color:var(--text)}

/* Standalone settings/admin surfaces */
.card,.panel{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:none;
}
.account-settings > .card{background:var(--surface);border-color:var(--border-subtle)}
.admin-action{background:var(--surface);border-color:var(--border-subtle)}
.admin-action:hover{background:var(--surface-2);border-color:var(--border)}

/* Post detail + comments inherit the same density */
.post-hero-card,.thread-post{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:none;
}
.comment{border-left-color:var(--border) !important}
.comment .comment-meta a{font-family:var(--font-mono);font-size:12px}
.comment-composer{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
}
.report-box summary,.report-box form{background:var(--surface-2)}
.saved-post-list:empty::after,.post-save-list:empty::after{color:var(--muted-2)}

/* ---------------------------------------------------------------------------
   9. MOBILE — a larger, calmer scale
   --------------------------------------------------------------------------- */
@media (max-width:680px){
  body{font-size:16px}
  .home .home-topbar{min-height:60px;padding:8px 12px}
  .home .feed-header{top:var(--shell-header-height)}
  .home .post-card .post-link p{font-size:16px}
  .home .post-card .post-link h3,.home .post-card .post-link h2{font-size:17px}
  .home .post-card .meta{font-size:13px}
  .home .post-card .actions > a,
  .home .post-card .actions > .account-button{min-height:44px;font-size:13px}
  .vote-controls button{width:38px;height:38px;min-width:38px;min-height:38px}
  .vote-controls button svg{width:20px;height:20px}

}

/* ---------------------------------------------------------------------------
   10. ICONOGRAPHY & BRAND DETAILS
   --------------------------------------------------------------------------- */
/* All stroke icons share the same language: 1.8 weight, round caps. */
.home-nav svg,.mobile-bottom-nav svg,.nav-icon,
.account-popover-menu svg,.translation-symbol svg,.translation-menu-mark svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-nav svg,.nav-icon{color:inherit}

/* Brand mark ~M — used in empty states, onboarding, loaders. */
.mushimu-mark{
  display:inline-block;
  vertical-align:middle;
}
.mushimu-mark path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.mushimu-mark .wave{stroke:var(--accent)}
.mushimu-mark .wave-faint{stroke:var(--accent);opacity:.35}
.mushimu-mark .m{stroke:var(--muted-2)}

/* Skeleton — slow, quiet shimmer for loading blocks. */
.skeleton{
  background:var(--surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-btn);
  overflow:hidden;
  position:relative;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  background-size:160px 100%;
  background-repeat:no-repeat;
  animation:mushimu-shimmer 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* Mobile feed card breathing room: keep the desktop timeline continuous, but separate touch targets visually. */
@media (max-width: 680px) {
  .home-feed { gap: 6px; }
}


/* Post card actions — vote left, icon-only actions right, identical on desktop and mobile. */
.post-action-button{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
.home .post-card .actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:4px;
  width:100%;
  min-width:0;
}
.home .post-card .actions > .vote-controls{flex:0 0 auto}
.home .post-card .actions > .action-link,
.home .post-card .actions > .post-save-control,
.home .post-card .actions > .post-action-button{
  flex:0 0 auto;
  min-width:0;
  margin:0;
}
.home .post-card .actions > .vote-controls + .post-card-icon-action{margin-left:auto}
.home .post-card .post-save-control{display:flex}
.home .post-card .actions > .post-save-control > .post-action-button{width:36px}
.home .post-card .actions > .post-card-icon-action,
.home .post-card .actions > .post-save-control > .post-action-button{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
}
.home .post-card .actions > .post-card-icon-action:hover,
.home .post-card .actions > .post-card-icon-action:focus-visible,
.home .post-card .actions > .post-save-control > .post-action-button:hover,
.home .post-card .actions > .post-save-control > .post-action-button:focus-visible{
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.home .post-card .actions > .post-card-icon-action:active,
.home .post-card .actions > .post-save-control > .post-action-button:active{transform:scale(.94)}
.home .post-card .actions > .post-card-icon-action > span:not(.post-action-count),
.home .post-card .actions > .post-save-control > .post-action-button > span{display:none}
.home .post-card .actions > .post-card-icon-action:has(.post-action-count){
  width:auto;
  min-width:36px;
  padding:0 8px;
}
.home .post-card .actions > .post-card-icon-action svg,
.home .post-card .actions > .post-save-control > .post-action-button svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.home .post-card .actions > .post-save-control > .post-action-button[aria-pressed="true"]{
  color:var(--accent);
  background:var(--accent-soft);
}
.home .post-card .actions > .post-save-control > .post-action-button[aria-pressed="true"] svg{fill:currentColor}

@media (max-width:680px){
  .home .post-card .actions{gap:3px;overflow:visible}
  .home .post-card .actions > .post-save-control > .post-action-button,
  .home .post-card .actions > .post-card-icon-action{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }
  .home .post-card .actions > .post-card-icon-action:has(.post-action-count){
    width:auto;
    min-width:40px;
    padding:0 10px;
  }
  .home .post-card .vote-controls{
    gap:0;
    padding:2px;
  }
  .home .post-card .vote-controls button{
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
  }
  .home .post-card .vote-controls button svg{
    width:18px;
    height:18px;
  }
  .home .post-card .vote-controls output{
    min-width:28px;
    height:24px;
    padding:0 5px;
  }
}


/* ---------------------------------------------------------------------------
   11. UI CONSOLIDATION — shared interaction grammar
   --------------------------------------------------------------------------- */
.post-action-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  margin-top:14px;
  min-width:0;
}
.post-action-row>.vote-controls{flex:0 0 auto}
.post-action-row .post-primary-icons{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
}
.post-action-row .post-save-control{display:flex;margin:0}
.post-action-row .post-icon-action,
.post-action-row .post-save-action{
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  line-height:1;
  text-decoration:none;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.post-action-row .post-icon-action:hover,
.post-action-row .post-icon-action:focus-visible,
.post-action-row .post-save-action:hover,
.post-action-row .post-save-action:focus-visible{
  background:rgba(255,255,255,.05);
  border-color:transparent;
  color:var(--text);
}
.post-action-row .post-icon-action svg,
.post-action-row .post-save-action svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.post-action-row .muxi-chat-spark{fill:currentColor;stroke:none}
.post-action-row .post-action-label,
.post-action-row .post-save-action>span{display:none}
.post-action-row .post-action-count{
  display:inline-block;
  min-width:10px;
  margin-left:-1px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1;
  color:var(--muted);
  white-space:nowrap;
}
.post-action-row .post-view-stat{flex:0 0 auto;white-space:nowrap}
.post-action-row .post-detail-icon-action:has(.post-action-count){
  width:auto;
  min-width:36px;
  padding:0 9px;
}
.post-action-row .post-save-action[aria-pressed="true"]{
  color:var(--accent-hover);
  background:var(--accent-soft);
}
.post-action-row .post-save-action[aria-pressed="true"] svg{fill:currentColor}

.post-overflow{position:relative;flex:0 0 auto}
.post-overflow>summary{list-style:none}
.post-overflow>summary::-webkit-details-marker{display:none}
.post-overflow[open]>summary{background:rgba(255,255,255,.06);color:var(--text)}
.post-overflow-menu{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  z-index:45;
  width:min(310px,calc(100vw - 28px));
  padding:7px;
  border:1px solid var(--border);
  border-radius:var(--radius-popover);
  background:var(--surface-2);
  box-shadow:var(--shadow-pop);
}
.post-overflow-menu>a,
.post-overflow-menu>button,
.post-overflow-menu>form>button,
.post-overflow-menu>.post-overflow-submenu>summary{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:0;
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--text-soft);
  font:inherit;
  font-size:12px;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.post-overflow-menu>a:hover,
.post-overflow-menu>button:hover,
.post-overflow-menu>form>button:hover,
.post-overflow-menu>.post-overflow-submenu>summary:hover{
  background:var(--surface-hover);
  color:var(--text);
}
.post-overflow-menu>form{margin:0}
.post-overflow-menu>button svg,
.post-overflow-menu>form>button svg{
  width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round
}
.post-overflow-submenu{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.post-overflow-submenu>summary{list-style:none}
.post-overflow-submenu>summary::-webkit-details-marker{display:none}
.post-overflow-submenu[open]{
  margin:4px 0;
  padding:7px;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  background:var(--surface);
}
.post-overflow-submenu[open]>summary{color:var(--text)}
.post-overflow-submenu p{
  margin:5px 4px 8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.post-overflow-submenu form{display:grid;gap:7px;margin:6px 0 0}
.post-overflow-submenu textarea{min-height:76px;resize:vertical}
.post-overflow-submenu select{min-height:38px}
.post-overflow-submenu .danger-button,
.post-overflow-submenu .account-button{justify-self:start}

/* Post detail: content first, chrome second. */
.post-v2 .conversation-stack{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.post-v2 .post-hero-card{
  padding:24px 26px 22px;
  border-bottom:1px solid var(--border-subtle);
}
.post-v2 .post-compact-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 8px;
  color:var(--muted-2);
  font-size:12px;
}
.post-v2 .post-compact-meta a{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.post-v2 .post-compact-meta a:first-child{color:var(--accent-blue)}
.post-v2 .post-compact-meta a:hover{color:var(--text)}
.post-v2 .post-context-rail{gap:10px}
.post-v2 .related-panel{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:none;
}
.post-v2 .related-heading{border-bottom-color:var(--border-subtle);color:var(--text-soft)}
.post-v2 .related-heading>span{color:var(--accent)}
.post-v2 .related-post-row{border-bottom-color:var(--border-subtle)}
.post-v2 .related-post-row:hover{background:var(--surface-hover)}
.post-community-context h2{margin:5px 0 7px;font-size:18px}
.post-community-context p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.post-community-context>a{display:inline-flex;margin-top:10px;color:var(--accent-blue);font-size:12px;font-weight:650}

/* Communities: reduce decorative chrome and surface only decision-making signals. */
.communities-v2 .community-result:hover{background:rgba(244,122,96,.035)}
.communities-v2 .community-result-mark,
.community-detail-v2 .community-identity-mark{
  border-color:hsl(var(--m-h) 45% 30%);
  background:hsl(var(--m-h) 42% 18%);
  color:hsl(var(--m-h) 85% 76%);
}
.communities-v2 .joined-pill{
  border-color:rgba(79,191,159,.28);
  background:var(--state-soft);
  color:var(--state);
}
.community-detail-v2 .community-identity{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:none;
}
.community-detail-v2 .community-identity-main .eyebrow{display:none}
.community-detail-v2 .community-footer{border-top-color:var(--border-subtle)}
.community-detail-v2 .community-post-feed{gap:0}
.community-detail-v2 .community-post-feed .post-card{
  border-color:transparent;
  border-bottom-color:var(--border-subtle);
  border-radius:0;
  background:transparent;
}
.community-detail-v2 .community-post-feed .post-card:hover{
  border-color:transparent;
  border-bottom-color:var(--border-subtle);
  background:var(--post-hover);
  transform:none;
}

/* Composer: writing is primary; configuration is progressive disclosure. */
.composer-standalone .composer-page{max-width:820px;margin-top:28px;margin-bottom:96px}
.composer-standalone .composer-page>.hero{padding-bottom:16px;margin-bottom:16px}
.composer-standalone .composer-page>.hero h1{font-size:32px}
.composer-standalone .composer-page .composer{
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface);
  box-shadow:none;
}
.composer-standalone .composer-page .composer textarea[name="body"]{
  min-height:clamp(300px,45vh,520px);
  font-size:15px;
  line-height:1.6;
}
.media-help,.content-settings,.poll-composer{
  margin-top:4px;
  border:1px solid var(--border);
  border-radius:var(--radius-input);
  background:transparent;
}
.media-help>summary,.content-settings>summary,.poll-composer>summary{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  list-style:none;
  color:var(--text-soft);
  font-size:12px;
  font-weight:650;
  cursor:pointer;
}
.media-help>summary::-webkit-details-marker,
.content-settings>summary::-webkit-details-marker,
.poll-composer>summary::-webkit-details-marker{display:none}
.media-help>summary::after,.content-settings>summary::after,.poll-composer>summary::after{
  content:"＋";
  margin-left:auto;
  color:var(--muted-2);
  font-size:15px;
  font-weight:500;
}
.media-help[open]>summary::after,.content-settings[open]>summary::after,.poll-composer[open]>summary::after{content:"−"}
.content-settings>summary small{margin-left:auto;color:var(--muted-2);font-size:11px;font-weight:500}
.content-settings>summary::after{margin-left:0}
.media-help p{margin:0;padding:0 12px 5px;color:var(--muted);font-size:12px;line-height:1.5}
.media-help>small{display:block;padding:0 12px 12px;color:var(--muted-2);font-size:11px}
.media-help a{color:var(--accent-blue)}
.content-settings .content-rating-fieldset{padding:12px;margin:0;border-top:1px solid var(--border-subtle)}
.content-settings .post-type-option>span{
  border-color:var(--border);
  background:var(--bg);
}
.content-settings .post-type-option input:checked+span{
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:none;
}
.composer-standalone .detected-link{
  border-color:rgba(244,122,96,.22);
  background:var(--accent-soft);
  color:var(--text);
}
.composer-standalone .detected-link strong,
.composer-standalone .detected-link-icon{color:#FFA087}
.composer-standalone .detected-link-icon{background:rgba(244,122,96,.12)}

/* Explore: discovery is primary; the persistent shell owns global search. */
.explore-v2 .explore-shell{padding-top:38px}
.explore-v2 .explore-hero{
  max-width:none;
  margin:0 0 44px;
  padding:0;
  text-align:left;
}
.explore-v2 .explore-hero h1{margin-left:0;margin-right:0}
.explore-v2 .explore-hero>p{margin-left:0;margin-right:0}
.explore-v2 .explore-hero:after{display:none}
.explore-v2 .simple-post:hover,
.explore-v2 .compact-result:hover,
.explore-v2 .person-row:hover,
.explore-v2 .simple-community:hover{
  background:rgba(244,122,96,.04);
  transform:none;
}
.explore-v2 .post-dot,
.explore-v2 .compact-result .result-type{color:var(--accent-blue)}
.explore-v2 .simple-community>span{
  background:var(--accent-soft);
  color:#FFA087;
}

/* Onboarding: one accent and fewer competing signals. */
.onboarding-page{background:var(--bg)}
.onboarding-page .interest-card{box-shadow:none}
.onboarding-page .interest-card:hover{
  border-color:#303D4D;
  background:var(--surface-2);
  transform:none;
  box-shadow:none;
}
.onboarding-page .interest-mark{
  background:var(--accent-soft);
  border-color:rgba(244,122,96,.26);
  color:#FFA087;
}
.onboarding-page .interest-state{
  color:var(--accent-blue);
  border-color:rgba(244,122,96,.28);
}
.onboarding-page .interest-card:has(input:checked){
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:none;
}
.onboarding-page .interest-card:has(input:checked) .interest-state{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}

@media(max-width:680px){
  :root{--shell-header-height:60px}
  .home .home-topbar{height:var(--shell-header-height);min-height:var(--shell-header-height)}
  .home .feed-header{top:var(--shell-header-height)}
  .home-feed .mixed-item + .mixed-item{margin-top:var(--mobile-feed-gap)}
  .post-action-row .post-icon-action,
  .post-action-row .post-save-action{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
  .post-action-row .post-detail-icon-action:has(.post-action-count){width:auto;min-width:44px;padding-inline:11px}
  .post-v2 .post-hero-card{padding:18px 16px 18px}
  .post-overflow-menu{position:fixed;left:14px;right:14px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto}
  .composer-standalone .composer-page{padding-inline:14px;margin-top:20px}
  .composer-standalone .composer-page .composer{padding:16px}
  .content-settings>summary{align-items:flex-start;flex-direction:column;gap:2px}
  .content-settings>summary small{margin-left:0}
  .content-settings>summary::after{position:absolute;right:12px}
  .content-settings{position:relative}
  .explore-v2 .explore-hero{margin-bottom:32px}
}

/* Canonical mobile shell colors; legacy sheets only own geometry. */
@media(max-width:680px){
  .home .mobile-bottom-nav{
    border-color:var(--border);
    background:rgba(17,21,28,.94);
  }
  .home .mobile-bottom-nav>a{color:var(--muted);min-height:48px;justify-content:center}
  .home .mobile-bottom-nav>a:hover,
  .home .mobile-bottom-nav>a.active{
    background:var(--accent-soft);
    color:#FFD8CF;
  }
}

/* Recoverable error surface. */
.error-page{min-height:100vh;background:var(--bg)}
.error-topbar{padding-inline:max(18px,calc((100vw - 760px)/2 + 18px))}
.error-recovery{min-height:calc(100vh - var(--shell-header-height));display:grid;place-items:center;padding:40px 18px 80px}
.error-recovery>section{width:min(100%,560px);padding:28px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.error-recovery h1{margin:8px 0 8px;font-size:32px;line-height:1.12;letter-spacing:-.7px}
.error-recovery p{margin:0;color:var(--text-soft);line-height:1.6}
.error-recovery .error-recovery-hint{margin-top:9px;color:var(--muted);font-size:12px}
.error-recovery-actions{display:flex;align-items:center;gap:9px;margin-top:20px;flex-wrap:wrap}
@media(max-width:680px){.error-recovery{padding:24px 14px 64px}.error-recovery>section{padding:20px}.error-recovery h1{font-size:28px}.error-recovery-actions>*{flex:1 1 150px}}


/* Canonical Mushimu brand lockup */
.brand{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:var(--text);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.brand .brand-mark{
  display:block;
  width:46px;
  height:31px;
  flex:0 0 auto;
  object-fit:contain;
}
.brand .brand-name{
  color:var(--text);
  font-size:22px;
  font-weight:800;
  letter-spacing:-.045em;
}
.brand:hover{transform:none;filter:none}
.brand:hover .brand-mark{filter:brightness(1.06)}
@media(max-width:480px){
  .brand .brand-mark{width:44px;height:30px}
}

.avatar-variant-official{background:#101821;border-color:#F47A60}
.official-account-badge{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid #F47A6066;border-radius:8px;color:#ffb29f;font-size:11px;font-weight:700;background:#F47A6010}


/* Public user identity: visible name first, unique @handle second. */
.user-identity{display:inline-flex;align-items:center;gap:5px;min-width:0;color:inherit}
.user-identity .identity-copy{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.user-identity .identity-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}
.user-identity .identity-handle{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-2);font-family:var(--font-mono);font-weight:500;letter-spacing:-.02em}
.notification-actor .identity-copy{gap:4px}
@media(max-width:680px){
  .user-identity .identity-name{max-width:150px}
  .user-identity .identity-handle{max-width:125px}
}

/* Post-card author identity must consume the whole metadata row on mobile.
   The avatar and badges keep their natural size; name + @handle share all
   remaining space, with the visible name given slightly higher priority. */
.post-card .meta .author-identity{
  flex:1 1 auto;
  max-width:100%;
}
.post-card .meta .author-identity .identity-copy{
  flex:1 1 auto;
  min-width:0;
}
.post-card .meta .author-identity .identity-name,
.post-card .meta .author-identity .identity-handle{
  max-width:none;
  min-width:0;
}
.post-card .meta .author-identity > .user-avatar,
.post-card .meta .author-identity > .muxi-reputation,
.post-card .meta .author-identity > .official-account-badge{
  flex:0 0 auto;
}
@media(max-width:680px){
  /* Home feed metadata is a single row. Match the higher-specificity home
     selector so the older feed rule cannot re-enable wrapping. Ellipsis is
     caused only by actual lack of room: no arbitrary width caps. */
  .home .post-card .meta{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:4px;
    width:100%;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
  }
  .home .post-card .meta > .post-community{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .home .post-card .meta > .meta-separator{
    display:inline;
    flex:0 0 auto;
  }
  .home .post-card .meta .author-identity{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:none;
    display:flex;
    align-items:center;
    gap:4px;
    overflow:hidden;
  }
  .home .post-card .meta .author-identity .user-avatar{
    width:24px;
    height:24px;
    flex:0 0 24px;
  }
  .home .post-card .meta .author-identity .identity-copy{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    display:flex;
    align-items:baseline;
    gap:4px;
    overflow:hidden;
  }
  /* The visible name gets first claim on the text space. The @handle only
     consumes whatever is left, so it ellipsizes before the display name. */
  .home .post-card .meta .author-identity .identity-name{
    display:block;
    flex:0 1 auto;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .home .post-card .meta .author-identity .identity-handle{
    display:block;
    flex:1 1 0;
    min-width:0;
    max-width:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .home .post-card .meta .author-identity > .muxi-reputation,
  .home .post-card .meta .author-identity > .official-account-badge{
    flex:0 0 auto;
  }
  .home .post-card .meta .author-identity > .muxi-reputation{
    min-height:20px;
    padding:1px 5px;
    gap:4px;
    font-size:11px;
  }
  .home .post-card .meta .author-identity > .official-account-badge{
    padding:3px 6px;
    white-space:nowrap;
    font-size:10px;
  }
  .home .post-card .meta > .post-created-at,
  .home .post-card .meta .edited-marker{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .home .post-card .meta .edited-marker > .meta-separator{display:inline}
  .home .post-card .meta > .eyebrow{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* Make the discussion action recognizable while preserving a compact action row. */
@media(max-width:680px){
  .home .post-card .actions>.post-primary-icons>.post-card-icon-action:has(.post-action-label){width:auto;min-width:40px;padding:0 9px;gap:5px;border-color:rgba(120,151,166,.24);background:rgba(120,151,166,.08);color:var(--text-soft)}
  .home .post-card .actions>.post-primary-icons>.post-card-icon-action .post-action-label{display:inline;font-size:11px;font-weight:700;white-space:nowrap}
  .home .post-card .actions>.post-primary-icons>.post-card-icon-action:has(.post-action-label) svg{width:16px;height:16px;flex-basis:16px}
}

@media(max-width:680px){
  .home .post-card>.meta{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:5px;overflow:visible;white-space:normal}
  .home .post-card>.meta>.post-community{grid-column:1;grid-row:1;max-width:100%;font-size:11px}
  .home .post-card>.meta>.meta-separator{display:none}
  .home .post-card>.meta>.author-identity{grid-column:1;grid-row:2;width:max-content;max-width:100%;overflow:visible}
  .home .post-card>.meta>.author-identity .identity-copy{flex:0 1 auto;width:auto}
  .home .post-card>.meta>.author-identity .identity-name{max-width:180px}
  .home .post-card>.meta>.author-identity .identity-handle{flex:0 1 auto;max-width:150px}
  .home .post-card>.meta>.author-identity>.muxi-reputation{min-height:18px;padding:0 4px;gap:3px;font-size:10px;opacity:.78}
  .home .post-card>.meta>.eyebrow{grid-column:1;grid-row:3}
}

/* One continuous surface for a post and its threaded replies. */
.post-v2 .conversation-stack{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.post-v2 .post-hero-card{padding:22px 26px 20px;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;background:transparent;box-shadow:none}
.post-v2 .comment-composer,.post-v2 .comment-login{padding:16px 26px;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;background:transparent}
.post-v2 .discussion-bar{padding:16px 26px 10px;border:0;background:transparent}
.post-v2 .comments{border:0;background:transparent}
.post-v2 .comment-roots{padding:0 26px 20px}
.post-v2 .comment-thread-node{position:relative;min-width:0}
.post-v2 .comment-thread-node>.comment{position:relative;margin:0;padding:12px 0 8px;border:0;border-radius:0;background:transparent;box-shadow:none}
.post-v2 .comment-thread-node>.comment:hover{background:transparent}
.post-v2 .comment-thread-node>.comment:before{display:none}
.post-v2 .comment-thread-node .comment-meta{gap:6px;margin:0 0 5px}
.post-v2 .comment-thread-node .comment-meta .user-avatar{width:24px;height:24px;min-width:24px}
.post-v2 .comment-thread-node .comment-meta .user-identity{display:inline-flex;align-items:center;gap:6px}
.post-v2 .comment-thread-node .comment-meta a{font-family:inherit;font-size:12px}
.post-v2 .comment-thread-node .comment-parent-link{color:var(--muted-2);font-size:11px}
.post-v2 .comment-thread-node .comment-copy{margin:0 0 7px;color:var(--text-soft);font-size:14px;line-height:1.5}
.post-v2 .comment-children{--comment-thread-color:#F47A60;position:relative;margin-left:11px;padding-left:13px;border:0}
.post-v2 .comment-children>.comment-thread-node:before{position:absolute;top:0;left:-13px;width:12px;height:24px;border-left:1px solid var(--comment-thread-color);border-bottom:1px solid var(--comment-thread-color);border-bottom-left-radius:10px;content:"";pointer-events:none}
.post-v2 .comment-actions{display:flex;align-items:center;gap:4px;min-height:36px}
.post-v2 .comment-collapse{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:0 0 0 auto;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted-2);cursor:pointer}
.post-v2 .comment-collapse[hidden]{display:none}
.post-v2 .comment-collapse:hover{background:var(--surface-hover);color:var(--text)}
.post-v2 .comment-collapse span[aria-hidden]{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:16px;line-height:1}
.post-v2 .comment-collapse .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
.post-v2 .comment-collapse:focus-visible{outline:2px solid var(--accent-blue);outline-offset:1px}
.post-v2 .comment-thread-node.is-collapsed>.comment-children{display:none}
.post-v2 .comment-children[hidden]{display:none}
.post-v2 .comment-children>.comment-thread-node:not(:last-child):after{position:absolute;left:-13px;top:0;bottom:0;width:1px;background:var(--comment-thread-color);content:"";pointer-events:none}
.post-v2 .comment-thread-node[data-depth="6"] .comment-children{margin-left:0;padding-left:0;border-left:0}
.post-v2 .comment-thread-node[data-depth="6"] .comment-children>.comment-thread-node:before,
.post-v2 .comment-thread-node[data-depth="6"] .comment-children>.comment-thread-node:after{display:none}
.post-v2 .comment-thread-node{scroll-margin-top:calc(var(--shell-header-height,60px) + 16px)}
.post-v2 #comment-composer{scroll-margin-top:calc(var(--shell-header-height,60px) + 16px)}
.post-v2 .comment-thread-node .comment-copy{overflow-wrap:anywhere;min-width:0}
.post-v2 .comment-meta>strong{min-width:0;max-width:100%}
.post-v2 .comment-meta .comment-author{max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
.post-v2 .comment-action-menu>summary{min-width:44px;min-height:44px}
@media(max-width:820px){
  .post-v2 .post-hero-card{padding:16px 16px 18px}
  .post-v2 .comment-composer,.post-v2 .comment-login{padding:14px 16px}
  .post-v2 .discussion-bar{padding:14px 16px 8px}
  .post-v2 .comment-roots{padding:0 16px 18px}
  .post-v2 .comment-children{margin-left:7px;padding-left:9px}
  .post-v2 .comment-children>.comment-thread-node:before{left:-9px;width:8px}
  .post-v2 .comment-children>.comment-thread-node:not(:last-child):after{left:-9px}
  .post-v2 .comment-thread-node[data-depth="3"] .comment-children{margin-left:0;padding-left:0;border-left:0}
  .post-v2 .comment-thread-node[data-depth="3"] .comment-children>.comment-thread-node:before,
  .post-v2 .comment-thread-node[data-depth="3"] .comment-children>.comment-thread-node:after{display:none}
}

/* Match the specificity of the legacy conversation stylesheet. */
.home .home-feed{gap:0;padding-inline:0}
.home .mixed-feed .post-card{border:0;border-bottom:1px solid var(--border-subtle);border-radius:0!important;background:transparent;box-shadow:none;overflow:visible}
.home .mixed-feed .post-card:hover{border:0;border-bottom:1px solid var(--border-subtle);background:var(--post-hover);box-shadow:none;transform:none}
.composer-standalone .composer-page .composer textarea[name="body"]{min-height:clamp(220px,32vh,420px)}
@media(max-width:680px){
  .home .mixed-feed .post-card{padding:16px}
  .home .post-card .actions>.post-primary-icons>.post-card-icon-action:has(.post-action-label){min-height:44px;min-width:44px}
}

.post-v2 .comment-action-menu>summary{background:transparent;border:0}
.post-v2 .comment-action-menu>summary:hover{background:var(--surface-hover)}
@media(max-width:880px){
  .home .topbar .header-create{display:none}
}

.post-v2 .comment-actions{flex-wrap:wrap}
.post-v2 .comment-more-menu>summary{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted-2);list-style:none;cursor:pointer}
.post-v2 .comment-more-menu>summary::-webkit-details-marker{display:none}
.post-v2 .comment-more-menu>summary svg{width:20px;height:20px;fill:currentColor}
.post-v2 .comment-more-menu>summary:hover{background:var(--surface-hover);color:var(--text)}
.post-v2 .comment-more-menu>summary:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
.post-v2 .comment-more-menu[open]{display:contents}
.post-v2 .comment-more-actions{display:flex;flex:1 0 100%;order:2;flex-wrap:wrap;gap:4px;min-width:0;padding:8px 0;border-top:1px solid var(--border-subtle)}
.post-v2 .comment-more-actions>.comment-action-menu>summary{display:flex!important;align-items:center;justify-content:center;gap:6px;width:auto;padding:0 8px!important}
.post-v2 .comment-more-actions>.comment-action-menu>summary span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
.post-v2 .comment-more-menu:not([open])>.comment-more-actions{display:none}
.post-v2 .comment-action-menu::details-content,
.post-v2 .comment-more-menu::details-content{display:contents}
.post-v2 .comment-more-actions>.comment-action-menu>form{box-sizing:border-box;max-width:100%;min-width:0}
.post-v2 .comment-action-menu:not([open])>form{display:none}