/* THE SIGN-IN PAGE (decision 0324). Abacus's hero, in Bearing's own terms:
   the navy sky with drifting light and a panning grid, the words rising into
   focus one after another, and in place of Abacus's soroban a compass whose
   needle follows the person. Colours are the Cornerstone tokens from
   web/src/tokens.css, restated here because this page loads before, and
   without, the app's bundle. Motion is decoration: reduced motion stills all
   of it and nothing depends on it. Text is never faded in by opacity. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/ibm-plex-sans.woff2') format('woff2'); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
  --navy: #0b1628;
  --navy-2: #16294a;
  --primary: #2e76bc;
  --cyan: #1ebbee;
  --on-ink: #ffffff;
  --on-ink-soft: #d5e2f1;
  --on-ink-muted: #9fb3cc;
  --font-ui: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: var(--font-ui); color: var(--on-ink); overflow-x: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #1b3156 0%, var(--navy) 55%, #060e1b 100%) fixed;
}

/* ------------------------------------------------------------------ the sky */
.si-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.si-orb { position: absolute; border-radius: 50%; filter: blur(70px); animation: si-drift 18s ease-in-out infinite alternate; }
.si-orb-a { width: 460px; height: 460px; left: -120px; top: -160px; background: rgba(46, 118, 188, .55); }
.si-orb-b { width: 380px; height: 380px; right: 6%; bottom: -180px; background: rgba(30, 187, 238, .32); animation-duration: 23s; }
.si-orb-c { width: 260px; height: 260px; right: -80px; top: 12%; background: rgba(108, 140, 241, .22); animation-duration: 27s; }
.si-grid {
  position: absolute; inset: -48px;
  background-image: linear-gradient(rgba(159, 179, 204, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 179, 204, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 68% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 68% 50%, #000 0%, transparent 75%);
  animation: si-pan 40s linear infinite;
}
@keyframes si-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(48px, 34px, 0) scale(1.14); } }
@keyframes si-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(48px, 48px, 0); } }

/* ------------------------------------------------------------------ layout */
.si-main {
  position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px;
  padding: 56px 48px 24px;
}
.si-copy { min-width: 0; }

.si-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .05);
  font: 600 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #cfe6f7;
}
.si-eyebrow-mark { width: 24px; height: 24px; border-radius: 7px; }
.si-title {
  margin: 0; font: 600 clamp(36px, 5.2vw, 62px)/1.04 var(--font-ui); letter-spacing: -.02em; color: var(--on-ink);
}
.si-name {
  background: linear-gradient(90deg, var(--cyan) 0%, #7fd8f7 55%, var(--on-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.si-lede { margin: 20px 0 0; max-width: 32em; font: 400 18px/1.55 var(--font-ui); color: var(--on-ink-soft); }
.si-note {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(30, 187, 238, .4); background: rgba(30, 187, 238, .1);
  font: 600 13px/1.3 var(--font-ui); color: #cfeefb;
}
.si-note[hidden] { display: none; }
.si-note::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(30, 187, 238, .25); }

.si-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.si-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px 0 20px;
  border-radius: 999px; background: var(--cyan); color: var(--navy); text-decoration: none;
  font: 600 16px/1 var(--font-ui); box-shadow: 0 10px 28px -8px rgba(30, 187, 238, .75);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.si-cta:hover { transform: translateY(-1px); background: #4fcbf2; box-shadow: 0 14px 32px -8px rgba(30, 187, 238, .85); }
.si-cta::after { content: '\2192'; font-weight: 700; transition: transform .18s ease; }
.si-cta:hover::after { transform: translateX(3px); }
.si-cta:focus-visible, .si-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.si-cta.is-going { pointer-events: none; background: #7fd8f7; }
.si-cta.is-going::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy); border-right-color: transparent; animation: si-spin .7s linear infinite; }
@keyframes si-spin { to { transform: rotate(360deg); } }
.si-ms { width: 20px; height: 20px; flex: none; padding: 2px; background: #fff; border-radius: 4px; }
.si-link {
  min-height: 44px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; border-radius: 6px;
  font: 600 14px/1 var(--font-ui); color: #cfe6f7; text-decoration: underline; text-underline-offset: 4px;
}
.si-link:hover { color: #fff; }
.si-link[hidden] { display: none; }
.si-small { margin: 18px 0 0; max-width: 34em; font: 400 13px/1.5 var(--font-ui); color: var(--on-ink-muted); }

/* The words rise out of the dark and into focus, one after another. */
.si-reveal { filter: blur(10px) brightness(.1); transform: translate3d(0, 16px, 0); animation: si-rise .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.si-copy > .si-reveal:nth-child(1) { animation-delay: .1s; }
.si-copy > .si-reveal:nth-child(2) { animation-delay: .22s; }
.si-copy > .si-reveal:nth-child(3) { animation-delay: .34s; }
.si-copy > .si-reveal:nth-child(4) { animation-delay: .4s; }
.si-copy > .si-reveal:nth-child(5) { animation-delay: .46s; }
.si-copy > .si-reveal:nth-child(6) { animation-delay: .56s; }
@keyframes si-rise { to { filter: none; transform: none; } }

/* ------------------------------------------------------------------ the compass */
.si-compass { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 1000px; min-width: 0; }
.si-tilt {
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  animation: si-arrive 1.2s cubic-bezier(.2, .8, .2, 1) .15s backwards; touch-action: pan-y;
}
@keyframes si-arrive { from { transform: scale(.86) rotate(-40deg); filter: blur(8px) brightness(.2); } to { transform: none; filter: none; } }
.si-dial { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 36px 48px rgba(0, 0, 0, .5)); }
.si-tick { stroke: rgba(207, 230, 247, .35); stroke-width: 1.2; }
.si-tick.is-mid { stroke: rgba(207, 230, 247, .6); stroke-width: 1.6; }
.si-tick.is-major { stroke: #cfe6f7; stroke-width: 2.4; }
.si-deg { font: 500 11px/1 var(--font-num); fill: var(--on-ink-muted); text-anchor: middle; dominant-baseline: central; }
.si-card { font: 600 22px/1 var(--font-ui); fill: #cfe6f7; text-anchor: middle; dominant-baseline: central; }
.si-card.is-north { fill: var(--cyan); }
.si-rose { transform-origin: 200px 200px; animation: si-turn 120s linear infinite; }
.si-rose-ring { fill: none; stroke: rgba(30, 187, 238, .28); stroke-width: 1.4; stroke-dasharray: 2 7; }
.si-rose-star { fill: rgba(46, 118, 188, .22); stroke: rgba(30, 187, 238, .35); stroke-width: 1; }
@keyframes si-turn { to { transform: rotate(360deg); } }
.si-needle { transform-box: view-box; }
.si-pulse { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: 0; transform-origin: 200px 200px; }
.si-pulse.is-on { animation: si-ping 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes si-ping { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(3); } }

/* The four waypoints: what lies in each direction, for whoever this is. */
.si-way {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(11, 22, 40, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 12px/1.2 var(--font-ui); color: #cfe6f7; white-space: nowrap; cursor: default;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s ease;
}
.si-way b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); font: 600 11px/1 var(--font-num); color: #cfe6f7;
}
.si-way.is-on { border-color: var(--cyan); background: rgba(30, 187, 238, .18); color: #fff; }
.si-way.is-on b { background: var(--cyan); color: var(--navy); }
.si-way-n { top: -6px; left: 50%; transform: translate(-50%, -100%); }
.si-way-s { bottom: -6px; left: 50%; transform: translate(-50%, 100%); }
.si-way-e { right: -10px; top: 50%; transform: translate(40%, -50%); }
.si-way-w { left: -10px; top: 50%; transform: translate(-40%, -50%); }

/* A real compass (live): the card turns under a fixed mark at the top, the
   waypoints ride round with it (signin.js places them), and the words for the
   way the phone faces are in the caption rather than on the pills. */
.si-lubber { fill: var(--cyan); opacity: 0; transition: opacity .4s ease; }
.si-tilt.is-live .si-lubber { opacity: 1; }
.si-tilt.is-live .si-rose { animation: none; }
.si-tilt.is-live .si-way { right: auto; bottom: auto; padding: 4px; transform: translate(-50%, -50%); transition: border-color .25s ease, background-color .25s ease, color .25s ease; }
.si-tilt.is-live .si-way-text { display: none; }
.si-live {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px; padding: 8px 16px 8px 10px;
  border-radius: 999px; border: 1px solid rgba(30, 187, 238, .55); background: rgba(30, 187, 238, .12);
  font: 600 13px/1.2 var(--font-ui); color: #fff; cursor: pointer;
}
.si-live svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.4; }
.si-live svg path { fill: var(--cyan); stroke: none; }
.si-live:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.si-live:disabled { cursor: default; border-color: rgba(255, 255, 255, .14); background: transparent; color: var(--on-ink-muted); }
.si-live[hidden] { display: none; }

.si-caption { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 46px; text-align: center; }
.si-heading { font: 500 12px/1.3 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-muted); }
.si-heading strong { font: 500 13px/1 var(--font-num); letter-spacing: .1em; color: var(--cyan); }
.si-says { min-height: 1.4em; font: 400 14px/1.4 var(--font-ui); color: var(--on-ink-soft); }

/* ------------------------------------------------------------------ foot */
.si-foot {
  position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); font: 500 12px/1 var(--font-num); color: var(--on-ink-muted);
}
.si-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--on-ink-muted); }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 900px) {
  .si-main { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 44px 16px 8px; }
  .si-compass { order: -1; }
  .si-tilt { max-width: 230px; }
  .si-caption { margin-top: 26px; }
  .si-way { font-size: 11px; padding: 4px 10px 4px 4px; }
  .si-way b { width: 18px; height: 18px; font-size: 10px; }
  .si-way-text { display: none; }
  .si-way { padding: 4px; }
  .si-way-e { transform: translate(30%, -50%); }
  .si-way-w { transform: translate(-30%, -50%); }
  .si-lede { font-size: 16px; }
  .si-actions { margin-top: 24px; }
  .si-cta { width: 100%; }
  .si-orb-a { width: 300px; height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-orb, .si-grid, .si-rose, .si-tilt, .si-reveal, .si-pulse.is-on { animation: none; }
  .si-reveal { filter: none; transform: none; }
  .si-tilt { transition: none; }
}

/* The Teams sign-in window (decision 0567): one column, centred. */
.si-window { grid-template-columns: minmax(0, 1fr); min-height: 100vh; align-content: center; text-align: center; }