/* koddeit — Stitch dark-mode sheet (Lane C).
 *
 * LOADS LAST at merge (after bundle.css, stitch.css, stitch-views.css).
 * Dark variants of the Stitch tokens only. EVERY rule in this file is
 * scoped under html[data-theme="dark"] — the app's existing toggle:
 * <html data-theme> set by window.DCTheme (theme.js, localStorage key
 * "devconnect_theme", default "light") and by the #social2-theme-toggle
 * button's inline onclick. No new toggle is invented here, and theme
 * scheduling behaviour is untouched (opt-in/off by default, as before).
 *
 * The high-contrast guard :not([data-ob-contrast="high"]) is kept on
 * every rule, following the fixall-lane-d.css pattern: the OB
 * high-contrast mode deliberately paints white and must never be
 * overridden by dark. Light theme is untouched by construction: no
 * rule here applies without data-theme="dark".
 *
 * Tokens are the social2 system dark tokens (social2-system.css sets
 * them under data-theme="dark"); values are repeated in comments only:
 *   canvas/paper #0b0f16, card surface #151c28, surface-2 #1c2536,
 *   surface-3 #232e42, ink #f1f5f9, ink-soft #cbd5e1, muted #94a3b8,
 *   line #263244, line-strong #334155, accent fill #0f766e,
 *   accent hover #0d9488, accent text on dark #5eead4 (hover #99f6e4),
 *   accent soft #134e4a, accent border #2dd4bf.
 * Accent stays TEAL #0f766e throughout; the devconnect_2 royal-blue
 * accent is never used anywhere in this file. No gradients, no new icon styles.
 *
 * DELIBERATELY NOT DARKENED (documented, not oversights):
 *  - QR-code surfaces, whiteboard canvases, video surfaces: same
 *    reason as fixall-lane-d.css (a QR code needs a white quiet zone).
 *  - Teal-filled buttons/badges with white text: white-on-teal reads
 *    in both themes, so only their hover is adjusted (#0d9488).
 *  - <img> media: never inverted or filtered; the theme.js wordmark
 *    swap (logo.svg <-> logo-light.svg) already handles the logo.
 *  - Inline-style avatar discs: a class rule cannot beat an inline
 *    background, so deterministic pastel avatar discs keep their
 *    light-mode fills; their glyphs are dark text on pastel, which
 *    still reads on a dark card. If Lane A moves avatar fills to
 *    classes, the .dc-avatar/.social2-avatar rules below take over.
 */

/* ---------- 0. Viewport anti-flash: no white flash on load/switch ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) {
  background: var(--dc-paper, #0b0f16);
  color-scheme: dark;
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) body {
  background: var(--dc-paper, #0b0f16);
  color: var(--dc-ink, #f1f5f9);
}

/* ---------- 1. App shell: topbar, layout, sidebar, bottom nav ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-shell,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-layout,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-main,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-sidebar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-topbar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-topbar-inner,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-more-nav,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-shell,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-topbar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-sidebar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-bottom-nav {
  background: var(--dc-paper, #0b0f16);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-topbar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-topbar {
  background: var(--dc-surface, #151c28);
  border-bottom-color: var(--dc-line, #263244);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav a,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav button,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav a,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav button,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-nav a,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-nav button {
  color: var(--dc-ink-soft, #cbd5e1);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav a:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav button:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav a:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav button:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-nav a:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-nav button:hover {
  background: var(--dc-surface-2, #1c2536);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav a.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-left-nav button.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav a.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-bottom-nav button.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-nav a.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-nav button.is-active {
  background: var(--dc-accent-soft, #134e4a);
  color: var(--dc-accent-text-dark, #5eead4);
}

/* ---------- 2. Stitch cards: feed, profile, projects, communities ---------- */
/* White 16px Stitch cards (Lanes A/B light rules) -> dark surfaces. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-post,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-feed-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-side-search-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-profile-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-project-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-community-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-investor-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-message-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-space-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-post-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-project-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-profile-header,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-community-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-space-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-investor-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-sidebar-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-portfolio-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-owner-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-related-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-trending-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-settings-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-explore-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-auth-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-conv-item,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-message,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-comment,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-composer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-draft-item,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-story-strip,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-who-to-follow,
html[data-theme="dark"]:not([data-ob-contrast="high"]) main article {
  background: var(--dc-surface, #151c28);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
}
/* View sections themselves are canvas, not cards: paper, so the
 * surface cards inside them still read as separate blocks. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .view {
  background: var(--dc-paper, #0b0f16);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
}
/* Feed-card inner text + muted metadata stay readable on dark. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-card p,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-post-card p,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-post-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-post-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-muted,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .view-head p {
  color: var(--dc-muted, #94a3b8);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-card h1,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-card h2,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-card h3,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-post-card h1,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-post-card h2,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-post-card h3,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .view-head h2 {
  color: var(--dc-ink, #f1f5f9);
}
/* Soft-fill inner blocks (composer boxes, attachment blocks, stats). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-composer-box,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-attachment,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-attachment,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-stat,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-filter-bar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-empty {
  background: var(--dc-surface-2, #1c2536);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink-soft, #cbd5e1);
}

/* ---------- 3. Search pill (dark) + form fields ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-search,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-side-search,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-search,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-search input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-side-search input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-search input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) input[type="search"],
html[data-theme="dark"]:not([data-ob-contrast="high"]) input[type="text"],
html[data-theme="dark"]:not([data-ob-contrast="high"]) input[type="email"],
html[data-theme="dark"]:not([data-ob-contrast="high"]) input[type="password"],
html[data-theme="dark"]:not([data-ob-contrast="high"]) input[type="url"],
html[data-theme="dark"]:not([data-ob-contrast="high"]) input[type="number"],
html[data-theme="dark"]:not([data-ob-contrast="high"]) textarea,
html[data-theme="dark"]:not([data-ob-contrast="high"]) select {
  background: var(--dc-surface-3, #232e42);
  border-color: var(--dc-line-strong, #334155);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-search input::placeholder,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-side-search input::placeholder,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-search input::placeholder,
html[data-theme="dark"]:not([data-ob-contrast="high"]) input::placeholder,
html[data-theme="dark"]:not([data-ob-contrast="high"]) textarea::placeholder {
  color: var(--dc-muted, #94a3b8);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-search input:focus,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-search input:focus,
html[data-theme="dark"]:not([data-ob-contrast="high"]) input:focus,
html[data-theme="dark"]:not([data-ob-contrast="high"]) textarea:focus,
html[data-theme="dark"]:not([data-ob-contrast="high"]) select:focus {
  background: var(--dc-surface-3, #232e42);
  border-color: var(--dc-accent-border, #2dd4bf);
  outline: 2px solid var(--dc-accent-border, #2dd4bf);
  outline-offset: 0;
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) select option {
  background: var(--dc-surface-3, #232e42);
  color: var(--dc-ink, #f1f5f9);
}

/* ---------- 4. Spaces selects: ID-scoped overrides (fixall precedent) ---------- */
/* spaces.css forces #spaces-filters select / #space-create-form select
 * { background:#fff } at ID specificity, which beats any generic dark
 * rule; the override must therefore be ID-scoped too (same pattern as
 * social2-system.css:548 and fixall-lane-d.css Group D-I). Re-asserted
 * here so a Stitch light rule on these IDs can never win at merge,
 * whatever order the Lane A/B sheets land in. Covers the filters,
 * the create form, the chat input, and any .dc-*/.social2-* Spaces
 * filter/select variant, including their <option> lists (native
 * dropdowns otherwise render light with pale text in dark mode). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) #spaces-filters select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-create-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #spaces-filters input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #spaces-filters textarea,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-create-form input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-create-form textarea,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-chat-input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #spaces-filters,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-create-form,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-space-filters select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-space-create-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-space-filters select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-space-create-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-spaces-list .dc-space-card {
  background: var(--dc-surface-3, #232e42);
  border-color: var(--dc-line-strong, #334155);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) #spaces-filters,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-create-form {
  background: var(--dc-surface, #151c28);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) #spaces-filters select option,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #space-create-form select option,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-space-filters select option,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-space-create-form select option,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-space-filters select option,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-space-create-form select option {
  background: var(--dc-surface-3, #232e42);
  color: var(--dc-ink, #f1f5f9);
}

/* ---------- 5. Messages, profile, projects, investors, explore, settings ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-message--own,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-message--own {
  background: var(--dc-accent-soft, #134e4a);
  border-color: var(--dc-accent-border, #2dd4bf);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-conv-item.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-conv-item.is-active {
  background: var(--dc-surface-3, #232e42);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-profile-tabs button,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-tabs button,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-tabs button {
  color: var(--dc-muted, #94a3b8);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-profile-tabs button.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-tabs button.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-tabs button.is-active,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-tab.is-active {
  color: var(--dc-accent-text-dark, #5eead4);
  border-bottom-color: var(--dc-accent-text-dark, #5eead4);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-table td,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-table td {
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink-soft, #cbd5e1);
}

/* ---------- 6. Buttons, pills, tags, role badges (dark-readable) ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-btn-primary,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-btn-primary,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-cta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-cta {
  background: var(--dc-accent, #0f766e);
  border-color: var(--dc-accent, #0f766e);
  color: #ffffff;
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-btn-primary:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-btn-primary:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-cta:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-cta:hover {
  background: #0d9488;
  border-color: #0d9488;
  color: #ffffff;
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-btn-secondary,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-btn-secondary,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-btn-ghost,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-btn-ghost {
  background: var(--dc-surface-2, #1c2536);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-btn-secondary:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-btn-secondary:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-btn-ghost:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-btn-ghost:hover {
  background: var(--dc-surface-3, #232e42);
}
/* Topic tags: light #f1f5f9 pill -> dark surface-2 pill. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-tag,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-tag,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-chip,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-chip {
  background: var(--dc-surface-2, #1c2536);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink-soft, #cbd5e1);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-tag:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-tag:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-chip:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-chip:hover {
  background: var(--dc-surface-3, #232e42);
}
/* Role badges (DESIGN.md hues, darkened for contrast on dark cards).
 * Developer: teal tint. Tester: amber tint. Investor: violet tint
 * (the DESIGN.md investor hue, darkened — a role distinction, not a
 * decorative gradient; no blue, no gradient anywhere). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-badge-developer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-badge-developer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-role-developer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-role-developer {
  background: #134e4a;
  border-color: #2dd4bf;
  color: #5eead4;
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-badge-tester,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-badge-tester,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-role-tester,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-role-tester {
  background: #422006;
  border-color: #f59e0b;
  color: #fde68a;
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-badge-investor,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-badge-investor,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-role-investor,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-role-investor {
  background: #2e1065;
  border-color: #a78bfa;
  color: #ddd6fe;
}
/* Class-based initials avatars only (see header note on inline styles). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-avatar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-avatar {
  border-color: var(--dc-line-strong, #334155);
}

/* ---------- 7. Code cards (dark-readable, never light) ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-code,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-code-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-code,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-code-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-snippet,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-snippet,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-code pre,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-code pre,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-code-card pre,
html[data-theme="dark"]:not([data-ob-contrast="high"]) pre,
html[data-theme="dark"]:not([data-ob-contrast="high"]) code {
  background: #0f172a;
  border-color: var(--dc-line, #263244);
  color: #e2e8f0;
}

/* ---------- 8. Modals, dropdowns, menus, toasts ---------- */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-modal,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-modal,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-dialog,
html[data-theme="dark"]:not([data-ob-contrast="high"]) dialog,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-dropdown,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-dropdown,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-menu,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-popover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-more-panel,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-more-panel,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-toast,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-toast {
  background: var(--dc-surface, #151c28);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .5), 0 10px 10px -5px rgb(0 0 0 / .4);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-modal-backdrop,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-modal-backdrop,
html[data-theme="dark"]:not([data-ob-contrast="high"]) dialog::backdrop {
  background: rgb(15 23 42 / .6);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-dropdown a,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-dropdown a,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-menu a,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-menu button {
  color: var(--dc-ink-soft, #cbd5e1);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-dropdown a:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-dropdown a:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-menu a:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-menu button:hover {
  background: var(--dc-surface-3, #232e42);
  color: var(--dc-ink, #f1f5f9);
}

/* ---------- 9. Stitch light-rule catch-alls (white-forcing rules) ---------- */
/* Any Stitch light rule that paints a known view container, list item,
 * or action bar white is caught here at merge order (this sheet loads
 * last, so equal specificity wins; ID rules above win regardless). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-feed,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-profile,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-projects,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-messages,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-spaces,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-communities,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-investors,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-settings,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-explore,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-feed,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-profile,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-projects,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-messages,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-spaces,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-communities,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-investors,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-settings,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-explore {
  background: var(--dc-paper, #0b0f16);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-list-item,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-list-item,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-action-bar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-action-bar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-footer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-footer {
  background: var(--dc-surface, #151c28);
  border-color: var(--dc-line, #263244);
  color: var(--dc-ink, #f1f5f9);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-action-bar button,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-action-bar button {
  color: var(--dc-ink-soft, #cbd5e1);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .social2-action-bar button:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-action-bar button:hover {
  background: var(--dc-surface-3, #232e42);
  color: var(--dc-accent-text-dark, #5eead4);
}

/* ==========================================================================
   LANE 1 (symmetry + side spaces) — dark-mode mirror of the 1440px+
   wide-screen grid in stitch.css. Same columns (280 / up to 760 / 360),
   same 24px gaps, same 1512px cap, so dark mode centres exactly like
   light mode. Only the grid geometry is set here: dark-mode main has no
   640px cap (the light stitch.css cap does not apply under
   data-theme="dark"), so no main/feed-layout override is needed. The
   extra body.social2-shell qualifier beats restyle.css, which loads
   after this sheet. Accent stays teal #0f766e; no colour change here.
   ========================================================================== */
@media (min-width: 1440px) {
  html[data-theme="dark"]:not([data-ob-contrast="high"]) body.social2-shell .layout.social2-layout {
    grid-template-columns: 280px minmax(0, 760px) 360px;
    gap: 24px;
    max-width: 1512px;
    padding: 0 32px 32px;
    justify-content: center;
  }
}