/* Vie2profs accounts: header buttons, account menu and sign-in dialog. */
.auth-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.auth-nav-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; margin: 0; padding: 6px 14px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ink, #171717);
  font: 13px/20px var(--body-font, sans-serif); letter-spacing: .5px;
  white-space: nowrap; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.auth-nav-button:hover { background: #edf1f7; color: var(--blue, #024bc8); }
.auth-nav-primary { background: var(--blue, #024bc8); color: #fff; }
.auth-nav-primary:hover { background: #003fa9; color: #fff; transform: translateY(-1px); }
.auth-nav-button:focus-visible, .auth-avatar:focus-visible, .auth-menu button:focus-visible,
.auth-dialog :is(button, input):focus-visible { outline: 2px solid var(--blue, #024bc8); outline-offset: 2px; }

.auth-account { position: relative; }
.auth-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 5px; background: var(--blue, #024bc8); color: #fff;
  font: 700 17px/1 'OffBit', monospace; letter-spacing: 0; cursor: pointer;
}
.auth-avatar:hover { background: #003fa9; }
.auth-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 1000;
  display: flex; flex-direction: column; width: max-content; min-width: 230px; max-width: min(320px, calc(100vw - 24px));
  padding: 14px; border: 1px solid var(--line, #c8cbd1); border-radius: 8px; background: #fff;
  box-shadow: 0 14px 36px #101d3b24; animation: auth-enter .16s ease both;
}
.auth-menu[hidden] { display: none; }
.auth-menu p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-menu .auth-menu-name { color: var(--blue, #024bc8); font-family: 'OffBit', monospace !important; font-size: 20px !important; line-height: 24px !important; letter-spacing: 0 !important; }
.auth-menu .auth-menu-email { color: var(--ink, #171717); }
.auth-menu .auth-menu-provider { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e4e5e8; color: var(--muted, #555b65); }
.auth-menu .auth-menu-sync { margin: -4px 0 10px; color: #2f6b3a; font-size: 14px !important; white-space: normal; }
.auth-menu .auth-menu-sync[hidden] { display: none; }
.auth-menu .auth-menu-sync[data-sync-state="syncing"], .auth-menu .auth-menu-sync[data-sync-state="saving"] { color: var(--muted, #555b65); }
.auth-menu .auth-menu-sync[data-sync-state="offline"], .auth-menu .auth-menu-sync[data-sync-state="error"], .auth-menu .auth-menu-sync[data-sync-state="unavailable"] { color: #a4401a; }
.auth-avatar { position: relative; }
.auth-avatar[data-sync-state="offline"]::after, .auth-avatar[data-sync-state="error"]::after, .auth-avatar[data-sync-state="unavailable"]::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #e0782a;
}
.auth-menu button {
  margin: 0; padding: 7px 8px; border: 0; border-radius: 4px; background: transparent;
  color: var(--ink, #171717); text-align: left; cursor: pointer;
}
.auth-menu button:hover { background: #edf1f7; color: var(--blue, #024bc8); }

.auth-dialog {
  width: min(440px, calc(100% - 32px)); max-height: calc(100svh - 32px);
  padding: 36px 36px 28px; border: 1px solid #fff; border-radius: 10px;
  background: #f9f9fb; color: var(--ink, #171717); overflow: auto;
  font-family: var(--body-font, sans-serif);
}
.auth-dialog[open] { animation: auth-enter .2s ease both; }
.auth-dialog::backdrop { background: #101d3b66; backdrop-filter: blur(5px); }
body:has(.auth-dialog[open]) { overflow: hidden; }
.auth-close {
  position: absolute; right: 12px; top: 12px; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted, #555b65); cursor: pointer;
}
.auth-close:hover { background: var(--background, #e4e5e8); }
.auth-close svg { width: 20px; height: 20px; }
.auth-symbol { display: block; width: 32px; height: 32px; margin: 0 0 18px; color: var(--blue, #024bc8); }
.auth-dialog h2 { margin: 0 0 8px; color: var(--blue, #024bc8); font: 700 38px/1 'OffBit', monospace; }
.auth-dialog .auth-intro { margin: 0 0 20px; color: var(--muted, #555b65); }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 44px; margin: 0; padding: 10px 16px;
  border: 1px solid var(--line, #c8cbd1); border-radius: 5px; background: #fff; color: #1f1f1f; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.auth-google:hover:not(:disabled) { border-color: var(--blue, #024bc8); background: #f5f8fe; }
.auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-separator { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted, #555b65); }
.auth-separator::before, .auth-separator::after { content: ''; flex: 1; height: 1px; background: var(--line, #c8cbd1); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field > span { color: var(--ink, #171717); }
.auth-field input {
  width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--line, #c8cbd1); border-radius: 5px; background: #fff; color: var(--ink, #171717);
}
.auth-field input:focus { border-color: var(--blue, #024bc8); outline: none; box-shadow: 0 0 0 3px #024bc824; }
.auth-field input[aria-invalid="true"] { border-color: #c62828; }
.auth-field-error { min-height: 0; color: #c62828; }
.auth-field-error:empty { display: none; }
.auth-dialog .auth-hint { margin: -4px 0 0; color: var(--muted, #555b65); }
.auth-dialog .auth-message { margin: 0; padding: 10px 12px; border-radius: 5px; background: #fdecec; color: #a11d1d; }
.auth-dialog .auth-message[hidden] { display: none; }
.auth-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: 46px; margin: 4px 0 0; padding: 11px 22px; border: 0; border-radius: 5px;
  background: var(--blue, #024bc8); color: #fff; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.auth-submit:hover:not(:disabled) { background: #003fa9; transform: translateY(-1px); }
.auth-submit.is-busy { opacity: .7; cursor: progress; }
.auth-dialog button:disabled { cursor: not-allowed; }
.auth-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; text-align: center; color: var(--muted, #555b65); }
.auth-footer p { margin: 0; }
.auth-link { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--blue, #024bc8); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-link:hover { color: #003fa9; }

@keyframes auth-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .auth-nav { gap: 2px; }
  .auth-nav-button { min-height: 34px; padding: 5px 8px; font-size: 12px !important; letter-spacing: .15px !important; }
  .auth-dialog { padding: 30px 20px 22px; }
  .auth-dialog h2 { font-size: 32px; }
}
@media print { .auth-nav, .auth-dialog { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .auth-menu, .auth-dialog[open] { animation: none; } }