/* A record's own page: its credential, the buttons in a notch under it, and its history as a stream below. */

@layer components {
  .perma {
    --half-btn-height: 1.25rem;

    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  /* Credential
  /* ------------------------------------------------------------------------ */

  /* The credential gives the record's own body and footer their spacing, and makes room for the notch under its serial. */
  .perma > .credential {
    --card-border: 1px solid var(--color-ink-lighter);
    --card-padding-block: var(--block-space);

    margin-block-end: 0;

    &:has(+ .perma__notch--bottom) {
      padding-block-end: calc(var(--credential-padding) + 1lh + var(--half-btn-height));
    }
  }

  .card__body {
    /* The credential already is a surface, so a list on it is ruled lines, as on a record. */
    --rows-border-radius: 0;
    --rows-shadow: none;
    --rows-side-size: 0;

    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    min-inline-size: 0;
    padding-block: var(--credential-padding) var(--card-padding-block);

    /* The add link closing a list keeps a row's air, or the list's last line runs under it. */
    .rows__form {
      padding-block: calc(var(--block-space-half) * 0.75);
    }
  }

  .card__description {
    /* Lexical saves an empty description as <p><br></p>. */
    action-text-content p:only-child:has(br:only-child) {
      display: none;
    }
  }

  .card__footer {
    border-block-start: var(--card-border);
    padding-block-start: calc(var(--card-padding-block) * 0.75);
  }

  .card__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0;
    text-wrap: pretty;
  }

  .card__meta-text + .card__meta-text::before {
    content: "·";
    margin-inline: 0.5ch;
  }

  /* Notch
  /* ------------------------------------------------------------------------ */

  .perma__notch {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  /* buttons.css draws a labelled button with an icon as a circle, and hides its words on a phone; the notch has room for them at every width. */
  .perma__notch .btn--circle-mobile[aria-label] {
    --btn-padding: 0.5em 1.1em;
    --icon-size: var(--btn-icon-size, 1.3em);

    aspect-ratio: auto;
    block-size: auto;
    display: inline-flex;
    inline-size: auto;
    justify-content: center;
    white-space: nowrap;

    span:not(.icon) {
      display: inline;
    }
  }

  /* Overlap the card by half the button's height. A disabled button is translucent, so its form keeps the canvas behind it. */
  .perma__notch--bottom {
    margin-block-start: calc(-1 * var(--half-btn-height));

    form {
      background-color: var(--color-canvas);
      border-radius: 99rem;
    }
  }

  /* Stream
  /* ------------------------------------------------------------------------ */

  /* What happened to the record, oldest first under the card: answers as messages, the rest as lines between them. */
  .stream {
    --avatar-size: 2.33em;

    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 70ch;
  }

  .stream__more {
    align-self: center;
    margin-block-end: var(--block-space-half);
  }

  .stream__message {
    align-items: start;
    display: flex;
    gap: var(--inline-space);
  }

  .stream__avatar {
    margin-block-start: var(--block-space-half);
  }

  .stream__content {
    background-color: var(--color-ink-lightest);
    border-radius: 0.2em;
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25lh;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    padding: var(--block-space-half) var(--inline-space-double);
    text-decoration: none;

    @media (any-hover: hover) {
      &:is(a):hover .stream__byline strong {
        text-decoration: underline;
      }
    }

    @media (max-width: 639px) {
      padding-inline: 1.5ch;
    }
  }

  .stream__byline {
    align-items: baseline;
    column-gap: 0.5ch;
    display: flex;
    flex-wrap: wrap;

    time {
      color: var(--color-ink-dark);
      font-size: var(--text-small);
    }
  }

  .stream__text {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  .stream__activity {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    overflow-wrap: anywhere;
    padding-inline: var(--inline-space-double);
    text-align: center;
    text-wrap: balance;

    a {
      color: inherit;
      text-decoration: none;

      @media (any-hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}