/* Saved profile on the sign-in screen — 2026-10, design "4 + 1 / B".
   "Continue as" heading, account row between two lines, round avatar with online dot,
   outlined arrow that turns orange on hover. Only restyles .saved-login; the rest of login.html is untouched.
   Previous version: _backup-2026-10/saved-login-2026.prev.css */
/* shared reset for every saved-login variant: drop the old decorations */
body.auth-page .saved-login { animation: sl-in .45s cubic-bezier(.16, 1, .3, 1) both; box-shadow: none !important; }
body.auth-page .saved-login::after { display: none !important; }
body.auth-page .saved-login-avatar img:not([src]), body.auth-page .saved-login-avatar img[src=""] { display: none !important; }
body.auth-page .saved-login-avatar i { display: none !important; }
body.auth-page .saved-login-avatar {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a8a29c'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20c.8-3.9 3.8-6 7.5-6s6.7 2.1 7.5 6z'/%3E%3C/svg%3E") center / 22px no-repeat, #1d1d1f !important;
}
body.auth-page .saved-login-avatar img { border-radius: inherit !important; }
body.auth-page .saved-login button i { display: none !important; }
body.auth-page .saved-login.is-processing { transform: none !important; }
@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sl-spin { to { transform: rotate(360deg); } }
@keyframes sl-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { body.auth-page .saved-login { animation: none !important; } }
/* Kombinace 4 + 1 — "Continue as" heading and divider lines (4), round avatar with online dot and orange arrow (1) */
body.auth-page .saved-login {
  grid-template-columns: 44px minmax(0, 1fr) 40px !important; gap: 12px !important; min-height: 0 !important; margin-top: 34px !important; padding: 12px 6px 12px 4px !important;
  border: 0 !important; border-top: 1px solid #222224 !important; border-bottom: 1px solid #222224 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important;
  transition: background .18s ease !important;
}
body.auth-page .saved-login:hover { background: linear-gradient(90deg, rgba(255, 138, 18, .06), transparent 70%) !important; }
body.auth-page .saved-login::before { content: "CONTINUE AS" !important; display: block !important; position: absolute !important; top: -24px !important; left: 0 !important; bottom: auto !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; color: #6f6f74; font-size: 10px; font-weight: 700; letter-spacing: .12em; animation: none !important; }
body.auth-page .saved-login-avatar { width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important; overflow: visible !important; box-shadow: none !important; }
body.auth-page .saved-login-avatar img { border-radius: 50% !important; }
body.auth-page .saved-login-avatar::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 2; width: 11px; height: 11px; border: 2px solid #0d0d0e; border-radius: 50%; background: #4ade80; }
body.auth-page .saved-login span:nth-child(2) { gap: 2px !important; }
body.auth-page .saved-login small { display: none !important; }
body.auth-page .saved-login strong { color: #f2f2f2 !important; font-size: 15px !important; font-weight: 600 !important; }
body.auth-page .saved-login em { color: #9a9a9e !important; font-size: 0 !important; }
body.auth-page .saved-login em::after { content: "Signed in on this PC"; font-size: 11px; }
body.auth-page .saved-login button {
  width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; justify-content: center !important;
  border: 0 !important; border-radius: 8px !important; background: #ff8a12 !important; color: transparent !important; font-size: 0 !important; box-shadow: none !important;
}
body.auth-page .saved-login button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.auth-page .saved-login button::before { content: ""; width: 16px; height: 16px; background: #140a00; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
body.auth-page .saved-login button:hover { background: #ff9d3a !important; transform: none !important; }
body.auth-page .saved-login button:hover::before { transform: translateX(2px); }
body.auth-page .saved-login.is-processing em { color: #ff9d3a !important; }
body.auth-page .saved-login.is-processing em::after { content: "Signing in…"; }
body.auth-page .saved-login.is-processing button::before { width: 14px !important; height: 14px !important; box-sizing: border-box; border: 2px solid #140a00; border-right-color: transparent; border-radius: 50%; background: none; -webkit-mask: none; animation: sl-spin .7s linear infinite; }
/* varianta b: šipka je jen obrys a zoranžoví až při najetí na řádek */
body.auth-page .saved-login button { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
body.auth-page .saved-login button::before { background: #f2f2f2; }
body.auth-page .saved-login:hover button { background: #ff8a12 !important; box-shadow: none !important; }
body.auth-page .saved-login:hover button::before { background: #140a00; }
body.auth-page .saved-login.is-processing button { background: #ff8a12 !important; box-shadow: none !important; }
