/* The signed-in user card, and the role chips it shares with the account pages.
 *
 * Separate from auth.css on purpose. auth.css styles a *page* — it sets a body
 * padding, a 460px card width, and bare `input`, `button`, `table` and `label`
 * rules — which is right for the six single-column account pages it was written
 * for and wrong anywhere else. The dashboard and the status page carry their own
 * complete stylesheets and only want the card, so linking auth.css into them
 * dropped a page layout on top of an application layout: the dashboard's cards
 * inherited `width: min(460px, 100%)` and collapsed to a third of the screen,
 * the body gained a 24px inset, the search field grew a 16px top margin and
 * 12px padding, and every chart container picked up a second border.
 *
 * So the shared piece lives here, every selector is either .uc6-* or .chip, and
 * nothing in this file can reach an element the host page did not opt in to.
 *
 * Tokens come from /assets/theme.css, which every page linking this file also
 * links and which defines both themes at once. They are named without fallbacks
 * on purpose: the fallbacks here used to be dark-only literals, so on a light
 * page any one that fired painted a dark chip onto a light canvas — a failure
 * that reads as a design decision rather than as a missing stylesheet.
 */

/* ── Role and status chips ──────────────────────────────────────────────────
   Colour carries meaning, so each chip also carries a word — a chip that is
   only a colour is unreadable to anyone who cannot see it. */
.chip {
  display: inline-block; font-size: 12px; padding: 2px 9px;
  border-radius: var(--r-pill, 9999px);
  border: 1px solid var(--hairline-strong);
  color: var(--body); background: var(--canvas-soft);
  white-space: nowrap;
}
.chip.admin   { color: var(--iris); border-color: color-mix(in oklab, var(--iris) 35%, transparent);
                background: var(--iris-soft); }
.chip.analyst { color: var(--azure); border-color: color-mix(in oklab, var(--azure) 35%, transparent);
                background: var(--azure-soft); }
.chip.viewer  { color: var(--body); }
.chip.pending { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent);
                background: var(--warn-soft); }
.chip.active  { color: var(--good); border-color: color-mix(in oklab, var(--good) 35%, transparent);
                background: var(--success-soft); }
.chip.suspended { color: var(--critical); border-color: color-mix(in oklab, var(--critical) 35%, transparent);
                  background: var(--critical-soft); }

/* ── The card ─────────────────────────────────────────────────────────────
   Built by /assets/app.js into any #uc6-user-card element. */

.uc6-user { position: relative; display: inline-block; }

.uc6-user-btn {
  display: flex; align-items: center; gap: 9px;
  background: var(--canvas-soft); color: var(--body);
  border: 1px solid var(--hairline); border-radius: var(--r-pill, 9999px);
  padding: 5px 12px 5px 5px; font: inherit; font-size: 13.5px; line-height: 20px;
  cursor: pointer;
}
.uc6-user-btn:hover { background: var(--surface-3); color: var(--ink); }

.uc6-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .3px; font-weight: 500;
  background: var(--surface-3); color: var(--ink);
}
/* Tinted by role, but the menu also spells the role out — colour is never the
   only carrier of the information. */
.uc6-avatar[data-role="admin"]   { background: var(--iris-soft); color: var(--iris); }
.uc6-avatar[data-role="analyst"] { background: var(--azure-soft); color: var(--azure); }
.uc6-avatar[data-role="pending"] { background: var(--warn-soft); color: var(--warn); }

.uc6-user-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc6-caret { color: var(--mute); font-size: 10px; }

.uc6-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 232px; padding: 6px;
  background: var(--canvas-card); border: 1px solid var(--hairline-strong);
  border-radius: 10px; box-shadow: var(--shadow-2);
  display: none; text-align: left;
}
.uc6-user.open .uc6-menu { display: block; }

.uc6-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.uc6-menu-name { font-size: 14px; line-height: 20px; color: var(--ink); }
.uc6-menu-mail {
  font-size: 12.5px; line-height: 18px; color: var(--mute);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  word-break: break-all;
}

.uc6-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 6px; border: 0; background: none;
  color: var(--body); font: inherit; font-size: 13.5px; line-height: 20px;
  text-decoration: none; cursor: pointer;
}
.uc6-menu-item:hover { background: var(--canvas-soft); color: var(--ink); }
.uc6-menu-item[aria-current="page"] { color: var(--ink); background: var(--canvas-soft); }
.uc6-signout {
  color: var(--critical); margin-top: 6px;
  border-top: 1px solid var(--hairline); border-radius: 0 0 6px 6px;
}
.uc6-signout:hover { background: var(--critical-soft); color: var(--critical); }

.uc6-signin {
  display: inline-block; padding: 7px 16px; border-radius: var(--r-pill, 9999px);
  background: var(--primary); color: var(--on-primary);
  text-decoration: none; font-size: 13.5px; line-height: 20px;
}
.uc6-signin:hover { background: color-mix(in oklab, var(--primary) 90%, var(--ink-muted)); }