/* ─────────────────────────────────────────────────────────────────────────
   FIELD BLOCK — a bordered group of fields with a title, help text and one
   right-aligned meta slot.

     .field-block               the block
     .field-block--interactive  click-to-edit affordance (cursor + hover)
     .field-block__head         title/help stack on the left, __meta right
     .field-block__title        the group title
     .field-block__help         the group help text
     .field-block__meta         right-aligned slot: holds a chip or a count
     .field-block__count        the count pill the class panel puts in that slot
     .field-block__body         the block's content

   Two surfaces draw the same `info_field_groups`, one level apart: the class
   panel lists a group's field *definitions*, and a holon's page lists that
   group's *values* (METIS-pub#450). The chrome was written once for the panel
   as `.class-field-group__*`; these declarations are those, moved here rather
   than copied — a third copy was what #450 was about to add.

   Platform tier, not an app's. No literal colour, size, radius, shadow or
   duration; `color-mix` is `in oklab` per CLAUDE.md.
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .field-block {
    margin: 0.8rem 0 1rem;
    padding: 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--surface) 92%, var(--border-light));
  }

  /* The editable variant reads like the rows it replaced: same cursor, same
     hover tint as `.field-display:hover`, so "click to edit" is one idiom. */
  .field-block--interactive {
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .field-block--interactive:hover {
    background: color-mix(in oklab, var(--surface) 86%, var(--border-light));
  }

  .field-block__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .field-block__title {
    font-size: var(--text-md);
    font-weight: 700;
    margin: 0;
  }

  .field-block__help {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.35;
    margin: 0.2rem 0 0;
  }

  /* The slot itself is layout only, because what sits in it differs: the
     class panel puts a count pill here, a holon's page puts a `.chip`. Giving
     the slot the pill's own fill would draw a second background behind the
     chip. */
  .field-block__meta {
    flex-shrink: 0;
  }

  .field-block__count {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    background: var(--border-light);
    border-radius: var(--radius-full);
    padding: 0.16rem 0.45rem;
  }
}