@layer components {
  /* Action Board — Fizzy's card-columns + cards CSS
  /* ======================================================================== */

  /* Contain horizontal overflow on board pages — Fizzy pattern */
  main:has(.action-board) {
    overflow-x: hidden;
  }

  /* Board container — Fizzy's .card-columns adapted for 3 fixed columns
  /* ------------------------------------------------------------------------ */

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

    container-type: inline-size;
    display: grid;
    gap: var(--column-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--main-width);
    min-block-size: 40vh;
    outline: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: var(--column-gap);

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

    /* Mobile: collapsible columns — Fizzy's exact pattern
     * Expanded column fills remaining space after 2 collapsed (40px) columns + gaps + padding */
    @media (max-width: 639px) {
      --column-width-expanded: calc(100vw - var(--column-width-collapsed) * 2 - var(--column-gap) * 6);

      grid-template-columns: auto auto auto;
      padding-inline: calc(var(--column-gap) * 2);
    }
  }

  /* Column — Fizzy's .cards
  /* ------------------------------------------------------------------------ */

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

    outline: none;
    position: relative;
    scroll-snap-align: center;

    &.is-expanded {
      @media (max-width: 639px) {
        inline-size: var(--column-width-expanded);
        overflow: hidden;
      }
    }

    &.is-collapsed {
      @media (max-width: 639px) {
        inline-size: var(--column-width-collapsed);
      }

      .card, .blank-slate {
        @media (max-width: 639px) {
          display: none;
        }
      }
    }
  }

  /* Transition container — Fizzy's .cards__transition-container */
  .action-board .cards__transition-container {
    block-size: 100%;
    border-radius: calc(var(--column-width-collapsed) / 2);

    /* Drag hover state — Fizzy's exact pattern */
    .drag-and-drop__hover-container & {
      background-color: var(--column-color);
      outline: 2px dashed var(--card-color);
      outline-offset: -2px;
      transition: background-color 200ms;
      z-index: 1;
    }

    /* Mobile expanded: flex column so cards list can scroll */
    @media (max-width: 639px) {
      .is-expanded & {
        display: flex;
        flex-direction: column;
      }
    }
  }

  /* Card list — Fizzy's .cards__list */
  .action-board .cards__list {
    display: flex;
    flex-direction: column;
    gap: var(--cards-gap);
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--column-padding);

    .is-expanded & {
      @media (max-width: 639px) {
        flex: 1;
        gap: 0.75rem;
        padding-inline: calc(var(--column-padding) / 4);
      }
    }

    &:has(.card) .blank-slate {
      display: none;
    }
  }

  /* Column header — Fizzy's .cards__expander
  /* ------------------------------------------------------------------------ */

  .action-board .cards__expander {
    --gradient-direction: to bottom;

    align-items: center;
    background: none;
    border: none;
    border-radius: 99rem;
    color: inherit;
    cursor: default;
    display: flex;
    flex-direction: row-reverse;
    font-family: inherit;
    font-size: var(--text-x-small);
    font-weight: 600;
    gap: 0.5ch;
    justify-content: center;
    outline: none;
    padding: 0.75em var(--column-padding);
    position: relative;
    text-transform: uppercase;

    @media (max-width: 639px) {
      cursor: pointer;
    }

    /* Progress gradient — Fizzy's exact pattern */
    &:after {
      background: linear-gradient(var(--gradient-direction), var(--card-color), var(--column-color) 80%);
      block-size: var(--column-width-collapsed);
      border-radius: 99rem;
      content: "";
      inset: 0 0 auto;
      margin-inline: auto;
      max-block-size: var(--progress-max-height);
      min-block-size: var(--column-width-collapsed);
      opacity: 0;
      position: absolute;
      z-index: -1;
    }

    /* Collapsed state — Fizzy's vertical tab */
    .cards.is-collapsed & {
      block-size: 100%;
      flex-direction: column;
      inline-size: var(--column-width-collapsed);
      justify-content: start;
      letter-spacing: 0.05em;

      /* Guitar string */
      &:before {
        background-color: var(--column-color);
        block-size: 100%;
        content: "";
        inline-size: 1px;
        inset-block: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)) 0;
        position: absolute;
        z-index: -2;
      }

      &:after {
        block-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment));
        max-block-size: none;
        opacity: 1;
        inline-size: var(--column-width-collapsed);
      }
    }

    /* Expanded state */
    .cards.is-expanded & {
      inline-size: 100%;
      justify-content: center;
    }
  }

  .action-board .cards__expander-title {
    font-weight: inherit;
    font-size: inherit;
    line-height: var(--column-width-collapsed);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* Collapsed: vertical text — Fizzy's exact pattern */
    .cards.is-collapsed & {
      max-inline-size: 50vh;
      writing-mode: vertical-rl;
    }

    /* Expanded: horizontal with flex */
    .cards.is-expanded & {
      align-items: center;
      display: flex;
      gap: 0.25ch;
      max-inline-size: calc(100% - var(--column-width-collapsed) * 2);
    }

    /* Collapse icon — Fizzy's exact pattern */
    .icon--collapse {
      --icon-size: 1.15em;

      opacity: 0.66;
      transition: 150ms ease-out;
      transition-property: opacity, scale;

      @media (min-width: 640px) {
        opacity: 0;
        scale: 1.5;
      }

      .cards.is-collapsed & {
        display: none;
      }

      .cards.is-expanded .cards__expander:hover & {
        opacity: 0.66;
        scale: 1;
      }
    }
  }

  .action-board .cards__expander-count {
    line-height: var(--column-width-collapsed);
    inline-size: var(--column-width-collapsed);
    text-align: center;

    /* Hide count when expanded — Fizzy pattern */
    .cards.is-expanded & {
      display: none;
    }
  }

  /* Disable transitions during state restoration — Fizzy pattern */
  .action-board .card-columns.no-transitions,
  .action-board .card-columns.no-transitions * {
    transition: none !important;
  }

  /* Card — Fizzy's .card (inherits --card-color from column)
  /* ------------------------------------------------------------------------ */

  .action-board .cards .card {
    --card-padding-inline: 1em;
    --card-padding-block: 1em;
    --border-radius: 0.2em;

    background-color: var(--card-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    cursor: grab;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    padding: var(--card-padding-block) var(--card-padding-inline);
    position: relative;
    text-align: start;
    z-index: 1;

    /* Fizzy's responsive font — scales with container width */
    font-size: clamp(0.6rem, 0.85cqi, 100px);

    html[data-theme="dark"] & {
      box-shadow: 0 0 0 1px var(--color-ink-lighter);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        box-shadow: 0 0 0 1px var(--color-ink-lighter);
      }
    }
  }

  /* Dragged card state */
  .action-board .card.drag-and-drop__dragged-item {
    cursor: grabbing;
    opacity: 0.5;
  }

  /* Card header — Fizzy's .card__header + .card__board */
  .action-board .card__header {
    align-items: center;
    display: flex;
    gap: 1ch;
    margin-block-start: calc(-1 * var(--card-padding-block));
    margin-inline: calc(-1 * var(--card-padding-inline)) calc(-0.5 * var(--card-padding-inline));
    min-inline-size: 0;
  }

  .action-board .card__board {
    align-items: center;
    align-self: start;
    background-color: var(--card-color); /* Inherits column color — changes on drag! */
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-weight: 600;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding-block: 0.25lh;
    padding-inline: var(--card-padding-inline) 1ch;
    transition: background-color 100ms ease-out;
  }

  .action-board .card__board-name {
    border-inline-start: 1px solid color-mix(in hsl, transparent 75%, currentColor);
    color: currentColor;
    display: flex;
    margin-inline-start: 1ch;
    min-inline-size: 0;
    padding-inline-start: 1ch;
    text-transform: uppercase;
  }

  /* Card body — Fizzy's .card__body */
  .action-board .card__body {
    display: flex;
    flex-grow: 1;
    inline-size: 100%;
    padding-block: calc(var(--card-padding-block) * 0.75) var(--card-padding-block);
  }

  .action-board .card__content {
    color: var(--card-content-color);
    flex: 2 1 auto;
    max-inline-size: 100%;
  }

  .action-board .card__title {
    color: var(--card-content-color);
    font-size: 1.6em;
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
    pointer-events: none;
    text-wrap: balance;
  }

  .action-board .card__link {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
  }

  /* Card footer — Fizzy's .card__meta */
  .action-board .card__meta {
    align-items: center;
    color: var(--card-text-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 1em;
    font-weight: 600;
    gap: 0.75ch;
    text-transform: uppercase;
  }

  .action-board .card__meta .card__meta-text {
    align-items: center;
    border: none;
    display: inline-flex;
    gap: 0.3ch;
    padding: 0;
    white-space: nowrap;
  }

  .action-board .card__meta .card__meta-text + .card__meta-text {
    border-inline-start: 1px solid var(--card-text-color);
    margin-inline-start: 0.75ch;
    padding-inline-start: 0.75ch;
  }

  .action-board .card__meta-text--overdue {
    color: oklch(var(--lch-red-medium));
    font-weight: 700;
  }

  /* Steps icon inside meta — exact same size as text for alignment */
  .action-board .card__meta .steps__icon {
    block-size: 1em;
    inline-size: 1em;
  }

  /* Done column — Fizzy's .cards--closed
  /* ------------------------------------------------------------------------ */

  .action-board .cards--closed {
    --card-color: var(--color-action-complete) !important;

    .card__board {
      background-color: var(--color-action-complete);
    }

    .steps__icon {
      background-color: var(--color-action-complete);
    }
  }

  /* Blank slate — Fizzy's exact pattern
  /* ------------------------------------------------------------------------ */

  .action-board .blank-slate {
    border-radius: 0.5ch;
    border: 2px dashed var(--color-ink-lighter);
    color: var(--color-ink-dark);
    font-weight: 500;
    margin-block-start: 2dvh;
    padding: 1.5ch 2ch;
    rotate: -3deg;
    text-align: center;
  }

  .action-board .blank-slate--drag {
    background-color: color-mix(in srgb, transparent, var(--card-color) 5%);
    border-color: color-mix(in srgb, transparent, var(--card-color) 10%);
    color: color-mix(in srgb, transparent, var(--card-color) 75%);
    margin-block-start: 0;
    rotate: 0deg;
  }

  /* Desktop: show drag-friendly blank slate; Mobile: show default */
  .action-board [data-controller~="drag-and-drop"] .cards__list {
    @media (max-width: 639px) {
      .blank-slate--drag { display: none; }
    }

    @media (min-width: 640px) {
      .blank-slate--default { display: none; }
    }
  }

  /* Cancelled list below board
  /* ------------------------------------------------------------------------ */

  .action-board__cancelled {
    margin-block-start: 1rem;
    max-inline-size: var(--main-width);
    margin-inline: auto;
    padding-inline: var(--column-gap, 8px);

    @media (max-width: 639px) {
      padding-inline: calc(var(--column-gap, 8px) * 2);
    }

    .card {
      cursor: default;
      opacity: 0.5;
    }
  }

  /* Filter bar
  /* ------------------------------------------------------------------------ */

  .action-board .filters {
    margin-block-end: 1rem;
    max-inline-size: var(--main-width);
    margin-inline: auto;
    padding-inline: var(--column-gap, 8px);

    @media (max-width: 639px) {
      padding-inline: calc(var(--column-gap, 8px) * 2);
    }

    .quick-filter {
      display: block;
      min-inline-size: 0;
    }

    /* Ensure filter buttons have enough width for their label */
    .input--select {
      min-inline-size: max-content;
    }
  }
}