@layer components {
  .record {
    --rows-bg: var(--color-ink-lightest);

    background-color: var(--color-canvas);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin-block-end: var(--block-space);
    padding: var(--block-space-double);

    @media (width < 640px) {
      padding: var(--block-space);
    }

    @media print {
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
    }

    @media (width >= 800px) {
      padding-inline: calc(var(--block-space-double) + var(--block-space));
    }

    /* The list is named: rows.css sorts later and sets a margin of its own. */
    > *,
    > .rows {
      margin-block: 0;
    }
  }

  .record__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    min-inline-size: 0;
    text-align: center;
  }

  .record__title {
    font-size: var(--text-large);
    font-weight: 800;
    letter-spacing: -0.024em;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;

    @media (width >= 640px) {
      font-size: var(--text-x-large);
    }
  }

  .record__byline {
    --avatar-size: 1.5rem;

    align-items: center;
    color: var(--color-ink-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    justify-content: center;
    margin: 0;
    overflow-wrap: anywhere;

    .record__byline-name {
      color: var(--color-ink);
    }

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

  /* Fields the sheet no longer takes: what they hold stays readable, and they are plainly shut. */
  .record__fields:disabled .input {
    --input-background: var(--color-ink-lightest);
    --input-border-color: var(--color-ink-lightest);
    --input-color: var(--color-ink-dark);

    cursor: not-allowed;

    &::placeholder {
      color: transparent;
    }
  }

  .same-file__summary {
    cursor: pointer;

    .same-file[open] > & {
      margin-block-end: var(--block-space-half);
    }
  }

  .same-file__count {
    color: var(--color-link);
    text-decoration: underline;
  }

  .same-file__caret {
    font-size: 1ch;
    rotate: -90deg;
    transition: rotate var(--duration-medium) ease-out;

    .same-file[open] & {
      rotate: 0deg;
    }
  }

  /* The sheet is the only container: what it holds sits straight on it, set apart by space and hairlines,
     never by a second fill. */
  .record:not(.record--boxed) {
    /* A row can sit in a turbo-frame of its own, so each row draws the line over it and the list closes the last. */
    .rows:not(.library__rows, .suggestions__list *) {
      background: none;
      border-radius: 0;
      padding: 0;

      &:has(.row:not([hidden]), .rows__form) {
        border-block-end: var(--border);
      }

      :is(&, & > turbo-frame) > :is(.row, .rows__form) {
        border-radius: 0;
        padding-inline: calc(var(--depth, 0) * var(--inline-space-double)) 0;
      }

      :is(&, & > turbo-frame) > .row,
      :is(&, & > turbo-frame) > .rows__form:has(> :not(turbo-frame), > turbo-frame > *) {
        border-block-start: var(--border);
      }

      /* The fill reaches past the lines, so the text and the buttons at a row's ends keep their air. */
      @media (any-hover: hover) {
        :is(&, & > turbo-frame) > .row:has(> a.row__body:hover, > form > button.row__body:hover) {
          box-shadow: calc(-1 * var(--inline-space)) 0 var(--color-ink-lightest), var(--inline-space) 0 var(--color-ink-lightest);
        }
      }

      .step__editor {
        border: 0;
        margin-inline: 0;
        padding-inline: 0;
      }
    }

    .library__rows {
      background: none;
      padding: 0;
    }

    .library__row {
      gap: var(--inline-space);
      padding-inline: 0;

      &:first-child {
        padding-block-start: 0;
      }

      &:last-child {
        padding-block-end: 0;
      }
    }

    .library__thumb {
      justify-items: start;
    }
  }

  /* What an answer has to meet, as lines on the sheet: a quiet dot, or the reading's mark over its evidence. */
  .conditions {
    --icon-size: 1.25em;

    display: flex;
    flex-direction: column;
    font-size: var(--text-small);
    gap: var(--block-space-half);
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

    .conditions__title {
      font-weight: 600;
    }

    .icon {
      margin-block-start: calc((1lh - var(--icon-size)) / 2);
    }
  }

  .conditions__line--unmet .conditions__title {
    color: var(--color-error-text);
  }

  .conditions__dot {
    background-color: var(--color-ink-medium);
    block-size: 0.3em;
    border-radius: 50%;
    flex: none;
    inline-size: 0.3em;
    margin: calc((1lh - 0.3em) / 2) calc((var(--icon-size) - 0.3em) / 2) 0;
  }

  .conditions__body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .record--stacked {
    inline-size: 100%;
    margin-block-end: 0;
    min-inline-size: 0;

    /* The panel spaces what it holds, so nothing inside stacks its own margins on top of that gap. */
    :is(.rows, .details) {
      margin-block: 0;
    }

    > .btn {
      align-self: start;
    }
  }
}