/* Evidencesway sign-in (auth.js; 2026-11-02, qa/PERF_LOG.md #53, SPEC.md §13). Uses the tokens of styles.css only, so
   light / dark follow the site. A bottom sheet up to 40rem wide (phones, the 400 px panel), a centred card above that. */

.sw-sheet-back {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(11, 11, 12, 0.45);
  opacity: 0; transition: opacity 0.18s ease;
}
.sw-sheet-back[hidden] { display: none; }
.sw-sheet-back.is-open { opacity: 1; }
.sw-sheet {
  width: 100%; max-width: 28rem; box-sizing: border-box;
  margin: 0; padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lift);
  transform: translateY(16px); transition: transform 0.2s ease;
  outline: none;
}
.sw-sheet-back.is-open .sw-sheet { transform: none; }
@media (min-width: 40rem) {
  .sw-sheet-back { align-items: center; padding: var(--s4); }
  .sw-sheet { border-bottom: 1px solid var(--line); border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sw-sheet-back, .sw-sheet { transition: none; } }
html.sw-sheet-on { overflow: hidden; }

.sw-sheet-title { margin: 0 0 var(--s2); font-family: var(--font-sans); font-size: 1.25rem; font-weight: 650; line-height: 1.25; }
.sw-sheet-why { margin: 0 0 var(--s4); color: var(--ink-2); }
.sw-sheet-msg { margin: 0 0 var(--s3); color: var(--brand-ink); font-weight: 500; }
.sw-sheet-fine { margin: var(--s3) 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.sw-sheet-fine a { color: inherit; text-decoration: underline; }
.sw-later { width: 100%; margin-top: var(--s3); }

/* "Continue with Google": white button, the G, dark text (Google's sign-in button look) in both themes */
.sw-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 2.875rem; padding: 0 var(--s4);
  border: 1px solid #dadce0; border-radius: 999px; background: #ffffff; color: #1f1f1f;
  font: 500 0.9375rem/1.2 var(--font-sans); cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.sw-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25); }
.sw-google:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-google[hidden] { display: none; }
.sw-google-small { width: auto; min-height: 2.5rem; font-size: 0.875rem; }
.sw-g { width: 18px; height: 18px; flex: none; }

.sw-wait p { margin: 0 0 var(--s2); color: var(--ink-2); }
.sw-wait a { color: var(--brand-ink); }
.sw-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: var(--s2); vertical-align: -2px;
  border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%;
  animation: sw-spin 0.8s linear infinite;
}
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* the header: "Sign in", or the initial with a menu (the site header sits on the dark hero in both themes, like .top .btn-icon) */
.sw-acct { flex: none; position: relative; }
.top .sw-acct:not(.is-in) { background: transparent; color: var(--hero-ink); border-color: rgba(255, 255, 255, 0.18); min-height: 2.5rem; }
.top .sw-acct:not(.is-in):hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.34); }
.sw-acct.is-in {
  border-radius: 50%; background: var(--grad-diag); color: var(--on-brand); border: 0;
  font-weight: 650; font-size: 1rem;
}
.sw-acct.is-in:hover { filter: brightness(1.06); background: var(--grad-diag); }
.nav-right, .pn-actions { position: relative; }
.sw-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 900;
  min-width: 15rem; max-width: min(20rem, calc(100vw - 32px)); padding: var(--s2);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lift);
}
.sw-menu p { margin: 0; padding: var(--s2) var(--s3); }
.sw-menu-who { font-size: 0.8125rem; color: var(--ink-3); line-height: 1.4; overflow-wrap: anywhere; }
.sw-menu-who strong { color: var(--ink); font-size: 0.9375rem; }
.sw-menu-mail { display: block; }
.sw-menu-left { font-size: 0.875rem; color: var(--ink-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s1) !important; }
.sw-menu-left:empty { display: none; }
.sw-menu-item {
  display: block; width: 100%; padding: var(--s2) var(--s3); border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); text-align: left; font: inherit; text-decoration: none; cursor: pointer;
}
.sw-menu-item:hover, .sw-menu-item:focus-visible { background: var(--surface-2); outline: none; }
.sw-menu-danger { color: var(--v-unsupported); }

.sw-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1100; transform: translate(-50%, 12px);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--surface); font-size: 0.875rem;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.sw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.sw-signin-box .sw-google { margin-top: var(--s1); }

/* /account/delete */
.sw-delete-box { max-width: 40rem; }
.sw-delete-box .sw-google { max-width: 22rem; }
.sw-del { border-color: var(--v-unsupported); color: var(--v-unsupported); }
.sw-done { font-weight: 600; }

/* the extension drawer: the account button at the top right of the panel (the drawer's own header has no room for it) */
.sl-panel.sl-drawer .pn-top { position: relative; }
.sw-acct-slot { position: absolute; top: var(--s2); right: var(--s4); z-index: 5; display: flex; }
.sl-panel.sl-drawer .pn-top:has(.sw-acct-slot) .pn-source { padding-right: 6.5rem; }
.sw-acct-slot .sw-acct.is-in { width: 2.25rem; min-height: 2.25rem; font-size: 0.9375rem; }

/* (2026-11-02, PERF_LOG #54) "I'm not a robot" before the one anonymous report (the vendored ALTCHA widget) */
.sw-captcha-box .sw-cap-title { margin: 0 0 var(--s2); font-weight: 600; color: var(--ink); }
.sw-captcha-box .sw-cap-note { margin: var(--s2) 0 0; font-size: 0.875rem; color: var(--ink-2); }
.sw-cap-slot { min-height: 3.5rem; }
.sw-cap-slot altcha-widget {
  --altcha-max-width: 320px; --altcha-border-radius: 10px;
  --altcha-color-base: var(--surface); --altcha-color-text: var(--ink); --altcha-color-border: var(--line-strong);
  --altcha-color-border-focus: var(--brand); --altcha-color-active: var(--brand); --altcha-color-error-text: var(--v-unsupported);
}
/* the gentle line under the anonymous report */
.sw-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); }
.sw-nudge .sw-google { width: auto; }