/* The navigation defines the outer page width. This sheet is not rendered on
   the owner's protected homepage, Studio/guide, or error pages. Reading and
   form columns inside a page keep their own line lengths. */
@layer printpass-content-width {
  @media screen {
    #main-content :is([data-pa-returned-error], [data-pa-returned-result], .validation-summary-errors, :target) { scroll-margin-top: 8rem; }
    #main-content .pa-list-reset[hidden] { display: none !important; }
    #main-content .pa-list-reset { flex: 0 0 auto; }
    #main-content .pa-mesh-example__question { padding: 1.5rem; margin-block: 1.5rem; border: 1px solid var(--pa-border, #bdd5dc); border-radius: .5rem; }
    #main-content .pa-mesh-example__question[hidden] { display: none !important; }
    #main-content .pa-mesh-example__question legend { float: none; width: auto; margin-bottom: .75rem; font-size: 1.2rem; font-weight: 750; }
    #main-content .pa-mesh-example__question [aria-pressed="true"] { outline: 3px solid var(--pa-blue, #087f8c); outline-offset: 3px; }
    #main-content .pa-mesh-example__question [role="status"]:empty { display: none; }
    #main-content .pa-mesh-example__question [role="status"] { margin-top: 1rem; }

    body.pa-body {
      --pa-public-content-max: var(--pa-rail-wide);
      --pa-public-workspace-max: var(--pa-rail-wide);
      --pa-public-wide: var(--pa-rail-wide);
      --pa-public-rail: min(var(--pa-rail-wide), 100%);
    }

    /* Menu pages define this token locally; a body token is not inherited
       over that declaration. Their parent already owns the navigation rail. */
    #main-content > .pa-menu-page {
      --pa-public-rail: 100% !important;
    }

    #main-content > :is(
      .pa-public-page,
      .pa-auth-page,
      .pa-auth-shell,
      .pa-message-shell,
      .pa-account-workspace,
      .pa-customer-dashboard,
      .pa-admin-reference,
      .pa-shared-report-page,
      .pa-report-card-page,
      .pa-upload-shell,
      .pa-status-shell,
      .pa-manage-shell,
      .container,
      .container-lg,
      .container-xl,
      .container-xxl
    ) {
      box-sizing: border-box;
      width: min(calc(100% - var(--pa-gutter)), var(--pa-rail-wide)) !important;
      max-width: var(--pa-rail-wide) !important;
      margin-inline: auto !important;
    }

    /* Admin pages already put the navigation-sized frame on main itself. */
    body.pa-family-admin #main-content > :is(
      .pa-admin-reference,
      .container,
      .container-lg,
      .container-xl,
      .container-xxl,
      .container-fluid,
      .pa-cost-center
    ) {
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
      padding-inline: 0 !important;
    }

    /* The diagnostic desk previously kept a second 92rem cap inside the
       navigation-sized page, plus viewport-based padding on its parent. */
    #main-content .pa-doctor-page > .pa-doctor-start {
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
      padding-inline: 0 !important;
    }

    #main-content .pa-doctor-entry-layout,
    #main-content .pa-doctor-workspace {
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }

    /* Score's evidence introduction sits inside the existing page rail. */
    #main-content > .pa-score-entry-page > .pa-score-intro {
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
      padding-inline: 0 !important;
    }

    /* These are complete section frames, not their inner reading columns. */
    #main-content .pa-guides-manual > :is(
      .pa-guides-manual__hero,
      .pa-guides-manual__workshop,
      .pa-guides-manual__closing
    ),
    #main-content .pa-misprint-page > .pa-evidence-lab,
    #main-content .pa-misprint-page .pa-doc-layout.is-two-column,
    #main-content .pa-contact-page > .pa-contact-support-panel,
    #main-content .pa-sellers-page > .pa-theme-story-band,
    #main-content .pa-source-tool > .pa-source-handoff {
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }

    /* Source Rights used viewport-based padding before its page was bounded. */
    #main-content .pa-source-tool > .pa-source-desk {
      padding-inline: 0 !important;
    }

    #main-content > .pa-content-container {
      padding-inline: 0 !important;
    }

    #main-content .pa-content-frame {
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }

    #main-content .pa-content-frame .pa-readable-form {
      width: 100%;
      max-width: 42rem;
    }

    #main-content .pa-content-frame > .pa-readable-column {
      width: 100%;
      max-width: 48rem;
    }

    #main-content .pa-content-frame .text-secondary {
      max-width: 70ch;
    }

    #main-content > .pa-public-page:is(
      .pa-how-it-works-page,
      .pa-what-we-check-page,
      .pa-etsy-sellers-page,
      .pa-maker-services-page,
      .pa-customer-approval-page,
      .pa-pricing-page,
      .pa-material-guide,
      .pa-changelog-page,
      .pa-marketplace-source-page
    ) {
      container-type: inline-size;
    }

    #main-content > .pa-public-page:is(
      .pa-how-it-works-page,
      .pa-what-we-check-page,
      .pa-etsy-sellers-page,
      .pa-maker-services-page,
      .pa-customer-approval-page,
      .pa-pricing-page,
      .pa-material-guide,
      .pa-changelog-page,
      .pa-marketplace-source-page
    ) > .pa-page-hero {
      width: 100vw !important;
      max-width: none !important;
      margin-inline: calc(50% - 50vw) !important;
      padding-inline: calc((100vw - 100cqw) / 2) !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: clamp(2rem, 4vw, 5rem) !important;
    }

    #main-content > .pa-public-page:is(
      .pa-how-it-works-page,
      .pa-what-we-check-page,
      .pa-etsy-sellers-page,
      .pa-maker-services-page,
      .pa-customer-approval-page,
      .pa-pricing-page,
      .pa-material-guide,
      .pa-changelog-page,
      .pa-marketplace-source-page
    ) > .pa-page-hero > * {
      min-width: 0 !important;
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }

    #main-content > .pa-public-page:is(
      .pa-how-it-works-page,
      .pa-what-we-check-page,
      .pa-etsy-sellers-page,
      .pa-maker-services-page,
      .pa-customer-approval-page,
      .pa-pricing-page,
      .pa-material-guide,
      .pa-changelog-page,
      .pa-marketplace-source-page
    ) > .pa-page-hero h1 {
      max-width: 20ch !important;
      font-size: clamp(2.25rem, 3.8vw, 4.7rem) !important;
      line-height: 1.04 !important;
      text-wrap: balance;
    }

    #main-content > .pa-public-page:is(
      .pa-how-it-works-page,
      .pa-what-we-check-page,
      .pa-etsy-sellers-page,
      .pa-maker-services-page,
      .pa-customer-approval-page,
      .pa-pricing-page,
      .pa-changelog-page
    ) > .pa-page-hero > .pa-hero-media-frame {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: 16 / 9;
    }

    /* These six introductions had a second rail inside the page rail. Keep
       their background field wide while anchoring the actual copy to the nav. */
    #main-content > .pa-public-page:is(
      .pa-discover-atlas, .pa-help-router, .pa-guides-manual,
      .pa-faq-manual, .pa-security-dossier, .pa-sellers-page
    ) {
      container-type: inline-size;
    }

    #main-content > .pa-public-page:is(
      .pa-discover-atlas, .pa-help-router, .pa-guides-manual,
      .pa-faq-manual, .pa-security-dossier, .pa-sellers-page
    ) > :is(
      .pa-discover-atlas__hero, .pa-help-router__hero, .pa-guides-manual__hero,
      .pa-faq-manual__hero, .pa-security-brief, .pa-page-hero
    ) {
      box-sizing: border-box;
      width: 100vw !important;
      max-width: none !important;
      margin-inline: calc(50% - 50vw) !important;
      padding-inline: calc((100vw - 100cqw) / 2) !important;
    }

    #main-content > :is(
      .pa-discover-atlas, .pa-help-router, .pa-guides-manual,
      .pa-faq-manual, .pa-security-dossier
    ) > :is(
      .pa-discover-atlas__hero, .pa-help-router__hero, .pa-guides-manual__hero,
      .pa-faq-manual__hero, .pa-security-brief
    ) > .pa-menu-hero__copy,
    #main-content > .pa-sellers-page > .pa-page-hero > div:first-child {
      box-sizing: border-box;
      min-width: 0 !important;
      margin-inline: 0 !important;
      padding-inline: 0 !important;
      border-inline: 0 !important;
    }

    #main-content > :is(.pa-discover-atlas, .pa-help-router)
      > :is(.pa-discover-atlas__hero, .pa-help-router__hero) > .pa-menu-hero__copy,
    #main-content > .pa-sellers-page > .pa-page-hero > div:first-child {
      width: min(52rem, 100%) !important;
      max-width: none !important;
    }

    /* These pages now pair their introduction with a usable worked example,
       not an absolutely positioned image. Both belong in the reading flow. */
    #main-content > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
      > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief) {
      display: grid !important;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
      align-items: center !important;
      gap: clamp(2rem, 4vw, 5rem) !important;
      min-height: 0 !important;
      height: auto !important;
      padding-block: clamp(2rem, 4vw, 4rem) !important;
    }

    #main-content > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
      > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief)
      > :is(.pa-menu-hero__copy, .pa-worked-example) {
      position: relative !important;
      inset: auto !important;
      order: 0 !important;
      grid-area: auto !important;
      min-width: 0 !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
    }

    #main-content > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
      > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief)
      > .pa-menu-hero__copy {
      padding-block: 0 !important;
      border: 0 !important;
      background: transparent !important;
    }

    /* Image-overlay text colors must not leak into the light example paper. */
    html[data-pa-theme="light"] #main-content
      > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
      > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief)
      > .pa-worked-example {
      background: #fff !important;
      color: #263746 !important;
    }

    html[data-pa-theme="light"] #main-content
      > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
      > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief)
      > .pa-worked-example :is(h2, h3, strong, p, li, dt, dd, small) {
      color: #263746 !important;
      background: transparent !important;
      text-shadow: none !important;
    }

    html[data-pa-theme="light"] #main-content
      > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
      > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief)
      > .pa-worked-example :is(a, .pa-eyebrow) {
      color: #066f7a !important;
    }

    /* Dark Discover and Sellers use bounded media, not the Light background
       treatment. Let that media reach the right rail instead of a fixed cap. */
    html[data-pa-theme="dark"] #main-content > .pa-discover-atlas > .pa-discover-atlas__hero,
    html[data-pa-theme="dark"] #main-content > .pa-sellers-page > .pa-page-hero {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: clamp(2rem, 4vw, 5rem) !important;
      padding-block: clamp(2rem, 4vw, 4rem) !important;
    }

    html[data-pa-theme="dark"] #main-content > .pa-discover-atlas
      > .pa-discover-atlas__hero > .pa-menu-hero__copy,
    html[data-pa-theme="dark"] #main-content > .pa-sellers-page > .pa-page-hero > div:first-child {
      width: 100% !important;
      max-width: none !important;
      padding-block: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    html[data-pa-theme="dark"] #main-content > .pa-discover-atlas
      > .pa-discover-atlas__hero > .pa-menu-hero__copy :is(
        .pa-eyebrow, #discover-title, .pa-discover-atlas__lede,
        .pa-discover-atlas__key, .pa-discover-atlas__key > div,
        .pa-discover-atlas__key dt, .pa-discover-atlas__key dd
      ),
    html[data-pa-theme="dark"] #main-content > .pa-sellers-page
      > .pa-page-hero > div:first-child > :is(.pa-eyebrow, h1, p) {
      background: transparent !important;
    }

    html[data-pa-theme="dark"] #main-content > .pa-discover-atlas
      > .pa-discover-atlas__hero > .pa-discover-specimen,
    html[data-pa-theme="dark"] #main-content > .pa-sellers-page
      > .pa-page-hero > .pa-hero-media-frame {
      min-width: 0 !important;
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
    }

    @media (max-width: 1099.98px) {
      #main-content > :is(.pa-guides-manual, .pa-faq-manual, .pa-security-dossier)
        > :is(.pa-guides-manual__hero, .pa-faq-manual__hero, .pa-security-brief),
      html[data-pa-theme="dark"] #main-content > .pa-discover-atlas > .pa-discover-atlas__hero,
      html[data-pa-theme="dark"] #main-content > .pa-sellers-page > .pa-page-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
      }

      html[data-pa-theme="dark"] #main-content > .pa-discover-atlas
        > .pa-discover-atlas__hero > .pa-menu-hero__copy {
        order: 0 !important;
      }
    }

    @media (max-width: 900px) {
      #main-content > .pa-public-page:is(
        .pa-how-it-works-page,
        .pa-what-we-check-page,
        .pa-etsy-sellers-page,
        .pa-maker-services-page,
        .pa-customer-approval-page,
        .pa-pricing-page,
        .pa-material-guide,
        .pa-changelog-page,
        .pa-marketplace-source-page
      ) > .pa-page-hero {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
      }
    }
  }
}