/* CPOOL VISUAL COHERENCE V40
 * Final layer built from the V30 baseline.
 * No cloned parent pages. One page width, one axis, one top rhythm.
 */

:root {
  --cpool-v40-width: 960px;
  --cpool-v40-side: 32px;
  --cpool-v40-top: 28px;
  --cpool-v40-bottom: 48px;
  --cpool-v40-header-gap: 24px;
  --cpool-v40-title: 30px;
  --cpool-v40-copy: 15px;
}

/* The layout itself owns the canonical width. Child pages no longer create
   a second independent axis. */
#cpool-main-yield {
  box-sizing: border-box !important;
  width: min(var(--cpool-v40-width), calc(100% - var(--cpool-v40-side))) !important;
  max-width: var(--cpool-v40-width) !important;
  min-width: 0 !important;
  margin: 0 auto var(--cpool-v40-bottom) !important;
  padding: 0 !important;
}

#cpool-main-yield > :is(
  .cpool-v2-page,
  .cpool-page,
  .cpool-support-page,
  .cpool-profile-page,
  .cpool-client-form-uniform,
  .cpool-dashboard,
  .cpool-paperless-page,
  .cpool-models-page,
  .cpool-comms-shell,
  .cpool-collections-page,
  .cpool-v25-standalone-page,
  .cpool-v2-page-narrow
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: var(--cpool-v40-top) !important;
  padding-right: 0 !important;
  padding-bottom: var(--cpool-v40-bottom) !important;
  padding-left: 0 !important;
}

/* Nested operation pages have already received their section context above. */
body:has(.cpool-parent-context-slot[data-cpool-parent-section])
  #cpool-main-yield > :is(
    .cpool-v2-page,
    .cpool-page,
    .cpool-support-page,
    .cpool-client-form-uniform,
    .cpool-v25-standalone-page,
    .cpool-v2-page-narrow
  ) {
  padding-top: 0 !important;
}

/* Client detail must never introduce another 960px wrapper inside the first. */
#cpool-main-yield
  > .cpool-client-detail-page-shell-v8
  > .cpool-v2-page {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* One geometry for every page heading. */
#cpool-main-yield > :is(.cpool-v2-page, .cpool-page, .cpool-support-page)
  > :is(.cpool-v2-hero, .cpool-page-header, .cpool-support-hero, .cpool-v25-section-head),
#cpool-main-yield > .cpool-v2-page > .cpool-v25-section-head,
#cpool-main-yield > .cpool-v25-standalone-page > .cpool-v25-section-head,
#cpool-main-yield > .cpool-models-page > .cpool-v25-section-head,
#cpool-main-yield > .cpool-comms-shell > .cpool-comms-hero {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: var(--cpool-v40-header-gap) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#cpool-main-yield :is(
  .cpool-v2-hero,
  .cpool-page-header,
  .cpool-support-hero,
  .cpool-comms-hero,
  .cpool-v25-section-head
) h1 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  color: #0b1220 !important;
  font-size: var(--cpool-v40-title) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.035em !important;
}

#cpool-main-yield :is(
  .cpool-v2-hero,
  .cpool-page-header,
  .cpool-support-hero,
  .cpool-comms-hero,
  .cpool-v25-section-head
) p {
  max-width: 650px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #667085 !important;
  font-size: var(--cpool-v40-copy) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

/* Parent context returns to the V30 semantic structure. It is compact and
   content-driven: no cloned full pages and no artificial minimum height. */
.cpool-parent-context-slot {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cpool-parent-section-shell {
  box-sizing: border-box !important;
  width: min(var(--cpool-v40-width), calc(100% - var(--cpool-v40-side))) !important;
  max-width: var(--cpool-v40-width) !important;
  min-width: 0 !important;
  margin: var(--cpool-v40-top) auto 0 !important;
  padding: 0 !important;
}

.cpool-parent-section-shell > .cpool-v2-hero,
.cpool-parent-section-shell .cpool-v2-hero {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.cpool-parent-section-shell .cpool-v2-hero h1 {
  margin: 0 0 8px !important;
  font-size: var(--cpool-v40-title) !important;
  line-height: 1.14 !important;
}

.cpool-parent-section-shell .cpool-v2-hero p {
  margin: 0 !important;
  font-size: var(--cpool-v40-copy) !important;
  line-height: 1.55 !important;
}

/* Support used its own 1240/900px viewport system and very large bottom gaps.
   Keep the chat behaviour, but align the visible page with every other section. */
body.cpool-support-viewport-page #cpool-main-yield > .cpool-support-page,
body.cpool-support-new-viewport-page #cpool-main-yield > .cpool-support-page {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cpool-support-page {
  padding-bottom: var(--cpool-v40-bottom) !important;
}

.cpool-support-layout {
  margin-bottom: 0 !important;
}

.cpool-support-form-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* Archive, models, communications and settings should use the same page axis. */
#cpool-main-yield :is(
  .cpool-paperless-page,
  .cpool-models-page,
  .cpool-comms-shell,
  .cpool-collections-page,
  .cpool-client-import-page,
  .cpool-ai-settings-page
) {
  max-width: none !important;
}

/* Avoid legacy page shells creating empty vertical blocks. */
#cpool-main-yield > :is(
  .cpool-v2-page,
  .cpool-page,
  .cpool-support-page
) > :is(
  .cpool-v2-hero,
  .cpool-page-header,
  .cpool-support-hero,
  .cpool-v25-section-head
) + * {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  :root {
    --cpool-v40-side: 28px;
    --cpool-v40-top: 22px;
    --cpool-v40-bottom: 36px;
    --cpool-v40-header-gap: 18px;
    --cpool-v40-title: 27px;
    --cpool-v40-copy: 14px;
  }

  #cpool-main-yield > :is(
    .cpool-v2-page,
    .cpool-page,
    .cpool-support-page,
    .cpool-client-form-uniform,
    .cpool-v25-standalone-page,
    .cpool-v2-page-narrow
  ) {
    width: 100% !important;
  }

  #cpool-main-yield :is(
    .cpool-v2-hero,
    .cpool-page-header,
    .cpool-support-hero,
    .cpool-comms-hero,
    .cpool-v25-section-head
  ) {
    min-height: 0 !important;
  }

  .cpool-parent-section-shell .cpool-v2-actions,
  #cpool-main-yield .cpool-v2-actions,
  #cpool-main-yield .cpool-page-actions {
    margin-top: 14px !important;
  }
}

/* Preserve the support chat viewport mechanics while keeping the same 960px axis. */
@media (min-width: 901px) {
  body.cpool-support-viewport-page #cpool-main-yield > .cpool-support-page {
    height: var(--cpool-support-available-height, auto) !important;
    overflow: hidden !important;
    padding-top: var(--cpool-v40-top) !important;
    padding-bottom: 16px !important;
  }
}

/* Demo launch: polished, centered and deterministic. The status text exists in
   the DOM for accessibility but is forcibly hidden until the click handler
   removes the hidden attribute. */
.cpool-demo-launch-v40 {
  box-sizing: border-box !important;
  min-height: calc(100dvh - 150px) !important;
  width: 100% !important;
  padding: 44px 16px 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cpool-demo-launch-card-v40 {
  box-sizing: border-box !important;
  width: min(620px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.cpool-demo-launch-logo-v40 {
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 24px !important;
}

.cpool-demo-launch-card-v40 h1 {
  margin: 0 !important;
  color: #0b1220 !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.cpool-demo-launch-card-v40 > p:not(.cpool-demo-footnote-v40) {
  margin: 16px 0 0 !important;
  color: #667085 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.cpool-demo-launch-card-v40 form {
  margin: 28px 0 0 !important;
}

.cpool-demo-loading-v40 {
  margin: 28px 0 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 14px !important;
}

.cpool-demo-loading-v40[hidden] {
  display: none !important;
}

.cpool-demo-countdown-v40 {
  color: #2f6bff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.cpool-demo-error-v40 {
  margin: 24px 0 0 !important;
}

.cpool-demo-footnote-v40 {
  margin: 22px 0 0 !important;
  color: #7b8495 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

@media (max-width: 640px) {
  .cpool-demo-launch-v40 {
    min-height: calc(100dvh - 130px) !important;
    padding: 32px 14px 42px !important;
  }

  .cpool-demo-launch-card-v40 h1 {
    font-size: 32px !important;
  }

  .cpool-demo-launch-card-v40 > p:not(.cpool-demo-footnote-v40) {
    font-size: 14px !important;
  }
}

/* Profile/settings use the same outer axis; inner columns can shrink. */
#cpool-main-yield > .cpool-profile-page > div { min-width: 0; width: 100%; }
#cpool-main-yield > .cpool-profile-page h1 {
  margin-top: 0; font-size: var(--cpool-v40-title); line-height: 1.14;
  font-weight: 800; letter-spacing: -.035em;
}
#cpool-main-yield :is(.cpool-v2-actions, .cpool-page-actions) { flex-wrap: wrap; }
#cpool-main-yield :is(.cpool-v2-hero, .cpool-page-header) > div { min-width: 0; }
#cpool-main-yield :is(.cpool-break-text, .cpool-client-card-title) { overflow-wrap: anywhere; }
#cpool-main-yield :is(button, input, select, textarea, .btn) { max-width: 100%; }
#cpool-main-yield :is(button, input, select, textarea, a, summary):focus-visible {
  outline: 3px solid #4f46e5; outline-offset: 3px;
}
#cpool-main-yield :is(button, input):disabled {
  opacity: .55; cursor: not-allowed; box-shadow: none;
}
#cpool-main-yield form[hidden] { display: none !important; }
@media (max-width: 767px) {
  #cpool-main-yield > .cpool-profile-page { display: block; }
  #cpool-main-yield :is(.cpool-v2-hero, .cpool-page-header) { flex-wrap: wrap; gap: 16px; }
  #cpool-main-yield :is(.cpool-v2-actions, .cpool-page-actions) .btn { min-height: 44px; white-space: normal; height: auto; }
  #cpool-main-yield :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]) { font-size: 16px; }
}

#cpool-main-yield .cpool-models-page > .cpool-v25-section-head,
#cpool-main-yield .cpool-document-choice-hero { display:block !important; }
#cpool-main-yield .cpool-new-action-page .cpool-v2-panel > form.cpool-v2-actions { justify-content:flex-start; }
#cpool-main-yield .btn.btn-error:not(:disabled) { color:#b42318 !important; background:#fff1f0 !important; border-color:#f0b5b0 !important; }
#cpool-main-yield :is(.cpool-task-card,.cpool-v2-list-main,.cpool-document-card) :is(small,span) { line-height:1.5; }
.cpool-hard-header summary:focus-visible { outline:3px solid #4f46e5; outline-offset:3px; }

#cpool-main-yield .cpool-timeline-document-name { overflow-wrap:anywhere; font-size:15px; line-height:1.5; }
#cpool-main-yield :is(.cpool-drop-icon) { font-size:32px; line-height:1.2; }
#cpool-main-yield .cpool-upload-actions > div { display:grid; gap:6px; }
