/* risk-gate.css — the five pre-workspace states, and nothing else.
 *
 * Deliberately separate from the artifact's stylesheet, which lives inside the
 * artifact itself as its own CSS constant and is not edited here. This file
 * styles only what risk-boot.js renders BEFORE the workspace mounts: checking,
 * sign-in, register choice, access denied, and read-failed.
 *
 * It borrows the artifact's palette and type stack by value rather than by
 * importing anything, because at gate time the artifact has not mounted and its
 * `.ras` scope -- which is where all of its tokens are declared -- does not
 * exist yet. Overlays that assumed otherwise once rendered transparent in the
 * browser default font for exactly this reason.
 */

html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #E8EAED;
  color: #111820;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
#risk-root { height: 100%; }

.ras-gate {
  max-width: 420px;
  margin: 0 auto;
  padding: 96px 24px 24px;
  font-variant-numeric: tabular-nums;
}
.ras-gate h1 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.ras-gate p {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: #39434F;
}

.ras-gate-form { display: flex; flex-direction: column; gap: 8px; }
.ras-gate-form input {
  height: 32px;
  padding: 0 9px;
  font: inherit;
  color: inherit;
  background: #FFFFFF;
  border: 1px solid #CDD2D8;
  border-radius: 2px;
}
.ras-gate-form input:focus {
  outline: 0;
  border-color: #17497F;
  box-shadow: 0 0 0 2px #E7EFF8;
}
.ras-gate-go {
  height: 32px;
  margin-top: 4px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #17497F;
  border: 1px solid #17497F;
  border-radius: 2px;
  cursor: pointer;
}
.ras-gate-go:hover { background: #0F3661; border-color: #0F3661; }
.ras-gate-go[disabled] { opacity: .6; cursor: default; }

/* A failed sign-in is a sentence, not a shrug. Reserve no height for it: an
   always-present empty error line reads as a form that has already failed. */
.ras-gate-err:empty { display: none; }
.ras-gate-err {
  margin: 6px 0 0;
  font-size: 12px;
  color: #A8231B;
}

/* The sign-in link. Subordinate to the password submit by weight and fill, not by
   size -- it is the only way in for an identity created through the Admin API, so it
   must not read as a footnote. Borrowed by value from the artifact palette for the
   reason stated at the top of this file: at gate time .ras has not mounted. */
.ras-gate-alt {
  height: 30px;
  margin-top: 8px;
  font: inherit;
  color: #17497F;
  background: transparent;
  border: 1px solid #C6D3E2;
  border-radius: 2px;
  cursor: pointer;
}
.ras-gate-alt:hover { border-color: #17497F; background: #F4F8FC; }
.ras-gate-alt[disabled] { opacity: .6; cursor: default; }

/* Same no-reserved-height rule as the error line, for the same reason. This one is
   not a failure, so it takes body ink rather than the error red -- the message is
   deliberately the same whether or not the address is a member, and colouring it as
   a problem would be a guess about which of those happened. */
.ras-gate-note:empty { display: none; }
.ras-gate-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #4A5B70;
}

.ras-gate-list { display: flex; flex-direction: column; gap: 6px; }
.ras-gate-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: #FFFFFF;
  border: 1px solid #E1E4E8;
  border-radius: 2px;
  cursor: pointer;
}
.ras-gate-pick:hover { border-color: #B9CFE6; background: #FAFBFC; }
.ras-gate-pick-name { font-weight: 600; }
.ras-gate-pick-meta {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #5E6875;
}

/* Account security is shell-owned because authentication lives outside the
   pinned Risk artifact. It is intentionally small: identity, password, sign out. */
.ras-account-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 32, .30);
}
.ras-account-panel {
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  box-sizing: border-box;
  padding: 18px;
  background: #FFFFFF;
  border: 1px solid #CDD2D8;
  border-radius: 4px;
  box-shadow: 0 16px 42px rgba(17, 24, 32, .18);
}
.ras-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ras-account-head h2,
.ras-account-form h3 {
  margin: 0;
  color: #111820;
}
.ras-account-head h2 { font-size: 18px; font-weight: 600; }
.ras-account-form h3 { font-size: 14px; font-weight: 600; }
.ras-account-close,
.ras-account-signout {
  padding: 5px 8px;
  font: inherit;
  color: #39434F;
  background: transparent;
  border: 1px solid #CDD2D8;
  border-radius: 2px;
  cursor: pointer;
}
.ras-account-close:hover,
.ras-account-signout:hover { border-color: #8E99A6; background: #F7F8F9; }
.ras-account-identity {
  padding: 10px 0 14px;
  border-bottom: 1px solid #E1E4E8;
}
.ras-account-label {
  margin-bottom: 2px;
  font-size: 11px;
  color: #5E6875;
}
.ras-account-email { font-size: 13.5px; font-weight: 600; }
.ras-account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid #E1E4E8;
}
.ras-account-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #39434F;
}
.ras-account-form input {
  height: 32px;
  box-sizing: border-box;
  padding: 0 9px;
  font: inherit;
  color: #111820;
  background: #FFFFFF;
  border: 1px solid #CDD2D8;
  border-radius: 2px;
}
.ras-account-form input:focus {
  outline: 0;
  border-color: #17497F;
  box-shadow: 0 0 0 2px #E7EFF8;
}
.ras-account-save {
  height: 32px;
  margin-top: 2px;
  font: inherit;
  font-weight: 600;
  color: #FFFFFF;
  background: #17497F;
  border: 1px solid #17497F;
  border-radius: 2px;
  cursor: pointer;
}
.ras-account-save:hover { background: #0F3661; border-color: #0F3661; }
.ras-account-save[disabled],
.ras-account-signout[disabled] { opacity: .6; cursor: default; }
.ras-account-message {
  min-height: 18px;
  margin: 0;
  font-size: 12px;
  color: #39434F;
}
.ras-account-success { color: #176B3A; }
.ras-account-error { color: #A8231B; }
.ras-account-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
}