/* ============================================================
   Skybound — Login / Landing (Operations Console reskin)
   Restyles index.html's existing login.css classes onto the
   design system. PUBLIC page: no sidebar/app shell, and base.css
   is dark-only and does NOT react to data-theme, so every visible
   element is re-tokenised here with design-system vars → BOTH
   themes work. Load AFTER base.css + login.css.
   ============================================================ */

/* ---------- background: matte slate + blueprint dot grid ---------- */
.page-bg{background-color:var(--bg);color:var(--ink);font-family:var(--font-sans)}
.page-bg::before{
  background-image:radial-gradient(circle,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;opacity:1;
}
/* slightly stronger dots so the grid reads on the light palette too */
[data-theme="light"] .page-bg::before{
  background-image:radial-gradient(circle,rgba(20,50,90,.10) 1px,transparent 1px);
}
.page-bg::after{
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 9%,transparent) 0%,transparent 65%);
}

/* ---------- auth card → .panel ---------- */
.login-card,
.modal-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ---------- brand: mark square + IBM Plex wordmark ---------- */
.brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}
.brand-icon{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1.6px solid var(--ink);border-radius:0;          /* blueprint mark, hard edges */
  color:var(--accent);font-size:16px;background:transparent;
}
.brand-name{
  font-family:var(--font-sans);font-weight:700;font-size:18px;
  letter-spacing:-.01em;color:var(--ink);
}
/* tuck the theme toggle into the brand row's far corner */
.brand [data-theme-toggle]{margin-left:auto}

/* ---------- headings ---------- */
.login-heading{font-family:var(--font-sans);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.login-sub{color:var(--muted)}

/* ---------- field labels → mono uppercase (.field-label) ---------- */
.form-group label{
  font:600 9.5px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);
}

/* ---------- inputs → .input ---------- */
.input-icon-wrap input{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-family:var(--font-sans);
}
.input-icon-wrap input::placeholder{color:var(--muted)}
.input-icon-wrap input:hover{border-color:var(--line-strong);background:var(--bg)}
.input-icon-wrap input:focus{
  border-color:var(--accent);background:var(--bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.input-icon{color:var(--muted)}
.input-icon-wrap input:focus + .input-icon,
.input-icon-wrap:focus-within .input-icon{color:var(--accent)}

/* autofill — theme-aware (login.css hardcodes a dark fill) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}

/* ---------- password toggle ---------- */
.pw-toggle{color:var(--muted)}
.pw-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* ---------- remember-me toggle (track → green when on) ---------- */
.toggle-label{color:var(--muted)}
.toggle-track{background:var(--panel-3);border:1px solid var(--line)}
.toggle-track::after{background:var(--muted)}
.toggle-switch input:checked ~ .toggle-track{background:var(--ok);border-color:transparent}
.toggle-switch input:checked ~ .toggle-track::after{background:#fff}

/* ---------- links ---------- */
.link-muted{color:var(--muted)}
.link-muted:hover{color:var(--ink)}
.link-primary{color:var(--accent);font-weight:600}
.link-primary:hover{color:var(--accent);filter:brightness(1.1)}

/* ---------- error / alert ---------- */
.error-box{
  background:color-mix(in srgb,var(--bad) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);
  border-radius:var(--r-sm);color:var(--bad);
}
.error-box i{color:var(--bad)}
.form-group.error .input-icon-wrap input{
  border-color:var(--bad);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 14%,transparent);
}
.form-group .field-error{font:500 11px var(--font-mono);color:var(--bad)}

/* ---------- primary action → .btn-primary (green) ---------- */
.btn-auth{
  background:var(--ok);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  color:var(--ok-ink);
  box-shadow:none;
  font-weight:600;letter-spacing:.01em;
}
.btn-auth::before{display:none}
.btn-auth:hover{
  background:var(--ok);filter:brightness(1.06);
  box-shadow:none;transform:none;
}
.btn-auth:active{filter:brightness(.98);transform:none;box-shadow:none}
.btn-auth:disabled{opacity:.45;filter:none}
.btn-spinner{border:2px solid color-mix(in srgb,var(--ok-ink) 35%,transparent);border-top-color:var(--ok-ink)}

/* ---------- divider ---------- */
.divider::before{background:var(--line)}
.divider span{background:var(--panel);color:var(--muted)}

/* ---------- request access ---------- */
.request-text{color:var(--muted)}

/* ---------- registration modal ---------- */
.modal-overlay{
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal-close{color:var(--muted);border-radius:var(--r-sm)}
.modal-close:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.reg-success-icon{color:var(--ok);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--ok) 38%,transparent))}
.reg-success h3{color:var(--ink)}
.reg-success p{color:var(--muted)}