/* ACiD product sign-in landing (DS-013), layout A "Orbit edge": the panel on the left, the brushed copper atom from logo pack 1.2.0
   cropped so only its orbit arc bleeds in from the right (Kyle, 13 Nov 2026: "Confirm: A, Orbit edge", "Confirm: the brushed copper
   atom from logo pack 1.2.0"). Dark in every theme: the page sets data-theme="dark" on <html>. Tokens only; self-hosted fonts;
   no inline style or script. Used by welcome.html and trouble.html, generated per product by tools/signin.mjs. */
.si-body{margin:0;min-height:100vh;background:var(--inv-bg);color:var(--inv-ink);font:15px/1.5 var(--body);overflow-x:hidden}
.si{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,480px) 1fr;align-items:center;padding-block:48px;padding-inline:max(64px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px));isolation:isolate}
.si-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.si-atom{position:absolute;display:block;max-width:none;width:min(150vh,1400px);right:calc(min(150vh,1400px) * -0.66);top:50%;transform:translateY(-50%) rotate(-28deg);opacity:.95}
.si-panel{display:grid;gap:18px;max-width:440px;min-width:0}
.si-brand{display:flex;align-items:center;gap:12px}
/* the wordmark's box includes the atom above the letters; offset like the master lockup so letters, rule and app name share a centre */
.si-wm{display:block;height:36px;width:auto;position:relative;top:calc(36px * -0.1025)}
.si-rule{width:3px;height:32px;border-radius:4px;background:var(--copper)}
.si-app{font:700 26px/1 var(--display);font-stretch:85%;color:var(--inv-ink)}
.si-kicker{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--copper-brushed-34)}
.si-lede{margin:0;font:800 clamp(30px,4vw,44px)/1.05 var(--display);font-stretch:80%;text-wrap:balance}
.si-points{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--inv-ink-2);font-size:14.5px}
.si-points b{color:var(--inv-ink);font-weight:600}
.si-points li{padding-left:18px;position:relative}
.si-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--copper)}
.si-card{display:grid;gap:12px;padding:22px;border:1px solid var(--inv-line);border-radius:var(--r-card);background:color-mix(in srgb,var(--inv-panel) 88%,transparent)}
.si-h{margin:0;font:700 18px/1.2 var(--display);font-stretch:90%}
/* the Microsoft sign-in button: their four-square logo unaltered and the words "Sign in with Microsoft" (their branding rules), on ACiD dark tokens */
.si-ms{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 16px;border-radius:6px;background:var(--inv-panel);color:var(--inv-ink);font:600 15px/1 "Segoe UI",var(--body);text-decoration:none;border:1px solid var(--inv-line)}
.si-ms:hover{border-color:var(--inv-ink)}
.si-note{margin:0;font-size:13px;color:var(--inv-ink-2)}
.si-or{display:flex;align-items:center;gap:10px;margin-top:4px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--inv-ink-2)}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:var(--inv-line)}
.si-act{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border:1px solid var(--copper);border-radius:6px;color:var(--inv-ink);font-weight:600;text-decoration:none;background:var(--copper-tint)}
.si-act:hover{background:var(--copper-tint-strong)}
.si-trouble{justify-self:start;display:inline-flex;align-items:center;min-height:44px;color:var(--inv-ink-2);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.si-trouble:hover{color:var(--inv-ink)}
.si-learn{margin:0;font-size:14px}
.si-learn a{color:var(--inv-ink-2);text-decoration:none;border-bottom:1px solid var(--inv-line)}
.si-learn a:hover{color:var(--inv-ink);border-bottom-color:var(--copper)}
.si :focus-visible{outline:2px solid var(--interaction);outline-offset:3px}

/* trouble page: the same frame; each case is a card with what you see, what it means and what to do */
.si-back{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--inv-ink-2);font-size:14px;text-decoration:none}
.si-back:hover{color:var(--inv-ink)}
.si-cases{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.si-case{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--inv-line);border-left:3px solid var(--copper);border-radius:var(--r-panel);background:color-mix(in srgb,var(--inv-panel) 88%,transparent)}
.si-case h2{margin:0;font:700 16px/1.25 var(--display);font-stretch:90%}
.si-case p{margin:0;font-size:14px;color:var(--inv-ink-2)}
.si-case code{font:500 12.5px/1 var(--mono);color:var(--copper-brushed-34)}
.si-case a{color:var(--inv-ink);text-underline-offset:3px}
.si-case .si-act{margin-top:4px}

/* motion: a very slow drift of the orbit, off for reduced motion */
/* request access form */
.si-form{gap:14px}
.si-field{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0;font-size:14px;color:var(--inv-ink)}
.si-field>span,.si-field legend{font-weight:600;padding:0}
.si-field small{font-weight:400;color:var(--inv-ink-2)}
.si-field input,.si-field textarea{min-height:44px;padding:10px 12px;border:1px solid var(--inv-line);border-radius:var(--r-panel);background:var(--inv-bg);color:var(--inv-ink);font:inherit;font-size:16px}
.si-field textarea{resize:vertical}
.si-opt{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.si-opt input{width:20px;height:20px;accent-color:var(--copper)}
.si-form .si-act{width:100%;cursor:pointer;font:inherit;font-weight:600}
.si-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:no-preference){.si-atom{animation:si-drift 60s ease-in-out infinite alternate}@keyframes si-drift{to{rotate:6deg}}}

/* phone: one column, the arc behind the top */
@media (max-width:760px){
  .si{grid-template-columns:1fr;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:28px}
  .si-panel{max-width:none}
  .si-atom{width:180vw;right:-120vw;top:-100vw;transform:rotate(-12deg);opacity:.75}
}