/* Sign-in and first-run pages: a single centered card, no navigation around it */
.entry { max-width: 420px; margin: 6vh auto 0; }
.entry h1 { font-size: 24px; font-weight: 650; }
.entry .hsub { margin: 4px 0 18px; }
.entry form { display: grid; gap: 14px; }
.entry .field small { font-size: 12px; color: var(--ink-3); }

.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: color-mix(in oklab, var(--st-active) 12%, var(--surface)); }

/* Signed-in identity in the header bar */
.account { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.account .who { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* People page: each row is a person plus the controls an administrator gets */
.people li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.people .email { font-size: 13px; color: var(--ink-3); }
.people form { display: inline; }

@media (max-width: 720px) {
  .account { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* Public welcome page */
.welcome { display: grid; gap: 18px; max-width: 980px; }
.welcome .intro { padding: 10px 0 4px; }
.welcome h1 { font-size: 34px; font-weight: 650; line-height: 1.1; margin: 6px 0 10px; max-width: 18ch; }
.welcome .lede { font-size: 16px; color: var(--ink-2); max-width: 62ch; }
.welcome .intro .actions { margin-top: 18px; }
.welcome .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.welcome h2 { font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.welcome p + p { margin-top: 10px; }
.welcome .caution { font-size: 13px; color: var(--ink-2); padding: 10px 12px; border-radius: 8px; background: color-mix(in oklab, var(--st-monitor) 13%, var(--surface)); }
.legend-list { display: grid; gap: 8px; margin: 0 0 14px; }
.legend-list div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.legend-list dt { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.legend-list dd { margin: 0; color: var(--ink-2); }

@media (max-width: 720px) {
  .welcome .cards { grid-template-columns: 1fr; }
  .welcome h1 { font-size: 27px; }
  .legend-list div { grid-template-columns: 1fr; gap: 2px; }
}

.entry-alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }