body .main-container {
    display: flex;
}

body .content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

body .page {
    flex: 1 1 auto;
}

body .left-menu-class {
    display: flex;
    position: sticky;
    top: 0;
    width: 257px;
    min-width: 257px;
    height: 100%;
    z-index: 999;
}

body:not(.react-preboot-skeleton-hidden) .main-container {
    position: relative;
}

body:not(.react-preboot-skeleton-hidden) #page {
    min-height: 100vh;
}

.react-preboot-skeleton {
    --react-preboot-skeleton-fill: #edf2f7;
    --react-preboot-skeleton-fill-active: #f6f8fb;
    --react-preboot-skeleton-border: #d8e0e7;
    --react-preboot-skeleton-surface: #fff;
    position: absolute;
    inset: 0 0 auto;
    height: 100vh;
    z-index: 1000;
    overflow: hidden;
    background: var(--react-preboot-skeleton-surface);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 140ms ease-out, visibility 0s linear 140ms;
    will-change: opacity;
}

/*
 * A dark React page (today the order page). ReactPage sets the attribute in <head> for users with
 * ACTION_DARK_MODE, so the first frame is dark. The colors follow pne-ui's dark
 * palette, as the host's own styles for that page do.
 */
html[data-pne-color-mode="dark"] {
    color-scheme: dark;
}

html[data-pne-color-mode="dark"],
html[data-pne-color-mode="dark"] body {
    background: #121212;
}

html[data-pne-color-mode="dark"] .react-preboot-skeleton {
    --react-preboot-skeleton-fill: #262626;
    --react-preboot-skeleton-fill-active: #1f1f1f;
    --react-preboot-skeleton-border: rgba(255, 255, 255, 0.12);
    --react-preboot-skeleton-surface: #121212;
}

body.react-preboot-skeleton-hidden .react-preboot-skeleton {
    opacity: 0;
    visibility: hidden;
}

.react-preboot-skeleton__shell {
    box-sizing: border-box;
    display: flex;
    min-height: 100%;
    background: var(--react-preboot-skeleton-surface);
}

.react-preboot-skeleton__menu {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: 257px;
    min-width: 257px;
    min-height: 100%;
    padding: 12px 8px 0;
    overflow: hidden;
    background: var(--react-preboot-skeleton-surface);
    border-right: 1px solid var(--react-preboot-skeleton-border);
}

.react-preboot-skeleton__menu-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 4px;
    box-sizing: border-box;
}

.react-preboot-skeleton__menu-logo,
.react-preboot-skeleton__menu-icon,
.react-preboot-skeleton__menu-search-field,
.react-preboot-skeleton__menu-label,
.react-preboot-skeleton__menu-arrow,
.react-preboot-skeleton__line,
.react-preboot-skeleton__pill,
.react-preboot-skeleton__button,
.react-preboot-skeleton__field-title,
.react-preboot-skeleton__field-value,
.react-preboot-skeleton__table-head,
.react-preboot-skeleton__table-row {
    display: block;
    border-radius: 4px;
    background: var(--react-preboot-skeleton-fill);
    animation: react-preboot-skeleton-pulse 1.35s ease-in-out infinite;
}

.react-preboot-skeleton__menu-logo {
    width: 156px;
    height: 28px;
}

.react-preboot-skeleton__menu-divider,
.react-preboot-skeleton__frame-divider {
    height: 1px;
    flex: 0 0 1px;
    background: var(--react-preboot-skeleton-border);
}

.react-preboot-skeleton__menu-divider {
    width: 100%;
}

.react-preboot-skeleton__frame-divider {
    width: calc(100% - 16px);
    margin: 0 auto;
}

.react-preboot-skeleton__menu-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 12px 0 0;
    box-sizing: border-box;
}

.react-preboot-skeleton__menu-footer {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.react-preboot-skeleton__menu-group {
    display: flex;
    flex-direction: column;
}

.react-preboot-skeleton__menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 24px;
    box-sizing: border-box;
}

.react-preboot-skeleton__menu-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 8px;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.react-preboot-skeleton__menu-search-field {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.react-preboot-skeleton__menu-item--user {
    height: 64px;
}

/* The bottom block repeats the left menu's: the user row and 32px rows, 8px down to the divider, then
   Logout with 8px above and below. The divider sits 49px above the bottom, on the footer's top rule,
   as the menu's does. */
.react-preboot-skeleton__menu-footer .react-preboot-skeleton__menu-item {
    height: 32px;
}

.react-preboot-skeleton__menu-footer .react-preboot-skeleton__menu-item--user {
    height: 64px;
}

.react-preboot-skeleton__menu-footer .react-preboot-skeleton__menu-divider {
    margin-top: 8px;
}

.react-preboot-skeleton__menu-group--actions {
    padding: 8px 0;
}

.react-preboot-skeleton__menu-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.react-preboot-skeleton__menu-label {
    flex: 0 0 auto;
    height: 12px;
}

.react-preboot-skeleton__menu-label--search {
    width: 138px;
}

.react-preboot-skeleton__menu-label--wide {
    width: 116px;
}

.react-preboot-skeleton__menu-label--medium {
    width: 92px;
}

.react-preboot-skeleton__menu-label--narrow {
    width: 72px;
}

.react-preboot-skeleton__menu-arrow {
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 2px;
}

.react-preboot-skeleton__page {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--react-preboot-skeleton-surface);
}

.react-preboot-skeleton__frame {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    background: var(--react-preboot-skeleton-surface);
}

.react-preboot-skeleton__header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
    padding: 15px;
}

.react-preboot-skeleton__titles,
.react-preboot-skeleton__identity,
.react-preboot-skeleton__actions,
.react-preboot-skeleton__section-grid {
    display: flex;
}

.react-preboot-skeleton__titles {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.react-preboot-skeleton__identity {
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.react-preboot-skeleton__actions {
    gap: 12px;
    margin-left: auto;
}

.react-preboot-skeleton__line--title {
    width: 220px;
    max-width: 22vw;
    height: 16px;
}

.react-preboot-skeleton__line--subtitle {
    width: 160px;
    max-width: 16vw;
    height: 9px;
}

.react-preboot-skeleton__pill--id {
    width: 64px;
    max-width: 6vw;
    height: 14px;
}

.react-preboot-skeleton__pill--name {
    width: 148px;
    max-width: 14vw;
    height: 13px;
}

.react-preboot-skeleton__button {
    height: 32px;
}

.react-preboot-skeleton__button--neutral {
    width: 104px;
}

.react-preboot-skeleton__button--primary {
    width: 88px;
}

.react-preboot-skeleton__body {
    box-sizing: border-box;
    padding: 0 15px 40px;
}

.react-preboot-skeleton__section {
    padding: 24px 0;
    border-bottom: 1px solid var(--react-preboot-skeleton-border);
}

.react-preboot-skeleton__section-grid {
    flex-wrap: wrap;
    gap: 16px;
}

.react-preboot-skeleton__field {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.react-preboot-skeleton__field-title {
    width: 92px;
    height: 10px;
}

.react-preboot-skeleton__field-value {
    width: 100%;
    height: 16px;
}

.react-preboot-skeleton__table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0 0;
}

.react-preboot-skeleton__table-head {
    width: 100%;
    height: 46px;
}

.react-preboot-skeleton__table-row {
    width: 100%;
    height: 80px;
}

@keyframes react-preboot-skeleton-pulse {
    0% {
        background-color: var(--react-preboot-skeleton-fill);
    }

    50% {
        background-color: var(--react-preboot-skeleton-fill-active);
    }

    100% {
        background-color: var(--react-preboot-skeleton-fill);
    }
}

@media (max-width: 1600px) {
    body .left-menu-class {
        width: 49px;
        min-width: 49px;
    }

    .react-preboot-skeleton__menu {
        align-items: center;
        width: 49px;
        min-width: 49px;
        padding: 0;
    }

    .react-preboot-skeleton__menu-header {
        justify-content: center;
        height: 64px;
        padding: 0;
    }

    .react-preboot-skeleton__menu-logo {
        width: 40px;
        height: 40px;
    }

    .react-preboot-skeleton__menu-body {
        width: 100%;
    }

    .react-preboot-skeleton__menu-search,
    .react-preboot-skeleton__menu-item {
        justify-content: center;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    .react-preboot-skeleton__menu-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .react-preboot-skeleton__menu-search-field {
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }

    .react-preboot-skeleton__menu-search {
        margin-bottom: 0;
    }

    .react-preboot-skeleton__menu-footer {
        width: 100%;
    }

    /* The strip's icon rows are 40px, so Logout takes 4px above and below to keep the divider 49px
       above the bottom. */
    .react-preboot-skeleton__menu-footer .react-preboot-skeleton__menu-item,
    .react-preboot-skeleton__menu-footer .react-preboot-skeleton__menu-item--user {
        height: 40px;
    }

    .react-preboot-skeleton__menu-group--actions {
        padding: 4px 0;
    }

    .react-preboot-skeleton__menu-label,
    .react-preboot-skeleton__menu-arrow {
        display: none;
    }
}

@media (max-width: 1080px) {
    body .main-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    body .content {
        width: 100%;
    }

    body .left-menu-class {
        position: fixed;
        width: 48px;
        min-width: 48px;
        height: unset;
    }

    .react-preboot-skeleton__shell {
        display: block;
    }

    .react-preboot-skeleton__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 48px;
        min-width: 48px;
        min-height: 64px;
        height: 64px;
        justify-content: center;
        padding: 0;
        border-right: 0;
        border-bottom: 0;
        z-index: 1;
    }

    .react-preboot-skeleton__menu-header {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        padding: 0;
    }

    /* Only the burger square stays, as in the host's menu skeleton: the menu rows used to spill
       out of the 48x64 box as a column of cut-off blocks. */
    .react-preboot-skeleton__menu-body,
    .react-preboot-skeleton__menu-footer,
    .react-preboot-skeleton__menu-divider {
        display: none;
    }

    .react-preboot-skeleton__body {
        padding: 0 15px 40px;
    }

    .react-preboot-skeleton__header {
        padding-left: 72px;
    }
}

/* A phone header has no room for one row: the title line next to the burger, the actions under it
   on the right, 97px with the divider, as the React order page header. */
@media (max-width: 600px) {
    .react-preboot-skeleton__header {
        flex-wrap: wrap;
        row-gap: 8px;
        height: auto;
        min-height: 64px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .react-preboot-skeleton__titles {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 24px;
    }

    .react-preboot-skeleton__line--title {
        width: 180px;
        max-width: 100%;
        height: 14px;
    }

    .react-preboot-skeleton__line--subtitle,
    .react-preboot-skeleton__identity {
        display: none;
    }

    .react-preboot-skeleton__actions {
        flex: 1 0 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
}

/*
 * The React order page's own skeleton (order-react OrderHistoryPageSkeleton), block for block: the
 * header with the breadcrumbs and the view controls, the summary band, and the widget board in the
 * bands of the real default layouts. The sizes are the React skeleton's; keep the two in step. The
 * script at the top of the block sets the brand tones from the skin, as pne-ui derives them; without
 * a skin color the brand parts stay neutral.
 */
.react-preboot-skeleton__order {
    --react-preboot-order-paper: #fff;
    --react-preboot-order-rule: #e1e7ef;
    box-sizing: border-box;
    min-width: 0;
    min-height: 100%;
    background: var(--react-preboot-skeleton-surface);
}

html[data-pne-color-mode="dark"] .react-preboot-skeleton__order {
    --react-preboot-skeleton-fill: rgba(255, 255, 255, 0.09);
    --react-preboot-skeleton-fill-active: rgba(255, 255, 255, 0.14);
    --react-preboot-order-paper: #1c1c1c;
    --react-preboot-order-rule: #484848;
}

.react-preboot-skeleton__order-block {
    display: block;
    flex: 0 0 auto;
    border-radius: 4px;
    background: var(--react-preboot-skeleton-fill);
    animation: react-preboot-skeleton-pulse 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .react-preboot-skeleton__order-block {
        animation: none;
    }
}

.react-preboot-skeleton__order-header {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;
    min-width: 0;
    min-height: 64px;
    padding: 16px 15px;
    border-bottom: 1px solid var(--react-preboot-brand-line, var(--react-preboot-skeleton-border));
}

.react-preboot-skeleton__order-crumbs {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 8px;
    min-width: min(177px, 100%);
    min-height: 24px;
    overflow: hidden;
}

.react-preboot-skeleton__order-crumb-root {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.react-preboot-skeleton__order-crumb-icon {
    width: 16px;
    height: 16px;
}

.react-preboot-skeleton__order-crumb--root {
    width: 43px;
    height: 14px;
}

.react-preboot-skeleton__order-crumb-separator {
    width: 5px;
    height: 14px;
}

/* The middle crumb gives way, down to the "..." the real one folds into. */
.react-preboot-skeleton__order-crumb--section {
    flex-shrink: 1;
    width: 89px;
    min-width: 34px;
    height: 14px;
}

.react-preboot-skeleton__order-crumb--page {
    width: 38px;
    height: 14px;
}

.react-preboot-skeleton__order-controls {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    margin-left: auto;
}

.react-preboot-skeleton__order-help {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.react-preboot-skeleton__order-help-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.react-preboot-skeleton__order-button {
    height: 28px;
}

/* The layout button gives way on a narrow phone. */
.react-preboot-skeleton__order-button--layout {
    flex-shrink: 1;
    width: 159px;
    min-width: 64px;
}

.react-preboot-skeleton__order-button--edit {
    width: 74px;
}

/* Zero-width flex edges turn the gap into an inset, as in the real strip. */
.react-preboot-skeleton__order-strip {
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 4px 0;
    overflow: hidden;
    background: var(--react-preboot-brand, var(--react-preboot-skeleton-fill));
}

.react-preboot-skeleton__order-strip::before,
.react-preboot-skeleton__order-strip::after {
    content: "";
    flex: 0 0 0px;
}

.react-preboot-skeleton__order-tile {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 69px;
    padding: 4px 12px;
    border-radius: 4px;
    background: var(--react-preboot-order-paper);
}

.react-preboot-skeleton__order-tile:nth-child(1) {
    flex: 0 0 282px;
}

.react-preboot-skeleton__order-tile:nth-child(2) {
    flex: 0 0 230px;
}

.react-preboot-skeleton__order-tile:nth-child(3) {
    flex: 0 0 265px;
}

.react-preboot-skeleton__order-tile:nth-child(4) {
    flex: 0 0 212px;
}

.react-preboot-skeleton__order-tile-title {
    width: 52%;
    height: 12px;
}

.react-preboot-skeleton__order-tile-value {
    width: 74%;
    height: 18px;
}

.react-preboot-skeleton__order-board {
    width: 100%;
    min-width: 0;
    background: var(--react-preboot-order-paper);
    container-name: react-preboot-order-board;
    container-type: inline-size;
}

/* Narrow board: one widget per row, in the order the real narrow board stacks them. */
.react-preboot-skeleton__order-grid {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "order" "status" "currencyConversions" "payment" "actions" "transactions";
    min-width: 0;
}

.react-preboot-skeleton__order-widget {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.react-preboot-skeleton__order-widget--order {
    grid-area: order;
}

.react-preboot-skeleton__order-widget--payment {
    grid-area: payment;
}

.react-preboot-skeleton__order-widget--status {
    grid-area: status;
}

.react-preboot-skeleton__order-widget--currencyConversions {
    grid-area: currencyConversions;
}

.react-preboot-skeleton__order-widget--actions {
    grid-area: actions;
}

.react-preboot-skeleton__order-widget--transactions {
    grid-area: transactions;
}

.react-preboot-skeleton__order-widget-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    background: var(--react-preboot-brand-soft, transparent);
}

.react-preboot-skeleton__order-widget-title {
    height: 12px;
}

.react-preboot-skeleton__order-widget--order .react-preboot-skeleton__order-widget-title {
    width: 92px;
}

.react-preboot-skeleton__order-widget--payment .react-preboot-skeleton__order-widget-title {
    width: 118px;
}

.react-preboot-skeleton__order-widget--status .react-preboot-skeleton__order-widget-title {
    width: 104px;
}

.react-preboot-skeleton__order-widget--currencyConversions .react-preboot-skeleton__order-widget-title {
    width: 134px;
}

.react-preboot-skeleton__order-widget--actions .react-preboot-skeleton__order-widget-title {
    width: 72px;
}

.react-preboot-skeleton__order-widget--transactions .react-preboot-skeleton__order-widget-title {
    width: 96px;
}

/* Each card keeps the size the real widget settles at with inline rows. */
.react-preboot-skeleton__order-widget-body {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 0 12px;
    border-left: 0 solid var(--react-preboot-order-rule);
    background: var(--react-preboot-order-paper);
}

.react-preboot-skeleton__order-widget--order .react-preboot-skeleton__order-widget-body {
    min-height: 384px;
}

.react-preboot-skeleton__order-widget--payment .react-preboot-skeleton__order-widget-body {
    min-height: 576px;
}

.react-preboot-skeleton__order-widget--status .react-preboot-skeleton__order-widget-body {
    min-height: 160px;
}

.react-preboot-skeleton__order-widget--currencyConversions .react-preboot-skeleton__order-widget-body {
    min-height: 64px;
}

.react-preboot-skeleton__order-widget--actions .react-preboot-skeleton__order-widget-body {
    min-height: 240px;
}

.react-preboot-skeleton__order-widget--transactions .react-preboot-skeleton__order-widget-body {
    min-height: 288px;
}

/* Label bars sit in the real label column, so every value bar starts on the same vertical. */
.react-preboot-skeleton__order-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-width: 0;
    min-height: 28px;
}

.react-preboot-skeleton__order-row-label {
    max-width: 100%;
    height: 10px;
}

.react-preboot-skeleton__order-row-value {
    height: 12px;
}

.react-preboot-skeleton__order-row:nth-child(6n + 1) .react-preboot-skeleton__order-row-label {
    width: 88px;
}

.react-preboot-skeleton__order-row:nth-child(6n + 2) .react-preboot-skeleton__order-row-label {
    width: 118px;
}

.react-preboot-skeleton__order-row:nth-child(6n + 3) .react-preboot-skeleton__order-row-label {
    width: 56px;
}

.react-preboot-skeleton__order-row:nth-child(6n + 4) .react-preboot-skeleton__order-row-label {
    width: 112px;
}

.react-preboot-skeleton__order-row:nth-child(6n + 5) .react-preboot-skeleton__order-row-label {
    width: 104px;
}

.react-preboot-skeleton__order-row:nth-child(6n) .react-preboot-skeleton__order-row-label {
    width: 76px;
}

.react-preboot-skeleton__order-row:nth-child(6n + 1) .react-preboot-skeleton__order-row-value {
    width: 58%;
}

.react-preboot-skeleton__order-row:nth-child(6n + 2) .react-preboot-skeleton__order-row-value {
    width: 74%;
}

.react-preboot-skeleton__order-row:nth-child(6n + 3) .react-preboot-skeleton__order-row-value {
    width: 40%;
}

.react-preboot-skeleton__order-row:nth-child(6n + 4) .react-preboot-skeleton__order-row-value {
    width: 66%;
}

.react-preboot-skeleton__order-row:nth-child(6n + 5) .react-preboot-skeleton__order-row-value {
    width: 52%;
}

.react-preboot-skeleton__order-row:nth-child(6n) .react-preboot-skeleton__order-row-value {
    width: 30%;
}

/* Up to this board width the real board stacks every labeled row: the label above its value. */
@container react-preboot-order-board (max-width: 500px) {
    .react-preboot-skeleton__order-row {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        row-gap: 10px;
        min-height: 48px;
    }

    .react-preboot-skeleton__order-widget--order .react-preboot-skeleton__order-widget-body {
        min-height: 640px;
    }

    .react-preboot-skeleton__order-widget--payment .react-preboot-skeleton__order-widget-body {
        min-height: 768px;
    }

    .react-preboot-skeleton__order-widget--status .react-preboot-skeleton__order-widget-body {
        min-height: 256px;
    }

    .react-preboot-skeleton__order-widget--currencyConversions .react-preboot-skeleton__order-widget-body {
        min-height: 96px;
    }

    .react-preboot-skeleton__order-widget--actions .react-preboot-skeleton__order-widget-body {
        min-height: 656px;
    }

    .react-preboot-skeleton__order-widget--transactions .react-preboot-skeleton__order-widget-body {
        min-height: 624px;
    }
}

/* Compact and tablet boards: Order and Payment full width, Status and Currency conversions side by side. */
@container react-preboot-order-board (min-width: 640px) {
    .react-preboot-skeleton__order-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "order order"
            "status currencyConversions"
            "payment payment"
            "actions actions"
            "transactions transactions";
    }

    .react-preboot-skeleton__order-widget--currencyConversions .react-preboot-skeleton__order-widget-body {
        border-left-width: 1px;
    }
}

/* Desktop: Order and Payment side by side, the short widgets down the side column, Transactions under the
   first two. The flexible fourth row keeps the side widgets stacked on each other. */
@container react-preboot-order-board (min-width: 1024px) {
    .react-preboot-skeleton__order-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr);
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
            "order payment status"
            "order payment currencyConversions"
            "order payment actions"
            "order payment ."
            "transactions transactions .";
    }

    .react-preboot-skeleton__order-widget--payment .react-preboot-skeleton__order-widget-body,
    .react-preboot-skeleton__order-widget--status .react-preboot-skeleton__order-widget-body,
    .react-preboot-skeleton__order-widget--actions .react-preboot-skeleton__order-widget-body {
        border-left-width: 1px;
    }
}

/* Wide and ultra-wide share the 4+5+3 split. */
@container react-preboot-order-board (min-width: 1344px) {
    .react-preboot-skeleton__order-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    }
}

/* The collapsed left menu is a burger over the page: the header clears it, as the React one does. */
@media (max-width: 1080px) {
    .react-preboot-skeleton__order-header {
        padding-left: 56px;
    }
}