/* ============================================================================
   Spacing system — the parent / child / sibling rule
   ----------------------------------------------------------------------------
   One scale, four levels. Proximity tells the eye what belongs together, so:

     gap between things INSIDE a box  <  the box's own padding  <=  gap between sibling boxes  <  gap between sections

     L0 page      hero -> content 32   ·  page bottom 64          (--sp-6 / --sp-8)
     L1 section   card padding 24      ·  card -> card 24         (--sp-5)
     L2 group     heading -> body 16   ·  field -> field 16       (--sp-4)
     L3 item      label -> input 6     ·  chips / buttons 8       (--sp-1.5 / --sp-2)

   Loaded last (after every feature stylesheet) so the shared shells agree.
   Feature files may still tighten NESTED children (e.g. .cx-row .cx-field) —
   that is the rule working, not an exception to it.
   ========================================================================== */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  --sp-label:6px;
  --page-w:90%;--page-max:1400px;
}

/* ---- L0 · page shells: one width, one rhythm ---------------------------------- */
.cx-hero-wrap{margin:18px auto 0}
.cx-wizard,.cx-builder,.cx-ats,.cx-chat,.cx-company,.cx-plans-page,.cx-account,.cx-notif-prefs{
  width:var(--page-w);max-width:var(--page-max);margin:var(--sp-6) auto var(--sp-8);padding:0;box-sizing:border-box}
.cx-hero-wrap + .cx-wizard,.cx-hero-wrap + link + .cx-wizard,.cx-hero-wrap + link + link + .cx-wizard,
.cx-hero-wrap + .cx-ats,.cx-hero-wrap + link + .cx-ats,.cx-hero-wrap + link + link + .cx-ats,
.cx-hero-wrap + .cx-chat,.cx-hero-wrap + link + link + .cx-chat,
.cx-hero-wrap + .cx-builder,.cx-hero-wrap + link + link + .cx-builder,
.cx-hero-wrap + .cx-plans-page,.cx-hero-wrap + link + .cx-notif-prefs{margin-top:var(--sp-6)}
.cx-wizard.cx-take-intro,.cx-wizard[style*="max-width"]{margin-left:auto;margin-right:auto}
.cx-chat{grid-template-columns:340px minmax(0,1fr);gap:var(--sp-5)}

/* ---- L1 · sibling cards / sections ---------------------------------------------- */
.cx-card{padding:var(--sp-5);margin:0 0 var(--sp-5);border-radius:14px}
.cx-card:last-child{margin-bottom:0}
.cx-card + .cx-card{margin-top:0}
.cx-dash-grid,.cx-grid-cards,.cx-account-stats{gap:var(--sp-5)}
.cx-builder-panes{gap:var(--sp-5);margin-top:var(--sp-5)}
.cx-section-card{margin-bottom:var(--sp-4)}
.cx-account-stats{margin-top:var(--sp-5)}
.cx-account h3.cx-account-h,.cx-account-section h3{margin:var(--sp-7) 0 var(--sp-4)}
.cx-account-stats + h3.cx-account-h{margin-top:var(--sp-7)}

/* page-level toolbars (title row / actions) sit between the hero and the first card */
.cx-builder-top,.cx-row.cx-head,.cx-chat-list-head{margin:0 0 var(--sp-5);gap:var(--sp-3) var(--sp-4);align-items:center}
.cx-builder-top:empty,.cx-builder-top > div:empty:only-child{display:none}
.cx-builder-top > div:first-child:empty{display:none}
.cx-builder-top p,.cx-row.cx-head p{margin:0}
.cx-builder-actions,.cx-ats-actions,.cx-actions-left{gap:var(--sp-2)}
.cx-wizard > p.cx-muted:first-child,.cx-wizard > p:first-child{margin:0 0 var(--sp-4)}
.cx-tabs,.cx-status-tabs{margin:0 0 var(--sp-5);gap:var(--sp-1)}
.cx-steps{margin:0 0 var(--sp-5);gap:var(--sp-2)}
.cx-progress{margin:0 0 var(--sp-4)}
.cx-wizard > h4,.cx-tracker > h4{margin:var(--sp-6) 0 var(--sp-3);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cx-muted,#6b7280)}
.cx-wizard > h4:first-of-type{margin-top:0}
.cx-pagination{margin-top:var(--sp-5)}
.cx-banner{margin:0 0 var(--sp-5)}
.cx-plans__note{margin-top:var(--sp-5)}

/* ---- L2 · groups inside a card ------------------------------------------------- */
.cx-card h3,.cx-card > h4:first-child{margin:0 0 var(--sp-4)}
.cx-card > h4{margin:var(--sp-5) 0 var(--sp-3)}
.cx-card > p{margin:0 0 var(--sp-3)}
.cx-card > p:last-child,.cx-card > ul:last-child,.cx-card > form:last-child{margin-bottom:0}
.cx-card > .cx-list li:first-child{padding-top:0}
.cx-card > .cx-list li:last-child{border-bottom:0;padding-bottom:0}
.cx-field{margin:0 0 var(--sp-4)}
.cx-grid,.cx-grid-2{gap:0 var(--sp-4)}
.cx-row{padding:var(--sp-4);margin:0 0 var(--sp-3)}
.cx-row .cx-field{margin-bottom:var(--sp-3)}
.cx-row-head{margin:0 0 var(--sp-3)}
.cx-list li{gap:var(--sp-3);padding:var(--sp-3) 0}
.cx-actions{padding:var(--sp-4) 0 0;margin-top:var(--sp-5);gap:var(--sp-3)}
.cx-template-picker{gap:var(--sp-3)}
.cx-section-head{padding:0;gap:var(--sp-3)}
.cx-section-body{padding-top:var(--sp-4)}
.cx-sub-facts{gap:var(--sp-4)}

/* ---- L3 · items --------------------------------------------------------------- */
.cx-field label{margin-bottom:var(--sp-label)}
.cx-field ul li{margin:0 var(--sp-4) var(--sp-2) 0}
.cx-chip,.cx-badge{margin:0 var(--sp-1) var(--sp-1) 0}
.cx-card-skills .cx-chip{margin:0 var(--sp-1) var(--sp-1) 0}
.cx-rec-actions,.cx-reasons{gap:var(--sp-2)}
.cx-reasons{margin:var(--sp-2) 0 0}

/* ---- mobile: one step tighter at every level, edges still aligned -------------- */
@media(max-width:767px){
  :root{--sp-5:20px;--sp-6:24px;--sp-7:36px;--sp-8:48px}
  .cx-wizard,.cx-builder,.cx-ats,.cx-chat,.cx-company,.cx-plans-page,.cx-account,.cx-notif-prefs{width:calc(100% - 32px)}
  .cx-card{padding:var(--sp-4);border-radius:12px}
  .cx-chat{grid-template-columns:1fr}
}

/* narrow reading / form pages: same top edge and rhythm, capped width, centred like the Contact form */
.cx-wizard--narrow,.cx-wizard[style*="max-width"]{max-width:960px}