/* Self-hosted fonts (SIL OFL - see /fonts/LICENSE-*.txt). One weight per family, Latin
   subset only; other weights are picked/synthesised from these, other scripts fall back
   to the system font. */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/syne-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================
   Gemolith Forums - design tokens
   A cut-gemstone aesthetic on a blockchain ledger: angular
   facet-clipped panels, a persistent currency HUD, and visible
   provenance lineage for forks.
=========================================================== */
:root {
  --bg: #0a0a0f;
  --surface: #121219;
  --surface-2: #191922;
  --surface-3: #20202c;
  --border: #292933;
  --border-bright: #3a3a4a;

  --text: #ece9f5;
  --text-dim: #8d89a0;
  --text-faint: #5c5870;

  --violet: #7c5cff;
  --violet-dim: #4a3d99;
  --cyan: #2ee6cb;
  --gold: #e8b94e;
  --rose: #e8749e;
  --danger: #ef5d5d;
  --green: #3ddc84;

  --facet: 14px;
  --facet-sm: 8px;

  --font-display: 'Syne', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 10% -10%, rgba(124, 92, 255, 0.12), transparent),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(46, 230, 203, 0.07), transparent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
button, input, textarea, select { font-family: inherit; color: inherit; }

.tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--violet-dim); color: #fff; }

/* ---------- layout shell ---------- */
.shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ---------- navbar / wallet HUD ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 15, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
}
.brand-mark {
  width: 22px; height: 22px;
  background: linear-gradient(145deg, var(--violet), var(--cyan));
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%, 0% 35%);
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}
.nav-links a {
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.92rem;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface-2); }

.wallet-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.wallet-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
.wallet-chip.rep { border-color: rgba(232, 185, 78, 0.35); }
.wallet-chip.sparx { border-color: rgba(46, 230, 203, 0.35); }
.wallet-dot { width: 7px; height: 7px; border-radius: 50%; }
.wallet-chip.rep .wallet-dot { background: var(--gold); }
.wallet-chip.sparx .wallet-dot { background: var(--cyan); }
.wallet-chip.pulse { animation: pulse-chip 0.6s ease; }
@keyframes pulse-chip {
  0% { box-shadow: 0 0 0 0 rgba(46,230,203,0.5); }
  100% { box-shadow: 0 0 0 8px rgba(46,230,203,0); }
}

.faucet-btn {
  border: 1px solid var(--border-bright);
  background: var(--surface-3);
  color: var(--text);
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  transition: border-color .15s ease;
}
.faucet-btn:hover { border-color: var(--cyan); }
.faucet-btn:disabled { opacity: .45; cursor: default; }

.nav-user {
  display: flex; align-items: center; gap: 8px;
}

/* ---------- account dropdown ---------- */
.account-menu { position: relative; }
.account-trigger {
  border: none; padding: 0; cursor: pointer;
  transition: box-shadow .15s ease;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);
}
.account-dropdown {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 210px;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  padding: 8px;
  z-index: 50;
}
.account-dropdown.open { display: block; }
.account-dropdown-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 10px;
}
.account-dropdown-head b { font-size: 0.92rem; }
.account-dropdown-sep { height: 1px; background: var(--border); margin: 6px 2px; }
.account-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  padding: 9px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .12s ease;
}
.account-dropdown-item:hover { background: var(--surface-2); }
.account-dropdown-danger { color: var(--danger); }
.account-dropdown-danger:hover { background: rgba(239, 93, 93, 0.1); }
.account-dropdown form { margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--border-bright);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.btn:hover { border-color: var(--violet); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(135deg, var(--violet), #5a3ce0); border-color: transparent; color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-sm { padding: 6px 11px; font-size: 0.8rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-google { background: #fff; border-color: #fff; color: #1f1f1f; }
.btn-google:hover { filter: brightness(0.96); border-color: #fff; }

.auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-faint); font-size: 0.8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- facet panel (the core surface unit) ---------- */
.facet {
  background: var(--surface);
  border: 1px solid var(--border);
  clip-path: polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet));
  padding: 20px 22px;
}
.facet-sm {
  clip-path: polygon(var(--facet-sm) 0, 100% 0, 100% calc(100% - var(--facet-sm)), calc(100% - var(--facet-sm)) 100%, 0 100%, 0 var(--facet-sm));
}

/* ---------- post card ---------- */
.post-card { margin-bottom: 14px; }
.post-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 0.86rem; color: var(--text-dim);
}
.post-title { font-size: 1.15rem; margin-bottom: 6px; }
.post-body-wrap { position: relative; display: block; }
.post-body-stretched-link { position: absolute; inset: 0; z-index: 1; }
.post-body-wrap:hover .post-body { color: var(--text); }
/* Raises the actual text (and any @mention / @p/id tag links inside it) into
   its own stacking context above the stretched link, so those inner <a>s
   still receive the click instead of the full-card link underneath them. */
.post-body-wrap .post-body { position: relative; z-index: 2; transition: color .15s ease; }
.post-title a:hover { color: var(--violet); }
.post-body { color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.post-body.clamp {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.orb {
  border-radius: 50%;
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; color: #fff;
}
.orb-lg { width: 64px; height: 64px; font-size: 1.4rem; }

/* orb cuts, layered as clip-paths on top of the color */
.orb-facet { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0; }
.orb-octa { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; }
.orb-raw { clip-path: polygon(20% 0%, 80% 5%, 100% 40%, 90% 100%, 30% 95%, 0% 55%); border-radius: 0; }
.orb-prism { clip-path: polygon(50% 0%, 90% 20%, 100% 70%, 60% 100%, 15% 90%, 0% 35%); border-radius: 0; }
.orb-geode { clip-path: polygon(15% 0%, 60% 10%, 100% 45%, 85% 100%, 30% 100%, 0% 55%); border-radius: 0; }

/* ---------- activity peek (who liked / tipped / forked) ----------
   A hover popover next to each count, replacing the old click-to-open
   modal. Hover (or tap, for touch) reveals a one-line summary -
   "Forked by alice, bob, and 3 others" - fetched lazily on first open
   and cached after that. Names inside are real links.

   One shared element (#activity-peek in foot.ejs), reused for every
   trigger and positioned in JS via getBoundingClientRect. It's a direct
   child of <body>, deliberately NOT nested inside an .action-btn pill:
   those pills use clip-path for their cut-corner shape, and clip-path
   masks everything painted inside the element - including absolutely
   positioned children that would normally escape an overflow box. A
   popover nested in there is invisible no matter how it's positioned. */
.count-peek {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.count-peek:hover, .count-peek:focus-visible { text-decoration: underline; }

.activity-peek {
  position: fixed;
  display: none;
  min-width: 170px; max-width: 240px;
  background: var(--surface-3); border: 1px solid var(--border-bright);
  padding: 8px 10px;
  font-family: var(--font-body); font-size: 0.78rem; line-height: 1.4;
  color: var(--text-dim);
  text-align: left;
  z-index: 50;
}
.activity-peek.open { display: block; }
.activity-peek a { color: var(--cyan); font-weight: 600; }
.activity-peek a:hover { text-decoration: underline; }
/* little pointer nub so it visibly anchors to the count it belongs to;
   flipped to the top edge when JS flips the peek below the trigger */
.activity-peek::after {
  content: ''; position: absolute; top: 100%; left: 20px;
  border: 5px solid transparent; border-top-color: var(--border-bright);
}
.activity-peek.below::after {
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--border-bright);
}

.icon-static { display: flex; align-items: center; color: var(--text-faint); }
.icon-static svg { width: 14px; height: 14px; }

.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5, 5, 10, 0.65);
  align-items: center; justify-content: center;
  padding: 20px;
  z-index: 200;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  width: 100%; max-width: 380px; max-height: 70vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h4 { margin: 0; font-family: var(--font-display); }
.modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { overflow-y: auto; padding: 6px 0; }

/* @mentions and @p/id post tags inside post/comment bodies */
.tag-pill { font-weight: 600; text-decoration: none; }
.tag-user { color: var(--violet); }
.tag-user:hover { text-decoration: underline; }
.tag-post {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8em;
  color: var(--cyan);
  background: rgba(46, 230, 203, 0.12);
  border: 1px solid rgba(46, 230, 203, 0.3);
  padding: 0 6px;
  border-radius: 20px;
}
.tag-post:hover { background: rgba(46, 230, 203, 0.2); }
.tag-bounty {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8em;
  color: var(--gold);
  background: rgba(232, 185, 78, 0.12);
  border: 1px solid rgba(232, 185, 78, 0.3);
  padding: 0 6px;
  border-radius: 20px;
}
.tag-bounty:hover { background: rgba(232, 185, 78, 0.2); }
.tag-hashtag {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8em;
  color: var(--green);
  background: rgba(61, 220, 132, 0.12);
  border: 1px solid rgba(61, 220, 132, 0.3);
  padding: 0 6px;
  border-radius: 20px;
}
.tag-hashtag:hover { background: rgba(61, 220, 132, 0.2); }

.badge-pill {
  font-size: 0.72rem;
  padding: 2px 7px;
  background: var(--surface-3);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  color: var(--text-dim);
}

/* provenance lineage - blockchain-style chain back to the original */
.lineage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--text-faint);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.lineage a { color: var(--text-dim); }
.lineage a:hover { color: var(--cyan); }
.lineage-sep { color: var(--text-faint); }

/* fork-note - the "Forked from X by Y" indicator, shared by the feed,
   post detail (inside .lineage above), and profile post lists so it
   always looks and reads the same wherever a fork shows up. */
.fork-note { display: inline-flex; align-items: center; gap: 5px; color: var(--text-faint); }
.fork-note svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--violet); }
.fork-note a { color: var(--text-dim); font-weight: 600; }
.fork-note a:hover { color: var(--cyan); }

/* ---------- composer (FB-style inline post box) ---------- */
.composer { margin-bottom: 18px; }
.composer-row { display: flex; align-items: flex-start; gap: 12px; }
.composer-row .orb { margin-top: 2px; }
.composer-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#composer-title, #composer-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  color: var(--text);
  font-family: var(--font-body);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
#composer-title {
  padding: 9px 14px;
  font-size: 0.92rem;
  font-weight: 600;
}
#composer-input {
  padding: 12px 14px;
  font-size: 0.98rem;
  resize: none;
  overflow: hidden;
  min-height: 44px;
  transition: min-height .15s ease;
}
#composer-title:focus,
#composer-input:focus { outline: none; border-color: var(--violet); }
.composer-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease;
}
.composer-footer.open { margin-top: 12px; max-height: 60px; opacity: 1; }
.composer-actions { display: flex; gap: 8px; }

/* ---------- action row (like / sparx / fork) ---------- */
.action-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; position: relative; }
.action-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
  transition: all .15s ease;
}
.action-btn:hover { border-color: var(--border-bright); color: var(--text); }
.action-btn.sparx-shell:hover { border-color: var(--cyan); color: var(--cyan); }
.action-btn.fork-shell:hover { border-color: var(--violet); color: var(--violet); }
.action-btn svg { width: 14px; height: 14px; }

/* Every pill (like / sparx / fork) is really a shell holding two or three
   real, separate elements - an action button, the count, and (for sparx
   and fork) a static icon shown instead of the button when logged out -
   since a <button> can't validly nest inside another <button>. :hover
   bubbles up from any child, so the shell lights up as one unit. */
.like-shell.active { color: var(--rose); border-color: var(--rose); }
.like-shell .like-toggle, .sparx-shell .sparx-btn, .fork-shell .fork-btn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}

.tip-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  background: var(--surface-3); border: 1px solid var(--border-bright);
  display: none; gap: 4px; padding: 6px; z-index: 5;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.tip-menu.open { display: flex; }
.tip-menu button {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--cyan);
  font-family: var(--font-mono); font-size: 0.78rem; padding: 6px 8px; cursor: pointer;
}
.tip-menu button:hover { background: var(--cyan); color: #06231f; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field textarea, .field select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  color: var(--text);
  padding: 11px 13px;
  font-size: 0.95rem;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet);
}
.field textarea { resize: vertical; min-height: 100px; font-family: var(--font-body); }
.field-hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 5px; }
.error-box {
  background: rgba(239, 93, 93, 0.1); border: 1px solid var(--danger); color: #ffb3b3;
  padding: 10px 14px; margin-bottom: 16px; font-size: 0.88rem;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}

/* ---------- comments ---------- */
.comment { border-left: 2px solid var(--border); padding-left: 16px; margin-top: 16px; }
.comment-children { margin-left: 8px; }
@media (max-width: 600px) {
  /* Nested replies would otherwise eat most of a phone screen. */
  .comment { padding-left: 10px; }
  .comment-children { margin-left: 0; }
}
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 6px; }
.comment-body { font-size: 0.92rem; white-space: pre-wrap; word-wrap: break-word; }
.reply-form { display: none; margin-top: 10px; }
.reply-form.open { display: block; }

/* ---------- bounty ---------- */
.bounty-amount { font-family: var(--font-mono); color: var(--cyan); font-size: 1.6rem; }
.status-pill { font-size: 0.72rem; padding: 3px 9px; border-radius: 20px; font-family: var(--font-mono); text-transform: lowercase; }
.status-pill.open { background: rgba(46,230,203,0.12); color: var(--cyan); }
.status-pill.completed { background: rgba(61,220,132,0.12); color: var(--green); }
.status-pill.cancelled { background: rgba(239,93,93,0.12); color: var(--danger); }
.status-pill.pending { background: rgba(232,185,78,0.12); color: var(--gold); }
.status-pill.paid { background: rgba(61,220,132,0.12); color: var(--green); }
.status-pill.refunded { background: var(--surface-3); color: var(--text-dim); }

/* ---------- profile ---------- */
.profile-banner { height: 120px; margin: -1px -1px 0; }
.banner-ink { background: linear-gradient(120deg, #14141c, #0a0a0f); }
.banner-nebula { background: radial-gradient(circle at 30% 40%, #7c5cff88, transparent 60%), radial-gradient(circle at 75% 60%, #2ee6cb66, transparent 55%), #0a0a0f; }
.banner-circuit { background: repeating-linear-gradient(90deg, #191922 0 2px, #0a0a0f 2px 34px), #0a0a0f; }
.banner-magma { background: linear-gradient(120deg, #2a1010, #0a0a0f 60%), radial-gradient(circle at 80% 20%, #e8574766, transparent 50%); }
.banner-aurora { background: linear-gradient(100deg, #0a0a0f, #12241f 40%, #0a0a0f), radial-gradient(circle at 20% 80%, #3ddc8455, transparent 55%); }

.profile-head { display: flex; gap: 18px; align-items: flex-end; margin-top: -34px; padding: 0 22px; }
.profile-name { font-size: 1.4rem; }
.profile-meta { color: var(--text-dim); font-size: 0.88rem; }
.stat-row { display: flex; gap: 22px; margin: 18px 0; flex-wrap: wrap; }
.stat { font-family: var(--font-mono); }
.stat b { display: block; font-size: 1.3rem; color: var(--text); }
.stat span { font-size: 0.75rem; color: var(--text-faint); }

/* ---------- shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

/* The top-level Feed/Tags selector sits directly above that section's own
   New/Top row - tighten the gap between the two so they read as one
   grouped control rather than two unrelated tab bars. */
.section-tabs { margin-bottom: 8px; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.profile-section-head h3 { margin: 0; }
.profile-section-head .sort-tabs { margin-bottom: 0; }

.tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tag-card { display: block; text-decoration: none; }
.tag-card-name { color: var(--green); font-weight: 700; font-family: var(--font-mono); }
.tag-card-meta { margin-top: 6px; font-size: 0.78rem; }
.shop-item {
  display: block; width: 100%;
  text-align: center; padding: 16px 10px; cursor: pointer;
  font: inherit; color: inherit;
}
.shop-item.owned { border-color: var(--green); }
.shop-item.equipped { border-color: var(--violet); background: var(--surface-2); }
.shop-item .price { font-family: var(--font-mono); color: var(--cyan); font-size: 0.82rem; margin-top: 8px; }
.shop-swatch { width: 40px; height: 40px; margin: 0 auto 10px; }

/* ---------- misc ---------- */
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: 0.82rem; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.hero {
  padding: 44px 0 30px;
}
.hero h1 { font-size: 2.1rem; max-width: 620px; }
.hero p { color: var(--text-dim); max-width: 560px; }
.sort-tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.sort-tabs a { padding: 6px 12px; font-size: 0.85rem; color: var(--text-dim); border: 1px solid transparent; }
.sort-tabs a.active { color: var(--text); border-color: var(--border-bright); background: var(--surface-2); }

/* ---------- list toolbar - replaces the old hero + section-tabs + sort-tabs
   stack on the feed/tags pages with a single compact row ---------- */
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 22px 0 16px;
}
.list-toolbar .sort-tabs { margin-bottom: 0; }

.intro-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 22px;
  padding: 16px 20px;
}

.tag-heading { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.tag-heading h2 { font-family: var(--font-mono); color: var(--green); font-size: 1.3rem; margin: 0; }
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 100;
  background: var(--surface-3); border: 1px solid var(--border-bright);
  padding: 12px 16px; font-size: 0.86rem;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  max-width: 280px;
}
.toast.show { opacity: 1; transform: translateY(0); }

footer { text-align: center; color: var(--text-faint); font-size: 0.8rem; padding: 40px 0 10px; }

@media (max-width: 640px) {
  .navbar-inner { flex-wrap: wrap; gap: 10px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; }
  .profile-head { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   Keyboard focus (:focus-visible)
   Shows a clear ring for keyboard/assistive-tech navigation
   without drawing one on every mouse click. A broad fallback
   covers anything interactive, with a few overrides below for
   shapes (clip-path buttons, circular orbs) where an outset
   outline would look disconnected from the element.
=========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Clip-path "facet" shapes (buttons, action pills, shop tiles, modal close,
   faucet chip): an inset ring reads better than an outset one that gets cut
   by the angled corners. */
.btn:focus-visible,
.action-btn:focus-visible,
.faucet-btn:focus-visible,
.shop-item:focus-visible,
.tag-card:focus-visible,
.tip-menu button:focus-visible,
.modal-close:focus-visible,
.account-dropdown-item:focus-visible {
  outline-offset: -2px;
}

/* Circular / faceted avatar links and the account trigger already have a
   bespoke hover treatment - extend it to keyboard focus instead of adding a
   second, boxy ring on top. */
.account-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);
}
a.orb:focus-visible {
  outline-offset: 2px;
}

/* Text fields already shift border color on focus; layer a violet ring on
   top specifically for keyboard focus so it's unmistakable. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
#composer-input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 1px;
}

/* The stretched post-body link covers the whole card, so its focus ring
   should trace the card's edge rather than sit flush on top of the text. */
.post-body-stretched-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}

.nav-links a:focus-visible,
.sort-tabs a:focus-visible {
  outline-offset: 1px;
}