/*
 * Shared page hierarchy for every customer-facing surface except Home,
 * Print Studio / Studio Guide, and the isolated Visual Lab reference pages.
 *
 * The functional pa-family-* classes still own behavior. These page levels
 * only normalize visual hierarchy: main gateways, subpages, records, and
 * workspaces. Route sheets remain free to express their own subject matter.
 */

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) {
  --pa-flow-ink: var(--pa-copy-dark, #102b38);
  --pa-flow-copy: var(--pa-copy, #415d6b);
  --pa-flow-muted: var(--pa-copy-muted, #617783);
  --pa-flow-paper: var(--pa-surface, #fff);
  --pa-flow-soft: var(--pa-surface-raised, #edf4f6);
  --pa-flow-line: var(--pa-line-master, #c7d7dc);
  --pa-flow-accent: var(--pa-accent, #087f88);
  --pa-flow-accent-bright: var(--pa-accent-strong, #66d7d2);
  --pa-flow-navy: #071e2d;
  --pa-flow-section-space: clamp(3.25rem, 6vw, 6.5rem);
  --pa-flow-copy-measure: 66ch;
}

html[data-pa-theme="dark"] body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) {
  --pa-flow-ink: #eff7f8;
  --pa-flow-copy: #c3d5da;
  --pa-flow-muted: #9fb7c0;
  --pa-flow-paper: var(--surface, #102732);
  --pa-flow-soft: var(--surface-elevated, #16333e);
  --pa-flow-line: var(--border, #34515c);
  --pa-flow-accent: var(--bright-teal, #73dcd7);
  --pa-flow-accent-bright: #8ce9e3;
  --pa-flow-navy: #061821;
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content {
  color: var(--pa-flow-copy);
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content :is(h1, h2, h3) {
  text-wrap: pretty;
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content :is(h1, h2) {
  letter-spacing: -.04em;
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content :is(
  .pa-eyebrow,
  .pa-offering-eyebrow,
  [class*="__eyebrow"]
) {
  letter-spacing: .15em;
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content :is(
  .pa-section-intro,
  [class*="__intro"],
  [class*="__copy"]
) > p:not(.pa-eyebrow):not(.pa-offering-eyebrow) {
  max-width: var(--pa-flow-copy-measure);
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--pa-flow-accent);
  outline-offset: 4px;
}

body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content :is([id], :target) {
  scroll-margin-top: 8rem;
}

/* Main level: one strong introduction, a route rail, evidence, then action. */
body.pa-flow-level-main {
  --pa-flow-section-space: clamp(4rem, 7vw, 7.5rem);
}

body.pa-flow-level-main #main-content h1 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 5.2vw, 5.35rem);
  font-weight: 570;
  line-height: 1.02;
}

body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
  > :is(
    .pa-menu-hero,
    .pa-tools-hero,
    .pa-community-masthead,
    .pa-maker-tools-hero,
    .pa-score-intro,
    .pa-get-it-printed__hero
  ),
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-color: rgba(126, 225, 221, .18) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(118, 218, 215, .18), transparent 28%),
    radial-gradient(circle at 56% 105%, rgba(76, 150, 166, .22), transparent 34%),
    linear-gradient(118deg, #061725 0%, #0b2a3a 52%, #315e6f 100%) !important;
  color: #f4f9fa !important;
  box-shadow: inset 0 3px 0 var(--pa-flow-accent-bright), var(--pa-shadow-master, 0 24px 60px rgba(16, 58, 68, .12));
}

body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
  > :is(.pa-menu-hero, .pa-tools-hero, .pa-community-masthead, .pa-maker-tools-hero, .pa-score-intro, .pa-get-it-printed__hero),
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid {
  border-radius: clamp(1rem, 2vw, 1.75rem);
}

/* Print Analysis uses the real nested decision desk rather than a direct hero
 * child. Give that primary workflow the same measured drafting language as
 * How It Works: an orbit, registration axes, and a restrained dot field. */
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid::before,
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid::before {
  top: clamp(-7rem, -8vw, -3rem);
  left: clamp(28rem, 43vw, 48rem);
  width: clamp(17rem, 32vw, 31rem);
  aspect-ratio: 1;
  border: 1px solid rgba(126, 225, 221, .22);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(126, 225, 221, .14) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(126, 225, 221, .14) 50%, transparent 50.3%);
}

body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid::after {
  inset: auto auto 1.25rem 1.25rem;
  width: 7rem;
  height: 3.5rem;
  opacity: .28;
  background-image: radial-gradient(circle, #8ce9e3 1px, transparent 1.3px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid > * {
  position: relative;
  z-index: 1;
}

body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
  > :is(
    .pa-page-hero,
    .pa-menu-hero,
    .pa-tools-hero,
    .pa-community-masthead,
    .pa-maker-tools-hero,
    .pa-score-intro,
    .pa-get-it-printed__hero
  ) h1,
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid h1 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 5.2vw, 5.35rem);
  font-weight: 570;
  line-height: 1.02;
}

body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
  > :is(
    .pa-menu-hero,
    .pa-tools-hero,
    .pa-community-masthead,
    .pa-maker-tools-hero,
    .pa-score-intro,
    .pa-get-it-printed__hero
  ) :is(
    .pa-menu-hero__copy,
    .pa-tools-hero__copy,
    .pa-community-masthead__copy,
    .pa-maker-tools-hero__copy,
    .pa-score-intro__copy,
    .pa-get-it-printed__hero-copy
  ) :is(h1, .pa-eyebrow, .pa-offering-eyebrow),
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid .pa-doctor-intro :is(h1, .pa-eyebrow) {
  color: #f4f9fa !important;
}

body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
  > :is(
    .pa-menu-hero,
    .pa-tools-hero,
    .pa-community-masthead,
    .pa-maker-tools-hero,
    .pa-score-intro,
    .pa-get-it-printed__hero
  ) :is(
    .pa-menu-hero__copy,
    .pa-tools-hero__copy,
    .pa-community-masthead__copy,
    .pa-maker-tools-hero__copy,
    .pa-score-intro__copy,
    .pa-get-it-printed__hero-copy
  ) > p,
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid .pa-doctor-intro > p {
  color: #c7d9de !important;
}

body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
  > :is(
    .pa-page-hero,
    .pa-menu-hero,
    .pa-tools-hero,
    .pa-community-masthead,
    .pa-maker-tools-hero,
    .pa-score-intro,
    .pa-get-it-printed__hero
  ) :is(.btn, [class*="__primary"]),
body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid .btn {
  min-height: 48px;
  border-radius: 999px;
}

body.pa-flow-level-main #main-content :is(
  .pa-discover-jump,
  .pa-pricing-jump-nav,
  .pa-tools-start,
  .pa-community-tabs
) {
  border: 1px solid var(--pa-flow-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pa-flow-paper) 92%, transparent);
  box-shadow: 0 18px 45px rgba(12, 52, 63, .08);
}

body.pa-flow-level-main #main-content :is(.pa-section-intro, .pa-tools-directory__intro, .pa-community-workspace-heading) h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 3.4vw, 3.65rem);
  font-weight: 580;
  line-height: 1.08;
}

/* Sub level: a shorter masthead and one focused body/handoff. */
body.pa-flow-level-sub {
  --pa-flow-section-space: clamp(3rem, 5vw, 5.5rem);
}

body.pa-flow-level-sub #main-content h1 {
  max-width: 22ch;
  font-size: clamp(2.25rem, 4.3vw, 4.35rem);
  font-weight: 580;
  line-height: 1.05;
}

body.pa-flow-level-sub #main-content > .pa-public-page > :is(
  .pa-page-hero,
  .pa-menu-hero,
  .pa-contact-hero,
  [class*="-hero"]
):first-child {
  min-height: 0;
  padding-block: clamp(2.75rem, 6vw, 5rem);
  box-shadow: inset 0 3px 0 var(--pa-flow-accent);
}

body.pa-flow-level-sub #main-content > .pa-public-page > :is(
  .pa-page-hero,
  .pa-menu-hero,
  .pa-contact-hero,
  [class*="-hero"]
):first-child h1 {
  max-width: 22ch;
  font-size: clamp(2.25rem, 4.3vw, 4.35rem);
  font-weight: 580;
  line-height: 1.05;
}

body.pa-flow-level-sub #main-content > .pa-public-page > :is(
  .pa-page-hero,
  .pa-menu-hero,
  .pa-contact-hero,
  [class*="-hero"]
):first-child p {
  max-width: 64ch;
}

body.pa-flow-level-sub #main-content :is(.pa-section-intro, [class*="__intro"]) h2 {
  max-width: 25ch;
  font-size: clamp(1.85rem, 3vw, 3rem);
  font-weight: 590;
  line-height: 1.12;
}

/* Detail level: put the record, evidence, or legal text ahead of decoration. */
body.pa-flow-level-detail {
  --pa-flow-section-space: clamp(2.5rem, 4vw, 4.75rem);
}

body.pa-flow-level-detail #main-content h1 {
  max-width: 26ch;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 590;
  line-height: 1.08;
}

body.pa-flow-level-detail #main-content > .pa-public-page > .pa-page-hero:first-child {
  min-height: 0;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: inset 0 3px 0 var(--pa-flow-accent);
}

body.pa-flow-level-detail #main-content :is(
  .pa-saved-report__intro,
  .pa-status-head,
  .pa-score-result-header,
  .pa-doctor-result-hero,
  .pa-message-shell,
  .pa-community-detail-hero,
  .pa-community-question-hero,
  .pa-projects-detail-hero,
  .pa-status-banner,
  .pa-legal-accept-card,
  .pa-privacy-request-detail > header,
  .pa-support-case > header,
  .pa-report-card-page > header,
  .pa-shared-report-hero,
  .pa-flow-head
) {
  border-top: 3px solid var(--pa-flow-accent);
  border-radius: var(--pa-radius-md, 8px);
}

body.pa-flow-level-detail #main-content :is(
  .pa-page-hero,
  .pa-saved-report__intro,
  .pa-status-head,
  .pa-score-result-header,
  .pa-doctor-result-hero,
  .pa-message-shell,
  .pa-community-detail-hero,
  .pa-community-question-hero,
  .pa-projects-detail-hero,
  .pa-status-banner,
  .pa-legal-accept-card,
  .pa-privacy-request-detail > header,
  .pa-support-case > header,
  .pa-shared-report-hero,
  .pa-flow-head
) h1 {
  max-width: 26ch;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 590;
  line-height: 1.08;
}

body.pa-flow-level-detail #main-content :is(.pa-legal-document, .pa-legal-document-page, .pa-doc-layout) :is(p, li) {
  max-width: 78ch;
}

/* Workspace: compact context first, then the controls and current state. */
body.pa-flow-level-workspace {
  --pa-flow-section-space: clamp(2rem, 4vw, 4.5rem);
}

body.pa-flow-level-workspace #main-content h1 {
  max-width: 26ch;
  font-size: clamp(1.85rem, 3vw, 3rem);
  font-weight: 610;
  line-height: 1.1;
}

body.pa-flow-level-workspace #main-content :is(
  .pa-dashboard-head,
  .pa-my-work-heading,
  .pa-projects-head,
  .pa-upload-head,
  .pa-status-head,
  .pa-status-banner,
  .pa-account-page-head,
  .pa-privacy-account-hero,
  .pa-admin-list-hero,
  .pa-admin-reference-hero,
  .pa-admin-hero,
  .pa-admin-page-head,
  .pa-manage-head,
  .pa-maker-tool-header,
  .pa-analytics-page-head,
  .pa-source-packet-hero,
  .pa-doctor-history-hero,
  .pa-flow-head
) {
  min-height: 0;
  border-top: 3px solid var(--pa-flow-accent);
  border-radius: var(--pa-radius-md, 8px);
  box-shadow: var(--pa-shadow-paper, 0 18px 44px rgba(16, 58, 68, .1));
}

body.pa-flow-level-workspace #main-content :is(
  .pa-dashboard-head,
  .pa-my-work-heading,
  .pa-projects-head,
  .pa-upload-head,
  .pa-status-head,
  .pa-status-banner,
  .pa-account-page-head,
  .pa-privacy-account-hero,
  .pa-admin-list-hero,
  .pa-admin-reference-hero,
  .pa-admin-hero,
  .pa-admin-page-head,
  .pa-manage-head,
  .pa-maker-tool-header,
  .pa-analytics-page-head,
  .pa-source-packet-hero,
  .pa-doctor-history-hero,
  .pa-flow-head
) h1 {
  max-width: 26ch;
  font-size: clamp(1.85rem, 3vw, 3rem);
  font-weight: 610;
  line-height: 1.1;
}

body.pa-flow-level-workspace #main-content :is(
  .form-control:not(.form-control-sm),
  .form-select:not(.form-select-sm),
  textarea:not(.form-control-sm)
) {
  min-height: 44px;
  border-color: var(--pa-flow-line);
  border-radius: var(--pa-radius-md, 8px);
}

body.pa-flow-level-workspace #main-content :is(
  .form-control:not(.form-control-sm),
  .form-select:not(.form-select-sm),
  textarea:not(.form-control-sm)
):focus {
  border-color: var(--pa-flow-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pa-flow-accent) 22%, transparent);
}

body.pa-flow-level-workspace #main-content :is(.table-responsive, .pa-admin-table-wrap, .pa-admin-table-shell) {
  overflow: auto;
  border: 1px solid var(--pa-flow-line);
  border-radius: var(--pa-radius-md, 8px);
}

@media (max-width: 767.98px) {
  body.pa-flow-level-main #main-content > :is(.pa-public-page, .pa-tools-page, .pa-connect-hub):not(#precision-workshop)
    > :is(
      .pa-page-hero,
      .pa-menu-hero,
      .pa-tools-hero,
      .pa-community-masthead,
      .pa-maker-tools-hero,
      .pa-score-intro,
      .pa-get-it-printed__hero
    ) h1,
  body.pa-flow-level-main #main-content .pa-doctor-start .pa-doctor-hero-grid h1 {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  body.pa-flow-level-main #main-content :is(
    .pa-discover-jump,
    .pa-pricing-jump-nav,
    .pa-tools-start,
    .pa-community-tabs
  ) {
    border-radius: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content *,
  body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content *::before,
  body[class*="pa-flow-level-"]:not(.pa-flow-level-preserved) #main-content *::after {
    scroll-behavior: auto !important;
  }
}