/* koddeit CSS bundle (Lane C, SEO-max). Concatenation of the 27 stylesheets in their EXACT index.html order. Original files kept untouched; revert = restore the 27 <link> tags. */

/* ===== bundle segment: assets/css/main.css ===== */
/* koddeit design shell — main.css (shell lane)
 * FROZEN TOKENS ONLY (DESIGN_TOKENS.md v2): solid colours, no gradients,
 * no purple/indigo, no gradient text. Inter/system-ui for UI,
 * JetBrains Mono/ui-monospace ONLY for code (blocks, snippets, code posts).
 * Sentence case everywhere. Focus visible, reduced motion respected. */

/* ---------- Frozen tokens ---------- */
:root {
  --paper: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --muted-light: #94a3b8;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #0f766e;
  --accent-dark: #0b5e57;
  --accent-soft: #e6f4f1;
  --accent-border: #99d5cd;
  --live: #dc2626;
  --danger: #b42318;
  --warn-bg: #fef3c7;
  --warn-ink: #92400e;

  /* Aliases for the pre-token names spaces.css and older lane markup
     used; every alias maps to a frozen token above, no new colour. */
  --teal: var(--accent);
  --teal-dark: var(--accent-dark);
  --teal-soft: var(--accent-soft);
  --teal-border: var(--accent-border);
  --surface-alt: var(--surface-2);
  --focus-ring: var(--accent);

  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  --shadow-md: 0 4px 12px rgb(15 23 42 / .08);

  --content-max: 1240px;
  --nav-width: 232px;
  --centre-max: 640px;
  --sidebar-width: 320px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono { font-family: var(--font-mono); }

/* ---------- Top bar: 56px, sticky, white, 1px line ---------- */
.dc-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.dc-topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 56px;
  padding: 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.wordmark-logo {
  display: block;
  height: 32px;
  width: auto;
}

.dc-search { flex: 1 1 220px; min-width: 0; max-width: 520px; margin: 0 auto; }
.dc-search input {
  width: 100%;
  padding: 8px var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.dc-search input::placeholder { color: var(--muted-light); }

.dc-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

/* Badges are hidden by their lanes when the count is zero (they set
   hidden + empty text); author display would otherwise override the
   UA [hidden] rule and leave an empty dot. */
.badge[hidden] { display: none; }

.btn {
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px var(--space-3);
  font-weight: 600;
}
.btn:hover { border-color: var(--ink); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }

#current-user-display {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Topbar avatar button: a plain button around the avatar circle. */
.dc-avatar-btn {
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  line-height: 0;
}

/* Notifications dropdown (native <details>, no JS required). */
.notif { position: relative; }
.notif summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  padding: 8px var(--space-2);
}
.notif summary::-webkit-details-marker { display: none; }
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  width: min(340px, 86vw);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  z-index: 30;
}
.notif-panel h2 { margin: 0 0 var(--space-2); font-size: 17px; }

/* ---------- Demo banner ---------- */
#demo-banner {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
}
#demo-banner .banner-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  font-size: 14px;
}
#demo-banner strong { color: var(--accent-dark); }
#demo-banner code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* ---------- Layout: nav + main + sidebar ---------- */
.layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

main { min-width: 0; }

/* Left nav */
.dc-nav { display: none; }
.nav-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.dc-nav .nav-btn {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 9px var(--space-3);
  font-weight: 600;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.dc-nav .nav-btn:hover { background: var(--surface-2); border-color: var(--line); }
.dc-nav .nav-btn.is-active,
.dc-nav .nav-btn[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent-border);
}
.dc-nav .nav-btn.is-active .badge { background: var(--accent); color: #fff; }
.nav-note {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--muted);
}
.nav-note p { margin: 0 0 var(--space-2); }
.nav-note p:last-child { margin-bottom: 0; }
.nav-signin { margin-top: var(--space-3); width: 100%; text-align: center; }

/* Bottom nav: mobile only (shown below 768px). No IDs inside it —
   app.js toggles every [data-nav] button, so duplicates are fine. */
.dc-bottom-nav { display: none; }

/* Right sidebar */
.dc-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.dc-sidebar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.dc-sidebar-title {
  margin: 0 0 var(--space-3);
  font-size: 17px;
  line-height: 1.3;
}
.dc-sidebar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.dc-sidebar-row + .dc-sidebar-row { border-top: 1px solid var(--line); }
.dc-sidebar-row--stack { flex-wrap: wrap; }
.dc-sidebar-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.dc-sidebar-name {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.dc-sidebar-name:hover { color: var(--accent-dark); text-decoration: underline; }
.dc-sidebar-project-title { flex: 1 1 100%; }
.dc-sidebar-handle, .dc-sidebar-meta {
  font-size: 13px;
  color: var(--muted);
}
.dc-sidebar-meta { flex: 1 1 100%; }
.dc-sidebar-follow { flex: 0 0 auto; margin-left: auto; }
.dc-sidebar-empty { margin: 0 0 var(--space-3); color: var(--muted); font-size: 14px; }
.dc-sidebar-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dc-sidebar-tag { cursor: pointer; }
.dc-sidebar-tag-count { font-weight: 400; color: var(--muted); }
.dc-sidebar-live-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 100%;
}
.dc-live-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--live);
  flex: 0 0 auto;
}

/* Avatars (frozen component): pill, 3px ring in --ring, initials on surface-2. */
.dc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 3px solid var(--ring, var(--line-strong));
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
}
.dc-avatar--sm { width: 32px; height: 32px; font-size: 13px; border-width: 2px; }
.dc-avatar--lg { width: 72px; height: 72px; font-size: 24px; }

/* ---------- Views ---------- */
.view { display: none; min-width: 0; }
.view.is-active { display: block; }

.view-head {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.view-head h1 { margin: 0 0 var(--space-2); font-size: 24px; line-height: 1.2; }
.view-head h2 { margin: 0 0 var(--space-2); font-size: 20px; line-height: 1.25; }
.view-head p { margin: 0; color: var(--muted); max-width: 62ch; }
.dc-auth-logo { display: block; height: 40px; width: auto; margin-bottom: var(--space-4); color: var(--ink); }

/* Generic mount-point placeholders (replaced by other lanes). */
.empty {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
}
.form-note {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
}
.mount {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  min-height: 120px;
}
.mount + .mount { margin-top: var(--space-4); }
.mount-label {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--muted);
}

/* Feed: single-column stream. */
.feed-layout { max-width: var(--centre-max); }
#feed-filter { margin-bottom: var(--space-4); }
#feed-list { display: flex; flex-direction: column; gap: var(--space-4); }

/* Projects grid. */
#project-filters { margin-bottom: var(--space-4); }
#project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* Project detail: article + meta. */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.detail-meta {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  font-size: 14px;
}
.detail-meta dt { font-weight: 700; margin-top: var(--space-3); }
.detail-meta dt:first-child { margin-top: 0; }
.detail-meta dd { margin: 0; color: var(--muted); font-size: 13px; }

/* Messages: two panes (stacked on small screens). */
.messages-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Investors: row list. */
#investor-filters { margin-bottom: var(--space-4); }
#investor-list { display: flex; flex-direction: column; gap: 0; }

/* Profile: header block + columns on wider screens. */
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* Auth: narrow, centred panel. */
.auth-layout { max-width: 480px; margin: 0 auto; }
.auth-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

/* ---------- Footer ---------- */
.dc-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.dc-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--muted);
  font-size: 14px;
}
.dc-footer-inner p { margin: 0; }
.dc-footer-inner code { font-family: var(--font-mono); font-size: 13px; }
.dc-footer-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.dc-footer-mark { display: block; width: 24px; height: 24px; }

/* ---------- Composer shell (frozen component) ---------- */
.dc-composer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}
.dc-composer-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.dc-char-count { font-size: 13px; color: var(--muted); }

/* ---------- Lane-rendered markup (same tokens, no new palette) ---------- */
.mount form, .mount label { display: block; }
.mount input[type="text"], .mount input[type="search"], .mount input[type="email"],
.mount input[type="password"], .mount textarea, .mount select {
  width: 100%; padding: 8px 10px; margin: 4px 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; box-sizing: border-box;
}
.mount button, .dc-post button, .dc-project-card button, .dc-conversation,
#investor-list button, #profile-view button, #auth-form button {
  cursor: pointer; padding: 6px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.mount button:hover, .dc-post button:hover, .dc-project-card button:hover,
#investor-list button:hover, #profile-view button:hover, #auth-form button:hover { border-color: var(--ink); }
.dc-post-card, .dc-post, .dc-project-card, .dc-notification, #investor-list > article, #investor-list > div {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm);
}
.dc-post-head, .dc-post-header { font-size: 15px; margin-bottom: 8px; }
.dc-post-body { margin: 0 0 var(--space-3); }
.dc-post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.dc-post-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dc-action-btn.is-active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-dark); }
.dc-comment { border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-3); }
.dc-comment--reply { margin-left: var(--space-5); }
.dc-handle, .dc-author-link { }
.dc-tag, .dc-category, .dc-status, .dc-testing-badge, .dc-tech-tag {
  display: inline-block; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 8px; margin-right: 4px;
}
.dc-testing-badge { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-dark); }
.dc-project-card h3 { margin: 0 0 4px; font-size: 17px; }
.dc-project-open { border: none !important; background: none !important; padding: 0 !important; font-weight: 700; color: var(--accent-dark); text-align: left; }
.dc-project-open:hover { text-decoration: underline; }
.dc-cover {
  height: 96px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: #fff;
}
.dc-project-body { padding-top: var(--space-3); }
.dc-conversation { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
.dc-conversation--active, .dc-conv-item.is-active { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.dc-conv-item.is-unread { font-weight: 700; }
.dc-message { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 8px; max-width: 85%; }
.dc-message--own { margin-left: auto; background: var(--accent-soft); }
.dc-profile-header { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.dc-cover-band { background: var(--accent-soft); border-bottom: 2px solid var(--accent); border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-height: 48px; }
.dc-stat { display: inline-block; margin-right: var(--space-5); }
.dc-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.dc-tab { cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-weight: 600; }
.dc-tab.is-active { border-bottom-color: var(--accent); color: var(--accent-dark); }
.dc-empty, .empty { color: var(--muted); }
#notification-list { list-style: none; margin: 0; padding: 0; }
#notification-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---------- 320px: smallest phones — tighten padding, no overflow ---------- */
@media (max-width: 320px) {
  .dc-topbar-inner { padding: 0 var(--space-2); gap: var(--space-2); }
  .layout { padding: var(--space-4) var(--space-2) var(--space-6); }
  .wordmark-logo { height: 28px; }
  #current-user-display { display: none; }
}
/* Narrowest phones: six bottom-nav labels do not fit side by side at
   320px, so show icons only there (each button keeps its aria-label). */
@media (max-width: 360px) {
  .dc-bottom-nav .nav-btn span { display: none; }
}

/* ---------- Mobile: topbar wraps, bottom nav fixed ---------- */
@media (max-width: 767px) {
  .dc-topbar-inner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .dc-search { order: 3; flex: 1 1 100%; max-width: none; }
  .dc-nav { display: none; }
  main { padding-bottom: 88px; }
  .dc-bottom-nav > .nav-btn span { display: none; }
  .dc-bottom-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: var(--space-2) var(--space-1);
  }
  .dc-bottom-nav .nav-btn {
    cursor: pointer;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  .dc-bottom-nav .nav-btn.is-active,
  .dc-bottom-nav .nav-btn[aria-current="page"] { color: var(--accent-dark); }
  .dc-bottom-nav .nav-icon { width: 20px; height: 20px; }
  .dc-footer { padding-bottom: 88px; }
}

/* ---------- 768px: breathing room; nav row, sidebar below main ---------- */
@media (min-width: 768px) {
  .dc-topbar-inner { padding: 0 var(--space-5); }
  .layout { padding: var(--space-6) var(--space-5) var(--space-7); gap: var(--space-5); }
  .dc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    grid-column: 1 / -1;
  }
  .dc-nav .nav-btn .badge { margin-left: auto; }
  .nav-note { display: none; }
  .nav-signin { margin-top: 0; width: auto; }
  .dc-bottom-nav { display: none; }
  #project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .profile-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .messages-layout { grid-template-columns: 280px minmax(0, 1fr); }
}

/* ---------- 1024px: left nav column, centre, right sidebar ---------- */
@media (min-width: 1024px) {
  .layout { grid-template-columns: var(--nav-width) minmax(0, var(--centre-max)) var(--sidebar-width); justify-content: center; }
  .dc-nav {
    position: sticky;
    top: 72px;
    display: block;
    grid-column: auto;
  }
  .dc-nav .nav-btn { display: flex; width: 100%; }
  .nav-note { display: block; }
  .nav-signin { margin-top: var(--space-3); width: 100%; }
  .dc-sidebar {
    position: sticky;
    top: 72px;
  }
}

/* ---------- 1440px: wider gutters, centred cap ---------- */
@media (min-width: 1440px) {
  .layout { padding-left: var(--space-6); padding-right: var(--space-6); }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Redesign lane snippets appended at merge (feed, projects-profiles, messages-spaces-investors) === */
/* koddeit redesign — LANE B (Feed) snippet.
 * For the coordinator: append this whole file to main.css.
 * Frozen tokens only: solid colours, no gradients, no purple/indigo.
 * Inter/system-ui for UI; JetBrains Mono only for code. */

.dc-composer {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgb(15 23 42 / .08);
  padding: 16px;
  margin-bottom: 24px;
}
.dc-composer-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dc-composer-row textarea {
  flex: 1;
  min-height: 72px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 12px;
  font: inherit;
  background: #ffffff;
  color: #0f172a;
}
.dc-composer-foot { align-items: center; margin-top: 12px; flex-wrap: wrap; }
.dc-composer-foot select {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px;
  font: inherit;
  background: #ffffff;
  color: #0f172a;
}
.dc-composer-foot .btn { margin-left: auto; }
.dc-composer-foot .btn:disabled { opacity: .5; cursor: not-allowed; }
.dc-char-count { font-size: 13px; color: #64748b; margin: 0; }
.dc-char-count.is-over { color: #b42318; font-weight: 700; }
.dc-form-error { color: #b42318; font-size: 14px; margin: 12px 0 0; }
.dc-sr-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.dc-tag-picker {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 12px 0 0 60px;
}
.dc-tag-picker-label { font-size: 14px; color: #334155; }
.dc-tag-pick {
  border: 1px solid #cbd5e1; background: #ffffff; color: #334155;
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  font-size: 13px;
}
.dc-tag-pick.is-active {
  background: #e6f4f1; border-color: #99d5cd; color: #0b5e57; font-weight: 700;
}
.dc-tag-picker input {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px;
  font: inherit; background: #ffffff; min-width: 220px;
}

.dc-avatar {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ring, #cbd5e1); color: #ffffff;
  font-weight: 700; font-size: 15px;
  border: 3px solid var(--ring, #cbd5e1);
}
.dc-avatar--sm { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; border-width: 2px; }
.dc-post-head a { text-decoration: none; }

.dc-post-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  padding: 16px; margin-bottom: 16px;
}
.dc-post-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.dc-post-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-author-link { color: #0f172a; font-weight: 700; text-decoration: none; }
.dc-handle, .dc-time {
  font-size: 13px; color: #64748b;
}
.dc-post-body {
  font-size: 15px; line-height: 1.55; color: #0f172a;
  max-width: 68ch; margin: 0 0 12px;
  overflow-wrap: break-word;
}
.dc-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dc-tag {
  border: 1px solid #cbd5e1; background: #f7f8fa; color: #334155;
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  font-size: 13px;
}
.dc-post-project { font-size: 14px; color: #334155; margin: 0 0 12px; }
.dc-post-project a { color: #0f766e; font-weight: 700; }
.dc-post-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dc-action-btn {
  border: 1px solid #e2e8f0; background: #ffffff; color: #334155;
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font: inherit; font-size: 14px;
}
.dc-action-btn.is-active {
  background: #e6f4f1; border-color: #99d5cd; color: #0b5e57; font-weight: 700;
}
.dc-action-btn[aria-pressed="true"] { font-weight: 700; }
.dc-share-fallback { font-size: 14px; color: #334155; }
.dc-share-fallback input {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px;
  width: min(420px, 100%);
  font-size: 13px;
}

.dc-comment-thread { margin-top: 16px; }
.dc-comments-toggle {
  background: transparent; border: 0; color: #0f766e; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; padding: 4px 0; margin-bottom: 8px;
}
.dc-comment-list { list-style: none; margin: 0; padding: 0; }
.dc-comment {
  display: flex; gap: 12px; align-items: flex-start;
  margin-left: 24px; padding-left: 12px;
  border-left: 2px solid #e2e8f0; margin-bottom: 12px;
}
.dc-comment--reply { margin-left: 48px; }
.dc-comment-main { min-width: 0; }
.dc-comment-main p { font-size: 14px; line-height: 1.55; margin: 4px 0 8px; overflow-wrap: break-word; }
.dc-comment-author { font-weight: 700; font-size: 14px; }
.dc-comment-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dc-comment-form label { flex-basis: 100%; font-size: 14px; color: #334155; }
.dc-comment-form input {
  flex: 1; min-width: 200px; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 8px; font: inherit;
}

.dc-tag-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.dc-tag-filter button {
  border: 1px solid #cbd5e1; background: #ffffff; color: #334155;
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  font-size: 13px;
}
.dc-tag-filter button[aria-pressed="true"] {
  background: #e6f4f1; border-color: #99d5cd; color: #0b5e57; font-weight: 700;
}
#feed-filter button.dc-filter-active { font-weight: 700; color: #0b5e57; }
.dc-empty {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px; text-align: left;
}
.dc-empty p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.dc-feed-status { font-size: 14px; color: #334155; margin-bottom: 12px; }
.dc-signin-prompt { font-size: 14px; color: #334155; }
.dc-signin-prompt p { margin: 0 0 8px; }

:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dc-composer, .dc-post-card, .dc-action-btn, .dc-tag, .dc-tag-pick { transition: none; animation: none; }
}

/* koddeit redesign — Lane C snippet: Projects + Profiles.
   APPEND to main.css by the coordinator. Tokens only: solid colours,
   no gradients, no purple/indigo. Inter for UI, JetBrains Mono only
   for code. Sentence case in all copy. */

/* ---- Shared: avatars, handles, tags, action buttons ---- */
.dc-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px; flex: none;
  background: #f7f8fa; color: #0f172a; font-weight: 700; font-size: 17px;
  border: 3px solid var(--ring, #57534e);
}
.dc-avatar--sm { width: 32px; height: 32px; font-size: 13px; border-width: 2px; }
.dc-avatar--lg { width: 72px; height: 72px; font-size: 24px; }
.dc-handle {
  font-size: 13px; color: #64748b;
}
.dc-tech-tag {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #f7f8fa; border: 1px solid #e2e8f0; color: #334155;
  font-size: 12px;
}
.dc-action-btn {
  padding: 8px 16px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #ffffff; color: #0f172a; font-weight: 600; cursor: pointer;
}
.dc-action-btn.is-active {
  background: #e6f4f1; border-color: #99d5cd; color: #0b5e57;
}
.dc-action-btn:focus-visible, .dc-tab:focus-visible,
.dc-owner-link:focus-visible, .dc-project-open:focus-visible {
  outline: 3px solid #0f766e; outline-offset: 2px;
}
.dc-category, .dc-status {
  font-size: 13px; color: #334155;
}
.dc-testing-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 600;
}
.dc-project-meta { color: #64748b; font-size: 14px; }
.dc-project-links a { color: #0f766e; }
.dc-owner-link, .dc-project-open {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: #0f766e; font-weight: 700; text-align: left;
}
.dc-owner-link:hover, .dc-project-open:hover { text-decoration: underline; }
.dc-project-owner { display: flex; align-items: center; gap: 8px; }
.dc-project-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- Project cards + filters + form ---- */
.dc-project-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06); overflow: hidden; margin-bottom: 16px;
}
.dc-cover {
  height: 96px; display: flex; align-items: center; justify-content: center;
}
.dc-cover-letter { color: #ffffff; font-size: 40px; font-weight: 700; }
.dc-project-body { padding: 16px; }
.dc-project-body h3 { margin: 0 0 8px; font-size: 17px; }
.dc-project-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
#project-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
#project-filters label { font-size: 14px; color: #334155; }
#project-form fieldset, #profile-form fieldset {
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin: 0 0 16px;
}
#project-form legend, #profile-form legend { font-weight: 700; padding: 0 8px; }
#project-form label, #profile-form label { display: block; margin-bottom: 12px; font-size: 14px; }
#project-form input[type="text"], #project-form input[type="url"],
#project-form textarea, #project-form select,
#profile-form input[type="text"], #profile-form textarea, #profile-form select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 12px;
  border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; background: #ffffff;
}

/* ---- Project detail ---- */
.dc-owner-card {
  background: #f7f8fa; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px;
}
.dc-owner-card p { display: flex; align-items: center; gap: 8px; }
.dc-testing {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px;
}
.dc-related-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06); padding: 16px; margin-bottom: 12px;
}

/* ---- Profile header, stats, tabs, portfolio ---- */
.dc-profile-header {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06); overflow: hidden; padding: 0 0 16px;
}
.dc-profile-header > *:not(.dc-cover-band) { margin-left: 16px; margin-right: 16px; }
.dc-cover-band { height: 96px; background: #e6f4f1; border-bottom: 3px solid #0f766e; margin: 0 !important; }
.dc-profile-head-main { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; }
.dc-profile-head-main .dc-avatar { background: var(--ring, #cbd5e1); color: #ffffff; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #e2e8f0; }
.dc-profile-head-text h2 { margin: 0 0 4px; font-size: 24px; }
.dc-profile-head-text p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.dc-role-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #e6f4f1; border: 1px solid #99d5cd; color: #0b5e57;
  font-size: 12px; font-weight: 600;
}
.dc-stats { display: flex; gap: 24px; flex-wrap: wrap; margin: 16px 0; }
.dc-stat { display: flex; flex-direction: column; }
.dc-stat strong { font-size: 20px; }
.dc-stat span { font-size: 13px; color: #64748b; }
.dc-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-tabs { display: flex; gap: 8px; border-bottom: 1px solid #e2e8f0; margin: 16px 0 0; }
.dc-tab {
  border: none; border-bottom: 3px solid transparent; background: none;
  padding: 8px 16px; cursor: pointer; font: inherit; font-weight: 600; color: #64748b;
}
.dc-tab.is-active { color: #0f766e; border-bottom-color: #0f766e; }
.dc-tab-panel { padding: 16px 0; }
.dc-tab-list { list-style: none; padding: 0; margin: 0; }
.dc-tab-list li { padding: 12px 0; border-bottom: 1px solid #e2e8f0; font-size: 15px; line-height: 1.55; }
.dc-portfolio-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.dc-portfolio-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; background: #f7f8fa; }
.dc-portfolio-card a { display: flex; flex-direction: column; gap: 4px; color: #0f766e; text-decoration: none; }
.dc-portfolio-card a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .dc-action-btn, .dc-tab, .dc-owner-link, .dc-project-open { transition: none !important; }
}

/* koddeit redesign — Lane D snippet (Messages + Spaces + Investors).
 * Appended to main.css by the coordinator. Solid colours only, no
 * gradients, no purple/indigo. Accent #0f766e for primary actions only;
 * live red #dc2626 for the Live badge dot/text only, never a wash.
 * Inter/system-ui for UI, JetBrains Mono for code. */

/* ---------- Avatars ---------- */
.dc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 3px solid var(--ring, #0f766e);
  background: #f7f8fa;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}
.dc-avatar--sm { width: 32px; height: 32px; font-size: 12px; border-width: 2px; }
.dc-avatar--lg { width: 72px; height: 72px; font-size: 24px; }

/* ---------- Conversation list ---------- */
.dc-conv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  cursor: pointer;
}
.dc-conv-item.is-active { border-color: #0f766e; background: #e6f4f1; }
.dc-conv-text { flex: 1 1 auto; min-width: 0; }
.dc-conv-name { font-size: 15px; font-weight: 600; color: #0f172a; }
.dc-conv-item.is-unread .dc-conv-name { font-weight: 800; }
.dc-conv-handle {
  font-size: 13px;
  color: #64748b;
}
.dc-conv-preview {
  display: block;
  font-size: 14px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-conv-item.is-unread .dc-conv-preview { font-weight: 600; color: #0f172a; }
.dc-conv-time {
  display: block;
  font-size: 12px;
  color: #64748b;
}
.dc-unread-count {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* ---------- Message bubbles ---------- */
.dc-message { display: flex; align-items: flex-start; gap: 8px; max-width: 85%; }
.dc-message--own { margin-left: auto; flex-direction: row-reverse; }
.dc-message--own .dc-message__text { background: #e6f4f1; border: 1px solid #99d5cd; border-radius: 12px; padding: 8px 12px; }
.dc-message--other .dc-message__text { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; }
.dc-message__meta { margin: 0 0 4px; }
.dc-message__sender { font-size: 14px; font-weight: 600; color: #0f172a; }
.dc-message__time { font-size: 12px; color: #64748b; }
.dc-message__body { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------- Spaces: live badge (red text/dot only, never a wash) ---------- */
.dc-space-card .dc-space-badge--live,
.dc-space-room .dc-space-badge--live {
  color: #dc2626;
  background: transparent;
  border-color: #e2e8f0;
}
.dc-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: #dc2626;
  vertical-align: middle;
}
.dc-space-note { font-size: 14px; color: #64748b; }
.dc-space-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
}
.dc-space-error { color: #b42318; }

/* ---------- Space room participants (text labels, never colour-only) ---------- */
.dc-room-group { list-style: none; margin: 0 0 16px; padding: 0; }
.dc-room-participant {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}
.dc-room-participant__name { font-size: 15px; font-weight: 600; color: #0f172a; }
.dc-room-role {
  display: inline-block;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #f7f8fa;
}
.dc-space-chat-message {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.dc-space-chat-message__meta { margin: 0 0 4px; font-size: 13px; color: #64748b; }
.dc-space-chat-message__body { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------- Investor cards ---------- */
.dc-investor-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}
.dc-investor-card h3 { margin: 12px 0 0; font-size: 17px; font-weight: 700; }
.investor-handle {
  font-size: 13px;
  color: #64748b;
}
.investor-role { font-size: 14px; font-weight: 600; color: #334155; }
.investor-looks-label { font-weight: 600; color: #0f172a; }
.investor-stage, .investor-focus { font-size: 14px; color: #334155; }
.investor-followed-count { font-size: 14px; color: #334155; }
.investor-skills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; }
.investor-skills li {
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 8px;
  background: #f7f8fa;
  color: #334155;
}
.investor-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.investor-follow-btn[aria-pressed="true"] { border-color: #0f766e; background: #e6f4f1; color: #0b5e57; }

/* ---------- Focus + reduced motion ---------- */
.dc-conv-item:focus-visible,
.dc-message:focus-visible,
.dc-room-participant:focus-visible,
.dc-investor-card:focus-visible,
.dc-investor-card button:focus-visible,
.dc-space-card button:focus-visible,
.dc-space-room button:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dc-conv-item, .dc-message, .dc-room-participant, .dc-investor-card { transition: none !important; }
}

/* === Merged expansion: Feed social (E1) === */
/* koddeit — feed social snippet (expansion-feed lane E1).
 * Coordinator: link this file from index.html after main.css.
 * Tokens only: solid colours, no gradients, no purple/indigo.
 * Inter/system-ui for UI; JetBrains Mono only for code. */

.dc-reaction-btn.is-active {
  background: #e6f4f1;
  border-color: #99d5cd;
  color: #0b5e57;
  font-weight: 700;
}

.dc-hashtag {
}

.dc-mention {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f766e;
  cursor: pointer;
  padding: 2px 8px;
}

.dc-mention:hover {
  border-color: #99d5cd;
  background: #e6f4f1;
}

.dc-repost-embed {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 0 0 12px;
  padding: 12px;
}

.dc-repost-from {
  color: #64748b;
  font-size: 13px;
  margin: 0 0 8px;
}

.dc-repost-from a {
  color: #0f766e;
  font-weight: 700;
  text-decoration: none;
}

.dc-repost-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0;
}

.dc-repost-form input[type="text"] {
  flex: 1 1 220px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
}

.dc-report-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dc-report-row select {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  background: #ffffff;
}

.dc-hidden-note {
  margin: 0 0 16px;
}

.dc-hidden-count {
  color: #334155;
  font-size: 14px;
  margin: 0 0 8px;
}

.dc-muted-list {
  color: #334155;
  font-size: 14px;
  margin: 0 0 8px;
}

.dc-muted-list .dc-handle,
.dc-muted-list span:first-child {
}

.dc-poll {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 0 0 12px;
  padding: 12px;
}

.dc-poll-question {
  font-weight: 700;
  margin: 0 0 8px;
}

.dc-poll-option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  margin: 0 0 8px;
  padding: 8px 12px;
}

.dc-poll-option.is-active {
  background: #e6f4f1;
  border-color: #99d5cd;
  color: #0b5e57;
  font-weight: 700;
}

.dc-poll-option-meta {
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
}

.dc-poll-voted {
  color: #0b5e57;
  font-size: 14px;
  margin: 0 0 8px;
}

.dc-poll-foot {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}

.dc-composer-media,
.dc-composer-poll {
  margin: 12px 0 0;
}

.dc-composer-media input[type="url"],
.dc-poll-composer input[type="text"] {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
}

.dc-poll-composer {
  margin-top: 8px;
}

.dc-poll-composer input[type="text"] {
  margin-bottom: 8px;
}

.dc-poll-options {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dc-post-media {
  margin: 0 0 12px;
}

.dc-post-media img,
.dc-post-media video {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: block;
  max-width: 100%;
}

.dc-media-error {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

.dc-feed-status {
  color: #334155;
  font-size: 14px;
  margin: 0 0 12px;
}

.dc-form-note {
  color: #64748b;
  font-size: 13px;
  margin: 0 0 8px;
}

/* === Merged expansion: Stories/Communities/Explore (E2) === */
/* koddeit — Stories / Communities / Explore snippet (lane E2).
 * Coordinator: link this file after main.css at merge. Tokens only:
 * solid colours, no gradients, no purple/indigo. Inter/system-ui for
 * UI, JetBrains Mono only for code (via code blocks,
 * .dc-tag, .dc-time, which main.css already styles). Sentence case. */
.dc-stories { margin-bottom: 24px; }
.dc-stories h2, .dc-communities h2, .dc-explore h2 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
#stories-strip { display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 12px; }
.dc-story-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--ink); min-width: 72px; }
.dc-story-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dc-story-name { font-size: 13px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-story-new { font-size: 12px; color: var(--live); }
.dc-story-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--line-strong); vertical-align: middle; }
.dc-story-colour { display: inline-block; margin: 0 8px 8px 0; font-size: 14px; }
.dc-story-form, .dc-community-form, .dc-community-post-form { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / .06); padding: 16px; margin: 12px 0; }
.dc-story-form textarea, .dc-community-form input, .dc-community-form textarea, .dc-community-form select, .dc-community-post-form textarea, .dc-community-post-form input { display: block; width: 100%; margin: 8px 0 12px; font: inherit; }
.dc-story-viewer { border-radius: 16px; padding: 20px; color: var(--surface); margin: 12px 0; }
.dc-story-viewer .dc-story-viewer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-story-viewer .dc-story-text { font-size: 17px; }
.dc-story-viewer .dc-story-image { max-width: 100%; border-radius: 12px; }
.dc-story-viewer .btn-ghost { color: var(--surface); border-color: var(--surface); }
.dc-story-views { font-size: 13px; }
.dc-community-card, .dc-explore-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / .06); padding: 16px; margin: 0 0 12px; }
.dc-community-meta, .dc-explore-meta { color: var(--muted); font-size: 14px; }
.dc-community-members { list-style: none; padding: 0; }
.dc-community-members li { margin: 0 0 8px; }
.dc-delete-confirm { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* === Merged expansion: Hashtags/Trending/Lists/Badges (X-A) === */
/* koddeit — X-logics lane X-A snippet (NEW FILE)
 * Tokens from DESIGN_TOKENS.md only: solid colours, no gradients, no
 * purple/indigo. Inter for UI; JetBrains Mono only for code
 * timestamps. Sentence case. Radius: pill 999px for tags/badges only,
 * sm 6px for inputs/buttons, md 12px for cards. */
.dc-x-hashtag-title {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}
.dc-x-handle,
.dc-x-date,
.dc-x-tag,
.dc-x-score {
}
.dc-x-handle {
  color: #64748b;
  font-size: 13px;
}
.dc-x-date {
  color: #94a3b8;
  font-size: 13px;
}
.dc-x-count,
.dc-x-count-line {
  color: #334155;
  font-size: 14px;
}
.dc-x-count-line {
  font-weight: 700;
  margin: 0 0 8px 0;
}
.dc-x-note {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}
.dc-x-meta {
  color: #64748b;
  font-size: 13px;
}
.dc-x-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.dc-x-tag {
  background: #e6f4f1;
  border: 1px solid #99d5cd;
  color: #0b5e57;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
  cursor: pointer;
}
.dc-x-tag:focus-visible,
.dc-x-trend-btn:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}
.dc-x-your-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-x-your-tags-block {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.dc-x-post-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dc-x-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.dc-x-trend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-x-trend-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}
.dc-x-trend-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f766e;
  cursor: pointer;
}
.dc-x-score {
  color: #94a3b8;
  font-size: 12px;
}
.dc-x-list-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dc-x-list-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}
.dc-x-list-card h3 {
  font-size: 17px;
  margin: 0 0 4px 0;
}
.dc-x-list-edit {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}
.dc-x-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-badge-pill {
  display: inline-block;
  background: #e6f4f1;
  border: 1px solid #99d5cd;
  color: #0b5e57;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}
.btn-danger {
  background: #b42318;
  color: #ffffff;
  border: 1px solid #b42318;
}
@media (prefers-reduced-motion: reduce) {
  .dc-x-tag, .dc-x-trend-btn, .dc-badge-pill {
    transition: none;
  }
}

/* === Merged expansion: Drafts/Scheduled/Mute words/Advanced search (X-B) === */
/* koddeit — Drafts / scheduled / mute words / advanced search snippet (lane X-B).
 * FROZEN TOKENS ONLY: solid colours, no gradients, no purple/indigo.
 * Inter/system-ui for UI; JetBrains Mono only for code.
 * Sentence case everywhere. Uses the shell .btn / .btn-primary / .btn-ghost classes. */

.dc-draft-form,
.dc-sched-form,
.dc-mute-form,
.dc-adv-form {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}

.dc-draft-form label,
.dc-sched-form label,
.dc-mute-form label,
.dc-adv-form label {
  font-size: 14px;
  color: #334155;
  margin-top: 4px;
}

.dc-draft-form textarea,
.dc-sched-form textarea,
.dc-draft-form input[type="text"],
.dc-sched-form input[type="text"],
.dc-sched-form input[type="datetime-local"],
.dc-mute-form input[type="text"],
.dc-adv-form input[type="text"],
.dc-adv-form select,
.dc-draft-form select {
  font: inherit;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.dc-adv-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.dc-adv-form-row > div {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-adv-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #334155;
}

.dc-note {
  font-size: 14px;
  color: #334155;
  background: #e6f4f1;
  border: 1px solid #99d5cd;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
}

.dc-form-error {
  font-size: 14px;
  color: #b42318;
  margin: 0;
}

.dc-form-error[hidden] {
  display: none;
}

.dc-draft-item,
.dc-scheduled-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}

.dc-draft-project {
  font-size: 14px;
  color: #334155;
}

.dc-time {
  font-size: 13px;
  color: #64748b;
}

.dc-tag {
  font-size: 13px;
  color: #0f766e;
  background: #e6f4f1;
  border: 1px solid #99d5cd;
  border-radius: 999px;
  padding: 2px 8px;
}

.dc-handle {
  font-size: 13px;
  color: #64748b;
}

.dc-delete-confirm {
  font-size: 14px;
  color: #b42318;
}

.dc-mute-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-mute-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}

.dc-mute-term {
  font-size: 15px;
  color: #0f172a;
}

.dc-mute-kind {
  font-size: 13px;
  color: #64748b;
}

.dc-adv-result {
  margin-bottom: 12px;
}

.dc-adv-author {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}

.dc-adv-author:hover {
  color: #0f766e;
}

.dc-draft-form :focus-visible,
.dc-sched-form :focus-visible,
.dc-mute-form :focus-visible,
.dc-adv-form :focus-visible,
.dc-adv-author:focus-visible,
.dc-mute-item button:focus-visible,
.dc-draft-item button:focus-visible,
.dc-scheduled-item button:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dc-draft-form,
  .dc-sched-form,
  .dc-mute-form,
  .dc-adv-form,
  .dc-draft-item,
  .dc-scheduled-item,
  .dc-mute-item {
    transition: none;
  }
}

/* === Merged expansion: Feed X logics (X-C) === */
/* koddeit — Feed X-C snippet (lane X-C).
 * Coordinator: add <link rel="stylesheet" href="assets/css/feed-x-snippet.css">
 * after main.css in index.html. Solid colours only, frozen tokens from
 * DESIGN_TOKENS.md (solid colours only). Inter for UI text,
 * JetBrains Mono only for code (those
 * classes already exist in main.css and are reused, not redefined). */

/* Feed tabs (For You / Following / Latest) inside #feed-filter. */
.dc-feed-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dc-feed-tabs .dc-tab {
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.dc-feed-tabs .dc-tab.is-active {
  background: #e6f4f1;
  color: #0f766e;
  border-color: #99d5cd;
}
.dc-feed-tabs .dc-tab:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}

/* Guest note above a signed-out For You feed. */
.dc-feed-note {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.dc-feed-note p {
  margin: 0;
  font-size: 14px;
  color: #334155;
}

/* "Why this post?" hint — only on suggested-dev posts in For You. */
.dc-why-hint {
  font-size: 13px;
  color: #64748b;
  margin: 8px 0 0;
}

/* Quote embed: same card treatment as the E1 repost embed. */
.dc-quote-embed {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
}

/* Counts shown as plain text in the actions row. */
.dc-quote-count,
.dc-view-count {
  font-size: 13px;
  color: #64748b;
}

/* Own-post analytics line: real counts only, plain words. */
.dc-analytics {
  font-size: 13px;
  color: #334155;
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 12px 0 0;
}

/* Edited label next to the timestamp. */
.dc-edited-label {
  font-size: 12px;
  color: #64748b;
}

/* Threaded replies: .dc-comment--reply is indented by an inline
 * margin-left set in feed.js (24px per level, capped at 2 levels). */
.dc-comment--reply {
  border-left: 2px solid #e2e8f0;
  padding-left: 12px;
}
.dc-reply-to {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 4px;
}
.dc-reply-form-row {
  list-style: none;
}
.dc-reply-form,
.dc-quote-form,
.dc-edit-form,
.dc-share-space-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.dc-reply-form input[type="text"],
.dc-quote-form input[type="text"],
.dc-share-space-form select {
  flex: 1 1 220px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  background: #ffffff;
}
.dc-edit-form textarea {
  flex: 1 1 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 15px;
  background: #ffffff;
}
.dc-share-space-form p {
  margin: 0;
  font-size: 14px;
  color: #334155;
}

@media (prefers-reduced-motion: reduce) {
  .dc-feed-tabs .dc-tab {
    transition: none;
  }
}

/* Merged expansion: bottom-nav More menu (mobile access to new views) */
.dc-more-nav { position: relative; }
.dc-more-nav > summary { cursor: pointer; padding: 8px 4px; font-size: 12px; list-style: none; }
.dc-more-panel { position: absolute; bottom: 100%; right: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 12px rgb(15 23 42 / .08); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 180px; z-index: 50; }
.dc-more-panel .nav-btn { justify-content: flex-start; }

/* === Merged: expansion-w-content assets/css/easy-content-snippet.css === */
/* koddeit — easy content lane W1 snippet (NEW FILE).
 * Solid colours only, frozen tokens: paper #eef1f4, surface #ffffff,
 * surface-2 #f7f8fa, ink #0f172a, ink-soft #334155, muted #64748b,
 * line #e2e8f0, accent #0f766e, accent-dark #0b5e57,
 * accent-soft #e6f4f1, warn-bg #fef3c7, warn-ink #92400e.
 * No gradients, no purple, no indigo. Inter for UI; JetBrains Mono
 * only for code. Sentence case throughout. */
.dc-content-form label,
#code-content label, #reviews-content label, #qa-content label, #blogs-content label {
  display: block;
  margin: 8px 0;
  font-size: 14px;
  color: #334155;
}
#code-content input[type="text"], #code-content input[type="search"],
#reviews-content input[type="text"], #qa-content input[type="text"],
#qa-content input[type="search"], #blogs-content input[type="text"],
#code-content select, #reviews-content select, #qa-content select,
#code-content textarea, #reviews-content textarea,
#qa-content textarea, #blogs-content textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}
#code-content textarea {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.dc-code-block {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #0f172a;
}
.dc-code-line { display: block; white-space: pre-wrap; }
.dc-code-ln {
  display: inline-block;
  min-width: 24px;
  margin-right: 12px;
  text-align: right;
  color: #94a3b8;
  user-select: none;
}
.dc-code-kw { color: #0f766e; font-weight: 700; }
.dc-code-str { color: #b45309; }
.dc-code-com { color: #64748b; font-style: italic; }
.dc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f4f1;
  color: #0f766e;
  font-size: 12px;
}
.dc-mention {
  background: none;
  border: none;
  padding: 0;
  color: #0f766e;
  cursor: pointer;
  font-size: 13px;
}
.dc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}
.dc-badge-review { background: #fef3c7; color: #92400e; }
.dc-badge-reviewed { background: #e6f4f1; color: #0f766e; }
.dc-badge-accepted { background: #e6f4f1; color: #0b5e57; }
.dc-answer { border-top: 1px solid #e2e8f0; padding-top: 12px; margin-top: 12px; }
.dc-answer--accepted { border-left: 3px solid #0f766e; padding-left: 12px; }
.dc-blog-body { font-size: 15px; line-height: 1.55; color: #0f172a; }
.dc-blog-h { font-size: 17px; margin: 16px 0 8px; }
.dc-meta {
  font-size: 13px;
  color: #64748b;
}
.dc-form-error { color: #b42318; font-size: 14px; }
#code-content :focus-visible, #reviews-content :focus-visible,
#qa-content :focus-visible, #blogs-content :focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #code-content *, #reviews-content *, #qa-content *, #blogs-content * {
    animation: none;
    transition: none;
  }
}

/* === Merged: expansion-w-graph assets/css/easy-graph-snippet.css === */
/* koddeit — easy-wins lane W2 snippet (NEW FILE — no existing file edited)
 *
 * MERGE NOTE for the coordinator: this file is NOT linked from
 * index.html yet (this lane must not edit existing files). Add
 * <link rel="stylesheet" href="assets/css/easy-graph-snippet.css">
 * after main.css at merge. Until then these classes fall back to the
 * unstyled browser defaults for layout only; no behaviour depends on
 * this file.
 *
 * DESIGN TOKENS (DESIGN_TOKENS.md, solid colours only, no gradients,
 * no purple/indigo): paper #eef1f4, surface #ffffff, surface-2 #f7f8fa,
 * ink #0f172a, ink-soft #334155, muted #64748b, line #e2e8f0,
 * line-strong #cbd5e1, accent #0f766e, accent-dark #0b5e57,
 * accent-soft #e6f4f1, accent-border #99d5cd, danger #b42318.
 * Inter/system-ui for UI; JetBrains Mono only for code.
 * Sentence case everywhere.
 */

/* Contribution graph: 12 week columns of 7 day cells. */
.dc-graph-total { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0 0 12px; }
.dc-graph-grid { display: flex; gap: 4px; align-items: flex-start; }
.dc-graph-week { display: flex; flex-direction: column; gap: 4px; }
.dc-graph-cell {
  width: 20px; height: 20px; padding: 0; border: 1px solid #e2e8f0;
  border-radius: 6px; cursor: pointer;
}
.dc-graph-cell:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
.dc-graph-legend { font-size: 12px; color: #64748b; margin: 12px 0 0; }
.dc-graph-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 6px; vertical-align: middle; }
.dc-graph-note { font-size: 14px; color: #334155; margin: 12px 0 0; }
.dc-graph-detail { font-size: 14px; color: #334155; margin: 12px 0 0; }

/* Collections and topics share the shell buttons (.btn, .btn-primary,
 * .btn-ghost) and the tag pill (.dc-tech-tag). Only layout for the
 * new sections lives here. */
.dc-author-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #0f766e; font: inherit; text-decoration: underline;
}
.dc-author-link:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }

/* === Merged: expansion-w-events assets/css/easy-events-snippet.css === */
/* koddeit — easy-wins lane W3 snippet (NEW FILE)
 * Tokens from DESIGN_TOKENS.md only: solid colours, no gradients, no
 * purple/indigo. Inter for UI; JetBrains Mono only for code
 * timestamps only. Sentence case. Radius: sm 6px for inputs/buttons,
 * md 12px for cards, pill 999px for badges/tags only. Shadow sm for
 * list cards, md only for the composer. */
.dc-ev-card,
.dc-ch-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  padding: 16px;
  margin: 12px 0;
}
.dc-ev-composer,
.dc-ch-composer {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgb(15 23 42 / .08);
  padding: 16px;
  margin: 16px 0;
}
.dc-ev-composer input,
.dc-ev-composer textarea,
.dc-ev-composer select,
.dc-ch-composer select,
.dc-ch-composer textarea {
  display: block;
  width: 100%;
  margin: 4px 0 12px 0;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 15px;
  background: #ffffff;
  color: #0f172a;
}
.dc-ev-composer label,
.dc-ch-composer label {
  font-size: 14px;
  color: #334155;
  font-weight: 600;
}
.dc-ev-meta,
.dc-ch-meta {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}
.dc-ev-note,
.dc-ch-note {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}
.dc-ev-actions,
.dc-ch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.dc-ev-actions .btn.is-active,
.dc-ch-entries .btn.is-active {
  background: #e6f4f1;
  border-color: #99d5cd;
  color: #0b5e57;
}
.dc-ev-actions .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.dc-ev-badge {
  background: #e6f4f1;
  border: 1px solid #99d5cd;
  color: #0b5e57;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
}
.dc-ev-badge--cancelled {
  background: #f7f8fa;
  border-color: #cbd5e1;
  color: #b42318;
}
.dc-ev-attendees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-ev-attendee,
.dc-ch-name {
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 15px;
  color: #0f172a;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dc-ch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0;
}
.dc-ch-table th,
.dc-ch-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.dc-ch-table tr.is-current td {
  background: #e6f4f1;
}
.dc-ch-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dc-ch-entry {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dc-ev-card:focus-visible,
.dc-ch-card:focus-visible,
.dc-ev-attendee:focus-visible,
.dc-ch-name:focus-visible,
.dc-ev-actions .btn:focus-visible,
.dc-ch-actions .btn:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dc-ev-card,
  .dc-ch-card,
  .dc-ev-composer,
  .dc-ch-composer {
    transition: none;
  }
}

/* === Merged: expansion-w-teams assets/css/easy-teams-snippet.css === */
/* koddeit — easy-wins lane W4 snippet (teams + GitHub import)
 * MERGE NOTE: add to index.html after main.css:
 * <link rel="stylesheet" href="assets/css/easy-teams-snippet.css">
 * FROZEN TOKENS ONLY (DESIGN_TOKENS.md v2): solid colours, no
 * gradients, no purple/indigo. Inter/system-ui for UI, JetBrains
 * Mono only for code. Sentence case in any text this
 * file does not itself render (class names are not UI copy). */
.dc-team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  padding: 16px;
  margin-bottom: 16px;
}
.dc-team-card h3 { font-size: 17px; margin: 0 0 8px; }
.dc-team-card p { margin: 0 0 8px; color: var(--ink-soft); }
.dc-team-task { margin-bottom: 12px; }
.dc-team-task.is-done strong { color: var(--muted); text-decoration: line-through; }
.dc-team-task p { margin: 4px 0; color: var(--ink-soft); }
.dc-github-repo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  padding: 16px;
  margin-bottom: 16px;
}
.dc-github-repo h3 { font-size: 17px; margin: 0 0 8px; }
.dc-github-repo p { margin: 0 0 8px; color: var(--ink-soft); }

/* === Merged: expansion-d-dev assets/css/easy-dev-snippet.css === */
/* koddeit — Batch A lane D1 styles (easy dev features).
 * Frozen tokens only: solid colours, frozen palette.
 * Inter/system-ui for UI; JetBrains Mono only for code.
 * Sentence case everywhere. */
.dc-easy-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.dc-easy-filters label { font-size: 14px; color: #334155; }
.dc-easy-filters input, .dc-easy-filters select,
.dc-easy-form input, .dc-easy-form select, .dc-easy-form textarea {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px;
  font: inherit; background: #ffffff; color: #0f172a;
}
.dc-easy-form { display: grid; gap: 12px; margin: 0 0 24px; }
.dc-easy-form label { display: grid; gap: 4px; font-size: 14px; color: #334155; }
.dc-easy-form label input[type="checkbox"] { width: auto; }
.dc-easy-meta { font-size: 13px; color: #64748b; }
.dc-easy-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.dc-easy-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; background: #f7f8fa; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 12px; white-space: pre-wrap; word-break: break-word;
}
.dc-easy-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 16px; margin: 0 0 8px;
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}
.dc-easy-list { margin: 8px 0; padding-left: 20px; font-size: 14px; color: #334155; }
.dc-easy-resume { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
.dc-easy-resume h3 { font-size: 24px; }
:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dc-easy-row, .dc-easy-resume { transition: none; }
}
/* Resume print: hide chrome, keep the resume view only. */
@media print {
  .dc-topbar, .dc-nav, .dc-sidebar, #demo-banner, .dc-easy-form { display: none !important; }
  body { background: #ffffff; }
  .view { display: none !important; }
  #view-resume { display: block !important; }
}

/* === Merged: expansion-d-social assets/css/easy-social-snippet.css === */
/* koddeit — easy-social-snippet.css (expansion D, social easy)
 *
 * Appearance snippet for DCTheme: dark mode + font size.
 * ALL dark rules are scoped under [data-theme="dark"], so light mode
 * (the default when no setting exists) is completely untouched.
 * Solid colours only, no gradients, no purple/indigo. Dark surfaces
 * use a dark slate scale; text stays light on dark so every view
 * remains readable. Font sizes are set on body per data-font-size
 * (main.css sets body font-size explicitly, so the html font-size
 * alone would not move body text).
 *
 * Classes covered (main layout, from main.css): body, links, topbar,
 * nav, sidebar, views, post/project/profile/investor/community/space
 * cards, composer, comments, messages, conversations, tabs, forms,
 * buttons, badges, tags, polls, drafts, stories, search, notifications
 * panel, demo banner, footer, mounts and empty states, plus the
 * spaces.css extras and this lane's own analytics/sensitive/embed
 * blocks.
 *
 * NOT explicitly covered (see lane report): elements whose colours
 * come from inline styles rather than classes — category cover bands
 * (.dc-cover) and avatar rings keep their authored solid category
 * colours in both modes, and the logo image is unchanged. If a view
 * looks off in dark mode at merge, it will be one of those, not a
 * missing card/surface rule.
 */

html[data-font-size="small"] body { font-size: 13px; }
html[data-font-size="normal"] body { font-size: 15px; }
html[data-font-size="large"] body { font-size: 17px; }

html[data-theme="dark"] body {
  background: #0f172a;
  color: #e2e8f0;
}
html[data-theme="dark"] a { color: #5eead4; }
html[data-theme="dark"] a:hover { color: #99f6e4; }

html[data-theme="dark"] .dc-topbar,
html[data-theme="dark"] .dc-sidebar-card,
html[data-theme="dark"] .dc-post-card,
html[data-theme="dark"] .dc-project-card,
html[data-theme="dark"] .dc-profile-header,
html[data-theme="dark"] .dc-investor-card,
html[data-theme="dark"] .dc-community-card,
html[data-theme="dark"] .dc-space-card,
html[data-theme="dark"] .dc-portfolio-card,
html[data-theme="dark"] .dc-owner-card,
html[data-theme="dark"] .dc-related-card,
html[data-theme="dark"] .dc-conv-item,
html[data-theme="dark"] .dc-message,
html[data-theme="dark"] .dc-comment,
html[data-theme="dark"] .dc-composer,
html[data-theme="dark"] .dc-draft-item,
html[data-theme="dark"] .dc-scheduled-item,
html[data-theme="dark"] .dc-x-list-card,
html[data-theme="dark"] .dc-x-trend-row,
html[data-theme="dark"] .notif-panel,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .mount {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .dc-nav,
html[data-theme="dark"] .dc-sidebar,
html[data-theme="dark"] .dc-sidebar-row,
html[data-theme="dark"] .dc-post-head,
html[data-theme="dark"] .dc-post-actions,
html[data-theme="dark"] .dc-comment-list,
html[data-theme="dark"] .dc-tabs,
html[data-theme="dark"] .dc-tab-list,
html[data-theme="dark"] .dc-footer,
html[data-theme="dark"] .view-head,
html[data-theme="dark"] .dc-conversation,
html[data-theme="dark"] .dc-space-room,
html[data-theme="dark"] .dc-story-viewer,
html[data-theme="dark"] .dc-poll,
html[data-theme="dark"] .dc-quote-embed,
html[data-theme="dark"] .dc-repost-embed {
  border-color: #334155;
}

html[data-theme="dark"] .dc-nav .nav-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
html[data-theme="dark"] .dc-nav .nav-btn:hover,
html[data-theme="dark"] .dc-nav .nav-btn.is-active,
html[data-theme="dark"] .dc-nav .nav-btn[aria-current="page"] {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}
html[data-theme="dark"] .nav-note,
html[data-theme="dark"] .form-note,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .dc-sidebar-empty,
html[data-theme="dark"] .dc-sidebar-meta,
html[data-theme="dark"] .dc-post-meta,
html[data-theme="dark"] .dc-project-meta,
html[data-theme="dark"] .dc-x-meta,
html[data-theme="dark"] .dc-time,
html[data-theme="dark"] .dc-feed-note,
html[data-theme="dark"] .dc-note {
  color: #94a3b8;
}
html[data-theme="dark"] .dc-sidebar-title,
html[data-theme="dark"] .view-head h1,
html[data-theme="dark"] .view-head h2 {
  color: #f1f5f9;
}
html[data-theme="dark"] .dc-sidebar-name { color: #e2e8f0; }

html[data-theme="dark"] .btn {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}
html[data-theme="dark"] .btn:hover { border-color: #e2e8f0; }
html[data-theme="dark"] .btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}
html[data-theme="dark"] .btn-primary:hover { background: #0b5e57; }
html[data-theme="dark"] .btn-ghost {
  background: transparent;
  border-color: #475569;
  color: #e2e8f0;
}
html[data-theme="dark"] .btn-danger {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #ffffff;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}
html[data-theme="dark"] .dc-search input {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}

html[data-theme="dark"] .dc-avatar {
  background: #334155;
  color: #e2e8f0;
}
html[data-theme="dark"] .dc-cover-band {
  background: #134e4a;
  border-color: #0f766e;
}
html[data-theme="dark"] .dc-stat { border-color: #334155; }
html[data-theme="dark"] .dc-tab {
  background: transparent;
  border-color: #475569;
  color: #cbd5e1;
}
html[data-theme="dark"] .dc-tab.is-active {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}
html[data-theme="dark"] .dc-tag,
html[data-theme="dark"] .dc-tech-tag,
html[data-theme="dark"] .dc-sidebar-tag,
html[data-theme="dark"] .dc-badge-pill,
html[data-theme="dark"] .badge {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}
html[data-theme="dark"] .dc-message--own { background: #134e4a; }
html[data-theme="dark"] .dc-message--other { background: #1e293b; }
html[data-theme="dark"] .dc-conv-item.is-active { background: #134e4a; }
html[data-theme="dark"] .dc-conv-item.is-unread { border-color: #0f766e; }
html[data-theme="dark"] .dc-action-btn.is-active { color: #5eead4; }
html[data-theme="dark"] .dc-live-dot { background: #dc2626; }

html[data-theme="dark"] #demo-banner {
  background: #fef3c7;
  color: #92400e;
}
html[data-theme="dark"] #demo-banner strong { color: #92400e; }
html[data-theme="dark"] .dc-footer-inner { color: #94a3b8; }
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background: #0f172a;
  color: #e2e8f0;
}
html[data-theme="dark"] .dc-story-form,
html[data-theme="dark"] .dc-story-item,
html[data-theme="dark"] .dc-draft-form,
html[data-theme="dark"] .dc-sched-form,
html[data-theme="dark"] .dc-mute-form,
html[data-theme="dark"] .dc-adv-form,
html[data-theme="dark"] .dc-comment-form,
html[data-theme="dark"] .dc-reply-form,
html[data-theme="dark"] .dc-repost-form,
html[data-theme="dark"] .dc-quote-form,
html[data-theme="dark"] .dc-edit-form {
  background: #1e293b;
  border-color: #334155;
}
html[data-theme="dark"] .dc-space-badge {
  background: #334155;
  color: #e2e8f0;
}
html[data-theme="dark"] .dc-space-badge--live { background: #7f1d1d; color: #ffffff; }
html[data-theme="dark"] .dc-analytics-line,
html[data-theme="dark"] .dc-analytics-bar-row,
html[data-theme="dark"] .dc-sensitive-gate {
  color: #e2e8f0;
}

/* === Merged: expansion-d-medium assets/css/easy-medium-snippet.css === */
/* koddeit — Lane D3 medium snippet (NEW FILE ONLY).
 * Solid colours only, from DESIGN_TOKENS.md. No gradients, no purple/indigo.
 * Inter for UI; JetBrains Mono only for code. */
.dc-extras-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.dc-extras-note, .dc-whiteboard-note { color: #64748b; font-size: 13px; }
.dc-extras-status, .dc-whiteboard-status { color: #334155; font-size: 14px; }
.dc-file-name { }
.dc-file-meta { color: #64748b; font-size: 13px; }
.dc-error { color: #b42318; font-size: 14px; }
.dc-whiteboard-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.dc-whiteboard canvas { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; touch-action: none; max-width: 100%; }
.dc-message--file, .dc-message--voice { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; margin: 8px 0; background: #ffffff; box-shadow: 0 1px 2px rgb(15 23 42 / .06); }

/* === Merged: expansion-d-pwa assets/css/easy-pwa-snippet.css === */
/* koddeit — easy PWA snippet (lane D4).
 * Solid colours only, from DESIGN_TOKENS.md: paper #eef1f4,
 * surface #ffffff, surface-2 #f7f8fa, ink #0f172a, ink-soft #334155,
 * muted #64748b, line #e2e8f0, accent #0f766e, accent-soft #e6f4f1,
 * warn-bg #fef3c7 / warn-ink #92400e. No gradients, no purple/indigo.
 * Inter/system-ui for UI; JetBrains Mono only for code,
 * code and timestamps (none are styled mono here except the digest
 * week label, which is a timestamp). Sentence case throughout. */
.dc-push-toggle {
  display: block;
  margin: 8px 0;
  color: #334155;
  font-size: 15px;
}
.dc-push-toggle input {
  margin-right: 8px;
  accent-color: #0f766e;
}
.dc-digest-list {
  margin: 8px 0 16px 20px;
  color: #334155;
  font-size: 15px;
  line-height: 1.55;
}
.dc-digest-list li {
  margin-bottom: 8px;
}
.dc-digest-author {
  font-weight: 700;
  color: #0f172a;
}
.dc-note {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
}
.dc-warn-note {
  background: #fef3c7;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  color: #92400e;
  font-size: 14px;
  line-height: 1.55;
}
.dc-pwa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

/* Merged fix (dark contrast): topbar user text uses a light colour in dark
 * mode — the base rule uses var(--ink-soft), which stays dark. */
html[data-theme="dark"] #current-user-display { color: #cbd5e1; }

/* ---- Finish-gate rework (2026-10-30): label layout, tag wrap, profile
 * width, dark secondary text. Appended last so these rules win ties. */
/* Stacked form labels (scoped to form-heavy views; screen-reader-only
 * labels are untouched — they never wrap an input). */
#auth-form label,
#project-filters label,
#github-import-content label,
#ama-content label,
#demo-days-content label,
#updates-content label,
#highlights-content label,
#post-analytics-content label,
#content-controls-content label,
.dc-easy-form label {
  display: block;
  margin-bottom: 10px;
}
#auth-form label input,
#project-filters label input,
#github-import-content label input,
#ama-content label input,
#demo-days-content label input,
#updates-content label input,
#highlights-content label input,
#post-analytics-content label input,
#content-controls-content label input,
.dc-easy-form label input,
#auth-form label textarea,
#ama-content label textarea,
#updates-content label textarea,
#github-import-content label select,
#ama-content label select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}
/* Project tags + action buttons must wrap, never overflow the card. */
.dc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.dc-tags > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dc-project-actions .dc-action-btn,
.dc-project-actions .btn {
  white-space: normal;
  text-align: center;
}
/* Profile: never squeeze the main column beside a 280px rail inside the
 * already-narrow centre column — stack the rail below at desktop width. */
@media (min-width: 1024px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
}
.dc-profile-head-main .dc-avatar { flex-shrink: 0; }
.dc-profile-head-text { min-width: 0; }
.dc-profile-head-text h2 { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .dc-profile-head-main { flex-direction: column; }
  .dc-profile-head-main .dc-avatar { margin-bottom: 4px; }
}
/* Dark mode: secondary text (handles, counts, scores, times) in a lighter
 * grey so it stays readable on dark surfaces. */
html[data-theme="dark"] .dc-handle,
html[data-theme="dark"] .dc-time,
html[data-theme="dark"] .dc-x-count,
html[data-theme="dark"] .dc-x-score,
html[data-theme="dark"] .dc-stat span,
html[data-theme="dark"] .dc-sidebar-empty {
  color: #aeb9c8;
}

/* Gate-2: story composer labels stack like the other forms; the Colour
   fieldset drops its border so the legend cannot sit on it. */
.dc-story-form label { display:block; margin-top:8px; }
.dc-story-form input[type="text"], .dc-story-form input[type="url"] { display:block; width:100%; margin-top:4px; }
.dc-story-form fieldset { border:0; padding:0; margin:8px 0 0; }
.dc-story-form fieldset legend { font-weight:600; margin-bottom:4px; }

/* === Design polish (2026-10-30): focused nav, pack emoji, post hierarchy === */
.dc-left-more { margin-top: 4px; }
.dc-left-more > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; color: #0f172a; list-style: none; border-radius: 8px; }
.dc-left-more > summary:hover { background: #f7f8fa; }
.dc-left-more .nav-btn { width: 100%; }
.dc-emoji { width: 18px; height: 18px; vertical-align: -3px; }
.dc-action-btn .dc-emoji { margin-right: 2px; }
.dc-post-actions { border-top: 1px solid #e2e8f0; padding-top: 12px; margin-top: 4px; }
.dc-action-btn:hover { background: #f7f8fa; }
.dc-post-head .dc-author-link { font-size: 15px; }
.dc-post-body { line-height: 1.6; }

/* Gate-6: avatars are SOLID per-user discs with white initials everywhere.
   Four legacy .dc-avatar definitions set light backgrounds; this final rule
   unifies them. The profile header keeps its white border (next rule). */
.dc-avatar { background: var(--ring, #cbd5e1) !important; color: #ffffff !important; border-color: var(--ring, #cbd5e1) !important; }
.dc-profile-head-main .dc-avatar { border-color: #ffffff !important; }
html[data-theme="dark"] .dc-avatar { background: var(--ring, #cbd5e1) !important; color: #ffffff !important; border-color: var(--ring, #cbd5e1) !important; }
html[data-theme="dark"] .dc-profile-head-main .dc-avatar { border-color: #ffffff !important; }

/* Coordinator visual check 2026-10-30: post bodies hardcode near-black ink
   with no dark override, so dark-mode bodies were nearly invisible. */
html[data-theme="dark"] .dc-post-body { color: #e2e8f0; }
html[data-theme="dark"] .nav-note { background: #1e293b; border-color: #334155; }

/* RSS form: label/select/button need breathing room (label collided with the select). */
#dc-rss-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }


/* ===== bundle segment: assets/css/spaces.css ===== */
/* koddeit Spaces — spaces.css (shell lane: token values only, no
 * redesign of Spaces room logic)
 * Uses ONLY the frozen tokens from DESIGN_TOKENS.md via main.css:
 * --ink, --ink-soft, --muted, --paper, --surface, --surface-2, --line,
 * --line-strong, --accent, --accent-dark, --accent-soft, --accent-border,
 * --radius-sm, --radius-md, --shadow-sm, --space-*.
 * No new palette, no gradients, no rounded-everything. Sentence case.
 * Focus is visible via main.css :focus-visible; never remove it here. */

.dc-spaces-list { display: flex; flex-direction: column; gap: var(--space-4); }
.dc-space-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.dc-space-card h3 { margin: 0 0 var(--space-2); font-size: 1.15rem; line-height: 1.3; }
.dc-space-card p { margin: 0 0 var(--space-2); color: var(--muted); }
.dc-space-card p:last-child { margin-bottom: 0; }
.dc-space-meta { font-family: var(--font-mono); font-size: 0.85rem; }

.dc-space-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 4px;
  background: var(--surface-2);
}
.dc-space-badge--live { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-dark); }
.dc-space-badge--scheduled { background: var(--surface); color: var(--ink-soft); }
.dc-space-badge--ended { background: var(--surface-2); color: var(--muted); }
.dc-space-type { font-family: var(--font-mono); font-size: 0.85rem; }

.dc-space-room {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.dc-space-room h2 { margin: 0 0 var(--space-2); font-size: 1.5rem; line-height: 1.25; }
.dc-space-room h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.05rem; }
.dc-space-room p { color: var(--muted); }
.dc-space-warning {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--ink-soft);
}
.dc-space-error {
  background: var(--surface);
  border: 1px solid #b42318;
  border-left: 4px solid #b42318;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: #7a1a12;
}
.dc-space-participants { list-style: none; margin: 0; padding: 0; }
.dc-space-participants li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.dc-space-participants li:last-child { border-bottom: 0; }

#spaces-filters, #space-create-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
#spaces-filters label, #space-create-form label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
#spaces-filters input, #spaces-filters select,
#space-create-form input, #space-create-form select, #space-create-form textarea,
#space-chat-input {
  width: 100%;
  padding: 8px 10px;
  margin: 4px 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  box-sizing: border-box;
}
#space-chat-form { margin-top: var(--space-4); }
.space-invite-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.space-invite-list label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

@media (min-width: 768px) {
  .dc-spaces-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .dc-spaces-list > p, .dc-spaces-list > .empty { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-space-card, .dc-space-room { transition: none !important; }
}


/* ===== bundle segment: assets/css/cv-lane.css ===== */
/* koddeit — cv-lane.css (carve-outs lane only).
 * Teal accent #0f766e, plain backgrounds, no gradients, no purple/indigo.
 * Mono is used only for code/secret text (class .mono already exists in
 * main.css; .cv-code below is the same idea, scoped to this lane). */
.cv-box { border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px 14px; margin: 12px 0; background: #ffffff; }
.cv-box h3 { margin: 0 0 6px 0; font-size: 1rem; }
.cv-note { color: #334155; }
.cv-error { color: #991b1b; }
.cv-ok { color: #0f766e; }
.cv-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cv-actions .btn { cursor: pointer; }
.cv-qr-wrap { background: #ffffff; display: inline-block; padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; }
.cv-qr-wrap svg { display: block; }
.cv-field { margin: 8px 0; }
.cv-field label { display: block; margin-bottom: 4px; }
.cv-field input[type="text"], .cv-field input[type="password"], .cv-field input[type="email"] { padding: 6px 8px; border: 1px solid #94a3b8; border-radius: 6px; }


/* ===== bundle segment: assets/css/dd-lane.css ===== */
/* koddeit batch D DEV-NATIVE lane: teal accent, solid colours only, no gradients. */
.dd-form{display:grid;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin:12px 0}
.dd-form label{display:grid;gap:4px;font-size:14px}
.dd-form input,.dd-form select,.dd-form textarea{padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit;background:#fff}
.dd-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin:12px 0}
.dd-card h3,.dd-card h4{margin:0 0 8px}
.dd-card p{margin:6px 0}
.dd-msg{color:#0f766e;min-height:1em}
.dd-notice{background:#e6f4f1;border:1px solid #99d5cd;border-radius:12px;padding:12px 16px}
.dd-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#0f766e;color:#fff;font-size:13px;font-weight:600;vertical-align:middle;margin-right:6px}
.dd-user{display:inline-flex;align-items:center}
.dd-link{background:none;border:none;color:#0f766e;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.dd-code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;background:#f7f8fa;border:1px solid #e2e8f0;border-radius:6px;padding:12px;overflow:auto;white-space:pre-wrap}
.empty{color:#64748b}


/* ===== bundle segment: assets/css/ds-lane.css ===== */
/* DS lane (batches E/F) — teal accent, solid colours only, no gradients. */
.ds-card { border: 1px solid #d1d5db; border-radius: 12px; padding: 1rem; margin: 0.75rem 0; background: #ffffff; }
.ds-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ds-list li { margin: 0; }
.ds-note { color: #4b5563; font-size: 0.95rem; }
.ds-empty { color: #4b5563; }
.ds-error { color: #991b1b; }
.ds-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 0.8rem; font-weight: 700; vertical-align: middle; }
.ds-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.ds-tab { border: 1px solid #0f766e; background: #fff; color: #0f766e; border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; }
.ds-tab.is-active { background: #0f766e; color: #fff; }
.ds-chat { border: 1px solid #d1d5db; border-radius: 12px; padding: 1rem; margin: 0.75rem 0; }
.ds-video { width: 100%; max-width: 560px; border-radius: 12px; }
.ds-palette { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ds-palette-box { background: #fff; border-radius: 12px; padding: 1rem; width: min(560px, 92vw); max-height: 70vh; overflow: auto; }
.ds-palette-item { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: #fff; padding: 0.5rem; border-radius: 8px; cursor: pointer; }
.ds-palette-item.is-selected { border-color: #0f766e; background: #f0fdfa; }
.ds-palette-kind { color: #0f766e; font-weight: 700; margin-right: 0.5rem; }


/* ===== bundle segment: assets/css/ea-lane.css ===== */
/* koddeit — EA lane (DEV-NATIVE batch) styles. Teal accent only,
   solid colours, no gradients, no purple/indigo. Sentence case in
   markup. Mono is not used here (no code blocks in EA views). */
.ea-note {
  background: var(--accent-soft, #e6f4f1);
  border: 1px solid var(--accent-border, #99d5cd);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink-soft, #334155);
}
.ea-calendar {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0;
  background: var(--surface, #ffffff);
}
.ea-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  background: var(--surface, #ffffff);
}
.ea-table th,
.ea-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.ea-table th {
  color: var(--ink-soft, #334155);
}
.ea-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.ea-compare-side {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface, #ffffff);
}
.ea-stack-block,
.ea-spon-block {
  border: 1px solid var(--accent-border, #99d5cd);
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
  background: var(--surface, #ffffff);
}
@media (max-width: 640px) {
  .ea-compare-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== bundle segment: assets/css/eb-lane.css ===== */
/* koddeit EB lane — social/platform batch styles (single file).
 * Teal accent #0f766e, solid colours only, no gradients, no purple/indigo.
 * Mono is used only for code; these classes carry no code text. */
.eb-card {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0;
  background: #ffffff;
}
.eb-message-list { list-style: none; padding: 0; margin: 10px 0; }
.eb-message-list li {
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 0;
}
.eb-pinned {
  border: 2px solid #0f766e;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  background: #f0fdfa;
}
.eb-flair {
  display: inline-block;
  background: #0f766e;
  color: #ffffff;
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 0.85em;
}
.eb-progress {
  height: 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
  margin: 10px 0;
}
.eb-progress-bar { height: 100%; background: #0f766e; }


/* ===== bundle segment: assets/css/oa-lane.css ===== */
/* koddeit — OA lane styles (single file for all oa-* modules).
 * Teal accent #0f766e, solid colours only, no gradients, no purple/indigo.
 * Monospace is used only for code inside wiki docs (.oa-card code). */
.oa-form label { display: block; margin: 0.5rem 0; }
.oa-form input[type="text"],
.oa-form input[type="url"],
.oa-form textarea,
.oa-form select { width: 100%; max-width: 32rem; box-sizing: border-box; }
.oa-card { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 1rem; margin: 0.75rem 0; background: #ffffff; }
.oa-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.oa-history { border-top: 1px solid #d1d5db; margin-top: 0.75rem; padding-top: 0.5rem; }
.oa-carousel { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 1rem; margin: 0.75rem 0; background: #ffffff; }
.oa-shot { max-width: 100%; height: auto; display: block; border-radius: 0.25rem; }
.oa-shot-btn { border: none; background: none; padding: 0; cursor: pointer; }
.oa-caption { font-style: italic; }
.oa-lightbox { border: 2px solid #0f766e; border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; background: #ffffff; }
.oa-shot-large { max-width: 100%; height: auto; display: block; }
.oa-badge { border: 1px solid #0f766e; border-radius: 0.5rem; padding: 0.75rem 1rem; background: #f0fdfa; }
.oa-mount { border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; background: #ffffff; }
.oa-theme-preview { border: 2px solid #0f766e; border-radius: 0.5rem; padding: 1rem; margin: 0.75rem 0; background: #ffffff; }
.oa-swatch { display: inline-block; margin-right: 1rem; }
.oa-swatch-dot { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; vertical-align: middle; }
.oa-profile-banner img { width: 100%; max-height: 12rem; object-fit: cover; display: block; border-radius: 0.5rem; }
#view-profile { border-top: 4px solid var(--oa-accent, transparent); }


/* ===== bundle segment: assets/css/ob-lane.css ===== */
/* koddeit OB lane — one file for all lane styles (doables social/platform).
 * Teal accent #0f766e, solid colours only, no gradients, no purple/indigo.
 * High contrast is applied via html[data-ob-contrast="high"] so it reaches
 * every view; reduced motion via html[data-ob-reduced-motion="on"].
 * The high-contrast rules override the frozen tokens by redefining the
 * variables on :root scope, plus explicit borders for cards and buttons.
 */
html[data-ob-contrast="high"] {
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --muted: #000000;
  --muted-light: #333333;
  --line: #000000;
  --line-strong: #000000;
  --accent: #0b5e57;
  --accent-dark: #083f3a;
  --accent-soft: #ffffff;
  --accent-border: #000000;
}
html[data-ob-contrast="high"] body {
  background: #ffffff;
  color: #000000;
}
html[data-ob-contrast="high"] a { color: #083f3a; text-decoration: underline; }
html[data-ob-contrast="high"] .view,
html[data-ob-contrast="high"] .mount,
html[data-ob-contrast="high"] .dc-post-card,
html[data-ob-contrast="high"] .dc-project-card,
html[data-ob-contrast="high"] .dc-community-card,
html[data-ob-contrast="high"] .dc-space-card,
html[data-ob-contrast="high"] .dc-sidebar-card {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
}
html[data-ob-contrast="high"] .btn,
html[data-ob-contrast="high"] button {
  border: 2px solid #000000;
  color: #000000;
  background: #ffffff;
}
html[data-ob-contrast="high"] .btn-primary {
  background: #0b5e57;
  border-color: #000000;
  color: #ffffff;
}
html[data-ob-contrast="high"] input,
html[data-ob-contrast="high"] select,
html[data-ob-contrast="high"] textarea {
  border: 2px solid #000000;
  background: #ffffff;
  color: #000000;
}
/* Reduced motion: no animation or transition anywhere in the app. */
html[data-ob-reduced-motion="on"] *,
html[data-ob-reduced-motion="on"] *::before,
html[data-ob-reduced-motion="on"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* OB lane views: plain lists, teal headings, floating reactions. */
.ob-view ul, .ob-view ol { margin: 8px 0 16px 20px; }
.ob-view li { margin: 4px 0; }
.ob-view h3, .ob-view h4 { color: #0f766e; }
.ob-float-zone { min-height: 44px; padding: 8px; border: 1px solid #cbd5e1; background: #ffffff; }
.ob-float-react {
  display: inline-block;
  margin: 2px 6px;
  padding: 2px 8px;
  border: 1px solid #99d5cd;
  background: #e6f4f1;
  animation: ob-float-up 2.4s ease-out;
}
@keyframes ob-float-up {
  from { transform: translateY(10px); opacity: 0.4; }
  to { transform: translateY(-6px); opacity: 1; }
}


/* ===== bundle segment: assets/css/va-lane.css ===== */
/* koddeit — VA lane styles (EASY+DOABLE DEV/PROJECT).
 * Teal accent #0f766e, solid colours only, no gradients, no purple,
 * no indigo. Sentence case in all copy. Monospace is used only for
 * code, never for body copy. Status dots are solid per-user colour
 * blocks, not emoji. */
.va-note { color: #475569; font-size: 14px; }
.va-meta { color: #64748b; font-size: 13px; }
.va-handle { color: #64748b; }
.va-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; margin: 10px 0; background: #ffffff; }
.va-card h3, .va-card h4, .va-card h5 { margin: 4px 0 6px; }
.va-list { list-style: none; padding: 0; margin: 0; }
.va-list li { margin: 8px 0; }
.va-form { border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; margin: 14px 0; background: #f8fafc; }
.va-form label, .va-inline-form label { display: block; margin: 8px 0; font-size: 14px; }
.va-form input[type="text"], .va-form input[type="url"], .va-form input[type="number"],
.va-form input[type="date"], .va-form input[type="month"], .va-form select, .va-form textarea,
.va-inline-form input[type="text"], .va-inline-form input[type="url"], .va-inline-form input[type="number"],
.va-inline-form select { display: block; width: 100%; max-width: 420px; margin-top: 4px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.va-inline-form { margin: 10px 0; }
.va-actions { margin: 10px 0 0; }
.va-actions label { display: inline-block; margin-right: 10px; font-size: 13px; }
.va-actions input[type="number"], .va-actions select { padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; }
.va-task-list { list-style: none; padding: 0; }
.va-task-list li { margin: 4px 0; font-size: 14px; }
.va-progress { height: 10px; background: #e2e8f0; border-radius: 5px; overflow: hidden; margin: 8px 0; }
.va-progress span { display: block; height: 100%; background: #0f766e; }
.va-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.va-dot--available { background: #15803d; }
.va-dot--pair { background: #0f766e; }
.va-dot--busy { background: #b45309; }
.va-dot--away { background: #64748b; }
.va-dot--none { background: #cbd5e1; }
.va-status-label { font-weight: 600; }
.va-status-custom { color: #64748b; }
.va-mutual { border-color: #99d5cd; background: #e6f4f1; }
.va-badge { display: inline-block; background: #0f766e; color: #ffffff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.va-timer { font-size: 32px; font-weight: 700; color: #0f766e; margin: 8px 0; letter-spacing: 0.02em; }
.va-timeline { list-style: none; padding: 0; margin: 0; }
.va-timeline li { margin: 10px 0; }


/* ===== bundle segment: assets/css/vb-lane.css ===== */
/* koddeit — VB lane CSS (the lane's ONLY css file).
 * Teal accent (#0f766e), solid colours only, no gradients, no purple/indigo.
 * Mono is never used here (code only, elsewhere). */
.vb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vb-card { border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; background: #ffffff; }
.vb-card p { margin: 4px 0; }
.vb-meta { color: #4b5563; font-size: 0.9em; }
.vb-note { color: #4b5563; font-size: 0.95em; }
.vb-error { color: #b91c1c; }
.vb-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.vb-profile-block { border-top: 2px solid #0f766e; margin-top: 20px; padding-top: 12px; }
.vb-correct { color: #0f766e; font-weight: 700; }
.vb-sample-card { margin: 8px 0; }
/* Feed density: keyed off <html data-vb-density>, applies to real feed cards. */
html[data-vb-density="compact"] .dc-post-card { padding: 6px 10px; }
html[data-vb-density="compact"] .dc-post-card .dc-post-body { margin: 4px 0; font-size: 0.95em; }
html[data-vb-density="comfortable"] .dc-post-card { padding: 16px 18px; }
/* Urdu RTL: VB cards follow document direction; keep form labels readable. */
html[dir="rtl"] .vb-card, html[dir="rtl"] .vb-profile-block { text-align: right; }
html[dir="rtl"] .vb-row { flex-direction: row-reverse; }


/* ===== bundle segment: assets/css/er-lane.css ===== */
/* koddeit — ER lane styles. Teal accent only, solid colours, no
 * gradients, no purple or indigo. Reuses the frozen tokens from
 * main.css. Mono is not used here because no code is displayed by
 * these views except code-post titles, which render as plain text. */
.er-form { display: grid; gap: 8px; margin: 12px 0; max-width: 640px; }
.er-form label { font-weight: 600; color: var(--ink-soft); }
.er-form input, .er-form select, .er-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.er-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.er-inline-form label { flex: 1 1 220px; }
.er-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.er-list > li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.er-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; }
.er-note { color: var(--muted); }
.er-tag { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-border); border-radius: 999px; padding: 2px 10px; font-size: 0.85em; font-weight: 600; }
.er-progress { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.er-progress-fill { height: 100%; background: var(--accent); }


/* ===== bundle segment: assets/css/s2-lane.css ===== */
/* koddeit — S2 lane styles (NEW FILE, one file for all S2 views).
 * Teal accent #0f766e only, solid colours, no gradients, no purple or
 * indigo. Reuses the shell .btn / .btn-primary / .dc-post-card classes
 * wherever possible; the rules below are only the S2-specific bits.
 */
.s2-panel {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  background: #f8fafc;
}
.s2-panel h3 { margin-top: 0; }
.s2-note { color: #475569; }
.s2-meta { color: #475569; font-size: 14px; }
.s2-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.s2-filters label { display: flex; flex-direction: column; gap: 4px; }
.s2-list { list-style: none; padding: 0; margin: 12px 0; }
.s2-list li { padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.s2-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.s2-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s2-flashcard {
  border: 1px solid #e2e8f0;
  border-left: 4px solid #0f766e;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  background: #ffffff;
}
.s2-flashcard.is-flipped { border-left-color: #0b5e57; background: #e6f4f1; }
.s2-feedback {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
}
.s2-progress { height: 10px; background: #e2e8f0; border-radius: 8px; overflow: hidden; }
.s2-progress-bar { height: 100%; background: #0f766e; }


/* ===== bundle segment: assets/css/s3-lane.css ===== */
/* koddeit — S3 lane styles. Teal accent #0f766e, no gradients. */
.s3-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.s3-list li, .s3-room, .s3-poll { border: 1px solid #d1d5db; border-radius: 12px; padding: 0.75rem 1rem; background: #ffffff; }
.s3-reader-item { border: 1px solid #d1d5db; border-radius: 12px; padding: 1rem; margin: 0.75rem 0; background: #ffffff; }
.s3-reader-item.is-current { border-color: #0f766e; box-shadow: 0 0 0 2px #0f766e33; }
.s3-progress { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.s3-progress-bar { height: 100%; background: #0f766e; }
.s3-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #0f766e; color: #ffffff; font-weight: 700; }
.s3-swatch { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid #d1d5db; vertical-align: middle; }
.s3-note { color: #4b5563; font-size: 0.95rem; }
.s3-reader, .s3-room { margin: 1rem 0; }


/* ===== bundle segment: assets/css/s1-lane.css ===== */
/* koddeit — S1 lane styles (single file for all ten S1 views). Teal accent #0f766e, no gradients. */
.s1-card { border: 1px solid #d7dee3; border-radius: 12px; padding: 1rem; margin: 0.75rem 0; background: #ffffff; }
.s1-note { background: #f0fdfa; border: 1px solid #99d5cd; border-radius: 8px; padding: 0.75rem 1rem; }
.s1-badge { background: #0f766e; color: #ffffff; border-radius: 999px; display: inline-block; padding: 0.25rem 0.75rem; }
.s1-once { border: 2px solid #0f766e; border-radius: 12px; padding: 1rem; margin: 1rem 0; background: #f0fdfa; }
.s1-once code { word-break: break-all; }
.s1-recording-indicator { background: #b91c1c; color: #ffffff; border-radius: 8px; padding: 0.75rem 1rem; font-weight: 700; }
#s1-api-try-out, .s1-card pre { white-space: pre-wrap; word-break: break-word; background: #f6f8f9; border-radius: 8px; padding: 0.75rem; }
.s1-card video { border-radius: 8px; background: #111111; }


/* ===== bundle segment: assets/css/t1-lane.css ===== */
/* koddeit — T1 lane (all-except-hard-2 dev) styles.
 * Teal accent (#0f766e) to match the redesign; solid colours only,
 * no gradients. Monospace is used only for code blocks. */
.t1-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.t1-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.t1-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; max-width: 42rem; }
.t1-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.t1-meta { color: #475569; font-size: 0.9rem; }
.t1-empty { color: #475569; font-style: italic; }
.t1-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 700px) { .t1-board { grid-template-columns: 1fr; } }
.t1-column { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0.75rem; }
.t1-column h3 { margin-top: 0; color: #0f766e; }
.t1-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.75rem; }
.t1-card h4 { margin: 0 0 0.25rem 0; }
.t1-card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.t1-chat-list, .t1-list { list-style: none; padding: 0; }
.t1-chat-list li, .t1-list li { border-bottom: 1px solid #e2e8f0; padding: 0.5rem 0; }
.t1-pinned { background: #f0fdfa; border: 1px solid #0f766e; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.t1-table { border-collapse: collapse; width: 100%; }
.t1-table th, .t1-table td { border: 1px solid #e2e8f0; padding: 0.5rem; text-align: left; }
.t1-tool { border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.t1-tool label { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
.t1-tool-error { color: #b91c1c; }
.t1-swatch { width: 4rem; height: 4rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; margin: 0.5rem 0; }
.t1-md-preview { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.75rem; margin-top: 0.5rem; }
.t1-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #0f172a; color: #e2e8f0; border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; }
.t1-quiz { border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.t1-quiz-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.t1-session { border: 1px solid #0f766e; border-radius: 0.75rem; padding: 1rem; margin: 1rem 0; }
.t1-project-block { border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }


/* ===== bundle segment: assets/css/t2-lane.css ===== */
/* koddeit T2 lane styles (single lane file, merge contract).
   Teal accent only; mono only for code; solid colours, no gradients. */
.t2-suggest-box { border: 1px solid var(--line, #ddd); background: var(--paper, #fff); border-radius: 8px; margin-top: 4px; }
.t2-suggest-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; cursor: pointer; }
.t2-suggest-item:hover, .t2-suggest-item:focus { background: var(--teal-soft, #e6f4f2); }
.t2-tok-keyword { color: #0f766e; font-weight: 600; }
.t2-tok-string { color: #92400e; }
.t2-tok-comment { color: #64748b; font-style: italic; }
.t2-calendar { display: flex; flex-wrap: wrap; gap: 4px; max-width: 560px; }
.t2-day { width: 18px; height: 18px; border-radius: 4px; background: #e5e7eb; display: inline-block; }
.t2-day.is-active { background: #0f766e; }
.t2-progress { height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden; max-width: 480px; }
.t2-progress-fill { height: 100%; background: #0f766e; }
.t2-bars { list-style: none; padding: 0; max-width: 560px; }
.t2-bars li { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.t2-bar { flex: 1; height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.t2-bar-fill { height: 100%; background: #0f766e; }
.t2-deferred { opacity: 0.85; }


/* ===== bundle segment: assets/css/u1-lane.css ===== */
/* koddeit — U1 lane (all-except-hard-2 dev) shared styles.
 * Teal accent #0f766e. Mono type only for code. Solid colours only,
 * no gradients, no purple or indigo. */
.u1-card { border: 1px solid #d7dee3; border-radius: 12px; padding: 1rem; margin: 1rem 0; background: #ffffff; }
.u1-item { border-top: 1px solid #e5e9ec; padding: 0.6rem 0; }
.u1-meta { color: #52606d; font-size: 0.9rem; }
.u1-note { color: #334e68; background: #eef6f5; border: 1px solid #bfe3df; border-radius: 8px; padding: 0.75rem 1rem; }
.u1-badge { display: inline-block; background: #0f766e; color: #ffffff; border-radius: 999px; padding: 0.2rem 0.75rem; font-size: 0.9rem; }
.u1-countdown { font-size: 1.15rem; font-weight: 700; color: #0f766e; }
.u1-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.u1-form { border: 1px solid #d7dee3; border-radius: 12px; padding: 1rem; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; background: #f7f9fa; }
.u1-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.u1-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }
.u1-filters label { display: flex; flex-direction: column; gap: 0.25rem; }
.u1-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; background: #f0f4f5; border-radius: 8px; padding: 0.75rem; overflow-x: auto; }
.u1-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.u1-tz-bar { display: flex; flex-wrap: wrap; gap: 2px; margin: 0.75rem 0; }
.u1-tz-hour { display: inline-block; min-width: 1.6rem; text-align: center; padding: 0.25rem 0.2rem; border-radius: 6px; background: #e5e9ec; font-size: 0.8rem; }
.u1-tz-hour.is-overlap { background: #0f766e; color: #ffffff; }


/* ===== bundle segment: assets/css/u2-lane.css ===== */
/* koddeit U2 lane (all-except-hard-2 social/platform + step-up). Teal accent only. */
.u2-panel { background: #ffffff; border: 1px solid #d7dee2; border-radius: 12px; padding: 16px; }
.u2-note { color: #475569; font-size: 0.95rem; }
.u2-empty { color: #64748b; }
.u2-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: #f8fafc; }
.u2-item p { margin: 6px 0; }
.u2-time { color: #64748b; font-size: 0.85rem; }
.u2-tag { display: inline-block; background: #0f766e; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; }
.u2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.u2-media-card { text-align: left; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px; padding: 12px; cursor: pointer; min-height: 48px; }
.u2-media-kind { display: block; color: #0f766e; font-weight: 600; }
.u2-viewer { border: 1px solid #d7dee2; border-radius: 10px; padding: 12px; margin-top: 12px; }
.u2-table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.u2-table th, .u2-table td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; }
.u2-bar { background: #e2e8f0; border-radius: 999px; height: 12px; overflow: hidden; }
.u2-bar-fill { background: #0f766e; height: 12px; }
.u2-bar-row { display: grid; grid-template-columns: 90px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; }
.u2-pre { white-space: pre-wrap; word-break: break-word; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.u2-badge { display: inline-block; background: #0f766e; color: #fff; border-radius: 999px; padding: 4px 12px; margin: 2px; }
.u2-profile-strip { background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.u2-print-area { border: 1px solid #d7dee2; border-radius: 10px; padding: 16px; margin-top: 12px; }
/* Screen reader simplified layout: real layout change, not labels alone. */
body.u2-sr-layout main, body[data-u2-sr="on"] main { display: block !important; }
body.u2-sr-layout .view, body[data-u2-sr="on"] .view { max-width: 720px; }
body.u2-sr-layout .nav-btn, body.u2-sr-layout .btn, body[data-u2-sr="on"] .nav-btn, body[data-u2-sr="on"] .btn { min-height: 48px; font-size: 1.05rem; }
body.u2-sr-layout { font-size: 1.1rem; }
body.u2-sr-layout [aria-hidden="true"], body[data-u2-sr="on"] [aria-hidden="true"] { display: none !important; }
/* Project one-pager print layout. */
@media print {
  header, footer, nav, aside, .dc-sidebar, .nav-btn, .dc-left-more, .dc-more-nav { display: none !important; }
  .view { display: none !important; }
  .view.is-active { display: block !important; }
  .u2-print-area { border: none; padding: 0; }
  #u2-onepager-print, #u2-onepager-select { display: none !important; }
}


/* ===== bundle segment: assets/css/w1-lane.css ===== */
/* koddeit W1 lane (utmost-care batch part A): shared styles for w1-* views.
 * Teal accent #0f766e, solid colours only, no gradients, sentence case. */
.w1-card { background: #ffffff; border: 1px solid #d6dee3; border-radius: 12px; padding: 1rem; margin: 0 0 1rem; }
.w1-note { color: #475569; }
.w1-error { color: #b91c1c; }
.w1-ok { color: #0f766e; }
.w1-form label { display: block; margin: 0.5rem 0; font-weight: 600; }
.w1-form input, .w1-form select, .w1-form textarea { display: block; width: 100%; max-width: 34rem; margin-top: 0.25rem; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.w1-form textarea { font-family: inherit; }
.w1-code { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; }
.w1-tag { display: inline-block; background: #e6f4f2; color: #0f766e; border-radius: 999px; padding: 0.1rem 0.6rem; margin-right: 0.25rem; font-size: 0.85rem; }
.w1-cal { border-collapse: collapse; width: 100%; max-width: 34rem; }
.w1-cal th, .w1-cal td { border: 1px solid #d6dee3; padding: 0.5rem; text-align: left; vertical-align: top; }
.w1-cal td.w1-has { background: #e6f4f2; }
.w1-cal td.w1-sel { outline: 2px solid #0f766e; }
.w1-tabs button { margin-right: 0.25rem; }
.w1-tabs button.is-active { background: #0f766e; color: #fff; }


/* ===== bundle segment: assets/css/w2-lane.css ===== */
/* koddeit — W2 lane UC-B styles. Teal accent (#0f766e) only;
 * solid colours, no gradients, no purple/indigo. Monospace is used
 * only for code (backup codes, webhook URLs, snippet output). */
.w2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.w2-card { border: 1px solid #d7dee3; border-radius: 10px; padding: 0.9rem 1rem; background: #ffffff; }
.w2-flair { display: inline-block; font-size: 0.8rem; font-weight: 600; color: #0f766e;
  border: 1px solid #0f766e; border-radius: 999px; padding: 0.05rem 0.55rem; margin-right: 0.35rem; }
.w2-flair-live { color: #ffffff; background: #0f766e; border-color: #0f766e; }
.w2-error { color: #b42318; }
.w2-codes code, .w2-output { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.w2-codes { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.w2-output { white-space: pre-wrap; word-break: break-word; border: 1px solid #d7dee3;
  border-radius: 10px; padding: 0.9rem 1rem; background: #f7f9f9; }
.w2-result-btn { all: unset; cursor: pointer; display: block; width: 100%; }
.w2-result-btn:hover, .w2-result-btn:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; border-radius: 6px; }
#w2-runner-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 100%; }


/* ===== bundle segment: assets/css/modern-social.css ===== */
/* koddeit modern social skin — ADDITIVE override sheet, loaded last.
 * Only this file is new. It restyles the existing markup (no class renames,
 * no JS changes) in a modern social-app layout language: light gray app
 * background, white rounded cards, sticky top bar, icon nav with active
 * pills, story circles, pill composer, and a like/comment/share action bar.
 * Brand accent stays koddeit teal (#0f766e). No third-party brand assets.
 */

/* ---------- Base ---------- */
body {
  background: #f0f2f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main, .layout, .view, .feed-layout, .detail-layout, .profile-layout, .messages-layout { min-width: 0; }
img, video { max-width: 100%; }
h1 { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 21px; line-height: 1.25; font-weight: 700; }
.view-head p { color: #65676b; font-size: 15px; }
a { color: #0b5e57; }
:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; border-radius: 6px; }

/* ---------- Sticky top bar: logo left, search center, actions right ---------- */
.dc-topbar {
  background: #fff;
  border-bottom: 1px solid #e4e6eb;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}
.dc-topbar-inner {
  max-width: 1280px;
  min-height: 60px;
  align-items: center;
  gap: 16px;
}
.wordmark-logo { height: 36px; width: auto; }
.dc-search { max-width: 480px; }
.dc-search input {
  background: #f0f2f5;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
}
.dc-search input:focus { background: #fff; border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2); }
.dc-topbar-actions { gap: 12px; }
.dc-topbar-actions .notif summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0f2f5;
  list-style: none;
}
.dc-topbar-actions .notif summary:hover { background: #e4e6eb; }
.dc-topbar-actions .notif summary::-webkit-details-marker { display: none; }
.badge { background: #e11d48; color: #fff; font-size: 12px; font-weight: 700; }
#current-user-display { font-weight: 600; font-size: 14px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-topbar-actions .btn { border-radius: 999px; }

/* ---------- Demo banner: slim pill notice ---------- */
#demo-banner { background: #e6f4f1; border-bottom: 1px solid #99d5cd; }
#demo-banner .banner-inner { max-width: 1280px; padding: 8px 16px; font-size: 13px; }

/* ---------- Three-column app layout (desktop) ---------- */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 248px minmax(0, 680px) 320px;
    justify-content: center;
    gap: 24px;
    max-width: 1280px;
    padding: 24px 16px 32px;
  }
  .dc-nav { top: 84px; }
  .dc-sidebar { top: 84px; }
}

/* ---------- Left icon nav with active pill states ---------- */
.dc-nav .nav-btn {
  min-height: 46px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  gap: 12px;
}
.dc-nav .nav-btn .nav-icon { width: 22px; height: 22px; }
.dc-nav .nav-btn:hover { background: #f0f2f5; border-color: transparent; }
.dc-nav .nav-btn.is-active,
.dc-nav .nav-btn[aria-current="page"] {
  background: #e6f4f1;
  color: #0b5e57;
  border-color: transparent;
  font-weight: 700;
}
.dc-left-more summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 12px;
}
.dc-left-more summary:hover { background: #f0f2f5; }
.nav-note { border-radius: 20px; border: 1px solid #e4e6eb; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

/* ---------- Cards: white, rounded-2xl, soft shadow ---------- */
.dc-post-card, .dc-post, .dc-project-card, .dc-sidebar-card, .dc-composer,
.dc-profile-header, .dc-notification, #investor-list > article, #investor-list > div,
.dc-portfolio-card, .dc-community-form, .dc-community-post-form, .dc-story-form {
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: 16px 20px;
}
.dc-composer { background: #fff; }
.dc-sidebar-card { padding: 16px; }
.dc-sidebar-title { font-size: 17px; font-weight: 700; }
.dc-sidebar-row { padding: 10px 0; }
.dc-sidebar-name { font-size: 15px; }
.dc-sidebar-row button:not(.dc-sidebar-name) {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
}
.dc-sidebar-row button:not(.dc-sidebar-name):hover { background: #0b5e57; border-color: #0b5e57; }
.dc-sidebar-row .dc-sidebar-name {
  background: transparent;
  border: 0;
  color: #050505;
  padding: 0;
  font-weight: 700;
  box-shadow: none;
}

/* ---------- Buttons: pill, teal primary ---------- */
.btn { border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 15px; }
.btn-primary { background: #0f766e; border-color: #0f766e; color: #fff; }
.btn-primary:hover { background: #0b5e57; border-color: #0b5e57; }
.btn-ghost { background: #f0f2f5; border-color: transparent; }
.btn-ghost:hover { background: #e4e6eb; border-color: transparent; }

/* ---------- Avatars ---------- */
.dc-avatar {
  background: #e6f4f1;
  color: #0b5e57;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e4e6eb;
}
.dc-avatar--sm { width: 36px; height: 36px; font-size: 14px; }
.dc-avatar--lg { width: 96px; height: 96px; font-size: 28px; border-width: 4px; }

/* ---------- Stories: horizontal scrollable circles with gradient rings ---------- */
.dc-stories {
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: 16px 16px 8px;
  margin-bottom: 24px;
}
.dc-stories h2 { font-size: 17px; margin-bottom: 12px; }
#stories-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 12px;
  scrollbar-width: none;
}
#stories-strip::-webkit-scrollbar { display: none; }
.dc-story-item { min-width: 76px; scroll-snap-align: start; gap: 6px; }
.dc-story-item .dc-avatar,
.dc-story-item img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  /* Beat the base sheet's !important avatar fill: keep the dark avatar
     interior (white initials stay readable) and show the gradient only
     in the transparent border ring. */
  border: 4px solid transparent !important;
  background: linear-gradient(var(--ring, #0f766e), var(--ring, #0f766e)) padding-box,
              linear-gradient(45deg, #0f766e, #06b6d4, #14b8a6) border-box !important;
  box-shadow: none;
}
.dc-story-name { font-size: 12px; font-weight: 600; max-width: 76px; }
.dc-story-new { font-size: 12px; font-weight: 600; }

/* ---------- Composer: avatar + rounded input ---------- */
.dc-composer-row { align-items: center; gap: 12px; }
.dc-composer-row textarea {
  background: #f0f2f5;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 12px 16px;
  font-size: 15px;
}
.dc-composer-row textarea:focus { background: #fff; border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2); outline: none; }
.dc-composer-foot { gap: 8px; }
.dc-composer-foot button, .dc-composer-foot select { border-radius: 999px; }

/* ---------- Post cards: avatar/name/time hierarchy + action bar ---------- */
.dc-post-card { padding: 16px 20px 8px; }
.dc-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dc-post-head .dc-avatar { width: 40px; height: 40px; font-size: 15px; flex: 0 0 auto; }
.dc-post-head a, .dc-author-link { font-weight: 700; font-size: 15px; color: #050505; }
.dc-post-meta, .dc-post-head .dc-muted { color: #65676b; font-size: 13px; }
.dc-post-body { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.dc-post-body p { margin: 0 0 8px; }
.dc-post-media img { border-radius: 12px; }
.dc-post-tags { gap: 8px; }
.dc-post-actions {
  border-top: 1px solid #e4e6eb;
  margin-top: 12px;
  padding-top: 4px;
  gap: 4px;
}
.dc-post-actions .dc-action-btn {
  flex: 1 1 0;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 14px;
  color: #65676b;
  background: transparent;
}
.dc-post-actions .dc-action-btn:hover { background: #f0f2f5; }
.dc-post-actions .dc-action-btn.is-active { background: #e6f4f1; color: #0b5e57; }

/* ---------- Comments as bubbles ---------- */
.dc-comment { border-top: 1px solid #e4e6eb; }
.dc-comment-main {
  background: #f0f2f5;
  border-radius: 18px;
  padding: 10px 14px;
}
.dc-comment-author { font-weight: 700; font-size: 14px; }
.dc-comment-form input, .dc-comment-form textarea {
  background: #f0f2f5;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
}

/* ---------- Feed tabs as a pill bar ---------- */
.dc-feed-tabs {
  background: #f0f2f5;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.dc-feed-tabs .dc-tab, .dc-tabs .dc-tab { border-radius: 999px; padding: 8px 16px; font-size: 14px; }
.dc-feed-tabs .dc-tab.is-active { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); border-bottom-color: transparent; color: #050505; }

/* ---------- Trending tags as chips ---------- */
.dc-tag, .dc-category, .dc-status, .dc-testing-badge, .dc-tech-tag {
  background: #f0f2f5;
  border-color: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.dc-tag:hover, .dc-category:hover { background: #e4e6eb; }

/* ---------- Project cards ---------- */
.dc-project-card h3 { font-size: 18px; font-weight: 700; }
.dc-project-card .dc-project-open { color: #0b5e57; }

/* ---------- Profile header: cover + avatar + stats ---------- */
.dc-profile-header { padding: 0 0 20px; overflow: hidden; }
.dc-cover-band {
  min-height: 180px;
  background: linear-gradient(120deg, #0f766e, #14b8a6 55%, #06b6d4);
  border-bottom: 0;
  border-radius: 0;
}
.dc-cover { height: 180px; background: linear-gradient(120deg, #0f766e, #14b8a6 55%, #06b6d4); }
.dc-profile-head-main { position: relative; margin-top: -48px; padding: 0 20px; }
.dc-profile-head-text { padding-top: 8px; }
.dc-profile-head-text h1, .dc-profile-head-text h2 { font-size: 24px; }
.dc-stat { font-size: 15px; }
.dc-stat strong { font-size: 17px; }
.dc-profile-actions { padding: 0 20px; }

/* ---------- Messages: bubbles ---------- */
.dc-message { border: 0; border-radius: 18px; padding: 10px 14px; background: #f0f2f5; }
.dc-message--own { background: #0f766e; color: #fff; }
.dc-message--own a { color: #fff; }
.dc-conversation { border-radius: 12px; }
.dc-conv-name { font-weight: 700; }

/* ---------- Forms ---------- */
.mount input[type="text"], .mount input[type="search"], .mount input[type="email"],
.mount input[type="password"], .mount textarea, .mount select {
  border-radius: 12px;
  border-color: #dddfe2;
  padding: 10px 14px;
  font-size: 15px;
}
.mount input:focus, .mount textarea:focus, .mount select:focus { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2); outline: none; }

/* ---------- Footer ---------- */
.dc-footer { color: #65676b; font-size: 13px; text-align: center; }

/* ---------- Mobile: single column + bottom tab bar ---------- */
@media (max-width: 767px) {
  .dc-topbar-inner { min-height: 56px; padding: 8px 12px; }
  .wordmark-logo { height: 32px; }
  .layout { padding: 16px 12px 32px; }
  .dc-post-card, .dc-post, .dc-project-card, .dc-sidebar-card, .dc-composer,
  .dc-profile-header, .dc-notification, #investor-list > article, #investor-list > div,
  .dc-portfolio-card { border-radius: 16px; padding: 14px 16px; }
  .dc-profile-header { padding: 0 0 16px; }
  .dc-cover-band, .dc-cover { min-height: 120px; height: 120px; }
  .dc-profile-head-main { margin-top: -36px; padding: 0 16px; }
  .dc-avatar--lg { width: 72px; height: 72px; font-size: 22px; }
  .dc-bottom-nav {
    background: #fff;
    border-top: 1px solid #e4e6eb;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .dc-bottom-nav .nav-btn {
    min-height: 48px;
    padding: 6px 2px;
    font-size: 11px;
    color: #65676b;
  }
  .dc-bottom-nav .nav-icon { width: 24px; height: 24px; }
  .dc-bottom-nav .nav-btn.is-active,
  .dc-bottom-nav .nav-btn[aria-current="page"] { color: #0f766e; }
  .dc-post-actions .dc-action-btn { min-height: 44px; font-size: 13px; }
  .btn { min-height: 44px; }
  .dc-story-item { min-width: 72px; }
  .dc-stories button { white-space: nowrap; }
  h1 { font-size: 24px; }
}


/* ===== bundle segment: assets/css/social2-shell.css ===== */
/* koddeit social2 SHELL — Lane B.
 * Desktop three columns, X-style left nav, X-style right sidebar,
 * sticky top bar, icon-only mobile bottom tab bar.
 *
 * SCOPE: shell only (top bar, left nav + More, right sidebar,
 * mobile top/bottom bars, view containers). Centre-column contents
 * belong to other lanes; this sheet never restyles feed/project/
 * message/space cards beyond the shell containers.
 *
 * THEME: every shell colour comes from --social2-* tokens below.
 * Light defaults on :root; dark values under html[data-theme="dark"]
 * (the theme.js / DCTheme mechanism: data-theme="light"|"dark" on
 * <html>, System mode resolved through DCTheme by the System lane).
 * No shell rule hardcodes a light-only surface or text colour, so the
 * whole shell switches instantly with the theme — no white flash from
 * this sheet, no unreadable text. Icons use currentColor, so they
 * follow the token text colour in both modes.
 * Accent is koddeit teal #0f766e in both modes. No gradients,
 * no purple/indigo, no brand assets, no system emojis in chrome.
 * Type: clean modern sans for UI; monospace is never set here
 * (code keeps the tree's monospace).
 */

:root {
  --social2-bg: #f0f2f5;
  --social2-surface: #ffffff;
  --social2-surface-2: #f0f2f5;
  --social2-input-bg: #f0f2f5;
  --social2-text: #0f1419;
  --social2-muted: #65676b;
  --social2-line: #e4e6eb;
  --social2-hover: #e7e9ea;
  --social2-active-bg: #e6f4f1;
  --social2-active-text: #0b5e57;
  --social2-accent: #0f766e;
  --social2-accent-dark: #0b5e57;
  --social2-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  --social2-topbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  --social2-banner-bg: #e6f4f1;
  --social2-banner-border: #99d5cd;
  --social2-banner-strong: #0b5e57;
}

html[data-theme="dark"] {
  --social2-bg: #0f172a;
  --social2-surface: #1e293b;
  --social2-surface-2: #1e293b;
  --social2-input-bg: #0f172a;
  --social2-text: #e2e8f0;
  --social2-muted: #94a3b8;
  --social2-line: #334155;
  --social2-hover: #273449;
  --social2-active-bg: #0f766e;
  --social2-active-text: #ffffff;
  --social2-accent: #0f766e;
  --social2-accent-dark: #14b8a6;
  --social2-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --social2-topbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  --social2-banner-bg: #134e4a;
  --social2-banner-border: #0f766e;
  --social2-banner-strong: #99f6e4;
}

/* ---------- Shell base: no horizontal overflow ---------- */
body.social2-shell {
  background: var(--social2-bg);
  color: var(--social2-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

.social2-layout > * { min-width: 0; }
.social2-icon { width: 24px; height: 24px; flex: 0 0 auto; }

/* ---------- Sticky top bar: logo left, pill search centre, actions right ---------- */
.social2-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--social2-surface);
  border-bottom: 1px solid var(--social2-line);
  box-shadow: var(--social2-topbar-shadow);
}

.social2-topbar-inner {
  max-width: 1260px;
  min-height: 60px;
  align-items: center;
  gap: 12px 16px;
}

.social2-topbar .wordmark-logo { height: 34px; width: auto; }

.social2-search { flex: 1 1 220px; min-width: 0; max-width: 520px; }
.social2-search input {
  background: var(--social2-input-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--social2-text);
  padding: 10px 16px;
  font-size: 15px;
}
.social2-search input::placeholder { color: var(--social2-muted); }
.social2-search input:focus {
  background: var(--social2-surface);
  border-color: var(--social2-accent);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.25);
  outline: none;
}

.social2-topbar-actions { gap: 8px; flex-wrap: nowrap; }
.social2-topbar-actions .social2-notif summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--social2-text);
  background: transparent;
}
.social2-topbar-actions .social2-notif summary::-webkit-details-marker { display: none; }
.social2-topbar-actions .social2-notif summary:hover { background: var(--social2-hover); }
.social2-topbar-actions .social2-notif .notif-panel {
  background: var(--social2-surface);
  border: 1px solid var(--social2-line);
  color: var(--social2-text);
  box-shadow: var(--social2-shadow);
}
.social2-topbar-actions .social2-notif .notif-panel h2 { color: var(--social2-text); }

.social2-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--social2-text);
  cursor: pointer;
  flex: 0 0 auto;
}
.social2-theme-toggle:hover { background: var(--social2-hover); }
.social2-theme-toggle .social2-icon { width: 24px; height: 24px; }

.social2-avatar-btn { background: transparent; border: 0; padding: 0; }
.social2-user-display { color: var(--social2-text); }

/* ---------- Demo banner: shell chrome, so it follows the theme too ----------
   Base bug (flagged by Lane A): main.css dark paints the banner light
   amber (#fef3c7) and modern-social repaints it light mint in both
   modes, so dark mode kept a light banner. These token rules load last
   and match main.css dark's specificity, so dark wins in dark mode and
   the light look is unchanged in light mode. */
#demo-banner {
  background: var(--social2-banner-bg);
  border-bottom: 1px solid var(--social2-banner-border);
  color: var(--social2-text);
}
#demo-banner strong { color: var(--social2-banner-strong); }
#demo-banner code { color: var(--social2-text); }
html[data-theme="dark"] #demo-banner {
  background: var(--social2-banner-bg);
  border-bottom-color: var(--social2-banner-border);
  color: var(--social2-text);
}
html[data-theme="dark"] #demo-banner strong { color: var(--social2-banner-strong); }

/* ---------- Three-column layout ---------- */
.social2-main { min-width: 0; }

/* ---------- Left nav, X-style: large outlined icons + labels, pill rows ---------- */
.social2-left-nav .nav-btn {
  min-height: 52px;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 19px;
  font-weight: 400;
  gap: 16px;
  color: var(--social2-text);
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
}
.social2-left-nav .nav-btn .nav-icon { width: 26px; height: 26px; }
.social2-left-nav .nav-btn:hover { background: var(--social2-hover); border-color: transparent; }
.social2-left-nav .nav-btn.is-active,
.social2-left-nav .nav-btn[aria-current="page"] {
  background: var(--social2-active-bg);
  color: var(--social2-active-text);
  border-color: transparent;
  font-weight: 700;
}
.social2-left-nav .nav-btn .badge { margin-left: auto; }

/* More: same pill row as a nav item; panel items are compact rows. */
.social2-left-nav .social2-more { width: 100%; }
.social2-left-nav .social2-more summary {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 400;
  color: var(--social2-text);
  white-space: nowrap;
}
.social2-left-nav .social2-more summary::-webkit-details-marker { display: none; }
.social2-left-nav .social2-more summary:hover { background: var(--social2-hover); }
.social2-left-nav .social2-more summary .nav-icon { width: 26px; height: 26px; }
.social2-left-nav .social2-more .nav-btn {
  min-height: 42px;
  padding: 8px 14px;
  font-size: 15px;
  gap: 12px;
}
.social2-left-nav .social2-more .nav-btn .nav-icon { width: 22px; height: 22px; }
.social2-left-nav .nav-note {
  background: var(--social2-surface);
  border: 1px solid var(--social2-line);
  color: var(--social2-muted);
}
.social2-left-nav .nav-note p { color: var(--social2-muted); }

/* ---------- Right sidebar, X-style cards ---------- */
.social2-sidebar .dc-sidebar-card {
  background: var(--social2-surface);
  border: 1px solid var(--social2-line);
  border-radius: 16px;
  box-shadow: var(--social2-shadow);
  padding: 16px;
}
.social2-sidebar .dc-sidebar-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--social2-text);
}
.social2-sidebar .dc-sidebar-empty,
.social2-sidebar .dc-sidebar-meta,
.social2-sidebar .dc-sidebar-handle { color: var(--social2-muted); }
.social2-sidebar .dc-sidebar-name { color: var(--social2-text); }
.social2-sidebar .dc-sidebar-row { border-color: var(--social2-line); }

/* Sidebar search: a real control — one tap opens the Search view
   (existing data-nav="search" wiring, no new JS). */
.social2-side-search-card { padding: 12px !important; }
.social2-side-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--social2-input-bg);
  color: var(--social2-muted);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.social2-side-search:hover { background: var(--social2-hover); color: var(--social2-text); }
.social2-side-search .social2-icon { width: 20px; height: 20px; }

/* ---------- Desktop: three columns, independently scrolling rails ---------- */
@media (min-width: 1024px) {
  .layout.social2-layout {
    grid-template-columns: 264px minmax(0, 600px) 350px;
    justify-content: center;
    gap: 24px;
    max-width: 1260px;
    padding: 24px 16px 32px;
  }
  .social2-left-nav {
    position: sticky;
    top: 72px;
    display: block;
    grid-column: auto;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }
  .social2-left-nav .nav-btn { display: flex; width: 100%; }
  .social2-sidebar {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }
}

/* ---------- Tablet: nav becomes a horizontal row, sidebar below main ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .social2-left-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    grid-column: 1 / -1;
    gap: 4px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .social2-left-nav .nav-btn {
    flex: 0 0 auto;
    font-size: 16px;
    min-height: 46px;
  }
  .social2-left-nav .nav-btn .nav-icon { width: 24px; height: 24px; }
  /* Left-nav More has no wrapper div, so on tablet it expands in place
     below the row (one tap, full list, page scrolls) — no fake dropdown. */
  .social2-left-nav .social2-more { width: auto; flex: 0 0 auto; }
  .social2-left-nav .social2-more summary { font-size: 16px; min-height: 46px; }
  .social2-sidebar { grid-column: 1 / -1; }
}

/* ---------- Mobile: compact top bar, icon-only bottom tab bar ---------- */
@media (max-width: 767px) {
  .social2-topbar-inner { min-height: 56px; padding: 8px 12px; gap: 8px; }
  .social2-topbar .wordmark-logo { height: 30px; }
  .social2-user-display { display: none; }
  .social2-search { order: 3; flex: 1 1 100%; max-width: none; }
  .social2-topbar-actions { gap: 4px; }
  .social2-topbar-actions .btn { padding: 8px 12px; }

  .social2-main { padding-bottom: 88px; }

  /* Six items (5 tabs + More), not seven: override the old repeat(7). */
  .social2-bottom-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: var(--social2-surface);
    border-top: 1px solid var(--social2-line);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .social2-bottom-nav .nav-btn {
    min-height: 48px;
    padding: 6px 2px;
    color: var(--social2-muted);
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
  }
  .social2-bottom-nav .nav-btn span { display: none; }
  .social2-bottom-nav .nav-icon { width: 26px; height: 26px; }
  .social2-bottom-nav .nav-btn.is-active,
  .social2-bottom-nav .nav-btn[aria-current="page"] { color: var(--social2-accent); }
  .social2-bottom-nav .nav-btn.is-active .nav-icon,
  .social2-bottom-nav .nav-btn[aria-current="page"] .nav-icon { stroke-width: 2.2; }

  /* More tab: icon-only like the other tabs; its panel is a sheet above the bar. */
  .social2-bottom-nav .social2-more-nav { min-width: 0; }
  .social2-bottom-nav .social2-more-nav summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 48px;
    padding: 6px 2px;
    cursor: pointer;
    list-style: none;
    color: var(--social2-muted);
  }
  .social2-bottom-nav .social2-more-nav summary::-webkit-details-marker { display: none; }
  .social2-bottom-nav .social2-more-nav summary span { display: none; }
  .social2-bottom-nav .social2-more-nav summary .nav-icon { width: 26px; height: 26px; }
  .social2-bottom-nav .social2-more-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 62px;
    z-index: 24;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--social2-surface);
    border-top: 1px solid var(--social2-line);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .social2-bottom-nav .social2-more-panel .nav-btn {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 15px;
    color: var(--social2-text);
  }
  .social2-bottom-nav .social2-more-panel .nav-btn span { display: inline; }
  .social2-bottom-nav .social2-more-panel .nav-btn .nav-icon { width: 22px; height: 22px; }
  .social2-bottom-nav .social2-more-panel .nav-btn:hover { background: var(--social2-hover); }
}

/* Smallest phones: tighten chrome, never overflow. */
@media (max-width: 400px) {
  .social2-topbar .wordmark-logo { height: 28px; }
  .social2-topbar-actions .btn { padding: 6px 10px; font-size: 14px; }
  .social2-theme-toggle { width: 36px; height: 36px; }
}


/* ===== bundle segment: assets/css/social2-feed.css ===== */
/* koddeit social2 FEED lane — ADDITIVE override sheet, loaded AFTER
 * modern-social.css (coordinator adds the <link>; this lane does not edit
 * index.html). It restyles ONLY the feed lane's own markup/classes:
 * stories strip, composer, post cards, action bar, comment input, tabs
 * and tag filter. Nothing here touches profiles, projects, messages or
 * any other lane's markup.
 *
 * THEME RULE (dark-mode order, 2026-10-30): NO component rule below
 * hardcodes a light-only colour. Every surface/text/line/accent colour
 * comes from a --s2-* token, defined for light by default and redefined
 * under html[data-theme="dark"] (the System lane's DCTheme switch).
 * The one deliberate exception is the brand teal button text, which is
 * itself tokenised (--s2-on-accent: white on teal in light, near-black
 * on light-teal in dark). Story rings use the story's own colour token
 * (--story-ring, inline style from stories.js), which reads on both
 * themes; viewed stories fall back to the theme line token.
 * Twemoji reaction/action icons are full-colour SVGs: they need no
 * filter and stay at full contrast on both card colours.
 * Typography: clean modern sans for UI (inherited); monospace ONLY for
 * code blocks. No gradients, no brand assets of other networks.
 */

:root {
  --s2-bg: #f0f2f5;
  --s2-card: #ffffff;
  --s2-ink: #050505;
  --s2-muted: #65676b;
  --s2-line: #e4e6eb;
  --s2-input: #f0f2f5;
  --s2-hover: #f0f2f5;
  --s2-accent: #0f766e;
  --s2-accent-soft: #e6f4f1;
  --s2-accent-ink: #0b5e57;
  --s2-on-accent: #ffffff;
  --s2-cover: #e6f4f1;
  --s2-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
  --s2-bg: #18191a;
  --s2-card: #242526;
  --s2-ink: #e4e6eb;
  --s2-muted: #b0b3b8;
  --s2-line: #3e4042;
  --s2-input: #3a3b3c;
  --s2-hover: #3a3b3c;
  --s2-accent: #2dd4bf;
  --s2-accent-soft: #134e4a;
  --s2-accent-ink: #99f6e4;
  --s2-on-accent: #042f2e;
  --s2-cover: #1f3d3a;
  --s2-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- Feed column surfaces ---------- */
#view-feed .feed-layout { gap: 16px; }

#view-feed .dc-social2-strip,
#view-feed .dc-social2-composer,
#view-feed .dc-social2-post {
  background: var(--s2-card);
  border: 1px solid var(--s2-line);
  border-radius: 12px;
  box-shadow: var(--s2-shadow);
}

/* ---------- Stories strip (Instagram pattern, own data only) ---------- */
#view-feed .dc-social2-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: thin;
}

#view-feed .dc-social2-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  padding: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--s2-ink);
}

#view-feed .dc-social2-story-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--story-ring, var(--s2-accent));
  background: var(--s2-card);
}

#view-feed .dc-social2-story--viewed .dc-social2-story-ring {
  border-color: var(--s2-line);
}

#view-feed .dc-social2-story-ring .dc-avatar {
  width: 54px;
  height: 54px;
  font-size: 17px;
  border: none;
}

#view-feed .dc-social2-story-ring--create {
  border-style: dashed;
  border-color: var(--s2-accent);
  background: var(--s2-input);
}

#view-feed .dc-social2-story-plus {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--s2-accent);
}

#view-feed .dc-social2-story .dc-story-name {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--s2-ink);
}

#view-feed .dc-social2-story .dc-story-new {
  font-size: 11px;
  font-weight: 700;
  color: var(--s2-accent);
}

/* ---------- Composer (Facebook/X pattern) ---------- */
#view-feed .dc-social2-composer {
  padding: 12px 16px 8px;
}

#view-feed .dc-social2-composer-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#view-feed .dc-social2-composer-row .dc-avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

#view-feed .dc-social2-composer textarea {
  flex: 1;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--s2-input);
  color: var(--s2-ink);
  font-size: 15px;
  resize: vertical;
}

#view-feed .dc-social2-composer textarea::placeholder {
  color: var(--s2-muted);
}

#view-feed .dc-social2-composer textarea:focus {
  background: var(--s2-card);
  border-color: var(--s2-accent);
  outline: none;
}

#view-feed .dc-social2-composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--s2-line);
}

#view-feed .dc-social2-composer-action {
  padding: 8px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--s2-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#view-feed .dc-social2-composer-action:hover {
  background: var(--s2-hover);
  color: var(--s2-ink);
}

#view-feed .dc-social2-composer input,
#view-feed .dc-social2-composer select {
  background: var(--s2-input);
  border: 1px solid var(--s2-line);
  border-radius: 8px;
  color: var(--s2-ink);
}

/* ---------- Tabs + tag filter ---------- */
#view-feed .dc-social2-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#view-feed .dc-social2-tabs .dc-tab {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: var(--s2-muted);
  font-size: 14px;
  font-weight: 600;
}

#view-feed .dc-social2-tabs .dc-tab.is-active {
  background: var(--s2-card);
  border-color: var(--s2-line);
  box-shadow: var(--s2-shadow);
  color: var(--s2-ink);
}

#view-feed .dc-social2-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--s2-muted);
  font-size: 13px;
}

#view-feed .dc-social2-tag-filter button {
  padding: 6px 12px;
  border: 1px solid var(--s2-line);
  border-radius: 999px;
  background: var(--s2-card);
  color: var(--s2-ink);
  font-size: 13px;
  cursor: pointer;
}

#view-feed .dc-social2-tag-filter button[aria-pressed="true"] {
  background: var(--s2-accent-soft);
  border-color: var(--s2-accent);
  color: var(--s2-accent-ink);
  font-weight: 700;
}

/* ---------- Post cards ---------- */
#view-feed .dc-social2-post {
  padding: 16px 16px 8px;
  margin-bottom: 12px;
}

#view-feed .dc-social2-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#view-feed .dc-social2-post-head .dc-avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

#view-feed .dc-social2-post-meta .dc-author-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--s2-ink);
}

#view-feed .dc-social2-post-meta .dc-handle,
#view-feed .dc-social2-post-meta .dc-time,
#view-feed .dc-social2-post .dc-time {
  color: var(--s2-muted);
  font-size: 13px;
}

#view-feed .dc-social2-follow-btn {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--s2-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--s2-accent-ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#view-feed .dc-social2-follow-btn.is-active {
  background: var(--s2-accent-soft);
}

#view-feed .dc-social2-post .dc-post-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--s2-ink);
}

#view-feed .dc-social2-post .dc-post-body p {
  margin: 0 0 8px;
}

/* Media: prominent, full card width — never a bare link. */
#view-feed .dc-social2-post-media {
  margin: 12px 0;
}

#view-feed .dc-social2-post-media img,
#view-feed .dc-social2-post-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border-radius: 12px;
}

/* Project cover: real title/summary/category/tech, no invented image. */
#view-feed .dc-social2-project-cover {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--s2-line);
  border-radius: 12px;
  background: var(--s2-cover);
}

#view-feed .dc-social2-project-cover-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s2-accent-ink);
}

#view-feed .dc-social2-project-cover-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

#view-feed .dc-social2-project-cover-title a {
  color: var(--s2-ink);
}

#view-feed .dc-social2-project-cover-summary {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--s2-muted);
}

#view-feed .dc-social2-project-cover-tech {
  margin: 0;
  font-size: 13px;
  color: var(--s2-muted);
}

#view-feed .dc-social2-post .dc-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

#view-feed .dc-social2-post .dc-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--s2-input);
  color: var(--s2-accent-ink);
  font-size: 13px;
}

/* Code posts: monospace ONLY here, on a theme token surface. */
#view-feed .dc-social2-post .dc-code-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--s2-input);
  color: var(--s2-ink);
  border-radius: 8px;
  overflow-x: auto;
}

/* ---------- Action bar: Twemoji icon + count ---------- */
#view-feed .dc-social2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--s2-line);
}

#view-feed .dc-social2-actions .dc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--s2-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#view-feed .dc-social2-actions .dc-action-btn:hover {
  background: var(--s2-hover);
  color: var(--s2-ink);
}

#view-feed .dc-social2-actions .dc-action-btn.is-active {
  background: var(--s2-accent-soft);
  color: var(--s2-accent-ink);
}

#view-feed .dc-social2-actions .dc-emoji {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

#view-feed .dc-social2-actions .dc-quote-count,
#view-feed .dc-social2-actions .dc-view-count {
  color: var(--s2-muted);
  font-size: 13px;
}

/* ---------- Comments: bubble + pill input ---------- */
#view-feed .dc-social2-post .dc-comment-main {
  background: var(--s2-input);
  border-radius: 16px;
  padding: 8px 12px;
  color: var(--s2-ink);
}

#view-feed .dc-social2-post .dc-comment-author {
  color: var(--s2-ink);
}

#view-feed .dc-social2-comment-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

#view-feed .dc-social2-comment-form .dc-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

/* Label stays in the DOM (for/id association) but the placeholder
 * carries the visible prompt, Facebook/X-style. */
#view-feed .dc-social2-comment-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#view-feed .dc-social2-comment-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--s2-input);
  color: var(--s2-ink);
  font-size: 14px;
}

#view-feed .dc-social2-comment-form input::placeholder {
  color: var(--s2-muted);
}

#view-feed .dc-social2-comment-form input:focus {
  background: var(--s2-card);
  border-color: var(--s2-accent);
  outline: none;
}

#view-feed .dc-social2-comment-form button[type="submit"] {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--s2-accent);
  color: var(--s2-on-accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Focus + small screens ---------- */
#view-feed .dc-social2-story:focus-visible,
#view-feed .dc-social2-composer-action:focus-visible,
#view-feed .dc-social2-follow-btn:focus-visible,
#view-feed .dc-social2-actions .dc-action-btn:focus-visible {
  outline: 3px solid var(--s2-accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  #view-feed .dc-social2-post {
    padding: 12px 12px 8px;
  }

  #view-feed .dc-social2-post-head .dc-avatar,
  #view-feed .dc-social2-composer-row .dc-avatar {
    width: 36px;
    height: 36px;
  }

  #view-feed .dc-social2-follow-btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  #view-feed .dc-social2-actions .dc-action-btn {
    padding: 8px 8px;
    font-size: 13px;
  }
}

/* Coordinator merge fix: story creation form is collapsed by default (Instagram pattern: tap Your story / Share a story to open it), so the feed first viewport shows the strip, composer, and posts — not a full form. */
#dc-story-create{display:none}
#dc-story-create.dc-social2-story-form-open{display:block}

/* Coordinator merge fix: tag pills readable in dark mode (were white pills with light text in dark). */
html[data-theme="dark"] .dc-tag-pick, html[data-theme="dark"] #view-feed .dc-tag, html[data-theme="dark"] .dc-tag-picker .dc-tag-pick { background:#232e42; color:#f1f5f9; border-color:#334155; }
html[data-theme="dark"] .dc-tag-pick.is-active { background:#0f766e; color:#ffffff; }
details.dc-tag-picker summary { cursor:pointer; }


/* ===== bundle segment: assets/css/social2-sections.css ===== */
/* koddeit social2 — Lane C: Profile / Projects / Messages.
 * ADDITIVE sheet for this lane only. It styles only markup/classes
 * introduced by profiles.js, projects.js and messages.js in this lane
 * (s2-* classes, plus the lane's grid/split-view layout hooks on
 * #project-grid, #project-filters and #view-messages .messages-layout).
 * It never edits main.css or modern-social.css.
 *
 * THEME RULE (dark mode): no colour below is light-only. Light values
 * live in --s2-* tokens; html[data-theme="dark"] (the theme.js switch
 * the System lane owns) redefines the same tokens to the dark slate
 * scale, and the explicit dark block at the end restates every s2
 * surface/text/border so a token change elsewhere cannot leave a
 * section light or unreadable. Solid teal accent #0f766e in both
 * modes; no purple/indigo, no gradients. Category cover bands keep
 * their authored solid category colour (white letter on solid colour
 * reads in both modes). Monospace is never used here — UI text is
 * the clean modern sans from the base sheets.
 * COORDINATOR NOTE: this file is NOT linked from index.html yet
 * (Lane C may not edit index.html). Add:
 *   <link rel="stylesheet" href="assets/css/social2-sections.css">
 * after modern-social.css, or these classes fall back to base styling.
 */
:root {
  --s2-surface: #ffffff;
  --s2-surface-2: #f0f2f5;
  --s2-ink: #0f172a;
  --s2-ink-soft: #1c2937;
  --s2-muted: #65676b;
  --s2-line: #e4e6eb;
  --s2-teal: #0f766e;
  --s2-teal-dark: #0b5e57;
  --s2-teal-soft: #e6f4f1;
  --s2-bubble-other: #f0f2f5;
  --s2-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] {
  --s2-surface: #1e293b;
  --s2-surface-2: #0f172a;
  --s2-ink: #e2e8f0;
  --s2-ink-soft: #f1f5f9;
  --s2-muted: #94a3b8;
  --s2-line: #334155;
  --s2-teal: #2dd4bf;
  --s2-teal-dark: #5eead4;
  --s2-teal-soft: #134e4a;
  --s2-bubble-other: #334155;
  --s2-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Twemoji in UI chrome: fixed 18px, never a system emoji glyph. */
.s2-emoji { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }

/* ---------- Profile: Instagram/Facebook-style header ---------- */
.s2-profile { background: var(--s2-surface); border: 1px solid var(--s2-line); border-radius: 20px; box-shadow: var(--s2-shadow); overflow: hidden; }
.s2-profile .dc-cover-band { background: var(--s2-teal); min-height: 180px; }
.s2-profile-head { display: flex; gap: 20px; align-items: flex-start; margin-top: -48px; padding: 0 20px; }
.s2-profile-head .dc-profile-head-text h2 { color: var(--s2-ink); font-size: 24px; }
.s2-profile .dc-handle { color: var(--s2-muted); }
.s2-profile .dc-role-badge { background: var(--s2-teal-soft); color: var(--s2-teal-dark); border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 13px; }
.s2-stats { display: flex; gap: 28px; padding: 16px 20px 4px; border-top: 1px solid var(--s2-line); margin-top: 16px; }
.s2-stat { display: flex; flex-direction: column; }
.s2-stat strong { font-size: 18px; color: var(--s2-ink); }
.s2-stat span { color: var(--s2-muted); font-size: 14px; }
.s2-profile-actions { padding: 12px 20px 0; }
.s2-profile .dc-tabs { border-top: 1px solid var(--s2-line); border-bottom: 1px solid var(--s2-line); margin-top: 16px; }
.s2-profile .dc-tab { color: var(--s2-muted); }
.s2-profile .dc-tab.is-active { color: var(--s2-teal-dark); border-bottom-color: var(--s2-teal); }
.s2-profile .dc-tab-panel { padding: 16px 20px 0; color: var(--s2-ink); }
.s2-people { padding: 0 20px 4px; color: var(--s2-ink); }
.s2-people h3 { color: var(--s2-ink); }

/* Profile grids: posts and projects as square-ish tiles, real content only. */
.s2-post-grid, .s2-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s2-post-tile, .s2-project-tile { background: var(--s2-surface); border: 1px solid var(--s2-line); border-radius: 16px; padding: 14px; overflow: hidden; color: var(--s2-ink); }
.s2-post-tile p { margin: 0 0 8px; overflow-wrap: anywhere; }
.s2-post-tile small, .s2-project-tile small { color: var(--s2-muted); }
.s2-project-tile .dc-project-open { color: var(--s2-teal-dark); }
.s2-more { color: var(--s2-ink); }
.s2-more h3 { color: var(--s2-ink); }
.s2-more-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Projects: Instagram-grid directory + detail tabs ---------- */
.s2-project-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--s2-surface); border: 1px solid var(--s2-line); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
.s2-project-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s2-project-card { background: var(--s2-surface); border: 1px solid var(--s2-line); border-radius: 20px; box-shadow: var(--s2-shadow); overflow: hidden; }
.s2-project-cover { height: 140px; display: flex; align-items: center; justify-content: center; }
.s2-project-cover .dc-cover-letter { color: #ffffff; font-size: 44px; font-weight: 800; }
.s2-project-body { padding: 16px; color: var(--s2-ink); }
.s2-project-body h3 { color: var(--s2-ink); }
.s2-project-body .dc-project-open { color: var(--s2-teal-dark); }
.s2-project-author { display: flex; align-items: center; gap: 8px; }
.s2-project-author .dc-owner-link { color: var(--s2-ink); }
.s2-detail-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--s2-line); margin: 16px 0; }
.s2-detail-panel { display: none; color: var(--s2-ink); }
.s2-detail-panel.is-active { display: block; }
.s2-detail-panel h2, .s2-detail-panel h3, .s2-detail-panel h4 { color: var(--s2-ink); }

/* ---------- Messages: Messenger/X-DM split view ---------- */
#view-messages .messages-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
#view-messages .s2-conv-list { background: var(--s2-surface); border: 1px solid var(--s2-line); border-radius: 20px; box-shadow: var(--s2-shadow); padding: 8px; max-height: 640px; overflow-y: auto; }
.s2-conv-item { background: var(--s2-surface); border: 1px solid transparent; border-radius: 12px; color: var(--s2-ink); }
.s2-conv-item:hover { background: var(--s2-surface-2); }
.s2-conv-item.is-active { background: var(--s2-teal-soft); border-color: var(--s2-teal); }
.s2-conv-item .dc-conv-name { color: var(--s2-ink); }
.s2-conv-item .dc-conv-preview, .s2-conv-item .dc-conv-time, .s2-conv-item .dc-conv-handle { color: var(--s2-muted); }
.s2-thread { background: var(--s2-surface); border: 1px solid var(--s2-line); border-radius: 20px; box-shadow: var(--s2-shadow); padding: 16px; max-height: 520px; overflow-y: auto; }
.s2-thread-header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--s2-line); position: sticky; top: 0; background: var(--s2-surface); }
.s2-thread-name { font-weight: 700; color: var(--s2-ink); }
.s2-thread-header .dc-handle { color: var(--s2-muted); }
.s2-thread .s2-back-btn { display: none; }
.s2-message { background: var(--s2-bubble-other); color: var(--s2-ink); border-radius: 18px; }
.s2-message.dc-message--own { background: var(--s2-teal); color: #ffffff; }
.s2-message.dc-message--own .dc-message__time { color: rgba(255, 255, 255, 0.85); }
.s2-message .dc-message__time { color: var(--s2-muted); }

/* ---------- Explicit dark-mode restatement (belt and braces) ---------- */
html[data-theme="dark"] .s2-profile,
html[data-theme="dark"] .s2-post-tile,
html[data-theme="dark"] .s2-project-tile,
html[data-theme="dark"] .s2-project-filters,
html[data-theme="dark"] .s2-project-card,
html[data-theme="dark"] #view-messages .s2-conv-list,
html[data-theme="dark"] .s2-thread { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .s2-profile-head .dc-profile-head-text h2,
html[data-theme="dark"] .s2-stat strong,
html[data-theme="dark"] .s2-people h3,
html[data-theme="dark"] .s2-more h3,
html[data-theme="dark"] .s2-project-body h3,
html[data-theme="dark"] .s2-detail-panel h2,
html[data-theme="dark"] .s2-detail-panel h3,
html[data-theme="dark"] .s2-detail-panel h4,
html[data-theme="dark"] .s2-conv-item .dc-conv-name,
html[data-theme="dark"] .s2-thread-name { color: #f1f5f9; }
html[data-theme="dark"] .s2-profile .dc-handle,
html[data-theme="dark"] .s2-stat span,
html[data-theme="dark"] .s2-post-tile small,
html[data-theme="dark"] .s2-project-tile small,
html[data-theme="dark"] .s2-conv-item .dc-conv-preview,
html[data-theme="dark"] .s2-conv-item .dc-conv-time,
html[data-theme="dark"] .s2-thread-header .dc-handle,
html[data-theme="dark"] .s2-message .dc-message__time { color: #94a3b8; }
html[data-theme="dark"] .s2-profile .dc-tab { color: #cbd5e1; }
html[data-theme="dark"] .s2-profile .dc-tab.is-active { color: #5eead4; border-bottom-color: #2dd4bf; }
html[data-theme="dark"] .s2-profile .dc-role-badge { background: #134e4a; color: #5eead4; }
html[data-theme="dark"] .s2-conv-item.is-active { background: #134e4a; border-color: #2dd4bf; }
html[data-theme="dark"] .s2-thread-header { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .s2-message { background: #334155; color: #e2e8f0; }
html[data-theme="dark"] .s2-message.dc-message--own { background: #0f766e; color: #ffffff; }

/* ---------- Mobile: grids collapse, messages stack ---------- */
@media (max-width: 767px) {
  .s2-profile-head { flex-direction: column; gap: 8px; margin-top: -36px; }
  .s2-profile .dc-cover-band { min-height: 120px; }
  .s2-stats { gap: 16px; flex-wrap: wrap; }
  .s2-post-grid, .s2-project-grid, .s2-project-directory { grid-template-columns: 1fr 1fr; }
  #view-messages .messages-layout { grid-template-columns: 1fr; }
  #view-messages.s2-thread-open .s2-conv-list { display: none; }
  .s2-thread .s2-back-btn { display: inline-block; }
  .s2-thread { max-height: none; }
}
@media (max-width: 420px) {
  .s2-post-grid, .s2-project-grid, .s2-project-directory { grid-template-columns: 1fr; }
}


/* ===== bundle segment: assets/css/social2-system.css ===== */
/* koddeit social2 system sheet — Lane D (tokens, dark mode, icons, Twemoji).
 *
 * LOAD ORDER: this file loads LAST, after assets/css/modern-social.css.
 * It is a visual system only: it restyles shared surfaces and controls
 * through tokens and generic selectors. It adds no feature, removes no
 * view, nav key, button or form, and hides nothing.
 *
 * WHAT IT DELIBERATELY DOES NOT DEFINE (other lanes own these):
 * story rings, post cards, action bars, profile covers, project grids
 * and DM split layouts are NOT styled by class name here. Post cards
 * still get a dark surface through the generic rule
 * `html[data-theme="dark"] main article` (posts render as <article>
 * elements), which is a system surface rule, not a post-card definition.
 *
 * HOW DARK MODE IS SELECTED (no second toggle is invented here):
 * the existing wiring in assets/js/theme.js owns the choice. It stores
 * "light" | "dark" in localStorage under "devconnect_theme", writes it
 * to <html data-theme="..."> on load and on every change, and renders
 * the #dc-theme-toggle button into the Appearance view
 * (#appearance-content). The System / Light / Dark mode picker in
 * assets/js/vb-theme-auto.js writes through the same mechanism, so a
 * manual Light/Dark choice overrides System until System is picked
 * again, and System follows the OS prefers-color-scheme query. Theme
 * scheduling (assets/js/t2-lowdata-theme.js) defaults to OFF: saving
 * night times is the opt-in, and it never silently overrides the
 * light default. This sheet only reads html[data-theme="dark"]; it
 * never sets the theme itself, so there is no filter/invert hack and
 * no second source of truth.
 *
 * COLOURS: solid colours only. No multi-colour gradients, no
 * gradient text, no generic hero. The teal accent fill stays #0f766e
 * in both modes; on dark backgrounds accent *text* uses the lighter
 * teal #5eead4 (same as the base dark link colour) so it stays
 * readable — a dark teal on a near-black card would be too dim.
 * Avatar fills are owned by the base sheet's solid per-user disc
 * rule; this sheet only sets avatar size, shape and ring colours.
 */

/* ---------- 1. Tokens (light) ---------- */
:root {
  /* App surfaces. Light grey app background, white cards, hairlines. */
  --dc-paper: #eef1f4;
  --dc-surface: #ffffff;
  --dc-surface-2: #f7f8fa;
  --dc-surface-3: #f0f2f5;
  --dc-ink: #0f172a;
  --dc-ink-soft: #334155;
  --dc-muted: #64748b;
  --dc-muted-light: #94a3b8;
  --dc-line: #e2e8f0;
  --dc-line-strong: #cbd5e1;
  /* Brand accent: koddeit teal only. */
  --dc-accent: #0f766e;
  --dc-accent-dark: #0b5e57;
  --dc-accent-soft: #e6f4f1;
  --dc-accent-border: #99d5cd;
  --dc-accent-text-dark: #5eead4;
  --dc-accent-text-dark-hover: #99f6e4;
  /* Status colours (solid, used sparingly). */
  --dc-danger: #b42318;
  --dc-danger-soft: #fef2f2;
  --dc-warn-bg: #fef3c7;
  --dc-warn-ink: #92400e;
  --dc-live: #dc2626;
  /* Type: clean modern sans for UI; monospace ONLY for code. */
  --dc-font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Shape and depth: pills for actions, soft cards, hairline borders. */
  --dc-radius-sm: 6px;
  --dc-radius-md: 12px;
  --dc-radius-lg: 16px;
  --dc-radius-card: 20px;
  --dc-radius-pill: 999px;
  --dc-shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  --dc-shadow-md: 0 4px 12px rgb(15 23 42 / .08);
  --dc-focus-ring: #0f766e;
  /* Icon grid: one size, one stroke language (see section 6). */
  --dc-icon-size: 20px;
  --dc-icon-stroke: 1.8;
}

/* Mirror the shared tokens onto the base sheet's variable names so any
 * lane or component that reads var(--paper) / var(--surface) /
 * var(--ink) / var(--accent) follows the active mode too. Light values
 * match the base sheet's frozen tokens exactly, so light mode is a
 * no-op here; dark values are the real dark theme below. */
:root {
  --paper: var(--dc-paper);
  --surface: var(--dc-surface);
  --surface-2: var(--dc-surface-2);
  --ink: var(--dc-ink);
  --ink-soft: var(--dc-ink-soft);
  --muted: var(--dc-muted);
  --muted-light: var(--dc-muted-light);
  --line: var(--dc-line);
  --line-strong: var(--dc-line-strong);
  --accent: var(--dc-accent);
  --accent-dark: var(--dc-accent-dark);
  --accent-soft: var(--dc-accent-soft);
  --accent-border: var(--dc-accent-border);
  --focus-ring: var(--dc-focus-ring);
}

/* ---------- 2. Dark tokens (genuine dark theme, not a filter) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Near-black app background, dark cards, light readable text. */
  --dc-paper: #0b0f16;
  --dc-surface: #151c28;
  --dc-surface-2: #1c2536;
  --dc-surface-3: #232e42;
  --dc-ink: #f1f5f9;
  --dc-ink-soft: #cbd5e1;
  --dc-muted: #94a3b8;
  --dc-muted-light: #64748b;
  --dc-line: #263244;
  --dc-line-strong: #334155;
  /* Accent fill unchanged; accent text lightens for readability. */
  --dc-accent: #0f766e;
  --dc-accent-dark: #5eead4;
  --dc-accent-soft: #134e4a;
  --dc-accent-border: #2dd4bf;
  --dc-danger: #f87171;
  --dc-danger-soft: #3f1d1d;
  --dc-warn-bg: #422006;
  --dc-warn-ink: #fde68a;
  --dc-live: #f87171;
  --dc-shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --dc-shadow-md: 0 4px 12px rgb(0 0 0 / .45);
  --dc-focus-ring: #5eead4;
  --paper: var(--dc-paper);
  --surface: var(--dc-surface);
  --surface-2: var(--dc-surface-2);
  --ink: var(--dc-ink);
  --ink-soft: var(--dc-ink-soft);
  --muted: var(--dc-muted);
  --muted-light: var(--dc-muted-light);
  --line: var(--dc-line);
  --line-strong: var(--dc-line-strong);
  --accent: var(--dc-accent);
  --accent-dark: var(--dc-accent-dark);
  --accent-soft: var(--dc-accent-soft);
  --accent-border: var(--dc-accent-border);
  --focus-ring: var(--dc-focus-ring);
}

/* Paint the viewport itself in the active mode colour so switching
 * never flashes a white page behind the app. */
html { background: var(--dc-paper); }
html[data-theme="dark"] { background: var(--dc-paper); }

/* ---------- 3. Base type and page surface ---------- */
body {
  background: var(--dc-paper);
  color: var(--dc-ink);
  font-family: var(--dc-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Same specificity as the base sheet's dark body rule, but loaded
 * last, so the dark token values (not the base sheet's hardcoded
 * dark slate) are what actually paint the page. Verified by computed
 * style: dark body background must read rgb(11, 15, 22) (#0b0f16). */
html[data-theme="dark"] body {
  background: var(--dc-paper);
  color: var(--dc-ink);
}

/* Sentence case everywhere in this sheet: no uppercase eyebrow
 * labels, no letter-spaced shout labels. */
h1, h2, h3, h4, h5, h6 { text-transform: none; }
h1 { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--dc-ink); }
h2 { font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--dc-ink); }
h3 { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--dc-ink); }
p { line-height: 1.55; }

/* Links: dark teal on light, light teal on dark. Never dark-on-dark. */
a { color: var(--dc-accent-dark); }
a:hover { color: var(--dc-accent); }
html[data-theme="dark"] a { color: var(--dc-accent-text-dark); }
html[data-theme="dark"] a:hover { color: var(--dc-accent-text-dark-hover); }

/* Muted helper text: mid grey on light, light grey on dark. */
.dc-muted, .dc-post-meta, .view-head p, .dc-footer {
  color: var(--dc-muted);
}

/* Monospace ONLY for code, snippets and machine data — never for UI
 * labels, buttons or body copy. */
code, kbd, pre, samp, .mono, .dc-code {
  font-family: var(--dc-font-mono);
}
pre, code {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius-sm);
}
pre { padding: 12px 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
code { padding: 1px 5px; font-size: 0.9em; }
pre code { background: none; border: 0; padding: 0; }
html[data-theme="dark"] pre, html[data-theme="dark"] code {
  background: var(--dc-surface-3);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}

/* Visible keyboard focus in both modes. */
:focus-visible {
  outline: 3px solid var(--dc-focus-ring);
  outline-offset: 2px;
  border-radius: var(--dc-radius-sm);
}

/* ---------- 4. Buttons, inputs, pills, tabs ---------- */
button, input, select, textarea { font-family: var(--dc-font-ui); }

.btn {
  border-radius: var(--dc-radius-pill);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  border: 1px solid var(--dc-line-strong);
  background: var(--dc-surface);
  color: var(--dc-ink);
}
.btn:hover { background: var(--dc-surface-2); }
.btn-primary {
  background: var(--dc-accent);
  border-color: var(--dc-accent);
  color: #ffffff;
}
.btn-primary:hover { background: var(--dc-accent-dark); border-color: var(--dc-accent-dark); color: #ffffff; }
html[data-theme="dark"] .btn-primary:hover { background: #0d9488; border-color: #0d9488; color: #ffffff; }
.btn-ghost {
  background: var(--dc-surface-3);
  border-color: transparent;
  color: var(--dc-ink);
}
.btn-ghost:hover { background: var(--dc-line); }
html[data-theme="dark"] .btn-ghost:hover { background: var(--dc-surface-3); }

/* The existing theme toggles are primary buttons; keep them legible
 * and full-width on narrow screens so they are never hidden controls.
 * STYLING ONLY: this sheet binds no click listener anywhere. The
 * Shell lane's top-bar button (#social2-theme-toggle) keeps its
 * inline onclick calling window.DCTheme.toggleTheme(), and the
 * Appearance view button (#dc-theme-toggle) keeps theme.js's own
 * listener. Binding here as well would toggle twice (net no-op),
 * so this lane deliberately does neither — inline onclick left
 * alone, no takeover. */
#dc-theme-toggle, #social2-theme-toggle { font-weight: 700; }
@media (max-width: 767px) {
  #dc-theme-toggle { width: 100%; }
}

/* Form fields: hairline border, soft fill, teal focus ring. */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="url"], input[type="number"],
textarea, select {
  background: var(--dc-surface);
  color: var(--dc-ink);
  border: 1px solid var(--dc-line-strong);
  border-radius: var(--dc-radius-md);
  padding: 10px 14px;
  font-size: 15px;
}
input::placeholder, textarea::placeholder { color: var(--dc-muted); opacity: 1; }
input:focus, textarea:focus, select:focus {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 2px rgb(15 118 110 / .2);
  outline: none;
}
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--dc-accent-text-dark);
  box-shadow: 0 0 0 2px rgb(45 212 191 / .25);
}
input:disabled, textarea:disabled, select:disabled, button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Pills and chips: soft fill, no border noise, teal when active. */
.dc-tag, .dc-category, .dc-status, .dc-testing-badge, .dc-tech-tag {
  background: var(--dc-surface-3);
  border: 1px solid transparent;
  border-radius: var(--dc-radius-pill);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-ink-soft);
}
.dc-tag:hover, .dc-category:hover { background: var(--dc-line); }

/* Tabs: underline style in views, pill style in the feed tab bar. */
.dc-tab {
  border-radius: var(--dc-radius-sm);
  color: var(--dc-muted);
  font-weight: 600;
}
.dc-tab.is-active { color: var(--dc-accent-dark); border-bottom-color: var(--dc-accent); }
html[data-theme="dark"] .dc-tab.is-active { color: var(--dc-accent-text-dark); border-bottom-color: var(--dc-accent-text-dark); }
.dc-feed-tabs {
  background: var(--dc-surface-3);
  border-radius: var(--dc-radius-pill);
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.dc-feed-tabs .dc-tab { border-radius: var(--dc-radius-pill); padding: 8px 16px; font-size: 14px; }
.dc-feed-tabs .dc-tab.is-active {
  background: var(--dc-surface);
  box-shadow: var(--dc-shadow-sm);
  border-bottom-color: transparent;
  color: var(--dc-ink);
}

/* ---------- 5. Shared system surfaces ---------- */
/* Generic surfaces shared by every view. Component-owned cards keep
 * their own layout; this section only guarantees surface, border,
 * separation and text colour in both modes. */
.dc-topbar {
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  box-shadow: var(--dc-shadow-sm);
}
.dc-search input {
  background: var(--dc-surface-3);
  border: 1px solid transparent;
  border-radius: var(--dc-radius-pill);
  color: var(--dc-ink);
}
.dc-search input:focus { background: var(--dc-surface); }
.dc-nav .nav-btn {
  border-radius: var(--dc-radius-md);
  color: var(--dc-ink);
}
.dc-nav .nav-btn:hover { background: var(--dc-surface-3); }
.dc-nav .nav-btn.is-active, .dc-nav .nav-btn[aria-current="page"] {
  background: var(--dc-accent-soft);
  color: var(--dc-accent-dark);
  font-weight: 700;
}
html[data-theme="dark"] .dc-nav .nav-btn.is-active,
html[data-theme="dark"] .dc-nav .nav-btn[aria-current="page"] {
  background: var(--dc-accent);
  color: #ffffff;
}
.dc-sidebar-card, .dc-composer, .dc-notification, .dc-comment,
.dc-message, .dc-conv-item, .dc-conversation, .dc-space-room,
.dc-story-viewer, .dc-poll, .dc-draft-item, .dc-scheduled-item,
.dc-x-list-card, .dc-x-trend-row, .dc-investor-card,
.dc-community-card, .dc-space-card, .dc-portfolio-card,
.dc-owner-card, .dc-related-card, .dc-profile-header,
.dc-project-card, .dc-stories, .notif-panel, .auth-panel, .mount {
  background: var(--dc-surface);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}
.dc-stories { border-radius: var(--dc-radius-card); box-shadow: var(--dc-shadow-sm); }

/* Generic article surface: covers feed posts (rendered as <article>)
 * in dark mode without naming any lane-owned post-card class. */
html[data-theme="dark"] main article {
  background: var(--dc-surface);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}
html[data-theme="dark"] main article a { color: var(--dc-accent-text-dark); }

/* Composer and comment bubbles keep their soft fill, darkened. */
.dc-composer-row textarea, .dc-comment-main, .dc-comment-form input,
.dc-comment-form textarea {
  background: var(--dc-surface-3);
  border: 1px solid transparent;
  color: var(--dc-ink);
}
.dc-composer-row textarea:focus, .dc-comment-form input:focus,
.dc-comment-form textarea:focus {
  background: var(--dc-surface);
  border-color: var(--dc-accent);
}
.dc-message { background: var(--dc-surface-3); }
.dc-message--own { background: var(--dc-accent); color: #ffffff; }
.dc-message--own a { color: #ffffff; }

/* Demo banner: soft teal strip in light mode, deep teal in dark.
 * Values aligned exactly with the Shell lane's tokenised banner
 * (light #e6f4f1, dark #134e4a bg / #e2e8f0 text) so whichever sheet
 * wins at merge, the banner renders identically. No light-only
 * banner rule is introduced here. */
#demo-banner { background: var(--dc-accent-soft); border-bottom: 1px solid var(--dc-accent-border); }
html[data-theme="dark"] #demo-banner { background: #134e4a; color: #e2e8f0; }

/* Hairline separators and view chrome in both modes. */
.dc-post-head, .dc-post-actions, .dc-comment-list, .dc-tabs,
.dc-tab-list, .dc-footer, .view-head, .dc-sidebar-row {
  border-color: var(--dc-line);
}
.dc-footer { color: var(--dc-muted); }

/* Bottom tab bar (mobile): dark surface, teal active state. */
.dc-bottom-nav {
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
  box-shadow: 0 -2px 12px rgb(0 0 0 / .08);
}
.dc-bottom-nav .nav-btn { color: var(--dc-muted); }
.dc-bottom-nav .nav-btn.is-active, .dc-bottom-nav .nav-btn[aria-current="page"] {
  color: var(--dc-accent);
}
html[data-theme="dark"] .dc-bottom-nav .nav-btn.is-active,
html[data-theme="dark"] .dc-bottom-nav .nav-btn[aria-current="page"] {
  color: var(--dc-accent-text-dark);
}

/* Badges stay readable: solid red fill, white text, both modes. */
.badge { background: var(--dc-live); color: #ffffff; }

/* Dark fixes for hardcoded light values the base dark block does not
 * cover. Each rule only changes surface/text colour — no layout, no
 * hiding — and each was found in a real dark render, not assumed. */
html[data-theme="dark"] .dc-topbar-actions .notif summary {
  background: var(--dc-surface-3);
  color: var(--dc-ink);
}
html[data-theme="dark"] .dc-topbar-actions .notif summary:hover {
  background: var(--dc-surface-2);
}
html[data-theme="dark"] #demo-banner strong { color: var(--dc-accent-text-dark); }
html[data-theme="dark"] .dc-tag-filter button {
  background: var(--dc-surface-3);
  border-color: var(--dc-line);
  color: var(--dc-ink-soft);
}
html[data-theme="dark"] .dc-tag-filter button[aria-pressed="true"] {
  background: var(--dc-accent-soft);
  border-color: var(--dc-accent-border);
  color: var(--dc-accent-text-dark);
}
html[data-theme="dark"] .dc-empty {
  background: var(--dc-surface);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}
html[data-theme="dark"] .dc-feed-status, html[data-theme="dark"] .dc-signin-prompt {
  color: var(--dc-muted);
}
/* "More" menu label: the base sheet paints it dark ink in both modes,
 * which is unreadable on a dark background. System rule, dark only. */
html[data-theme="dark"] .dc-left-more summary { color: var(--dc-ink); }
html[data-theme="dark"] .dc-left-more summary:hover { background: var(--dc-surface-3); }
/* Message composer send button: unclassed, so the base sheet leaves
 * it white-background with inherited (light, in dark mode) text —
 * unreadable. Scoped to the composer form only, dark only. */
html[data-theme="dark"] #dc-message-composer button {
  background: var(--dc-surface-3);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}

/* ---------- 6. Avatars: coloured initial discs, one size grid ---------- */
/* Fill stays the base sheet's solid per-user disc (var(--ring));
 * this sheet fixes shape, size steps and ring colours only, so an
 * avatar reads the same on desktop and mobile, light and dark. */
.dc-avatar {
  border-radius: 50%;
  font-weight: 700;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  overflow: hidden;
  border: 2px solid var(--dc-surface);
  box-shadow: 0 0 0 1px var(--dc-line);
}
.dc-avatar--sm { width: 36px; height: 36px; font-size: 14px; }
.dc-avatar--lg { width: 96px; height: 96px; font-size: 28px; border-width: 4px; }
.dc-profile-head-main .dc-avatar { border-color: var(--dc-surface); }
@media (max-width: 767px) {
  .dc-avatar--lg { width: 72px; height: 72px; font-size: 22px; }
}

/* ---------- 7. Twemoji: vendored pack only, one size language ---------- */
/* UI chrome uses Twemoji <img> files from assets/emoji/ (see
 * assets/js/emoji.js), never plain system Unicode emojis. These rules
 * make a reaction image sit on the text baseline next to its count,
 * identically on desktop and mobile. */
img.dc-emoji {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  object-fit: contain;
  vertical-align: -3px;
  display: inline-block;
}
.dc-action-btn img.dc-emoji { margin-right: 2px; }
/* Inline reaction + count pairs: image, count and label on one line. */
.dc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
img.dc-emoji--lg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  vertical-align: -4px;
}
/* Twemoji SVGs are full-colour artwork: never dimmed, filtered or
 * recoloured in dark mode, so reactions stay visible at full contrast. */
html[data-theme="dark"] img.dc-emoji { filter: none; opacity: 1; }

/* ---------- 8. Outlined line icons: one consistent set ---------- */
/* Nav icons share one size grid (20px default, 22px left nav,
 * 24px mobile bottom nav) and inherit the surrounding text colour,
 * so they stay visible in both modes without a second icon set. */
.nav-icon {
  width: var(--dc-icon-size);
  height: var(--dc-icon-size);
  flex: 0 0 auto;
  vertical-align: middle;
}
.dc-nav .nav-btn .nav-icon { width: 22px; height: 22px; }
.dc-bottom-nav .nav-icon { width: 24px; height: 24px; }
/* Opt-in line-icon class for lanes that render inline SVGs: one
 * stroke language — currentColor, round caps and joins, no fills,
 * no mixed icon styles, no proprietary brand icons. */
.dc-line-icon {
  width: var(--dc-icon-size);
  height: var(--dc-icon-size);
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.dc-line-icon--sm { width: 16px; height: 16px; }
.dc-line-icon--lg { width: 24px; height: 24px; }

/* Coordinator gate fix: native <select> dropdowns rendered light with pale text in dark mode (seen on Spaces filters). Root cause: spaces.css forces #spaces-filters select { background:#fff } at ID specificity, beating the generic dark rule, while the text colour inherits light dark-mode ink — pale text on white. The ID-scoped override below wins (1,1,2 beats 1,0,1). */
html[data-theme="dark"] select { background:#232e42; color:#f1f5f9; border-color:#334155; }
html[data-theme="dark"] select option { background:#232e42; color:#f1f5f9; }
html[data-theme="dark"] #spaces-filters select, html[data-theme="dark"] #space-create-form select { background:#232e42; color:#f1f5f9; border-color:#334155; }


/* ===== bundle segment: assets/css/fixall-lane-d.css ===== */
/* koddeit — FixAll Lane D sheet (feed pagination + dark-mode coverage).
 *
 * LOADS LAST (after social2-system.css). Two jobs, both additive:
 *  1. Feed pagination controls (.dc-feed-pagination) — both themes.
 *  2. Dark-mode coverage for lane sheets whose hardcoded light colours
 *     the system sheet does not reach. EVERY rule in part 2 is scoped
 *     under html[data-theme="dark"] (with the high-contrast guard
 *     :not([data-ob-contrast="high"]) so the OB high-contrast mode,
 *     which deliberately paints white, is never overridden by dark).
 *     Light theme is therefore untouched by part 2 by construction:
 *     no rule here applies without data-theme="dark".
 *
 * Tokens used are the social2 system tokens (--dc-surface,
 * --dc-surface-2/3, --dc-ink, --dc-ink-soft, --dc-muted, --dc-line,
 * --dc-accent-soft, --dc-accent-text-dark), which the system sheet
 * already sets to near-black dark values under data-theme="dark".
 * Near-black dark look is preserved: surfaces #151c28/#1c2536/#232e42,
 * text #f1f5f9/#cbd5e1, teal accent text #5eead4.
 *
 * DELIBERATELY NOT DARKENED (documented, not oversights):
 *  - .cv-qr-wrap: a QR code needs a white quiet zone to scan.
 *  - .t1-code, .u2-pre: already dark blocks (#0f172a bg, light text)
 *    in both themes, by their lanes' own design.
 *  - .dc-whiteboard canvas, .s1-card video: drawing/video surfaces.
 *  - Teal-filled badges/buttons with white text (.ds-tab.is-active,
 *    .w1-tabs button.is-active, .eb-flair, .va-badge, .u1-badge,
 *    .u2-tag, .u2-badge, .s1-badge): white-on-teal reads in both
 *    themes, so they are left alone.
 * Token-based sheets that needed NO fix (their var(--surface) /
 * var(--paper) / var(--ink) values already follow the dark tokens):
 * ea-lane, er-lane, spaces.css surfaces, t2-lane boxes, and the
 * social2-* sheets (their own --s2-*/--social2-* dark tokens).
 * Their remaining defects are listed individually below where a
 * hardcoded value still escaped the tokens (Spaces ID-scoped form
 * fields, t2 suggest-item hover fallback).
 */

/* ---------- 1. Feed pagination (both themes) ---------- */
.dc-feed-pagination {
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--dc-line, #e2e8f0);
}
.dc-feed-page-status {
  margin: 0 0 10px;
  color: var(--dc-muted, #64748b);
  font-size: 14px;
}
.dc-feed-page-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dc-feed-page-controls .dc-feed-page-btn.is-active {
  background: var(--dc-accent, #0f766e);
  border-color: var(--dc-accent, #0f766e);
  color: #ffffff;
}
.dc-feed-page-ellipsis { padding: 0 2px; color: var(--dc-muted, #64748b); }
.dc-feed-page-controls button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 2. Dark mode: lane card/box surfaces ---------- */
/* Group D-A: white cards -> dark surface. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .cv-box,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-form,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-chat,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-palette-box,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-palette-item,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .eb-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-carousel,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-lightbox,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-mount,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-theme-preview,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s1-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-panel,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-flashcard,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-feedback,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s3-list li,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s3-room,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s3-poll,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s3-reader-item,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-tool,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-quiz,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-session,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-project-block,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-md-preview,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u1-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-panel,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-viewer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-print-area,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .vb-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w2-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ob-float-zone,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-more-panel,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-ev-composer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-ch-composer,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-easy-row,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-easy-resume,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-message--file,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-message--voice,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-x-list-edit,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-poll-option {
  background: var(--dc-surface);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}

/* Group D-B: soft-fill surfaces (surface-2) — columns, forms, items. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-column,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u1-form,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-form,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-item {
  background: var(--dc-surface-2);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}

/* Group D-C: light teal washes -> deep teal wash, light teal text.
 * (White-flash pills/notes in dark mode; text was teal-on-pale.) */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-notice,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .eb-pinned,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-palette-item.is-selected,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-badge,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s1-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s1-once,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-flashcard.is-flipped,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-pinned,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-media-card,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-profile-strip,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-mutual,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-tag,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-cal td.w1-has,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ob-float-react {
  background: var(--dc-accent-soft);
  border-color: var(--dc-accent-border, #2dd4bf);
  color: var(--dc-accent-text-dark);
}

/* Group D-D: hardcoded mid-grey text -> muted token (was dark-grey
 * text with no background, low contrast on near-black). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .cv-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-empty,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s3-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-empty,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u1-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-empty,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-time,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-handle,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-status-custom,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .vb-meta,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .vb-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-note,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-tok-comment {
  color: var(--dc-muted);
}
/* Error reds that are too dark on near-black. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .cv-error,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-error,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .vb-error,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-error,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-tool-error,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w2-error {
  color: #f87171;
}

/* Group D-E: light code blocks -> dark code surface (pale text on
 * pale grey was unreadable; t1-code/u2-pre already dark, untouched). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-code,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u1-code,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-code,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w2-output,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s1-card pre,
html[data-theme="dark"]:not([data-ob-contrast="high"]) #s1-api-try-out,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-code-block,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-easy-code {
  background: var(--dc-surface-3);
  border-color: var(--dc-line);
  color: var(--dc-ink);
}

/* Group D-F: tabs. ds-tab was a white pill with teal text; in dark it
 * becomes a dark pill with light teal text. is-active keeps its teal
 * fill + white text (readable in both themes, unchanged). */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-tab {
  background: var(--dc-surface-3);
  border-color: var(--dc-accent-border, #2dd4bf);
  color: var(--dc-accent-text-dark);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .ds-tab.is-active {
  background: var(--dc-accent);
  color: #ffffff;
}

/* Group D-G: tables — light borders/cells -> dark hairlines. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-table td,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-table td,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-cal th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-cal td,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-ch-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-ch-table td {
  border-color: var(--dc-line);
  color: var(--dc-ink);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t1-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-table th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-cal th,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-ch-table th {
  color: var(--dc-ink-soft);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dc-ch-table tr.is-current td {
  background: var(--dc-accent-soft);
}

/* Group D-H: progress/track bars — light tracks -> dark tracks. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s2-progress,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-progress,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-bar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-day,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .u2-bar,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-progress,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .s3-progress,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .eb-progress {
  background: var(--dc-surface-3);
}

/* Group D-I: form fields at lane/ID specificity (the Spaces precedent:
 * an ID-scoped light background beats the generic dark rule, so the
 * override must be ID-scoped too). Spaces selects were already fixed
 * in social2-system.css; these are the remaining Spaces fields plus
 * lane form controls whose explicit #fff background would otherwise
 * win or tie ambiguously. */
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"]) .dd-form input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-form textarea {
  background: var(--dc-surface-3);
  border-color: var(--dc-line-strong, #334155);
  color: var(--dc-ink);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .dd-form select option,
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 {
  background: var(--dc-surface-3);
  color: var(--dc-ink);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .cv-field input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-form input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-form textarea,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-inline-form input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-inline-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-actions input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .va-actions select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-form input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .w1-form textarea,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-form input,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-form select,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .oa-form textarea {
  border-color: var(--dc-line-strong, #334155);
  background: var(--dc-surface);
  color: var(--dc-ink);
}
/* t2 suggest hover: its fallback wash (#e6f4f2) is light in both
 * themes because --teal-soft is never defined; dark gets deep teal. */
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-suggest-item:hover,
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-suggest-item:focus {
  background: var(--dc-accent-soft);
}
html[data-theme="dark"]:not([data-ob-contrast="high"]) .t2-tok-string {
  color: #fbbf24;
}

/* Pagination in dark mode: status text and page buttons follow the
 * dark tokens (the .btn base already does; only the active page and
 * the top hairline need explicit dark values). */
html[data-theme="dark"] .dc-feed-pagination {
  border-top-color: var(--dc-line);
}
html[data-theme="dark"] .dc-feed-page-controls .dc-feed-page-btn.is-active {
  background: var(--dc-accent);
  border-color: var(--dc-accent);
  color: #ffffff;
}