/* Card and what sits in one: the setup checklist, definition lists, the logo preview. */
@layer components {
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 3); /* Figma: 20 / 24 */
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    & > * { margin: 0; }
  }

  /* The setup checklist as a numbered index, after huyml.co: rules between rows, the number as
     the mark, the whole row a link. A step done is crossed out and its number turns green. */
  .checklist, .shortcuts { /* shortcuts: staff's home, the same index with one entry */
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--color-border-strong);

    & li {
      position: relative;
      display: grid;
      grid-template-columns: clamp(2.5rem, 1rem + 4vw, 4.5rem) minmax(0, 1fr);
      align-items: center;
      gap: var(--inline-space-double);
      padding-block: var(--block-space-double);
      font-size: clamp(var(--text-medium), 0.9rem + 1.2vw, var(--text-x-large));
      border-block-end: 1px solid var(--color-border-strong);
      transition: padding var(--duration-flip) var(--ease-out-back);

      &:has(a:hover) { padding-inline-start: var(--inline-space-double); }
    }

    & a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--inline-space-double);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--color-text);
      text-decoration: none;
      background: none; /* no drawn underline: the row is the link (base.css) */

      &::after { content: ""; position: absolute; inset: 0; } /* the whole row is the link */
      &:hover { color: var(--color-link); }
      & .ring { font-size: var(--text-medium); color: var(--color-link); }
    }

    & li:has(.checklist__mark--done) a {
      color: var(--color-subtle);
      text-decoration: line-through 0.12em;
    }
  }

  .checklist__mark {
    font-weight: 400;
    color: var(--color-subtle);
    font-variant-numeric: tabular-nums;

    &.checklist__mark--done { color: var(--color-positive); }
  }

  /* A short list kept as a table (its columns still mean something) but read like the home's
     index: numbered by a counter, the first cell big, the whole row the link, the ring at its end. */
  .table--index {
    counter-reset: row;
    font-size: var(--text-normal);

    & thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    & tbody tr:first-child > * { border-block-start: 1px solid var(--color-border-strong); }
    & td { padding-block: var(--block-space-double); border-block-end-color: var(--color-border-strong); color: var(--color-subtle); }
    & tbody tr { position: relative; counter-increment: row; }
    & tbody tr:hover { background: none; }

    & td:first-child {
      font-size: clamp(var(--text-medium), 0.9rem + 1.2vw, var(--text-x-large));
      transition: padding var(--duration-flip) var(--ease-out-back);

      &::before {
        content: counter(row, decimal-leading-zero);
        display: inline-block;
        inline-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
        font-weight: 400;
        color: var(--color-subtle);
        font-variant-numeric: tabular-nums;
      }
    }

    & td:first-child a {
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--color-text);
      text-decoration: none;
      background: none;

      &::after { content: ""; position: absolute; inset: 0; } /* the whole row is the link */
    }

    & td:last-child::after {
      content: "";
      float: inline-end;
      inline-size: 1.25rem;
      aspect-ratio: 1;
      background: var(--color-link);
      mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
      rotate: 57deg;
      transition: rotate var(--duration-flip) steps(3);
    }

    & tbody tr:hover td:first-child { padding-inline-start: var(--inline-space-double); }
    & tbody tr:hover a { color: var(--color-link); }
    & tbody tr:hover td:last-child::after { rotate: 147deg; }
  }

  /* A table whose rows open in place, after Otter's FAQ: each row is a grid, the details cell
     drops to a full-width line under it. The toggle covers the row, so a click anywhere opens it;
     the name's link sits above it and still goes to the customer. */
  .table--disclosure {
    font-size: var(--text-normal);

    & tr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.5rem;
      align-items: center;
    }

    & tbody tr { position: relative; border-block-end: 1px solid var(--color-border); }
    & th, & td { border: 0; }
    & thead tr { border-block-end: 1px solid var(--color-border); }
    & td:first-child a { position: relative; z-index: 1; font-weight: 600; }
  }

  /* button. outranks the global button face (buttons.css), which this glyph does not want. */
  button.disclosure__toggle {
    position: static;
    min-block-size: 0;
    scale: none !important;
    justify-self: end;
    inline-size: 1.5rem;
    aspect-ratio: 1;
    padding: 0;
    color: var(--color-subtle);
    background: none;
    border: 0;

    &::after { content: ""; position: absolute; inset: 0; } /* the whole row toggles */

    /* The plus: two bars; open, the upright one lies down and it reads as a minus. */
    &::before {
      content: "";
      position: static;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      border: 0;
      border-radius: 0;
      animation: none !important;
      background:
        linear-gradient(currentColor 0 0) center / 0.875rem 1.5px no-repeat,
        linear-gradient(currentColor 0 0) center / 1.5px 0.875rem no-repeat;
      transition: rotate var(--duration-flip) var(--ease-out-back);
    }

    &[aria-expanded=true]::before {
      background: linear-gradient(currentColor 0 0) center / 0.875rem 1.5px no-repeat;
      rotate: 180deg;
    }

    tr:hover & { color: var(--color-link); }
  }

  .disclosure__panel {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--block-space) var(--inline-space-double);
    padding-block: 0 var(--block-space);
    color: var(--color-subtle);
    font-size: var(--text-small);

    &[hidden] { display: none; }
  }

  .disclosure__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-weight: 600;
    text-decoration: none;
    background: none;
  }

  /* Split: a card on its pile, and beside it the facts about it (Campaña, a customer). Stacked on
     a phone. */
  .split {
    display: grid;
    gap: var(--block-space-double) calc(var(--inline-space) * 6);
    align-items: center;

    @media (min-width: 56rem) { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  }

  /* Facts: a definition list in the editorial voice, one ruled row each, the term small and grey
     over its value. */
  .facts {
    margin: 0;
    border-block-start: 1px solid var(--color-border);

    & > div {
      display: grid;
      gap: 0.125rem;
      padding-block: var(--block-space);
      border-block-end: 1px solid var(--color-border);
    }

    & dt { font-size: var(--text-small); font-weight: 700; color: var(--color-subtle); }
    & dd { margin: 0; font-size: var(--text-medium); font-weight: 600; }
    & p { margin: 0; }
  }

  .details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--block-space-half) var(--inline-space-double);
    margin: 0;
    font-size: var(--text-small);

    & dt { color: var(--color-subtle); font-weight: 600; }
    & dd { margin: 0; }
  }

  .logo-preview {
    max-block-size: 5rem;
    inline-size: auto;
    border-radius: var(--radius);
  }
}