/* Shared staff sign-in (scripts/signIn.js) — design_handoff_audit_redesigns Area 6.
   Every rule is scoped under .si-root so host pages' global input/button styles can't leak in. */

.si-root {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: var(--app-bg, #F4F7FA);
  font-family: var(--font-body); color: var(--text-body); -webkit-font-smoothing: antialiased;
}
.si-root *, .si-root *::before, .si-root *::after { box-sizing: border-box; }
.si-root [hidden] { display: none !important; }

.si-root .si-frame {
  width: 100%; max-width: 960px; min-height: 640px; margin: auto;
  display: grid; grid-template-columns: 400px 1fr;
  background: #fff; border-radius: var(--radius-frame, 18px); overflow: hidden;
  box-shadow: var(--shadow-frame);
}

/* ── Left brand panel ── */
.si-root .si-brand {
  background: linear-gradient(180deg, #0C2C49, #0A2135);
  padding: 40px; display: flex; flex-direction: column; gap: 18px;
}
.si-root .si-logo-tile {
  width: 64px; height: 64px; border-radius: 16px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.si-root .si-logo-tile img { width: 46px; height: 46px; object-fit: contain; }
.si-root .si-biz { font: 800 24px/1.2 var(--font-display); color: #fff; }
.si-root .si-brand-spacer { flex: 1; }
.si-root .si-tool { display: flex; flex-direction: column; gap: 6px; }
.si-root .si-tool-kicker { font: 600 12px var(--font-mono); color: var(--mist); letter-spacing: .05em; }
.si-root .si-tool-name { font: 700 22px/1.2 var(--font-display); color: #fff; }
.si-root .si-tool-sub { font: 500 14px var(--font-body); color: #9FB6CC; }

/* ── Right pane ── */
.si-root .si-main { padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; }
.si-root .si-pane { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.si-root .si-title { margin: 0; font: 800 26px/1.2 var(--font-display); color: var(--text-body); }
.si-root .si-text { margin: 0; font: 500 15px/1.5 var(--font-body); color: var(--text-secondary); }

.si-root .si-field { display: flex; flex-direction: column; gap: 6px; }
.si-root .si-field label { font: 600 13.5px var(--font-body); color: var(--text-secondary); }
.si-root .si-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.si-root .si-field input {
  width: 100%; height: 50px; margin: 0; padding: 0 14px;
  border: 1px solid #D5DDE5; border-radius: var(--radius-control); background: #fff;
  font: 500 15.5px var(--font-body); color: var(--text-body); outline: none; box-shadow: none;
}
.si-root .si-field input:focus { border: 1.5px solid var(--signal-blue); padding: 0 13.5px; }
.si-root .si-input-wrap { position: relative; }
.si-root .si-input-wrap input { padding-right: 72px; }
.si-root .si-input-wrap input:focus { padding-right: 71.5px; }
.si-root .si-show {
  position: absolute; right: 4px; top: 4px; bottom: 4px; min-width: 60px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 13px var(--font-body); color: var(--text-muted);
}
.si-root .si-show:hover { background: var(--app-bg); }

.si-root .si-invalid input,
.si-root .si-invalid input:focus { border: 1.5px solid var(--red); background: #FFF8F8; padding-left: 13.5px; }
.si-root .si-error { font: 600 13.5px/1.4 var(--font-body); color: var(--red-text); }
.si-root .si-error:empty { display: none; }
.si-root .si-caps {
  align-self: flex-start; background: var(--amber-tint); border-radius: 9px; padding: 8px 10px;
  font: 600 13px var(--font-body); color: #8A5A0A;
}

/* ── Buttons ── */
.si-root .si-btn {
  height: 50px; width: 100%; margin: 0; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer;
  font: 700 15.5px var(--font-body); text-decoration: none; box-shadow: none;
  transition: filter .12s, transform .06s;
}
.si-root .si-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.94); }
.si-root .si-btn:disabled { opacity: .6; cursor: default; }
.si-root .si-btn-primary { background: var(--signal-blue); color: #fff; }
.si-root .si-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.si-root .si-btn-outline { background: #fff; border-color: #D5DDE5; color: var(--text-secondary); font-size: 15px; }
.si-root .si-btn-outline:hover:not(:disabled) { background: var(--app-bg); }
.si-root .si-btn-navy { background: var(--harbor-navy); color: #fff; font-size: 14px; height: 46px; }
.si-root .si-btn-quiet { background: var(--app-bg); border-color: var(--card-border-alt); color: var(--text-secondary); font-size: 14px; height: 46px; }

.si-root .si-link {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: 600 13.5px var(--font-body); color: var(--signal-blue); text-decoration: none;
}
.si-root .si-link:hover { color: var(--teal-text); }
.si-root .si-back { align-self: flex-start; }

.si-root .si-or { display: flex; align-items: center; gap: 12px; font: 500 13px var(--font-body); color: var(--text-faint); }
.si-root .si-or span { flex: 1; height: 1px; background: var(--card-border-alt); }
.si-root .si-footer { font: 500 13px var(--font-body); color: var(--text-faint); }
.si-root .si-footer a { color: var(--signal-blue); font-weight: 600; text-decoration: none; }

/* ── Message panels (offline / reset sent / locked / notice) ── */
.si-root .si-panel { border-radius: var(--radius-control); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.si-root .si-panel-title { font: 700 15px var(--font-body); }
.si-root .si-panel-text { font: 500 13.5px/1.45 var(--font-body); }
.si-root .si-panel-neutral { background: var(--status-neutral-bg); color: var(--text-body); }
.si-root .si-panel-neutral .si-panel-text, .si-root .si-notice { color: #5A6B7B; }
.si-root .si-notice { font: 600 13.5px/1.45 var(--font-body); }
.si-root .si-panel-green { background: var(--status-success-bg); }
.si-root .si-panel-green .si-panel-title { color: #1F6B3F; }
.si-root .si-panel-green .si-panel-text { color: #2E6B48; }
.si-root .si-panel-amber { background: var(--amber-tint); }
.si-root .si-panel-amber .si-panel-title { color: #7A4E08; }
.si-root .si-panel-amber .si-panel-text { color: #8A5A0A; }

/* ── Access needed (D): single centred card, no brand panel ── */
.si-root .si-frame-access {
  grid-template-columns: 1fr; max-width: 480px; min-height: 0;
  border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
}
.si-root .si-frame-access .si-brand { display: none; }
.si-root .si-frame-access .si-main { padding: 36px; }
.si-root .si-access-brand { display: flex; align-items: center; gap: 10px; font: 700 14px var(--font-display); }
.si-root .si-access-brand img { width: 28px; height: 28px; object-fit: contain; }
.si-root .si-access-title { font-size: 24px; }
.si-root .si-admins { background: var(--app-bg); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.si-root .si-admins-label { font: 600 13px var(--font-body); color: var(--text-muted); }
.si-root .si-admins-list { display: flex; flex-direction: column; gap: 10px; }
.si-root .si-admin { display: flex; align-items: center; gap: 10px; }
.si-root .si-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--pill-in-progress-bg); color: var(--signal-blue); font: 700 11.5px var(--font-body);
}
.si-root .si-admin-name { font: 600 14px var(--font-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-root .si-admin .si-link { margin-left: auto; }
.si-root .si-access-actions { display: flex; gap: 10px; }
.si-root .si-access-actions .si-btn { flex: 1; }

/* ── Phone / narrow tablet: brand panel becomes a compact header ── */
@media (max-width: 760px) {
  .si-root { padding: 0; align-items: stretch; background: #fff; }
  .si-root .si-frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100%; border-radius: 0; box-shadow: none; }
  .si-root .si-brand {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 18px;
    display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; align-items: center;
  }
  .si-root .si-logo-tile { width: 48px; height: 48px; border-radius: 12px; grid-row: span 2; }
  .si-root .si-logo-tile img { width: 34px; height: 34px; }
  .si-root .si-biz { font-size: 18px; }
  .si-root .si-brand-spacer { display: none; }
  .si-root .si-tool { flex-direction: row; align-items: baseline; gap: 6px; }
  .si-root .si-tool-kicker { font-size: 11px; }
  .si-root .si-tool-name { font: 700 14px var(--font-body); color: #DCE7F1; }
  .si-root .si-tool-sub { display: none; }
  .si-root .si-main { padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); justify-content: flex-start; }
  .si-root .si-title { font-size: 24px; }
  .si-root .si-frame-access { max-width: none; border: 0; }
  .si-root .si-frame-access .si-main { padding: 28px 20px; }
  .si-root .si-access-actions { flex-direction: column-reverse; }
}