/* The CRM's door (crm-v2, the compact pass; the home's redesign, owner,
   2026-10-20): what needs you and what happened, wide, and the index of where
   everything is, narrow beside it. One grid from the header down, so the
   field stands on the edges of the column under it. One column until the
   main container has room for both — the container, not the viewport, as
   every content breakpoint here (AGENTS.md). */
@layer components {
  /* The CRM reads a notch below the app, as a record's sheet does: the notch
     is set beside the record's (records.css). */
  .hub {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "title find" "main main" "index index";
    align-items: center;
    column-gap: var(--inline-space-double);
    row-gap: calc(var(--block-space) * 2.5);

    @container main (min-width: 80ch) {
      /* The record's side column, so the two pages read alike. */
      grid-template-columns: minmax(0, 1fr) 20rem;
      grid-template-areas: "title find" "main index";
      column-gap: calc(var(--inline-space-double) * 2.5);
    }

    > .crm-find {
      grid-area: find;
    }
  }

  .hub__title {
    grid-area: title;
  }

  /* On a phone the field shares the row with the title, so New company says
     its plus alone. */
  @container main (max-width: 40ch) {
    .hub__new-label {
      display: none;
    }
  }

  .hub__main,
  .hub__index {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: calc(var(--block-space) * 2.5);
  }

  .hub__main {
    grid-area: main;
  }

  /* The index is a list of doors, read at a glance: its rows take a deal's
     padding rather than a list of messages' (owner, 2026-10-21: "the first
     row must be aligned"), so both columns' first rows stand on one line.
     Its sections keep the hub's air. */
  .hub__index {
    --block-space: 0.75rem;

    grid-area: index;
    gap: 2.5rem;
  }

  /* A section's head (sections/clients/_head): label, count and hint on one
     baseline over the hairline. The count takes the label's line height and
     the hint's larger line gives up its height, so a head with a hint stands
     as tall as one without: the two columns' heads line up. The head owns
     the space above its hairline — a form label's margin is half the block
     space, which the index halves again. */
  .hub__head {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space);
    line-height: 1.2;
    padding-block-end: 0.625rem;
    border-block-end: var(--border);

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

    > p {
      margin-block: -1em;
    }
  }

  /* A deal is two lines (the redesign): who and by when, then the next step
     in full — two lines at most — and what it is worth. */
  .hub__deal,
  .hub__mail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--inline-space);
    row-gap: 0.125rem;
    padding-block: 0.75rem;
    border-block-end: var(--border);
  }

  /* A deal's mark is centred on its name's line (owner, 2026-10-21: "aligned
     with the name") — hung from the row's top, it rode 2px above the
     capitals. A mail's face spans who wrote and what about. */
  .hub__deal > .avatar {
    align-self: center;
  }

  .hub__mail > .avatar {
    grid-row: span 2;
    align-self: start;
  }

  .hub__deal-name {
    font-weight: 500;
    text-decoration: none;
  }

  .hub__deal-step {
    --lines: 2;

    grid-column: 2;
  }

  .hub__deal-value {
    grid-column: 3;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  /* A thread with a client: who wrote and at which company, when, then what
     it is about — the record timeline's grammar, as one link. */
  .hub__mail {
    color: inherit;
    text-decoration: none;

    strong {
      color: var(--color-ink);
      font-weight: 600;
    }
  }

  .hub__mail-subject {
    grid-column: 2 / -1;
  }
}