/* The sign-in page, in the board's colours (style.css), on its own so it loads
   before sign-in without the rest of the board. */
:root {
  --tango: #EE6823; --tango-hover: #D4571A; --side: #10293A; --heading: #193D51;
  --bg: #F3F5F6; --surface: #FFFFFF; --line: #E1E7EA; --ink: #15242D; --muted: #66737B; --faint: #95A1A8;
  --ok: #1D7F55; --ok-bg: #E2F3EA; --warn: #9A5B0B; --warn-bg: #FCF0D9;
  --font: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A141A; --surface: #101D25; --line: #1E303B; --ink: #E6EEF2; --muted: #8DA0AA; --faint: #637782;
    --heading: #F1F6F8; --side: #07121A; --ok: #55C892; --ok-bg: #13301F; --warn: #E8B04F; --warn-bg: #352A10;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }

.wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* Left: the board, in brief, on Nile. */
.brand {
  position: relative; overflow: hidden; color: #FFFFFF; background: var(--side); border-right: 4px solid var(--tango);
  padding: calc(40px + env(safe-area-inset-top, 0px)) 56px 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.brand::after {
  content: ''; position: absolute; right: -180px; bottom: -220px; width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .02), 0 0 0 140px rgba(255, 255, 255, .015); pointer-events: none;
}
.logo { height: 32px; width: auto; align-self: flex-start; }
.pitch { max-width: 30rem; }
.pitch h1 { margin: 0 0 12px; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; }
.pitch h1 .slashes { color: var(--tango); margin-right: 8px; letter-spacing: -.06em; }
.pitch p { margin: 0; color: #B7C8D2; font-size: 15px; line-height: 1.6; }
.views { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 34rem; }
.views li { font-size: 12.5px; line-height: 1.5; color: #86A0AE; }
.views li::before { content: ''; display: block; width: 28px; height: 4px; border-radius: 2px; margin-bottom: 10px; background: var(--tango); }
.views b { display: block; margin-bottom: 2px; color: #FFFFFF; font-weight: 600; font-size: 13.5px; }

/* Right: signing in. */
main { display: flex; align-items: center; justify-content: center; padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px)); }
.card { width: 100%; max-width: 380px; }
.card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; color: var(--heading); }
.lead { margin: 0 0 24px; color: var(--muted); }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px;
  border: 0; border-radius: 10px; background: var(--tango); color: #FFFFFF; text-decoration: none;
  font: 600 14.5px var(--font); cursor: pointer; transition: background .15s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 16px -6px rgba(238, 104, 35, .6);
}
.btn:hover { background: var(--tango-hover); }
.btn:focus-visible { outline: 3px solid rgba(238, 104, 35, .4); outline-offset: 2px; }
.ms { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ms i { display: block; background: #FFFFFF; opacity: .95; }
.note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.notice { display: none; margin: 0 0 18px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.notice.show { display: block; }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; gap: 12px; }

@media (max-width: 860px) {
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .brand { border-right: 0; border-bottom: 4px solid var(--tango); padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 28px; gap: 24px; }
  .pitch h1 { font-size: 26px; }
  .views { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }