.machuca-listing-status,
.machuca-listing-status-pill {
    --machuca-listing-status-bg: #eef7f3;
    --machuca-listing-status-border: #c9ddd4;
    --machuca-listing-status-color: var(--wp--preset--color--primary);
    --machuca-listing-status-delisted-bg: #fbf3dd;
    --machuca-listing-status-delisted-border: #ead8a7;
    --machuca-listing-status-delisted-color: #7d5f10;
    --machuca-listing-status-disabled-bg: #f6f0ed;
    --machuca-listing-status-disabled-border: #e2d8d3;
    --machuca-listing-status-disabled-color: #8a5a44;
}

.machuca-listing-status {
    display: inline-flex;
    width: max-content;
}

.machuca-listing-calendar-link {
    margin: 0 0 16px;
}

.machuca-listing-calendar-link a {
    align-items: center;
    color: var(--wp--preset--color--primary);
    display: inline-flex;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    min-height: 40px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.machuca-listing-calendar-link a:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

.machuca-listing-status-pill {
    align-items: center;
    background: var(--machuca-listing-status-bg);
    border: 1px solid var(--machuca-listing-status-border);
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--machuca-listing-status-color) !important;
    display: inline-flex;
    font-size: var(--wp--preset--font-size--xs, 12px);
    font-weight: 700;
    justify-content: center;
    letter-spacing: .02em;
    line-height: 1;
    min-height: 28px;
    min-width: 88px;
    padding: 6px 12px;
    white-space: nowrap;
}

.machuca-listing-status-pill--pending,
.machuca-listing-status-pill--delisted {
    --machuca-listing-status-bg: var(--machuca-listing-status-delisted-bg);
    --machuca-listing-status-border: var(--machuca-listing-status-delisted-border);
    --machuca-listing-status-color: var(--machuca-listing-status-delisted-color);
}

.machuca-listing-status-pill--disabled {
    --machuca-listing-status-bg: var(--machuca-listing-status-disabled-bg);
    --machuca-listing-status-border: var(--machuca-listing-status-disabled-border);
    --machuca-listing-status-color: var(--machuca-listing-status-disabled-color);
}

.machuca-listing-role-badge {
    align-items: center;
    background: color-mix(in srgb, var(--wp--preset--color--accent-faint, #f5e8dd) 45%, var(--wp--preset--color--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 24%, var(--wp--preset--color--border, #e6e0d6));
    border-radius: 999px;
    color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 82%, var(--wp--preset--color--text, #1f1f1f));
    display: flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 8px;
    padding: 3px 8px;
    white-space: normal;
    width: fit-content;
}

.machuca-listing-role-badge--owner,
.machuca-listing-role-badge--owner-primary {
    background: color-mix(in srgb, var(--wp--preset--color--accent-faint, #f5e8dd) 38%, var(--wp--preset--color--surface, #fff));
    border-color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 28%, var(--wp--preset--color--border, #e6e0d6));
    color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 78%, var(--wp--preset--color--text, #1f1f1f));
}

.machuca-listing-role-badge--primary {
    background: color-mix(in srgb, var(--wp--preset--color--accent-faint, #f5e8dd) 50%, var(--wp--preset--color--surface, #fff));
    border-color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 32%, var(--wp--preset--color--border, #e6e0d6));
    color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 86%, var(--wp--preset--color--text, #1f1f1f));
}

/* The page title, the account links, the count line and the table share one
   column, and that column is the table's: narrowing the page's content size
   moves every constrained block onto the table's left edge at once, instead of
   nudging each block individually and having them drift apart at some width. */
body.machuca-my-listings-page {
    --wp--style--global--content-size: 960px;
    --wp--style--global--wide-size: 960px;
}

body .entry-content .wpuf-dashboard-container {
    max-width: var(--wp--style--global--content-size) !important;
}

body .wpuf-dashboard-container .items-table-container,
body .wpuf-dashboard-container .items-table.rental,
body .wpuf-dashboard-container div:has(> table.items-table.rental) {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    max-width: 100% !important;
    overflow: visible;
    width: 100%;
}

body .wpuf-dashboard-container .items-table.rental td[data-label^="Featured Image"] img,
body .wpuf-dashboard-container .items-table.rental td[data-label^="Image"] img {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    display: block;
    height: 96px;
    max-width: 128px;
    object-fit: cover;
    width: 128px;
}

body .wpuf-dashboard-container .items-table.rental td[data-label^="Status"],
body .wpuf-dashboard-container .items-table.rental td[data-label^="Title"],
body .wpuf-dashboard-container .items-table.rental td[data-label^="Options"] {
    vertical-align: middle;
}

body .wpuf-dashboard-container .items-table.rental tr.machuca-listing-status-row-open {
    position: relative;
    z-index: 40;
}

body .wpuf-dashboard-container .items-table.rental .post-edit-icon,
body .wpuf-dashboard-container .items-table.rental .wpuf-posts-options,
body .wpuf-dashboard-container .items-table.rental .wpuf-posts-menu,
body .wpuf-dashboard-container .items-table.rental .wpuf-posts-menu-wrapper {
    display: none !important;
}

.machuca-listing-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.machuca-listing-row-action {
    align-items: center;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--primary-soft, #4c806c);
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--wp--preset--color--primary) !important;
    display: inline-flex;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    line-height: 1.2;
    min-height: 40px;
    padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.machuca-listing-row-action__icon {
    background: currentColor;
    display: inline-block;
    flex: 0 0 14px;
    height: 14px;
    -webkit-mask: url("../../plugins/wp-user-frontend/assets/images/edit.svg") center / contain no-repeat;
    mask: url("../../plugins/wp-user-frontend/assets/images/edit.svg") center / contain no-repeat;
    width: 14px;
}

.machuca-listing-row-action:hover,
.machuca-listing-row-action:focus-visible {
    background: var(--wp--preset--color--primary-faint);
    color: var(--wp--preset--color--primary) !important;
}

.machuca-listing-row-action:focus-visible,
.machuca-listing-team-menu-toggle:focus-visible,
.machuca-listing-team-action:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.machuca-listing-row-action--disabled {
    border-color: var(--wp--preset--color--border, #ded6cf);
    color: var(--wp--preset--color--text-muted, #8b8177) !important;
    cursor: not-allowed;
}

.machuca-listing-team-menu {
    display: inline-flex;
    position: relative;
}

.machuca-listing-team-menu-toggle {
    align-items: center;
    appearance: none;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--primary-soft, #4c806c);
    border-radius: 999px;
    color: var(--wp--preset--color--primary) !important;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 21px;
    font-weight: 800;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 40px;
}

.machuca-listing-team-menu-toggle:hover,
.machuca-listing-team-menu-toggle[aria-expanded="true"] {
    background: var(--wp--preset--color--primary-faint);
    border-color: var(--wp--preset--color--primary);
}

.machuca-listing-team-actions[hidden] {
    display: none !important;
}

.machuca-listing-team-actions {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border, #e6e0d6);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 31, 31, .12);
    box-sizing: border-box;
    display: grid;
    gap: 2px;
    min-width: 240px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 100;
}

.machuca-listing-team-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    color: var(--wp--preset--color--text, #1f1f1f) !important;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--wp--preset--font-size--sm, 14px);
    font-weight: 700;
    line-height: 1.25;
    min-height: 40px;
    padding: 10px 12px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.machuca-listing-team-action:hover {
    background: var(--wp--preset--color--primary-faint);
    color: var(--wp--preset--color--primary) !important;
}

.machuca-listing-status-change {
    border-top: 1px solid var(--wp--preset--color--border, #e6e0d6);
    display: block;
    margin-top: 6px;
    padding-top: 6px;
}

/* ── The row's dialogs are not cell content ──────────────────────────────────
   Every dialog a listing row can open — change status, add a co-host, guest
   instructions, video — is printed inside the Options cell, because that is
   where the button that opens it lives. They are modal surfaces that happen to
   be parked there, and the cell's own typography must not reach into them.

   It did. At 901px and up the Options cell is set to `text-align: center` (so
   the ⋮ button sits under its header) and `white-space: nowrap` (so the row's
   actions never break), and both are inherited properties: every dialog opened
   from a listing row came up centred, and every description inside one refused
   to wrap and ran out through the side of its container — the status pill, the
   status descriptions, the co-host capability notes, all of them.

   Declared on the dialog itself rather than by narrowing the cell rule, because
   inheritance is not specificity: a value declared here wins over anything the
   ancestor passes down, at any width, and any descendant that genuinely wants
   `nowrap` or its own alignment still overrides this in turn. */
.machuca-listing-row-actions dialog {
    text-align: left;
    white-space: normal;
}

.machuca-listing-status-dialog {
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--border, #e6e0d6);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(31, 31, 31, .2);
    box-sizing: border-box;
    color: var(--wp--preset--color--text, #1f1f1f);
    margin: auto;
    max-height: min(760px, calc(100vh - 32px));
    overflow: auto;
    padding: 0;
    width: min(520px, calc(100vw - 32px));
}

.machuca-listing-status-dialog::backdrop {
    background: rgba(31, 31, 31, .42);
}

.machuca-listing-status-dialog__form {
    margin: 0;
}

.machuca-listing-status-dialog__header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 24px 24px 0;
}

.machuca-listing-status-dialog__eyebrow {
    color: var(--wp--preset--color--accent, #b9663d);
    font-size: var(--wp--preset--font-size--xs, 12px);
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.machuca-listing-status-dialog__header h2 {
    font-family: var(--wp--preset--font-family--serif, Lora, Georgia, serif);
    font-size: 26px;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.machuca-listing-status-dialog__close {
    align-items: center;
    appearance: none;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--border, #e6e0d6);
    border-radius: 999px;
    color: var(--wp--preset--color--text, #1f1f1f) !important;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 40px;
    font: inherit;
    font-size: 24px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 40px;
}

.machuca-listing-status-dialog__body {
    padding: 20px 24px 24px;
}

.machuca-listing-status-dialog__current {
    align-items: start;
    background: var(--wp--preset--color--background, #faf7f1);
    border: 1px solid var(--wp--preset--color--border, #e6e0d6);
    border-radius: 12px;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px;
}

.machuca-listing-status-dialog__current > span {
    font-size: var(--wp--preset--font-size--sm, 14px);
    font-weight: 700;
}

.machuca-listing-status-dialog__current-details {
    display: grid;
    gap: 7px;
    justify-items: end;
    text-align: right;
}

.machuca-listing-status-dialog__current-details > small {
    color: var(--wp--preset--color--text-muted, #6b6b6b);
    font-size: var(--wp--preset--font-size--xs, 12px);
    line-height: 1.4;
}

.machuca-listing-status-dialog__choices {
    border: 0;
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
}

.machuca-listing-status-dialog__choices legend {
    color: var(--wp--preset--color--text, #1f1f1f);
    font-size: var(--wp--preset--font-size--sm, 14px);
    font-weight: 800;
    margin-bottom: 10px;
    padding: 0;
}

.machuca-listing-status-dialog__choice {
    --machuca-status-choice-background: var(--wp--preset--color--primary-faint, #eef7f3);
    --machuca-status-choice-border: var(--wp--preset--color--primary-soft, #4c806c);
    --machuca-status-choice-strong: var(--wp--preset--color--primary, #013b28);
    align-items: flex-start;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--machuca-status-choice-border);
    border-radius: 12px;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 18px minmax(0, 1fr);
    padding: 14px;
}

.machuca-listing-status-dialog__choice--delist {
    --machuca-status-choice-background: #fbf3dd;
    --machuca-status-choice-border: #d8b85f;
    --machuca-status-choice-strong: #a67813;
}

.machuca-listing-status-dialog__choice--disable {
    --machuca-status-choice-background: #f6f0ed;
    --machuca-status-choice-border: #d49a83;
    --machuca-status-choice-strong: #9b4f36;
}

.machuca-listing-status-dialog__choice:hover {
    border-color: var(--machuca-status-choice-strong);
}

.machuca-listing-status-dialog__choice:has(input:checked) {
    background: var(--machuca-status-choice-background);
    border-color: var(--machuca-status-choice-strong);
    box-shadow: 0 0 0 1px var(--machuca-status-choice-strong);
}

.machuca-listing-status-dialog__choice input {
    accent-color: var(--machuca-status-choice-strong);
    height: 18px;
    margin: 2px 0 0;
    width: 18px;
}

.machuca-listing-status-dialog__choice strong,
.machuca-listing-status-dialog__choice small {
    display: block;
}

.machuca-listing-status-dialog__choice strong {
    font-size: var(--wp--preset--font-size--sm, 14px);
    line-height: 1.3;
}

.machuca-listing-status-dialog__choice small {
    color: var(--wp--preset--color--text-muted, #6b6b6b);
    font-size: var(--wp--preset--font-size--xs, 12px);
    line-height: 1.45;
    margin-top: 4px;
}

.machuca-listing-status-dialog__footer {
    align-items: center;
    border-top: 1px solid var(--wp--preset--color--border, #e6e0d6);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px 24px;
}

.machuca-listing-status-dialog__cancel,
.machuca-listing-status-dialog__save {
    appearance: none;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: var(--wp--preset--font-size--sm, 14px);
    font-weight: 700;
    min-height: 42px;
    padding: 10px 18px;
}

.machuca-listing-status-dialog__cancel {
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--border-strong, #cfc6ba);
    color: var(--wp--preset--color--text, #1f1f1f) !important;
}

.machuca-listing-status-dialog__close:hover,
.machuca-listing-status-dialog__cancel:hover {
    background: var(--wp--preset--color--primary-faint, #eef7f3);
    border-color: var(--wp--preset--color--primary-soft, #4c806c);
    color: var(--wp--preset--color--primary, #013b28) !important;
}

.machuca-listing-status-dialog__save {
    background: var(--wp--preset--color--primary, #013b28);
    border: 1px solid var(--wp--preset--color--primary, #013b28);
    color: var(--wp--preset--color--surface, #fff) !important;
}

.machuca-listing-status-dialog__save:hover:not(:disabled) {
    filter: brightness(1.08);
}

.machuca-listing-status-dialog[data-selected-action="delist"] .machuca-listing-status-dialog__save {
    background: #7d5f10;
    border-color: #7d5f10;
}

.machuca-listing-status-dialog[data-selected-action="disable"] .machuca-listing-status-dialog__save {
    background: #8a5a44;
    border-color: #8a5a44;
}

.machuca-listing-status-dialog__save:disabled {
    background: var(--wp--preset--color--border, #e6e0d6);
    border-color: var(--wp--preset--color--border, #e6e0d6);
    color: var(--wp--preset--color--text-subtle, #9a9a9a) !important;
    cursor: not-allowed;
}

.machuca-listing-status-dialog__close:focus-visible,
.machuca-listing-status-dialog__choice input:focus-visible,
.machuca-listing-status-dialog__cancel:focus-visible,
.machuca-listing-status-dialog__save:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #b9663d);
    outline-offset: 3px;
}

.machuca-listing-status-notice {
    background: var(--wp--preset--color--accent-faint, #f5e8dd);
    border: 0;
    border-left: 4px solid var(--wp--preset--color--accent, #b9663d);
    border-radius: 8px;
    color: var(--wp--preset--color--text, #1f1f1f);
    font-size: var(--wp--preset--font-size--sm, 14px);
    line-height: 1.4;
    margin: 0 0 18px;
    max-width: 100%;
    padding: 16px;
}

.machuca-listing-status-notice--error {
    background: #fef2f2;
    border-left-color: #b91c1c;
    color: #b91c1c;
}

.machuca-listing-status-notice--success {
    background: color-mix(in srgb, var(--wp--preset--color--status-accepted, #5a8567) 14%, var(--wp--preset--color--surface, #fff));
    border-left-color: var(--wp--preset--color--status-accepted, #5a8567);
}

.machuca-listing-status-notice__detail {
    display: block;
    margin-top: 4px;
}

/* The team-review notice is the only one that carries a list of listings, so
   the block owns its own vertical rhythm instead of inheriting the theme's
   paragraph margins between its parts. */
.machuca-listing-status-notice > p {
    margin: 0;
}

.machuca-listing-status-notice > p + p {
    margin-top: 10px;
}

.machuca-listing-status-notice__list {
    list-style: none;
    margin: 12px 0;
    padding-left: 0;
}

.machuca-listing-status-notice__list li + li {
    margin-top: 8px;
}

.machuca-listing-status-notice__list a {
    color: inherit;
    font-weight: 600;
}

.machuca-listing-status-notice__item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
}

.machuca-listing-status-notice__item-copy {
    display: block;
    min-width: 0;
}

.machuca-listing-status-notice__action {
    align-items: center;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 40%, var(--wp--preset--color--surface, #fff));
    border-radius: 999px;
    color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 88%, var(--wp--preset--color--text, #1f1f1f)) !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 36px;
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
}

.machuca-listing-status-notice__action:hover,
.machuca-listing-status-notice__action:focus-visible {
    background: var(--wp--preset--color--accent-faint, #f5e8dd);
    border-color: var(--wp--preset--color--accent, #b9663d);
}

/* The same record, named where the row's own menu can act on it. */
.machuca-listing-team-action__flag {
    background: var(--wp--preset--color--accent-faint, #f5e8dd);
    border-radius: 999px;
    color: color-mix(in srgb, var(--wp--preset--color--accent, #b9663d) 88%, var(--wp--preset--color--text, #1f1f1f));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    margin-left: auto;
    padding: 2px 8px;
    white-space: nowrap;
}

.machuca-listing-team-menu-toggle--flagged {
    position: relative;
}

.machuca-listing-team-menu-toggle--flagged::after {
    background: var(--wp--preset--color--accent, #b9663d);
    border: 2px solid var(--wp--preset--color--surface, #fff);
    border-radius: 50%;
    content: "";
    height: 10px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 10px;
}

body.machuca-my-listings-page .entry-content .wp-block-spacer:has(+ .wp-block-buttons a[href*="/account/my-listings/add-new-listing/"]) {
    height: 20px !important;
}

body.machuca-my-listings-page .entry-content .wp-block-buttons:has(a[href*="/account/my-listings/add-new-listing/"]) {
    margin-block: 20px 16px !important;
    position: relative;
    z-index: 1;
}

body.machuca-my-listings-page .entry-content p:has(> a[href$="/account/"]) {
    margin-block: 0 24px;
}

/* Title absorbs the slack. Status keeps a fixed share so its pill is not
   squeezed against the actions, and each header sits centred over what it
   labels.

   The overflow menu is not a column: it is a per-row action on the outside of
   the table, in a rail the table gives up on its right. The last cell is what
   positions it, so the rail needs no markup of its own and the row keeps one
   cell per column. The rail is carved out of the table's own width rather than
   added beside it, so a narrow desktop window can never push it off-screen. */
@media (min-width: 901px) {
    body .wpuf-dashboard-container .items-table.rental {
        margin-left: 0;
        margin-right: auto;
        width: calc(100% - 64px);
    }

    body .wpuf-dashboard-container .items-table.rental .machuca-listing-col--status,
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Status"] {
        padding-inline: 12px;
        text-align: center;
        width: 168px;
    }

    body .wpuf-dashboard-container .items-table.rental .machuca-listing-col--options,
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Options"] {
        padding-inline: 16px;
        text-align: center;
        white-space: nowrap;
        width: 1%;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Options"] {
        position: relative;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Options"] .machuca-listing-team-menu {
        left: 100%;
        margin-left: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .machuca-listing-row-actions {
        gap: 12px;
        justify-content: center;
    }
}

@media (max-width: 1007px) {
    body.machuca-my-listings-page .entry-content {
        box-sizing: border-box;
        padding-inline: 24px;
        width: 100%;
    }
}

@media (max-width: 900px) {
    body .wpuf-dashboard-container .items-table-container,
    body .wpuf-dashboard-container .items-table.rental,
    body .wpuf-dashboard-container div:has(> table.items-table.rental) {
        margin-top: 24px;
    }

    body .wpuf-dashboard-container div:has(> table.items-table.rental),
    body .wpuf-dashboard-container .items-table.rental {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Below the table's width a row stops being a row: each listing becomes a
       card built like the listing cards elsewhere on the site — photo across
       the top, then the name, then the badge that says how you hold it. The two
       controls with nowhere else to go ride the photo's corners: the state on
       the left, the options menu on the right. That leaves the whole width of
       the card for the name, which is what used to collide with the menu. */
    body .wpuf-dashboard-container .items-table.rental {
        border-collapse: separate;
        border-spacing: 0;
    }

    body .wpuf-dashboard-container .items-table.rental thead {
        display: none;
    }

    body .wpuf-dashboard-container .items-table.rental tbody {
        display: grid !important;
        gap: 16px;
        grid-template-columns: minmax(0, 1fr);
    }

    body .wpuf-dashboard-container .items-table.rental tr {
        align-content: start;
        background: var(--wp--preset--color--surface);
        border: 1px solid var(--wp--preset--color--border, #e6e0d6);
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(31, 31, 31, .04), 0 2px 8px rgba(31, 31, 31, .04);
        display: grid !important;
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
        margin: 0;
        max-width: none;
        padding: 0;
        position: relative;
    }

    body .wpuf-dashboard-container .items-table.rental td {
        border: 0 !important;
        display: block !important;
        min-width: 0;
        padding: 0 !important;
        text-align: left;
    }

    body .wpuf-dashboard-container .items-table.rental td::before {
        content: none !important;
        display: none !important;
    }

    /* The card is not clipped: the options menu opens out of it, so the photo
       rounds its own top corners instead. */
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Featured Image"],
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Image"] {
        grid-column: 1;
        grid-row: 1;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Featured Image"] > a,
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Image"] > a {
        display: block;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Featured Image"] img,
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Image"] img {
        aspect-ratio: 16 / 9;
        border-radius: 15px 15px 0 0;
        display: block;
        height: auto;
        max-width: none;
        min-height: 0;
        width: 100%;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Title"] {
        grid-column: 1;
        grid-row: 2;
        line-height: 1.3;
        overflow: visible;
        padding: 14px 16px 0 !important;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Title"] > a {
        display: block;
        overflow-wrap: break-word;
    }

    body .wpuf-dashboard-container .items-table.rental .machuca-listing-role-badge {
        margin-top: 8px;
    }

    /* The state shares the photo's cell rather than being positioned over it,
       so it cannot drift out of the corner it belongs to. */
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Status"] {
        align-self: start;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 12px;
        position: relative;
        z-index: 2;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Options"] {
        grid-column: 1;
        grid-row: 3;
        padding: 12px 16px 16px !important;
    }

    body .wpuf-dashboard-container .items-table.rental td[data-label^="Link"],
    body .wpuf-dashboard-container .items-table.rental td[data-label^="Payment"] {
        display: none !important;
    }

    .machuca-listing-row-actions {
        display: flex;
        gap: 8px;
        position: static;
        width: 100%;
    }

    .machuca-listing-row-action {
        min-width: 0;
        width: auto;
    }

    .machuca-listing-row-action--edit,
    .machuca-listing-row-action--disabled {
        flex: 1 1 auto;
    }

    .machuca-listing-team-menu {
        display: inline-flex;
        position: absolute;
        right: 12px;
        top: 12px;
        z-index: 2;
    }

    .machuca-listing-team-menu-toggle {
        box-shadow: 0 1px 4px rgba(31, 31, 31, .22);
        height: 40px;
        width: 40px;
    }

    .machuca-listing-status-pill {
        box-shadow: 0 1px 4px rgba(31, 31, 31, .22);
        min-width: 0;
    }

    .machuca-listing-status-notice {
        margin-bottom: 12px;
        padding: 12px;
    }

    body.machuca-my-listings-page .entry-content .wp-block-spacer:has(+ .wp-block-buttons a[href*="/account/my-listings/add-new-listing/"]) {
        height: 20px !important;
    }

    body.machuca-my-listings-page .entry-content .wp-block-buttons:has(a[href*="/account/my-listings/add-new-listing/"]) {
        margin-block: 24px 20px !important;
    }

    body.machuca-my-listings-page .entry-content p:has(> a[href$="/account/"]) {
        margin-block: 0 40px;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    body .wpuf-dashboard-container .items-table.rental tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body.machuca-my-listings-page .entry-content {
        padding-inline: 16px;
    }

    .machuca-listing-status-dialog__header {
        padding: 20px 20px 0;
    }

    .machuca-listing-status-dialog__header h2 {
        font-size: 22px;
    }

    .machuca-listing-status-dialog__body {
        padding: 18px 20px 20px;
    }

    .machuca-listing-status-dialog__footer {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 16px 20px 20px;
    }

    .machuca-listing-status-dialog__cancel,
    .machuca-listing-status-dialog__save {
        width: 100%;
    }
}