@layer projects {
  .embedded-workspace .sidebar, .embedded-workspace .sidebar-scrim { display: none; }
  .embedded-workspace .dashboard { margin-left: 0; }
  .projects-dashboard { --detail-width: 470px; }
  .project-detail-panel { width: 470px; }

  .project-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
  .project-metric { min-height: 94px; display: flex; align-items: center; gap: 15px; padding: 17px 20px; text-align: left; }
  .project-metric:hover, .project-metric[aria-pressed="true"] { border-color: #a89df0; box-shadow: 0 0 0 2px #ded9ff inset; }
  .project-metric small { display: block; color: var(--muted); font-size: .76rem; }
  .project-metric strong { display: block; margin-top: 2px; font-size: 1.9rem; line-height: 1; }
  .metric-icon.risk { background: var(--pink); color: #a32e44; font-weight: 800; }
  .metric-icon.success { background: var(--green); color: #286a32; font-weight: 800; }

  .projects-card { overflow: hidden; }
  .project-toolbar { padding: 16px 16px 12px; }
  .project-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; align-items: end; }
  .project-filters .search-control { flex: 1 1 220px; min-width: 200px; }
  .project-filters label:not(.search-control):not(.archived-filter) { flex: 1 1 130px; min-width: 130px; color: var(--muted); font-size: .68rem; }
  .project-filters label > span { display: block; margin-bottom: 5px; }
  .project-filters select { width: 100%; min-height: 44px; border: 1px solid #aaa9a2; border-radius: 8px; background: white; color: var(--ink); padding: 8px 10px; }
  .project-filters .archived-filter { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink); min-height: 44px; white-space: nowrap; }
  .project-filters .archived-filter input { width: 16px; height: 16px; margin: 0; }
  .status-pill.archived { background: #eeedf0; color: #55545c; border: 1px solid #d5d3c9; }
  .projects-card table { min-width: 900px; }
  .project-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
  .project-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: #eeecff; color: var(--indigo); }
  .project-icon svg { width: 17px; }
  .project-cell small { display: block; color: var(--muted); margin-top: 1px; }
  .status-pill.draft, .status-pill.not-started { background: #eeedf0; color: #55545c; }
  .status-pill.in-progress { background: var(--green); color: #24532b; }
  .status-pill.waiting-on-client, .status-pill.in-review { background: #f5efc6; color: #555216; }
  .status-pill.on-hold { background: var(--blue); color: #285176; }
  .status-pill.completed { background: #d8ecd7; color: #235a29; }
  .status-pill.cancelled { background: var(--pink); color: #742d3b; }
  .late-date { color: #a32e44; font-weight: 650; }

  .project-profile { display: grid; grid-template-columns: 48px 1fr auto; gap: 11px; align-items: start; padding-right: 34px; }
  .project-profile .project-icon { width: 48px; height: 48px; border-radius: 14px; }
  .project-profile h2 { font-size: 1.24rem; }
  .project-profile p { color: var(--muted); font-size: .78rem; margin-top: 3px; }
  .project-top-actions { display: flex; gap: 6px; }
  .project-edit-button { min-height: 38px; padding: 7px 10px; }
  .project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 15px; }
  .project-fact { display: grid; gap: 2px; font-size: .74rem; }
  .project-fact span { color: var(--muted); font-size: .66rem; }
  .health { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
  .health::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #65aa6d; }
  .health.at-risk::before { background: #d7b71d; }
  .health.off-track::before { background: #d75b72; }

  .pricing-card { margin-top: 14px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfbf9; }
  .pricing-card h3 { margin-bottom: 8px; font-size: .85rem; }
  .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
  .price-item { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 7px; background: white; }
  .price-item span { display: block; color: var(--muted); font-size: .6rem; }
  .price-item strong { display: block; margin-top: 3px; font-size: .76rem; overflow-wrap: anywhere; }
  .price-item.final { border-color: #d8d1ff; background: #f1eeff; color: var(--indigo); }

  .project-tabs { position: sticky; top: -24px; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); margin: 16px -22px 0; padding: 0 12px; border-block: 1px solid var(--line); background: white; }
  .project-tab { min-height: 44px; border: 0; border-bottom: 2px solid transparent; background: white; color: var(--muted); font-size: .69rem; }
  .project-tab[aria-selected="true"] { border-bottom-color: var(--indigo); color: var(--indigo); font-weight: 700; }
  .tab-panel { padding-top: 15px; }
  .detail-section + .detail-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
  .detail-section-heading h3 { font-size: .92rem; }
  .detail-section-heading small { color: var(--muted); font-size: .67rem; }
  .mini-button { min-height: 36px; border: 1px solid #b9b2ee; border-radius: 7px; background: white; color: var(--indigo); padding: 6px 9px; font-size: .68rem; }
  .mini-button:hover { background: var(--lavender); }

  .project-summary { color: #44443f; font-size: .78rem; }
  .next-step-card { margin-top: 10px; padding: 10px; border-left: 3px solid var(--indigo); border-radius: 0 8px 8px 0; background: #f4f2ff; }
  .next-step-card span { color: var(--muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }
  .next-step-card strong { display: block; margin-top: 3px; font-size: .78rem; }

  .milestone-list, .action-list, .resource-list, .message-list, .history-list { display: grid; gap: 7px; }
  .milestone { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 42px; padding: 6px 0; font-size: .73rem; }
  .milestone + .milestone { border-top: 1px solid #ecebe6; }
  .milestone-dot { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #aaa; border-radius: 50%; color: white; font-size: .65rem; }
  .milestone.complete .milestone-dot { border-color: #66a86b; background: #66a86b; }
  .milestone.current .milestone-dot { border: 6px solid #dcd7ff; background: var(--indigo); }
  .milestone button { text-align: left; border: 0; background: transparent; padding: 4px 0; }
  .milestone-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .milestone-main strong { min-width: 0; font-size: .82rem; line-height: 1.25; }
  .milestone-status { flex: 0 0 auto; border-radius: 999px; background: #eeedf0; color: #55545c; padding: 3px 7px; font-size: .59rem; font-weight: 650; line-height: 1; }
  .milestone.complete .milestone-status { background: #e2f0e0; color: #286332; }
  .milestone.current .milestone-status { background: #e9e6ff; color: #4936d0; }
  .milestone-date { color: var(--muted); font-size: .63rem; line-height: 1.25; text-align: right; white-space: nowrap; }

  .action-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; }
  .action-item input { width: 20px; height: 20px; margin: 1px 0 0; }
  .action-item strong { display: block; font-size: .73rem; }
  .action-item small { display: block; color: var(--muted); font-size: .63rem; margin-top: 2px; }
  .action-item.done strong { text-decoration: line-through; color: var(--muted); }
  .visibility { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 6px; background: #eeeef0; color: #5e5d65; font-size: .57rem; white-space: nowrap; }
  .visibility.client { background: var(--lavender); color: var(--indigo); }

  .resource-card { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; }
  .resource-preview { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 7px; background: var(--lavender); color: var(--indigo); font-size: .68rem; font-weight: 700; }
  .resource-preview img { width: 100%; height: 100%; object-fit: cover; }
  .resource-card strong, .message-card strong { display: block; font-size: .72rem; }
  .resource-card small, .message-card small { display: block; color: var(--muted); font-size: .62rem; overflow-wrap: anywhere; }
  .resource-actions { display: flex; align-items: center; gap: 5px; }

  .message-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .message-actions button { min-height: 40px; }
  .message-card { padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; }
  .message-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
  .message-card p { margin-top: 6px; color: #44443f; font-size: .71rem; white-space: pre-wrap; }
  .delivery { border-radius: 999px; padding: 3px 7px; background: var(--green); color: #286133; font-size: .58rem; }
  .delivery.inbound { background: var(--blue); color: #285176; }
  .message-card .mini-button { margin-top: 7px; }
  .message-attachments, .attachment-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
  .message-attachments span, .attachment-preview span { max-width: 100%; overflow-wrap: anywhere; border: 1px solid #d9d4ef; border-radius: 999px; background: #f2efff; color: #4936d0; padding: 4px 8px; font-size: .62rem; }

  .ai-project-summary { margin: 0; }
  .ai-summary-title { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
  .ai-summary-title h3 { font-size: .86rem; }
  .ai-summary-title small { display: block; color: var(--muted); font-size: .61rem; margin-top: 2px; }
  .summary-freshness { position: relative; z-index: 1; flex: 0 0 auto; border-radius: 999px; background: #dfeedd; color: #286133; padding: 4px 7px; font-size: .58rem; font-weight: 700; }
  .summary-freshness.stale { background: #f5efc6; color: #625c12; }
  .summary-provenance { position: relative; z-index: 1; display: grid; gap: 3px; margin-top: 11px; color: var(--muted); font-size: .61rem; line-height: 1.35; }
  .refresh-summary { position: relative; z-index: 1; margin-top: 10px; }
  .summary-disclosure { margin-top: 6px !important; color: var(--muted) !important; font-size: .59rem !important; }

  .attachment-field span { color: var(--muted); font-weight: 500; }
  .attachment-field small { display: block; color: var(--muted); font-size: .65rem; font-weight: 500; line-height: 1.35; }
  .attachment-field input[type="file"] { padding: 8px; }

  .note-card, .history-item { padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfbf9; font-size: .71rem; }
  .note-card small, .history-item small { display: block; color: var(--muted); font-size: .61rem; margin-top: 4px; }
  /* Real bug fixed 2026-09-15 (independent QA): distinguishes a real
     client-submitted note from a staff-only internal note at a glance. */
  .client-note-card { border-left: 3px solid var(--indigo); background: #f6f5ff; }
  .message-list + .message-list { margin-top: 10px; }
  .note-form textarea { width: 100%; min-height: 85px; margin-top: 7px; border: 1px solid #aaa9a2; border-radius: 8px; padding: 9px; resize: vertical; }
  .note-form .form-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
  .check-line { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
  .check-line input { width: 18px; height: 18px; }

  .project-edit-form { display: grid; gap: 10px; margin-top: 14px; }
  .project-edit-form label, #item-fields label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; font-weight: 650; }
  .project-edit-form input:not([type="checkbox"]), .project-edit-form select, .project-edit-form textarea, #item-fields input:not([type="checkbox"]), #item-fields select, #item-fields textarea { width: 100%; min-height: 44px; border: 1px solid #aaa9a2; border-radius: 8px; background: white; color: var(--ink); padding: 8px 10px; }
  #item-fields .check-line, .project-edit-form .check-line { display: flex !important; }
  #item-fields .check-line input, .project-edit-form .check-line input { width: 18px !important; height: 18px !important; min-height: 0 !important; flex: 0 0 auto; }
  .project-edit-form textarea, #item-fields textarea { min-height: 82px; resize: vertical; }
  .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
  #item-fields { display: grid; gap: 11px; }
  #item-fields .field-grid { gap: 10px; }

  @media (max-width: 1250px) {
    .projects-dashboard { margin-right: 0; }
    .project-detail-panel { z-index: 90; box-shadow: -12px 0 35px #1112; transform: translateX(102%); }
    .project-detail-panel.open { transform: none; }
    .project-detail-panel.open + .panel-scrim { opacity: 1; pointer-events: auto; }
    .project-filters { grid-template-columns: 1.4fr 1fr 1fr; }
    .project-filters label:last-child { grid-column: 3; }
  }
  @media (max-width: 900px) {
    .project-metrics { grid-template-columns: 1fr 1fr; }
    .project-filters { grid-template-columns: 1fr 1fr; }
    .project-filters label:last-child { grid-column: auto; }
  }
  @media (max-width: 760px) {
    .projects-dashboard { margin-left: 0; padding: 14px; }
    .project-detail-panel { width: min(470px, 100vw); }
    .page-header { align-items: flex-start; }
    .page-header .primary-button { min-width: 44px; }
    .project-metrics { gap: 8px; }
    .project-metric { min-height: 82px; padding: 12px; gap: 10px; }
    .project-metric strong { font-size: 1.55rem; }
    .project-filters { grid-template-columns: 1fr; }
    .project-filters .search-control { width: 100%; }
    .projects-card .table-wrap { overflow: visible; }
    .projects-card table, .projects-card tbody, .projects-card tr, .projects-card td { display: block; width: 100%; min-width: 0; }
    .projects-card thead { display: none; }
    .projects-card tr { position: relative; padding: 11px 12px; border-top: 1px solid var(--line); }
    .projects-card td { min-height: 31px; height: auto; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; align-items: start; border: 0; padding: 5px 0; }
    .projects-card td::before { content: attr(data-label); grid-column: 1; color: var(--muted); font-size: .68rem; font-weight: 650; }
    .projects-card td > span, .projects-card td > div { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
    .projects-card td:first-child { display: block; padding-bottom: 9px; }
    .projects-card td:first-child > div { display: flex; }
    .projects-card td:first-child::before, .projects-card td:last-child { display: none; }
    .status-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
  }
  @media (max-width: 430px) {
    .projects-dashboard { padding: 11px; }
    .page-header { flex-direction: row; }
    .subtitle { font-size: .88rem; }
    .project-metrics { grid-template-columns: 1fr; }
    .project-facts, .pricing-grid, .edit-grid { grid-template-columns: 1fr; }
    .project-tabs { overflow-x: auto; grid-template-columns: repeat(5, minmax(74px, 1fr)); }
    .detail-panel-inner { padding-inline: 16px; }
    .project-tabs { margin-inline: -16px; }
    .field-grid { grid-template-columns: 1fr; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions button { width: 100%; }
  }
}