/* Copyright (c) 2026 Macleod Labs FZ-LLC. Proprietary and confidential. */
/* The sign-in dialog over the landing (js/signin.js, U47): the page's own tokens, so it follows the theme. A modal
   <dialog> sits in the top layer: the page behind keeps its layout and is dimmed and inert. */
.si-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--rule);border-radius:14px;
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow);overflow:auto}
.si-dialog::backdrop{background:rgba(10,11,13,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.si-box{display:flex;flex-direction:column;gap:12px;padding:28px 24px 24px}
.si-title{margin:0;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15;letter-spacing:-.01em}
.si-intro{margin:-4px 0 4px;color:var(--muted);font-size:15px}
.si-intro:empty{display:none}
.si-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.si-close:hover{background:var(--ground);color:var(--ink)}
.si-dialog[data-face="busy"] .si-close{display:none}
.si-github,.si-alt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:0 14px;border-radius:9px;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.si-github{border:1px solid var(--ctrl);background:var(--ctrl);color:var(--on-ctrl)}
.si-alt{border:1px solid var(--rule);background:transparent;color:var(--ink)}
.si-alt:hover{border-color:var(--muted)}
.si-github svg{width:18px;height:18px;fill:currentColor}
.si-link{align-self:center;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;text-decoration-thickness:1px;cursor:pointer}
.si-link:hover{color:var(--ink)}
.si-github:disabled,.si-alt:disabled,.si-link:disabled{opacity:.55;cursor:default}
.si-or{display:flex;align-items:center;gap:10px;margin:4px 0 0;color:var(--muted);font-size:12.5px}
.si-or::before,.si-or::after{content:"";flex:1;border-top:1px solid var(--rule)}
.si-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.si-field input{min-height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:9px;background:var(--ground);color:var(--ink);font:inherit;font-size:16px}
.si-field input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
#siCode{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
.si-msg{min-height:1.4em;margin:0;font-size:14px}
.si-msg:empty{min-height:0}
.si-msg.bad{color:#C2362B}
.si-msg.ok{color:var(--ok)}
:root[data-theme="dark"] .si-msg.bad{color:#FF6B5E}
.si-dialog[data-face="busy"] .si-box,.si-dialog[data-face="failed"] .si-box{align-items:center;text-align:center;padding:36px 24px 30px}
.si-spin{width:36px;height:36px;border:3px solid var(--rule);border-top-color:var(--amber);border-radius:50%;animation:si-spin .8s linear infinite}
@keyframes si-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.si-spin{animation:none;border-top-color:var(--amber);border-right-color:var(--amber)}}
.si-dialog :focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.si-dialog button:focus:not(:focus-visible){outline:none}
/* With no control to focus (the busy face), the browser focuses the dialog itself: no ring on the card, so it keeps
   the same border and shadow as every other face. */
.si-dialog:focus,.si-dialog:focus-visible{outline:none}