/* UX-03 / UX-06: shared screen layout only.
   No publication, status, content, pricing, form, permission or hidden-state rules.
   Loaded after the existing presentation and document styles. */
@media screen {
  html:has(> body.portal-app),
  html:has(> body.document-reference.presentation-v17) {
    background: var(--deep, #091012);
  }

  body.portal-app,
  body.document-reference.presentation-v17 {
    --portal-canvas-max: 1600px;
    width: min(100%, var(--portal-canvas-max));
    max-width: var(--portal-canvas-max);
    min-width: 0;
    min-height: 100svh;
    margin-inline: auto;
  }

  /* The backdrop belongs to the same bounded element as its page content. */
  body.portal-app.portal-framed,
  body.portal-app.portal-framed.workspace-public {
    background: var(--deep);
  }
  body.portal-app.portal-framed::before {
    content: none;
  }
  body.portal-app.portal-framed > .portal-frame,
  body.portal-app.portal-framed.workspace-authenticated > .portal-frame,
  body.portal-app.portal-framed.portal-shell-aligned.workspace-authenticated > .portal-frame {
    width: 100%;
    max-width: var(--portal-canvas-max);
    min-height: 100svh;
    margin-inline: 0;
    background: var(--row) center / 100% 100% no-repeat;
  }

  /* This changes the canvas, not the size of the sign-in card or home content. */
  body.portal-app.homepage-screen.home-framed .home-frame {
    width: 100%;
    max-width: var(--portal-canvas-max);
    min-height: 100svh;
    margin-inline: 0;
    background: var(--row) center / 100% 100% no-repeat;
  }
  body.portal-app.homepage-screen.home-framed .home-frame > .home-wrap {
    width: 100%;
    padding-inline: clamp(16px, 2vw, 32px);
  }

  /* Legacy frozen offers have .work-phase without .scope-path. Target their
     existing programme section, not a client or a generated content revision. */
  .presentation-v17 #doc-programme {
    max-width: none;
    margin-inline: 0;
  }
  .presentation-v17 #doc-programme .work-phase {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .presentation-v17 #doc-programme .work-phase > .work-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    top: auto;
    min-width: 0;
  }
  .presentation-v17 #doc-programme .work-phase > .work-nav > a {
    justify-content: center;
    text-align: center;
    min-width: 0;
    border-bottom: 0;
    border-inline-end: 1px solid var(--line);
    overflow-wrap: anywhere;
  }
  .presentation-v17 #doc-programme .work-phase > .work-nav > a:last-child {
    border-inline-end: 0;
  }
  .presentation-v17 #doc-programme .work-phase > .work-section {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
  }
  /* Initialized panels share one content row. Without tab initialization the
     normal source order is retained; CSS does not hide or reveal any panel. */
  .presentation-v17 #doc-programme .work-phase > .work-nav[role="tablist"] ~ .work-section {
    grid-row: 3;
  }
}

@media screen and (min-width: 1101px) {
  .presentation-v17 #doc-programme .work-phase :is(.work-output-grid, .work-steps, .work-responsibilities) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .presentation-v17 #doc-programme .work-phase .work-steps > .work-payment-start {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 700px) {
  .presentation-v17 #doc-programme .work-phase > .work-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .presentation-v17 #doc-programme .work-phase > .work-nav > a {
    min-height: 56px;
    padding: 12px 8px;
    font-size: 14px;
    line-height: 1.7;
    border-inline-end: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .presentation-v17 #doc-programme .work-phase > .work-nav > a:nth-child(2n) {
    border-inline-end: 0;
  }
  .presentation-v17 #doc-programme .work-phase > .work-nav > a:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}