/* =========================================================
   Internal Portal Layout & Spacing Standard
   (INTERNAL_PORTAL_LAYOUT_STANDARD.md) — loaded last by the Client
   (/network/client/), Agent (/network/agent/) and Vendor
   (/network/vendor/) Portals. The Owner Portal is not included.
   Selectors start with html:root so they carry the same weight as
   the approved prototype.
   ========================================================= */
html:root{
  --lps-col: 1120px;
  --lps-pad-x: clamp(24px, 4vw, 64px);
  --lps-section: 64px;
  --lps-header: 48px;
  --lps-gap: 32px;
  --lps-measure: 65ch;
}
@media (max-width:1199px){ html:root{ --lps-section:48px; --lps-header:40px; --lps-gap:24px; } }
@media (max-width:767px){ html:root{ --lps-section:40px; --lps-header:32px; --lps-pad-x:16px; } }

/* ---- 1. Page frame: one column, one left and one right edge ---- */
/* The Vendor Portal's Profile Setup (.ps-shell) and Account (.vp-shell)
   pages keep their own wrappers but sit in the same frame as .vp-view. */
html:root .vp-main > .vp-view,
html:root .vp-main > .ps-shell,
html:root .vp-main > .vp-shell{ max-width:var(--lps-col); margin:0; padding:56px var(--lps-pad-x) 96px; }
@media (max-width:1199px){ html:root .vp-main > .vp-view, html:root .vp-main > .ps-shell, html:root .vp-main > .vp-shell{ padding-top:40px; padding-bottom:72px; } }
@media (max-width:767px){ html:root .vp-main > .vp-view, html:root .vp-main > .ps-shell, html:root .vp-main > .vp-shell{ padding-top:32px; padding-bottom:64px; } }
html:root .vp-view > *{ min-width:0; }
/* Containers span the column; only prose is capped. */
html:root .vp-view .vp-fact,
html:root .vp-view .aw-facts,
html:root .vp-view .vp-partner,
html:root .vp-view .aw-banner,
html:root .vp-view .vp-tabs{ max-width:none; }
html:root .vp-view .vp-intro,
html:root .vp-view .vp-note,
html:root .vp-view .cpv-card-next{ max-width:var(--lps-measure); }

/* ---- 3. Vertical rhythm ---- */
html:root .vp-eyebrow{ margin-bottom:12px; }
html:root .vp-title{ margin:0 0 16px; text-wrap:balance; }
html:root .vp-view .vp-intro{ margin:0; line-height:1.7; }
html:root .aw .vp-view > *{ margin-bottom:0; }
html:root .vp-view > * + *{ margin-top:var(--lps-section); }
html:root .vp-view > .vp-eyebrow + .vp-title,
html:root .vp-view > .vp-title + .vp-intro{ margin-top:0; }
/* Back link sits close to the header it belongs to; tabs sit close to their panel. */
html:root .vp-view > .vp-back + *{ margin-top:24px; }
html:root .vp-view > .aw-tabs + *,
html:root .vp-view > .vp-tabs + *{ margin-top:32px; }
html:root .vp-view > .aw-head + *,
html:root .vp-view > .vp-intro + *{ margin-top:var(--lps-header); }
html:root .vp-section{ margin-bottom:0; }
html:root .vp-view .vp-section + .vp-section{ margin-top:var(--lps-section); }
html:root .vp-view .vp-h2{ margin:0 0 24px; text-wrap:balance; }
html:root .vp-view .vp-h2 + .vp-note{ margin:-12px 0 24px; }

/* ---- 4. Header + action group ---- */
html:root .aw-head{ display:grid; grid-template-columns:minmax(36ch,1fr) auto; gap:24px 48px; align-items:end; }
html:root .aw-head .vp-title{ margin-bottom:16px; }
html:root .aw-head .vp-intro{ margin:0; }
html:root .aw-actions{ gap:12px; justify-content:flex-end; }
html:root .vp-cat-btn{ min-height:44px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; }
@media (max-width:1023px){
  html:root .aw-head{ grid-template-columns:minmax(0,1fr); }
  html:root .aw-actions{ justify-content:flex-start; }
}

/* ---- 5. Lists: roomier rows, actions never collide ---- */
html:root .aw-list{ border-top:1px solid var(--line); }
html:root .aw-row{ min-height:64px; box-sizing:border-box; padding:20px 0; gap:8px 32px; align-items:center; }
html:root .aw-row-title{ line-height:1.35; }
html:root .aw-row-sub{ margin-top:4px; max-width:var(--lps-measure); }
html:root .aw-row-end{ gap:12px; }
@media (max-width:767px){
  html:root .aw-row{ gap:12px; }
  html:root .aw-row-end{ justify-content:flex-start; }
  html:root .aw-row-end .vp-cat-btn{ flex:1 1 auto; }
}

/* ---- Stats: breathing room inside the tiles ---- */
html:root .aw-stats{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
html:root .aw-stat{ padding:24px; gap:8px; min-height:112px; align-content:space-between; }
@media (max-width:767px){ html:root .aw-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } html:root .aw-stat{ padding:20px; min-height:96px; } }

/* ---- Cards (Client project cards): 24px rhythm, no orphan stretch ---- */
html:root .cpv-cards{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:24px; }
html:root .cpv-card{ padding:24px; gap:12px; }
html:root .cpv-card .vp-cat-btn{ margin-top:12px; }
@media (max-width:767px){ html:root .cpv-card{ padding:20px; } html:root .cpv-card .vp-cat-btn{ align-self:stretch; } }

/* ---- Client Home rows ---- */
html:root .cpv .aw-row.cpv-attn{ grid-template-columns:minmax(0,1fr) auto; }
html:root .cpv .aw-row.cpv-act{ grid-template-columns:minmax(0,1fr) minmax(120px,auto) 120px; }
html:root .cpv .aw-row.cpv-act .aw-row-meta:last-child{ text-align:right; }
html:root .cpv-actions{ gap:12px; }
@media (max-width:767px){
  html:root .cpv .aw-row.cpv-act, html:root .cpv .aw-row.cpv-attn{ grid-template-columns:minmax(0,1fr); }
  html:root .cpv .aw-row.cpv-act .aw-row-meta:last-child{ text-align:left; }
}

/* ---- Vendor Trade & Partnership: one card level, full column ---- */
html:root .vp-chips{ gap:12px; }
html:root .vp-view > .vp-note.vp-tp-pending{ margin-top:16px; }
html:root .vp-partner{ padding:24px 28px; margin:0 0 24px; gap:0; }
html:root .vp-partner:last-of-type{ margin-bottom:0; }
html:root .vp-partner-head{ padding-bottom:20px; gap:8px 24px; }
html:root .vp-tp-block{ padding:20px 0; gap:16px; }
html:root .vp-tp-block:last-child{ padding-bottom:0; }
html:root .vp-partner-row{ grid-template-columns:minmax(12ch,180px) minmax(0,1fr); gap:8px 24px; }
html:root .vp-tp-card .vp-cov{ gap:16px; }
html:root .vp-tp-card .vp-cov-view{ margin-top:8px; gap:12px; }
html:root .vp-secondary{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--lps-gap); }
html:root .vp-secondary > .vp-section{ margin:0; }
@media (max-width:767px){
  html:root .vp-partner{ padding:20px; }
  html:root .vp-partner-row{ grid-template-columns:minmax(0,1fr); gap:4px; }
  html:root .vp-secondary{ grid-template-columns:minmax(0,1fr); gap:var(--lps-section); }
}

/* ---- 8. Overflow guard ---- */
html:root .vp-view{ overflow-wrap:anywhere; }

/* ---- Client Account (older own-* markup): same header rhythm + form rules ---- */
html:root .vp-view.own-frame > * + *{ margin-top:16px; }
html:root .vp-view.own-frame > .own-overview-eyebrow + .own-overview-title{ margin-top:0; }
html:root .vp-view.own-frame > .own-overview-eyebrow{ display:block; font:500 10px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--brass); margin:0 0 12px; }
html:root .vp-view.own-frame > .own-overview-title{ margin:0; line-height:1.05; }
html:root .vp-view.own-frame > .own-hint{ margin:16px 0 0; }
html:root .vp-view.own-frame > form,
html:root .vp-view.own-frame > #cpv-security{ margin-top:var(--lps-header); }
html:root .cp-field-grid{ max-width:720px; }
html:root .cp-field-grid .own-form-section-title,
html:root .vp-view.own-frame > .own-form-section-title{ display:block; margin:48px 0 16px !important; }
html:root .cp-field-grid > .own-form-section-title:first-child{ margin-top:0 !important; }
html:root .cp-field-grid .cp-field{ margin-bottom:24px; }
html:root .cp-form-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---- Client project tabs: stat tiles → content spacing ---- */
html:root #cpv-tab-panel > .cpv-stats + *,
html:root #cpv-tab-panel > .cpv-tab-head + *{ margin-top:var(--lps-header); }
@media (max-width:767px){
  html:root .cpv-stats{ grid-template-columns:minmax(0,1fr); }
  html:root .cpv-stats .aw-stat{ min-height:0; }
}