/* ==========================================================================
   NeonForge · Palette layer (loaded after the older layers)
   --------------------------------------------------------------------------
   Slate-teal interface built from six reference palettes:
     surfaces   #06141B canvas, #11212D cards, #253745 raised, #0B1A22 inputs
     type       #F8FAFC primary, #CCD0CF secondary, #9BA8AB muted
     accent     #7DA0CA (links, focus ring, active tab line, sidebar tick, caret)
     roles      primary · success · warning · live · premium · info · danger ·
                neutral — see css/buttons.css
   No neon glow: depth comes from soft shadows and surface steps.
   ========================================================================== */

:root {
  /* Slate-teal ramp */
  --bg: #06141B;
  --bg-2: #0B1A22;
  --surface: #11212D;
  --surface-2: #11212D;
  --surface-solid: #11212D;
  --surface-raised: #253745;
  --surface-hover: #1A2D3B;
  --input-bg: #0B1A22;
  --border: rgba(155, 168, 171, 0.14);
  --border-strong: #4A5C6A;
  --border-hover: rgba(155, 168, 171, 0.36);

  --text: #F8FAFC;
  --text-dim: #CCD0CF;
  --muted: #9BA8AB;
  --subtle: #9BA8AB;

  /* Accent (the old --neon-* names stay as aliases so older layers follow) */
  --neon: #7DA0CA;
  --neon-soft: #C1E8FF;
  --neon-ink: #021024;
  --neon-rgb: 125, 160, 202;
  --neon-edge: rgba(125, 160, 202, 0.28);
  --neon-edge-strong: rgba(125, 160, 202, 0.55);
  --neon-halo: 0 0 0 0 transparent;
  --neon-halo-strong: 0 0 0 1px rgba(125, 160, 202, 0.55);

  --accent: #7DA0CA;
  --accent-rgb: 125, 160, 202;
  --accent-text: #7DA0CA;
  --primary: #7DA0CA;
  --primary-rgb: 125, 160, 202;
  --gradient: #7DA0CA;

  /* Former neon hues mapped onto the palette */
  --cyan: #7DA0CA;
  --cyan-rgb: 125, 160, 202;
  --magenta: #DFB6B2;
  --magenta-rgb: 223, 182, 178;
  --violet: #DFB6B2;
  --violet-rgb: 223, 182, 178;

  /* Semantics */
  --green: #4C956C;
  --lime: #4C956C;
  --lime-rgb: 76, 149, 108;
  --red: #C0392B;
  --red-rgb: 192, 57, 43;
  --amber: #D18B47;
  --amber-rgb: 209, 139, 71;

  /* Role colours: solid fill, text on the fill, text/border on surfaces */
  --role-primary: #7DA0CA;      --role-primary-rgb: 125, 160, 202;  --role-primary-fg: #021024;  --role-primary-text: #7DA0CA;
  --role-success: #4C956C;      --role-success-rgb: 76, 149, 108;   --role-success-fg: #06141B;  --role-success-text: #A8D5BA;
  --role-warning: #D18B47;      --role-warning-rgb: 209, 139, 71;   --role-warning-fg: #3E2723;  --role-warning-text: #E4C7A1;
  --role-live: #854F6C;         --role-live-rgb: 133, 79, 108;      --role-live-fg: #FBE4DB;     --role-live-text: #FBE4DB;
  --role-premium: #DFB6B2;      --role-premium-rgb: 223, 182, 178;  --role-premium-fg: #2B124C;  --role-premium-text: #DFB6B2;
  --role-info: #5483B3;         --role-info-rgb: 84, 131, 179;      --role-info-fg: #C1E8FF;     --role-info-text: #C1E8FF;
  --role-danger: #C0392B;       --role-danger-rgb: 192, 57, 43;     --role-danger-fg: #FFFFFF;   --role-danger-text: #F2A69C;
  --role-neutral: #4A5C6A;      --role-neutral-rgb: 155, 168, 171;  --role-neutral-fg: #F8FAFC;  --role-neutral-text: #F8FAFC;

  --btn-depth: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 20px -10px rgba(0, 0, 0, 0.55);

  /* Syntax colours, used only inside code */
  --syn-key: #7DA0CA;
  --syn-str: #A8D5BA;
  --syn-com: #9BA8AB;
  --syn-num: #D18B47;

  --radius-sm: 8px;
  --font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --glow: 0 0 0 1px var(--border-hover);
  --shadow-pop: 0 0 0 1px var(--border-strong), 0 16px 40px -12px rgba(0, 0, 0, 0.7);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms;

  /* Theme-dependent values that used to be hard-coded */
  --nav-bg: rgba(6, 20, 27, 0.82);
  --overlay-bg: rgba(2, 8, 12, 0.65);
  --code-bg: #0B1A22;
  --code-head-bg: #11212D;
  --on-accent: #021024;
  --btn-primary-fg: #021024;
  --selection-fg: #F8FAFC;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4);

  /* Dark shades the older layers used as literal colours */
  --shade-000: #040E13;
  --shade-05: #06141B;
  --shade-07: #0B1A22;
  --shade-08: #0B1A22;
  --shade-0a: #11212D;
  --shade-0b: #0B1A22;
  --shade-18: #253745;
  --ink-rgb: 6, 20, 27;
  --ink-2-rgb: 17, 33, 45;

  /* Inverted fills of the base layer, their text, and neutral wells */
  --tint-rgb: 6, 20, 27;
  --input-border: rgba(155, 168, 171, 0.18);
  --hi: #F8FAFC;
  --hi-strong: #FFFFFF;
  --on-hi: #06141B;
  --muted-border: #9BA8AB;
  --well: #0B1A22;
  --well-2: #1A2D3B;
  --well-3: #253745;
  --well-4: #4A5C6A;
  --danger-text: #F2A69C;
  --danger-text-soft: #F6C1B9;
  --danger-strong: #F2A69C;

  /* Code windows (Prism + built-in highlighter), all ≥ 4.5:1 on #0B1A22 */
  --code-fg: #CCD0CF;
  --gutter-fg: #8A979B;
  --tok-comment: #9BA8AB;
  --tok-keyword: #7DA0CA;
  --tok-string: #A8D5BA;
  --tok-fn: #DFB6B2;
  --tok-number: #D18B47;
  --tok-tag: #C1E8FF;
  --tok-punct: #CCD0CF;
}

/* ==========================================================================
   Light theme: slate surfaces, navy accent, darker shades of the same
   palettes for roles and code, soft neutral shadows instead of glows.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F8FAFC;
  --bg-2: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-solid: #FFFFFF;
  --surface-raised: #E2E8F0;
  --surface-hover: #F1F5F9;
  --input-bg: #F8FAFC;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: #94A3B8;
  --border-hover: rgba(15, 23, 42, 0.28);

  --text: #0F172A;
  --text-dim: #334155;
  /* #64748B is 4.45:1 on the tinted toolbars (#F5F8FB); one step darker keeps ≥ 4.5:1 everywhere. */
  --muted: #5E6E85;
  /* #64748B falls to ~3.9:1 on the #E2E8F0 raised surface; tertiary text uses a darker slate. */
  --subtle: #556070;

  --neon: #052659;
  --neon-soft: #052659;
  --neon-ink: #F8FAFC;
  --neon-rgb: 5, 38, 89;
  --neon-edge: rgba(5, 38, 89, 0.22);
  --neon-edge-strong: rgba(5, 38, 89, 0.5);
  --neon-halo: 0 0 0 0 transparent;
  --neon-halo-strong: 0 0 0 1px rgba(5, 38, 89, 0.45);

  --accent: #052659;
  --accent-rgb: 5, 38, 89;
  --accent-text: #052659;
  --primary: #052659;
  --primary-rgb: 5, 38, 89;
  --gradient: #052659;

  --cyan: #052659;
  --cyan-rgb: 5, 38, 89;
  --magenta: #522B5B;
  --magenta-rgb: 82, 43, 91;
  --violet: #522B5B;
  --violet-rgb: 82, 43, 91;

  --green: #166534;
  --lime: #166534;
  --lime-rgb: 22, 101, 52;
  --red: #C0392B;
  --red-rgb: 192, 57, 43;
  --amber: #A0522D;
  --amber-rgb: 160, 82, 45;

  --role-primary: #052659;      --role-primary-rgb: 5, 38, 89;      --role-primary-fg: #F8FAFC;  --role-primary-text: #052659;
  --role-success: #166534;      --role-success-rgb: 22, 101, 52;    --role-success-fg: #F8FAFC;  --role-success-text: #166534;
  --role-warning: #A0522D;      --role-warning-rgb: 160, 82, 45;    --role-warning-fg: #FEFCF8;  --role-warning-text: #A0522D;
  --role-live: #522B5B;         --role-live-rgb: 82, 43, 91;        --role-live-fg: #FBE4DB;     --role-live-text: #522B5B;
  --role-premium: #522B5B;      --role-premium-rgb: 82, 43, 91;     --role-premium-fg: #FBE4DB;  --role-premium-text: #522B5B;
  --role-info: #052659;         --role-info-rgb: 5, 38, 89;         --role-info-fg: #052659;     --role-info-text: #052659;
  --role-danger: #C0392B;       --role-danger-rgb: 192, 57, 43;     --role-danger-fg: #FFFFFF;   --role-danger-text: #A93226;
  --role-neutral: #94A3B8;      --role-neutral-rgb: 15, 23, 42;     --role-neutral-fg: #0F172A;  --role-neutral-text: #0F172A;

  --btn-depth: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 16px -8px rgba(15, 23, 42, 0.25);

  --syn-key: #052659;
  --syn-str: #166534;
  --syn-com: #4A5C6A;
  --syn-num: #A0522D;

  --glow: 0 0 0 1px var(--border-hover);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-pop: 0 0 0 1px var(--border), 0 12px 32px -12px rgba(15, 23, 42, 0.22);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);

  --nav-bg: rgba(248, 250, 252, 0.88);
  --overlay-bg: rgba(15, 23, 42, 0.35);
  --code-bg: #F8FAFC;
  --code-head-bg: #F1F5F9;
  --on-accent: #F8FAFC;
  --btn-primary-fg: #F8FAFC;
  --selection-fg: #0F172A;

  --shade-000: #FFFFFF;
  --shade-05: #F8FAFC;
  --shade-07: #F8FAFC;
  --shade-08: #F8FAFC; /* inputs and search fields: a faint fill on white cards */
  --shade-0a: #FFFFFF;
  --shade-0b: #FFFFFF;
  --shade-18: #E2E8F0;
  --ink-rgb: 241, 245, 249;
  --ink-2-rgb: 241, 245, 249;

  --tint-rgb: 255, 255, 255;
  --input-border: rgba(15, 23, 42, 0.16);
  --hi: #0F172A;
  --hi-strong: #020617;
  --on-hi: #F8FAFC;
  --muted-border: #64748B;
  --well: #F1F5F9;
  --well-2: #E2E8F0;
  --well-3: #CBD5E1;
  --well-4: #94A3B8;
  --danger-text: #A93226;
  --danger-text-soft: #922B21;
  --danger-strong: #A93226;

  /* Light code window: every token ≥ 4.5:1 on #F8FAFC */
  --code-fg: #0F172A;
  --gutter-fg: #556070;
  --tok-comment: #4A5C6A;
  --tok-keyword: #052659;
  --tok-string: #166534;
  --tok-fn: #522B5B;
  --tok-number: #A0522D;
  --tok-tag: #854F6C;
  --tok-punct: #334155;
}

/* ---------- Canvas: plain graphite, no grid, no light cone ---------- */
body {
  background: var(--bg);
  letter-spacing: 0;
}

.bg-fx,
.bg-grid,
.bg-orb {
  display: none !important;
}

::selection {
  background: rgba(var(--neon-rgb), 0.35);
  color: var(--selection-fg);
}

:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.input:focus,
.input:focus-visible,
.nav-search:focus-within,
.people-search-box:focus-within,
.chat-composer:focus-within,
.dir-search:focus-within {
  border-color: rgba(var(--neon-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--neon-rgb), 0.14);
}

/* ---------- Type: weight for emphasis only, size for hierarchy ---------- */
h1,
h2,
h3 {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.text-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

/* Sentence case for every label that used to be uppercase and tracked */
.divider,
.role-badge,
.op-badge,
.menu-label,
.manage-head,
.pg-console-head,
.search-label,
.filter-group-label,
.channel-group-head,
.member-group h4,
.user-card-label,
.friends-count,
.explore-title,
.open-roles-label,
.entity-kicker,
.sub-title,
.kanban-col h3,
.invite-kicker,
.live-toggle,
.side-user-stats span,
.side-title,
.live-now-indicator,
.live-badge,
.sys-status {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.side-title,
.live-now-indicator {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.side-title {
  margin-bottom: 8px;
}

.side-title .icon {
  width: 16px;
  height: 16px;
  color: var(--subtle);
}

/* ---------- Surfaces: steps and hairlines, never glow ---------- */
.card,
.dir-card,
.side-section,
.side-user {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}

.side-nav,
.sidebar-left .side-section {
  background: transparent;
  border-color: transparent;
}

.navbar {
  background: var(--nav-bg);
  border-bottom-color: var(--border);
}

.modal,
.popover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* ---------- Brand: one wordmark colour ---------- */
.brand-name,
.brand-name span {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.btn {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform 120ms var(--ease);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-lg {
  min-height: 44px;
  padding: 0 20px;
}

.btn-primary {
  --btn-bg: rgba(var(--neon-rgb), 0.08);
  --btn-fg: var(--btn-primary-fg);
  --btn-border: var(--neon-edge-strong);
  box-shadow: var(--neon-halo);
}

.btn-primary:hover:not(:disabled) {
  --btn-bg: rgba(var(--neon-rgb), 0.14);
  border-color: var(--neon);
  box-shadow: var(--neon-halo-strong);
}

.btn-primary .icon,
.btn-primary .spinner {
  color: var(--neon);
}

.btn-outline {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
}

.btn-outline:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  --btn-bg: var(--surface-hover);
  border-color: var(--neon-edge);
  color: var(--text);
}

/* ---------- Navigation: selection is a surface step plus a neon tick ---------- */
.side-link,
.side-filter {
  position: relative;
  min-height: 36px;
  border-radius: var(--radius-sm);
}

.side-link.is-active,
.side-filter.is-active,
.channel-link.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.side-link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--neon);
}

.side-link.is-active .icon,
.side-filter.is-active .icon {
  color: var(--text);
}

.side-filter.is-active b {
  background: transparent;
  border-color: var(--border-hover);
  color: var(--text);
}

.nav-link.is-active::after,
.sort-tab.is-active::after {
  background: var(--neon) !important;
  box-shadow: none !important;
}

.sort-tab.is-active,
.nav-link.is-active {
  color: var(--text);
}

.filter-pill.is-active {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--text);
}

/* ---------- System status: quiet text, a static dot ---------- */
.sys-status {
  height: 28px;
  border-color: var(--border);
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
}

.sys-status b {
  font-weight: 500;
  color: var(--text);
}

.sys-dot::after,
.activity-pulse::after,
.live-now-indicator:not(.is-on) .live-now-dot::after {
  display: none;
}

.activity-pulse {
  display: none;
}

/* ---------- Hero: copy on the left, the code window as the one moment ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 32px;
  background: var(--surface);
  border-color: var(--border);
  overflow: hidden;
}

.hero-glow,
.entity-hero-glow,
.hero-eyebrow {
  display: none;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hero .hero-kicker {
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--subtle) !important;
}

.hero h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

.hero p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
  max-width: 36rem;
}

.hero-actions {
  margin-top: 8px;
  gap: 8px;
}

.hero-stats {
  gap: 20px;
  margin-top: 4px;
  font-size: 13px;
}

.hero-stats b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.hero-code {
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--shade-07);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  min-width: 0;
}

.hero-code figcaption {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--subtle);
}

.hero-code-dots {
  display: inline-flex;
  gap: 6px;
}

.hero-code-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(155, 168, 171, 0.3);
}

.hero-code-tag {
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  line-height: 18px;
}

.hero-code pre {
  margin: 0;
  padding: 12px 0;
  background: transparent;
  border: 0;
  overflow-x: auto;
}

.hero-code code {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--text-dim);
}

.hero-code .ln {
  display: block;
  padding-right: 16px;
  white-space: pre;
}

.hero-code .ln em {
  display: inline-block;
  width: 40px;
  padding-right: 16px;
  text-align: right;
  font-style: normal;
  color: var(--gutter-fg);
  user-select: none;
}

.hero-code .ln i {
  font-style: normal;
  color: var(--syn-key);
}

.hero-code .ln s {
  text-decoration: none;
  color: var(--syn-str);
}

.hero-code .ln.is-comment {
  color: var(--syn-com);
}

.hero-code .caret {
  display: inline-block;
  width: 8px;
  height: 16px;
  vertical-align: -3px;
  background: var(--neon);
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 24px 20px;
    gap: 24px;
  }

  .hero h1 {
    font-size: 26px;
  }

}

/* ---------- Terminal prompt: neon caret ---------- */
.prompt-terminal {
  background: var(--surface);
}

.prompt-terminal:focus-within {
  border-color: var(--border-hover);
  box-shadow: none;
}

.prompt-bar {
  background: var(--bg);
}

.prompt-caret {
  color: var(--neon);
}

/* ---------- Icon tiles: flat ---------- */
.empty-icon,
.view-header-icon,
.chat-welcome-icon,
.pl-sent-icon,
.side-cta-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  color: var(--muted);
}

.empty-icon .icon,
.view-header-icon .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.empty-state {
  gap: 8px;
  padding: 48px 24px;
}

.empty-state h3 {
  font-size: 16px;
  font-weight: 500;
}

.empty-state p {
  font-size: 14px;
}

/* ---------- Sidebar widgets ---------- */
.side-empty {
  color: var(--subtle);
  font-size: 13px;
}

.pulse-list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.pulse-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 28px;
  font-size: 13px;
}

.pulse-list dt {
  color: var(--muted);
}

.pulse-list dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.live-now-indicator.is-on .live-now-dot {
  background: var(--red);
}

/* ---------- Counts and badges: quiet mono text ---------- */
.filter-pill span {
  color: var(--subtle) !important;
}

.side-filter b,
.side-count,
.filter-pill span {
  font-family: var(--mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.live-badge {
  box-shadow: none;
}

/* ---------- Motion: nothing loops unless it is really live ---------- */
.deploy-status.is-building i {
  animation: none;
}

.status-live {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Type hierarchy (Geist / Inter)
   ========================================================================== */
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 15px; line-height: 1.35; font-weight: 500; letter-spacing: -0.005em; }

.hero h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

small,
.muted,
time,
.timetag {
  font-size: 12px;
}

code,
kbd,
pre,
.mono,
.side-filter b,
.side-count {
  font-family: var(--mono);
}

/* ==========================================================================
   Subtle neon borders
   ========================================================================== */
.card,
.dir-card,
.side-section,
.side-user,
.post-card,
.empty-state,
.prompt-terminal {
  border: 1px solid var(--border);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.post-card:hover,
.dir-card:hover,
.prompt-terminal:focus-within {
  border-color: var(--neon-edge);
  box-shadow: var(--neon-halo);
}

.sidebar-left .side-section,
.side-nav {
  border-color: transparent;
}

.hero {
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.hero-code {
  border-color: var(--neon-edge);
  box-shadow: var(--neon-halo), 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}

.navbar {
  border-bottom-color: rgba(var(--neon-rgb), 0.1);
}

.modal,
.popover {
  border-color: var(--neon-edge);
  box-shadow: var(--neon-halo), 0 24px 64px -16px rgba(0, 0, 0, 0.9);
}

.side-link.is-active,
.filter-pill.is-active,
.channel-link.is-active {
  box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.14);
}

.side-link.is-active::before {
  box-shadow: none;
}

.sort-tab.is-active::after,
.nav-link.is-active::after {
  box-shadow: none !important;
}

.input,
.nav-search,
.prompt-bar {
  border-color: var(--input-border);
  background: var(--shade-08);
}

.input:focus,
.input:focus-visible,
.nav-search:focus-within,
.people-search-box:focus-within,
.chat-composer:focus-within,
.dir-search:focus-within,
.prompt-terminal:focus-within .prompt-bar {
  border-color: var(--neon-edge-strong);
  box-shadow: var(--neon-halo);
}

.hero-code .caret {
  box-shadow: none;
}

/* ==========================================================================
   Minimal interactive buttons
   ========================================================================== */
.btn {
  min-height: 34px;
  font-size: 13px;
  font-weight: 500;
}

.btn-lg {
  min-height: 40px;
  font-size: 14px;
}

.btn-ghost {
  --btn-fg: var(--muted);
  border: 1px solid transparent;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--neon-halo-strong);
}

.icon-btn,
.nav-link {
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.icon-btn:hover {
  box-shadow: inset 0 0 0 1px var(--neon-edge);
}

.bottom-create {
  background: var(--role-primary) !important;
  border: 1px solid transparent !important;
  color: var(--role-primary-fg) !important;
  box-shadow: var(--btn-depth) !important;
}

.bottom-create .icon {
  color: var(--role-primary-fg) !important;
}

/* ---------- Theme toggle + light-mode details ---------- */
/* Icon buttons in the header keep their size when the bar gets crowded. */
.nav-right > .icon-btn,
.nav-right > .nav-avatar {
  flex-shrink: 0;
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
}

/* The right header column is at most ~490px wide (the bar is capped at 1440px).
   Keep the system pill compact so it never runs under the centred links. */
.sys-status .sys-prefix,
.sys-status .sys-total {
  display: none;
}

.nav-right:has(.nav-avatar) .sys-status .sys-members,
.nav-right:has(.nav-avatar) .sys-status .sys-sep {
  display: none;
}

@media (max-width: 1340px) {
  .nav-right:has(.nav-avatar) .sys-status {
    display: none;
  }
}

@media (max-width: 1180px) {
  .nav-right {
    gap: 6px;
  }

  .nav-create .hide-sm {
    display: none;
  }
}

/* Code windows: one source line = one numbered row. Prism's `.token.comment`
   also matches the post-comment `.comment { display: flex }` rule, which pushed
   trailing comments onto their own visual line and broke the gutter. */
.code-content,
.code-content code,
.pg-highlight,
.pg-highlight code {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.code-scroll {
  overflow-x: auto;
}

.code-content .token,
.pg-highlight .token,
.hero-code code .token {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* The monochrome logo is brightened for dark backgrounds; darken it on light ones. */
:root[data-theme="light"] .logo-mark {
  filter: grayscale(1) brightness(0.35) contrast(1.2);
}

/* The LIVE NOW pill: theme.css drops its red fill, so its text follows the theme. */
.live-now-indicator.is-on {
  color: var(--text);
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .dir-card,
:root[data-theme="light"] .side-section,
:root[data-theme="light"] .side-user {
  box-shadow: var(--shadow-soft);
}

:root[data-theme="light"] .side-nav,
:root[data-theme="light"] .sidebar-left .side-section {
  box-shadow: none;
}