/* Form treatment B — a record's values, typed where they are read. */
@layer components {
  /* ——— form treatment b · inline on the sheet (record attributes) ———
     Each value is its own one-field form (records/_attribute): the label as
     the dt, the field as the dd, side by side in the record's column — a
     list of properties, read down (crm-v2, the record page). At rest the
     field is plain text — its baseline is hidden and nothing draws it back,
     the caret is the whole mark (inputs.css, HANSHI Deviations). Hover raises
     the surface wash, the one hint that this can be typed into; an empty
     value is its prompt in ink-faint, never a dash. A sheet in the trash is
     `inert`, which stills every field without changing how one looks. */
  .attributes {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space-half) / 2);
    font-size: var(--text-small);

    /* A label beside a value of three lines stands at its first. */
    > * {
      display: grid;
      grid-template-columns: 6.5rem minmax(0, 1fr);
      align-items: start;
      column-gap: var(--inline-space);
    }

    /* ink-subtle, not faint: faint is 4.1 : 1 on paper, below the 4.5 : 1
       small text needs (the Overview's redesign, 2026-10-20). */
    dt {
      color: var(--color-ink-subtle);
    }

    dd {
      margin: 0;
      min-inline-size: 0;
      overflow-wrap: anywhere;

      /* A field is a flex item, which will not shrink below its longest
         word: one profile address ran out of the column. */
      > * {
        min-inline-size: 0;
      }
    }
  }

  /* The heading is one too (records/_sheet): the rename frame's metrics, no
     padding of its own, so the title stands where a title stands. */
  .inline-rename > .attribute {
    padding-block: 0;
  }

  .attribute {
    padding-block: calc(var(--block-space-half) / 2);
    padding-inline: var(--inline-space-half);
    margin-inline: calc(var(--inline-space-half) * -1);
    border-radius: var(--border-radius);

    &:hover {
      background-color: var(--color-surface);
    }

    /* The field is as wide as its words and no wider, so it never reads as a
       line across the row; a long text wraps, because it is a textarea one
       row tall that grows with the words (records/_input). */
    .input {
      inline-size: auto;
      max-inline-size: 100%;
      field-sizing: content;
      padding-block: 0;
      border-block-end-color: transparent;
      resize: none;
      text-overflow: ellipsis;
    }

    /* A long text reads six lines at rest and all of it once you type into
       it (crm-v2, the compact pass): an imported company's description ran
       half a column. */
    textarea.input:not(:focus) {
      max-block-size: 6lh;
      overflow: hidden;
    }

    /* A select with nothing chosen shows its prompt row, in the prompt's ink. */
    .input--select:has(option[value=""]:checked) {
      color: var(--color-ink-faint);
    }
  }

  /* In a record's column a value reads one line at rest, all of it once you
     type into it (the Overview's redesign, 2026-10-20): a profile's address
     wrapped into two and the column read cramped. Not the head's
     description, which is no row of these. */
  .attributes .attribute textarea.input:not(:focus) {
    max-block-size: 1lh;
    white-space: pre;
  }
}