/* A company's or a person's page, every tab of it (crm-v2, the record page):
   the record in a column at the side — what it is, the lists it is on, what
   is known about it — and what is done about it in tabs beside, past one
   hairline. One page for every record, a company's and a person's alike. */
@layer components {
  /* The CRM reads a notch below the app (the Overview's redesign, owner,
     2026-10-20: "certain fonts throughout the CRM could easily be a little
     smaller, so we have more breathing space"): the unit alone, 15px on a
     narrow sheet and 16px on a wide one, and every step follows by its
     ratio. The hub is listed here, as labels.css lists foreign selectors, so
     the notch has one place to change. */
  .record,
  .hub {
    --text-notch: 0.0625rem;
  }

  .record {
    display: grid;
    grid-template-areas: "head" "lists" "pane" "details";
    gap: var(--block-space-double);

    /* The container, not the viewport: #main narrows when the notification
       panel opens. Narrow, the record's head and its lists come first, then
       the tabs — on the first screen of a phone — and its details after
       them. Wide, the record is the column at the side and the tabs take the
       rest, the details under the lists however long the tab runs. */
    @container main (min-width: 52rem) {
      grid-template-columns: 20rem minmax(0, 1fr);
      grid-template-areas: "head pane" "lists pane" "details pane";
      grid-template-rows: auto auto 1fr;
      align-items: start;
      column-gap: 0;
      /* Each section of the column stands apart in its own air (owner,
         2026-10-20: "each section should have enough room to breathe"). */
      row-gap: calc(var(--block-space) * 2.5);

      > :not(.record__pane) {
        padding-inline-end: var(--inline-space-double);
      }

      .record__pane {
        align-self: stretch;
        padding-inline-start: calc(var(--inline-space-double) * 1.5);
        border-inline-start: var(--border);
      }
    }
  }

  .record__head {
    --inline-rename-size: var(--text-large);

    grid-area: head;

    /* The one line under the name, and the description in three lines at
       rest — all of it once typed into. */
    textarea.input:not(:focus) {
      max-block-size: 3lh;
    }
  }

  .record__lists { grid-area: lists; }
  .record__details { grid-area: details; }

  .record__pane {
    grid-area: pane;
    min-inline-size: 0;
  }

  /* Its mark at the head's size: a logo, or initials in a face's circle or
     a company's square. */
  .record__mark {
    --avatar-size: 2.75rem;
  }

  /* An empty record says so once, across the pane, with its two first
     verbs (crm-v2, the record page) — the slate's one sanctioned button
     pair, since the record page has no header for them. */
  .record__blank {
    max-inline-size: none;
    padding-block: calc(var(--block-space-double) * 2);
    text-align: center;
  }
}