@layer components {
  .home-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  /* Section header with a title and an inline "see all" link. */
  .section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule);
  }
  .section__head .section__title { margin: 0; padding: 0; border: 0; }
  .section__link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-sm); }
  .section__link .icon { width: 0.95em; height: 0.95em; }

  /* Register at a glance: compact, scannable, every cell a link. */
  .stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .stat {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink);
  }
  .stat:hover { background: var(--surface-raised); border-color: var(--rule-strong); text-decoration: none; }
  .stat__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xl);
    line-height: 1;
  }
  .stat__label { font-size: var(--text-xs); color: var(--ink-3); }

  /* The one that needs attention. */
  .stat--flag { border-left: 3px solid var(--seal); }
  .stat--flag .stat__num { color: var(--seal); }
}