@layer pages {
  .project-page { min-width: 0; }
  .project-heading { margin-bottom: 18px; align-items: end; }
  .project-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .project-title-line h1 { min-width: 0; }
  .project-heading .page-title p { max-width: 720px; }
  .project-heading .page-actions { position: relative; align-items: center; flex-wrap: nowrap; }

  .project-actions-menu { position: relative; }
  .project-actions-menu > summary { list-style: none; }
  .project-actions-menu > summary::-webkit-details-marker { display: none; }
  .project-actions-menu > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    min-width: 210px;
    padding: 7px;
    display: grid;
    gap: 3px;
    border-radius: var(--radius-lg);
    background: var(--glass-overlay-bg);
    -webkit-backdrop-filter: var(--glass-overlay-filter);
    backdrop-filter: var(--glass-overlay-filter);
    box-shadow: var(--elevation-overlay);
  }
  .project-actions-menu > div .button { width: 100%; justify-content: flex-start; }

  .project-progressive-tabs {
    margin-bottom: 24px;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: visible;
  }
  .project-progressive-tabs > .tab { min-width: 84px; min-height: 46px; padding: 10px 12px; display: grid; place-items: center; border-bottom: 2px solid transparent; border-radius: 0; }
  .project-progressive-tabs > .tab.active { border-bottom-color: var(--accent-fg); background: transparent; box-shadow: none; }
  .project-more-tabs { min-width: 126px; margin-left: auto; padding-left: 8px; display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; }
  .project-more-tabs select { min-width: 0; min-height: 38px; padding: 7px 9px; font-size: 11px; }

  .project-page .section-title { margin: 32px 0 12px; }
  .project-page .section-title-compact { margin-top: 0; }
  .project-page .section-title p { max-width: 720px; }

  .project-now {
    min-height: 260px;
    padding: clamp(28px, 5vw, 64px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr);
    align-items: end;
    gap: clamp(30px, 6vw, 84px);
    border: solid var(--divider);
    border-width: 1px 0;
    background:
      radial-gradient(circle at 4% 16%, color-mix(in srgb, var(--accent-fg) 9%, transparent), transparent 36%),
      transparent;
  }
  .project-now-main { max-width: 820px; }
  .project-now-main h2 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(30px, 4.3vw, 60px); line-height: .98; letter-spacing: -.055em; }
  .project-now-main > p { max-width: 650px; color: var(--text-soft); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.7; }
  .project-now-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
  .project-now-metrics { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-now-metrics > div { min-height: 92px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; border: solid var(--divider); border-width: 1px 0 0 1px; }
  .project-now-metrics > div:nth-child(-n + 2) { border-top: 0; }
  .project-now-metrics dt { color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
  .project-now-metrics dd { margin: 0; font-size: clamp(24px, 3vw, 38px); font-weight: 760; letter-spacing: -.04em; }
  .project-execution-exceptions { min-height: 46px; padding: 10px 0; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--divider); color: var(--warning-fg); }
  .project-execution-exceptions span { color: var(--text-soft); font-size: 12px; }
  .project-repair-map-list { display: grid; gap: var(--space-3); max-height: min(48vh, 34rem); overflow: auto; padding-inline-end: var(--space-1); }
  .project-repair-map-list > label { display: grid; gap: var(--space-2); }
  .project-operating-grid { margin-top: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .62fr); gap: clamp(36px, 7vw, 96px); }
  .project-task-stream { border-top: 1px solid var(--divider); }
  .project-task-line { min-height: 78px; padding: 13px 4px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 13px; border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none; }
  .project-task-line:hover { padding-inline: 10px; background: var(--cc-surface-hover); }
  .project-task-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 16px currentColor; }
  .project-task-line i.is-doing { color: var(--accent-fg); background: currentColor; }
  .project-task-line i.is-review { color: var(--warning-fg); background: currentColor; }
  .project-task-line span { min-width: 0; display: grid; gap: 3px; }
  .project-task-line small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
  .project-task-line em { color: var(--text-muted); font-size: 11px; font-style: normal; }
  .project-context-rail { padding-top: 2px; }
  .project-context-facts { border-top: 1px solid var(--divider); }
  .project-context-facts > .eyebrow { display: block; padding: 14px 0 8px; }
  .project-context-facts dl { margin: 0; }
  .project-context-facts dl > div { padding: 12px 0; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--divider); }
  .project-context-facts dt { color: var(--text-muted); }
  .project-context-facts dd { margin: 0; text-align: right; }
  .project-summary-flat { margin-top: 22px; border-bottom: 1px solid var(--divider); }
  .project-summary-flat > summary { padding: 13px 0; cursor: pointer; font-weight: 700; }
  .project-summary-flat .project-summary-copy { min-height: 0; padding: 4px 0 20px; }
  .project-open-roles-flat { margin-top: clamp(40px, 7vw, 82px); }
  .project-role-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(26px, 5vw, 70px); border-top: 1px solid var(--divider); }
  .project-page .project-role-lines .role-card { min-height: 0; margin: 0; padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--divider); }
  .project-coordination-empty { max-width: 760px; min-height: 360px; padding: clamp(48px, 8vw, 100px) 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: solid var(--divider); border-width: 1px 0; }
  .project-coordination-empty h2 { margin: 8px 0 12px; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.045em; }
  .project-coordination-empty p { max-width: 630px; color: var(--text-soft); line-height: 1.7; }
  .project-coordination-empty .button { margin-top: 22px; }

  /* Project metrics are one stat rail, never four cards. */
  .project-page #project-tab > .grid-4:first-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: solid var(--divider);
    border-width: 1px 0;
  }
  .project-page #project-tab > .grid-4:first-child > .metric {
    min-height: 108px;
    padding: 17px clamp(12px, 2vw, 22px);
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--divider);
    background: transparent;
  }
  .project-page #project-tab > .grid-4:first-child > .metric:first-child { border-left: 0; padding-left: 2px; }
  .project-page #project-tab > .grid-4:first-child .metric strong { font-family: inherit; font-size: clamp(27px, 3vw, 38px); }

  .project-overview-split,
  .project-overview-columns { margin-top: 26px; }
  .project-summary,
  .project-page .role-card { padding: 20px 0; border-top: 1px solid var(--divider); background: transparent; }
  .project-summary-copy { min-height: 170px; }
  .project-page .split-main > aside.card { padding: 20px 0; }
  .project-page .role-card { min-height: 170px; }

  .project-page .list { gap: 0; }
  .project-page .list-item { padding-inline: 4px; background: transparent; }
  .project-page .list-item:hover { background: var(--cc-surface-hover); }

  .project-page .kanban { width: 100%; max-width: 100%; padding: 0; gap: 0; overflow-x: auto; background: transparent; }
  .project-page .kanban-column { min-height: 430px; padding: 8px 12px; border-left: 1px solid var(--divider); background: transparent; }
  .project-page .kanban-column:first-child { border-left: 0; }
  .project-page .task-card { border-radius: var(--radius-sm); background: var(--cc-surface-row); box-shadow: none; }
  .project-page .task-card:hover { background: var(--cc-surface-hover); }
  .project-page .task-card:active,
  .project-page .task-card[aria-grabbed="true"] { background: var(--glass-overlay-bg); box-shadow: var(--elevation-drag); }

  .project-page .editor-layout { border: 1px solid var(--divider); border-radius: var(--radius-sm); background: transparent; }
  .project-page .editor-sidebar { background: var(--cc-surface-data); }
  .project-page .page-link.active { background: var(--cc-surface-selected); }
  .project-page .editor-toolbar { display: flex; flex-wrap: wrap; gap: 7px; }
  .project-page .project-page-version { display: block; margin-top: 3px; color: var(--text-muted); }
  .project-page .project-editor-title { min-width: 0; font-size: 17px; font-weight: 800; }
  .project-page .project-page-form { gap: 14px; }
  .project-page .project-page-body { min-height: 250px; }
  .project-page .page-link[data-dirty="true"] .project-page-version { color: var(--accent-fg); }
  .project-page .page-link[data-conflict="true"] .project-page-version { color: var(--danger); }
  .project-page .project-page-conflict-host:empty { display: none; }
  .project-page .project-page-conflict { margin: 10px 0 14px; padding: 12px 0; border: solid color-mix(in srgb, var(--warning) 42%, var(--divider)); border-width: 1px 0; background: transparent; }
  .project-page .project-page-conflict > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
  .project-page .project-page-conflict > div:first-child span { color: var(--text-secondary); }
  .project-page .project-page-conflict details { margin-top: 10px; }
  .project-page .project-page-conflict-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 8px; background: var(--divider); }
  .project-page .project-page-conflict-grid section { min-width: 0; padding: 10px; background: var(--cc-surface-data); }
  .project-page .project-page-conflict-grid h5 { margin: 6px 0; overflow-wrap: anywhere; }
  .project-page .project-page-conflict-grid pre { max-height: 18rem; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); }
  .project-page .project-page-conflict-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
  .project-page .project-page-conflict-choice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }

  .project-page .chat-shell,
  .project-page .cocreate-chat-shell { border: solid var(--divider); border-width: 1px 0; border-radius: 0; background: transparent; }
  .page[data-page-layout="viewport-workbench"] .project-page[data-active-tab="chat"] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .page[data-page-layout="viewport-workbench"] .project-page[data-active-tab="chat"] #project-tab {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .page[data-page-layout="viewport-workbench"] .project-page[data-active-tab="chat"] .cocreate-chat-shell {
    height: 100%;
    min-height: 0;
  }
  .project-page[data-active-tab="chat"] .messages { min-height: 0; }
  .project-page .chat-header { background: transparent; }
  .project-page .channel-list { background: var(--cc-surface-data); }

  .project-page .file-drop { border: solid var(--divider); border-width: 1px 0; background: transparent; }
  .project-page .file-card { padding: 18px 4px; border-top: 1px solid var(--divider); background: transparent; }
  .project-page .file-icon { background: var(--accent-bg); box-shadow: none; }

  .project-page .cocreate-member-card,
  .project-page .cocreate-agent-card,
  .project-page .cocreate-team-next { border-top: 1px solid var(--divider); border-radius: 0; background: transparent; box-shadow: none; }

  .project-page .ai-console { gap: clamp(26px, 4vw, 54px); }
  .project-page .ai-console > .card { padding: 20px 0; border-top: 1px solid var(--divider); background: transparent; }
  .project-page .project-ai-form { gap: 12px; }
  .project-page .project-ai-prompt { min-height: 230px; }
  .project-page .project-ai-divider { margin: 20px 0; border: 0; border-top: 1px solid var(--divider); }
  .project-page .project-ai-task-toggle { margin: 10px 0; display: flex; align-items: center; gap: 8px; }
  .project-page .project-ai-task-toggle input { width: auto; }
  .project-page .ai-output { padding-left: 16px; border-left: 2px solid var(--divider-strong); background: transparent; }
  .project-scene-context { width: fit-content; max-width: min(100%, 46rem); margin-top: 8px; color: var(--text-muted); font-size: 11px; }
  .project-scene-context summary { cursor: pointer; list-style: none; }
  .project-scene-context summary::-webkit-details-marker { display: none; }
  .project-scene-context summary::after { content: '＋'; margin-left: 5px; font-weight: 500; }
  .project-scene-context[open] summary::after { content: '−'; }
  .project-scene-context strong { color: var(--text-soft); font-weight: 750; }
  .project-scene-context p { margin: 5px 0 0; color: var(--text-muted); }
  .project-page .project-ai-format { align-self: end; color: var(--text-muted); font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
  .project-page .graph-wrap { background: var(--cc-surface-data); }
  .project-page .legend-dot { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #8397a5; }
  .project-page .legend-dot-project { background: #d9ad65; }
  .project-page .legend-dot-workspace { background: #65d8c7; }
  .project-page .legend-dot-user { background: #6fb6ff; }
  .project-page .legend-dot-role { background: #f6c76b; }
  .project-page .legend-dot-task { background: #9c8dff; }
  .project-page .legend-dot-capability { background: #71d99a; }

  #modal-root .project-match-output .match-list { gap: 0; }
  #modal-root .project-match-output .match-item { padding-inline: 2px; border-top: 1px solid var(--divider); border-radius: 0; background: transparent; box-shadow: none; }
  #modal-root .project-match-output .dimension-progress { width: 100%; height: 6px; appearance: none; overflow: hidden; border: 0; border-radius: 999px; background: var(--cc-surface-data); }
  #modal-root .project-match-output .dimension-progress::-webkit-progress-bar { background: var(--cc-surface-data); }
  #modal-root .project-match-output .dimension-progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg,var(--warning-fg),var(--danger-fg)); }
  #modal-root .project-match-output .dimension-progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg,var(--warning-fg),var(--danger-fg)); }
  #modal-root .project-error { color: var(--danger-fg); }

  @media (max-width: 900px) {
    .project-heading { align-items: flex-start; gap: 14px; }
    .project-heading .page-actions { width: auto; }
    .project-overview-split,
    .project-overview-columns,
    .project-page .ai-console { grid-template-columns: 1fr; }
    .project-now { grid-template-columns: 1fr; align-items: start; }
    .project-operating-grid { grid-template-columns: 1fr; }
    .project-context-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .project-page[data-active-tab="chat"] .chat-main { min-height: 0; overflow: hidden; }
  }

  @media (max-width: 620px) {
    .project-heading { margin-bottom: 10px; }
    .project-title-line h1 { width: 100%; font-size: 34px; }
    .project-heading .page-title p { margin-top: 5px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 13px; }
    .project-heading .page-actions { display: flex; gap: 5px; }
    .project-heading .page-actions > .button { min-height: 44px; }
    .project-scene-context { margin-top: 6px; }
    .project-heading .project-scene-context p { display: block; font-size: 10px; -webkit-line-clamp: unset; }
    .project-actions-menu > summary { min-height: 44px; }
    .project-actions-menu > div { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + var(--safe-bottom)); }

    .project-progressive-tabs { margin-bottom: 16px; width: 100%; display: flex; }
    .project-progressive-tabs > .tab,
    .project-progressive-tabs > .project-more-tabs { min-width: 0; flex: 1 1 0; padding-inline: 2px; }
    .project-progressive-tabs > .tab { min-height: 44px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .project-more-tabs { margin-left: 0; padding-left: 2px; }
    .project-more-tabs > span { display: none; }
    .project-more-tabs select { width: 100%; min-height: 44px; padding-inline: 3px; text-align: center; text-overflow: ellipsis; }
    .project-page[data-active-tab="chat"] .project-heading { margin-bottom: 5px; }
    .project-page[data-active-tab="chat"] .project-title-line h1 { font-size: 25px; }
    .project-page[data-active-tab="chat"] .project-heading .page-title > p,
    .project-page[data-active-tab="chat"] .project-scene-context { display: none; }
    .project-page[data-active-tab="chat"] .project-progressive-tabs { margin-bottom: 7px; }
    .project-page[data-active-tab="chat"] .project-conversation-title { margin: 6px 0; }
    .project-page[data-active-tab="chat"] .project-conversation-title p { display: none; }
    .project-page[data-active-tab="chat"] .chat-header { padding: 9px 11px; align-items: center; flex-direction: row; }
    .project-page[data-active-tab="chat"] .chat-header-actions { width: auto; margin-left: auto; justify-content: flex-end; }
    .project-page[data-active-tab="chat"] .messages > .empty-state { min-height: 0; }
    .project-page[data-active-tab="chat"] .chat-form { padding: 8px; }
    .project-now { min-height: 0; padding: 28px 0 20px; gap: 28px; }
    .project-now-main h2 { font-size: clamp(30px, 10vw, 44px); }
    .project-now-actions .button { flex: 1 1 150px; }
    .project-now-metrics > div { min-height: 72px; padding: 12px 10px; }
    .project-operating-grid { margin-top: 34px; gap: 34px; }
    .project-context-rail { display: block; }
    .project-summary-flat { margin-top: 20px; }
    .project-role-lines { grid-template-columns: 1fr; }

    .project-page .section-title { min-height: 0; margin: 22px 0 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 5px 9px; }
    .project-page .section-title > :first-child { min-width: 0; }
    .project-page .section-title h2 { font-size: 20px; }
    .project-page .section-title p { margin-top: 1px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 11px; }
    .project-page .section-title .button { min-height: 38px; grid-column: 2; grid-row: 1; }

    .project-page .editor-main .card-header { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 8px; }
    .project-page .project-editor-title { width: 100%; min-width: 0; }
    .project-page .editor-toolbar { display: grid; grid-template-columns: repeat(auto-fit,minmax(72px,1fr)); }
    .project-page .editor-toolbar .button { width: 100%; min-height: 40px; }

    .project-page #project-tab > .grid-4:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-page #project-tab > .grid-4:first-child > .metric { min-height: 62px; padding: 8px 10px; border-top: 1px solid var(--divider); }
    .project-page #project-tab > .grid-4:first-child > .metric:nth-child(odd) { border-left: 0; padding-left: 2px; }
    .project-page #project-tab > .grid-4:first-child > .metric:nth-child(-n + 2) { border-top: 0; }
    .project-page #project-tab > .grid-4:first-child .metric strong { font-size: 24px; }
    .project-page #project-tab > .grid-4:first-child .metric-note { display: none; }
    .project-overview-split,
    .project-overview-columns { margin-top: 18px; gap: 20px; }
    .project-summary-copy { min-height: 110px; }
    .project-page .list-side { max-width: 42%; }
    .project-page .kanban { grid-template-columns: repeat(5, minmax(252px, 78vw)); }
    .project-page .editor-layout { grid-template-columns: 1fr; }
    .project-page .editor-sidebar { display: flex; overflow-x: auto; }
    .project-page .page-link { min-width: 160px; }
    .project-page .project-page-conflict-grid { grid-template-columns: 1fr; }
  }
}