/* F8 customer card: the card, the personal QR and the customer's movements. StampProgress is in stamps.css. */
@layer components {
  .customer {
    inline-size: 100%;
    max-inline-size: 26rem;
    margin-inline: auto;

    & .button_to { display: grid; } /* a button_to's button spans the column, like a form's */

    /* On a phone the pile's tilted backs reach past the screen on a tall card (one with an
       alert). There the pile spans the page gutter and clips sideways, so the cut falls on the
       screen's edge, out of sight, and the tilt still shows above and below. */
    @media (max-width: 32rem) {
      & > .pile {
        overflow-x: clip;
        margin-inline: calc(-1 * var(--inline-space-double));
        padding-inline: calc(2 * var(--inline-space-double));
      }
    }
  }

  .loyalty-card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space-double) calc(var(--inline-space) * 3);
    color: var(--color-text-reversed);
    background: var(--color-link);
    --focus-ring: 2px solid var(--color-text-reversed); /* the violet ring would vanish on the card */
    border-radius: var(--radius-large);

    & p { margin: 0; }
    & .flash { color: var(--color-text); } /* text on a tint is always --color-text */
  }

  .loyalty-card__business { font-weight: 700; }

  .loyalty-card__reward { font-size: var(--text-large); font-weight: 700; color: #fff; } /* the prize, white on violet in either mode */

  .loyalty-card__conditions { font-size: var(--text-x-small); }

  .loyalty-card__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
    margin: 0;
    padding: var(--block-space);
    color: #1b1828; /* the code sits on white in either mode, so any scanner reads it */
    background: #fff;
    border-radius: var(--radius);
    text-align: center;

    /* "Tu QR", the words staff ask with, set like a headline in the logo's violet. Fixed colours:
       the block is white in either mode. */
    & figcaption {
      font-size: 2.75rem;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.05em;
      color: #6448e8;
    }

    /* The wrapper takes the size, so the code centres; sized on the svg alone, the wrapper kept its
       full width. Its corners are a viewfinder's, in the same violet: this is the thing to scan. */
    & [role="img"] {
      position: relative;
      inline-size: min(100%, 16rem); /* no padding: the code's own quiet zone keeps it off the corners */

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border: 0.2rem solid #6448e8;
        border-radius: var(--radius);
        mask: conic-gradient(at 1.75rem 1.75rem, transparent 75%, #000 0) 0 0 / calc(100% - 1.75rem) calc(100% - 1.75rem);
        pointer-events: none;
      }
    }
    & svg { display: block; inline-size: 100%; block-size: auto; }
  }

  /* The customer's movements as a timeline, after kirupa.com: a dashed rail through badges that
     carry the logo's ring, its tick pointing the way the movement went. Newest on top. */
  .card-movements {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin: 0;
    padding: 0;
    list-style: none;

    &::before {
      content: "";
      position: absolute;
      inset-block: 1.25rem;
      inset-inline-start: calc(1.25rem - 1px);
      border-inline-start: 2px dashed var(--color-border-strong);
    }
  }

  .card-movements__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--inline-space-double);
    align-items: center;

    & > :not(.card-movements__icon) { grid-column: 2; }
    & span, & small { font-size: var(--text-small); }
    & span { color: var(--color-subtle); }
  }

  .card-movements__icon {
    position: relative; /* above the rail */
    grid-row: 1 / span 3;
    align-self: start;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 0.25rem var(--color-bg); /* a gap in the rail around each badge */

    & .ring { inline-size: 1.75rem; transition: none; }
  }

  /* The owner's audit trail (movements/_table), the same timeline in a table: the badge column
     carries a dashed rail from row to row, through the middle of each badge. */
  .movements {
    font-size: var(--text-small);

    & td { padding-block: var(--block-space); }
    & tbody tr:hover { background: none; }
  }

  .movement__icon {
    position: relative;
    inline-size: 3.5rem;

    /* The rail: a segment per row, from the row above to the row below. */
    &::before {
      content: "";
      position: absolute;
      inset-block: -1px;
      inset-inline-start: calc(1.25rem - 1px);
      border-inline-start: 2px dashed var(--color-border-strong);
    }

    tr:first-child > &::before { inset-block-start: 50%; }
    tr:last-child > &::before { inset-block-end: 50%; }
  }

  .movements td.movement__icon { border-block-end-color: transparent; } /* the rules start after the rail */

  .movement__badge {
    position: relative; /* above the rail */
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 0.25rem var(--color-bg); /* a gap in the rail around each badge */

    & .ring { inline-size: 1.75rem; transition: none; }
  }

  .movement--accrual .movement__badge { color: var(--color-text-on-reward); background: var(--color-reward); }
  .movement--reversal .movement__badge { color: var(--color-negative); background: var(--color-negative-tint); }
  .movement--reversal .ring { --ring-turn: -123deg; }
  .movement--redemption .movement__badge { color: var(--color-link); background: var(--color-link-tint); }
  .movement--redemption .ring { --ring-turn: -33deg; }

  .movement__what {
    white-space: nowrap;

    & strong { display: block; font-size: var(--text-normal); }
    & small { color: var(--color-subtle); }
  }

  .movement__customer a { font-weight: 600; }
  .movement__where, .movement__detail { color: var(--color-subtle); }
  .movement__detail { text-align: end; }

  .card-movements__item--accrual .card-movements__icon { color: var(--color-text-on-reward); background: var(--color-reward); }
  .card-movements__item--reversal .card-movements__icon { color: var(--color-negative); background: var(--color-negative-tint); }
  .card-movements__item--reversal .ring { --ring-turn: -123deg; }
  .card-movements__item--redemption .card-movements__icon { color: var(--color-link); background: var(--color-link-tint); }
  .card-movements__item--redemption .ring { --ring-turn: -33deg; }

  /* C1: the card tilts away as it scrolls out, tied to scroll, not time. Staff scan the QR on it,
     so it is flat for as long as it is in view and only turns while leaving. Decoration: no
     support or reduced motion means a flat card. Transform only, so it stays on the compositor. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .loyalty-card {
        transform-origin: 50% 100%;
        animation: loyalty-card-tilt linear both;
        animation-timeline: view();
        animation-range: exit 40% exit 100%;
      }
    }
  }

  @keyframes loyalty-card-tilt {
    to { transform: perspective(60rem) rotateX(12deg) rotateZ(-2deg); }
  }
}