/* Project colour: a light wash of the project's own colour across its page.
   setAccent() puts the project colour in --accent and adds body.project-mode.
   Text stays neutral; status colours (green, amber, red) are left alone. */
body.project-mode{
  --pt-wash:color-mix(in srgb,var(--accent) 3.5%,var(--bg,#f4f7fb));
  --pt-band:color-mix(in srgb,var(--accent) 5%,var(--surface,#fff));
  --pt-tab:color-mix(in srgb,var(--accent) 8%,var(--surface,#fff));
  --pt-deep:color-mix(in srgb,var(--accent) 70%,#14243a);
  --pt-ring:color-mix(in srgb,var(--accent) 45%,var(--line,#dbe3e8));
}
:root[data-theme="dark"] body.project-mode,
html.v-universe[data-tone=dark] body.project-mode{
  --pt-wash:color-mix(in srgb,var(--accent) 6%,var(--bg));
  --pt-band:color-mix(in srgb,var(--accent) 9%,var(--surface));
  --pt-tab:color-mix(in srgb,var(--accent) 15%,var(--surface));
  --pt-deep:color-mix(in srgb,var(--accent) 55%,#fff);
}

body.project-mode #mainContent{background:var(--pt-wash)!important}
body.project-mode #mainContent .project-workspace .hero{background:var(--pt-band)!important}
body.project-mode .project-workspace .hero-kicker{color:var(--pt-deep)}
body.project-mode .project-page-head .btn.link{color:var(--pt-deep)}
body.project-mode .project-workspace .project-orb{box-shadow:inset 0 0 0 8px rgba(255,255,255,.42),0 0 0 4px color-mix(in srgb,var(--node) 16%,transparent)}
body.project-mode .project-workspace .detail-tab.active{color:var(--pt-deep);border-bottom-color:var(--accent);background:var(--pt-tab)!important}

/* section headings: a thin bar in the project colour */
body.project-mode #projectTabBody .section-title,
body.project-mode .project-workspace .milestone-journey>h3{border-left:3px solid var(--accent);border-radius:0;padding-left:8px}

/* ticks and milestones follow the project colour */
body.project-mode #projectTabBody input[type=checkbox]{accent-color:var(--accent)}
body.project-mode #projectTabBody .task-check:not(:checked){border-color:var(--pt-ring)}
body.project-mode .journey-step.next{border-color:var(--accent)}
body.project-mode .journey-step.next>span{border-color:var(--accent);color:var(--pt-deep)}

/* Three boxes: the header, the tab bar (tinted) and the tab content.
   v11-project-layout.js adds .v11-split and wraps the content in .v11-pane. */
body.project-mode #mainContent .project-workspace.v11-split{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;overflow:visible}
body.project-mode #mainContent .v11-split>.hero{border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line,#dce5eb));border-radius:18px;box-shadow:inset 0 3px 0 var(--accent),0 8px 24px color-mix(in srgb,var(--accent) 7%,transparent)}
body.project-mode #mainContent .v11-split>.detail-tabs{margin-top:12px;padding:0 10px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line,#dce5eb));border-radius:14px;background:var(--pt-tab)!important;box-shadow:none}
body.project-mode #mainContent .v11-split>.detail-tabs .detail-tab.active{background:color-mix(in srgb,var(--accent) 14%,var(--surface,#fff))!important}
body.project-mode #mainContent .v11-split>.v11-pane{margin-top:12px;background:var(--surface,#fff);border:1px solid var(--line,#dce5eb);border-radius:18px;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 5%,transparent)}
:root[data-theme="dark"] body.project-mode,html.v-universe[data-tone=dark] body.project-mode{--pt-tab:color-mix(in srgb,var(--accent) 15%,var(--surface))}

/* Next action: its own box at the top of the Overview's right column */
body.project-mode #projectTabBody .panel.v11-next{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line,#dce5eb))!important;background:color-mix(in srgb,var(--accent) 5%,var(--surface,#fff))!important}
.v11-next-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.v11-next-head b{display:block;font-size:14px}
.v11-next-head small{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:2px}
.v11-next-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent);color:var(--accent-text,#fff)}
.v11-next-ico svg{width:16px;height:16px}
.v11-next-text{margin:0;font-size:15px;font-weight:600;line-height:1.45;color:var(--text)}
.v11-next-task{margin:6px 0 0;font-size:11px;color:var(--muted)}
.v11-next-btns{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:10px;flex-wrap:wrap}
.v11-next-empty{width:100%;padding:12px;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--line,#dce5eb));border-radius:10px;background:transparent;color:var(--pt-deep,var(--accent));font-weight:600;font-size:12px;cursor:pointer}
.v11-next-empty:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.v11-next-none{margin:0;color:var(--muted);font-size:12px}
.v11-next-form textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:70px;font:inherit;font-size:13px;padding:9px 10px;border:1px solid var(--line,#dce5eb);border-radius:9px;background:var(--surface,#fff);color:var(--text)}
.v11-next-link{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:11px;color:var(--muted)}
.v11-next-link select{flex:1;min-width:0;font-size:12px}
.v11-next-hist{margin-top:12px;border-top:1px solid color-mix(in srgb,var(--accent) 18%,var(--line2,#edf1f4));padding-top:8px}
.v11-next-hist summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--muted);list-style:revert}
.v11-next-hist summary span{display:inline-block;margin-left:4px;padding:0 6px;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.v11-next-hist .na-history-item{padding:7px 0}
.v11-next-hist .na-history-item p{font-size:12px}