/* ============================================================================
   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 indigo). 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 — a slightly cold dark scale, one accent */
  --bg:#0C0F14;
  --surface:#11151C;
  --surface-2:#161B24;
  --surface-hover:#1C2230;
  --post-hover:#141922;
  --border:#252C38;
  --border-subtle:rgba(255,255,255,.055);
  --text:#F3F5F7;
  --text-soft:#C7CDD6;
  --muted:#A3ACBA;
  --muted-2:#707A89;
  --accent:#6C6EF5;
  --accent-hover:#7C7EFF;
  --accent-soft:rgba(108,110,245,.14);
  --accent-ink:#0D1017;
  --accent-blue:#8FA0FF;
  --brand-gradient:linear-gradient(135deg,#7776FF,#9B78FF);
  /* 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(--state);
  --accent-peach:var(--warning);
  --accent-pink:var(--muted);
  --success:var(--state);
  --hairline:rgba(255,255,255,.08);
  --surface-pressed:#232A3A;
  --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;

  /* 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(108,110,245,.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 indigo. 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:#303947;
  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:#303947 !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,15,20,.90);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text);
}
.home-topbar{background:rgba(12,15,20,.90)}

/* 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:#303947 !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(108,110,245,.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(108,110,245,.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:#303947;color:var(--text)}
.notification-button svg{stroke:currentColor !important;fill:none;filter:none}
.notification-dot{
  background:var(--accent);
  color:#fff;
  border:2px solid var(--bg);
  font-size:9px;
}
.account-chip{
  border:1px solid var(--hairline) !important;
  background:transparent !important;
  box-shadow:none;
}
.account-chip:hover{background:var(--surface-hover) !important;border-color:#303947 !important}
.account-avatar{
  background:var(--brand-gradient);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.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:#303947;
  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(108,110,245,.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:1px solid var(--hairline);
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
}
.translation-toggle:hover{background:var(--surface-hover);border-color:#303947;color:var(--text)}
/* 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;
}
.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:#E4E6FF;
  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:#C6C8FF;
  border:1px solid rgba(108,110,245,.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:10px}
.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:#E4E6FF}
.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{
  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{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:60px;
  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, the ~ wave marks the active one. */
.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);
}
.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:5px;
  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='%236C6EF5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom/auto 5px;
  opacity:0;
  transform:translateY(2px);
  transition: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:#E6E8FF;
  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{
  opacity:1;
  transform:none;
}

/* 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(108,110,245,.35);color:#E4E6FF}

/* Post — editorial density. */
.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;
  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{
  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:#B9C2FF}
.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(108,110,245,.28) !important;
  border-radius:var(--radius-btn);
  color:var(--text);
}
.poll-preview:hover{background:rgba(108,110,245,.20) !important}

/* Actions — icon-first, quiet, same response everywhere. */
.home .post-card .actions{gap:6px;margin-top:14px}
.home .post-card .actions > a,
.home .post-card .actions > .account-button,
.home .post-card .actions form > .account-button{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:var(--radius-btn);
  background:transparent;
  color:var(--muted);
  font-size:12.5px;
  font-weight:600;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.home .post-card .actions > a:hover,
.home .post-card .actions > .account-button:hover,
.home .post-card .actions form > .account-button:hover{
  background:rgba(255,255,255,.05);
  border-color:transparent;
  color:var(--text);
}
.home .post-card .actions svg{
  width:16px;height:16px;flex:0 0 16px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.home .post-card .actions .muxi-chat-spark{fill:currentColor;stroke:none}
.action-link:hover .muxi-chat-icon{filter:none}
.muxi-vote-icon{filter:none}

/* 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:#C9CBFF}
.vote-controls:has(button:last-of-type.selected) output{color:#F2B8BA}

/* Empty states — the ~M mark. */
.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:64px;height:46px;
  margin:0 auto 12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M10 13c5-7 10-7 15 0s10 7 15 0 10-7 15 0' fill='none' stroke='%236C6EF5' stroke-width='2.4' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M16 23c4-5 8-5 12 0s8 5 12 0 8-5 12 0' fill='none' stroke='%236C6EF5' stroke-width='2' stroke-linecap='round' opacity='.3'/%3E%3Cpath d='M22 45V32l10-9 10 9v13' fill='none' stroke='%23707A89' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 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{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.015em;
}
.community-open{color:var(--muted);font-size:12.5px}
.community-open:hover{color:var(--text)}
.content-kind{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  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 .post-card .post-link p{font-size:16px}
  .home .post-card .post-link h3{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;
  }
}