/* NOOK R4_PUBLIC-4 — final mobile palette and one-page print corrections. */

/* The Radix sheet originally used z-50 while the unified site header uses z-index 80. */
body.r5-unified [data-slot="sheet-overlay"] {
  z-index: 190 !important;
}

body.r5-unified .palette-sheet[data-slot="sheet-content"] {
  z-index: 200 !important;
}

body.r5-unified .palette-footer button[data-nook-pdf-button="true"] {
  min-width: 0;
  height: auto;
  min-height: 48px;
  padding: 12px 14px;
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 820px) {
  body.r5-unified .palette-sheet[data-slot="sheet-content"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    gap: 0;
    overscroll-behavior: contain;
  }

  body.r5-unified .palette-sheet-header {
    flex: 0 0 auto;
    padding: 24px 62px 18px 22px !important;
  }

  body.r5-unified .palette-sheet > button[aria-label="Close"],
  body.r5-unified .palette-sheet > button:has(.sr-only) {
    top: calc(env(safe-area-inset-top) + 18px) !important;
    right: 18px !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.r5-unified .palette-title {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.05;
  }

  body.r5-unified .palette-sheet-body {
    min-height: 0;
    padding: 20px 22px 24px !important;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Put the chosen finish first so it is visible as soon as My Palette opens. */
  body.r5-unified .palette-sheet-body .selected-heading {
    order: 1;
    margin-top: 0;
  }

  body.r5-unified .palette-sheet-body .selected-list,
  body.r5-unified .palette-sheet-body .empty-palette {
    order: 2;
  }

  body.r5-unified .palette-sheet-body .project-fields {
    order: 3;
    margin-top: 26px;
  }

  body.r5-unified .selected-item {
    grid-template-columns: 62px minmax(0, 1fr) 38px;
    gap: 12px;
  }

  body.r5-unified .selected-item img {
    width: 62px;
    height: 54px;
  }

  body.r5-unified .selected-item h3,
  body.r5-unified .selected-item p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.r5-unified .palette-footer {
    flex: 0 0 auto;
    padding: 16px 22px max(18px, env(safe-area-inset-bottom)) !important;
    background: #f1ede5;
  }

  body.r5-unified .palette-footer button {
    width: 100%;
  }

  /* Keep the floating control away from the material card's selector. */
  body.r5-materials .back-to-top {
    right: auto !important;
    left: 16px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  body.r5-unified:has(.palette-sheet[data-state="open"]) .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html,
  body {
    width: 275mm !important;
    height: 184mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body > :not(.site-shell),
  .site-shell > :not(.print-board) {
    display: none !important;
  }

  .site-shell {
    width: 275mm !important;
    height: 184mm !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .print-board {
    position: fixed !important;
    inset: 0 !important;
    width: 275mm !important;
    height: 184mm !important;
    min-height: 0 !important;
    max-height: 184mm !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    break-before: avoid-page !important;
    break-inside: avoid-page !important;
    break-after: avoid-page !important;
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }
}