@layer components {
  .cards {
    --block-space: 2cqi;
    --container-gap: var(--block-space);
    --container-padding: calc(var(--block-space) * 1.5);

    container-type: inline-size;
    padding: var(--block-space-half) 0;
    justify-content: start;

    :where(.card) {
      --block-space: 1em;
      --block-space-half: 0.5em;
      --card-size: calc(100% - (var(--container-padding) * 2) / 2);
      --text-xx-large: 2em;

      font-size: 1.8cqi;
      flex: 0 1 var(--card-size);
      inline-size: var(--card-size);
      margin: var(--block-space) auto calc(var(--block-space) * 1.5);
    }

    :is(.card--mini) {
      --text-xx-large: 1.6em;
      --text-small: 1.1em;

      aspect-ratio: unset;
      border: 1px solid var(--color-subtle) !important;
      line-height: 1.2;
      padding: 0;
      margin: var(--block-space) auto calc(var(--block-space) * 1.5);

      @media (prefers-color-scheme: dark) {
        border-color: var(--color-subtle-dark) !important;
      }

      .card__title {
        margin-block-start: 0.1em;
        min-block-size: 0;
      }

      .card__body {
        padding-inline: 0;

        .card--mini & {
          padding: 0 var(--inline-space-double) var(--block-space);
        }
      }

      .card__tags {
        font-size: var(--text-small);
      }
    }
  }

  .cards--columns {
    border-block: 1px solid var(--color-subtle);
    display: grid;
    grid-template-columns: repeat(2, 50%);
    margin: auto;
    max-inline-size: 100ch;
    padding-block: var(--block-space-half);

    .card {
      aspect-ratio: unset;
      z-index: unset;
    }
  }

  .card {
    --border-color: transparent;
    --border-radius: 0.2em;
    --border-size: 0;

    aspect-ratio: 2/0.95;
    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    max-inline-size: 75ch;
    z-index: 1;

    .card__container & {
      inline-size: calc(100dvw - var(--actions-inline-inset) * 2 - var(--btn-size) * 2);
    }

    .local-time-value {
      font-weight: bold;
    }

    .avatar {
      block-size: 2.75em;
      inline-size: 2.75em;
    }

    @media (prefers-color-scheme: dark) {
      --border-color: var(--color-subtle-dark);
      --border-size: 1px;
    }
  }

  .card--golden {
    --border-color: var(--color-bg) !important;

    background-color: var(--color-bg);
    background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
    box-shadow: 
      0 0 0.5em 0.2em var(--color-golden),
      0 0 1em 0.4em var(--color-golden) !important;
    outline: 1px solid var(--color-golden);
  }

  .card__actions {
    position: absolute;
    inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1);
    z-index: 0;

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

  .card__actions--right {
    inset: var(--actions-block-inset) calc(var(--actions-inline-inset) * -1) auto auto;
  }

  .card__actions-container {
    --border-radius: 6em;

    background-color: var(--color-bg);
    color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    margin-block: calc(var(--block-space) * -1.66) calc(var(--block-space) * 1.66);
    padding: calc(var(--block-space) * 0.75) calc(var(--block-space) * 0.66);
    position: relative;
    z-index: 0;

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

    .btn:not(.popup__item, .btn--plain, :has(input[type="radio"])) {
      --btn-background: var(--card-color);
      --btn-color: var(--color-ink-reversed);
    }

    .btn--plain {
      --btn-color: var(--card-color);

      text-decoration: underline;
    }

    .card__closure-message {
      color: var(--card-color);
    }

    &.card__actions-container--top {
      margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
      min-inline-size: 30ch;
  
      #header:has(&) {
        position: relative;
        z-index: 1;
      }

      .btn {
        --btn-border-color: var(--card-color);
        --btn-color: var(--card-color);

        text-align: center;

        &:has(input:checked)  {
          --btn-background: var(--card-color);
          --btn-color: var(--color-ink-reversed);
        }
      }
    }
  }

  .cards .card__assignees:not(:has(.avatar)) {
    .txt-uppercase {
      display: none;
    }
  }

  .card__background {
    inset: 0;
    position: absolute;
    z-index: -1;

    img {
      block-size: 100%;
      inline-size: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.2;
      transition: opacity 0.2s ease-in-out;
    }

    @media (hover: hover) {
      .card:hover & {
        img:not([src=""]) {
          opacity: 1;
        }
      }
    }
  }

  .card__body {
    padding-inline: var(--inline-space-double);
  }

  .card__body-header {
    flex: 2 1 75%;
    padding-block: var(--block-space);
  }

  .card__collection {
    background-color: var(--card-color);
    font-weight: 800;
    letter-spacing: 0.5ch;
    padding: var(--block-space-half) var(--inline-space-double);
  }

  .card-collection__filter {
    > button {
      --hover-size: 0;
    }
  }

  .card-column__filter {
    > button {
      --hover-size: 0;

      inline-size: auto;
      padding: 0 2em 0 0;
      margin-inline-start: 2em;
    }
  }

  .card-sorting__filter {
    inset: auto 50% calc(var(--btn-size) * -0.66);
    margin-inline-start: -1em;
    position: absolute;
    transform: translate(-50%, 50%);

    #header:has(&) {
      position: relative;
      z-index: 1;
    }
  }

  .card__container {
    --actions-block-inset: 1.5rem;
    --actions-inline-inset: 4rem;
    --padding-inline: calc(var(--block-space-double) + var(--block-space));
    --padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--block-space-half));

    background-color: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
    border-radius: 0.2em;
    display: inline-flex;
    margin-block: calc(var(--block-space) * -1) calc(var(--block-space) * -0.33);
    padding: var(--padding-block) var(--padding-inline);
  }

  .card__container--pointing {
    --arrow-size: 20em;
    --aspect-ratio: 7;

    position: relative;
    margin-block-end: calc(var(--arrow-size) / var(--aspect-ratio));

    &::after {
      aspect-ratio: var(--aspect-ratio);
      background: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
      clip-path: polygon(50% 100%, 100% 0, 0 0);
      inline-size: var(--arrow-size);
      content: "";
      display: block;
      inset-block-start: 99%;
      inset-inline-start: 50%;
      position: absolute;
      transform: translateX(-50%);
      z-index: -1;
    }
  }

  .card__delete-btn {
    .cards & {
      display: none;
    }
  }

  .card__footer {
    margin-block-end: var(--block-space);
  }

  .cards--grid {
    --block-space: 2cqi;
    --container-gap: var(--block-space-double);
    --container-padding: calc(var(--block-space) * 1.5);

    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: var(--container-gap);
    inline-size: 100%;
    margin: 0 auto;
    max-inline-size: 120ch;
    padding: var(--container-padding);
    place-content: center;
    position: relative;
    z-index: 0;

    .card {
      --block-space: 1em;
      --block-space-half: 0.5em;
      --card-size: calc(100% - (var(--container-padding) * 2) / 2);
      --text-xx-large: 1.8em;

      block-size: 50%;
      font-size: 3cqi;
      flex: 0 0 var(--card-size);
      inline-size: var(--card-size);
      z-index: 0;
    }

    .card__meta,
    .card__stages {
      display: none;
    }

    @media (min-width: 1ch) {
      --block-space: 1cqi;
      --container-gap: calc(var(--block-space) * 2);
      --container-padding: calc(var(--block-space) * 2.5);

      .card {
        --card-size: calc(50% - var(--container-gap) - (var(--container-padding) * 2) / 4);
        --text-xx-large: 1.6em;

        font-size: 1.5cqi;
      }

      .card__footer,
      .card__header,
      .card__stages {
        font-size: 0.85em;
      }
    }

    @media (min-width: 120ch) {
      --block-space: 0.9cqi;
      --container-gap: calc(var(--block-space) * 2);
      --container-padding: calc(var(--block-space) * 2.5);

      .card {
        --card-size: calc(33% - var(--container-gap) / 2 - (var(--container-padding) * 2) / 6);
        --text-xx-large: 1.8em;

        font-size: 1cqi;
      }

      .card__footer,
      .card__header,
      .card__stages {
        font-size: 0.85em;
      }
    }
  }

  .card__header {
    padding-inline-end: var(--inline-space);
  }

  .card__hide-on-index {
    .cards &,
    .cards--grid & {
      display: none;
    }
  }

  .card__link {
    --hover-size: 0;

    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;

    .cards &,
    .cards--grid & {
      z-index: 1;
    }
  }

  .card__meta {
    --border-color: var(--card-color);
    --border-size: 1px;
    --row-gap: 0.25em;

    margin-inline: var(--inline-space-double);

    strong {
      font-weight: 900;
    }

    .separator {
      height: calc(2lh + 2ex);
    }

    .card--mini & {
      margin-inline-start: 0;
    }
  }

  .card__move-button {
    --btn-background: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));

    margin-block-start: calc(var(--block-space) * 1.2);
    margin-inline-end: calc(var(--inline-space) * -4);
    padding-inline-end: var(--inline-space);
  }

  .card__stages {
    flex: 1 1 25%;
  }

  .card__tag {
    color: var(--card-color);
    font-weight: 700;
  }

  .card__tags {
    color: var(--card-color);
  }

  .card__title {
    --hover-size: 0;
    --input-border-radius: 0;

    font-size: var(--text-xx-large);
    font-weight: 900;
    line-height: 1.1;
    min-block-size: 3lh;
    text-wrap: balance;

    .cards & {
      pointer-events: none;
    }

    .card__title-field {
      &:is(textarea) {

        &::placeholder {
          color: inherit;
          opacity: 0.5;
        }
      }
    }

    .card__title-link {
      --lines: 3;

      color: inherit;
    }
  }

  .input.boost__input {
    --hover-size: 0;
    --input-border-radius: 0;
    --input-border-size: 0;
    --input-padding: 0;
    --outline-size: 0;

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    inline-size: min-content;
    max-inline-size: 3ch;
    min-inline-size: 1ch;
    outline: none;

    @supports (field-sizing: content) {
      field-sizing: content;
      max-inline-size: unset;
    }

    &:focus {
      background-color: var(--color-highlight);
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .card__closed {
    align-items: center;
    aspect-ratio: 7/4;
    border: var(--block-space-half) solid var(--card-color);
    position: absolute;
    inset: auto var(--block-space) var(--block-space-double) auto;
    justify-content: space-between;
    padding: var(--block-space-half) calc(var(--inline-space) * 1.5);
    transform: rotate(-10deg);
    z-index: -1;
  }

  .card__closed-by {
    border-block-end: 1px dashed currentcolor;
  }

  .card__closed-title {
    color: var(--color-ink-reversed);
    font-size: var(--text-rel-large);
    font-weight: 900;
    text-shadow:
     -2px -2px 0 var(--card-color),
      2px -2px 0 var(--card-color),
     -2px 2px 0 var(--card-color),
      2px 2px 0 var(--card-color);
  }
}