/* The hub's own layout, on top of the UI Kit (kit/kit.css). Semantic --sd-* tokens only;
   kit parts (sd-*) are never restyled here. */

.screen-hub-auth { min-height: 100vh; }

.screen-hub-auth-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-space-12);
  margin-top: var(--sd-space-24);
}

.screen-hub-form {
  display: grid;
  gap: var(--sd-space-16);
  margin-top: var(--sd-space-24);
  max-width: 36rem; /* why: a form row's label column plus a comfortable email box */
}

.screen-hub-check {
  display: flex;
  align-items: center;
  gap: var(--sd-space-8);
  color: var(--sd-color-text-default);
  font-size: var(--sd-text-sm);
}

.screen-hub-aside {
  margin-top: var(--sd-space-16);
  font-size: var(--sd-text-sm);
}

.screen-hub-product {
  color: var(--sd-color-text-strong);
  font-weight: var(--sd-weight-semibold);
  font-size: var(--sd-text-md);
}

.screen-hub-who {
  color: var(--sd-color-text-muted);
  font-size: var(--sd-text-sm);
  overflow-wrap: anywhere;
}

.screen-hub-page {
  max-width: var(--sd-page-max);
  margin: 0 auto;
  padding: var(--sd-space-32) var(--sd-space-24) var(--sd-space-48);
  display: grid;
  gap: var(--sd-space-24);
}

.screen-hub-title {
  color: var(--sd-color-text-strong);
  font-size: var(--sd-text-xl);
  font-weight: var(--sd-weight-semibold);
}

.screen-hub-section { display: grid; gap: var(--sd-space-12); }

.screen-hub-heading {
  color: var(--sd-color-text-strong);
  font-size: var(--sd-text-lg);
  font-weight: var(--sd-weight-semibold);
}

.screen-hub-lede,
.screen-hub-desc,
.screen-hub-empty {
  color: var(--sd-color-text-muted);
  font-size: var(--sd-text-sm);
}

.screen-hub-desc { margin-top: var(--sd-space-4); }

/* why: a phone is narrower than the page's gutters plus a table; keep 16px sides */
@media (max-width: 40rem) {
  .screen-hub-page { padding: var(--sd-space-24) var(--sd-space-16) var(--sd-space-40); }
}