@layer components {
  .record {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
  }

  .record__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--rule);
  }
  .record__name { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.15; }
  .record__os { font-size: var(--text-sm); color: var(--ink-3); }
  .record__hetu { margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-3); }

  .record__toolbar { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule-soft); }

  .record__section { padding: var(--space-4); border-bottom: 1px solid var(--rule-soft); }
  .record__section:last-child { border-bottom: 0; }
  .record__section-title {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--space-3);
  }

  .field {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: var(--space-3);
    padding-block: 3px;
  }
  .field--sub { padding-left: var(--space-4); }
  .field__label { color: var(--ink-3); font-size: var(--text-sm); }
  .field__value { color: var(--ink); }
  .field__note { display: block; }
  .field__value.tnum { font-family: var(--font-mono); }

  /* The "add parent/child" frame under a relation list; the class lives on the
     turbo-frame so the spacing survives the swap to the inline search form. */
  .record__add { display: block; margin-top: var(--space-3); }

  /* Two-column field layout for the dense, full-width record. */
  .fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
  @media (max-width: 640px) { .fields-grid { grid-template-columns: 1fr; } }
}