/* ============================================================================
   DEVIT IDENTITY LAYER  ·  v2
   Loaded AFTER style.css and BEFORE #profile-theme-style (so a user's own
   profile theme still wins). Additive: tokens first, then targeted overrides
   for the gradients/glows/pills that tokens can't reach.

   Direction — "the ship log"
   ──────────────────────────
   Devit is where people ship, so it reads like a log, not a social feed:
   ruled entries, mono metadata, flat surfaces, one signal colour.

   · FLARE (red)  — the one human action colour. Flat. Never a gradient.
   · TEAL               — reserved for AI output. Today that is the post
                          summary; it is the colour any future agent UI should
                          use. Nothing else in the product is teal.
   · Neutral graphite / paper surfaces. No cool navy, no purple, no glow, no blur.
   · Hairline rules instead of rounded cards around every section.
   · Mono (JetBrains) for metadata: handles, times, counts, section labels.
   · Serif (Instrument) only for display moments: landing, auth, scoreboard.

   Specificity: `:root:root` adds two pseudo-classes so this file can beat
   style.css's `!important` layers without adding more of them.
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
  --bg-void:     #0a0a0b;
  --bg-base:     #0f0f10;
  --bg-surface:  #141415;
  --bg-elevated: #1a1a1c;
  --bg-float:    #222225;

  --border:        rgba(255,255,255,0.10);
  --border-mid:    rgba(255,255,255,0.16);
  --border-soft:   rgba(255,255,255,0.06);
  --border-active: rgba(240,27,45,0.60);

  /* Legacy token names are kept (app.js + style.css reference them in ~400
     places); only their values change. --cyan is now FLARE. --flare-rgb feeds
     the 150-odd translucent tints that used to be hard-coded pink. */
  --flare-rgb:  240,27,45;
  --cyan:       #f01b2d;
  --cyan-dim:   rgba(var(--flare-rgb),0.12);
  --cyan-glow:  rgba(var(--flare-rgb),0.22);
  --violet:     #ff4455;            /* deep red — hashtags, secondary marks */
  --violet-dim: rgba(255,68,85,0.12);
  --amber:      #ff4455;
  --rose:       #ff5470;            /* likes, unread, destructive — pink-red, distinct from flare */
  --emerald:    #5fcf8a;
  --sky:        #8aa7b8;            /* neutral info (6 uses). Not teal: teal means AI. */

  --glow-cyan:   0 0 0 0 transparent;
  --glow-violet: 0 0 0 0 transparent;

  --flare:       var(--cyan);
  --on-flare:    #ffffff;           /* white on red */
  --agent:       #37d0c0;
  --agent-dim:   rgba(55,208,192,0.12);
  --agent-line:  rgba(55,208,192,0.45);

  --text-primary:   #f5f5f5;
  --text-secondary: #a0a0a8;
  --text-muted:     #85858f;
  --text-code:      #ff8a94;

  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  /* --font-display / --font-body stay Bricolage Grotesque / Plus Jakarta Sans. */

  /* Shape — small and square-ish. Fully round survives only on avatars. */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  --sidebar-w:  232px;
  --rightbar-w: 296px;

  /* Depth: resting things are flat; only floating things cast a shadow. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.45);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.55);
  --glass-bg: var(--bg-base);
  --glass-border: var(--border);

  --ease-spring: cubic-bezier(0.2, 0, 0, 1);
  --spring: 0.18s cubic-bezier(0.2, 0, 0, 1);
}

html:root[data-theme="light"] {
  --bg-void:     #f1f1f3;
  --bg-base:     #f6f6f8;
  --bg-surface:  #ffffff;
  --bg-elevated: #eeeef1;
  --bg-float:    #e5e5ea;

  --border:        rgba(15,15,18,0.14);
  --border-mid:    rgba(15,15,18,0.22);
  --border-soft:   rgba(15,15,18,0.08);
  --border-active: rgba(217,26,53,0.60);

  --flare-rgb:  217,26,53;
  --cyan:       #d91a35;
  --violet:     #a8142a;
  --violet-dim: rgba(168,20,42,0.10);
  --amber:      #a8142a;
  --rose:       #e11d48;
  --emerald:    #1f7a45;
  --sky:        #3d6178;

  --on-flare:   #ffffff;
  --agent:      #0b7a70;
  --agent-dim:  rgba(11,122,112,0.09);
  --agent-line: rgba(11,122,112,0.5);

  --text-primary:   #0f0f12;
  --text-secondary: #45454f;
  --text-muted:     #6a6a76;
  --text-code:      #a8142a;

  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 44px rgba(0,0,0,0.16);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.20);
}

::selection { background: var(--cyan); color: var(--on-flare); }

/* ── 2. Remove the decorative layer ─────────────────────────────────────── */
/* Blur and glow were doing the work hierarchy should do. */
:root:root #topbar,
:root:root #bottom-nav,
:root:root #rightbar,
:root:root .widget,
:root:root .auth-card,
:root:root .modal-overlay,
:root:root .modal,
:root:root .toast,
:root:root .install-banner,
:root:root .nqp-header,
:root:root #notif-quick-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:root:root .auth-bg-orb,
:root:root .lp-hero-glow { display: none !important; }
:root:root .badge { box-shadow: none !important; }

/* Every primary action in the app, one flat rule. */
:root:root .post-btn,
:root:root .auth-btn-primary,
:root:root .profile-action-btn.primary,
:root:root .cmt-edit-save,
:root:root .post-edit-save,
:root:root .dev-activity-connect-btn,
:root:root .install-banner-btn,
:root:root .install-ios-done,
:root:root .nudge-btn-primary,
:root:root .exp-submit-btn,
:root:root .collab-apply-btn,
:root:root .edit-save-btn,
:root:root .new-collab-btn,
:root:root .pext-save-btn,
:root:root .theme-btn-apply,
:root:root .comm-send-btn,
:root:root .chat-send-btn,
:root:root .onb-primary,
:root:root .devit-tour-next,
:root:root .collab-modal-send,
:root:root .ds-new-post-btn {
  background: var(--cyan) !important;
  background-image: none !important;
  color: var(--on-flare) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0;
}
:root:root .post-btn:hover:not(:disabled),
:root:root .auth-btn-primary:hover,
:root:root .profile-action-btn.primary:hover,
:root:root .ds-new-post-btn:hover,
:root:root .chat-send-btn:hover,
:root:root .onb-primary:hover:not(:disabled),
:root:root .collab-modal-send:hover:not(:disabled) {
  background: var(--cyan) !important;
  filter: brightness(1.1);
  box-shadow: none !important;
}

/* Text gradients → plain ink */
:root:root .topbar-logo,
:root:root .auth-panel-name,
:root:root .leaderboard-page-title {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important;
}

/* ── 3. Brand: a lowercase wordmark with a live cursor ──────────────────── */
/* Measured on the original: on desktop the sidebar's brand block sat at top:0
   underneath the topbar, and the topbar logo was display:none — so desktop had
   no visible Devit mark at all. The brand now lives in the topbar everywhere. */
:root:root #app #topbar .topbar-logo {
  display: flex !important;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  gap: 8px;
}
:root:root #topbar .topbar-logo img { border-radius: 4px !important; width: 26px !important; height: 26px !important; }
.topbar-logo span { display: inline-flex; align-items: baseline; }
.topbar-logo span::after {
  content: '';
  width: 0.55em; height: 2px;
  margin-left: 2px;
  background: var(--cyan);
  animation: devit-caret 1.1s steps(1) infinite;
}
@keyframes devit-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .topbar-logo span::after { animation: none; } }
@media (max-width: 640px) {
  :root:root .topbar-logo span { display: none; }   /* mark only on phones */
}

/* ── 4. Topbar ──────────────────────────────────────────────────────────── */
:root:root #topbar {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
:root:root .topbar-search input {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 13.5px;
  padding-right: 64px;
}
:root:root .topbar-search input:focus {
  border-color: var(--border-active) !important;
  box-shadow: none !important;
  background: var(--bg-surface) !important;
}
/* True: Ctrl/Cmd+K focuses this field (app.js initKeyboardShortcuts). */
.topbar-search::after {
  content: 'Ctrl K';
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}
.topbar-search:focus-within::after { opacity: 0; }
@media (max-width: 860px), (hover: none) {
  .topbar-search::after { display: none; }
  :root:root .topbar-search input { padding-right: 10px; }
}

.topbar-signin-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  min-height: 36px; padding: 7px 13px;
  border: 1px solid var(--border-mid); border-radius: var(--radius-md);
  background: transparent; color: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.topbar-signin-btn:hover { border-color: var(--cyan); color: var(--cyan); }
@media (max-width: 480px) {
  .topbar-signin-btn span { display: none; }
  .topbar-signin-btn { min-width: 40px; min-height: 40px; justify-content: center; padding: 8px 10px; }
}

/* ── 5. Sidebar → an index ──────────────────────────────────────────────── */
:root:root .ds-logo { display: none !important; }     /* brand moved to topbar */

:root:root #sidebar {
  background: var(--bg-base) !important;
  border-right: 1px solid var(--border) !important;
}
@media (min-width: 1025px) {
  /* Original: top:0 / full height, so the first 56px sat under the topbar. */
  :root:root #sidebar {
    top: var(--topbar-h) !important;
    height: calc(100vh - var(--topbar-h)) !important;
    bottom: auto !important;
  }
}
:root:root .ds-new-post-wrap { padding: 14px 12px 6px; }
:root:root .ds-new-post-btn {
  padding: 10px 14px; font-size: 12.5px;
  justify-content: flex-start; white-space: nowrap;
}

:root:root .ds-section-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--text-muted) !important;
  padding: 18px 20px 6px;
}
:root:root .ds-nav-item {
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  margin: 1px 10px;
  padding: 8px 10px;
  font-size: 13.5px; font-weight: 500;
}
:root:root .ds-nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
:root:root .ds-nav-item.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 700;
}
:root:root .ds-nav-item.active::before {
  left: -10px; top: 6px; bottom: 6px; width: 2px;
  background: var(--cyan); border-radius: 0;
}
:root:root .ds-nav-item.active .ds-nav-icon { color: var(--cyan); opacity: 1; }
:root:root .ds-nav-badge {
  background: var(--cyan); color: var(--on-flare);
  border-radius: 3px; font-size: 10px; padding: 1px 5px;
}
:root:root .ds-nav-item--locked { opacity: 0.6; }
:root:root .ds-user { border-top: 1px solid var(--border); }
:root:root .ds-user-name { color: var(--text-primary); }
:root:root .ds-user-handle { color: var(--text-muted); font-family: var(--font-mono); }
:root:root .ds-user-profile-btn { color: var(--text-muted); }
:root:root .ds-user-profile-btn:hover { color: var(--cyan); background: var(--cyan-dim); }

/* ── 6. Right rail: rules, not cards ────────────────────────────────────── */
:root:root #rightbar { background: transparent !important; border-left: 1px solid var(--border) !important; gap: 0; padding: 8px 18px; }
:root:root .rightbar-section,
:root:root .widget {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 18px 0;
}
:root:root .rightbar-section:last-child { border-bottom: 0 !important; }
:root:root .rightbar-title {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: lowercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.rightbar-title::before { content: '// '; color: var(--cyan); }
:root:root .trending-tag-name { color: var(--text-primary) !important; font-family: var(--font-mono); font-size: 12.5px; }
:root:root .trending-tag-bar { background: var(--cyan) !important; height: 2px; border-radius: 0; opacity: 0.8; }
:root:root .follow-btn {
  min-width: 0;
  border: 1px solid var(--border-mid) !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono); font-size: 11px;
}
:root:root .follow-btn:hover { background: var(--cyan) !important; border-color: var(--cyan) !important; color: var(--on-flare) !important; }

/* ── 7. Tabs ────────────────────────────────────────────────────────────── */
:root:root .view-tabs { background: var(--bg-void) !important; }
:root:root .view-tab { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-muted); }
:root:root .view-tab:hover { color: var(--text-primary); }
:root:root .view-tab.active { color: var(--text-primary) !important; }
:root:root .view-tab::after { background: var(--cyan) !important; height: 2px; }
:root:root .view-tab--locked { opacity: 0.6; }

/* ── 8. The entry (post card) ───────────────────────────────────────────── */
:root:root .post-card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border) !important;
  border-left: 2px solid transparent;
  padding: 18px var(--space-md) 12px;
  padding-left: calc(var(--space-md) - 2px);
}
:root:root .post-card:hover { background: var(--bg-surface); border-left-color: var(--border-mid); box-shadow: none; }

.post-author { font-weight: 700; font-size: 14px; letter-spacing: -0.005em; }
:root:root .post-author-handle,
:root:root .post-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.post-content { font-size: 15px; line-height: 1.65; }
:root:root .post-content .hashtag { color: var(--violet) !important; }
:root:root .post-content .mention { color: var(--cyan) !important; }
:root:root .post-action { border-radius: var(--radius-sm) !important; }

/* Code is the post: ruled, editor-tab header, square corners. */
:root:root .post-code-file,
:root:root .composer-code-file { border-radius: var(--radius-md); border-left-width: 2px; }
.post-code-file-header, .composer-code-file-header { background: var(--bg-elevated); }
:root:root .pcf-lang, :root:root .ccf-lang { border-radius: 3px; background: transparent; border: 1px solid currentColor; }

/* Embeds, polls, chips — flatten the pills */
:root:root .og-embed, :root:root .live-repo-card, :root:root .poll-container,
:root:root .sandbox-embed-chip, :root:root .gh-release-chip,
:root:root .post-file-row, :root:root .post-gallery { border-radius: var(--radius-md); }
:root:root .poll-container { background: var(--bg-surface); border-color: var(--border); }
:root:root .poll-option { border-radius: var(--radius-sm); }
:root:root .tech-badge, :root:root .stack-chip, :root:root .tag-chip,
:root:root .collab-post-badge, :root:root .poll-tag, :root:root .vibe-chip,
:root:root .css-snippet-chip, :root:root .onb-tool, :root:root .onb-level,
:root:root .collab-action-btn, :root:root .ship-post-badge, :root:root .dev-points-badge {
  border-radius: var(--radius-sm) !important;
}

/* ── 9. AI is teal ──────────────────────────────────────────────────────── */
/* The only AI surface in the product today is the post summary, so that is
   what carries the AI colour. It is labelled, outlined (not filled), and the
   result says plainly that it is generated and should be checked. */
:root:root .ai-summary-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--agent-line);
  color: var(--agent); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; width: auto;
}
.ai-summary-btn::after { content: 'summarize'; }
@media (max-width: 420px) { .ai-summary-btn::after { content: none; } :root:root .ai-summary-btn { padding: 4px 8px; } }
:root:root .ai-summary-btn:hover { background: var(--agent-dim); }
:root:root .ai-summary-result {
  border: 0; border-left: 3px solid var(--agent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--agent-dim);
  color: var(--text-primary);
}
.ai-summary-result::before {
  content: 'AI-generated summary · check it against the post';
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--agent);
}

/* ── 10. Composer, modals, toasts, forms ────────────────────────────────── */
:root:root .composer-inner { background: transparent; border-radius: var(--radius-md); border-color: var(--border); }
:root:root .composer-inner:focus-within { border-color: var(--border-active) !important; box-shadow: none !important; }
:root:root .composer-tool:hover { color: var(--cyan) !important; background: var(--cyan-dim); }
:root:root .modal { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; }
:root:root .modal-overlay { background: rgba(8,8,6,0.7) !important; }
:root:root .modal-title { font-family: var(--font-mono) !important; font-size: 15px; }
:root:root .toast {
  background: var(--bg-float) !important;
  border: 1px solid var(--border-mid) !important;
  border-left: 3px solid var(--cyan) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-mono); font-size: 12.5px;
}
:root:root .toast-icon { color: var(--cyan) !important; }
:root:root .auth-input, :root:root .pext-input, :root:root .collab-modal-input,
:root:root .edit-form-input { border-radius: var(--radius-md) !important; }
:root:root .auth-input:focus { border-color: var(--border-active) !important; box-shadow: none !important; }
:root:root .privacy-select, :root:root .settings-card, :root:root .settings-tabs { border-radius: var(--radius-md); }
:root:root .settings-card { background: transparent; }
:root:root .settings-card-header { font-family: var(--font-mono); text-transform: lowercase; letter-spacing: 0.04em; }
:root:root .settings-tab-btn.active { background: var(--cyan-dim); color: var(--cyan); }

/* DMs */
:root:root .dm-own-text { border-radius: 8px 8px 2px 8px; background: var(--cyan); color: var(--on-flare); }
:root:root .dm-other-text { border-radius: 8px 8px 8px 2px; background: var(--bg-elevated); }
:root:root .chat-input-wrap { border-radius: var(--radius-md); }

/* Profile */
:root:root .profile-action-btn { border-radius: var(--radius-md); min-width: 0; font-family: var(--font-mono); font-size: 12px; }
:root:root .profile-name { font-family: var(--font-display); letter-spacing: -0.02em; }
:root:root .profile-handle { font-family: var(--font-mono); }
:root:root .profile-tab.active { color: var(--text-primary); border-bottom-color: var(--cyan); }
:root:root .profile-cover-art {
  background: repeating-linear-gradient(0deg, transparent 0 15px, var(--border-soft) 15px 16px) !important;
}

/* Leaderboard: a scoreboard, so it gets the serif */
:root:root .leaderboard-page-title { font-family: var(--font-serif); font-weight: 400; font-size: 40px; letter-spacing: -0.01em; }
:root:root .leaderboard-full-row { border-radius: var(--radius-sm); }
:root:root .leaderboard-full-score { color: var(--text-primary); }

/* Notifications */
:root:root .notif-item.unread::before { background: var(--cyan) !important; }

/* Hard-coded accent leftovers in style.css */
:root:root .trending-tag, :root:root .tag-feed-title { color: var(--cyan) !important; }
:root:root .auth-link-btn, :root:root .auth-footer a { color: var(--cyan) !important; }
:root:root .tech-badge:hover, :root:root .tag-chip:hover { background: var(--cyan-dim) !important; border-color: var(--border-active) !important; color: var(--cyan) !important; }
:root:root .bnav-btn.active { color: var(--cyan) !important; }
:root:root .skip-link { background: var(--cyan) !important; color: var(--on-flare); }
html:root[data-theme="light"] #sidebar { background: var(--bg-base) !important; }
html:root[data-theme="light"] .post-card:hover { background: var(--bg-surface) !important; box-shadow: none !important; }
html:root[data-theme="light"] .post-card { background: transparent !important; }

/* Visible keyboard focus everywhere (a11y) */
:root:root :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── 11. Auth wall: left-aligned, ruled, serif headline ─────────────────── */
:root:root .auth-bg-grid {
  animation: none !important;
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--border-soft) 31px 32px) !important;
  background-size: auto !important;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
          mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
:root:root .auth-panel-left { background: var(--bg-void); border-right: 1px solid var(--border); }
:root:root .auth-panel-logo { border-radius: 6px; box-shadow: none; }
:root:root .auth-panel-name { font-family: var(--font-mono); font-size: 24px; text-transform: lowercase; letter-spacing: -0.04em; }
:root:root .auth-panel-headline {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 68px); line-height: 0.98; letter-spacing: -0.02em;
}
:root:root .auth-panel-desc { font-size: 15px; opacity: 1; color: var(--text-secondary); }
:root:root .auth-card { background: var(--bg-base) !important; border: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; }
:root:root .auth-tabs { border-radius: var(--radius-md) !important; }
:root:root .auth-tab, :root:root .auth-tab.active { border-radius: var(--radius-sm) !important; }
:root:root .auth-tab.active { background: var(--bg-float) !important; }
:root:root .auth-icon-btn { border-radius: var(--radius-md) !important; }
:root:root .auth-dev-badge { background: var(--cyan); color: var(--on-flare); border-radius: 3px; font-family: var(--font-mono); box-shadow: none; }
:root:root .auth-dev-badge::after { border-top-color: var(--cyan); }
:root:root .auth-trending-preview { border-radius: var(--radius-md); background: transparent; border-color: var(--border); }
:root:root .auth-pill { border-radius: var(--radius-sm); font-family: var(--font-mono); }
:root:root .auth-pill i { color: var(--cyan); }

/* ── 12. Guest gate: the auth card as a modal over the app ──────────────── */
/* The original had no CSS for this: gating a guest dropped the full two-column
   sign-in wall on top of the feed. #auth-screen is a fixed grid; app.js flips
   it to inline display:flex while gated and appends .guest-gate-chrome as its
   last child, which we pin to the top edge so the card can centre. */
:root:root #auth-screen.auth-screen--gate {
  background: rgba(8,8,6,0.78) !important;
  justify-content: center; align-items: center;
  padding: 16px;
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}
:root:root #auth-screen.auth-screen--gate.auth-screen--gate-in { opacity: 1 !important; }
#auth-screen.auth-screen--gate .auth-panel-left,
#auth-screen.auth-screen--gate .auth-bg { display: none !important; }
:root:root #auth-screen.auth-screen--gate .auth-card {
  flex: 0 1 420px; width: min(420px, 100%);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 28px 26px 24px;
  border: 1px solid var(--border-mid) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  animation: none;
}
.guest-gate-chrome {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
}
.guest-gate-close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  padding: 6px 11px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.guest-gate-close:hover { border-color: var(--cyan); color: var(--cyan); }
.guest-gate-reason { min-width: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); text-align: right; }
.guest-gate-reason i { color: var(--cyan); margin-right: 6px; }
body.guest-gate-open { overflow: hidden; }
@media (max-width: 860px) {
  :root:root #auth-screen.auth-screen--gate { align-items: flex-end; padding: 0; }
  :root:root #auth-screen.auth-screen--gate .auth-card {
    flex-basis: auto; width: 100%; max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    border-bottom: 0 !important; max-height: 88vh; max-height: 88dvh;
  }
}

/* ── 13. Guest chrome (banner, rail card, composer stand-in) ────────────── */
.guest-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0; padding: 12px var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  border-left: 2px solid var(--cyan);
}
.guest-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.guest-banner-text strong { font-size: 13px; }
.guest-banner-text span { font-size: 12px; color: var(--text-muted); }
.guest-banner-actions { display: flex; gap: 8px; }
.guest-banner-btn {
  min-height: 36px; padding: 8px 14px; border-radius: var(--radius-md);
  background: var(--cyan); color: var(--on-flare); border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer;
}
.guest-banner-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-mid); }
.guest-banner-btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.guest-rb-card { padding: 2px 0; min-width: 0; }
.guest-rb-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.guest-rb-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 12px; }
.guest-rb-btn {
  width: 100%; min-height: 38px; padding: 9px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid var(--border-mid); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer;
}
.guest-rb-btn:hover { background: var(--cyan); color: var(--on-flare); border-color: var(--cyan); }
.pp-guest-composer { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.pp-guest-copy { font-size: 13px; color: var(--text-secondary); }
.pp-guest-copy i { color: var(--cyan); margin-right: 6px; }
.pp-guest-btn {
  min-height: 36px; padding: 8px 14px; border-radius: var(--radius-md); background: var(--cyan); color: var(--on-flare);
  border: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}

/* ── 14. Landing — the original had no CSS for any .lp-* class ──────────── */
.landing-page { color: var(--text-primary); }
.lp-hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 8vw, 96px) var(--space-md) clamp(32px, 6vw, 64px);
  border-bottom: 1px solid var(--border);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--border-soft) 31px 32px);
}
.lp-hero-inner { position: relative; max-width: 880px; margin: 0 auto; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-secondary); text-transform: lowercase;
  border: 1px solid var(--border-mid); border-radius: 3px; padding: 4px 9px;
  background: var(--bg-void);
}
.lp-dot { width: 6px; height: 6px; background: var(--cyan); display: inline-block; }
.lp-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(48px, 11vw, 124px); line-height: 0.92; letter-spacing: -0.03em;
  margin: 22px 0 20px; overflow-wrap: break-word;
}
.lp-title-accent { color: var(--cyan); font-style: italic; }
.lp-lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--text-secondary); max-width: 600px; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lp-cta-row--center { justify-content: center; }
.lp-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 12px 18px; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent;
}
.lp-btn--primary { background: var(--cyan); color: var(--on-flare); }
.lp-btn--primary:hover { filter: brightness(1.1); }
.lp-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-mid); }
.lp-btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.lp-cta-note { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--border-mid); }
.lp-stat { padding: 14px 0 0; min-width: 0; }
.lp-stat + .lp-stat { padding-left: 18px; border-left: 1px solid var(--border); }
.lp-stat-num { font-family: var(--font-mono); font-size: clamp(20px, 4vw, 34px); font-weight: 700; letter-spacing: -0.03em; }
.lp-stat-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-transform: lowercase; margin-top: 2px; }

.lp-section { padding: clamp(36px, 6vw, 72px) var(--space-md); border-bottom: 1px solid var(--border); }
.lp-section > * { max-width: 880px; margin-left: auto; margin-right: auto; }
.lp-section-head { margin-bottom: 26px; }
.lp-kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--cyan); margin-bottom: 8px; }
.lp-h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4.5vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.lp-p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-top: 12px; }

.lp-what-card { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.lp-what-code { border: 1px solid var(--border-mid); border-left: 3px solid var(--cyan); border-radius: var(--radius-md); background: var(--bg-void); overflow: hidden; min-width: 0; }
.lp-what-code-head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); }
.lp-cdot { width: 6px; height: 6px; background: var(--border-mid); }
.lp-cdot:first-child { background: var(--emerald); }
.lp-what-code-name { margin-left: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.lp-what-pre { margin: 0; padding: 16px 16px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--text-primary); white-space: pre-wrap; overflow-x: auto; background: none !important; border: 0 !important; }
.lp-c-key { color: var(--cyan); }
.lp-c-str { color: var(--violet); }

/* Features: a numbered, ruled index rather than a grid of cards. */
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-left: 1px solid var(--border); counter-reset: lpf; }
.lp-card { background: var(--bg-void); padding: 20px 20px 22px; counter-increment: lpf; position: relative; min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* An odd last card spans the row instead of leaving a hole. */
.lp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-card::before { content: counter(lpf, decimal-leading-zero); position: absolute; top: 20px; right: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.lp-card-icon { color: var(--cyan); font-size: 15px; margin-bottom: 12px; }
.lp-card-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 6px; }
.lp-card-body { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }

.lp-trending { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-trend-skel { width: 110px; height: 34px; background: var(--bg-elevated); border-radius: 3px; }
.lp-trend-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-mid); border-radius: 3px; background: transparent; color: var(--text-primary); cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
.lp-trend-chip:hover { border-color: var(--cyan); }
.lp-trend-count { color: var(--cyan); font-weight: 700; font-size: 11px; }
.lp-live-cta { margin-top: 18px; }

.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-mid); }
.lp-step { padding: 18px 18px 6px 0; min-width: 0; }
.lp-step + .lp-step { padding-left: 18px; border-left: 1px solid var(--border); }
.lp-step-n { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); font-weight: 700; margin-bottom: 10px; }
.lp-step-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.lp-step-body { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }

.lp-faq { border-top: 1px solid var(--border-mid); }
.lp-faq-item { border-bottom: 1px solid var(--border); }
.lp-faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 14px 0; font-weight: 700; font-size: 15px; }
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q i { font-size: 11px; color: var(--text-muted); transition: transform 0.15s; }
.lp-faq-item[open] .lp-faq-q i { transform: rotate(180deg); color: var(--cyan); }
.lp-faq-a { padding: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); max-width: 640px; }

.lp-final-card { text-align: center; padding: clamp(32px, 6vw, 64px) var(--space-md); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); background: var(--bg-surface); }
.lp-final-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 6vw, 60px); letter-spacing: -0.02em; line-height: 1; }
.lp-final-sub { margin-top: 10px; color: var(--text-secondary); }
.lp-footer { margin-top: 28px; text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 760px) {
  .lp-what-card, .lp-grid, .lp-steps { grid-template-columns: 1fr; }
  .lp-step + .lp-step { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 12px; }
  .lp-stat + .lp-stat { padding-left: 12px; }
}

/* ── 15. Mobile navigation: 5 destinations + More ───────────────────────── */
/* Original: 10 buttons in a swipe pager showing 4 at a time, so Messages,
   Profile, Saved, Settings and Leaderboard were invisible until swiped.
   devit-identity.js moves them into a sheet and adds #bottom-nav.has-more;
   everything below is scoped to that class, so if the script fails to load the
   original pager is untouched. */
:root:root #bottom-nav {
  background: var(--bg-base) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
}
:root:root #bottom-nav.has-more { height: calc(56px + env(safe-area-inset-bottom, 0px)); }
:root:root #bottom-nav.has-more #bottom-nav-track { width: 100% !important; height: 56px; transform: none !important; transition: none !important; }
:root:root #bottom-nav.has-more #bnav-dots { display: none !important; }
:root:root #bottom-nav.has-more .bnav-secondary { display: none !important; }
:root:root #bottom-nav.has-more .bnav-btn { flex: 1 1 0 !important; min-width: 0; gap: 4px; font-size: 17px; position: relative; }
:root:root .bnav-btn.bnav-more-btn { color: var(--text-muted); }
:root:root .bnav-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0; text-transform: lowercase; }
:root:root .bnav-btn.active::before {
  content: ''; position: absolute; top: 0; left: 24%; right: 24%; height: 2px; background: var(--cyan);
}
:root:root .bnav-post-icon { width: 42px; height: 28px; border-radius: var(--radius-sm); background: var(--cyan) !important; box-shadow: none !important; color: var(--on-flare); font-size: 14px; }
:root:root .bnav-badge { background: var(--cyan); border-color: var(--bg-base); }
:root:root .bnav-locked { opacity: 0.55; }

.more-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(8,8,6,0.6); opacity: 0; transition: opacity 0.18s; }
.more-scrim.open { opacity: 1; }
.more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1091;
  background: var(--bg-base); border-top: 1px solid var(--border-mid);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateY(102%); transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.more-sheet.open { transform: translateY(0); }
.more-sheet[hidden], .more-scrim[hidden] { display: none; }
.more-sheet-grip { width: 36px; height: 3px; background: var(--border-mid); margin: 2px auto 12px; }
/* Ruled grid via borders (not a gap over a coloured background) so an
   incomplete last row never shows a stray filled cell. */
.more-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.more-item {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 12px; min-height: 76px; border: 0; border-radius: 0;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-base); color: var(--text-primary); text-align: left;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer;
}
/* 5 items in 3 columns: let the last one fill the row. */
.more-item:last-child:nth-child(3n + 2) { grid-column: span 2; }
.more-item i { color: var(--cyan); font-size: 15px; }
.more-item .more-lock { display: none; position: absolute; top: 12px; right: 12px; font-size: 10px; color: var(--text-muted); }
.more-item.is-locked .more-lock { display: block; }
.more-item .bnav-kb-icon { color: var(--cyan); font-size: 15px; font-weight: 800; }
.more-item:active { background: var(--bg-elevated); }
.more-item.is-locked { opacity: 0.55; }
@media (min-width: 1025px) { .more-sheet, .more-scrim { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .more-sheet, .more-scrim { transition: none; } }

/* ── 16. Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root:root #auth-screen.auth-screen--gate { transition: none; }
}

/* ── 14. Auth screen: X-style, minimal ──────────────────────────────────────
   Left: one big logo. Right: headline, social buttons, "or", Create account,
   "Already have an account?", Sign in. Sign in / Sign up / Confirm / Reset are
   single-column steps in the same stack. All ids/handlers are unchanged. */
:root:root #auth-screen:not(.auth-screen--gate) {
  display: grid !important; grid-template-columns: 1fr 1fr; background: var(--bg-void);
}
.ax-left { display: flex; align-items: center; justify-content: center; padding: 32px; }
.ax-logo { width: min(380px, 62%); height: auto; display: block; }
.ax-logo-sm { display: none; width: 34px; height: 34px; margin: 0 0 28px; }
:root:root #auth-screen:not(.auth-screen--gate) .auth-card {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 32px 48px !important; width: auto; max-width: none; position: relative;
}
:root:root #auth-screen.auth-screen--gate .ax-left { display: none !important; }
:root:root #auth-screen.auth-screen--gate .ax-logo-sm { display: block; }
:root:root #auth-screen.auth-screen--gate .ax-title { font-size: 30px; margin-bottom: 20px; }
:root:root #auth-screen.auth-screen--gate .ax-sub { font-size: 20px; margin-bottom: 16px; }

.ax-title { margin: 0 0 40px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(36px, 5.2vw, 62px); line-height: 1.05; color: var(--text-primary); }
.ax-sub   { margin: 0 0 28px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: 30px; line-height: 1.1; color: var(--text-primary); }
.ax-back  { position: absolute; top: 20px; left: 36px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-primary); cursor: pointer; font-size: 15px; }
.ax-back:hover { background: var(--bg-float); }

.ax-stack { width: 100%; max-width: 300px; }
.ax-oauth { display: flex; flex-direction: column; gap: 10px; }
.ax-form  { display: flex; flex-direction: column; gap: 12px; }
.ax-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: full pill, 40px */
.ax-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px;
  padding: 0 16px; border-radius: 999px !important; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0;
  text-transform: none; box-shadow: none !important; transition: background .15s, border-color .15s, opacity .15s; }
.ax-btn:disabled { opacity: .6; cursor: default; }
.ax-ico { width: 18px; height: 18px; font-size: 18px; flex: none; }
.ax-btn--light { background: #fff; color: #0f1419; border-color: #dadce0; }
.ax-btn--light:hover:not(:disabled) { background: #f3f4f6; }
.ax-btn--red   { background: var(--cyan); color: var(--on-flare); }
.ax-btn--red:hover:not(:disabled) { background: #c81423; }
.ax-btn--ghost { background: transparent; color: var(--cyan); border-color: var(--border-mid); }
.ax-btn--ghost:hover:not(:disabled) { background: rgba(var(--flare-rgb), 0.08); }
.ax-btn--neutral { color: var(--text-primary); }

.ax-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-primary); font-size: 14px; }
.ax-or::before, .ax-or::after { content: ""; flex: 1; height: 1px; background: var(--border-mid); }
.ax-or span { padding: 0; }
.ax-terms { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.ax-terms a, .ax-link { color: var(--cyan); text-decoration: none; }
.ax-terms a:hover, .ax-link:hover { text-decoration: underline; }
.ax-already { margin: 28px 0 0; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.ax-switch { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); }
.ax-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ax-step-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--text-primary); }
.ax-step-text  { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.ax-status { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }

/* Inputs */
:root:root #auth-screen .ax-form .auth-input {
  width: 100%; height: 48px; padding: 0 14px !important; background: transparent !important; color: var(--text-primary) !important;
  border: 1px solid var(--border-mid) !important; border-radius: 6px !important; box-shadow: none !important;
  font-family: var(--font-body); font-size: 15px;
}
:root:root #auth-screen .ax-form .auth-input::placeholder { color: var(--text-muted); }
:root:root #auth-screen .ax-form .auth-input:focus { border-color: var(--cyan) !important; outline: none; }
#auth-screen .auth-input-wrap { position: relative; width: 100%; }
#auth-screen .auth-input-wrap .auth-input { padding-right: 44px !important; }
#auth-screen .auth-toggle-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--text-muted); width: 36px; height: 36px; cursor: pointer; }
#auth-screen .pw-strength { display: none !important; }

@media (max-width: 860px) {
  :root:root #auth-screen:not(.auth-screen--gate) { grid-template-columns: 1fr; }
  .ax-left { display: none; }
  .ax-logo-sm { display: block; }
  :root:root #auth-screen:not(.auth-screen--gate) .auth-card { padding: 28px 24px !important; justify-content: flex-start; }
  .ax-title { font-size: 38px; margin-bottom: 28px; }
  .ax-back { left: 12px; top: 14px; }
  .ax-stack { max-width: none; }
}