/* Form treatment B — a record's attributes, which are never a form. */
@layer components {
  /* ——— form treatment b · inline on the sheet (record attributes) ———
     a record's attributes are never a form. at rest a value is plain text;
     hover raises a soft wash — the only hint it can be typed into — and the
     shu baseline appears under the value alone, no box ever. the record page
     writes each pair as <dt>/<dd>, so the wash has to span two elements: the
     label carries the top corners, the value the bottom ones, and hovering the
     value lights both. between-row rhythm stays with `.attributes dd` in
     crm.css (modules), which outranks this layer either way. */
  .attribute,
  .attributes > dt,
  .attributes > dd {
    padding-inline: var(--inline-space);
    margin-inline: calc(var(--inline-space) * -1);
  }

  .attributes > dt {
    padding-block-start: var(--block-space-half);
    border-start-start-radius: var(--border-radius);
    border-start-end-radius: var(--border-radius);
  }

  .attributes > dd {
    padding-block-end: var(--block-space-half);
    border-end-start-radius: var(--border-radius);
    border-end-end-radius: var(--border-radius);
  }

  .attribute {
    padding-block: var(--block-space-half);
    border-radius: var(--border-radius);

    .label {
      margin-block-end: 0;
    }
  }

  .attribute:hover,
  .attributes > dd:hover,
  .attributes > dt:has(+ dd:hover) {
    background-color: var(--color-surface);
  }


  /* an empty attribute is an em-dash in ink-faint, never a blank */
  .attribute .empty,
  .attributes .empty {
    color: var(--color-ink-faint);
  }

  /* typing in place: the wash is the affordance, so the resting baseline is
     hidden and shu draws it only while the value is being edited — under the
     value, not across the row, which is why the field stops filling it. */
  .attribute .input,
  .attributes .input {
    inline-size: auto;
    border-block-end-color: transparent;

    &:focus-visible {
      border-block-end-color: var(--color-accent);
    }
  }
}