/* ==========================================================================
   koddeit Stitch redesign — LANE B: all non-feed app views
   --------------------------------------------------------------------------
   System of record: devconnect_1 teal card system (DESIGN.md tokens,
   verbatim) fused with the X-stream layout patterns of the devconnect_2
   screens (centre column, card grid, split-pane messages). Accent is TEAL
   #0F766E throughout — never royal blue #2563EB.

   SCOPE — every app view EXCEPT the core shell / feed, which Lane A owns
   (topbar, left nav, right rail, feed cards, composer, story strip).
   This sheet therefore scopes every shared component rule under
   `.view:not(#view-feed)`, so feed rendering is untouched and Lane A + B
   rules cannot fight. View-specific layouts use their #view-* id.

   LOAD ORDER — this file is linked after bundle.css. The merge step loads
   it AFTER Lane A's assets/css/stitch.css (Lane A's sheet does not exist
   in this lane copy, so this sheet is written to work standalone and to
   compose after it: it never redefines Lane A's shell selectors).

   RULES OF THIS SHEET
   - No JS, bundle.css or bundle.js edits. No feature, count or nav-key
     changes. No dark-mode rules (Lane C owns dark mode). No static SEO
     page selectors. No gradients, no purple, no placeholder photos.
   - Avatars are strict circles (initials discs). Twemoji stays in chrome;
     this sheet changes no emoji markup.
   - Tokens: canvas #F8FAFC, sections #F1F5F9, cards #FFFFFF, 1px #E2E8F0,
     Level-1 shadow 0 1px 3px rgba(0,0,0,0.05), 0 4px 6px -1px
     rgba(0,0,0,0.03); Level-2 hover/dropdown 0 10px 15px -3px
     rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.02); Level-3 modal
     0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03)
     over an rgba(15,23,42,0.4) scrim. Cards 16px radius, buttons/search
     pills, inputs 8px, metadata #64748B, primary pill #0F766E, hover
     #0D9488, active scale 0.98, focus 2px teal ring + 2px white offset.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. View canvas + view headers (all non-feed views)
   -------------------------------------------------------------------------- */
.view:not(#view-feed) {
  background: #f8fafc;
  min-width: 0;
}

.view:not(#view-feed) .view-head {
  margin: 0 0 20px;
}

.view:not(#view-feed) .view-head h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.view:not(#view-feed) .view-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.view:not(#view-feed) .view-head p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #64748b;
  max-width: 62ch;
}

/* Section dividers inside views: the #F1F5F9 structural section tone. */
.view:not(#view-feed) .dc-section,
.view:not(#view-feed) section[aria-label] > h2,
.view:not(#view-feed) section[aria-label] > h3 {
  color: #0f172a;
}

/* --------------------------------------------------------------------------
   2. Buttons — pill, teal primary, slate secondary, teal ghost.
      Scoped to non-feed views so Lane A's feed buttons are untouched.
   -------------------------------------------------------------------------- */
.view:not(#view-feed) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #0f172a;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.view:not(#view-feed) .btn:hover {
  background: #e2e8f0;
  border-color: #e2e8f0;
}

.view:not(#view-feed) .btn:active {
  transform: scale(0.98);
}

.view:not(#view-feed) .btn:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.view:not(#view-feed) .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.view:not(#view-feed) .btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.view:not(#view-feed) .btn-primary:hover {
  background: #0d9488;
  border-color: #0d9488;
}

.view:not(#view-feed) .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: #0f766e;
}

.view:not(#view-feed) .btn-ghost:hover {
  background: #f0fdfa;
  border-color: transparent;
}

/* Small inline action buttons inside cards keep the 44px touch target. */
.view:not(#view-feed) .dc-action-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.view:not(#view-feed) .dc-action-btn:hover {
  background: #f1f5f9;
  color: #0f766e;
}

.view:not(#view-feed) .dc-action-btn:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* Investor-card buttons are plain <button>s, not .btn — pill them too. */
.view:not(#view-feed) .investor-view-btn,
.view:not(#view-feed) .investor-contact-btn {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #0f172a;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.view:not(#view-feed) .investor-view-btn:hover,
.view:not(#view-feed) .investor-contact-btn:hover {
  background: #e2e8f0;
}

.view:not(#view-feed) .investor-view-btn:focus-visible,
.view:not(#view-feed) .investor-contact-btn:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Avatars — strict circles everywhere in these views.
   -------------------------------------------------------------------------- */
.view:not(#view-feed) .dc-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.view:not(#view-feed) .dc-avatar--sm {
  border-radius: 50%;
}

.view:not(#view-feed) .dc-avatar--lg {
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   4. Cards — white, 1px #E2E8F0, 16px radius, Level-1 ambient shadow.
      Applies to every card component rendered inside non-feed views,
      including post cards shown on profile/community tabs (NOT the feed).
   -------------------------------------------------------------------------- */
.view:not(#view-feed) .dc-post-card,
.view:not(#view-feed) .dc-post,
.view:not(#view-feed) .dc-project-card,
.view:not(#view-feed) .dc-community-card,
.view:not(#view-feed) .dc-explore-item,
.view:not(#view-feed) .dc-investor-card,
.view:not(#view-feed) .dc-space-card,
.view:not(#view-feed) .dc-space-room,
.view:not(#view-feed) .dc-notification,
.view:not(#view-feed) .dc-portfolio-card,
.view:not(#view-feed) .dc-related-card,
.view:not(#view-feed) .dc-owner-card,
.view:not(#view-feed) .dc-search-group,
.view:not(#view-feed) .dc-pinned-post,
.view:not(#view-feed) .dc-draft-project,
.view:not(#view-feed) .s2-people,
.view:not(#view-feed) #investor-list > article,
.view:not(#view-feed) #investor-list > div {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin: 0 0 16px;
  min-width: 0;
}

/* Clickable cards lift to Level-2 on hover. */
.view:not(#view-feed) .dc-investor-card:hover,
.view:not(#view-feed) .dc-community-card:hover,
.view:not(#view-feed) .dc-explore-item:hover,
.view:not(#view-feed) .dc-space-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  border-color: #cbd5e1;
}

.view:not(#view-feed) .dc-investor-card:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* Card headings + body rhythm (Inter scale: headline-sm / body-md). */
.view:not(#view-feed) .dc-post-card h3,
.view:not(#view-feed) .dc-project-card h3,
.view:not(#view-feed) .dc-community-card h3,
.view:not(#view-feed) .dc-explore-item h3,
.view:not(#view-feed) .dc-investor-card h3,
.view:not(#view-feed) .dc-space-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #0f172a;
}

.view:not(#view-feed) .dc-post-body,
.view:not(#view-feed) .dc-post-card p,
.view:not(#view-feed) .dc-project-card p,
.view:not(#view-feed) .dc-community-card p,
.view:not(#view-feed) .dc-explore-item p,
.view:not(#view-feed) .dc-space-card p,
.view:not(#view-feed) .dc-notification p {
  font-size: 14px;
  line-height: 20px;
  color: #334155;
}

/* Links inside views: teal, underline on hover. */
.view:not(#view-feed) a {
  color: #0f766e;
}

.view:not(#view-feed) a:hover {
  color: #0d9488;
}

/* --------------------------------------------------------------------------
   5. Tabs — underline style, teal active, 44px touch targets.
   -------------------------------------------------------------------------- */
.view:not(#view-feed) .dc-tabs,
.view:not(#view-feed) .dc-tab-list,
.view:not(#view-feed) .s2-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
  margin: 16px 0 0;
  padding-bottom: 0;
}

.view:not(#view-feed) .dc-tab {
  min-height: 44px;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #475569;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.view:not(#view-feed) .dc-tab:hover {
  color: #0f766e;
}

.view:not(#view-feed) .dc-tab.is-active,
.view:not(#view-feed) .dc-tab[aria-selected="true"] {
  color: #0f766e;
  border-bottom-color: #0f766e;
}

.view:not(#view-feed) .dc-tab:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

.view:not(#view-feed) .dc-tab-panel {
  padding: 16px 0;
}

/* --------------------------------------------------------------------------
   6. Role badges, topic tags, metadata.
   -------------------------------------------------------------------------- */
/* Role badges: 24px pills. The rendered .dc-role-badge carries no
   role hook (plain text "Developer"/"Investor"), so it uses the Developer
   teal treatment; see LANE-B-REPORT.md for the hook needed to split it. */
.view:not(#view-feed) .dc-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid #ccfbf1;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Tester badge: amber. */
.view:not(#view-feed) .dc-testing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid #fde68a;
  background: #fef3c7;
  color: #b45309;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Investor role line on investor cards: investor purple treatment. */
.view:not(#view-feed) .investor-role {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid #e9d5ff;
  background: #f3e8ff;
  color: #6b21a8;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Topic tags: slate pill with # prefix. */
.view:not(#view-feed) .dc-tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 0;
  background: #f1f5f9;
  color: #475569;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
}

.view:not(#view-feed) .dc-tag::before {
  content: "#";
  margin-right: 1px;
}

.view:not(#view-feed) .dc-tag:hover {
  background: #e2e8f0;
}

/* Skill/tech tags: same slate pill, no # prefix (they are skills). */
.view:not(#view-feed) .dc-tech-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

/* Category + status pills. */
.view:not(#view-feed) .dc-category {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.view:not(#view-feed) .dc-status {
  color: #475569;
  font-size: 13px;
  line-height: 18px;
}

/* Metadata: #64748B everywhere. */
.view:not(#view-feed) .dc-meta,
.view:not(#view-feed) .dc-handle,
.view:not(#view-feed) .dc-time,
.view:not(#view-feed) .dc-conv-handle,
.view:not(#view-feed) .dc-conv-time,
.view:not(#view-feed) .dc-conv-preview,
.view:not(#view-feed) .dc-explore-meta,
.view:not(#view-feed) .dc-community-meta,
.view:not(#view-feed) .dc-space-meta,
.view:not(#view-feed) .dc-project-meta,
.view:not(#view-feed) .dc-post-meta,
.view:not(#view-feed) .dc-message__time,
.view:not(#view-feed) .dc-notification__time,
.view:not(#view-feed) .dc-space-chat-message__meta,
.view:not(#view-feed) .dc-space-note,
.view:not(#view-feed) .investor-handle,
.view:not(#view-feed) .investor-project-count,
.view:not(#view-feed) .investor-followed-count,
.view:not(#view-feed) .form-note,
.view:not(#view-feed) .dc-note {
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
}

.view:not(#view-feed) .dc-handle,
.view:not(#view-feed) .dc-conv-handle,
.view:not(#view-feed) .investor-handle {
  font-size: 14px;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   7. Forms + filters — 8px inputs, pill search, teal focus ring.
   -------------------------------------------------------------------------- */
.view:not(#view-feed) input[type="text"],
.view:not(#view-feed) input[type="search"],
.view:not(#view-feed) input[type="email"],
.view:not(#view-feed) input[type="url"],
.view:not(#view-feed) input[type="number"],
.view:not(#view-feed) input[type="password"],
.view:not(#view-feed) input[type="date"],
.view:not(#view-feed) input[type="time"],
.view:not(#view-feed) textarea,
.view:not(#view-feed) select {
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  max-width: 100%;
}

.view:not(#view-feed) textarea {
  min-height: 88px;
  resize: vertical;
}

.view:not(#view-feed) input:focus,
.view:not(#view-feed) textarea:focus,
.view:not(#view-feed) select:focus {
  outline: 2px solid #0f766e;
  outline-offset: 0;
  border-color: #0f766e;
}

.view:not(#view-feed) input::placeholder,
.view:not(#view-feed) textarea::placeholder {
  color: #94a3b8;
}

.view:not(#view-feed) label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #0f172a;
}

/* Checkboxes + radios: 20px, teal when selected. */
.view:not(#view-feed) input[type="checkbox"],
.view:not(#view-feed) input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  accent-color: #0f766e;
  vertical-align: middle;
}

.view:not(#view-feed) input[type="checkbox"] {
  border-radius: 6px;
}

/* Filter bars: pill search + 8px selects, wrapping. */
.view:not(#view-feed) #project-filters,
.view:not(#view-feed) #investor-filters,
.view:not(#view-feed) #spaces-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  min-width: 0;
}

.view:not(#view-feed) .dc-filter-search input,
.view:not(#view-feed) #project-filters input[type="text"],
.view:not(#view-feed) #project-filters input[type="search"],
.view:not(#view-feed) #investor-filters input[type="text"],
.view:not(#view-feed) #investor-filters input[type="search"],
.view:not(#view-feed) #spaces-filters input[type="text"],
.view:not(#view-feed) #spaces-filters input[type="search"] {
  border-radius: 9999px;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.view:not(#view-feed) .dc-filter-search input:focus,
.view:not(#view-feed) #project-filters input:focus,
.view:not(#view-feed) #investor-filters input:focus,
.view:not(#view-feed) #spaces-filters input:focus {
  background: #ffffff;
  border-color: #0f766e;
}

/* Form errors: DESIGN error #BA1A1A on a tinted card. */
.view:not(#view-feed) .dc-form-error,
.view:not(#view-feed) .dc-form-errors,
.view:not(#view-feed) .dc-feedback-errors {
  color: #ba1a1a;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
}

/* Mount labels + empty states: quiet section labels, centred empties. */
.view:not(#view-feed) .mount-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #64748b;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.view:not(#view-feed) .empty,
.view:not(#view-feed) .dc-empty {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 24px;
  color: #64748b;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin: 0 0 16px;
}

/* Community / draft / schedule forms render as cards. */
.view:not(#view-feed) .dc-community-form,
.view:not(#view-feed) .dc-community-edit-form,
.view:not(#view-feed) .dc-community-post-form,
.view:not(#view-feed) .dc-draft-form,
.view:not(#view-feed) .dc-sched-form,
.view:not(#view-feed) .dc-feedback-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin: 0 0 16px;
  min-width: 0;
}

.view:not(#view-feed) .dc-community-form input,
.view:not(#view-feed) .dc-community-form textarea,
.view:not(#view-feed) .dc-community-form select,
.view:not(#view-feed) .dc-community-post-form input,
.view:not(#view-feed) .dc-community-post-form textarea,
.view:not(#view-feed) .dc-draft-form input,
.view:not(#view-feed) .dc-draft-form textarea,
.view:not(#view-feed) .dc-sched-form input,
.view:not(#view-feed) .dc-sched-form textarea {
  width: 100%;
  margin: 8px 0 12px;
}

/* --------------------------------------------------------------------------
   8. Profile — Instagram/Facebook-style: cover, large avatar, stats row,
      Posts/Projects/Saved/Liked/More tabs (tabs styled in section 5).
   -------------------------------------------------------------------------- */
#view-profile .dc-profile-header {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 0 0 24px;
  overflow: hidden;
  margin: 0 0 16px;
}

#view-profile .dc-cover-band {
  height: 160px;
  min-height: 160px;
  background: #ccfbf1;
  border-bottom: 3px solid #0f766e;
  border-radius: 0;
  margin: 0;
}

#view-profile .dc-profile-head-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: -48px;
  padding: 0 24px;
}

#view-profile .dc-profile-head-main .dc-avatar {
  width: 96px;
  height: 96px;
  font-size: 28px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 1px #e2e8f0;
  flex-shrink: 0;
}

#view-profile .dc-profile-head-text {
  padding-top: 52px;
  min-width: 0;
}

#view-profile .dc-profile-head-text h2 {
  margin: 0 0 2px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}

#view-profile .dc-profile-header > *:not(.dc-cover-band):not(.dc-profile-head-main) {
  margin-left: 24px;
  margin-right: 24px;
}

#view-profile .dc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

#view-profile .dc-stat {
  text-align: center;
  min-width: 0;
}

#view-profile .dc-stat strong {
  display: block;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #0f172a;
}

#view-profile .dc-stat span {
  font-size: 13px;
  line-height: 18px;
  color: #64748b;
}

#view-profile .dc-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

#view-profile .dc-pinned-post {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
}

#view-profile .s2-people h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #0f172a;
  margin: 20px 0 12px;
}

#view-profile .s2-people ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#view-profile .s2-people li {
  margin: 0 0 8px;
}

/* Profile-adjacent panels (badges, graph, highlights, QR, endorsements). */
#view-profile #profile-badges,
#view-profile #profile-contribution-graph,
#view-profile #profile-highlights,
#view-profile #profile-qr,
#view-profile #skill-endorsements,
#view-profile #reputation-badge,
#view-profile #profile-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin: 0 0 16px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   9. Projects — grid + tabbed detail.
   -------------------------------------------------------------------------- */
#view-projects #project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#view-projects #project-grid .dc-project-card {
  margin: 0;
  height: 100%;
}

#view-project-detail #project-detail {
  min-width: 0;
}

#view-project-detail .dc-project-owner,
#view-project-detail .dc-owner-card {
  display: flex;
  gap: 12px;
  align-items: center;
}

#view-project-detail .dc-project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

#view-project-detail .dc-project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

#view-project-detail .dc-cover {
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 16px;
}

#view-project-detail #project-changelog {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin: 16px 0;
  min-width: 0;
}

/* Delete confirmation is an inline bar, not a modal (no modal hook exists
   in these views — see LANE-B-REPORT.md). Style it as a warning card. */
.view:not(#view-feed) .dc-delete-confirm {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 16px;
}

.view:not(#view-feed) .dc-delete-confirm .btn {
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   10. Messages — Messenger-style split view.
   -------------------------------------------------------------------------- */
#view-messages .messages-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#view-messages #conversation-list {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 16px;
  min-width: 0;
}

#view-messages .dc-conv-item {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}

#view-messages .dc-conv-item:hover {
  background: #f8fafc;
}

#view-messages .dc-conv-item.is-active,
#view-messages .dc-conv-item.dc-conversation--active {
  background: #f0fdfa;
  border-color: #ccfbf1;
}

#view-messages .dc-conv-item:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

#view-messages .dc-conv-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

#view-messages .dc-conv-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #0f172a;
}

#view-messages .dc-conv-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-messages .dc-unread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 9999px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

#view-messages #message-thread {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  min-width: 0;
}

#view-messages .s2-thread-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  min-width: 0;
}

#view-messages .s2-thread-name {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #0f172a;
}

#view-messages .dc-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 85%;
  margin-bottom: 12px;
  border: 0;
  padding: 0;
}

#view-messages .dc-message--own {
  margin-left: auto;
  flex-direction: row-reverse;
}

#view-messages .dc-message--own .dc-message__text {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 16px;
  padding: 10px 14px;
}

#view-messages .dc-message--other .dc-message__text {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 14px;
}

#view-messages .dc-message__sender {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

#view-messages .dc-message__body {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #334155;
}

#view-messages #message-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 16px 20px;
  margin-top: 16px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   11. Spaces — room list + room view (speakers / listeners / chat).
   -------------------------------------------------------------------------- */
#view-spaces #spaces-list .dc-spaces-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#view-spaces #spaces-list .dc-space-card {
  margin: 0;
  height: 100%;
}

#view-spaces .dc-space-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#view-spaces .dc-space-badge--live,
#view-space-detail .dc-space-badge--live {
  background: #0f766e;
  color: #ffffff;
}

#view-spaces .dc-space-badge--scheduled,
#view-space-detail .dc-space-badge--scheduled {
  background: #fef3c7;
  color: #b45309;
}

#view-spaces .dc-space-badge--ended,
#view-spaces .dc-space-badge--past,
#view-space-detail .dc-space-badge--ended,
#view-space-detail .dc-space-badge--past {
  background: #f1f5f9;
  color: #64748b;
}

#view-spaces .dc-live-dot,
#view-space-detail .dc-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

#view-space-detail .dc-space-room h4 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #0f172a;
  margin: 20px 0 12px;
}

#view-space-detail .dc-space-participants {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#view-space-detail .dc-room-participant {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
  min-width: 0;
}

#view-space-detail .dc-room-participant__name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

#view-space-detail .dc-room-role {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #0f766e;
}

#view-space-detail .dc-space-chat-message {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
}

#view-space-detail .dc-space-chat-message__body {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #334155;
}

#view-space-detail .dc-space-warning {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 16px;
  color: #92400e;
  font-size: 14px;
  line-height: 20px;
}

#view-space-detail .dc-space-error {
  color: #ba1a1a;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
}

#view-space-detail #space-whiteboard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin: 16px 0;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   12. Explore, Search results, Communities, Investors, Notifications,
       Saved, Drafts.
   -------------------------------------------------------------------------- */
#view-explore #explore-content,
#view-search #search-results {
  min-width: 0;
}

#view-explore #explore-content .dc-explore-item {
  margin-bottom: 16px;
}

#view-search .dc-search-group h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 12px;
}

#view-search .dc-search-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#view-search .dc-search-group li {
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#view-search .dc-search-group li:first-child {
  border-top: 0;
}

#view-communities #dc-community-list .dc-community-card {
  margin-bottom: 16px;
}

#view-communities .dc-community-members {
  list-style: none;
  padding: 0;
  margin: 0;
}

#view-communities .dc-community-members li {
  margin: 0 0 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#view-community-detail #community-detail {
  min-width: 0;
}

#view-investors #investor-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#view-investors #investor-list > article,
#view-investors #investor-list > div {
  margin: 0;
  height: 100%;
}

#view-investors #investor-detail {
  margin-top: 16px;
  min-width: 0;
}

#view-investors .investor-availability {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  color: #0f766e;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

#view-investors .investor-bio,
#view-investors .investor-looks,
#view-investors .investor-stage,
#view-investors .investor-focus {
  font-size: 14px;
  line-height: 20px;
  color: #334155;
}

#view-investors .investor-looks-label {
  font-weight: 600;
  color: #0f172a;
}

#view-investors .investor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

#view-notifications #notification-list-full .dc-notification {
  position: relative;
  margin-bottom: 12px;
}

#view-notifications #notification-list-full .dc-notification--unread {
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
}

#view-notifications #notification-list-full .dc-notification--read {
  border-left: 3px solid #e2e8f0;
}

#view-notifications .dc-notification__actor {
  font-weight: 600;
  color: #0f172a;
}

#view-notifications .dc-notification__type {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f766e;
  text-transform: uppercase;
}

#view-notifications #notification-settings {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  padding: 20px;
  margin: 0 0 16px;
  min-width: 0;
}

#view-saved #saved-list {
  min-width: 0;
}

#view-drafts #drafts-content,
#view-drafts #dc-drafts-list,
#view-drafts #scheduled-content,
#view-drafts #dc-sched-list {
  min-width: 0;
}

#view-drafts .dc-drafts-list,
#view-drafts .dc-sched-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#view-drafts .dc-draft-body,
#view-drafts .dc-sched-body {
  font-size: 14px;
  line-height: 20px;
  color: #334155;
}

#view-drafts .dc-draft-tags,
#view-drafts .dc-sched-tags,
#view-drafts .dc-sched-when {
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
}

/* --------------------------------------------------------------------------
   13. Code cards — #F7F8FA surface, 1px border, 12px radius, JetBrains Mono.
   -------------------------------------------------------------------------- */
.view:not(#view-feed) pre.dc-code-block {
  background: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 20px;
  color: #0f172a;
  margin: 0 0 16px;
  max-width: 100%;
}

.view:not(#view-feed) pre.dc-code-block code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: none;
  padding: 0;
}

.view:not(#view-feed) .dc-code-line {
  display: block;
}

.view:not(#view-feed) .dc-code-ln {
  color: #94a3b8;
  user-select: none;
  padding-right: 12px;
}

.view:not(#view-feed) .dc-code-kw {
  color: #0f766e;
  font-weight: 600;
}

.view:not(#view-feed) .dc-code-str {
  color: #b45309;
}

.view:not(#view-feed) .dc-code-com {
  color: #64748b;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   14. Tables, lists + detail layouts inside views.
   -------------------------------------------------------------------------- */
.view:not(#view-feed) table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  font-size: 14px;
  line-height: 20px;
}

.view:not(#view-feed) th {
  text-align: left;
  padding: 12px 16px;
  color: #64748b;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #e2e8f0;
}

.view:not(#view-feed) td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.view:not(#view-feed) tr:last-child td {
  border-bottom: 0;
}

.view:not(#view-feed) tbody tr:hover td {
  background: #f8fafc;
}

.view:not(#view-feed) .detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.view:not(#view-feed) .detail-meta {
  color: #64748b;
  font-size: 13px;
  line-height: 18px;
}

/* Post action bars inside non-feed views (profile/community tabs). */
.view:not(#view-feed) .dc-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.view:not(#view-feed) .dc-post-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  min-width: 0;
}

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

.view:not(#view-feed) .dc-comments {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.view:not(#view-feed) .dc-comment {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   15. Modals, overlays + dropdowns.
   -------------------------------------------------------------------------- */
/* No custom modal/dropdown component exists in these views (confirmations
   are inline .dc-delete-confirm bars or native confirm()); the one
   overlay rendered at body level is the command palette (.ds-palette),
   and native <dialog> is styled here for any future view dialog. The
   palette is shared chrome — flagged as a merge overlap in the report. */
.ds-palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 15vh 16px 16px;
}

.ds-palette-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  width: 100%;
  max-width: 600px;
  padding: 20px;
}

.ds-palette-box input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
}

.ds-palette-box input[type="text"]:focus {
  outline: 2px solid #0f766e;
  outline-offset: 0;
  border-color: #0f766e;
}

dialog {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  padding: 24px;
  max-width: min(600px, calc(100vw - 32px));
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

/* In-view dropdown menus, if any module renders one later: Level-2. */
.view:not(#view-feed) [role="menu"],
.view:not(#view-feed) [role="listbox"] {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  padding: 8px;
}

/* --------------------------------------------------------------------------
   16. Responsive — follows Lane A's breakpoints: right rail collapses on
       tablet, left icon dock, mobile bottom bar. These rules cover only
       Lane B views: no horizontal overflow, touch targets >= 44px.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  #view-projects #project-grid,
  #view-investors #investor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-spaces #spaces-list .dc-spaces-list {
    grid-template-columns: 1fr 1fr;
  }

  #view-messages .messages-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .view:not(#view-feed) .view-head h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .view:not(#view-feed) .dc-post-card,
  .view:not(#view-feed) .dc-post,
  .view:not(#view-feed) .dc-project-card,
  .view:not(#view-feed) .dc-community-card,
  .view:not(#view-feed) .dc-explore-item,
  .view:not(#view-feed) .dc-investor-card,
  .view:not(#view-feed) .dc-space-card,
  .view:not(#view-feed) .dc-space-room,
  .view:not(#view-feed) .dc-notification,
  .view:not(#view-feed) .dc-portfolio-card,
  .view:not(#view-feed) .dc-related-card,
  .view:not(#view-feed) .dc-owner-card,
  .view:not(#view-feed) .dc-search-group,
  .view:not(#view-feed) .dc-pinned-post,
  .view:not(#view-feed) .dc-draft-project,
  .view:not(#view-feed) .s2-people {
    padding: 16px;
  }

  /* Profile stacks: avatar above name, stats 2-up. */
  #view-profile .dc-cover-band {
    height: 120px;
    min-height: 120px;
  }

  #view-profile .dc-profile-head-main {
    flex-direction: column;
    gap: 12px;
    margin-top: -36px;
    padding: 0 16px;
  }

  #view-profile .dc-profile-head-main .dc-avatar {
    width: 80px;
    height: 80px;
    font-size: 24px;
  }

  #view-profile .dc-profile-head-text {
    padding-top: 0;
  }

  #view-profile .dc-profile-header > *:not(.dc-cover-band):not(.dc-profile-head-main) {
    margin-left: 16px;
    margin-right: 16px;
  }

  #view-profile .dc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Grids collapse to one column. */
  #view-projects #project-grid,
  #view-investors #investor-list,
  #view-spaces #spaces-list .dc-spaces-list {
    grid-template-columns: 1fr;
  }

  /* Messages: single column; thread below the conversation list. */
  #view-messages .messages-layout {
    grid-template-columns: 1fr;
  }

  #view-messages .dc-message {
    max-width: 92%;
  }

  /* Tabs scroll horizontally instead of wrapping off-canvas. */
  .view:not(#view-feed) .dc-tabs,
  .view:not(#view-feed) .dc-tab-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .view:not(#view-feed) .dc-tabs::-webkit-scrollbar,
  .view:not(#view-feed) .dc-tab-list::-webkit-scrollbar {
    display: none;
  }

  /* No horizontal overflow: long handles, URLs and code scroll in place. */
  .view:not(#view-feed) {
    overflow-x: clip;
  }

  .view:not(#view-feed) img,
  .view:not(#view-feed) video,
  .view:not(#view-feed) table {
    max-width: 100%;
  }

  .view:not(#view-feed) .dc-handle,
  .view:not(#view-feed) .dc-conv-preview,
  .view:not(#view-feed) .dc-message__body,
  .view:not(#view-feed) .dc-post-body {
    overflow-wrap: anywhere;
  }
}