/* Sign-in screen (board 7). The app header is hidden on this route; the view
   draws its own slim header and footer. Tonal card, red primary button, no
   glass. Photos keep square corners, controls get --radius. */

html.signin-route ts-header { display: none; }
html.signin-route #main { padding: 0; }

.si { min-height: 100vh; display: flex; flex-direction: column; background: var(--page); color: var(--text); }

/* ---- Slim header ------------------------------------------------------ */
.si-top { display: flex; align-items: center; justify-content: space-between; padding: 40px var(--margin); }
.si-logo { display: block; flex-shrink: 0; padding: 4px 0; }
.si-logo img { height: 34px; width: auto; display: block; }

/* ---- Centred card ----------------------------------------------------- */
.si-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px 80px; }
.si-card { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 40px; }

.si-lede { display: flex; flex-direction: column; gap: 20px; }
.si-eyebrow { color: var(--red-text); }
.si-title { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; font-size: 44px; line-height: 1.1; color: var(--text); }
.si-sub { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); }

.si-box { display: flex; flex-direction: column; gap: 14px; padding: 32px; background: var(--tone-solid); border-radius: var(--radius); }
.si-btn {
  height: 56px; border-radius: var(--radius); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.si-btn:disabled { cursor: default; }
.si-btn.is-busy { opacity: .85; }
/* The Microsoft mark sits on a white chip so its colours stay true on the red
   button in both themes. The chip is a fixed brand white (like the mark's own
   brand colours in signin.js), so it is a literal, not a theme token. */
.si-ms { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: #fff; }
.si-note { margin: 0; font-size: 13px; color: var(--text-quiet); text-align: center; }
.si-error { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--red-text); text-align: center; }

.si-help { margin: 0; font-size: 14px; color: var(--text-2); }
.si-link { color: var(--text); font-weight: 600; text-underline-offset: 4px; }
.si-link:hover { color: var(--red-text); }

/* ---- Footer ----------------------------------------------------------- */
.si-foot { display: flex; justify-content: space-between; padding: 32px var(--margin); font-size: 13px; color: var(--text-quiet); box-shadow: inset 0 1px 0 var(--rule); }

@media (max-width: 760px) {
  .si-top { padding: 28px 20px; }
  .si-foot { padding: 24px 20px; flex-direction: column; gap: 6px; }
  .si-title { font-size: 36px; }
  .si-box { padding: 24px; }
}