/* ==========================================================================
   koddeit — Lane A: Stitch redesign, core app shell + feed (LIGHT ONLY)
   --------------------------------------------------------------------------
   System of record: devconnect_1 DESIGN.md tokens (teal card system),
   fused with the X-stream 3-column LAYOUT patterns from devconnect_2.
   Accent is TEAL #0F766E throughout. No other accent colour, no
   colour blending fills anywhere in this sheet.

   Loading contract: this sheet loads AFTER assets/css/bundle.css and
   overrides ONLY via cascade/specificity. bundle.css / bundle.js and all
   other JS are untouched. No dark-mode rules live here (Lane C owns
   dark mode): every rule below is scoped under
   html:not([data-theme="dark"]) so dark mode renders exactly as before.

   Fonts: Inter for UI, JetBrains Mono for code only. No webfont <link>
   is added (Lane A may add exactly one <link>: this sheet), so Inter /
   JetBrains Mono resolve from the device when installed and fall back
   to the system stacks otherwise.
   ========================================================================== */

/* ---------- Canvas + type ---------- */
html:not([data-theme="dark"]) body.social2-shell {
  background: #f8fafc;
  color: #0f172a;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html:not([data-theme="dark"]) body.social2-shell a { color: #0f766e; }
html:not([data-theme="dark"]) body.social2-shell a:hover { color: #0d9488; }

/* Structural dividing sections sit on the slightly deeper slate. */
html:not([data-theme="dark"]) .layout.social2-layout {
  background: #f1f5f9;
}

/* ---------- Buttons (design-system tokens; same classes app-wide) ---------- */
html:not([data-theme="dark"]) .btn {
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease,
    box-shadow 0.15s ease;
}
html:not([data-theme="dark"]) .btn:active { transform: scale(0.98); }
html:not([data-theme="dark"]) .btn:focus-visible,
html:not([data-theme="dark"]) button:focus-visible,
html:not([data-theme="dark"]) input:focus-visible,
html:not([data-theme="dark"]) textarea:focus-visible,
html:not([data-theme="dark"]) select:focus-visible,
html:not([data-theme="dark"]) summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0f766e, 0 0 0 4px #ffffff;
}
html:not([data-theme="dark"]) .btn.btn-primary {
  background: #0f766e;
  border: 1px solid #0f766e;
  color: #ffffff;
}
html:not([data-theme="dark"]) .btn.btn-primary:hover {
  background: #0d9488;
  border-color: #0d9488;
}
html:not([data-theme="dark"]) .btn.btn-ghost,
html:not([data-theme="dark"]) .btn:not(.btn-primary) {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}
html:not([data-theme="dark"]) .btn.btn-ghost:hover,
html:not([data-theme="dark"]) .btn:not(.btn-primary):hover {
  background: #e2e8f0;
}
/* Ghost actions inside post footers / chrome read as teal text. */
html:not([data-theme="dark"]) .dc-post-actions .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #0f766e;
}
html:not([data-theme="dark"]) .dc-post-actions .btn.btn-ghost:hover {
  background: #f0fdfa;
}

/* ---------- Top bar: sticky 64px, logo / pill search / actions ---------- */
html:not([data-theme="dark"]) .dc-topbar.social2-topbar {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: none;
}
html:not([data-theme="dark"]) .dc-topbar-inner.social2-topbar-inner {
  min-height: 64px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 16px;
}
html:not([data-theme="dark"]) .dc-topbar .wordmark-logo { height: 34px; width: auto; }

/* Search pill: slate fill, teal ring + white fill on focus. */
html:not([data-theme="dark"]) .dc-search.social2-search input {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f172a;
  padding: 10px 16px;
  font-size: 15px;
  min-height: 44px;
}
html:not([data-theme="dark"]) .dc-search.social2-search input::placeholder {
  color: #94a3b8;
}
html:not([data-theme="dark"]) .dc-search.social2-search input:focus {
  background: #ffffff;
  border-color: #0f766e;
  box-shadow: 0 0 0 2px #0f766e;
  outline: none;
}
html:not([data-theme="dark"]) .social2-theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #0f172a;
}
html:not([data-theme="dark"]) .social2-theme-toggle:hover { background: #f1f5f9; }
html:not([data-theme="dark"]) .social2-user-display {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .dc-topbar-actions .dc-avatar-btn {
  border-radius: 999px;
}

/* Notifications dropdown: Level-2 card. */
html:not([data-theme="dark"]) .social2-topbar-actions .social2-notif .notif-panel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  padding: 16px;
}
html:not([data-theme="dark"]) .social2-topbar-actions .social2-notif .notif-panel h2 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .social2-topbar-actions .social2-notif summary:hover {
  background: #f1f5f9;
}

/* ---------- Avatars: strict circles, initials discs, 24 / 40 / 64 ---------- */
html:not([data-theme="dark"]) .dc-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
html:not([data-theme="dark"]) .dc-avatar.dc-avatar--sm {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 11px;
  border-width: 2px;
}
html:not([data-theme="dark"]) .dc-avatar.dc-avatar--lg {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 20px;
}

/* ---------- Left rail ---------- */
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn,
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .social2-more summary {
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  gap: 16px;
  color: #0f172a;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
}
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn .nav-icon,
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .social2-more summary .nav-icon {
  width: 24px;
  height: 24px;
  color: #475569;
}
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn:hover,
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .social2-more summary:hover {
  background: #f1f5f9;
  border-color: transparent;
}
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn.is-active,
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn[aria-current="page"] {
  background: #f0fdfa;
  color: #0f766e;
  border-color: transparent;
  font-weight: 600;
}
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn.is-active .nav-icon,
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn[aria-current="page"] .nav-icon {
  color: #0f766e;
}
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn .badge {
  margin-left: auto;
  background: #0f766e;
  color: #ffffff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
}
/* "More" overflow panel: Level-2 dropdown card, compact rows. */
html:not([data-theme="dark"]) .dc-more-panel.social2-more-panel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  padding: 8px;
}
html:not([data-theme="dark"]) .dc-nav.social2-left-nav .social2-more .nav-btn {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  gap: 12px;
}

/* ---------- Right rail ---------- */
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
}
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #0f172a;
  margin: 0 0 16px;
}
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-empty,
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-meta,
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-handle {
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
}
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-name {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-row {
  border-color: #e2e8f0;
  padding: 12px 0;
}
html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar .dc-sidebar-row:first-child {
  padding-top: 0;
}
/* Suggested Builders: Follow = primary pill, Following = secondary pill. */
html:not([data-theme="dark"]) .dc-sidebar .dc-sidebar-follow.btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}
html:not([data-theme="dark"]) .dc-sidebar .dc-sidebar-follow.btn-primary:hover {
  background: #0d9488;
  border-color: #0d9488;
}
/* Trending Topics: topic tags + REAL store counts only (no invented data). */
html:not([data-theme="dark"]) .dc-sidebar .dc-tech-tag.dc-sidebar-tag {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
html:not([data-theme="dark"]) .dc-sidebar .dc-tech-tag.dc-sidebar-tag:hover {
  background: #e2e8f0;
}
html:not([data-theme="dark"]) .dc-sidebar .dc-sidebar-tag-count { color: #64748b; }
html:not([data-theme="dark"]) .dc-sidebar .dc-x-trend-row .dc-x-count,
html:not([data-theme="dark"]) .dc-sidebar .dc-x-trend-row .dc-x-score {
  color: #64748b;
  font-size: 13px;
}
/* Live Developer Space rows: teal live dot, title in ink. */
html:not([data-theme="dark"]) .dc-sidebar .dc-sidebar-live-line { color: #0f766e; }
html:not([data-theme="dark"]) .dc-sidebar .dc-live-dot {
  background: #0f766e;
}
/* Sidebar search pill. */
html:not([data-theme="dark"]) .social2-side-search {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f172a;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
}
html:not([data-theme="dark"]) .social2-side-search:hover { background: #e2e8f0; }

/* ---------- Feed view head ---------- */
html:not([data-theme="dark"]) #view-feed .view-head h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: #0f172a;
}
html:not([data-theme="dark"]) #view-feed .view-head p {
  color: #64748b;
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Feed cards ---------- */
html:not([data-theme="dark"]) .dc-post-card,
html:not([data-theme="dark"]) .dc-post-card.dc-social2-post {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 24px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) .dc-post-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  border-color: #cbd5e1;
}
html:not([data-theme="dark"]) .dc-post-head,
html:not([data-theme="dark"]) .dc-post-head.dc-social2-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
html:not([data-theme="dark"]) .dc-post-meta.dc-social2-post-meta { min-width: 0; }
html:not([data-theme="dark"]) .dc-post-card .dc-author-link {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
html:not([data-theme="dark"]) .dc-post-card .dc-handle,
html:not([data-theme="dark"]) .dc-post-card .dc-time,
html:not([data-theme="dark"]) .dc-post-card .dc-meta {
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
html:not([data-theme="dark"]) .dc-post-body {
  color: #0f172a;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 12px;
}
html:not([data-theme="dark"]) .dc-post-body p { margin: 0 0 12px; }
html:not([data-theme="dark"]) .dc-post-body p:last-child { margin-bottom: 0; }

/* Role badges — hook for the merge lane (see LANE-A-REPORT.md): feed.js
   renders no role badge today, so these selectors are dormant until a
   .dc-role-badge[data-role="developer"|"tester"|"investor"] hook lands. */
html:not([data-theme="dark"]) .dc-role-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
html:not([data-theme="dark"]) .dc-role-badge[data-role="developer"] {
  background: #f0fdfa;
  color: #0f766e;
  border-color: #ccfbf1;
}
html:not([data-theme="dark"]) .dc-role-badge[data-role="tester"] {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}
html:not([data-theme="dark"]) .dc-role-badge[data-role="investor"] {
  background: #f3e8ff;
  color: #6b21a8;
  border-color: #e9d5ff;
}
/* Existing status badges keep the same pill language. */
html:not([data-theme="dark"]) .dc-badge.dc-badge-review {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #ccfbf1;
  border-radius: 999px;
}
html:not([data-theme="dark"]) .dc-badge.dc-badge-reviewed,
html:not([data-theme="dark"]) .dc-badge.dc-badge-accepted {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #ccfbf1;
  border-radius: 999px;
}

/* Topic tags: slate pill, # prefix is in the rendered text. */
html:not([data-theme="dark"]) .dc-post-tags { gap: 8px; }
html:not([data-theme="dark"]) .dc-tag,
html:not([data-theme="dark"]) .dc-tech-tag,
html:not([data-theme="dark"]) .dc-category,
html:not([data-theme="dark"]) .dc-status {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
}
html:not([data-theme="dark"]) .dc-tag:hover,
html:not([data-theme="dark"]) .dc-tech-tag:hover { background: #e2e8f0; }

/* Attachment blocks: project / link / repost / media. */
html:not([data-theme="dark"]) .dc-post-media.dc-social2-post-media {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
html:not([data-theme="dark"]) .dc-post-media.dc-social2-post-media img,
html:not([data-theme="dark"]) .dc-post-media.dc-social2-post-media video {
  display: block;
  max-width: 100%;
  border-radius: 12px;
}
html:not([data-theme="dark"]) .dc-repost-embed,
html:not([data-theme="dark"]) .dc-repost-from {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

/* Code cards: #F7F8FA-style surface, JetBrains Mono, language badge, copy pill. */
html:not([data-theme="dark"]) .dc-code-post,
html:not([data-theme="dark"]) .dc-code-block {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
}
html:not([data-theme="dark"]) .dc-code-block code,
html:not([data-theme="dark"]) .dc-code-post code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  font-size: 13px;
  line-height: 20px;
  color: #0f172a;
  background: transparent;
}
html:not([data-theme="dark"]) .dc-code-post > p:first-child {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .dc-code-post .dc-action-btn[data-action="copy-code"],
html:not([data-theme="dark"]) .dc-post-card .dc-action-btn[data-action="copy-code"] {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f766e;
}

/* Footer action bar: 44px targets, teal hover, teal active. */
html:not([data-theme="dark"]) .dc-post-actions,
html:not([data-theme="dark"]) .dc-post-actions.dc-social2-actions {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
  margin-top: 16px;
  gap: 8px;
}
html:not([data-theme="dark"]) .dc-action-btn {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html:not([data-theme="dark"]) .dc-action-btn:hover {
  background: #f0fdfa;
  color: #0f766e;
}
html:not([data-theme="dark"]) .dc-action-btn.is-active {
  background: #f0fdfa;
  color: #0f766e;
  border-color: #ccfbf1;
}
html:not([data-theme="dark"]) .dc-view-count,
html:not([data-theme="dark"]) .dc-quote-count {
  color: #64748b;
  font-size: 13px;
  align-self: center;
}

/* Comments inside feed cards. */
html:not([data-theme="dark"]) .dc-comment {
  border-top: 1px solid #e2e8f0;
  color: #0f172a;
}
html:not([data-theme="dark"]) .dc-comment p {
  font-size: 14px;
  line-height: 20px;
}

/* Polls inside feed cards. */
html:not([data-theme="dark"]) .dc-poll-option {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  min-height: 44px;
  color: #0f172a;
}
html:not([data-theme="dark"]) .dc-poll-option.is-active {
  border-color: #0f766e;
  background: #f0fdfa;
}
html:not([data-theme="dark"]) .dc-poll-option-meta,
html:not([data-theme="dark"]) .dc-poll-foot,
html:not([data-theme="dark"]) .dc-poll-voted {
  color: #64748b;
}

/* ---------- Composer ---------- */
html:not([data-theme="dark"]) .dc-composer {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 24px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) .dc-composer h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #0f172a;
  margin: 0 0 16px;
}
html:not([data-theme="dark"]) .dc-composer input[type="text"],
html:not([data-theme="dark"]) .dc-composer input[type="url"],
html:not([data-theme="dark"]) .dc-composer input[type="search"],
html:not([data-theme="dark"]) .dc-composer textarea,
html:not([data-theme="dark"]) .dc-composer select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 44px;
  font-size: 14px;
  line-height: 20px;
  color: #0f172a;
  box-sizing: border-box;
}
html:not([data-theme="dark"]) .dc-composer input:focus,
html:not([data-theme="dark"]) .dc-composer textarea:focus,
html:not([data-theme="dark"]) .dc-composer select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px #0f766e;
  outline: none;
}
html:not([data-theme="dark"]) .dc-composer .dc-sr-label,
html:not([data-theme="dark"]) .dc-composer label {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
html:not([data-theme="dark"]) .dc-social2-composer-action {
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #0f766e;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
html:not([data-theme="dark"]) .dc-social2-composer-action:hover {
  background: #f0fdfa;
}
/* Feed filter + pre-render mounts inside the feed read as cards too. */
html:not([data-theme="dark"]) #view-feed .mount {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) #view-feed .mount .mount-label {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}
html:not([data-theme="dark"]) #view-feed .mount .empty,
html:not([data-theme="dark"]) #view-feed .mount .form-note {
  color: #64748b;
  font-size: 14px;
  line-height: 20px;
}
html:not([data-theme="dark"]) #view-feed .mount input[type="text"],
html:not([data-theme="dark"]) #view-feed .mount input[type="search"],
html:not([data-theme="dark"]) #view-feed .mount input[type="email"],
html:not([data-theme="dark"]) #view-feed .mount input[type="password"],
html:not([data-theme="dark"]) #view-feed .mount textarea,
html:not([data-theme="dark"]) #view-feed .mount select {
  border-radius: 8px;
  border-color: #cbd5e1;
  min-height: 44px;
}
html:not([data-theme="dark"]) #feed-list > .empty {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  color: #64748b;
}

/* ---------- Story / sprint strip (EXISTING strip only) ---------- */
html:not([data-theme="dark"]) .dc-stories {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px 20px 16px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) .dc-stories > h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #0f172a;
  margin: 0 0 16px;
}
html:not([data-theme="dark"]) #stories-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}
html:not([data-theme="dark"]) .dc-story-item.dc-social2-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  min-height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
html:not([data-theme="dark"]) .dc-social2-story-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  border: 2px solid var(--story-ring, #0f766e);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
html:not([data-theme="dark"]) .dc-social2-story-ring .dc-avatar {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}
html:not([data-theme="dark"]) .dc-social2-story--viewed .dc-social2-story-ring {
  border-color: #cbd5e1;
}
html:not([data-theme="dark"]) .dc-social2-story-ring--create {
  border-color: #0f766e;
  border-style: solid;
  color: #0f766e;
}
html:not([data-theme="dark"]) .dc-social2-story-plus {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: #0f766e;
}
html:not([data-theme="dark"]) .dc-story-name {
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not([data-theme="dark"]) .dc-story-new {
  color: #0f766e;
  font-size: 11px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .dc-story-form input[type="text"],
html:not([data-theme="dark"]) .dc-story-form input[type="url"],
html:not([data-theme="dark"]) .dc-story-form textarea {
  border-radius: 8px;
  border-color: #cbd5e1;
  min-height: 44px;
}
html:not([data-theme="dark"]) .dc-story-form label,
html:not([data-theme="dark"]) .dc-story-form legend {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}
html:not([data-theme="dark"]) .dc-char-count { color: #64748b; }

/* ---------- Dialogs rendered inside the shell (Level-3 + slate scrim) ---------- */
html:not([data-theme="dark"]) .ds-palette-box,
html:not([data-theme="dark"]) .oa-lightbox {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 10px 10px -5px rgba(0, 0, 0, 0.03);
}
html:not([data-theme="dark"]) .ds-palette-box input {
  border-radius: 8px;
  border-color: #cbd5e1;
  min-height: 44px;
}
/* Story viewer keeps its story colour; only its chrome is normalised. */
html:not([data-theme="dark"]) .dc-story-viewer.dc-social2-story-viewer {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 10px 10px -5px rgba(0, 0, 0, 0.03);
}

/* ---------- Feed overrides at bundle specificity ----------
   The bundled social2 feed rules are written as #view-feed
   .dc-social2-post ... (id specificity), so the plain-class rules
   above lose to them. These #view-feed-prefixed rules carry higher
   specificity and are what actually restyles rendered feed posts. */
html:not([data-theme="dark"]) #view-feed .dc-post-card.dc-social2-post {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 24px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) #view-feed .dc-post-card.dc-social2-post:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  border-color: #cbd5e1;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post-head .dc-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post-meta .dc-author-link {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post-meta .dc-handle,
html:not([data-theme="dark"]) #view-feed .dc-social2-post-meta .dc-time,
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-time {
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-post-body {
  font-size: 14px;
  line-height: 20px;
  color: #0f172a;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-post-body p {
  margin: 0 0 12px;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-post-tags {
  gap: 8px;
  margin: 12px 0;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-tag {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-tag:hover {
  background: #e2e8f0;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-code-block {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  color: #0f172a;
  overflow-x: auto;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-post .dc-code-block code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  color: #0f172a;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-actions {
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-actions .dc-action-btn {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-actions .dc-action-btn:hover {
  background: #f0fdfa;
  color: #0f766e;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-actions .dc-action-btn.is-active {
  background: #f0fdfa;
  color: #0f766e;
  border-color: #ccfbf1;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-follow-btn {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-follow-btn:hover {
  background: #e2e8f0;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-follow-btn.is-active {
  background: #f0fdfa;
  color: #0f766e;
  border-color: #ccfbf1;
}
/* Composer card itself (bundle: #view-feed .dc-social2-composer, 12px). */
html:not([data-theme="dark"]) #view-feed .dc-social2-composer {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 24px;
  margin-bottom: 16px;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-composer textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 44px;
  font-size: 14px;
  line-height: 20px;
  color: #0f172a;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-composer textarea:focus {
  background: #ffffff;
  border-color: #0f766e;
  box-shadow: 0 0 0 2px #0f766e;
  outline: none;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-composer input,
html:not([data-theme="dark"]) #view-feed .dc-social2-composer select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  min-height: 44px;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-composer-action {
  color: #0f766e;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
}
html:not([data-theme="dark"]) #view-feed .dc-social2-composer-action:hover {
  background: #f0fdfa;
  color: #0f766e;
}
/* Stories strip inner element: the .dc-stories section above is already
   the card, so the strip itself stays flat (no double card). */
html:not([data-theme="dark"]) #view-feed .dc-social2-strip {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Desktop 1280px+: 3 columns ---------- */
@media (min-width: 1280px) {
  html:not([data-theme="dark"]) .layout.social2-layout {
    grid-template-columns: 260px minmax(0, 640px) 340px;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    /* 260 + 640 + 340 + 2×24 gaps + 2×24 padding = 1336: without this
       the bundle's 1240px content cap squeezes the centre to ~564px. */
    max-width: 1336px;
  }
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav {
    position: sticky;
    top: 88px;
    align-self: start;
  }
  html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar {
    position: sticky;
    top: 88px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  html:not([data-theme="dark"]) .social2-main {
    min-width: 0;
    max-width: 640px;
    width: 100%;
  }
  html:not([data-theme="dark"]) .feed-layout { max-width: 640px; }
}

/* ---------- Tablet 768–1279px: right rail collapses, 72px icon dock ---------- */
@media (min-width: 768px) and (max-width: 1279px) {
  html:not([data-theme="dark"]) .layout.social2-layout {
    grid-template-columns: 72px minmax(0, 720px);
    justify-content: center;
    gap: 24px;
    padding: 24px 16px;
  }
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    position: sticky;
    top: 88px;
    align-self: start;
  }
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn,
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav .social2-more summary {
    justify-content: center;
    padding: 10px 0;
  }
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn span:not(.badge),
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav .social2-more summary span {
    display: none;
  }
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav .nav-btn .badge {
    margin-left: 0;
  }
  html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar { display: none; }
  html:not([data-theme="dark"]) .social2-main {
    min-width: 0;
    max-width: 720px;
    width: 100%;
  }
  html:not([data-theme="dark"]) .feed-layout { max-width: 720px; }
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav { display: none; }
}

/* ---------- Mobile <768px: 56px top bar, full-width feed, 64px tab bar ---------- */
@media (max-width: 767px) {
  html:not([data-theme="dark"]) .dc-topbar-inner.social2-topbar-inner {
    min-height: 56px;
    padding: 8px 16px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  html:not([data-theme="dark"]) .dc-topbar .wordmark-logo { height: 28px; }
  html:not([data-theme="dark"]) .dc-search.social2-search {
    order: 0;
    flex: 1 1 120px;
    min-width: 0;
    max-width: none;
  }
  html:not([data-theme="dark"]) .dc-search.social2-search input {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
  }
  html:not([data-theme="dark"]) #current-user-display { display: none; }
  html:not([data-theme="dark"]) .layout.social2-layout {
    padding: 16px 16px 96px;
    gap: 16px;
  }
  html:not([data-theme="dark"]) .feed-layout { max-width: none; }
  html:not([data-theme="dark"]) .dc-post-card,
  html:not([data-theme="dark"]) .dc-post-card.dc-social2-post,
  html:not([data-theme="dark"]) .dc-composer,
  html:not([data-theme="dark"]) .dc-stories {
    padding: 20px;
  }
  html:not([data-theme="dark"]) #view-feed .dc-post-card.dc-social2-post {
    padding: 20px;
  }
  html:not([data-theme="dark"]) #view-feed .dc-social2-post-head .dc-avatar,
  html:not([data-theme="dark"]) #view-feed .dc-social2-composer-row .dc-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  html:not([data-theme="dark"]) .dc-nav.social2-left-nav { display: none; }
  html:not([data-theme="dark"]) .dc-sidebar.social2-sidebar { display: none; }
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    min-height: 64px;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
  }
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav .nav-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
  }
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav .nav-btn.is-active,
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav .nav-btn[aria-current="page"] {
    color: #0f766e;
  }
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav .nav-btn.is-active::after,
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav .nav-btn[aria-current="page"]::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0f766e;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
  }
  html:not([data-theme="dark"]) .dc-bottom-nav.social2-bottom-nav .nav-icon {
    width: 24px;
    height: 24px;
  }
  html:not([data-theme="dark"]) main.social2-main { padding-bottom: 88px; }
}

/* ==========================================================================
   LANE 1 (symmetry + side spaces) — wide screens 1440px and up.
   Diagnosis (measured 2026-10-31, localhost, signed-in): the desktop grid
   was capped at 1220px of columns (240 + 640 + 340, gap 0), so at 1440px
   it sat centred with 110px of dead canvas on each side, and at 1920px
   with 350px on each side. The grid was centred but too narrow.
   Fix: from 1440px up, rails grow to their baseline maximums
   (left 280px, right 360px), a real 24px gap opens between columns, and
   the centre grows with the viewport up to 760px (modestly past 640px).
   Total grid caps at 1512px (280 + 24 + 760 + 24 + 360 + 2x32 padding):
   at 1440px the centre is 688px with 32px outer gutters; at 1920px the
   grid is 1512px with balanced 204px gutters (was 350px). Below 1440px
   nothing changes: 1280 keeps the baseline 240/640/340 grid, the 768px
   72px icon dock and the 390px 64px tab bar are untouched.
   Specificity note: restyle.css loads AFTER this sheet, so these rules
   carry an extra body.social2-shell qualifier to beat its
   body.social2-shell .layout.social2-layout rule (0,2,1) without
   touching restyle.css. No accent, colour, or feature change here.
   ========================================================================== */
@media (min-width: 1440px) {
  html:not([data-theme="dark"]) 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;
  }
  html:not([data-theme="dark"]) body.social2-shell .social2-main {
    max-width: 760px;
    width: 100%;
  }
  html:not([data-theme="dark"]) .feed-layout {
    max-width: 760px;
  }
}