/* Sign in · page layout only: the waking station (its side and its screen), the people grid, the pad column. */
@layer page {
  .si-wake { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100dvh; }
  .si-side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s8); padding: var(--s10) var(--s10) var(--s8); border-right: 1px solid var(--line); }
  .si-main { display: flex; flex-direction: column; justify-content: center; gap: var(--s6); padding: var(--s10) var(--s10) var(--s8); }
  .si-brand { display: flex; align-items: center; gap: var(--s3); }
  .si-brand img { display: block; width: 132px; height: auto; }
  .si-brand b { padding-left: var(--s3); border-left: 1px solid var(--line-2); font-weight: 500; letter-spacing: .24em; }
  .si-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .si-people--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .si-auth { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s6) var(--s10); align-items: start; }
  .si-auth > .si-pad { grid-row: span 2; }
  .si-handto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s2); }
  @media (max-width: 1180px) { .si-auth { grid-template-columns: minmax(0, 1fr); } .si-auth > .si-pad { grid-row: auto; } }
  @media (max-width: 900px) {
    .si-wake { grid-template-columns: minmax(0, 1fr); }
    .si-side { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); padding: var(--s5) var(--s4); border-right: 0; border-bottom: 1px solid var(--line); }
    .si-main { justify-content: flex-start; padding: var(--s5) var(--s4) var(--s12); }
    .si-people, .si-people--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 480px) { .si-people, .si-people--4 { grid-template-columns: minmax(0, 1fr); } }
}