.cards {
    align-items: center;
}

.cards-vertical {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.content-top {
    display: grid;
    grid-template-rows: 200px 1fr;
    grid-row-gap: 20px;
}

.stacked-2 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 20px;
}

.card {
    background: var(--color-lightest);
    position: relative;
    border-radius: var(--card-radius);
    padding: 20px;
    min-height: 100px;
    height: 100%;
}

    .card.no-radius {
        border-radius: 0;
    }

    .card.container-only {
        background: none;
        border-radius: 0;
        padding: 0;
        min-height: none;
        height: auto;
    }

    .card.shorter {
        min-height: 75px;
    }

.cards-vertical .card {
    height: auto !important;
}

.card.internal {
    border: 1px solid var(--color-error);
}

    .card.internal::after {
        font-family: var(--font-icon);
        content: "\f023";
        position: absolute;
        top: 20px;
        right: 20px;
        color: var(--color-error);
    }

    .card.internal.no-lock::after {
        display: none;
    }

.card.ai-card {
    position: relative;
    border: 1px solid var(--color-10);
}

    .card.ai-card .ai-card-badge {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.25rem;
        color: var(--color-10);
        pointer-events: none;
    }

.card.info {
    background: var(--color-info) !important;
}

.card.dragging {
    background: var(--color-info) !important;
    box-shadow: var(--shadow-far);
}

.card.auto-height {
    height: auto !important;
}

.card.sticky {
    height: auto !important;
    position: sticky;
    top: 100px;
    align-self: start;
}

.card.inset {
    background: var(--border-lightest-color);
}

    .card.inset p {
        font-size: .9rem;
        line-height: 1.2rem;
    }

    .card.inset .field-group:first-child {
        margin-top: 0 !important;
    }

.card.image {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    justify-items: stretch;
    align-content: stretch;
    align-items: stretch;
    padding: 0 !important;
}

    .card.image .pic,
    .card.image .pic img {
        aspect-ratio: 16/9;
        object-fit: cover;
        object-position: top;
        border-top-left-radius: var(--card-radius);
        border-top-right-radius: var(--card-radius);
        position: relative;
        width: 100%;
    }

        .card.image .pic.aspect-43,
        .card.image .pic.aspect-43 img {
            aspect-ratio: 4/3;
        }

        .card.image .pic.aspect-32,
        .card.image .pic.aspect-32 img {
            aspect-ratio: 3/2;
        }

        .card.image .pic.aspect-square,
        .card.image .pic.aspect-square img {
            aspect-ratio: 1/1;
        }

        .card.image .pic .image-size {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 40px 20px 10px 10px;
            width: 100%;
            background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
            font-size: .8rem;
            line-height: .8rem;
            color: var(--color-lightest);
            text-align: right;
        }

        .card.image .pic .overlay-text {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 15px 20px;
            width: auto;
            font-size: .9rem;
            line-height: .9rem;
            color: var(--color-lightest);
            background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
            width: 100%;
        }

        .card.image .pic.top-fade::after {
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(rgb(from var(--border-lightest-color) r g b / 0.1), rgba(0,0,0,0));
            width: 100%;
            height: 33.33%;
            border-top-left-radius: var(--card-radius);
            border-top-right-radius: var(--card-radius);
            content: " ";
        }

/* Website cards whose snapshot has not been captured yet. The placeholder is dimmed
   and gently pulses so it reads as "still coming" rather than a broken image. The
   real screenshot swaps in on its own once the background capture finishes. */
.site-thumb-pending {
    opacity: .55;
    animation: site-thumb-pending-pulse 1.8s ease-in-out infinite;
}

@keyframes site-thumb-pending-pulse {
    0%, 100% {
        opacity: .45;
    }

    50% {
        opacity: .7;
    }
}

/* Empty placeholder card standing in for the inline content editor before it is
   mounted. It has no children, so it needs an explicit height for the shared
   .card.loading skeleton to paint against. Approximates the editor's height so
   the tab does not jump when the real editor replaces it. */
.card.content-edit.loading {
    height: 600px;
}

.card.content-edit .code {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    transition: .3s;
    font: 300 .85rem/.85rem var(--font-code);
    word-break: break-word;
}

    .card.content-edit .code::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        z-index: 2;
        background: linear-gradient(transparent, var(--color-lightest) 80%);
        content: " ";
    }

.card .field-edit,
.card .field-display {
    visibility: hidden;
    opacity: 0;
    transition: .2s;
    height: 100%;
}

    .card .field-edit.active,
    .card .field-display.active {
        visibility: visible;
        opacity: 1;
    }

.card .field-edit {
    position: absolute;
}

.card.image .field-edit.media-edit {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-y: auto;
}

    .card.image .field-edit.media-edit > .padded.form.full-width-fields {
        min-height: 100%;
        box-sizing: border-box;
    }

.card.slides .swiper {
    height: calc(100% - 40px);
}

.card.chart-stat {
    align-items: center;
    height: 100%;
}

    .card.chart-stat canvas {
        width: 100%;
        height: 100%;
        min-height: 300px;
    }

.card.list-stat {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
}

.card.quick-stat {
    align-items: center;
    height: 100%;
}

.card .heading {
    margin-bottom: 20px;
}

.card.quick-stat .stat {
    display: flex;
    align-items: center;
}

    .card.quick-stat .stat .figure {
        font-size: 2rem;
        line-height: 2rem;
        font-weight: 600;
        color: var(--color-darkest);
    }

        .card.quick-stat .stat .figure.past {
            color: var(--color-light);
        }

        .card.quick-stat .stat .figure.smaller {
            font-size: 1.6rem;
            line-height: 1.6rem;
        }

        .card.quick-stat .stat .figure.smallest {
            font-size: 1.2rem;
            line-height: 1.2rem;
        }

    .card.quick-stat .stat .change {
        font-size: .9rem;
        line-height: .9rem;
        font-weight: 500;
        margin-left: 10px;
        color: var(--color-gray);
    }

    .card.quick-stat .stat .success-rate {
        font-size: .75rem;
        line-height: .75rem;
        font-weight: 400;
        padding: 5px 0 0 10px;
    }

    .card.quick-stat .stat .text {
        font-size: 1.5rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: var(--color-darkest);
    }

.card .more-link {
    margin-top: auto;
}

    .card .more-link a {
        margin-top: 20px;
    }

.card h2 {
}

    .card h2 i {
        margin-right: 5px;
    }

.card h3 {
    margin-bottom: .6rem;
}

.card h4 {
    font-size: .9rem;
    line-height: .9rem;
    font-weight: 500;
    color: var(--color-gray);
}

.card ul.seo {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .card ul.seo li {
        font-size: .9rem;
        line-height: .9rem;
        margin: 10px 0;
    }

        .card ul.seo li::before {
            font-family: var(--font-icon);
            content: "\f06a";
            margin: 0 10px 0 0;
        }

.card.dimmed {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--white-out-color);
    border-radius: inherit;
    z-index: 100;
    transition: all 300ms ease-in-out;
}

/* Skeleton loader: content-shaped placeholders replace the spinning circle
   for both stats and list cards. The card's real content is masked by an
   opaque cover (::before) while a skeleton "title bar + content rows" drawing
   with an animated shimmer sweep is painted on top (::after). Driven purely by
   the shared .card.loading class so it applies to every stats and list control. */
.card.loading::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-lightest);
    border-radius: inherit;
    z-index: 100;
}

.card.loading::after {
    --skeleton-bar: rgba(0, 0, 0, 0.08);
    content: " ";
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 101;
    border-radius: 4px;
    background-image:
    /* shimmer sweep */
    linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 60% ),
    /* title bar */
    linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
    /* content rows */
    repeating-linear-gradient( to bottom, var(--skeleton-bar) 0, var(--skeleton-bar) 12px, transparent 12px, transparent 30px );
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: 200% 100%, 45% 18px, 100% calc(100% - 46px);
    background-position: 180% 0, 0 0, 0 46px;
    animation: card-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes card-skeleton-shimmer {
    to {
        background-position: -20% 0, 0 0, 0 46px;
    }
}

/* Stat-control skeletons: the three stat card layouts share a heading
   (title + subtitle) but differ in the body, so each variant paints a
   content-shaped placeholder that closely matches its real layout while
   reusing the same shimmer sweep. */
.card.quick-stat.loading::after,
.card.chart-stat.loading::after,
.card.list-stat.loading::after {
    --skeleton-bar: rgba(0, 0, 0, 0.08);
    --skeleton-shine: rgba(255, 255, 255, 0.75);
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

/* quick-stat: title + subtitle up top, one large figure block. */
.card.quick-stat.loading::after {
    background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, var(--skeleton-shine) 50%, rgba(255, 255, 255, 0) 60% ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 );
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 200% 100%, 55% 16px, 35% 10px, 50% 34px;
    background-position: -50% 0, 0 0, 0 30px, 0 100%;
    animation: card-skeleton-shimmer-quick 1.4s ease-in-out infinite;
}

@keyframes card-skeleton-shimmer-quick {
    to {
        background-position: 150% 0, 0 0, 0 30px, 0 100%;
    }
}

/* chart-stat: title + subtitle up top, one large chart block filling the body. */
.card.chart-stat.loading::after {
    background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, var(--skeleton-shine) 50%, rgba(255, 255, 255, 0) 60% ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 );
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 200% 100%, 45% 16px, 30% 10px, 100% calc(100% - 60px);
    background-position: -50% 0, 0 0, 0 28px, 0 100%;
    animation: card-skeleton-shimmer-chart 1.4s ease-in-out infinite;
}

@keyframes card-skeleton-shimmer-chart {
    to {
        background-position: 150% 0, 0 0, 0 28px, 0 100%;
    }
}

/* list-stat: title + subtitle up top, repeating rows below. */
.card.list-stat.loading::after {
    background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, var(--skeleton-shine) 50%, rgba(255, 255, 255, 0) 60% ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), repeating-linear-gradient( to bottom, var(--skeleton-bar) 0, var(--skeleton-bar) 12px, transparent 12px, transparent 34px );
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size: 200% 100%, 45% 16px, 30% 10px, 100% calc(100% - 72px);
    background-position: -50% 0, 0 0, 0 40px, 0 72px;
    animation: card-skeleton-shimmer-list 1.4s ease-in-out infinite;
}

@keyframes card-skeleton-shimmer-list {
    to {
        background-position: 150% 0, 0 0, 0 40px, 0 72px;
    }
}

/* List-control skeleton: list cards render a filter bar, a data table
   (header + rows), and a pagination bar. They are toggled by
   loading-host.js, which appends an .olive[data-loading-host] marker, so
   :has() targets those cards specifically without affecting stat cards.
   Rows are painted individually with varied widths so the placeholder does
   not look uniformly striped. */
.card.loading:has(> .olive[data-loading-host])::after {
    --skeleton-bar: rgba(0, 0, 0, 0.08);
    --skeleton-shine: rgba(255, 255, 255, 0.75);
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    background-image:
    /* shimmer sweep */
    linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, var(--skeleton-shine) 50%, rgba(255, 255, 255, 0) 60% ),
    /* filter bar (taller: filter area + button controls) */
    linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
    /* table header row (taller) */
    linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
    /* individual data rows (varied widths) */
    linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
    /* pagination bar */
    linear-gradient( var(--skeleton-bar) 100%, transparent 0 );
    background-repeat: no-repeat;
    background-size: 200% 100%, 100% 64px, /* filter bar */
    100% 26px, /* header */
    92% 18px, /* row 1 */
    78% 18px, /* row 2 */
    85% 18px, /* row 3 */
    68% 18px, /* row 4 */
    88% 18px, /* row 5 */
    74% 18px, /* row 6 */
    82% 18px, /* row 7 */
    40% 16px; /* pagination */
    background-position: -50% 0, 0 0, /* filter bar */
    0 84px, /* header */
    0 128px, /* row 1 */
    0 172px, /* row 2 */
    0 216px, /* row 3 */
    0 260px, /* row 4 */
    0 304px, /* row 5 */
    0 348px, /* row 6 */
    0 392px, /* row 7 */
    0 100%; /* pagination */
    animation: card-skeleton-shimmer-list-control 1.4s ease-in-out infinite;
}

@keyframes card-skeleton-shimmer-list-control {
    to {
        background-position: 150% 0, 0 0, 0 84px, 0 128px, 0 172px, 0 216px, 0 260px, 0 304px, 0 348px, 0 392px, 0 100%;
    }
}

/* Card-style data-list skeleton: some lists (e.g. Support Tasks) render a grid
   of individual item cards. During load we render empty placeholder cards
   shaped like the real item card: title, status label, then two field rows. */
.card.task-skeleton.loading {
    min-height: 160px;
}

    .card.task-skeleton.loading::after {
        --skeleton-bar: rgba(0, 0, 0, 0.08);
        --skeleton-shine: rgba(255, 255, 255, 0.75);
        top: 18px;
        right: 18px;
        bottom: 18px;
        left: 18px;
        background-image:
        /* shimmer sweep */
        linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, var(--skeleton-shine) 50%, rgba(255, 255, 255, 0) 60% ),
        /* title */
        linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
        /* status label */
        linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
        /* field row 1: label + value */
        linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 ),
        /* field row 2: label + value */
        linear-gradient( var(--skeleton-bar) 100%, transparent 0 ), linear-gradient( var(--skeleton-bar) 100%, transparent 0 );
        background-repeat: no-repeat;
        background-size: 200% 100%, 80% 18px, /* title */
        45% 14px, /* status label */
        30% 10px, /* field 1 label */
        50% 12px, /* field 1 value */
        30% 10px, /* field 2 label */
        55% 12px; /* field 2 value */
        background-position: -50% 0, 0 0, /* title */
        0 36px, /* status label */
        0 72px, /* field 1 label */
        0 90px, /* field 1 value */
        0 120px, /* field 2 label */
        0 138px; /* field 2 value */
        animation: card-skeleton-shimmer-task 1.4s ease-in-out infinite;
    }

@keyframes card-skeleton-shimmer-task {
    to {
        background-position: 150% 0, 0 0, 0 36px, 0 72px, 0 90px, 0 120px, 0 138px;
    }
}

.card.panel {
    display: none;
}

    .card.panel.active {
        display: block;
    }

.card .top-right-buttons {
    position: absolute;
    top: 12px;
    right: 12px;
}

.card .corner-buttons {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: .5rem
}

    .card .corner-buttons.left {
        right: auto;
        left: 10px;
        cursor: pointer;
    }

    .card .corner-buttons .button {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: .85rem !important;
        line-height: .85rem !important;
        padding: 0;
    }

    .card .corner-buttons .icon {
        width: 20px;
        height: 20px;
    }

.card .arrow {
    position: absolute;
    top: 50%;
    font-size: 1rem;
    line-height: 1rem;
    left: 0;
    transform: translate(-50%, -50%);
    color: var(--color-dark);
}

    .card .arrow.right {
        left: auto;
        right: 0;
        transform: translate(50%, -50%);
    }

.card.image .drag-handle-indicator {
    cursor: grab;
}

    .card.image .drag-handle-indicator:active {
        cursor: grabbing;
    }

.card.image:not(.draggable) img,
.card.image:not(.draggable) a {
    -webkit-user-drag: none;
    user-select: none;
}