/* SarvaVeda — sign-in chrome. Companion to /assets/auth.js.
 *
 * Deliberately small and unopinionated: it styles the button, the signed-in
 * chip and the notes, and nothing else. Pages keep their own palettes; these
 * rules read from custom properties where a page defines them and fall back to
 * the house ivory/indigo otherwise, so the same chip sits correctly on the
 * apps page and on the lexicon without either being restyled.
 *
 * VKG, 2026-08-19: no dark theme anywhere on this site, not even behind a
 * media query. Dark letters on a bright ground.
 */

.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .35rem .35rem .5rem;
  border: 1px solid var(--line, #D9CDA8);
  border-radius: 999px;
  background: var(--card, #fff);
  font-size: .88rem;
  line-height: 1.2;
  max-width: 100%;
}

.sv-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ivory-deep, #F3EDDD);
}

.sv-who {
  font-weight: 600;
  color: var(--indigo, #1D2B5E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16ch;
}

.sv-role {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold, #A8802C);
  border-left: 1px solid var(--line, #D9CDA8);
  padding-left: .55rem;
  white-space: nowrap;
}

.sv-out {
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  padding: .3rem .75rem;
  border: 1px solid var(--line, #D9CDA8);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #26221A);
}
.sv-out:hover { background: var(--ivory-deep, #F3EDDD); }
.sv-out:focus-visible {
  outline: 3px solid var(--gold-bright, #C9A227);
  outline-offset: 2px;
}

.sv-note {
  font-size: .86rem;
  color: var(--ink-2, #5A5344);
  margin: .4rem 0 0;
}
.sv-error { color: var(--maroon, #7A1E1E); }

/* A gated block is `hidden` in the markup and revealed by script. Belt and
 * braces: some older stylesheets set `display` on generic selectors and win
 * over the hidden attribute, which would show a members-only panel to
 * everyone for the moment before the script runs. */
[hidden] { display: none !important; }