/* Client Portal v2 (js/client-portal.js) — additions on top of the shared
   portal shell (css/portal-shell.css + css/agent-workspace.css). */
.cpv .vp-main{ min-width:0; }
.cpv .own-fade-stage{ opacity:1; }
.cpv-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.cpv-card{ display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid var(--line); background:rgba(255,255,255,.35); min-width:0; }
.cpv-card-top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cpv-card-date{ font:12px var(--sans); color:var(--sage); }
/* the card's identity: Project #, type, room (or name), name, updated */
.cpv-card-head{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cpv-card-code{ margin:0; font:12px var(--sans); letter-spacing:.04em; color:var(--sage); font-variant-numeric:tabular-nums; }
.cpv-card .cpv-card-head .vp-eyebrow{ margin:6px 0 0; }   /* beats html:root .vp-eyebrow (portal-layout-standard.css) */
.cpv-card-name{ margin:0; font:14px/1.4 var(--sans); color:var(--ink); overflow-wrap:anywhere; }
.cpv-card-head .cpv-card-date{ margin:2px 0 0; }
.cpv-card-title{ font:400 22px/1.2 var(--serif); margin:0; overflow-wrap:anywhere; }
.cpv-card-stage{ display:flex; justify-content:space-between; gap:12px; font:13px var(--sans); color:var(--ink); }
.cpv-card-stage b{ font-weight:500; font-variant-numeric:tabular-nums; }
.cpv-card-next{ font:13px/1.5 var(--sans); color:var(--sage); margin:0; flex:1; }
.cpv-card .vp-cat-btn{ align-self:flex-start; }
.cpv-bar{ display:block; height:4px; background:var(--line); border-radius:2px; overflow:hidden; }
.cpv-bar i{ display:block; height:100%; background:var(--ink); }
.cpv .aw-row.cpv-attn{ grid-template-columns:minmax(0,1fr) auto; }
.cpv .aw-row.cpv-act{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; }
.cpv-attn-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cpv-tabs{ overflow-x:auto; max-width:100%; }
.cpv-tab-n{ font:10px var(--mono); color:var(--sage); }
.cpv-tl{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.cpv-tl li{ display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font:14px var(--sans); }
.cpv-tl-dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--sage); }
.cpv-tl li.is-completed .cpv-tl-dot{ background:var(--ink); border-color:var(--ink); }
.cpv-tl li.is-current .cpv-tl-dot{ background:var(--brass, #b08d57); border-color:var(--brass, #b08d57); }
.cpv-tl li.is-current .cpv-tl-name{ font-weight:600; }
.cpv-tl-status{ font:12px var(--sans); color:var(--sage); text-align:right; }
@media (max-width:640px){
  .cpv .aw-row.cpv-act{ grid-template-columns:minmax(0,1fr); }
  .cpv .aw-row.cpv-attn{ grid-template-columns:minmax(0,1fr); }
  .cpv .aw-head{ flex-wrap:wrap; }
}

/* ---- v2 workspace ---- */
.cpv-ws-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.cpv-ws-stage{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); margin:10px 0 0; }
.cpv-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0 40px; align-items:start; }
.cpv-col{ min-width:0; }
.cpv-tab-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:8px 0 4px; }
.cpv-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cpv-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 0 8px; }
.cpv-stats .aw-stat > b{ font-size:22px; }
.cpv .aw-row.cpv-pay, .cpv .aw-row.cpv-doc, .cpv .aw-row.cpv-vendor{ grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) auto; }
.cpv .aw-row.cpv-vendor{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; align-items:center; }
.cpv-ink{ color:var(--ink); }
.cpv-link{ color:var(--ink); }
.cpv-request-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.cpv-request .vp-h2{ margin-top:4px; }
.cpv-concept{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:20px; align-items:start; }
.cpv-concept img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.cpv-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.cpv-thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.cpv-thread{ display:flex; flex-direction:column; gap:12px; margin:8px 0 16px; }
.cpv-msg{ max-width:560px; padding:12px 14px; border:1px solid var(--line); }
.cpv-msg.is-mine{ align-self:flex-end; background:rgba(0,0,0,.03); }
.cpv-msg p{ margin:4px 0 0; font:14px/1.5 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; }
.cpv-msg-meta{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.cpv-compose{ display:grid; gap:10px; }
.cpv-compose textarea{ width:100%; box-sizing:border-box; font:14px/1.5 var(--sans); padding:10px 12px; border:1px solid var(--line); background:transparent; color:var(--ink); }
.cpv-compose .vp-cat-btn{ justify-self:start; }
.cpv-upload{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.cpv-upload label{ cursor:pointer; }
.cpv-upload input:focus-visible + .vp-note, .cpv-upload label:focus-within{ outline:2px solid var(--brass); }
@media (max-width:980px){ .cpv-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  .cpv .aw-row.cpv-pay, .cpv .aw-row.cpv-doc, .cpv .aw-row.cpv-vendor{ grid-template-columns:minmax(0,1fr); }
  .cpv-stats{ grid-template-columns:minmax(0,1fr); }
  .cpv-concept{ grid-template-columns:minmax(0,1fr); }
}

/* ---- Workspace navigation: calmer, more spacious (visual only) ---- */
.cpv-ws-head{ margin-bottom:36px; }
.cpv-ws-head .vp-intro{ margin-top:10px; line-height:1.6; }
.cpv-ws-stage{ margin-top:16px; line-height:1.6; }
.cpv .cpv-tabs{ max-width:none; gap:8px; margin:0 0 44px; padding:0 0 2px; scrollbar-width:thin; }
.cpv .cpv-tabs .vp-tab{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 18px 16px; min-height:44px; line-height:1.3; letter-spacing:.12em; border-bottom-width:2px; }
.cpv .cpv-tabs .vp-tab:first-child{ padding-left:0; }
.cpv .cpv-tabs .vp-tab.is-active{ padding-left:18px; padding-right:18px; background:rgba(0,0,0,.025); }
.cpv .cpv-tabs .vp-tab.is-active:first-child{ padding-left:18px; }
.cpv-tab-n{ display:block; font-size:9px; letter-spacing:.14em; opacity:.8; }
.cpv-tab-head{ margin:0 0 28px; gap:20px; }
.cpv-tab-head .vp-note, #cpv-tab-panel .vp-section > .vp-note{ max-width:62ch; line-height:1.65; margin:6px 0 16px; }
@media (max-width:860px){
  .cpv .cpv-tabs{ gap:4px; margin-bottom:36px; }
  .cpv .cpv-tabs .vp-tab{ padding:12px 14px 14px; }
}
@media (max-width:640px){
  .cpv-ws-head{ margin-bottom:28px; }
  .cpv .cpv-tabs{ margin-bottom:28px; }
  .cpv .cpv-tabs .vp-tab{ padding:12px 14px 14px; gap:6px; }
  .cpv-tab-head{ margin-bottom:22px; }
}

/* ---- Project Overview: one editorial two-column grid (visual only) ----
   Spacing scale: 8 / 16 / 24 / 32 / 48. Both columns open with a heading
   ruled by the same divider, so Timeline and Project Summary share a top
   baseline; every row below uses the same 52px rhythm. */
.cpv-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(40px,5vw,72px); row-gap:0; align-items:start; }
.cpv-grid > .vp-section, .cpv-grid .cpv-col > .vp-section{ margin:0; }
.cpv-col{ display:grid; row-gap:48px; }
.cpv-grid .vp-h2{ margin:0; padding-bottom:16px; border-bottom:1px solid var(--line); line-height:1.2; }
.cpv-grid .aw-facts{ max-width:none; }
.cpv-grid .vp-section .vp-fact{ max-width:none; min-height:52px; box-sizing:border-box; padding:16px 0; align-items:baseline; }
.cpv-grid .vp-section .vp-h2 + div .vp-fact:first-child, .cpv-grid .aw-facts .vp-fact:first-child{ border-top:0; }
.cpv-grid .vp-fact-value{ line-height:1.5; }
.cpv-grid .vp-section > div > .vp-note{ margin:16px 0 0; }
.cpv-grid .vp-section > div > .vp-cat-btn, .cpv-grid .vp-section > div > button.vp-cat-btn{ margin-top:24px; }
/* Timeline block */
#cpv-tl .cpv-card-stage{ margin-top:24px; align-items:baseline; font-size:14px; line-height:1.4; }
#cpv-tl .cpv-card-stage b{ font:400 20px/1 var(--serif); }
#cpv-tl .cpv-bar{ margin-top:16px; }
#cpv-tl .cpv-card-next{ margin-top:16px; line-height:1.6; max-width:52ch; }
#cpv-tl .cpv-tl{ margin-top:32px; }
#cpv-tl .cpv-tl li{ min-height:52px; box-sizing:border-box; padding:14px 0; gap:16px; line-height:1.4; }
#cpv-tl .cpv-tl-status{ white-space:nowrap; }
@media (max-width:980px){
  .cpv-grid{ grid-template-columns:minmax(0,1fr); row-gap:48px; }
}
@media (max-width:640px){
  .cpv-grid, .cpv-col{ row-gap:40px; }
  #cpv-tl .cpv-tl li{ grid-template-columns:14px minmax(0,1fr); }
  #cpv-tl .cpv-tl-status{ grid-column:2; text-align:left; white-space:normal; margin-top:-4px; }
}