@layer components {
    /* Column container
  /* ------------------------------------------------------------------------ */

    #main:has(.card-columns) {
        --main-padding: 0;
    }

    .card-columns {
        --bubble-size: 3.5rem;
        --cards-gap: min(1.2cqi, 1.7rem);
        --column-gap: 8px;
        --column-padding-expanded: calc(var(--column-gap) * 2);
        --column-transition-duration: 300ms;
        --column-width-collapsed: 40px;
        --column-width-expanded: 380px;
        --progress-increment: var(--progress-max-height) / var(--progress-max-cards);
        --progress-max-cards: 20;
        --progress-max-height: 50dvh;

        container-type: inline-size;
        display: grid;
        gap: var(--column-gap);
        grid-template-columns: 1fr var(--column-width-expanded) 1fr;
        margin-inline: auto;
        max-inline-size: var(--main-width);
        overflow-x: auto;
        overflow-y: hidden;
        padding-block-end: var(--column-width-collapsed);
        position: relative;

        &:has(.cards) {
            min-block-size: 20lh;
        }
    }

    /* Column
  /* ------------------------------------------------------------------------ */

    .cards {
        --column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas));

        inline-size: var(--column-width-expanded);
        outline: none;
        position: relative;
        scroll-snap-align: start;

        &.drag-and-drop__hover-container {
            --dnd-bg-color: transparent;
            --dnd-border-color: transparent;

            &.is-off-screen {
                &:after {
                    background-color: var(--column-color);
                    content: attr(data-column-name);
                    font-size: var(--text-x-small);
                    font-weight: 500;
                    inline-size: calc(var(--column-width-expanded) - 4px);
                    /* make room for the dnd border */
                    line-height: var(--column-width-collapsed);
                    padding-inline: 1ch;
                    position: fixed;
                    text-transform: uppercase;
                    top: 0;
                    translate: -50%;
                }
            }
        }

        @media (any-hover: hover) {
            .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
                filter: none;
                opacity: 1;
            }
        }
    }

    .cards__transition-container {
        block-size: 100%;
        border-radius: calc(var(--column-width-collapsed) / 2);
        padding-inline: var(--column-padding-expanded);

        .drag-and-drop__hover-container & {
            --dnd-bg-color: var(--column-color);
            --dnd-border-color: var(--card-color);

            background-color: var(--dnd-bg-color);
            outline: 2px dashed var(--dnd-border-color);
            outline-offset: -2px;
            transition: background-color 200ms;
            z-index: 1;
        }
    }

    /* Drag-and-drop: visual state for the card being dragged.
     * Fizzy-style — desaturate + dim so it's visually clear where the
     * user started from while the drop placeholder shows where it will
     * land. */
    .drag-and-drop__dragged-item {
        box-shadow: none;
        filter: grayscale(1) brightness(0.97);
        opacity: 0.6;
        outline: 2px dashed var(--color-ink-lighter, oklch(75% 0 0));
        outline-offset: -2px;
    }

    /* Drop-position indicator — a dashed outline "slot" inserted into the
     * destination `.cards__list` at the exact insertion point. The
     * controller moves this single element around during `dragover` and
     * sets `--drop-height` to the dragged card's height so the slot
     * matches the card's outline. */
    .card-drop-placeholder {
        block-size: var(--drop-height, 3.5em);
        border: 2px dashed var(--color-ink-lighter, oklch(60% 0 0));
        border-radius: var(--card-border-radius, 0.5em);
        background-color: color-mix(in srgb, var(--card-color, transparent) 8%, transparent);
        box-sizing: border-box;
        inline-size: 100%;
        pointer-events: none;
    }

    /* The wrapper around the cards used to clip overflow while transitioning.
   * Also, don't resize cards while transitioning to avoid reflow. */
    .cards__list {
        align-items: flex-end;
        /* use flex-start to wipe from left */
        display: flex;
        flex-direction: column;
        gap: var(--cards-gap);
        margin-block-start: -1ch;
        margin-inline: -1ch;
        overflow: hidden;
        padding: 1ch;

        .card {
            inline-size: calc(var(--column-width-expanded) - var(--column-padding-expanded) * 2);
        }

        .cards--grid & {
            display: contents;
        }

        [aria-selected] & .card[aria-selected] {
            outline: var(--focus-ring-size) solid var(--color-selected-dark);
            outline-offset: var(--focus-ring-offset);

            html[data-theme="dark"] & {
                outline-color: oklch(var(--lch-blue-medium));
            }

            @media (prefers-color-scheme: dark) {
                html:not([data-theme]) & {
                    outline-color: oklch(var(--lch-blue-medium));
                }
            }
        }
    }

    .cards__new-column {
        margin-block-start: var(--column-width-collapsed);
        position: relative;
    }


    /* Cards grid; used when filtering
  /* -------------------------------------------------------------------------- */

    .cards--grid {
        --cards-gap: 1rem;
        --card-grid-columns: 1;

        container-type: inline-size;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--cards-gap);
        justify-content: center;
        margin-inline: auto;
        max-inline-size: var(--main-width);

        @media (min-width: 640px) {
            --card-grid-columns: 2;
        }

        @media (min-width: 960px) {
            --card-grid-columns: 3;
        }

        .card {
            inline-size: calc((100% - var(--cards-gap) * (var(--card-grid-columns) - 1)) / var(--card-grid-columns));
        }

        .card__header .card__column-name--current {
            --btn-padding: 0.1em 0.5em;

            background: none;
            border: 1px solid currentColor;
            color: var(--card-color);
            display: inline-flex;
            flex: 0 1 auto;
            inline-size: fit-content;
            margin: 0 0 0 auto;
        }
    }

    /* Column Elements
  /* ------------------------------------------------------------------------ */

    .cards__header {
        display: grid;
        grid-template-areas: "menu expander maximize";
        grid-template-columns: var(--column-width-collapsed) 1fr var(--column-width-collapsed);
        margin-block-end: calc(0.5 * var(--cards-gap));
    }

    .cards__menu .btn--circle,
    .cards__maximize-button {
        --btn-background: transparent;

        block-size: var(--column-width-collapsed);
        inline-size: var(--column-width-collapsed);
        opacity: 0;
        outline-offset: -2px;

        @media (any-hover: hover) {
            .cards:hover & {
                opacity: 1;
            }
        }

        &:focus-visible {
            opacity: 1;
        }
    }

    .cards__menu {
        grid-area: menu;
        position: relative;
        z-index: var(--z-popup);
    }

    .cards__maximize-button {
        grid-area: maximize;
    }

    .cards__expander {
        align-items: center;
        border-radius: 99rem;
        display: flex;
        flex-direction: row-reverse;
        font-size: var(--text-x-small);
        font-weight: 600;
        gap: 0.5ch;
        grid-area: expander;
        inline-size: 100%;
        justify-content: center;
        letter-spacing: 0.04em;
        outline-offset: -2px;
        position: relative;
        text-transform: uppercase;
    }

    .cards__expander-count {
        display: none;
    }

    .cards__expander-title {
        --icon-size: 1em;

        font-size: inherit;
        font-weight: 700;
        line-height: 1.3;

        /* Title is text-only — leading topic icons (asset/zone) are
           rendered by the column header for context elsewhere; in the
           expander title they're noise. */
        > .icon {
            display: none;
        }

        .cards:not(.cards--considering) & {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 0.25ch;
        }
    }

    /* Override card styles within columns
  /* ------------------------------------------------------------------------ */

    .cards {
        .card {
            --block-space: 1em;
            --block-space-half: 0.5em;
            --card-padding-inline: 1em;
            --text-xx-large: 1.6em;
            --text-x-small: 1em;

            /* Set lower limit for font size */
            font-size: clamp(0.6rem, 0.85cqi, 100px);
        }

        .card__steps {
            display: flex;
        }

        .card__tags {
            gap: calc(var(--card-header-space) / 2);
        }

        .card__title {
            pointer-events: none;
        }

        .card__link {
            z-index: 1;
        }

        .card__stages,
        .card__hide-on-index {
            display: none;
        }

        .card__body {
            padding-block: calc(var(--card-padding-block) * 0.75) var(--card-padding-block);
        }

        .card__meta {
            font-weight: 600;

            strong,
            .local-time-value {
                font-weight: inherit;
            }
        }

        .card:has(.card__background img:not([src=""])) {
            /* Dim the image so title/meta stay legible; brighten on hover. */
            .card__background img:not([src=""]) {
                filter: blur(1px) brightness(0.85);
                opacity: 0.35;
            }

            .card__content,
            .card__meta,
            .card__title,
            .card__column-name:not(.card__column-name--current) {
                text-shadow: 0 1px 2px var(--color-canvas), 0 0 1px var(--color-canvas);
            }
        }

        .bubble {
            inset-inline-start: 100%;
            translate: -90% -40%;
        }

        @media (any-hover: hover) {
            .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) {
                filter: none;
                opacity: 1;
            }

            .card:has(.card__background img:not([src=""])):hover {
                .card__content,
                .card__meta,
                .card__title,
                .card__column-name:not(.card__column-name--current) {
                    text-shadow: 0 1px 2px var(--color-canvas), 0 0 2px var(--color-canvas);
                }
            }
        }
    }

    /* Considering
  /* ------------------------------------------------------------------------ */

    .cards--considering {
        --card-color: oklch(var(--lch-blue-medium));

        position: relative;

        .card {
            --avatar-size: 2.75em;
            --text-small: 1.1em;

            background-color: var(--color-canvas);
            line-height: 1.2;
            z-index: 2;

            @media (min-width: 640px) {
                --text-xx-large: 1.6em;
            }
        }

        .card__board {
            background-color: transparent;
            color: var(--card-content-color);
        }

        .card__header {
            color: var(--color-ink);
            padding-block-start: calc(var(--card-padding-block) / 2);
        }

        .card__tags {
            color: inherit;
        }

        .card__body {
            padding-block: 0 var(--card-padding-block);
        }

        .card__people-label {
            display: none;
        }

        .card__title {
            min-block-size: 0;
        }
    }

    /* Board tools
  /* -------------------------------------------------------------------------- */

    .board-tools.card {
        --border-color: var(--color-selected-dark);
        --border-size: 1px;
        --card-padding-block: var(--block-space);

        border: 1px solid var(--border-color);
        margin-block-end: var(--cards-gap);
        text-align: center;

        &:has(dialog[open]) {
            z-index: 5;
        }

        .separator--horizontal {
            margin-block: var(--block-space);
        }

        .btn--link {
            font-size: 1.2em;
        }

        .btn:not(.btn--link, .btn--circle) {
            border: 0;
            color: var(--color-link);
        }

        footer {
            font-size: var(--text-x-small);
            margin-block-end: calc(var(--block-space-half) * -1);
        }

        .overflow-count {
            font-size: 1.2em;
            font-weight: 500;
            padding: 0.5em 0.3em;
        }
    }

    .board-tools__watching {
        --btn-size: 32px;
        --gap: 0.5ch;

        display: flex;
        gap: var(--gap);
        inline-size: 100%;
        margin-block: var(--block-space-half);
        place-content: center;
        position: relative;
    }

    .board-tools__watching-dialog {
        --panel-padding: 2ch;
        --panel-size: 100%;

        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        inset-block-start: 0;
        justify-content: center;
        position: absolute;
        z-index: 1;
    }

    /* On Deck (Not Now)
  /* ------------------------------------------------------------------------ */

    .cards--closed,
    .cards--on-deck {
        --card-color: var(--color-ink-light) !important;

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

        .bubble {
            display: none !important;
        }
    }

    /* Closed (Done)
  /* ------------------------------------------------------------------------ */

    .cards--closed {}

    /* Doing
  /* -------------------------------------------------------------------------- */

    /* Surface a mini bubble if there are cards with bubbles inside */
    .cards--considering:has(.bubble:not([hidden])) {
        .cards__transition-container {
            --bubble-color: var(--card-color, oklch(var(--lch-blue-medium)));
            --bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;

            &:before {
                background: radial-gradient(color-mix(in srgb, var(--bubble-color) 8%, var(--color-canvas)) 50%,
                        color-mix(in srgb, var(--bubble-color) 48%, var(--color-canvas)) 100%);
                block-size: 1em;
                border-radius: var(--bubble-shape);
                content: "";
                inline-size: 1em;
                inset: 0 0 auto auto;
                position: absolute;
                translate: 20% -20%;
                z-index: 1;
            }

            .cards--considering &:before {
                inset: 0 auto auto 0;
                translate: 100% 75%;
            }
        }
    }

    .cards--considering:has(.bubble:not([hidden])) .cards__expander-title:before {
        translate: 120% 50%;
    }

    /* Card column indicators
  /* -------------------------------------------------------------------------- */

    .card__column-name {
        --btn-background: transparent;
        --btn-padding: 0.2em 0.5em;
        --btn-border-size: 0;
        --btn-border-radius: 0.2em;

        color: inherit;
        inline-size: 100%;
        justify-content: flex-start;
        text-transform: uppercase;

        @media (hover: hover) {
            &:not(.card__column-name--current):hover {
                --btn-background: color(from var(--column-color) srgb r g b / 0.15);

                color: var(--column-color);
            }
        }
    }

    .card__column-name--current {
        --btn-background: var(--card-color);

        color: var(--color-ink-inverted);

        @media (hover: hover) {
            &:hover {
                --btn-background: var(--card-color);
            }
        }
    }

    /* Executions column — always expanded
  /* -------------------------------------------------------------------------- */

    .cards--executions {
        .cards__expander {
            cursor: default;

            &:hover {
                filter: none;
            }
        }
    }

    /* Simple columns (no left/center/right zones)
  /* -------------------------------------------------------------------------- */

    .card-columns--simple {
        display: flex;
        gap: var(--column-gap);
        grid-template-columns: unset;
        overflow-x: auto;
        padding-inline: var(--column-gap);
        padding-block-end: var(--column-gap);

        .cards {
            flex-shrink: 0;
        }

        /* Mobile: stacked layout */
        @media (max-width: 639px) {
            flex-direction: column;
            overflow-x: hidden;
            padding-block-end: var(--column-gap);

            .cards {
                inline-size: auto;
            }

            .cards__list {
                align-items: stretch;
                margin: 0;
            }

            .cards__list .card {
                inline-size: auto;
            }

            .cards__new-column {
                margin-block-start: 0;
            }
        }

        /* Section action link at the bottom of each column */
        .cards__actions {
            padding: var(--column-padding-expanded);
            padding-block-start: 0;
        }
    }

    /* Board tools
     * Fizzy-style "Add a card" CTA card that lives at the top of the
     * Unzoned column.
     * ------------------------------------------------------------------------ */

    .board-tools.card {
        --border-color: var(--color-selected-dark, oklch(var(--lch-blue-light, 80% 0.05 255)));

        border: 1px solid var(--border-color);
        inline-size: auto;
        margin-block-end: var(--cards-gap);
        padding-block: var(--block-space);
        padding-inline: var(--card-padding-inline);
        text-align: center;

        .btn--link {
            font-size: 1.1em;
            inline-size: 100%;
            justify-content: center;
        }
    }
}