/* Sign in page only (DESIGN 4.1). The shared system has no full-window brand background and no shell-less layout,
   so these few rules live here. The brand background fills the window and the cards sit in the middle, 420 px wide.
   Night uses the dark gradient of the quiet band and swaps the light logo for the logo on navy (DESIGN 2.6). */
.si { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: #EEF4FB url("trusthouse-background.png") center / cover no-repeat; }
.si-main { width: min(420px, 100%); display: grid; gap: 16px; }
.si-main .th-proto { margin: 0; }
.si-card { display: grid; gap: 16px; padding: 32px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-dialog); box-shadow: var(--raise); }
.si-card h1 { margin: 0 0 4px; }
.si-card .th-banner { flex-wrap: wrap; }
.si-card .th-banner__actions { margin-left: 0; flex: 1 1 100%; }
.si-logo { display: block; height: 48px; width: auto; }
.si-logo--navy { display: none; }
.si-h2 { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; }
.si-done { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 14px; line-height: 20px; }
.si-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.si-foot { display: grid; gap: 8px; justify-items: center; padding: 12px 16px; text-align: center; font-size: 14px; line-height: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.si-foot p { margin: 0; }
.si-foot a { display: inline-flex; gap: 4px; align-items: center; }
@media (pointer: coarse) { .si-foot a { min-height: 44px; } } /* a thumb sized box for Status page and the Bitbucket link */
.si-card .th-field { margin: 0; }

:root[data-theme="dark"] .si { background: linear-gradient(135deg, #13224F, #0F1F4B 60%, #12323A); }
:root[data-theme="dark"] .si-logo--light { display: none; }
:root[data-theme="dark"] .si-logo--navy { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .si { background: linear-gradient(135deg, #13224F, #0F1F4B 60%, #12323A); }
  :root:not([data-theme="light"]) .si-logo--light { display: none; }
  :root:not([data-theme="light"]) .si-logo--navy { display: block; }
}
/* Phone: the card fills the width inside the 16 px gutter. */
@media (max-width: 480px) {
  .si { place-items: start center; padding-top: 16px; }
  .si-card { padding: 24px 20px; }
}