/* Author Hub: a person-first overlay opened from the brand in the top bar.
   A candidate alongside app-menu.css (cards) — built on the same native Popover
   API and semantic tokens, just wider and split into two nav zones (Site,
   Circles). Full-screen sheet on phones. */
@layer components {
  .author-hub {
    position: fixed;
    inset: auto;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    width: min(56rem, 94vw);
    max-height: calc(100vh - 2em);
    margin: 0;
    padding: 0;
    background: var(--canvas);
    color: var(--ink);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.45);
    overflow: hidden auto;
  }
  .author-hub::backdrop { background: var(--scrim); }

  .author-hub__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
    padding: var(--u-pad);
    background: var(--canvas);
    border-block-end: var(--border-size-1) solid var(--line);
  }
  .author-hub__whoami {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    min-width: 0;
  }
  .author-hub__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .author-hub__close {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .author-hub__close:hover { color: var(--ink); }

  .author-hub__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .author-hub__top .author-hub__zone:first-child {
    border-inline-end: var(--border-size-1) solid var(--line);
  }

  .author-hub__zone { padding: var(--u-pad); }
  .author-hub__zone-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--size-2);
  }
  .author-hub__label {
    margin: 0 0 var(--size-2);
    color: var(--ink-muted);
  }

  /* Container rows — the site and each circle, styled identically so the two
     columns read as siblings (icon + bold name, hover-highlight). */
  .author-hub__container {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2);
    border-radius: var(--radius-ui);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
  }
  .author-hub__container:hover { background: var(--accent-soft); color: var(--ink-on-soft); }
  .author-hub__container .lucide { color: var(--ink-muted); }
  .author-hub__container:hover .lucide { color: inherit; }

  /* Feature groups under the site (Publish / Audience / Manage). */
  .author-hub__group { margin-block-start: var(--size-3); }
  .author-hub__sublabel {
    margin: 0 0 var(--size-1);
    padding-inline: var(--size-2);
    color: var(--ink-muted);
    font-size: 0.68rem;
  }
  .author-hub__invite {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    padding: var(--u-pad);
    border: var(--border-size-1) dashed var(--line);
    border-radius: var(--radius-ui);
    color: var(--ink);
    text-decoration: none;
  }
  .author-hub__invite:hover { background: var(--fill-subtle); }
  .author-hub__switch {
    margin-block-start: var(--size-2);
    padding-block-start: var(--size-2);
    border-block-start: var(--border-size-1) solid var(--line);
    color: var(--ink-muted);
  }

  /* Shared link rows (both zones) */
  .author-hub__links {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--size-2);
  }
  /* Full site nav stays complete without dominating: two compact columns. */
  .author-hub__links--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--size-2);
  }
  .author-hub__link {
    display: block;
    padding: var(--size-2) var(--size-2);
    border-radius: var(--radius-ui);
    color: var(--ink);
    text-decoration: none;
  }
  .author-hub__link:hover { background: var(--accent-soft); color: var(--ink-on-soft); }
  .author-hub__link--sm { font-size: 0.9rem; padding-block: var(--size-1); }
  .author-hub__more {
    display: inline-block;
    margin-block-start: var(--size-1);
    padding: var(--size-1) var(--size-2);
    color: var(--accent-ink, var(--accent));
    text-decoration: none;
    font-weight: 600;
  }
  .author-hub__empty { color: var(--ink-muted); }

  /* Not-yet-wired affordances read as present but inert */
  .author-hub__soon {
    color: var(--ink-muted);
    cursor: default;
  }
  .author-hub__soon:hover { background: transparent; color: var(--ink-muted); }

  /* Phone: a full-screen sheet (HEY-style), not a floating box. Uses dvh so the
     mobile browser's shrinking toolbar can't clip the bottom. */
  @media (max-width: 40rem) {
    .author-hub {
      inset: 0;
      top: 0;
      left: 0;
      transform: none;
      width: 100vw;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      border: 0;
      border-radius: 0;
    }
    .author-hub__top,
    .author-hub__links--grid { grid-template-columns: 1fr; }
    .author-hub__top .author-hub__zone:first-child {
      border-inline-end: 0;
      border-block-end: var(--border-size-1) solid var(--line);
    }
    /* Comfortable tap targets on touch. */
    .author-hub__link { padding-block: var(--size-3); }
    .author-hub__container { padding: var(--size-3); }
  }
}