/* Sign-in page, Bob's spec (17 Oct 2026). 8px scale. Grey text is #6B7079 (4.9:1, AA) instead of #8A8F98 (3.3:1) to meet the AA rule. Colours: #0077B3 primary/focus, #333 panel. */
.si-page { height:100dvh; display:grid; grid-template-columns:clamp(480px, 40%, 640px) minmax(0, 1fr); background:#fff; font-family:'Open Sans',system-ui,sans-serif; color:#333; }
@media (max-width:1279px) { .si-page { grid-template-columns:50% minmax(0, 1fr); } }
@media (max-width:899px) { .si-page { grid-template-columns:1fr; } .si-right { display:none; } }
.si-left { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px 72px; overflow-y:auto; min-height:0; background:#fff; box-sizing:border-box; }
.si-box { width:100%; max-width:360px; margin:auto 0; }
.si-copy { position:absolute; bottom:24px; left:0; right:0; text-align:center; font-size:12px; color:#6B7079; }
@media (max-height:640px) { .si-copy { position:static; margin-top:24px; } }

.si-brand { display:flex; align-items:center; gap:8px; }
.si-brand img { width:28px; height:28px; }
.si-name { font-size:16px; font-weight:600; color:#333; }
.si-demo { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; background:#F1F3F5; color:#5F6670; border-radius:4px; padding:2px 6px; }
.si-box h1 { margin:40px 0 0; font-family:Montserrat,'Open Sans',sans-serif; font-size:28px; line-height:34px; font-weight:600; color:#333; }
.si-sub { margin:8px 0 0; font-size:15px; line-height:22px; color:#5F6670; }

.si-seg { margin-top:24px; display:flex; height:40px; box-sizing:border-box; background:#F1F3F5; border-radius:8px; padding:4px; gap:4px; }
.si-seg [role=tab] { flex:1; border:1px solid transparent; border-radius:6px; background:transparent; color:#5F6670; font:500 14px 'Open Sans',sans-serif; cursor:pointer; padding:0; }
.si-seg [role=tab][aria-selected=true] { background:#fff; border-color:#E3E6EA; color:#333; }
.si-seg [role=tab]:focus-visible { outline:2px solid #0077B3; outline-offset:1px; }
.si-panel { margin-top:24px; min-height:316px; }

.si-label { display:block; font-size:14px; line-height:20px; font-weight:500; color:#333; margin:0 0 6px; }
.si-pwgroup { position:relative; margin-top:20px; }
.si-pwgroup .si-forgot { position:absolute; top:0; right:0; line-height:20px; }
.si-input { display:block; width:100%; box-sizing:border-box; height:44px; border:1px solid #D0D5DB; border-radius:8px; padding:0 12px; font:15px 'Open Sans',sans-serif; color:#333; background:#fff; outline:none; }
.si-input:focus { border-color:#0077B3; box-shadow:0 0 0 1px #0077B3; outline:2px solid transparent; }
.si-input:focus-visible { box-shadow:0 0 0 2px #0077B3; border-color:transparent; }
.si-select { appearance:none; padding-right:40px; cursor:pointer; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px; }
.si-select:invalid, .si-select option[value=""] { color:#5F6670; }
.si-help { margin:6px 0 0; font-size:13px; line-height:18px; color:#6B7079; }
.si-after { margin-top:12px; }
.si-passwrap { position:relative; }
.si-passwrap .si-input { padding-right:68px; }
.si-show { position:absolute; right:6px; top:6px; height:32px; padding:0 10px; border:0; background:none; color:#0077B3; font:600 13px 'Open Sans',sans-serif; cursor:pointer; border-radius:6px; }
.si-forgot { border:0; background:none; padding:0; color:#0077B3; font:500 13px 'Open Sans',sans-serif; cursor:pointer; }
.si-forgot:hover, .si-link:hover { text-decoration:underline; }
.si-show:focus-visible, .si-forgot:focus-visible, .si-link:focus-visible, .si-roles button:focus-visible { outline:2px solid #0077B3; outline-offset:2px; }
.si-note { margin:8px 0 0; padding:8px 12px; background:#F1F3F5; border-radius:8px; font-size:13px; line-height:18px; color:#333; }
.si-error { display:flex; gap:8px; align-items:flex-start; margin:16px 0 0; font-size:13px; line-height:18px; color:#C62828; }
.si-error svg { flex:none; }
.si-submit { margin-top:24px; width:100%; height:44px; border:0; border-radius:8px; background:#0077B3; color:#fff; font:600 15px 'Open Sans',sans-serif; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s; }
.si-error + .si-submit { margin-top:16px; }
.si-submit:hover:not([disabled]) { background:#006699; }
.si-submit:focus-visible { outline:2px solid #0077B3; outline-offset:2px; }
.si-submit[disabled] { opacity:.4; cursor:not-allowed; }
.si-submit[aria-busy=true] { opacity:1; cursor:progress; }
.si-spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:si-spin .8s linear infinite; }
@keyframes si-spin { to { transform:rotate(360deg); } }
.si-link { border:0; background:none; padding:0; color:#0077B3; font:600 14px 'Open Sans',sans-serif; cursor:pointer; }
.si-roles { display:grid; gap:20px; margin:24px 0; }
.si-roles h2 { font-size:13px; font-weight:600; color:#5F6670; margin:0 0 8px; }
.si-roles ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.si-roles button { width:100%; min-height:40px; text-align:left; padding:8px 12px; border:1px solid #D0D5DB; border-radius:8px; background:#fff; font:600 14px 'Open Sans',sans-serif; color:#333; cursor:pointer; }
.si-roles button:hover { border-color:#0077B3; background:#F2F8FC; }

/* Right panel: plain #333 now; full-bleed photos later (no radius, border, caption or text). */
.si-right { position:relative; background:#333333; overflow:hidden; min-width:0; }
.si-photo { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background:#333; }
.si-photo.on { opacity:1; }
.si-photo img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; border:0; border-radius:0; }
.si-photo.scrim::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) { .si-photo { transition:none; } .si-spin { animation-duration:2.4s; } .si-submit { transition:none; } }
.si-divider { display:flex; align-items:center; gap:10px; margin:20px 0 16px; color:#999; font-size:13px; }
.si-divider::before,.si-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }
.si-submit--outline { background:#fff; color:#1a73e8; border:1.5px solid #1a73e8; }
.si-submit--outline:hover:not(:disabled) { background:#f0f4ff; }