/* THE SIGN-IN PAGE'S OWN STYLES (docs/auth/SPEC.md "Nothing but the sign-in page without a session").
 * No framework and nothing shared with the app: this file, signin.js and index.html are the only
 * files forge-web sends to a request without a session (plus the brand icons). Colours are the
 * kit's own tokens (@tapperai/tokens: canvas #F6F7F9 / #0f1117, paper #ffffff / #161825), and the
 * cross-tool `color-mode` cookie decides (signin.js sets data-theme; with no cookie the browser's choice wins). */
:root { color-scheme: light; --bg: #F6F7F9; --fg: #1E256B; --card: #ffffff; --line: #d6d9e0; --muted: #5b6075; --err-bg: #fdecea; --err-fg: #611a15; --focus: #1E256B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; --bg: #0f1117; --fg: #e4e4e7; --card: #161825; --line: #2a2f3b; --muted: #a1a5b3; --err-bg: #2d1412; --err-fg: #f5b5ae; --focus: #e4e4e7; }
}
[data-theme='LIGHT'] { color-scheme: light; }
[data-theme='DARK'] { color-scheme: dark; --bg: #0f1117; --fg: #e4e4e7; --card: #161825; --line: #2a2f3b; --muted: #a1a5b3; --err-bg: #2d1412; --err-fg: #f5b5ae; --focus: #e4e4e7; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.card { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.logo { display: block; flex-shrink: 0; border-radius: 12px; }
h1 { margin: 0; font-size: 1.5rem; line-height: 1.3; font-weight: 600; text-align: center; }
.lead { margin: -16px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted); text-align: center; }
.notice { width: 100%; padding: 10px 14px; border-radius: 4px; font-size: 0.875rem; line-height: 1.5; background: var(--err-bg); color: var(--err-fg); }
.notice[hidden] { display: none; }
.card .gsi-material-button { width: 100%; }
.gmark { display: block; width: 20px; height: 20px; }
.gsi-material-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) { body { padding: 12px; } .card { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }

/* The Google button, from Google's brand guidelines (the same rules as @tapperai/internal's GoogleButton; do not theme). */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #8e918f;
  border-radius: 4px;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: .25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  min-width: min-content;
}
.gsi-material-button .gsi-material-button-icon { height: 20px; margin-right: 12px; min-width: 20px; width: 20px; }
.gsi-material-button .gsi-material-button-content-wrapper { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; justify-content: space-between; position: relative; width: 100%; }
.gsi-material-button .gsi-material-button-contents { flex-grow: 1; font-family: arial, sans-serif; font-weight: 500; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.gsi-material-button .gsi-material-button-state { transition: opacity .218s; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; }
.gsi-material-button:disabled { cursor: default; background-color: rgba(19, 19, 20, 0.38); border-color: rgba(142, 145, 143, 0.12); }
.gsi-material-button:disabled .gsi-material-button-state { background-color: rgba(227, 227, 227, 0.12); }
.gsi-material-button:disabled .gsi-material-button-contents { opacity: 0.38; }
.gsi-material-button:disabled .gsi-material-button-icon { opacity: 0.38; }
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state { background-color: #fff; opacity: 0.12; }
.gsi-material-button:not(:disabled):hover { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.gsi-material-button:not(:disabled):hover .gsi-material-button-state { background-color: #fff; opacity: 0.08; }