/* page-proj.css — Phase 3 mockup pass (scoped to #myProjectsScreen).
   ============================================================
   PROJECTS PAGE → mockup (KPI strip + two-column "at a glance").
   Reuses the design-system .ds-kpi-bar/.ds-kpi primitives via
   JS-injected markup and restyles the existing .nav-* rendered
   classes. Color/border/background/typography/spacing only; the
   .nav-row collapsible list keeps its layout + handlers.
   ============================================================ */

/* widen the body to match the mockup's 1180px editorial column */
body.lh-shell #myProjectsScreen .nav-body{ max-width:1180px; }

/* count pill beside the serif title → flat gold-faint pill (mockup).
   In the live markup #projectsCount is a sibling of .nav-title-block,
   so pull it up to sit inline-end with the title block. */
body.lh-shell #myProjectsScreen .nav-title-row{ align-items:flex-end; margin-bottom:0; }
body.lh-shell #myProjectsScreen .nav-title-block{ display:flex; flex-direction:column; }
body.lh-shell #myProjectsScreen .nav-title-count{
  align-self:flex-end; margin:0 0 4px 14px;
  color:var(--gold-dark); background:var(--gold-faint);
  border:1px solid var(--gold-pill-border); border-radius:999px;
  padding:4px 11px; font-size:11px; font-weight:600; letter-spacing:.04em;
}
body.lh-shell #myProjectsScreen .nav-title-count:empty{ display:none; }

/* KPI strip (injected #projectsKpiBar uses .ds-kpi-bar/.ds-kpi primitives;
   nothing extra needed except the top margin to sit under the header) */
body.lh-shell #myProjectsScreen #projectsKpiBar{ margin-top:30px; }
body.lh-shell #myProjectsScreen #projectsKpiBar:empty{ display:none; }

/* tabs → editorial underline row sitting under the KPI strip */
body.lh-shell #myProjectsScreen .nav-tabs{
  display:flex; gap:28px; border-bottom:1px solid var(--rule-strong);
  margin:28px 0 0; padding:0;
}
body.lh-shell #myProjectsScreen .nav-tab{
  background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; padding:10px 0; font-size:13px; font-weight:600;
  letter-spacing:.02em; color:var(--text-muted); cursor:pointer;
}
body.lh-shell #myProjectsScreen .nav-tab:hover{ color:var(--gold-dark); }
body.lh-shell #myProjectsScreen .nav-tab.active{
  color:var(--gold-dark); border-bottom-color:var(--gold);
}

/* toolbar → search pill + sort select, no top/bottom hairlines (the tabs
   row already provides the divider above; the grid provides structure) */
body.lh-shell #myProjectsScreen .nav-toolbar{
  border-top:none; border-bottom:none; padding:0; margin-top:18px; gap:12px;
}
body.lh-shell #myProjectsScreen .nav-search{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--hairline); border-radius:9px;
  padding:0 14px; background:var(--surface-2); transition:border-color .14s;
}
body.lh-shell #myProjectsScreen .nav-search:focus-within{ border-color:var(--gold); }
body.lh-shell #myProjectsScreen .nav-search svg.icon{
  position:static; transform:none; color:var(--text-faint);
  width:15px; height:15px;
}
body.lh-shell #myProjectsScreen .nav-search input{
  border:none; outline:none; background:transparent; padding:10px 0;
  font-size:13px; color:var(--text-strong);
}
body.lh-shell #myProjectsScreen .nav-search input:focus{ outline:none; }
body.lh-shell #myProjectsScreen .nav-select{
  border:1px solid var(--border-btn); border-radius:9px;
  background-color:transparent; color:var(--text-head);
  font-size:12px; font-weight:500; padding:0 30px 0 16px; height:40px;
}
body.lh-shell #myProjectsScreen .nav-select:hover{ border-color:var(--gold); color:var(--gold-dark); }

/* TWO-COLUMN GRID — list (left) + at-a-glance rail (right).
   The grid wrapper #projectsGrid is injected; #projectsList is moved
   into its left cell, #projectsGlance into its right cell. */
body.lh-shell #myProjectsScreen #projectsGrid{
  display:grid; grid-template-columns:1.55fr 1fr; gap:36px;
  margin-top:22px; align-items:start;
}
body.lh-shell #myProjectsScreen #projectsGrid > *{ min-width:0; }

/* LEFT list — flatten the collapsible rows into the editorial row look */
body.lh-shell #myProjectsScreen .nav-list{ border-bottom:1px solid var(--rule); }
body.lh-shell #myProjectsScreen .nav-row{
  border-bottom:none; border-top:1px solid var(--rule); background:transparent;
}
body.lh-shell #myProjectsScreen .nav-row-header{
  gap:14px; padding:14px 12px; border-left:2px solid transparent;
  transition:background .14s, border-color .14s, padding-left .14s;
}
body.lh-shell #myProjectsScreen .nav-row-header:hover{
  background:var(--hover); border-left-color:var(--gold); padding-left:14px;
}
body.lh-shell #myProjectsScreen .nav-row-icon{ width:auto; height:auto; color:var(--text-faint); }
body.lh-shell #myProjectsScreen .nav-row-icon svg{ width:17px; height:17px; }
body.lh-shell #myProjectsScreen .nav-row-title{
  font-size:14px; font-weight:600; color:var(--text-strong); margin:0;
}
body.lh-shell #myProjectsScreen .nav-row-meta{ font-size:12px; color:var(--text-muted); margin-top:3px; }
/* trailing level tag pill (injected per row as .nav-row-tag) */
body.lh-shell #myProjectsScreen .nav-row-tag{
  flex-shrink:0; font-size:8.5px; font-weight:700; letter-spacing:.05em;
  color:var(--text-faint); border:1px solid var(--hairline);
  border-radius:999px; padding:2px 7px; text-transform:uppercase;
}
body.lh-shell #myProjectsScreen .nav-row-chevron{ color:var(--text-faint); }
/* expanded drafts body keeps its inset look, on token surface */
body.lh-shell #myProjectsScreen .nav-row-body{
  background:var(--surface-2); border-top:1px solid var(--rule);
}
/* list footer "Showing N of M" (injected #projectsListFoot) */
body.lh-shell #myProjectsScreen #projectsListFoot{
  padding:14px 12px; font-size:12px; color:var(--text-faint);
}
body.lh-shell #myProjectsScreen #projectsListFoot:empty{ display:none; }

/* RIGHT rail "at a glance" (injected #projectsGlance) */
body.lh-shell #myProjectsScreen #projectsGlance{
  display:flex; flex-direction:column; gap:30px;
}
body.lh-shell #myProjectsScreen #projectsGlance:empty{ display:none; }
body.lh-shell #myProjectsScreen .glance-eyebrow{
  font-size:11px; letter-spacing:.16em; color:var(--text-faint); font-weight:600;
}
body.lh-shell #myProjectsScreen .glance-bars{
  display:flex; flex-direction:column; gap:11px; margin-top:15px;
}
body.lh-shell #myProjectsScreen .glance-bar{ display:flex; align-items:center; gap:12px; }
body.lh-shell #myProjectsScreen .glance-bar-label{
  width:88px; flex-shrink:0; font-size:11.5px; color:var(--text-muted);
}
body.lh-shell #myProjectsScreen .glance-bar-track{
  flex:1; height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden;
}
body.lh-shell #myProjectsScreen .glance-bar-fill{ height:100%; border-radius:4px; }
body.lh-shell #myProjectsScreen .glance-bar-n{
  width:24px; text-align:right; flex-shrink:0; font-size:12px;
  font-weight:600; color:var(--text-strong);
}
body.lh-shell #myProjectsScreen .glance-contrib{ margin-top:10px; }
body.lh-shell #myProjectsScreen .glance-contrib-head{
  border-top:1px solid var(--rule); padding-top:24px;
}
body.lh-shell #myProjectsScreen .glance-contrib-row{
  display:flex; align-items:center; gap:11px; padding:9px 0;
  border-top:1px solid var(--rule);
}
body.lh-shell #myProjectsScreen .glance-avatar{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:var(--text-muted);
}
body.lh-shell #myProjectsScreen .glance-contrib-name{
  flex:1; min-width:0; font-size:13px; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.lh-shell #myProjectsScreen .glance-contrib-n{
  flex-shrink:0; font-size:12px; font-weight:600; color:var(--text-muted);
}

/* ============================================================
   EXPANDED PROJECT DETAIL (click a project → drafts / sites / files)
   The list/rail were done in the Phase-3 pass; this brings the
   click-into detail onto the editorial system (flat hairline rows,
   eyebrow section titles, token pills + buttons). Dark-aware.
   ============================================================ */
body.lh-shell #myProjectsScreen .nav-row-body{ padding:6px 14px 16px 28px; }
body.lh-shell #myProjectsScreen .nav-row-body .project-section{ margin:0; padding:14px 0 4px; border:none; background:transparent; }
body.lh-shell #myProjectsScreen .nav-row-body .project-section + .project-section{ border-top:1px solid var(--rule); }
body.lh-shell #myProjectsScreen .nav-row-body .project-section-title{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600; margin:0 0 4px; padding:0;
}
body.lh-shell #myProjectsScreen .nav-row-body .project-empty{
  font-size:12.5px; color:var(--text-faint); padding:8px 0; background:transparent; border:none;
}

/* flat rows: drafts / sites / files */
body.lh-shell #myProjectsScreen .nav-row-body .project-draft-row,
body.lh-shell #myProjectsScreen .nav-row-body .project-site-row,
body.lh-shell #myProjectsScreen .nav-row-body .project-file-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 8px; margin:0; background:transparent;
  border:none; border-top:1px solid var(--rule); border-radius:0;
  transition:background .14s;
}
body.lh-shell #myProjectsScreen .nav-row-body .project-draft-row:hover,
body.lh-shell #myProjectsScreen .nav-row-body .project-file-item:hover{ background:var(--hover); }
body.lh-shell #myProjectsScreen .nav-row-body .draft-info{ flex:1; min-width:0; }
body.lh-shell #myProjectsScreen .nav-row-body .draft-name,
body.lh-shell #myProjectsScreen .nav-row-body .project-site-name{
  font-size:13px; font-weight:600; color:var(--text-strong);
}
body.lh-shell #myProjectsScreen .nav-row-body .draft-meta{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* status pills (drafts + sites) → editorial badges */
body.lh-shell #myProjectsScreen .nav-row-body .draft-status-badge,
body.lh-shell #myProjectsScreen .nav-row-body .site-status-badge{
  display:inline-flex; align-items:center; font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  white-space:nowrap; flex-shrink:0; border:1px solid transparent;
}
body.lh-shell #myProjectsScreen .nav-row-body .draft-status-badge.status-final,
body.lh-shell #myProjectsScreen .nav-row-body .site-status-badge.site-approved,
body.lh-shell #myProjectsScreen .nav-row-body .site-status-badge.site-final{
  background:var(--green-bg); color:var(--green);
}
body.lh-shell #myProjectsScreen .nav-row-body .draft-status-badge.status-draft,
body.lh-shell #myProjectsScreen .nav-row-body .site-status-badge.site-pending{
  background:var(--gold-faint); color:var(--gold-dark); border-color:var(--gold-pill-border);
}
body.lh-shell #myProjectsScreen .nav-row-body .site-status-badge.site-denied,
body.lh-shell #myProjectsScreen .nav-row-body .site-status-badge.site-changes{
  background:var(--red-bg); color:var(--red);
}

/* action buttons → token ghost / gold / red */
body.lh-shell #myProjectsScreen .nav-row-body .draft-actions{ display:flex; gap:8px; flex-shrink:0; }
body.lh-shell #myProjectsScreen .nav-row-body .draft-action-btn{
  background:var(--surface); border:1px solid var(--border-btn); color:var(--text-head);
  border-radius:7px; padding:6px 12px; font-size:11.5px; font-weight:600; cursor:pointer;
  transition:border-color .14s, color .14s, background .14s;
}
body.lh-shell #myProjectsScreen .nav-row-body .draft-action-btn:hover{ border-color:var(--gold); color:var(--gold-dark); }
body.lh-shell #myProjectsScreen .nav-row-body .draft-action-btn.btn-final{
  background:var(--gold); border-color:var(--gold); color:#1f2533;
}
body.lh-shell #myProjectsScreen .nav-row-body .draft-action-btn.btn-final:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:#1f2533; }
body.lh-shell #myProjectsScreen .nav-row-body .draft-action-btn.btn-delete:hover{ border-color:var(--red); color:var(--red); }

/* file rows + add-file form */
body.lh-shell #myProjectsScreen .nav-row-body .project-file-link{ font-size:13px; color:var(--gold-dark); text-decoration:none; flex:1; min-width:0; }
body.lh-shell #myProjectsScreen .nav-row-body .project-file-link:hover{ text-decoration:underline; }
body.lh-shell #myProjectsScreen .nav-row-body .project-file-category-label{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin-top:8px;
}
body.lh-shell #myProjectsScreen .nav-row-body .add-file-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
body.lh-shell #myProjectsScreen .nav-row-body .add-file-input,
body.lh-shell #myProjectsScreen .nav-row-body .add-file-select{
  background:var(--surface); border:1px solid var(--border-btn); color:var(--text-strong);
  border-radius:7px; padding:8px 10px; font-size:12.5px;
}
body.lh-shell #myProjectsScreen .nav-row-body .add-file-input{ flex:1; min-width:120px; }
body.lh-shell #myProjectsScreen .nav-row-body .add-file-input:focus,
body.lh-shell #myProjectsScreen .nav-row-body .add-file-select:focus{ outline:none; border-color:var(--gold); }

/* install badge → pill */
body.lh-shell #myProjectsScreen .nav-row-body .project-install-row{ padding:10px 8px 2px; }
body.lh-shell #myProjectsScreen .nav-row-body .install-badge{
  display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--hairline); color:var(--text-body);
}

/* ============================================================
   MASTER-DETAIL PANE — clicking a project opens its overview here
   (right column), replacing the at-a-glance rail. Mirrors Prospect
   Review. The project-page renderer fills #projectsDetailPaneBody.
   ============================================================ */
/* [hidden] must beat #projectsGlance{display:flex} → id+attr specificity */
body.lh-shell #myProjectsScreen #projectsGlance[hidden],
body.lh-shell #myProjectsScreen #projectsDetailPane[hidden]{ display:none; }
body.lh-shell #myProjectsScreen #projectsDetailPane{ min-width:0; }
body.lh-shell #myProjectsScreen .nav-row.selected > .nav-row-header{
  background:var(--gold-faint); border-left-color:var(--gold);
}
body.lh-shell #myProjectsScreen .pp-pane-back{
  display:inline-flex; align-items:center; gap:5px; margin:0 0 14px;
  background:transparent; border:none; padding:0; cursor:pointer;
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--gold-dark);
}
body.lh-shell #myProjectsScreen .pp-pane-back:hover{ opacity:.7; }
/* the project-page cards already use tokens (surface/hairline) — tighten spacing
   for the narrower pane */
body.lh-shell #myProjectsScreen #projectsDetailPane .appr-card{ padding:16px 18px !important; margin-bottom:14px !important; }
body.lh-shell #myProjectsScreen #projectsDetailPane h1{ font-size:24px !important; }

/* responsive: collapse to one column below the editor breakpoint */
@media (max-width:900px){
  body.lh-shell #myProjectsScreen #projectsGrid{ grid-template-columns:1fr; gap:24px; }
  body.lh-shell #myProjectsScreen #projectsGlance{ order:2; }
}