#projects-col { display:none; grid-column:2 / -1; grid-row:1; min-width:0; min-height:0; flex-direction:column; background:var(--bg); color:var(--text); }
body[data-session="projects"] #projects-col { display:flex; }
body[data-session="projects"] #thread-col, body[data-session="projects"] #canvas-col, body[data-session="projects"] #today-col, body[data-session="projects"] #tasks-col { display:none; }
body[data-session="projects"] #body { grid-template-columns:var(--sidebar-w,280px) minmax(0,1fr) 0; }
body[data-session="projects"].sidebar-collapsed #body { grid-template-columns:0 minmax(0,1fr) 0; }
#projectsScroll { overflow:auto; flex:1; min-height:0; padding:32px clamp(16px,4vw,56px) 72px; }
#projectsView { max-width:1200px; margin:0 auto; overflow-wrap:anywhere; --pj-panel:var(--surface-1,var(--bg)); --pj-wash:color-mix(in srgb,var(--accent) 7%,var(--bg)); }
:root[data-skin="calm"] body.sidebar-collapsed[data-session="projects"] #projects-col { padding-top:60px; box-sizing:border-box; }
:root[data-skin="calm"] body.sidebar-collapsed[data-session="projects"] .calm-flead { display:inline-flex; }
:root[data-skin="calm"] body[data-session="projects"] .calm-flead .calm-hb { min-height:44px; min-width:44px; }
.pj-heading { position:relative; margin:8px 0 28px; padding-right:160px; }
.pj-heading h1 { font-size:28px; font-weight:600; line-height:1.2; margin:8px 0; letter-spacing:-.035em; }
.pj-heading p { max-width:560px; margin:0; }
.pj-eyebrow { color:var(--text-3); font-size:11px; font-weight:500; letter-spacing:.02em; }
.pj-heading .pj-muted { font-size:13px; color:var(--text-3); }
#projectsView h2 { font-size:17px; font-weight:600; letter-spacing:-.015em; margin:22px 0 12px; }
#projectsView h3 { font-size:16px; }
.pj-muted { color:var(--text-2,var(--text)); font-size:14px; line-height:1.55; }
.pj-meta { color:var(--text-2,var(--text)); font-size:12px; line-height:1.5; }
.pj-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#projectsView input, #projectsView textarea, #projectsView select, .pj-button { box-sizing:border-box; min-height:44px; min-width:44px; font:inherit; font-size:14px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
#projectsView input, #projectsView textarea { width:100%; }
#projectsView select { appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23828a96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:16px; background-repeat:no-repeat; background-position:right 12px center; }
#projectsView textarea { resize:vertical; line-height:1.6; }
.pj-button { cursor:pointer; text-align:left; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .14s,border-color .14s,box-shadow .14s; }
.pj-button:hover { background:var(--pj-wash,var(--hover)); border-color:var(--accent-line,var(--line)); }
#projectsView :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.pj-button.pj-primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; box-shadow:0 2px 3px #0000000a; }
.pj-primary:hover { filter:brightness(1.08); }
#projectsView :disabled { opacity:.55; cursor:default; }
.pj-icon { width:18px; height:18px; flex:none; }
.pj-create { position:absolute; right:0; top:30px; }
.pj-directory-tools { padding:16px 0; border-top:1px solid var(--line); }
.pj-search { flex:1 1 220px; position:relative; min-width:160px; }
.pj-search > .pj-icon { position:absolute; top:13px; left:12px; color:var(--text-2); pointer-events:none; }
#projectsView .pj-search input { padding-left:38px; background:var(--pj-panel); }
.pj-density[aria-pressed="true"] { background:var(--pj-wash); border-color:var(--accent); }
.pj-directory-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 12px; }
.pj-directory-caption p { margin:0; font-size:12px; }
.pj-directory { width:100%; border:1px solid var(--line); border-spacing:0; border-radius:12px; overflow:hidden; table-layout:fixed; background:var(--bg); }
.pj-directory th { font-size:12px; font-weight:500; color:var(--text-3); text-align:left; padding:12px 16px; background:var(--pj-panel); border-bottom:1px solid var(--line-soft); }
.pj-directory th:first-child { width:49%; }
.pj-directory th:nth-child(2) { width:14%; }
.pj-directory th:nth-child(3) { width:16%; }
.pj-directory th:last-child { width:21%; }
.pj-directory td { padding:16px; vertical-align:middle; border-bottom:1px solid var(--line-soft); }
.pj-directory tr:last-child td { border-bottom:0; }
.pj-project { cursor:pointer; transition:background .14s; }
.pj-project:hover, .pj-project:focus-within { background:var(--pj-wash); }
.pj-project .pj-open-project { display:flex; justify-content:flex-start; width:100%; border:0; padding:0; background:none; text-align:left; gap:14px; box-shadow:none; }
.pj-tile { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,var(--bg)); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); }
.pj-tile[data-tone="1"] { color:var(--text); background:color-mix(in srgb,#aa8fe1 17%,var(--bg)); border-color:color-mix(in srgb,#aa8fe1 25%,transparent); }
.pj-tile[data-tone="2"] { color:var(--text); background:color-mix(in srgb,#65b9a6 15%,var(--bg)); border-color:color-mix(in srgb,#65b9a6 25%,transparent); }
.pj-tile[data-tone="3"] { color:var(--text); background:color-mix(in srgb,#d7ac68 16%,var(--bg)); border-color:color-mix(in srgb,#d7ac68 25%,transparent); }
.pj-row-title { display:flex; flex-direction:column; gap:5px; min-width:0; }
.pj-row-title strong { font-size:14px; font-weight:600; line-height:1.4; }
.pj-objective { color:var(--text-2); font-size:12px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pj-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:var(--pj-panel); color:var(--text-2); font-size:12px; font-weight:500; white-space:nowrap; }
.pj-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pj-badge.is-active, .pj-badge[data-state="done"] { color:var(--ok-text,var(--text)); background:var(--ok-dim,var(--pj-wash)); }
.pj-badge[data-state="waiting_approval"], .pj-badge[data-state="running"] { color:var(--text); background:var(--run-dim,var(--pj-wash)); }
.pj-badge[data-state="failed"] { color:var(--err,var(--text)); }
.pj-count { font-size:13px; font-variant-numeric:tabular-nums; font-weight:600; }
.pj-work-cell { white-space:nowrap; }
.pj-date { font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.pj-updated-cell > .pj-icon { float:right; color:var(--text-2); width:16px; opacity:0; }
.pj-project:hover .pj-updated-cell > .pj-icon, .pj-project:focus-within .pj-updated-cell > .pj-icon { opacity:1; }
.pj-compact .pj-directory td { padding-block:8px; }
.pj-compact .pj-objective { -webkit-line-clamp:1; }
.pj-compact .pj-tile { width:32px; height:32px; border-radius:8px; }
.pj-empty { padding:24px 0; line-height:1.6; color:var(--text-2); }
.pj-empty-directory { padding:56px 24px; border:1px dashed var(--line); border-radius:12px; text-align:center; background:var(--pj-panel); }
.pj-empty-directory > .pj-icon { width:32px; height:32px; color:var(--accent); }
.pj-empty-directory p { max-width:400px; margin:0 auto; font-size:14px; }
.pj-error { border-left:3px solid var(--err,var(--accent)); padding:12px; line-height:1.6; background:var(--pj-panel); }
.pj-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr); gap:24px; align-items:start; }
.pj-layout.is-overview { grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); }
.pj-layout.is-overview .pj-work { order:-1; }
.pj-context { min-width:0; padding:24px; background:var(--pj-panel); border:1px solid var(--line-soft); border-radius:12px; }
.pj-context .pj-tools .pj-button:not(.pj-primary) { font-size:12px; background:transparent; }
#projectsView .pj-context > h2:first-child { margin-top:0; }
.pj-context-copy { white-space:pre-wrap; line-height:1.65; font-size:14px; margin:0 0 24px; }
.pj-context #projectSaveState { margin:20px 0 12px; font-size:12px; }
.pj-field { display:block; font-size:13px; font-weight:500; margin-bottom:20px; }
.pj-field input, .pj-field textarea { display:block; margin-top:8px; font-weight:400; }
.pj-work { min-width:0; }
.pj-work-heading { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#projectsView .pj-work-heading h2 { margin:0; }
.pj-work-heading > .pj-count { border-radius:6px; background:var(--pj-panel); padding:3px 8px; }
.pj-work-heading > button { margin-left:auto; }
.pj-link { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 8px; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; padding:12px 0; margin-top:0; background:transparent; }
.pj-link:hover { background:color-mix(in srgb,var(--accent) 3%,var(--bg)); }
.pj-link > .pj-work-open { border:0; padding-left:0; justify-content:flex-start; font-weight:500; background:none; text-align:left; }
.pj-work-open > .pj-icon { color:var(--accent); }
.pj-link > .pj-meta { grid-column:1; grid-row:2; }
.pj-work-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-left:26px; }
.pj-link > :last-child { grid-column:2; grid-row:1 / 3; border-color:transparent; color:var(--text-2); background:none; }
.pj-next { margin-top:28px; padding:20px; background:var(--pj-panel); border:1px solid var(--line); border-radius:12px; }
#projectsView .pj-next h2 { margin:0 0 10px; }
.pj-next .pj-muted { margin:0 0 18px; }
.pj-back { border-color:transparent; padding-left:0; color:var(--text-2); background:none; }
.pj-picker { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--pj-panel); }
.pj-options { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; margin:12px 0; }
.pj-options .pj-button { text-align:left; justify-content:flex-start; }
#projectsView .pj-project[hidden], #projectsView .pj-directory[hidden], .pj-options [hidden], #projectNoMatch[hidden] { display:none; }
@media(max-width:1000px) { .pj-density { display:none; } .pj-directory th:first-child { width:43%; } .pj-directory th:nth-child(2) { width:18%; } .pj-directory th:nth-child(3) { width:17%; } .pj-directory th:last-child { width:22%; } }
@media(max-width:800px) {
  .pj-layout, .pj-layout.is-overview { grid-template-columns:minmax(0,1fr); gap:24px; }
  .pj-heading { padding-right:0; } .pj-heading h1 { font-size:28px; }
  .pj-create { position:static; margin-top:20px; }
  #projectsView input, #projectsView textarea, #projectsView select { font-size:16px; }
  .pj-directory-caption { align-items:flex-start; flex-direction:column; gap:4px; }
  .pj-directory-tools .pj-search { flex-basis:100%; }
  #projectsView .pj-directory-tools select { min-width:0; flex:1 1 100px; }
  .pj-directory-tools .pj-refresh { width:44px; flex:none; }
  .pj-refresh > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .pj-directory { display:block; border:0; overflow:visible; background:none; }
  .pj-directory thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .pj-directory tbody { display:block; }
  .pj-directory .pj-project { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:14px; gap:12px 8px; }
  .pj-directory td { display:block; padding:0; border:0; }
  .pj-directory .pj-name-cell { grid-column:1/-1; padding-bottom:4px; }
  .pj-directory .pj-status-cell { grid-column:1; }
  .pj-directory .pj-work-cell { grid-column:2; text-align:right; align-self:center; }
  .pj-directory .pj-updated-cell { grid-column:1/-1; border-top:1px solid var(--line); padding-top:10px; display:flex; align-items:center; gap:8px; }
  .pj-updated-cell::before { content:'Updated'; font-size:12px; color:var(--text-2); }
  .pj-updated-cell > .pj-icon { opacity:1; margin-left:auto; }
  .pj-context { padding:20px; } .pj-next { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { #projectsView *, #projectsView *::before { transition:none; } }