@layer components {
  .hub-content {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--nav-bar-height) + 16px);
  }

  /* The eye toggle wraps its icon in spans; flatten them to flex so the SVG centers
     in the action button, matching the directly-placed gear icon beside it. */
  .page-header-action .toggle-icon {
    display: flex;
  }

  /* Crimson-washed header — the hub is appointment-domain territory, not gray chrome.
     Action icons step up from muted to text so they don't sink into the tint. */
  .page-header-bar--tinted {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.08), transparent);

    .page-header-action.page-header-action--muted {
      color: var(--color-text);
    }
  }

  /* Value headline row — the amount sits inline with its trend chip on one baseline.
     Reuses .agenda-summary-headline for type; this only governs the inline layout. */
  .hub-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Inline trend chip next to a headline value. Percentage only.
     Up = green (positive), down = amber (attention) — never alarming red. */
  .hub-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .hub-trend--up { color: var(--color-success-text); }
  .hub-trend--down { color: var(--color-warning-text); }

  /* Marketing "em breve" — title carries a muted badge; no chevron, not a live door. */
  .hub-soon-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .hub-soon-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: 1px 8px;
    border-radius: 99px;
  }

}