/* Unfolded Galaxy Fold assessment configuration: exactly three existing cards.
 * Use the existing device class, not width alone; PC/iPad and phone stay unchanged. */
@layer peLocalTypography {
  @media (min-width: 769px) {
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
      gap: 10px !important;
      width: 100% !important;
      min-width: 0 !important;
      align-items: stretch !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) > .assessCard {
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .assessSettingRow {
      display: grid !important;
      grid-template-columns: max-content minmax(0, 1fr) !important;
      grid-template-rows: repeat(2, 42px) !important;
      align-items: center !important;
      gap: 7px 8px !important;
      width: 100% !important;
      min-width: 0 !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .assessSettingRow > span:nth-child(1) {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .assessSettingRow > span:nth-child(3) {
      grid-column: 1 !important;
      grid-row: 2 !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .assessSettingRow > .numberStepper:nth-child(2) {
      grid-column: 2 !important;
      grid-row: 1 !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .assessSettingRow > .numberStepper:nth-child(4) {
      grid-column: 2 !important;
      grid-row: 2 !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .numberStepper {
      display: grid !important;
      grid-template-columns: 32px minmax(44px, 1fr) 32px !important;
      grid-template-rows: 42px !important;
      gap: 7px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      align-items: center !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .numberStepper > input {
      width: 100% !important;
      min-width: 44px !important;
      max-width: 100% !important;
      height: 42px !important;
      margin: 0 !important;
      padding: 0 3px !important;
      box-sizing: border-box !important;
    }
    html.pe87FoldWide body #app #assessConfigCards > .assessCards:has(> .assessCard:nth-child(3)):not(:has(> .assessCard:nth-child(4))) .numberStepper > button {
      width: 32px !important;
      min-width: 32px !important;
      max-width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }
  }
}