/* Ginkr — plain-PHP edition
   Redesigned to the "text-first, editorial" visual language: warm dark
   ink-on-charcoal by default, Fraunces for display type, Inter for body
   copy, IBM Plex Mono for meta/timestamps/labels, amber as the single
   accent color, flat bordered columns instead of floating cards.
   Everything routes through [data-theme] on <html>, including native
   form-control chrome via `color-scheme`, so switching themes never
   leaves anything behind. */

@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 105%;
}

:root {
  --bg: #12141A;
  --bg-elevated: #191C24;
  --bg-elevated-2: #1F2330;
  --bg-hover: rgba(255,255,255,.045);
  --bg-active: rgba(255,255,255,.075);
  --border: #2A2F3B;
  --border-soft: #21242E;
  --text: #ECE8DE;
  --text-dim: #8890A0;
  --text-faint: #666E80;
  --gold: #FFB454;
  --gold-bright: #FFC97A;
  --gold-soft: rgba(255,180,84,.12);
  --sage: #7CD992;
  --sage-soft: rgba(124,217,146,.12);
  --rose: #FF8A8A;
  --rose-soft: rgba(255,138,138,.12);
  --sky: #6EA8FE;
  --sky-soft: rgba(110,168,254,.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --max-width: 1220px;
  --shadow-sm: none;
  --shadow-md: 0 6px 20px -10px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 36px -12px rgba(0,0,0,.5);
  --ring: 0 0 0 3px var(--gold-soft);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-elevated-2: #F0F1F2;
  --bg-hover: rgba(15,20,25,.05);
  --bg-active: rgba(15,20,25,.09);
  --border: #E2E5E7;
  --border-soft: #EBEDEE;
  --text: #0F1419;
  --text-dim: #55606B;
  --text-faint: #8B98A5;
  --gold: #FFB454;
  --gold-bright: #FFC97A;
  --gold-soft: rgba(255,180,84,.14);
  --sage: #1B8A4A;
  --sage-soft: rgba(27,138,74,.10);
  --rose: #C1503D;
  --rose-soft: rgba(193,80,61,.10);
  --sky: #1B6FE0;
  --sky-soft: rgba(27,111,224,.10);
  --shadow-sm: none;
  --shadow-md: 0 8px 20px -10px rgba(15,20,25,.10);
  --shadow-lg: 0 16px 36px -14px rgba(15,20,25,.14);
  --ring: 0 0 0 3px var(--gold-soft);
  color-scheme: light;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Right-to-left languages (Urdu, Kashmiri, Sindhi, Arabic): flip text
   direction and alignment for readable content; the rail/columns stay in
   their fixed left/right slots rather than fully mirroring the shell, to
   keep this a safe, contained change. */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .gink-text, [dir="rtl"] .composer textarea, [dir="rtl"] .quote-embed,
[dir="rtl"] .message-bubble, [dir="rtl"] .field textarea, [dir="rtl"] .legal-body {
  text-align: right;
}
[dir="rtl"] .gink-meta, [dir="rtl"] .composer-actions, [dir="rtl"] .gink-actions,
[dir="rtl"] .more-menu button, [dir="rtl"] .more-menu a, [dir="rtl"] .account-menu button, [dir="rtl"] .account-menu a {
  direction: rtl;
}

body {
  transition: background-color .18s ease, color .18s ease;
}
*, *::before, *::after { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }

::selection { background: var(--gold); color: #12141A; }

/* themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  margin: 0;
  color: inherit;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
}
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: var(--bg-elevated-2); }
textarea { border-radius: var(--radius-sm); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--ring);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; margin: 0 0 .4em; color: var(--text); letter-spacing: -.02em; }

.wordmark {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-weight: 700;
  font-size: 1.95rem;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 2px;
}
.wordmark-dot { color: var(--gold); }

/* ---------- app shell (flat three-column, border dividers, no gaps) ---------- */
.app-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 232px minmax(0,600px) 328px;
  gap: 0;
  padding: 0;
  align-items: start;
}
@media (max-width: 1265px) { .app-shell { grid-template-columns: 80px minmax(0,600px) 328px; } }
@media (max-width: 1040px) { .app-shell { grid-template-columns: 80px minmax(0,1fr); } }
@media (max-width: 680px) { .app-shell { grid-template-columns: 1fr; } }

.rail-left {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 14px;
  border-right: 1px solid var(--border-soft);
}
.rail-left .wordmark { padding: 6px 10px 20px; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; color: var(--text-dim);
  font-size: 14.5px; font-weight: 500;
  width: 100%; max-width: 100%;
  position: relative;
}
@media (max-width: 1265px) { .nav-link { width: auto; padding: 11px; justify-content: center; } }
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link:active { background: var(--bg-active); }
.nav-link.active { font-weight: 600; background: var(--bg-elevated-2); color: var(--text); }
.nav-link.active .nav-icon { color: var(--gold); }
.nav-link .badge {
  background: var(--rose); color: #1a1608; font-size: .65rem; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; margin-left: 4px;
}
.nav-icon { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
@media (max-width: 1265px) { .nav-link span.label { display: none; } .nav-link .badge { position: absolute; margin-left: 14px; margin-top: -14px; } }

.compose-cta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--gold);
  color: #12141A; border: none;
  border-radius: 999px; padding: 13px; font-weight: 700; font-size: 14.5px;
  letter-spacing: .01em;
  width: 100%;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
}
.compose-cta-icon, .compose-cta .icon { flex-shrink: 0; }
.compose-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.compose-cta:active { filter: brightness(.98); transform: translateY(0); }
@media (max-width: 1265px) { .compose-cta { width: 48px; height: 48px; padding: 0; border-radius: 50%; } .compose-cta .label { display: none; } }

/* megaphone "broadcasting" pulse — the sound-wave arcs breathe in sequence */
.icon-megaphone .mp-wave {
  transform-origin: 6px 12px;
  animation: megaphone-wave 1.8s ease-in-out infinite;
}
.icon-megaphone .mp-wave-1 { animation-delay: 0s; }
.icon-megaphone .mp-wave-2 { animation-delay: .22s; }
@keyframes megaphone-wave {
  0%, 100% { opacity: .3; }
  45% { opacity: 1; }
}
.compose-cta:hover .icon-megaphone, .compose-fab:hover .icon-megaphone { animation: megaphone-tilt .5s ease-in-out; }
@keyframes megaphone-tilt {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .icon-megaphone .mp-wave, .compose-cta:hover .icon-megaphone, .compose-fab:hover .icon-megaphone { animation: none !important; }
}

.rail-left-footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.logout-form { display: contents; }
.nav-link-btn { border: none; background: none; }
.nav-link-btn:hover { color: var(--rose); background: var(--rose-soft); }

.account-menu-wrap { position: relative; }
.account-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border-radius: 12px; color: var(--text);
}
.account-trigger:hover { background: var(--bg-hover); }
.account-trigger-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: left; }
.account-trigger-name { font-weight: 700; font-size: .87rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger-handle { font-family: var(--font-mono); font-size: .76rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger .icon-chevron-up-down { color: var(--text-faint); flex-shrink: 0; }
.account-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  padding: 6px; box-shadow: var(--shadow-lg); min-width: 220px;
}
@media (max-width: 1265px) {
  .account-trigger-meta, .account-trigger .icon-chevron-up-down { display: none; }
  .account-trigger { justify-content: center; padding: 6px; }
  .account-menu { left: 0; right: auto; min-width: 220px; }
}

.rail-right {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100vh;
}
.card {
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 4px 0;
  overflow: hidden;
}
.card h3 { font-size: 1.05rem; padding: 14px 16px 8px; margin: 0; }

.settings-section { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px 20px; margin: 0 16px 16px; }
.settings-section-danger { border-color: var(--rose); background: var(--rose-soft); }
.settings-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--text); }
.settings-section-head .icon { color: var(--gold); flex-shrink: 0; }
.settings-section-danger .settings-section-head .icon { color: var(--rose); }
.settings-section-head h3 { padding: 0; margin: 0; font-size: 1.05rem; }

.avatar-upload-field { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar-upload { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.avatar-upload img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.avatar-upload-badge {
  position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #12141A; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-elevated);
}
.avatar-upload:hover .avatar-upload-badge { filter: brightness(1.08); }

.verify-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.verify-row-main { flex: 1; min-width: 200px; }
.verify-row-label { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.verify-row-value { font-weight: 600; margin: 2px 0; }
.verify-row-hint { font-size: .8rem; color: var(--text-faint); margin-top: 4px; }
.verify-inline-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.verify-inline-form input { flex: 1; min-width: 150px; }

.settings-sublabel { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 6px; }
.settings-empty-note { color: var(--text-faint); font-size: .86rem; margin: 0 0 4px; }
.settings-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.settings-list-row:last-child { border-bottom: none; }
.settings-list-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-list-user span { display: flex; flex-direction: column; min-width: 0; }
.settings-list-user strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-list-user small { color: var(--text-faint); font-size: .78rem; }
.search-pill {
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 999px;
  padding: 4px 4px 4px 16px; display: flex; align-items: center; gap: 8px;
}
.search-pill input { background: none; border: none; padding: 8px 0; width: 100%; }

.main-col { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; border-right: 1px solid var(--border-soft); }
@media (max-width: 1040px) { .main-col { border-right: none; } }

/* ---------- composer ---------- */
.composer {
  display: flex; gap: 12px; padding: 18px 20px; border: none; border-bottom: 1px solid var(--border-soft);
  background: transparent; border-radius: 0; box-shadow: none;
}
.composer textarea, .modern-textarea {
  width: 100%; font-size: 16px; padding: 12px 14px; min-height: 52px;
  border: 1.5px solid var(--border-soft); border-radius: 16px;
  background: var(--bg-elevated-2);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.composer textarea::placeholder, .modern-textarea::placeholder { color: var(--text-faint); font-style: italic; }
.composer textarea:focus, .modern-textarea:focus {
  border-color: var(--gold); background: var(--bg-elevated); box-shadow: 0 0 0 4px var(--gold-soft);
}
.reply-box { display: flex; gap: 10px; margin-top: 10px; }
.reply-box-avatar { flex-shrink: 0; margin-top: 2px; }
.reply-box-body { flex: 1; min-width: 0; }

/* ---------- replies: flat, full-width rows (like X) — no boxes, no thread line ---------- */
.gink-card { --card-pad: 20px; --avatar-col: 54px; } /* 42px avatar + 12px gap */
@media (max-width: 680px) { .gink-card { --card-pad: 14px; } }

/* The panel lives inside the Gink's text column; pull it out to the card's full width so reply avatars line up with the post's. */
.replies-panel {
  margin: 6px calc(-1 * var(--card-pad)) 0 calc(-1 * (var(--card-pad) + var(--avatar-col)));
  border-top: 1px solid var(--border-soft);
  background: var(--bg); cursor: default; /* stops the parent's hover tint bleeding through */
}
.reply-box { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px var(--card-pad); border-bottom: 1px solid var(--border-soft); }
.reply-box .avatar { flex-shrink: 0; }
.reply-box .reply-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 9px 0; font-size: 1.12rem; line-height: 1.4;
  border: none; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  resize: none; overflow: hidden;
}
.reply-box .reply-input:focus { border: none; background: transparent; box-shadow: none; }
.reply-box .reply-input::placeholder { color: var(--text-faint); font-style: normal; }
.reply-box .btn-post { align-self: center; flex-shrink: 0; }
.replies-thread { margin: 0; }
.replies-thread .gink-card { padding: 14px var(--card-pad); border-bottom: 1px solid var(--border-soft); border-radius: 0; background: transparent; margin: 0; cursor: pointer; }
.replies-thread .gink-card:hover { background: var(--bg-hover); }
.replies-thread .parent-hint { display: none; } /* every reply here is to the post above — no need to say so on each one */
.replies-loading {
  display: flex; align-items: center; gap: 8px; padding: 14px var(--card-pad);
  color: var(--text-faint); font-size: .85rem;
}
.replies-loading.hidden { display: none; }
.replies-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--gold);
  animation: replies-spin .7s linear infinite;
}
@keyframes replies-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .replies-spinner { animation: none; } }
.replies-restricted { color: var(--text-faint); font-size: .86rem; margin: 0; padding: 12px var(--card-pad); font-style: italic; border-bottom: 1px solid var(--border-soft); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 8px; border-top: none; padding-top: 10px; }
@media (max-width: 480px) {
  .composer-actions { justify-content: flex-start; }
  .composer-actions > div:last-child { width: 100%; justify-content: flex-end; }
  #composer-save-draft { padding: 8px 10px !important; }
}
.composer-tools { display: flex; align-items: center; gap: 2px; }
.composer-tools button { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-faint); font-size: 1rem; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.composer-tools button:hover { color: var(--gold); background: var(--gold-soft); }

.emoji-picker-wrap { position: relative; display: flex; }
.emoji-picker {
  position: absolute; bottom: calc(100% + 8px); left: -6px; z-index: 20;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  padding: 8px; width: 216px; box-shadow: var(--shadow-lg);
}
.emoji-picker-item { font-size: 1.15rem; padding: 5px; border-radius: 8px; line-height: 1; }
.emoji-picker-item:hover { background: var(--bg-hover); transform: scale(1.15); }

.composer-tools button.active { color: var(--gold); background: var(--gold-soft); }

.draft-editing-note {
  display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--gold);
  background: var(--gold-soft); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 8px;
}
.draft-editing-note span { flex: 1; }
.draft-editing-note button { color: var(--text-faint); display: flex; }
.draft-editing-note button:hover { color: var(--text); }

.poll-builder { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-top: 8px; background: var(--bg-elevated-2); min-width: 0; }
.poll-builder-option { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; min-width: 0; }
.poll-builder-option:last-child { margin-bottom: 0; }
.poll-option-input { flex: 1; min-width: 0; padding: 8px 12px; font-size: .88rem; border-radius: 999px; }
.poll-option-remove { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-faint); flex-shrink: 0; }
.poll-option-remove:hover:not(:disabled) { background: var(--rose-soft); color: var(--rose); }
.poll-option-remove:disabled { opacity: .25; cursor: default; }
.poll-builder-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.poll-add-option, .poll-remove-all { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--text-dim); padding: 5px 9px; border-radius: 999px; }
.poll-add-option:hover { color: var(--gold); background: var(--gold-soft); }
.poll-add-option:disabled { opacity: .35; }
.poll-remove-all:hover { color: var(--rose); background: var(--rose-soft); }

.schedule-builder { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; margin-top: 8px; background: var(--bg-elevated-2); color: var(--gold); min-width: 0; }
.schedule-builder input[type="datetime-local"] { flex: 1; min-width: 0; padding: 6px 10px; font-size: .86rem; border-radius: var(--radius-sm); color: var(--text); background: var(--bg-elevated); }
.schedule-builder .poll-remove-all { flex-shrink: 0; }
@media (max-width: 420px) {
  .schedule-builder { flex-wrap: wrap; }
  .schedule-builder input[type="datetime-local"] { flex-basis: 100%; order: 1; }
}

.draft-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.draft-row:hover { background: var(--bg-hover); }
.draft-row-body { flex: 1; min-width: 200px; text-decoration: none; color: inherit; display: block; }
.draft-row-text { font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-row-meta { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--text-faint); margin-top: 3px; }
.draft-row-actions { display: flex; gap: 8px; flex-shrink: 0; }

.add-account-current { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated-2); }
.add-account-current-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-dim); }

.account-switch-row { display: flex; align-items: center; gap: 2px; }
.account-switch-row .logout-form { flex: 1; display: contents; }
.account-switch-row button[type="submit"] { flex: 1; }
.account-switch-remove { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-faint); flex-shrink: 0; }
.account-switch-remove:hover { background: var(--rose-soft); color: var(--rose); }
.btn-post {
  background: var(--gold);
  color: #12141A; border: none; border-radius: 999px; padding: 9px 20px; font-weight: 700;
  box-shadow: none;
}
.btn-post:hover:not(:disabled) { filter: brightness(1.05); }
.btn-post:active:not(:disabled) { filter: brightness(.98); }
.btn-post:disabled { opacity: .38; cursor: default; box-shadow: none; }
.char-count { font-size: .8rem; color: var(--text-faint); margin-right: 10px; font-family: var(--font-body); }

.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-elevated-2); object-fit: cover; flex-shrink: 0; border: none; box-shadow: none; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; }
a > .avatar, a > .avatar-sm { transition: opacity .15s ease, transform .15s ease; }
a:hover > .avatar, a:hover > .avatar-sm { opacity: .9; }
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--sky) 100%);
  color: #12141A; font-weight: 700; font-family: var(--font-display);
}

/* icon set */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }

/* ---------- gink card (flat feed row with bottom rule) ---------- */
.gink-card {
  padding: 16px 20px; display: flex; gap: 12px;
  background: transparent; border: none; border-bottom: 1px solid var(--border-soft);
  border-radius: 0; margin-bottom: 0;
  box-shadow: none;
  position: relative; cursor: pointer;
}
.gink-card:hover { background: var(--bg-hover); box-shadow: none; transform: none; border-color: var(--border-soft); }
.gink-card:hover .more-btn { opacity: 1; }
.gink-body-col { min-width: 0; flex: 1; }
.gink-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: .95rem; }
.gink-name { font-family: var(--font-body); font-weight: 700; }
.gink-name:hover { text-decoration: underline; }
.gink-handle, .gink-time { color: var(--text-faint); font-family: var(--font-body); font-size: .9rem; }
.gink-verified { color: var(--sky); display: inline-flex; align-items: center; }
.verified-badge { display: block; }
.gink-name-wrap { display: inline-flex; align-items: center; gap: 3px; }
.why-reason { font-size: .76rem; color: var(--text-faint); margin-bottom: 3px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .03em; }
.gink-text { white-space: normal; word-wrap: break-word; margin: 4px 0 8px; font-size: 1.02rem; line-height: 1.55; }
.ink-link, .ink-mention { color: var(--sky); }
.ink-link:hover, .ink-mention:hover { text-decoration: underline; }
.ink-tag { color: var(--gold); font-weight: 600; }
.ink-tag:hover { text-decoration: underline; }
.cw-wrap summary { cursor: pointer; color: var(--rose); font-weight: 600; }
.translate-link {
  display: inline-flex; align-items: center; gap: 5px; color: var(--sky); font-size: .8rem;
  font-weight: 600; padding: 2px 0; margin-top: 2px;
}
.translate-link:hover { text-decoration: underline; }
.translate-link:disabled { opacity: .5; }
.translated-text { color: var(--text-dim); border-left: 2px solid var(--sky); padding-left: 10px; margin-top: 6px; }

.gink-actions { display: flex; align-items: center; gap: 2px; margin-top: 8px; flex-wrap: wrap; }
.gink-actions button {
  background: none; border: 1px solid transparent; color: var(--text-faint); font-size: .82rem;
  display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px;
  font-weight: 500; font-family: var(--font-body);
}
.gink-actions button:hover { background: var(--gold-soft); color: var(--gold); }
.gink-actions button.active { color: var(--gold); font-weight: 600; border-color: #3d3220; background: var(--gold-soft); }
.gink-actions button.active.reaction-fire { color: var(--rose); }

/* color-coded actions, like the reply-blue / repost-green / like-red pattern
   people already know from other social apps */
.gink-actions button[data-action="toggle-reply-box"]:hover { color: var(--sky); background: var(--sky-soft); }
.gink-actions button[data-action="repost"]:hover { color: var(--sage); background: var(--sage-soft); }
.gink-actions button[data-action="repost"].active { color: var(--sage); background: var(--sage-soft); border-color: transparent; }
.gink-actions button[data-action="bookmark"]:hover { color: var(--gold); background: var(--gold-soft); }
.gink-actions button[data-action="bookmark"].active { color: var(--gold-bright); }
.gink-actions button.reaction-fire:hover { color: var(--rose); background: var(--rose-soft); }
.gink-actions button.reaction-clap:hover, .gink-actions button.reaction-laugh:hover { color: var(--gold); background: var(--gold-soft); }
.gink-actions button.reaction-wow:hover { color: var(--sky); background: var(--sky-soft); }
.gink-actions button.reaction-think:hover { color: var(--sage); background: var(--sage-soft); }
.gink-actions button.reaction-heart:hover, .gink-actions button.reaction-heart.active { color: var(--rose); background: var(--rose-soft); }
.gink-actions button.reaction-cry:hover, .gink-actions button.reaction-cry.active { color: var(--sky); background: var(--sky-soft); }
.gink-actions button.reaction-clap.active { color: var(--gold); }
.gink-actions button.reaction-wow.active { color: var(--sky); }
.gink-actions button.reaction-laugh.active { color: var(--gold-bright); }
.gink-actions button.reaction-think.active { color: var(--sage); }
.gink-actions select { padding: 6px 10px; font-size: .78rem; border-radius: 999px; font-family: var(--font-mono); }

/* ---------- card overflow menu ("...", top-right corner) ---------- */
.more-menu-wrap { position: absolute; top: 14px; right: 16px; z-index: 5; }
.more-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text-faint);
  opacity: 0; transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.more-btn:hover, .more-btn:focus-visible { background: var(--bg-hover); color: var(--text); opacity: 1; }
/* always show once the menu it controls is open, and always show on touch (no hover) devices */
.more-menu-wrap:has(.more-menu:not(.hidden)) .more-btn { opacity: 1; background: var(--bg-hover); color: var(--text); }
@media (hover: none) { .more-btn { opacity: 1; } }

.more-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  min-width: 220px; padding: 6px; box-shadow: var(--shadow-lg);
}
.more-menu button, .more-menu a, .account-menu button, .account-menu a {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px; font-size: .88rem; color: var(--text);
  text-decoration: none;
}
.more-menu button:hover, .more-menu a:hover, .account-menu button:hover, .account-menu a:hover { background: var(--bg-hover); }
.more-menu button.active { color: var(--gold); }
.more-menu button.danger, .more-menu a.danger, .account-menu button.danger { color: var(--rose); }
.more-menu button.danger:hover, .more-menu a.danger:hover, .account-menu button.danger:hover { background: var(--rose-soft); }
.more-menu-label {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); padding: 8px 10px 4px;
}
.more-menu-divider { height: 1px; background: var(--border-soft); margin: 4px 2px; }

/* ---------- repost / quote group ---------- */
.repost-group { position: relative; display: flex; }
.repost-menu {
  position: absolute; bottom: calc(100% + 6px); left: -6px; z-index: 20;
  min-width: 168px; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow-lg);
}
.repost-menu button, .repost-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 7px; font-size: .86rem; color: var(--text);
  text-decoration: none; font-family: var(--font-body);
}
.repost-menu button:hover, .repost-menu a:hover { background: var(--bg-hover); color: var(--sage); }
.repost-menu button.active { color: var(--sage); }

.quote-embed {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 8px; font-size: .93rem;
  background: var(--bg-elevated);
}
.repost-of { border-top: none; }

/* "Replying to @handle" — a slim inline line, not a boxed card, so a reply reads as part of the flow rather than a separate element */
.parent-hint {
  display: flex; align-items: center; gap: 5px;
  font-size: .82rem; color: var(--text-faint); margin-bottom: 4px;
}
.parent-hint::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H4v-5'/%3E%3Cpath d='M20 7a8 8 0 0 0-16 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17H4v-5'/%3E%3Cpath d='M20 7a8 8 0 0 0-16 5'/%3E%3C/svg%3E") center / contain no-repeat;
  background: var(--text-faint);
}
.parent-hint a { color: var(--sky); font-weight: 600; }
.parent-hint a:hover { text-decoration: underline; }
.repost-note { font-size: .8rem; color: var(--sage); margin-bottom: 4px; font-weight: 600; font-family: var(--font-mono); }

.link-preview {
  position: relative; display: flex; gap: 10px;
  border: 1px solid var(--border-soft); border-radius: 2px 10px 10px 2px; overflow: hidden;
  margin-top: 8px; padding-left: 12px; background: var(--bg-elevated);
}
.link-preview::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 0; border-left: 2px dashed var(--border); }
.link-preview:hover { background: var(--bg-hover); border-color: var(--border); }
.link-preview img { width: 96px; height: 96px; object-fit: cover; flex-shrink: 0; }
.link-preview-body { padding: 10px 12px 10px 2px; min-width: 0; }
.link-preview-domain { font-size: .72rem; color: var(--gold); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .03em; }

.poll-option { border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; margin-bottom: 6px; position: relative; cursor: pointer; overflow: hidden; }
.poll-option:hover { border-color: var(--gold); }
.poll-option-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold-soft)); z-index: 0; }
.poll-option-label { position: relative; z-index: 1; display: flex; justify-content: space-between; }
.poll-option.voted { border-color: var(--gold); }

/* ---------- reactions: aggregate trigger + hover-revealed picker ---------- */
.reaction-group { position: relative; display: flex; }
.reaction-trigger-emoji { font-size: 1rem; line-height: 1; }
.reaction-picker {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(6px) scale(.9);
  display: flex; gap: 2px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform-origin: bottom center;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 6;
}
.reaction-group:hover .reaction-picker,
.reaction-group:focus-within .reaction-picker { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.reaction-picker-btn {
  padding: 6px 7px !important; font-size: 1.2rem !important; line-height: 1;
  border-radius: 50% !important;
  transition: transform .12s ease, background-color .12s ease;
}
.reaction-picker-btn:hover { transform: scale(1.25) translateY(-3px); }
@media (max-width: 480px) {
  /* centering the picker on its trigger can push it past the right edge
     once a trigger sits inside an indented, padded reply thread — anchor
     to the trigger's right edge and grow left instead */
  .reaction-picker { left: auto; right: -4px; transform: translateY(6px) scale(.9); transform-origin: bottom right; }
  .reaction-group:hover .reaction-picker, .reaction-group:focus-within .reaction-picker { transform: translateY(0) scale(1); }
}
.reaction-picker-btn .emo, .reaction-trigger-emoji .emo { display: inline-block; transform-origin: 50% 70%; }

/* ---- animated emoji: each reaction has its own personality ---- */
@keyframes emo-heart  { 0%,100% { transform: scale(1); } 25% { transform: scale(1.35); } 45% { transform: scale(1.05); } 65% { transform: scale(1.3); } }
@keyframes emo-fire   { 0%,100% { transform: scale(1) rotate(0); filter: brightness(1); } 30% { transform: scale(1.12,1.25) rotate(-4deg); filter: brightness(1.2); } 60% { transform: scale(.95,1.1) rotate(4deg); } }
@keyframes emo-clap   { 0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-14deg) scale(1.15); } 40% { transform: rotate(10deg) scale(1.05); } 60% { transform: rotate(-10deg) scale(1.15); } 80% { transform: rotate(6deg); } }
@keyframes emo-laugh  { 0%,100% { transform: translateY(0) rotate(0); } 15% { transform: translateY(-3px) rotate(-10deg); } 30% { transform: translateY(0) rotate(10deg); } 45% { transform: translateY(-3px) rotate(-10deg); } 60% { transform: translateY(0) rotate(8deg); } }
@keyframes emo-wow    { 0%,100% { transform: scale(1); } 40% { transform: scale(1.4); } 60% { transform: scale(.9); } 80% { transform: scale(1.15); } }
@keyframes emo-cry    { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(2px) rotate(-6deg); } 50% { transform: translateY(0) rotate(6deg); } 75% { transform: translateY(2px) rotate(-4deg); } }
@keyframes emo-think  { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-16deg) translateY(-2px); } 75% { transform: rotate(14deg) translateY(-2px); } }
@keyframes emo-pop    { 0% { transform: scale(.4); opacity: .3; } 55% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }
@keyframes emo-float-in { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: none; } }

.reaction-picker-btn.reaction-heart:hover .emo  { animation: emo-heart .9s ease-in-out infinite; }
.reaction-picker-btn.reaction-fire:hover .emo   { animation: emo-fire .8s ease-in-out infinite; }
.reaction-picker-btn.reaction-clap:hover .emo   { animation: emo-clap .8s ease-in-out infinite; }
.reaction-picker-btn.reaction-laugh:hover .emo  { animation: emo-laugh 1s ease-in-out infinite; }
.reaction-picker-btn.reaction-wow:hover .emo    { animation: emo-wow .9s ease-in-out infinite; }
.reaction-picker-btn.reaction-cry:hover .emo    { animation: emo-cry .9s ease-in-out infinite; }
.reaction-picker-btn.reaction-think:hover .emo  { animation: emo-think 1.1s ease-in-out infinite; }
/* picker emojis float in one after another when it opens */
.reaction-group:hover .reaction-picker-btn .emo, .reaction-group:focus-within .reaction-picker-btn .emo { animation: emo-float-in .32s both; }
.reaction-group:hover .reaction-picker-btn:nth-child(2) .emo { animation-delay: .04s; }
.reaction-group:hover .reaction-picker-btn:nth-child(3) .emo { animation-delay: .08s; }
.reaction-group:hover .reaction-picker-btn:nth-child(4) .emo { animation-delay: .12s; }
.reaction-group:hover .reaction-picker-btn:nth-child(5) .emo { animation-delay: .16s; }
.reaction-group:hover .reaction-picker-btn:nth-child(6) .emo { animation-delay: .2s; }
.reaction-group:hover .reaction-picker-btn:nth-child(7) .emo { animation-delay: .24s; }
.reaction-group .reaction-picker-btn:hover .emo { animation-delay: 0s; }
/* the chosen reaction pops when you tap it, then idles gently */
.reaction-trigger-emoji.emo-pop { display: inline-block; animation: emo-pop .5s ease-out; }
.reaction-trigger.active.reaction-heart .reaction-trigger-emoji { animation: emo-heart 1.6s ease-in-out infinite; display: inline-block; }
.reaction-trigger.active.reaction-fire .reaction-trigger-emoji  { animation: emo-fire 1.4s ease-in-out infinite; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .reaction-picker-btn .emo, .reaction-trigger-emoji, .reaction-trigger-emoji.emo-pop { animation: none !important; }
}

.reaction-picker-btn.active { background: var(--gold-soft); }
.mod-menu { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border-color: var(--border); }

/* ---------- forms / auth pages ---------- */
.auth-shell { max-width: 420px; margin: 8vh auto; padding: 0 20px; }
.auth-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .84rem; color: var(--text-dim); font-weight: 600; font-family: var(--font-body); }
.field input, .field textarea, .field select { width: 100%; }
.field-error { color: var(--rose); font-size: .82rem; }
.btn-primary {
  background: var(--gold);
  color: #12141A; border: none; border-radius: 999px; padding: 12px; font-weight: 700; width: 100%;
  box-shadow: none;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { filter: brightness(.98); }
.btn-secondary { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 12px; font-weight: 600; width: 100%; }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-faint); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: .82rem; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.helper-text { font-size: .85rem; color: var(--text-dim); text-align: center; margin-top: 16px; }
.status-banner { background: var(--sage-soft); border: 1px solid var(--sage); color: var(--sage); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; }

/* ---------- tabs / filters ---------- */
.tab-row { display: flex; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); z-index: 4; margin-bottom: 0; }
.tab-row a { flex: 1; text-align: center; padding: 14px; color: var(--text-dim); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; }
.tab-row a:hover { background: var(--bg-hover); color: var(--text); }
.tab-row a.active { color: var(--text); border-color: var(--gold); }
.filter-row { display: flex; gap: 8px; padding: 12px 20px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-soft); }
.chip { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: .76rem; color: var(--text-dim); display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); }
.chip:hover { border-color: var(--text-faint); color: var(--text); }
.chip.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); font-weight: 600; }

/* ---------- theme toggle ---------- */
/* (theme is now chosen from Settings only — no sidebar toggle) */

/* ---------- toast ---------- */
.ginkr-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border);
  padding: 10px 18px; border-radius: 999px; font-size: .88rem; z-index: 999;
  opacity: 0; pointer-events: none; box-shadow: var(--shadow-lg);
  transition: opacity .2s ease, transform .2s ease;
}
.ginkr-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 680px) { .ginkr-toast { bottom: 82px; } }

/* ---------- misc ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.section-title { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; padding: 0 16px; font-weight: 700; font-family: var(--font-mono); }
.suggested-user, .trend-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.suggested-user:hover, .trend-row:hover { background: var(--bg-hover); }
.suggested-user .meta, .trend-row .meta { min-width: 0; flex: 1; }
.follow-btn-sm { background: var(--gold); color: #12141A; border: none; border-radius: 999px; padding: 7px 16px; font-size: .82rem; font-weight: 700; }
.follow-btn-sm:hover { filter: brightness(1.1); }
.follow-btn-sm.following { background: transparent; border: 1px solid var(--border); color: var(--text); }
.follow-btn-sm.following:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-soft); }
.card-footer-link { display: block; padding: 12px 16px; color: var(--sky); font-size: .88rem; font-weight: 600; }
.card-footer-link:hover { background: var(--bg-hover); }

.top-bar { display: none; }
.bottom-nav { display: none; }
.compose-fab { display: none; }
.mobile-menu-sheet { display: none; }
body.no-scroll { overflow: hidden; }

@media (max-width: 1040px) {
  .rail-right { display: none; }
}

@media (max-width: 680px) {
  .rail-left { display: none; }
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  .top-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
    z-index: 30; border-bottom: 1px solid var(--border-soft);
  }
  .top-bar .wordmark { font-size: 1.3rem; }
  .top-bar-icon-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text); flex-shrink: 0; }
  .top-bar-icon-btn:active { background: var(--bg-hover); }

  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-soft);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 30; box-shadow: none;
  }
  .bottom-nav a { position: relative; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.4rem; width: 46px; height: 46px; border-radius: 50%; }
  .bottom-nav a.active { color: var(--gold); background: var(--gold-soft); }
  .notif-badge-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; padding: 0; border-radius: 50%; background: var(--rose); font-size: 0; color: transparent; overflow: hidden; }

  .compose-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--gold); color: #12141A; box-shadow: var(--shadow-lg); z-index: 29;
  }
  .compose-fab:active { filter: brightness(.95); }

  /* full-screen slide-down menu for nav items that don't fit in the bottom bar */
  .mobile-menu-sheet.hidden { display: none; }
  .mobile-menu-sheet { display: block; position: fixed; inset: 0; z-index: 50; }
  .mobile-menu-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
  .mobile-menu-panel {
    position: absolute; top: 0; left: 0; bottom: 0; width: min(78vw, 300px);
    padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 16px;
    border-radius: 0; border: none; border-right: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: mobile-menu-in .18s ease-out;
  }
  @keyframes mobile-menu-in { from { transform: translateX(-12px); opacity: .6; } to { transform: none; opacity: 1; } }
  .mobile-menu-panel .nav-link { width: 100%; padding: 12px; font-size: 1rem; justify-content: flex-start; text-align: left; gap: 14px; }
  .mobile-menu-panel .nav-link .label { display: inline; }

  /* comfortable 44px+ touch targets */
  .gink-actions button, .more-btn, .repost-trigger, .reaction-trigger { min-height: 40px; }
  .composer-tools button { width: 38px; height: 38px; }
  .composer-tools { flex-wrap: wrap; row-gap: 4px; }
  .chip { padding: 7px 13px; }

  /* tabs scroll instead of squeezing when there isn't room */
  .tab-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab-row a { flex: 0 0 auto; padding: 14px 16px; white-space: nowrap; }

  .gink-card, .composer { padding-left: 14px; padding-right: 14px; }
  /* keep content clear of the fixed bottom nav + compose FAB */
  .main-col { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .settings-section:last-of-type { margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .more-menu-wrap { top: 10px; right: 10px; }
  .page-header { padding: 14px 14px 10px; }
  .create-panel { position: static; }
  .create-panel .form-card { position: fixed; left: 16px; right: 16px; top: 50%; width: auto; transform: translateY(-50%); max-height: 80vh; overflow-y: auto; }
  .settings-section { margin-left: 12px; margin-right: 12px; padding: 16px; }
  .auth-shell { margin: 6vh auto; }
  .auth-card { padding: 22px; }
}

@media (max-width: 380px) {
  .account-trigger-meta { display: none; }
}

/* popovers must never push the page into horizontal scroll on narrow viewports */
.more-menu, .account-menu, .repost-menu, .emoji-picker, .reaction-picker, .create-panel .form-card, .mod-menu {
  max-width: calc(100vw - 24px);
}
@media (max-width: 480px) {
  .more-menu-wrap .more-menu { right: -8px; }
  .repost-group .repost-menu { left: 0; }
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
table.admin-table th, table.admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
table.admin-table th { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); }

/* tablet: two columns (icon rail + feed), comfortable padding, no accidental overlap with the (hidden) right rail */
@media (min-width: 681px) and (max-width: 1040px) {
  .main-col { max-width: 700px; margin: 0 auto; width: 100%; }
  .gink-card, .composer { padding-left: 24px; padding-right: 24px; }
}
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; font-family: var(--font-mono); }
.pill-danger { background: var(--rose-soft); color: var(--rose); }
.pill-ok { background: var(--sage-soft); color: var(--sage); }
.pill-warn { background: var(--gold-soft); color: var(--gold); }

.message-row { display: flex; margin-bottom: 10px; }
.message-row.mine { justify-content: flex-end; }
.message-bubble { max-width: 70%; padding: 9px 13px; border-radius: 16px; background: var(--bg-elevated-2); border: 1px solid var(--border-soft); }
.message-row.mine .message-bubble { background: var(--gold); color: #12141A; border-color: transparent; }

.notif-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.notif-item.unread { background: var(--gold-soft); }
.notif-item:hover { background: var(--bg-hover); }

.legal-body { max-width: 720px; margin: 40px auto; padding: 0 20px; line-height: 1.7; }
.legal-body h1 { margin-bottom: 4px; }
.legal-body .updated { color: var(--text-faint); font-size: .85rem; margin-bottom: 24px; }


/* ---------- page headers + create panels (Collections / Lists / Communities) ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 12px; border-bottom: 1px solid var(--border-soft); }
.page-header h2 { font-size: 1.35rem; margin: 0; }
.page-header p { margin: 2px 0 0; color: var(--text-faint); font-size: .88rem; }
.create-panel { position: relative; }
.create-panel > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 16px; font-size: .88rem; border-radius: 999px; }
.create-panel > summary::-webkit-details-marker { display: none; }
.create-panel[open] > summary { filter: brightness(.95); }
.create-panel .form-card { position: absolute; right: 0; top: calc(100% + 8px); z-index: 15; width: min(360px, 86vw); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-lg); }
.form-actions { display: flex; justify-content: flex-end; }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; cursor: pointer; }
.check-row input { margin-top: 4px; accent-color: var(--gold); }
.check-row span { display: flex; flex-direction: column; font-size: .9rem; }
.check-row small { color: var(--text-faint); font-size: .78rem; }

.section-head-row { display: flex; align-items: center; gap: 8px; padding: 14px 20px 8px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-soft); }
.section-head-row .icon { color: var(--gold); }
.count-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--bg-elevated-2); color: var(--text-dim); font-size: .76rem; font-weight: 600; }

.list-card { margin: 14px 20px 0; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-elevated); overflow: hidden; }
.list-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.list-card-head h3 { margin: 0; font-size: 1rem; flex: 1; }
.list-member { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: .92rem; }
.list-member:hover { background: var(--bg-hover); }
.add-member-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.add-member-form input { flex: 1; }

.avatar-tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--sky)); color: #12141A; font-weight: 800; font-size: .8rem; flex-shrink: 0; }
.avatar-tile-lg { width: 46px; height: 46px; border-radius: 14px; font-size: 1.1rem; }
.community-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); }
.community-row:hover { background: var(--bg-hover); }
.community-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.community-row-desc { color: var(--text-faint); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state .icon { display: block; margin: 0 auto 10px; opacity: .5; }

/* ---------- reactions keep their emoji; these accents tint the count / hover state per reaction ---------- */
.rx-heart { color: var(--rose); }
.rx-fire  { color: var(--gold); }
.rx-clap  { color: var(--sage); }
.rx-laugh { color: var(--gold-bright); }
.rx-wow   { color: var(--sky); }
.rx-cry   { color: var(--sky); }
.rx-think { color: var(--sage); }
.reaction-picker-btn { color: var(--text-dim); }
.reaction-picker-btn .emo svg, .reaction-trigger-emoji svg { display: block; }
.gink-actions button.reaction-fire:hover, .gink-actions button.reaction-fire.active, .gink-actions button.active.reaction-fire { color: var(--gold); background: var(--gold-soft); }
.gink-actions button.reaction-clap:hover, .gink-actions button.reaction-clap.active { color: var(--sage); background: var(--sage-soft); }
.gink-actions button.reaction-laugh:hover, .gink-actions button.reaction-laugh.active { color: var(--gold-bright); background: var(--gold-soft); }

/* ---------- "who reacted / who reposted" summary line under a Gink ---------- */
.gink-social-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
.gink-social-proof:empty { display: none; }
.proof-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px;
  border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--text-dim); background: transparent;
}
.proof-btn:hover { background: var(--bg-hover); color: var(--text); }
.proof-icons, .proof-avatars { display: inline-flex; align-items: center; }
.proof-icon {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated-2); border: 2px solid var(--bg); margin-left: -7px;
}
.proof-icon:first-child { margin-left: 0; }
.proof-icon svg { display: block; }
.proof-icon-plain { width: auto; height: auto; background: transparent; border: none; margin-left: 4px; color: var(--sage); }
.proof-avatars img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-left: -7px;
  border: 2px solid var(--bg); background: var(--bg-elevated-2);
}
.proof-avatars img:first-child { margin-left: 0; }
.proof-icons + .proof-avatars { margin-left: 2px; }
.proof-count { font-variant-numeric: tabular-nums; }

/* ---------- popup listing people (reactions / reposts) ---------- */
.reactors-popup { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.reactors-popup.hidden { display: none; }
.reactors-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.reactors-sheet {
  position: relative; width: min(420px, 100%); max-height: min(72vh, 560px); display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: reactors-in .16s ease-out;
}
@keyframes reactors-in { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.reactors-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border-soft); }
.reactors-head h3 { margin: 0; font-size: 1.05rem; }
.reactors-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.reactors-close:hover { background: var(--bg-hover); color: var(--text); }
.reactors-body { overflow-y: auto; padding-bottom: 6px; }
.reactors-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 6px; }
.reactors-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); font-size: .82rem; color: var(--text-dim);
}
.reactors-chip b { font-weight: 700; color: var(--text); }
.reactors-chip:hover { border-color: var(--text-faint); }
.reactors-chip.active { background: var(--gold-soft); border-color: var(--gold); }
.reactor-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; color: inherit; text-decoration: none; }
.reactor-row:hover { background: var(--bg-hover); }
.reactor-row.hidden { display: none; }
.reactor-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.reactor-who strong { font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reactor-who small { color: var(--text-faint); font-size: .8rem; }
.reactor-type { flex-shrink: 0; display: flex; }
.reactor-type.rx-plain { color: var(--sage); }
.reactors-empty { padding: 28px 16px; text-align: center; color: var(--text-faint); margin: 0; }
@media (max-width: 680px) {
  .reactors-popup { align-items: flex-end; padding: 0; }
  .reactors-sheet { width: 100%; max-height: 78vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: reactors-up .2s ease-out; }
  @keyframes reactors-up { from { transform: translateY(24px); opacity: .5; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .reactors-sheet { animation: none; } }

/* ---------- admin command center ---------- */
/* The feed's 600px column is too narrow for a dashboard, so when one is on the page drop the right rail and let the main column breathe. */
.app-shell:has(.cc-root) { max-width: 1560px; grid-template-columns: 232px minmax(0, 1fr); }
.app-shell:has(.cc-root) .rail-right { display: none; }
@media (max-width: 1265px) { .app-shell:has(.cc-root) { grid-template-columns: 80px minmax(0, 1fr); } }
@media (max-width: 680px) { .app-shell:has(.cc-root) { grid-template-columns: 1fr; } }

.cc-root { padding: 18px 22px 8px; }
.cc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cc-header h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.45rem; }
.cc-header h2 .icon { color: var(--gold); }
.cc-header p { margin: 4px 0 0; color: var(--text-faint); font-size: .85rem; }
.cc-mod-link { width: auto; padding: 9px 18px; display: inline-flex; align-items: center; gap: 8px; }
.cc-mod-badge { background: var(--rose); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; font-weight: 800; }

.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cc-kpi { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; }
.cc-kpi-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-kpi-label { color: var(--text-dim); font-size: .82rem; font-weight: 600; margin-top: 4px; }
.cc-kpi-sub { color: var(--text-faint); font-size: .76rem; margin-top: 2px; }
.cc-kpi.cc-good .cc-kpi-value { color: var(--sage); }
.cc-kpi.cc-warn { border-color: var(--rose); background: var(--rose-soft); }
.cc-kpi.cc-warn .cc-kpi-value { color: var(--rose); }
.cc-note { color: var(--text-faint); font-size: .78rem; margin: 10px 2px 0; }

.cc-section-title {
  margin: 26px 2px 10px; font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
}
.cc-grid { display: grid; gap: 14px; }
.cc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cc-grid-2, .cc-grid-3 { grid-template-columns: minmax(0, 1fr); } .cc-root { padding: 14px 14px 4px; } }
.cc-card { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px 16px; min-width: 0; }
.cc-card h3 { margin: 0 0 12px; font-size: .95rem; padding: 0; }
.cc-empty { color: var(--text-faint); font-size: .85rem; margin: 6px 0; }
.cc-foot { color: var(--text-faint); font-size: .74rem; margin: 12px 0 0; }

.cc-bars { display: flex; flex-direction: column; gap: 9px; }
.cc-bar-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: .84rem; }
.cc-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.cc-bar-track { height: 9px; border-radius: 999px; background: var(--bg-elevated-2); overflow: hidden; }
.cc-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--sky)); }
.cc-bar-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 3.2em; }
.cc-bar-value small { color: var(--text-faint); font-weight: 600; margin-left: 3px; }

.cc-trend { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.cc-trend-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.cc-trend-val { font-size: .66rem; color: var(--text-dim); font-variant-numeric: tabular-nums; min-height: 1em; }
.cc-trend-bar { width: 100%; max-width: 22px; border-radius: 4px 4px 2px 2px; background: var(--gold); min-height: 2px; }
.cc-trend-col:last-child .cc-trend-bar { background: var(--sky); }
.cc-trend-day { font-size: .66rem; color: var(--text-faint); }

/* ---------- outline menu icons (sidebar, mobile menu) ---------- */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; }
.nav-icon svg { display: block; }
.rx-emoji { display: inline-block; line-height: 1; font-style: normal; }

.quote-unavailable { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: .86rem; font-style: italic; }


/* ---------- reporting + moderation ---------- */
.report-form { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.report-help { margin: 0 0 6px; color: var(--text-dim); font-size: .88rem; }
.report-reason { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); cursor: pointer; font-size: .92rem; }
.report-reason:hover { background: var(--bg-hover); }
.report-reason input { accent-color: var(--gold); margin: 0; }
.report-reason:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.report-form textarea { margin-top: 6px; }
.report-form .btn-primary { margin-top: 8px; }

.mod-card { margin: 12px 16px; padding: 14px 16px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.mod-card-quiet { opacity: .85; }
.mod-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; }
.mod-count { font-weight: 800; font-size: .86rem; background: var(--rose-soft); color: var(--rose); padding: 2px 10px; border-radius: 999px; }
.mod-when { color: var(--text-faint); font-size: .78rem; }
.mod-gink { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg-elevated-2); }
.mod-gink-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .84rem; color: var(--text-dim); margin-bottom: 4px; }
.mod-gink-meta strong { color: var(--text); }
.mod-dot { opacity: .5; }
.mod-gink-text { white-space: pre-wrap; word-break: break-word; font-size: .95rem; }
.mod-reporters { margin-top: 10px; font-size: .84rem; }
.mod-reporters summary { cursor: pointer; color: var(--text-dim); font-weight: 600; }
.mod-reporter { padding: 8px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mod-reporter:last-child { border-bottom: none; }
.mod-reporter p { flex-basis: 100%; margin: 2px 0 0; color: var(--text-dim); }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mod-actions .btn-secondary, .mod-actions a.btn-secondary, .mod-actions .btn-primary { width: auto; padding: 7px 16px; font-size: .84rem; text-decoration: none; display: inline-block; }
.mod-danger { color: var(--rose) !important; border-color: var(--rose) !important; }
.mod-danger:hover { background: var(--rose-soft) !important; }
.mod-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px;
  background: var(--gold-soft); border-bottom: 1px solid var(--gold); color: var(--text); font-size: .9rem;
}
.mod-banner .btn-secondary { width: auto; padding: 5px 14px; font-size: .82rem; }
.mod-banner span { flex: 1; min-width: 180px; }
.page-header h2 .icon { vertical-align: -3px; color: var(--gold); margin-right: 4px; }

/* ---------- blue-tick request ---------- */
.settings-hint { color: var(--text-dim); font-size: .88rem; margin: 0 0 12px; }
.verif-state { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-elevated-2); font-size: .92rem; }
.verif-ok { background: var(--sage-soft); color: var(--sage); font-weight: 600; }
.verif-warn { background: var(--gold-soft); }
.verif-note { margin: 10px 0 0; font-size: .88rem; color: var(--text-dim); }
.mod-applicant { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.mod-applicant-info { min-width: 0; font-size: .92rem; }
.mod-applicant-info > span { color: var(--text-faint); }
.mod-applicant-stats { display: flex; flex-wrap: wrap; gap: 2px 6px; color: var(--text-dim); font-size: .8rem; margin: 3px 0 6px; }
.mod-applicant-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-dl { margin: 10px 0 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: .9rem; }
.mod-dl dt { color: var(--text-faint); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 3px; }
.mod-dl dd { margin: 0; min-width: 0; word-break: break-word; }
.mod-links { margin: 0; padding-left: 18px; }
.mod-links a { color: var(--sky); }
.mod-links a:hover { text-decoration: underline; }
@media (max-width: 560px) { .mod-dl { grid-template-columns: 1fr; gap: 2px; } .mod-dl dd { margin-bottom: 8px; } }
.mod-reject { flex-basis: 100%; }
.mod-reject summary { display: inline-block; list-style: none; cursor: pointer; width: auto; padding: 7px 16px; font-size: .84rem; }
.mod-reject summary::-webkit-details-marker { display: none; }
.mod-reject-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 520px; }
.mod-decided { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 18px; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }

/* ---------- post page header (← Post) ---------- */
.post-header { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 18px; padding: 10px 14px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); }
.post-header h2 { margin: 0; font-size: 1.2rem; }
.post-header-back { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); }
.post-header-back:hover { background: var(--bg-hover); }

/* reactions summary sits right beside the like button */
.proof-inline { display: inline-flex; align-items: center; }
.proof-inline:empty { display: none; }
.gink-actions .proof-btn { padding: 4px 8px 4px 4px; gap: 6px; font-family: var(--font-body); color: var(--text-dim); }
.gink-actions .proof-btn:hover { background: var(--bg-hover); color: var(--text); }

/* ---------- grey tick (identity verified) ---------- */
.gink-verified-grey { color: #8b98a5; }
html[data-theme="light"] .gink-verified-grey { color: #6c7784; }

.idv-sandbox { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--gold-soft); border: 1px dashed var(--gold); font-size: .84rem; }
.idv-checks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.idv-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; color: var(--text-dim); }
.idv-checks li .icon { flex-shrink: 0; margin-top: 2px; }
.idv-checks li.idv-done { color: var(--text); }
.idv-checks li.idv-done .icon { color: var(--sage); }
.idv-what { padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-elevated-2); font-size: .86rem; color: var(--text-dim); }
.idv-what strong { color: var(--text); display: block; margin: 8px 0 3px; }
.idv-what strong:first-child { margin-top: 0; }
.idv-what ol { margin: 0; padding-left: 20px; }
.idv-what li { margin-bottom: 4px; }
.idv-what p { margin: 0; }
.idv-sbx-banner { margin: -4px -4px 14px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--gold-soft); border: 1px dashed var(--gold); font-size: .78rem; font-weight: 700; text-align: center; letter-spacing: .02em; }
.idv-sbx-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.idv-sbx-form .btn-secondary { width: 100%; text-align: left; padding: 11px 16px; }

/* =====================================================================
   Posts: action row, opened-post details, share, notes, embeds
   ===================================================================== */

/* reply · repost · like · views · bookmark · share, spread across the row */
.gink-actions { justify-content: space-between; gap: 4px; max-width: 540px; flex-wrap: nowrap; }
.gink-actions > *, .gink-actions .repost-group, .gink-actions .reaction-group, .gink-actions .share-group { flex: 0 0 auto; }
.gink-actions .act-views {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px;
  color: var(--text-faint); font-size: .82rem; font-weight: 500; text-decoration: none;
}
.gink-actions .act-views:hover { color: var(--sky); background: var(--sky-soft); }
.gink-actions .count, .gink-actions .reply-count, .gink-actions .act-views span { font-variant-numeric: tabular-nums; }
.gink-actions .bookmark-btn.active { background: transparent; border-color: transparent; color: var(--sky); }
.gink-actions .bookmark-btn.active svg { fill: currentColor; }
.gink-actions .bookmark-btn:hover { color: var(--sky); background: var(--sky-soft); }
.share-group { position: relative; display: flex; }
.share-menu { left: auto; right: -6px; min-width: 190px; }
.share-menu button { width: 100%; justify-content: flex-start; }
@media (max-width: 480px) {
  .gink-actions { gap: 0; }
  .gink-actions button, .gink-actions .act-views { padding: 7px 6px; gap: 4px; }
  .share-menu { right: 0; }
}

/* the post that has been opened */
.gink-card.is-detail { cursor: default; }
.gink-card.is-detail:hover { background: transparent; }
.gink-card.is-detail .gink-time { display: none; }
.gink-card.is-detail > .gink-body-col > .gink-text, .gink-card.is-detail .gink-body-col > .gink-text { font-size: 1.22rem; line-height: 1.5; }
.post-meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; padding-bottom: 12px;
  color: var(--text-faint); font-size: .92rem; border-bottom: 1px solid var(--border-soft);
}
.post-meta-line a { color: var(--text-faint); text-decoration: none; }
.post-meta-line a:hover { text-decoration: underline; }
.post-meta-line strong { color: var(--text); font-weight: 700; }
.gink-card.is-detail .gink-actions { max-width: none; border-bottom: 1px solid var(--border-soft); padding: 2px 0 6px; margin-top: 0; }

/* "Readers added context" */
.community-note {
  margin: 12px 0 2px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated-2);
}
.community-note-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .88rem; color: var(--sky); margin-bottom: 4px; }
.community-note p { margin: 0 0 6px; font-size: .93rem; }
.community-note small { color: var(--text-faint); font-size: .76rem; }

/* send via chat / lists / embed popups */
.share-search-wrap { padding: 10px 14px 4px; }
.share-search-wrap input { width: 100%; }
.share-person, .list-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; text-align: left; color: inherit;
  background: none; border: none; border-radius: 0; cursor: pointer;
}
.share-person:hover, .list-row:hover { background: var(--bg-hover); }
.share-person.hidden { display: none; }
.share-person-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.share-person-who strong { font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-person-who small { color: var(--text-faint); font-size: .8rem; }
.share-person-send { color: var(--gold); display: flex; }
.share-empty { padding: 26px 18px; text-align: center; color: var(--text-faint); margin: 0; }
.list-row .list-name { flex: 1; font-weight: 600; }
.list-row .list-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .8rem; color: transparent; }
.list-row.on .list-check { background: var(--gold); border-color: var(--gold); color: #12141A; }
.embed-pop-body { padding: 14px 18px 18px; overflow-y: auto; }
.embed-pop-body textarea { width: 100%; font-family: var(--font-mono); font-size: .8rem; }
.embed-preview-label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 6px; }
#embed-preview { width: 100%; height: 230px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }

/* the public embed card (rendered inside other sites' iframes) */
.embed-body { margin: 0; padding: 0; background: transparent; }
.embed-card { margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--text); }
.embed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.embed-who { flex: 1; min-width: 0; line-height: 1.25; }
.embed-who .gink-name { font-weight: 700; color: var(--text); text-decoration: none; }
.embed-brand { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none; }
.embed-brand span { color: var(--gold); }
.embed-text { font-size: 1rem; line-height: 1.5; word-break: break-word; }
.embed-foot { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 10px; color: var(--text-faint); font-size: .8rem; }
.embed-foot a { color: var(--text-faint); text-decoration: none; }
.embed-foot .embed-open { margin-left: auto; color: var(--sky); font-weight: 600; }
.embed-unavailable { text-align: center; color: var(--text-dim); }

/* post activity */
.activity-post { display: block; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit; }
.activity-post span { color: var(--text-faint); }
.activity-post p { margin: 6px 0 0; color: var(--text-dim); }
.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.activity-stat { background: var(--bg); padding: 18px 12px; text-align: center; }
.activity-icon { color: var(--text-faint); display: flex; justify-content: center; margin-bottom: 6px; }
.activity-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.activity-label { color: var(--text-faint); font-size: .8rem; }
.activity-reactions { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 20px 8px; }
.activity-reaction { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 999px; }
.activity-reaction small { color: var(--text-faint); }
.activity-note { padding: 14px 20px 20px; color: var(--text-faint); font-size: .82rem; margin: 0; }
@media (max-width: 480px) { .activity-grid { grid-template-columns: repeat(2, 1fr); } }

.gink-card.is-detail .more-btn { opacity: 1; }

/* a long playful placeholder may wrap to two lines on a phone — leave it the room */
@media (max-width: 480px) {
  .reply-box .reply-input { font-size: 1rem; line-height: 1.3; padding: 8px 0; min-height: 56px; }
}

/* ---------- manual ID review ---------- */
.idv-manual { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); }
.idv-manual summary { cursor: pointer; font-weight: 700; font-size: .92rem; }
.idv-manual summary:hover { color: var(--gold); }
.idv-what ul { margin: 0; padding-left: 20px; }
.field input[type="file"] { width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bg-elevated-2); border: 1px dashed var(--border); font-size: .88rem; }
.grant-row { display: flex; flex-wrap: wrap; gap: 8px; }
.grant-row input { flex: 1 1 160px; min-width: 0; }
.grant-row #grant-handle { flex: 0 1 180px; }
.id-doc-img { display: block; max-width: 100%; max-height: 460px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.mod-actions select, .mod-actions .id-note { padding: 7px 12px; font-size: .84rem; border-radius: var(--radius-sm); }
.mod-actions .id-note { flex: 1 1 180px; min-width: 0; }

/* ---------- post activity: who quoted / reposted / reacted ---------- */
.activity-tabs { margin-top: 12px; }
.activity-tabs .count-pill { margin-left: 4px; }
.reactor-row .reactor-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.reactor-row .reactor-who strong { display: flex; align-items: center; gap: 5px; }
.reactor-row .follow-btn-sm { flex-shrink: 0; }
.activity-list > .reactor-row { border-bottom: 1px solid var(--border-soft); padding: 12px 20px; }
.activity-list > .share-empty { padding: 36px 20px; }
a.reactors-chip { text-decoration: none; }
.activity-list + .activity-more, .activity-more { display: block; text-align: center; padding: 16px; color: var(--sky); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.activity-more:hover { background: var(--bg-hover); }
@media (max-width: 480px) { .activity-list > .reactor-row { padding: 12px 14px; } }

/* ---------- followers / following ---------- */
.conn-link { color: inherit; text-decoration: none; }
.conn-link .conn-label { color: var(--text-faint); }
.conn-link:hover .conn-label { text-decoration: underline; color: var(--text-dim); }
.post-header-titles { min-width: 0; line-height: 1.2; }
.post-header-titles h2 { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 1.1rem; }
.post-header-titles small { color: var(--text-faint); }
.connections-tabs .count-pill { margin-left: 4px; }
.conn-bio { display: block; color: var(--text-dim) !important; font-size: .84rem !important; margin-top: 2px; }
.follows-you { font-weight: 600; font-size: .68rem; padding: 1px 7px; background: var(--bg-elevated-2); color: var(--text-dim); }

/* ---------- admin: users ---------- */
.user-search { display: flex; gap: 8px; padding: 14px 16px 10px; }
.user-search input { flex: 1; min-width: 0; }
.user-search .btn-primary { width: auto; padding: 8px 20px; }
.user-tick-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0 2px; margin-top: 8px; border-top: 1px solid var(--border-soft); }
.user-tick-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; min-width: 112px; }
.user-tick-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.user-tick-actions .btn-secondary, .user-tick-actions .btn-primary { width: auto; padding: 6px 14px; font-size: .82rem; }
.user-tick-actions .mod-reject { flex-basis: auto; }
.user-tick-actions .mod-reject-body { position: static; min-width: 260px; }
.user-note { width: 100%; }
@media (max-width: 560px) { .user-tick-actions { margin-left: 0; width: 100%; } .user-tick-actions .mod-reject-body { min-width: 0; } }


/* ---------- X-style feed tabs (mobile) ---------- */
@media (max-width: 680px) {
  .feed-tabs { overflow: visible; border-bottom: 1px solid var(--border-soft); }
  .feed-tabs a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 0; border-bottom: 0; color: var(--text-faint); font-size: 1rem; font-weight: 500; }
  .feed-tabs a:hover { background: var(--bg-hover); }
  .feed-tabs a span { position: relative; display: inline-block; padding: 15px 0; }
  .feed-tabs a.active { color: var(--text); font-weight: 700; }
  .feed-tabs a.active span::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--gold); }
  .inline-composer:not(.has-context) { display: none; }
}

/* ---------- full-screen compose page ---------- */
.compose-page-bar { display: none; }
@media (max-width: 680px) {
  .compose-page-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .compose-back { color: var(--text); display: flex; }
  .compose-drafts { color: var(--gold); font-weight: 600; }
  .compose-page .composer { border-bottom: 0; }
  .compose-page .composer textarea { border: 0; background: transparent; font-size: 1.15rem; min-height: 140px; padding: 8px 0; }
  .compose-page .composer textarea:focus { box-shadow: none; }
}
.compose-fab.hidden { display: none !important; }

/* ---------- who can reply ---------- */
.reply-perm-row { margin-top: 6px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.reply-perm-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; color: var(--gold); font-weight: 600; font-size: .9rem; cursor: pointer; }
.reply-perm-icon { display: inline-flex; }
.reply-sheet-backdrop:not([hidden]) { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; display: block; }
.reply-sheet:not([hidden]) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; display: block;
  background: var(--bg-elevated, var(--bg)); border: 1px solid var(--border); border-bottom: 0;
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  padding: 18px 8px calc(18px + env(safe-area-inset-bottom, 0px)); animation: sheet-up .2s ease;
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.reply-sheet h4 { margin: 0 12px 10px; font-size: 1.15rem; }
.reply-opt { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: 0; color: var(--text); text-align: left; padding: 14px 12px; font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 12px; }
.reply-opt:hover { background: var(--bg-hover); }
.reply-opt-icon { display: inline-flex; flex: 0 0 24px; }
.reply-opt-label { flex: 1; }
.reply-opt-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--text-faint); color: transparent; }
.reply-opt.selected .reply-opt-check { background: var(--gold); border-color: var(--gold); color: #12141A; }
@media (min-width: 681px) {
  .reply-sheet:not([hidden]) { left: 50%; right: auto; width: 440px; bottom: 50%; transform: translate(-50%, 50%); border-radius: 18px; border-bottom: 1px solid var(--border); animation: none; }
}

.reply-perm-row[hidden] { display: none; }