/* ---- entry chooser (app.$DOMAIN front door, internal/web/entry.go) --------- */
/* A standalone page: it does NOT use layout.html, so it has no shell, no nav and
   no page grid to inherit from. These few rules are the whole layout.
   Why a chooser at all — and why it cannot detect your role — is explained at
   length in entry.go. */
.entry-page {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  margin: 0;
  padding: 1.5rem;
  background: var(--sn-surface);
  color: var(--sn-on-surface);
}
.entry-card {
  inline-size: min(32rem, 100%);
  padding: 2rem;
  border-radius: var(--sn-shape-corner-medium);
  background: var(--sn-surface-container, var(--sn-surface));
  box-shadow: var(--sn-elevation-8);
}
.entry-card h1 { margin: 0 0 0.25rem; }
.entry-card > p { margin: 0 0 1.5rem; color: var(--sn-on-surface-variant); }
.entry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
/* Each item is [button, description] stacked; the description explains who the
   surface is for, so nobody has to click one to find out it rejects them. */
.entry-list li { display: grid; gap: 0.375rem; justify-items: start; }
.entry-list span { color: var(--sn-on-surface-variant); font-size: var(--sn-type-body-2-size); }

/* The demo call to action. Separated from .entry-list by a rule rather than
   sitting in it, because it is a different KIND of destination: the two links
   above take an existing user to a login, this one takes a stranger to a form.
   Grouping all three would invite someone with an account to click the wrong
   one and provision a demo tenancy they did not want. */
.entry-demo {
  margin-block-start: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--sn-outline-variant, var(--sn-outline));
  display: grid;
  gap: 0.375rem;
  justify-items: start;
}
.entry-demo h2 { margin: 0; font-size: var(--sn-type-body-1-size); }
.entry-demo p {
  margin: 0 0 0.5rem;
  color: var(--sn-on-surface-variant);
  font-size: var(--sn-type-body-2-size);
}