/* /Components/Account/AccountPage.razor.rz.scp.css */
/* Top-aligned with fixed padding so every page's frame sits the same distance below the
   nav regardless of content length. The top gap is smaller than the bottom because the
   nav already sits directly above. */
.account-page[b-7xp4ovg9qf] {
  padding-block: clamp(1.1rem, 2.5vw, 1.75rem) clamp(2.5rem, 7vw, 5.5rem);
  padding-inline: var(--page-gutter);
}

.account-frame[b-7xp4ovg9qf] {
  margin-inline: auto;
  width: min(100%, 36rem);
}

.account-frame-wide[b-7xp4ovg9qf] {
  width: min(100%, 56rem);
}

.account-ornament[b-7xp4ovg9qf] {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  margin: 0 auto 1.5rem;
  width: min(13rem, 55vw);
}

.account-ornament[b-7xp4ovg9qf]::before,
.account-ornament[b-7xp4ovg9qf]::after {
  background: linear-gradient(90deg, transparent, var(--gold));
  content: "";
  flex: 1;
  height: 1px;
}

.account-ornament[b-7xp4ovg9qf]::after {
  transform: scaleX(-1);
}

.account-ornament span[b-7xp4ovg9qf] {
  border: 1px solid var(--gold-light);
  height: 6px;
  transform: rotate(45deg);
  width: 6px;
}

.account-title[b-7xp4ovg9qf] {
  font-size: clamp(2.35rem, 8vw, 3.75rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  text-align: center;
}


.account-introduction[b-7xp4ovg9qf] {
  color: var(--color-muted);
  font: 400 1.08rem/1.55 var(--font-display);
  margin: 1rem auto 1.5rem;
  max-width: 31rem;
  text-align: center;
}

.account-introduction[b-7xp4ovg9qf]  strong {
  color: var(--color-ivory);
  font-weight: 600;
}

.account-card[b-7xp4ovg9qf] {
  background: var(--surface-bg);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  position: relative;
}

.account-card[b-7xp4ovg9qf]::before,
.account-card[b-7xp4ovg9qf]::after {
  border-color: var(--gold-light);
  border-style: solid;
  content: "";
  height: 0.75rem;
  opacity: 0.65;
  pointer-events: none;
  position: absolute;
  width: 0.75rem;
}

.account-card[b-7xp4ovg9qf]::before {
  border-width: 1px 0 0 1px;
  left: 0.45rem;
  top: 0.45rem;
}

.account-card[b-7xp4ovg9qf]::after {
  border-width: 0 1px 1px 0;
  bottom: 0.45rem;
  right: 0.45rem;
}

.account-card[b-7xp4ovg9qf]  .account-form {
  display: grid;
  gap: 1.1rem;
}

.account-card[b-7xp4ovg9qf]  .account-field {
  display: grid;
  gap: 0.45rem;
}

.account-card[b-7xp4ovg9qf]  label {
  color: var(--color-ivory);
  font: var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-card[b-7xp4ovg9qf]  .account-checkbox {
  align-items: center;
  display: flex;
  gap: 0.7rem;
}

.account-card[b-7xp4ovg9qf]  .account-checkbox label,
.account-card[b-7xp4ovg9qf]  label.account-checkbox {
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: none;
}

.account-card[b-7xp4ovg9qf]  input[type="checkbox"] {
  accent-color: var(--gold);
  height: 1.05rem;
  width: 1.05rem;
}

.account-card[b-7xp4ovg9qf]  .account-message {
  border-left: 2px solid currentColor;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  overflow-wrap: anywhere;
  padding: 0.65rem 0.8rem;
}

.account-card[b-7xp4ovg9qf]  .account-message[role="alert"] {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.account-card[b-7xp4ovg9qf]  .account-message[role="status"] {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.account-card[b-7xp4ovg9qf]  .account-message ul {
  margin: 0;
  padding-left: 1.1rem;
}

.account-card[b-7xp4ovg9qf]  h2 {
  color: var(--gold-light);
  font: var(--font-section-title);
  letter-spacing: 0.02em;
  margin: 2rem 0 0.75rem;
}

.account-card[b-7xp4ovg9qf]  h2:first-child {
  margin-top: 0;
}

/* Panels wrap content in their own <section>, so only the card's first section should
   drop the top margin; later panels keep their separation. */
.account-card[b-7xp4ovg9qf]  section:not(:first-child) > h2:first-child {
  margin-top: 2rem;
}

.account-card[b-7xp4ovg9qf]  p {
  color: var(--color-muted);
  font: var(--font-data);
  margin: 0 0 1rem;
}

.account-card[b-7xp4ovg9qf]  p strong {
  color: var(--color-ivory);
  font-weight: 600;
}

.account-card[b-7xp4ovg9qf]  .account-help,
.account-card[b-7xp4ovg9qf]  .account-requirements {
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}

.account-card[b-7xp4ovg9qf]  .account-requirements {
  margin: 0;
}

.account-card[b-7xp4ovg9qf]  .account-help {
  margin-top: 1.25rem;
}

/* Flat, square, gold-outline button shared by CovenantAttachmentPanel, CovenantLinks and
   RlvProfilesPanel. Element-qualified to outrank app.css's .account-card button without
   !important. */
.account-card[b-7xp4ovg9qf]  button.rlv-action-primary,
.account-card[b-7xp4ovg9qf]  button.rlv-action-secondary {
  background: none;
  border-radius: 0;
  box-shadow: none;
  font: 600 0.8rem/1.4 var(--font-body);
  letter-spacing: normal;
  min-height: var(--control-height);
  padding: 0.55rem 0.75rem;
  text-transform: none;
}

.account-card[b-7xp4ovg9qf]  button.rlv-action-primary {
  background: rgb(var(--gold-rgb) / 14%);
  border: 1px solid var(--gold-light);
  color: var(--gold-light);
}

.account-card[b-7xp4ovg9qf]  button.rlv-action-secondary {
  background: transparent;
  border: 1px solid rgb(var(--gold-rgb) / 30%);
  color: var(--color-ivory);
}

.account-card[b-7xp4ovg9qf]  button.rlv-action-primary:hover:not(:disabled),
.account-card[b-7xp4ovg9qf]  button.rlv-action-secondary:hover:not(:disabled) {
  background: rgb(var(--gold-rgb) / 22%);
  border-color: var(--gold-light);
  box-shadow: none;
}

.account-card[b-7xp4ovg9qf]  button.rlv-action-primary:disabled,
.account-card[b-7xp4ovg9qf]  button.rlv-action-secondary:disabled {
  cursor: default;
  opacity: 0.45;
}

/* CovenantLinks' public URL row: readonly input plus copy/revoke icon buttons in a flex
   row. */
.account-card[b-7xp4ovg9qf]  .covenant-link-url {
  align-items: stretch;
  display: flex;
  gap: 0.5rem;
}

.account-card[b-7xp4ovg9qf]  .covenant-link-url input {
  flex: 1;
  min-width: 0;
}

/* Element-qualified to outrank app.css's .account-card button without !important. */
.account-card[b-7xp4ovg9qf]  button.covenant-link-icon-button {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(var(--gold-rgb) / 30%);
  border-radius: 0;
  box-shadow: none;
  color: var(--color-ivory);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  min-height: 0;
  padding: 0 0.85rem;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.account-card[b-7xp4ovg9qf]  button.covenant-link-icon-button svg {
  height: 1.1rem;
  width: 1.1rem;
}

.account-card[b-7xp4ovg9qf]  button.covenant-link-icon-button:hover:not(:disabled) {
  background: rgb(var(--gold-rgb) / 22%);
  border-color: var(--gold-light);
  box-shadow: none;
  color: var(--gold-light);
}

.account-card[b-7xp4ovg9qf]  button.covenant-link-icon-button-danger {
  border-color: rgb(var(--color-danger-rgb) / 45%);
}

.account-card[b-7xp4ovg9qf]  button.covenant-link-icon-button-danger:hover:not(:disabled) {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  box-shadow: none;
  color: var(--color-danger);
}

.account-card[b-7xp4ovg9qf]  button.covenant-link-icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.account-card[b-7xp4ovg9qf]  .account-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
  margin-top: 1.5rem;
}

.account-card[b-7xp4ovg9qf]  .account-actions form {
  margin: 0;
}

.account-card[b-7xp4ovg9qf]  .account-profile {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.account-card[b-7xp4ovg9qf]  .account-profile-row {
  display: grid;
  gap: 0.3rem;
}

.account-card[b-7xp4ovg9qf]  .account-profile-row dt {
  color: var(--gold-light);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0;
  text-transform: uppercase;
}

.account-card[b-7xp4ovg9qf]  .account-profile-row dd {
  color: var(--color-ivory);
  font-size: 0.95rem;
  margin: 0;
}

.account-card[b-7xp4ovg9qf]  .account-utility {
  align-items: center;
  border-top: 1px solid rgb(var(--gold-rgb) / 18%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
}

.account-card[b-7xp4ovg9qf]  .account-utility form {
  /* inline-flex so the form sizes to its compact button instead of an inherited 16px line
     box, keeping it aligned with .account-link. */
  display: inline-flex;
  margin: 0;
}

.account-card[b-7xp4ovg9qf]  .account-link-button {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--gold-light);
  /* Plain inline text so it shares .account-link's baseline instead of the flex metrics
     .account-card button applies. */
  display: inline;
  font: 600 0.72rem var(--font-body);
  letter-spacing: 0.08em;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgb(var(--gold-light-rgb) / 45%);
  text-transform: uppercase;
  text-underline-offset: 0.25em;
  vertical-align: baseline;
}

.account-card[b-7xp4ovg9qf]  .account-link-button:hover {
  box-shadow: none;
  color: var(--color-ivory);
  text-decoration-color: currentColor;
}

.account-card[b-7xp4ovg9qf]  .account-link {
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration-color: rgb(var(--gold-light-rgb) / 45%);
  text-underline-offset: 0.25em;
  text-transform: uppercase;
}

.account-card[b-7xp4ovg9qf]  .account-link:hover {
  color: var(--color-ivory);
  text-decoration-color: currentColor;
}

/* Step-up toggle (AdminStepUpToggle.razor), in normal flow so page messages below are
   pushed down rather than overlapped. position: relative anchors the reveal form. The
   form opens via a CSS checkbox hack because the Admin pages have no Blazor
   interactivity. */
.account-card[b-7xp4ovg9qf]  .admin-stepup {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
  position: relative;
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-checkbox {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-switch {
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-checkbox:disabled + .admin-stepup-switch {
  cursor: default;
}

/* Geometry comes from app.css's --switch-* tokens. */
.account-card[b-7xp4ovg9qf]  .admin-stepup-track {
  background: rgb(var(--gold-rgb) / 22%);
  border: 1px solid rgb(var(--gold-rgb) / 45%);
  border-radius: var(--radius-pill);
  display: block;
  height: var(--switch-track-height);
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
  width: var(--switch-track-width);
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-track::before {
  background: var(--color-muted);
  border-radius: 50%;
  content: "";
  height: var(--switch-thumb-size);
  left: var(--switch-thumb-inset);
  position: absolute;
  top: var(--switch-thumb-inset);
  transition: transform 160ms ease, background-color 160ms ease;
  width: var(--switch-thumb-size);
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-checkbox:checked + .admin-stepup-switch .admin-stepup-track {
  background: rgb(var(--gold-rgb) / 35%);
  border-color: var(--gold-light);
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-checkbox:checked + .admin-stepup-switch .admin-stepup-track::before {
  background: var(--gold-light);
  transform: translateX(var(--switch-thumb-travel));
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-checkbox:focus-visible + .admin-stepup-switch .admin-stepup-track {
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 25%);
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-off-form {
  display: inline-flex;
  margin: 0;
}

/* Once stepped up the switch is a real <button> posting to /admin/step-down. Element-
   qualified to outrank app.css's .account-card button, which would otherwise render it as
   a full gradient button. */
.account-card[b-7xp4ovg9qf]  button.admin-stepup-switch {
  background: none;
  border: none;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}

.account-card[b-7xp4ovg9qf]  button.admin-stepup-switch:hover {
  background: none;
  box-shadow: none;
}

.account-card[b-7xp4ovg9qf]  button.admin-stepup-switch:focus-visible .admin-stepup-track {
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 25%);
}

/* On position for the button variant, which has no checkbox to drive :checked. */
.account-card[b-7xp4ovg9qf]  .admin-stepup-track-on {
  background: rgb(var(--gold-rgb) / 35%);
  border-color: var(--gold-light);
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-track-on::before {
  background: var(--gold-light);
  transform: translateX(1.15rem);
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-status {
  color: var(--color-muted);
  font: var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Explicit viewport-capped width, not max-content: the 100%-width password input inside
   resolved against the viewport on some mobile browsers and ballooned the popover. */
.account-card[b-7xp4ovg9qf]  .admin-stepup-form {
  align-items: stretch;
  background: rgb(5 5 4 / 94%);
  border: 1px solid rgb(var(--gold-rgb) / 35%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 100%;
  width: min(18rem, calc(100vw - 2.5rem));
  z-index: 5;
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-form .account-field {
  margin: 0;
}

.account-card[b-7xp4ovg9qf]  .admin-stepup-checkbox:checked ~ .admin-stepup-form {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .account-card[b-7xp4ovg9qf]  .admin-stepup-track,
  .account-card[b-7xp4ovg9qf]  .admin-stepup-track::before {
    transition: none;
  }
}

/* No overflow-x: it forces overflow-y: auto, which would clip .admin-flag-revoke near the
   table's bottom. The remaining tables are narrow; revisit if a wide table returns. */
.account-card[b-7xp4ovg9qf]  .account-table-wrap {
  margin: 0 0 1.5rem;
}

.account-card[b-7xp4ovg9qf]  .account-table {
  border-collapse: collapse;
  font: var(--font-data);
  width: 100%;
}

.account-card[b-7xp4ovg9qf]  .account-table th,
.account-card[b-7xp4ovg9qf]  .account-table td {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 18%);
  padding: 0.65rem 0.9rem 0.65rem 0;
  text-align: left;
  white-space: nowrap;
}

.account-card[b-7xp4ovg9qf]  .account-table thead th {
  color: var(--gold-light);
  font: var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-card[b-7xp4ovg9qf]  .account-table tbody td {
  color: var(--color-ivory);
}

.account-card[b-7xp4ovg9qf]  .account-table tbody tr:hover {
  background: rgb(var(--gold-rgb) / 6%);
}

.account-card[b-7xp4ovg9qf]  .account-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row actions get a compact ghost treatment so they do not outweigh the primary action
   above the table. */
.account-card[b-7xp4ovg9qf]  .account-table td form {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
}

/* AdminAdministrators.razor capability flags (C/S/T). Badges center under their headers;
   the Revoke control is absolutely positioned (.admin-flag-revoke) so it never shifts the
   centered badge. */
.account-card[b-7xp4ovg9qf]  .admin-flag-cell {
  position: relative;
  text-align: center;
  white-space: normal;
}

/* Centered, badge-sized header letters. Qualified to outrank .account-table thead th
   rather than tie on load order. */
.account-card[b-7xp4ovg9qf]  .account-table thead th.admin-flag-header {
  font: var(--font-data);
  font-weight: 700;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

/* Read-only display: checked means granted. Revoke is the only way to change a grant. */
.account-card[b-7xp4ovg9qf]  .admin-flag-checkbox {
  accent-color: var(--gold);
  height: 1.05rem;
  width: 1.05rem;
}

.account-card[b-7xp4ovg9qf]  .admin-flag-checkbox:checked {
  cursor: help;
}

.account-card[b-7xp4ovg9qf]  .admin-flag-checkbox:disabled {
  opacity: 1;
}

/* Hidden until the cell is hovered or focused (:focus-within keeps keyboard users from
   landing on an invisible control). */
.account-card[b-7xp4ovg9qf]  .admin-flag-revoke {
  background: var(--color-obsidian);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
  left: 50%;
  margin: 0;
  opacity: 0;
  padding: 0.3rem;
  pointer-events: none;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  transition: opacity 120ms ease;
  z-index: 6;
}

.account-card[b-7xp4ovg9qf]  .admin-flag-cell:hover .admin-flag-revoke,
.account-card[b-7xp4ovg9qf]  .admin-flag-revoke:focus-within {
  opacity: 1;
  pointer-events: auto;
}

/* Admin device lists as a card grid of dt/dd rows. auto-fit so a short list's cards
   stretch to fill the row. */
.account-card[b-7xp4ovg9qf]  .admin-entity-grid {
  display: grid;
  gap: 1rem;
  /* min(18rem, 100%) so the track cannot overflow a narrow phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin: 0 0 1.5rem;
}

/* One full-width card per row for Security Events and Credential history, whose cards
   carry many fields. */
.account-card[b-7xp4ovg9qf]  .admin-entity-grid-single {
  grid-template-columns: 1fr;
}

/* Credential history disclosure, matching the Covenant panel's .rlv-group treatment
   (app.css). */
/* Shared rules live in app.css; only this disclosure's specifics are here. */
.account-card[b-7xp4ovg9qf]  .admin-entity-history {
  margin: 0 0 1.5rem;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-history-label::before {
  content: "▸";
  font-size: 0.8rem;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-history[open] .admin-entity-history-label::before {
  content: "▾";
}

.account-card[b-7xp4ovg9qf]  .admin-entity-history .admin-entity-grid {
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  margin: 0;
  padding: 0.85rem;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-card {
  background: rgb(var(--gold-rgb) / 4%);
  border: 1px solid rgb(var(--gold-rgb) / 20%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-name {
  color: var(--color-ivory);
  font: var(--font-section-title);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Fields flow into as many columns as the card width allows. */
.account-card[b-7xp4ovg9qf]  .admin-entity-fields {
  display: grid;
  gap: 0.55rem 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin: 0;
}

/* Wider columns for single-column card rows. */
.account-card[b-7xp4ovg9qf]  .admin-entity-grid-single .admin-entity-fields {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.account-card[b-7xp4ovg9qf]  .admin-entity-field dt {
  color: var(--gold-light);
  font: var(--font-label);
  letter-spacing: 0.1em;
  margin: 0 0 0.15rem;
  text-transform: uppercase;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-field dd {
  color: var(--color-ivory);
  font: var(--font-data);
  margin: 0;
  overflow-wrap: anywhere;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-actions {
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-actions form {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

/* The Retire form's label takes the remaining width so it does not wrap and stretch the
   button taller than other row actions. */
.account-card[b-7xp4ovg9qf]  .admin-entity-actions form label {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 0.5rem;
}

/* Dense card actions use full-form field chrome at the compact control height. */
.account-card[b-7xp4ovg9qf]  .admin-entity-actions form input:not([type="hidden"]) {
  background: var(--control-background);
  border: var(--control-border);
  color: var(--color-ivory);
  flex: 1;
  font: var(--font-data);
  min-height: var(--control-compact-height);
  padding: var(--control-compact-padding);
}

.account-card[b-7xp4ovg9qf]  .admin-entity-actions form input:not([type="hidden"]):focus-visible {
  background: var(--color-black);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 16%);
  outline: none;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-actions form button,
.account-card[b-7xp4ovg9qf]  .account-table td form button {
  background: none;
  border: 1px solid rgb(var(--color-danger-rgb) / 45%);
  box-shadow: none;
  color: var(--color-danger);
  flex-shrink: 0;
  font: var(--button-label-font);
  min-height: var(--control-compact-height);
  padding: var(--control-compact-padding);
  white-space: nowrap;
}

.account-card[b-7xp4ovg9qf]  .admin-entity-actions form button:hover,
.account-card[b-7xp4ovg9qf]  .account-table td form button:hover {
  background: var(--color-danger-bg);
  box-shadow: none;
}

/* Below 720px, table rows stack into labelled cards: the header row is hidden and each
   cell shows its data-label. 720px, not 600px, because even two-column tables need the
   room. */
@media (max-width: 720px) {
  /* Same declarations as app.css's .visually-hidden, which cannot be applied as a class
     here. */
  .account-card[b-7xp4ovg9qf]  .account-table thead {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .account-card[b-7xp4ovg9qf]  .account-table,
  .account-card[b-7xp4ovg9qf]  .account-table tbody,
  .account-card[b-7xp4ovg9qf]  .account-table tr,
  .account-card[b-7xp4ovg9qf]  .account-table td {
    display: block;
    width: 100%;
  }

  .account-card[b-7xp4ovg9qf]  .account-table tr {
    border-bottom: 1px solid rgb(var(--gold-rgb) / 18%);
    padding: 0.85rem 0;
  }

  .account-card[b-7xp4ovg9qf]  .account-table tr:last-child {
    border-bottom: none;
  }

  .account-card[b-7xp4ovg9qf]  .account-table td {
    border-bottom: none;
    overflow-wrap: anywhere;
    padding: 0.3rem 0;
    white-space: normal;
  }

  .account-card[b-7xp4ovg9qf]  .account-table td:empty,
  .account-card[b-7xp4ovg9qf]  .account-table td:has(> form:only-child) {
    padding-top: 0.6rem;
  }

  .account-card[b-7xp4ovg9qf]  .account-table td[data-label]::before {
    color: var(--gold-light);
    content: attr(data-label);
    display: block;
    font: var(--font-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Stacked row actions become full-width buttons. */
  .account-card[b-7xp4ovg9qf]  .account-table td form {
    display: flex;
    width: 100%;
  }

  .account-card[b-7xp4ovg9qf]  .account-table td form + form {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .account-card[b-7xp4ovg9qf]  .account-table td form button {
    flex: 1;
  }

}

@media (max-width: 600px) {
  .account-page[b-7xp4ovg9qf] {
    padding-block: 1.25rem 2.5rem;
  }

  .account-card[b-7xp4ovg9qf] {
    padding: 1.1rem 0.85rem;
  }

  .account-card[b-7xp4ovg9qf]  .account-actions,
  .account-card[b-7xp4ovg9qf]  .account-actions button,
  .account-card[b-7xp4ovg9qf]  .account-actions form {
    align-items: stretch;
    width: 100%;
  }

  .account-card[b-7xp4ovg9qf]  .account-actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-card[b-7xp4ovg9qf]  input,
  .account-card[b-7xp4ovg9qf]  button {
    transition: none;
  }

}
/* /Components/Account/AttachmentClaimCodePanel.razor.rz.scp.css */
/* Element-qualified to outrank app.css's .account-card button without !important. */
/* align-items: stretch so the copy button matches the code button's rendered height. */
.claim-code-row[b-qvuv7liewe] {
  align-items: stretch;
  display: flex;
  gap: 0.4rem;
}

/* The generator fills the row in both idle and code-issued states so the row does not
   jump when a code appears; only the live code gets larger type. */
.claim-code-row button:not(.claim-code-copy)[b-qvuv7liewe] {
  flex: 1 1 auto;
  min-width: 0;
  /* nowrap so a long code at this size cannot push the button onto two lines and grow the
     card. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claim-code-row button.claim-code-value[b-qvuv7liewe] {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

/* Fixed width because the idle and copied glyphs have different advance widths, and the
   swap would nudge the code button beside it. */
button.claim-code-copy[b-qvuv7liewe] {
  align-items: center;
  background: none;
  border: 1px solid rgb(var(--gold-rgb) / 35%);
  box-shadow: none;
  color: var(--gold-light);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.9rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 2.4rem;
}

button.claim-code-copy:hover:not(:disabled)[b-qvuv7liewe] {
  background: rgb(var(--gold-rgb) / 12%);
  box-shadow: none;
}

button.claim-code-copy:disabled[b-qvuv7liewe] {
  border-color: rgb(var(--gold-rgb) / 18%);
  color: var(--color-muted);
}
/* /Components/Account/AttachmentInstallationsPanel.razor.rz.scp.css */
/* Colored dot before each active attachment's name so credential health reads at a
   glance. */
.attachment-status-dot[b-kaeoy5x7yp] {
  border-radius: 50%;
  display: inline-block;
  height: 0.5rem;
  margin-right: 0.35rem;
  width: 0.5rem;
}

.attachment-status-on[b-kaeoy5x7yp] {
  background: var(--color-success);
  box-shadow: 0 0 6px rgb(var(--color-success-rgb) / 60%);
}

.attachment-status-off[b-kaeoy5x7yp] {
  background: var(--color-danger);
}

/* Pending proof, superseded, or no credential: not a failure, but not fully active. */
.attachment-status-pending[b-kaeoy5x7yp] {
  background: var(--color-muted);
}
/* /Components/Account/Covenant/CovenantAttachmentPanel.razor.rz.scp.css */
.rlv-panel[b-erkadaoym6] {
  /* Muted sage / dusty-rose status pair for this control surface only; inherited by its
     nested behavior and camera components. */
  --color-danger: #dc9288;
  --color-danger-bg: rgb(121 55 47 / 16%);
  --color-danger-rgb: 220 146 136;
  --color-success: #b7cf98;
  --color-success-rgb: 183 207 152;
  --color-success-bg: rgb(77 101 59 / 16%);
  display: grid;
  gap: 0.65rem;
  /* Room for the fixed bottom action bar; the >=1200px rule turns the bar into a side
     rail and removes this. */
  padding-bottom: 5rem;
}

/* Grid items default to min-width: auto, so one unbreakable run (a long UUID or command)
   would widen its whole track past the card. min-width: 0 lets items shrink and leaves
   overflow to the descendant that clips it. */
.rlv-panel > *[b-erkadaoym6] {
  min-width: 0;
}

/* Wraps only the group cards so desktop can flow them into two columns; min-width: 0 for
   the same reason as above. */
.rlv-group-list[b-erkadaoym6] {
  display: grid;
  gap: 0.65rem;
}

.rlv-group-list > *[b-erkadaoym6] {
  min-width: 0;
}

/* Two columns on desktop. A grid, not CSS multi-column: multi-column can split one card
   across the column break despite break-inside: avoid. */
@media (min-width: 900px) {
  .rlv-group-list[b-erkadaoym6] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Attachment card, in the shared .rlv-group shell (app.css); only its body row stacking
   is defined here. */
.rlv-device .rlv-group-body[b-erkadaoym6] {
  display: grid;
  gap: 0.5rem;
}

/* Body font weight so the UUID fragment in each option matches other identifiers instead
   of Cormorant serif figures. */
.rlv-panel select.rlv-attachment-select[b-erkadaoym6] {
  font: 600 0.95rem var(--font-body);
}

/* Trailing element of the header bar: keeps its content width. */
.rlv-device-meta[b-erkadaoym6] {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  flex: none;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.2rem 0.5rem;
  justify-content: flex-end;
  line-height: 1.6;
  margin: 0;
  max-width: 60%;
  text-align: right;
}

/* Separators come from the gaps between rendered fragments, because any fragment may be
   absent. */
.rlv-device-meta > * + *[b-erkadaoym6]::before {
  color: rgb(var(--gold-rgb) / 45%);
  content: "\00b7";
  margin-right: 0.5rem;
}

.rlv-device-wearer[b-erkadaoym6] {
  color: var(--color-ivory);
}

.rlv-device-limits[b-erkadaoym6] {
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.6;
  margin: 0;
}

/* Fixed to the viewport so Apply/Discard stay reachable after staging toggles across
   groups. The >=1200px rule turns it into a side rail. */
.rlv-action-bar[b-erkadaoym6] {
  align-items: center;
  background: var(--color-obsidian);
  border-top: 1px solid rgb(var(--gold-rgb) / 25%);
  bottom: 0;
  box-shadow: 0 -2px 8px rgb(0 0 0 / 30%);
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  justify-content: center;
  left: 0;
  padding: 0.55rem 0.7rem;
  position: fixed;
  right: 0;
  z-index: 100;
}

/* Compact square icon button. The .rlv-panel prefix outranks app.css's .account-card
   button; the fixed width equals the height because there is no label to size around. */
.rlv-panel .rlv-icon-button[b-erkadaoym6] {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  /* Chrome's UA stylesheet rounds <button> corners, which shows against the site's square
     borders. */
  border-radius: 0;
  padding: 0;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* A 1.75 stroke keeps arrowheads and the check's angle crisp at this size; round caps and
   joins keep them reading as drawn icons. */
.rlv-icon-button svg[b-erkadaoym6] {
  fill: none;
  flex: none;
  height: 1.35rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 1.35rem;
}

.rlv-icon-button:focus-visible[b-erkadaoym6] {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* A status readout, not a button, styled like its neighbors. Online state is shown by
   whether the ring renders, not by color. */
.rlv-status-indicator[b-erkadaoym6] {
  border: 1px solid rgb(var(--gold-rgb) / 30%);
  color: var(--gold-light);
  cursor: default;
}

.rlv-status-indicator svg circle[b-erkadaoym6] {
  fill: none;
  stroke: currentColor;
}

/* Filled poll-held dot; must outrank the fill: none rule above. */
.rlv-status-indicator svg circle.rlv-status-indicator-dot[b-erkadaoym6] {
  fill: currentColor;
}

/* Circle by construction (height equals min-width, flex-centered digit); widens into a
   pill past two digits. The ring uses the bar background so the badge stays legible over
   the button border. */
.rlv-change-badge[b-erkadaoym6] {
  align-items: center;
  background: var(--gold-light);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 2px var(--color-obsidian);
  color: var(--color-obsidian);
  display: flex;
  font: 700 0.68rem/1 var(--font-body);
  height: 1.15rem;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0 0.28rem;
  position: absolute;
  right: -0.4rem;
  top: -0.4rem;
}

/* Apply keeps the same fixed square as the other action buttons at both breakpoints. */
.rlv-apply-wrap[b-erkadaoym6] {
  flex: none;
  width: 3rem;
  position: relative;
}

.rlv-action-status[b-erkadaoym6] {
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0.5rem 0 0;
}

/* flex: 1 on the wrap keeps the label and its info icon docked left beside the chevron
   instead of pushed right by space-between. */
.rlv-group-label-wrap[b-erkadaoym6] {
  align-items: center;
  display: inline-flex;
  flex: 1;
  gap: 0.35rem;
  min-width: 0;
}

/* --gold, matching RlvBehaviorGroupCard's .rlv-group-label. */
.rlv-groups-heading[b-erkadaoym6] {
  color: var(--gold);
  font: 600 1.05rem/1.4 var(--font-display);
  margin: 0;
}

/* Sticky jump-to-section row, so a controller deep in the list can jump without scrolling
   back up. */
.rlv-controls-row[b-erkadaoym6] {
  background: var(--color-obsidian);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.3rem 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.rlv-controls-row > select[b-erkadaoym6] {
  flex: 1 1 14rem;
  min-width: 0;
}

.rlv-section-note[b-erkadaoym6] {
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0 0 0.85rem;
}

.rlv-force-teleport[b-erkadaoym6] {
  display: grid;
  gap: 0.55rem;
}

/* Shared row layout for Force Teleport's destination and Reposition's coordinates. align-
   items: end lines the button up with the input, not the label. */
.rlv-force-field-row[b-erkadaoym6] {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rlv-force-field[b-erkadaoym6] {
  display: grid;
  flex: 1 1 16rem;
  gap: 0.3rem;
  min-width: 0;
}

.rlv-force-field > label[b-erkadaoym6] {
  color: var(--color-ivory);
  font-size: 0.82rem;
  font-weight: 600;
}

/* min-width so both action buttons match the longer label's width. */
.rlv-force-field-row > button[b-erkadaoym6] {
  flex: none;
  min-width: 9.5rem;
}

/* Coordinates need only three short numbers. */
.rlv-force-field-narrow[b-erkadaoym6] {
  flex: none;
  width: 12rem;
}

.rlv-force-sit[b-erkadaoym6] {
  display: grid;
  gap: 0.55rem;
}

.rlv-force-sit .rlv-section-note[b-erkadaoym6] {
  margin-bottom: 0;
}

/* Radius, filters, Scan Nearby and Force Stand share one row. */
.rlv-scan-row-controls[b-erkadaoym6] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rlv-scan-row-controls > label[b-erkadaoym6] {
  color: var(--color-ivory);
  font-size: 0.82rem;
  font-weight: 600;
}

.rlv-scan-filters[b-erkadaoym6] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rlv-scan-filters > label[b-erkadaoym6] {
  align-items: center;
  color: var(--color-ivory);
  display: inline-flex;
  font-size: 0.82rem;
  gap: 0.3rem;
}

.rlv-command-controls[b-erkadaoym6] {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.rlv-queued-message[b-erkadaoym6] {
  display: grid;
  gap: 0.35rem;
  margin-block: 0.75rem;
  overflow-wrap: anywhere;
}

.rlv-queued-summary[b-erkadaoym6] {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-block: 0.65rem;
}

.rlv-queued-summary > span[b-erkadaoym6] {
  color: var(--color-ivory);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.rlv-queued-summary > button[b-erkadaoym6] {
  flex: none;
}

/* Staged changes wrap as chips so a dozen entries do not push the groups a screen down. */
.rlv-change-list[b-erkadaoym6] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
}

/* Same left-accent language as restriction rows, so restrict and release read apart. */
.rlv-change-list li[b-erkadaoym6] {
  background: rgb(var(--gold-rgb) / 7%);
  border-left: 2px solid transparent;
  color: var(--color-ivory);
  font-size: 0.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding: 0.2rem 0.55rem;
}

.rlv-change-list strong[b-erkadaoym6] {
  font-weight: 600;
}

.rlv-change-list .rlv-change-restrict[b-erkadaoym6] {
  border-left-color: var(--color-danger);
}

.rlv-change-restrict strong[b-erkadaoym6] {
  color: var(--color-danger);
}

.rlv-change-list .rlv-change-release[b-erkadaoym6] {
  border-left-color: var(--color-success);
}

.rlv-change-release strong[b-erkadaoym6] {
  color: var(--color-success);
}

@media (max-width: 600px) {
  .rlv-controls-row > select[b-erkadaoym6] {
    flex-basis: 100%;
  }

  /* These callouts sit several bordered layers deep, so trim their padding on phones. */
  .rlv-panel[b-erkadaoym6] {
    gap: 0.6rem;
  }

}

/* Past 1200px there is margin beside the 56rem card, so the action bar becomes a vertical
   rail. Labels stay visible. */
@media (min-width: 1200px) {
  .rlv-panel[b-erkadaoym6] {
    padding-bottom: 1rem;
  }

  .rlv-action-bar[b-erkadaoym6] {
    /* The rail floats over page content, so it gets a full border and backdrop blur to
       stay readable. */
    backdrop-filter: blur(6px);
    background: rgb(12 11 9 / 88%);
    border: 1px solid rgb(var(--gold-rgb) / 35%);
    bottom: auto;
    box-shadow: 0 6px 24px rgb(0 0 0 / 35%);
    flex-direction: column;
    gap: 0.45rem;
    /* Anchored to the card's right edge (50vw + 28rem, since .account-frame-wide is
       centered at 56rem), not the window's, so it stays beside the card on ultra-wide
       screens. */
    left: calc(50vw + 28rem + 0.75rem);
    padding: 0.5rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rlv-panel .rlv-icon-button[b-erkadaoym6] {
    transition: none;
  }
}

.rlv-panel button:focus-visible[b-erkadaoym6],
.rlv-panel[b-erkadaoym6]  summary.rlv-group-summary:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.rlv-panel .rlv-section-note[b-erkadaoym6],
.rlv-panel .rlv-device-meta[b-erkadaoym6],
.rlv-panel .rlv-device-limits[b-erkadaoym6] {
  margin: 0;
}

.rlv-command-controls > .rlv-section-note[b-erkadaoym6] {
  margin-bottom: 0.75rem;
}

.rlv-groups-heading[b-erkadaoym6] {
  margin-bottom: 0.4rem;
  padding: 0;
}

.rlv-command-controls + .rlv-command-controls[b-erkadaoym6] {
  margin-top: 0.75rem;
}

.rlv-panel[b-erkadaoym6]  .rlv-group-summary {
  gap: 0.65rem;
  min-height: 2.75rem;
}

.rlv-panel[b-erkadaoym6]  summary.rlv-group-summary::before {
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  content: "";
  flex: none;
  height: 0.4rem;
  transform: rotate(-45deg);
  width: 0.4rem;
}

.rlv-panel[b-erkadaoym6]  details[open] > summary.rlv-group-summary::before {
  transform: rotate(45deg);
}

.rlv-panel[b-erkadaoym6]  .rlv-group-label {
  flex: 1;
  min-width: 0;
}

/* Inside .rlv-group-label-wrap the label sizes to its content so the info icon sits right
   after it. Must follow the rule above to win the equal-specificity tie. */
.rlv-group-label-wrap .rlv-group-label[b-erkadaoym6] {
  flex: none;
}

.rlv-panel[b-erkadaoym6]  .rlv-group-count {
  text-align: right;
}

.rlv-group-list[b-erkadaoym6] {
  align-items: start;
}

.rlv-staged-review .rlv-change-list[b-erkadaoym6] {
  margin: 0.75rem 0 0;
}

.rlv-camera-setting + .rlv-camera-setting[b-erkadaoym6] {
  border-top: 1px solid rgb(var(--gold-rgb) / 20%);
  margin-top: 1rem;
  padding-top: 0.5rem;
}

.rlv-camera-actions[b-erkadaoym6] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0.5rem 1rem;
}

.rlv-panel .rlv-scan-row-controls > input[b-erkadaoym6] {
  width: 5rem;
}

.rlv-panel .rlv-group-nav-select[b-erkadaoym6] {
  min-height: var(--control-height);
  padding-right: 2.2rem;
}

.rlv-queued-summary[b-erkadaoym6] {
  flex-wrap: wrap;
  border-bottom: 1px solid rgb(var(--gold-rgb) / 14%);
  padding-bottom: 0.65rem;
}

.rlv-queued-summary:last-child[b-erkadaoym6] {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.rlv-action-bar[b-erkadaoym6] {
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}

.rlv-panel label[b-erkadaoym6] {
  font-size: 0.82rem;
  letter-spacing: normal;
  text-transform: none;
}

#force-sit[b-erkadaoym6] {
  grid-column: 1 / -1;
}
/* /Components/Account/Covenant/RlvBehaviorGroupCard.razor.rz.scp.css */
/* Inputs here use an ancestor class plus the element type to match the specificity of
   app.css's .account-card input:not(...):not(...) field rule, and win the tie because the
   scoped bundle loads after app.css. Buttons are element-qualified the same way for
   consistency. */

/* The info trigger is a flex sibling at the row's left edge, outside the pill. align-
   items: stretch lets the pill fill the row's full height; the icon re-centers itself
   below. No right padding so the pill reaches the row's right edge. */
/* Removes app.css's reserved left border for rows in this component: the state accent is
   on .rlv-row-pill instead. RlvCameraPanel rows keep the global rule. */
.rlv-row[b-ea5jkwwurp] {
  align-items: stretch;
  border-left: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  padding-left: 0.2rem;
  position: relative;
  z-index: 0;
}

/* The pill holds label/toggle, lock and Exceptions, and carries the allowed/restricted
   fill so it starts after the info icon. It takes the remaining width so .rlv-row-end can
   pin to its right edge. The scoped selector outranks app.css's .rlv-row-state-* border
   color, so the state rules below set it explicitly. */
.rlv-row-pill[b-ea5jkwwurp] {
  align-items: center;
  border-left: 5px solid transparent;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.3rem 0.6rem;
  position: relative;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.rlv-row-pill.rlv-row-state-allowed[b-ea5jkwwurp] {
  background: var(--color-success-bg);
  border-left-color: var(--color-success);
  box-shadow: inset 0 2px rgb(255 255 255 / 24%), inset 0 -2px rgb(0 0 0 / 42%), 0 3px 5px rgb(0 0 0 / 34%);
  transform: translateY(-2px);
}

.rlv-row-pill.rlv-row-state-restricted[b-ea5jkwwurp] {
  background: var(--color-danger-bg);
  border-left-color: var(--color-danger);
  box-shadow: inset 0 5px 10px rgb(0 0 0 / 58%), inset 0 -2px rgb(255 255 255 / 5%);
}

.rlv-row-label-static[b-ea5jkwwurp] {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  font: 600 0.9rem var(--font-body);
  margin: 0;
  max-width: 55%;
  min-width: 0;
  overflow: hidden;
  padding: 0.4rem 0.15rem 0.4rem 0.2rem;
  pointer-events: none;
  position: relative;
  z-index: 1;
  background: none;
}

/* Transparent hit target spanning the pill (not the row), so the info icon is never
   inside the button's box. */
button.rlv-row-hit[b-ea5jkwwurp] {
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  inset: 0;
  letter-spacing: normal;
  margin: 0;
  min-height: 0;
  padding: 0;
  position: absolute;
  text-transform: none;
  z-index: 0;
}

/* No focus outline on the full-row hit target; it would read as a persistent row
   selection. */
button.rlv-row-hit:focus-visible[b-ea5jkwwurp] {
  outline: none;
}

/* Keep hover transparent so it does not add a second row state over the fill. */
button.rlv-row-hit:hover[b-ea5jkwwurp] {
  background: none;
  box-shadow: none;
}

button.rlv-row-hit:disabled[b-ea5jkwwurp] {
  cursor: not-allowed;
}

.rlv-row-label-static.rlv-row-label-allowed[b-ea5jkwwurp] {
  color: var(--color-success);
}

.rlv-row-label-static.rlv-row-label-restricted[b-ea5jkwwurp] {
  color: var(--color-danger);
}

/* flex-shrink: 0 so a long label never squeezes the icon; centered rather than stretched. */
.rlv-row[b-ea5jkwwurp]  .rlv-row-info-wrap {
  align-self: center;
  flex-shrink: 0;
}

/* Raise the wrapper while its tooltip is visible so nearby icons cannot paint across the
   bubble. */
.rlv-row[b-ea5jkwwurp]  .rlv-row-info-wrap:hover,
.rlv-row[b-ea5jkwwurp]  .rlv-row-info-wrap:focus-within,
.rlv-row[b-ea5jkwwurp]  .rlv-row-info-wrap[data-tooltip-open],
.rlv-lock:hover[b-ea5jkwwurp],
.rlv-lock:focus-within[b-ea5jkwwurp] {
  z-index: 30;
}

/* Also raise the row itself while a tooltip inside it is open: the allowed pill's
   translateY creates its own stacking context, so without this the next row paints over
   the bubble. .rlv-info-anchor stands in for IdInfoIcon's internal wrapper, which cannot
   be named here because ::deep does not work inside :has(). The data-tooltip-open
   attribute selector covers touch. */
.rlv-row:has(.rlv-info-anchor:hover)[b-ea5jkwwurp],
.rlv-row:has(.rlv-info-anchor:focus-within)[b-ea5jkwwurp],
.rlv-row:has(.rlv-info-anchor [data-tooltip-open])[b-ea5jkwwurp],
.rlv-row:has(.rlv-lock:hover)[b-ea5jkwwurp],
.rlv-row:has(.rlv-lock:focus-within)[b-ea5jkwwurp] {
  z-index: 30;
}

/* Scoping anchor for the :has() rule above; takes no part in layout. */
.rlv-info-anchor[b-ea5jkwwurp] {
  display: contents;
}

/* Pinned to the row's right edge; may cover the label's overflow on a tight card rather
   than wrapping to a second row. */
.rlv-row-end[b-ea5jkwwurp] {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

button.rlv-exception-link[b-ea5jkwwurp] {
  align-items: center;
  background: rgb(var(--gold-rgb) / 8%);
  border: 1px solid rgb(var(--gold-rgb) / 38%);
  border-radius: 0;
  box-shadow: none;
  color: var(--gold-light);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.68rem;
  gap: 0.25rem;
  letter-spacing: 0.03em;
  min-height: 0;
  padding: 0.22rem 0.38rem;
  text-decoration: none;
  text-transform: uppercase;
}

button.rlv-exception-link:hover[b-ea5jkwwurp] {
  background: rgb(var(--gold-rgb) / 16%);
  border-color: var(--gold-light);
  box-shadow: 0 0 8px rgb(var(--gold-light-rgb) / 12%);
  color: var(--color-ivory);
}

.rlv-exception-icon[b-ea5jkwwurp] {
  flex-shrink: 0;
}

.rlv-exception-count[b-ea5jkwwurp] {
  background: rgb(var(--gold-rgb) / 20%);
  border-radius: 50%;
  font-size: 0.62rem;
  line-height: 1.2;
  min-width: 1.15rem;
  padding: 0.06rem 0.2rem;
  text-align: center;
}

/* Exceptions open in a modal so a long list scrolls there instead of pushing the rows
   down. */
.rlv-modal[b-ea5jkwwurp] {
  --modal-max-height: min(24rem, 80vh);
}

.rlv-modal-empty[b-ea5jkwwurp] {
  color: var(--color-muted);
  font-size: 0.82rem;
  margin: 0;
}

.rlv-exception-table[b-ea5jkwwurp] {
  border-collapse: collapse;
  font-size: 0.82rem;
  width: 100%;
}

.rlv-exception-table th[b-ea5jkwwurp] {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 20%);
  color: var(--gold-light);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0 0 0.4rem;
  text-align: left;
  text-transform: uppercase;
}

.rlv-exception-table td[b-ea5jkwwurp] {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 12%);
  color: var(--color-ivory);
  padding: 0.45rem 0;
}

.rlv-exception-table tr:last-child td[b-ea5jkwwurp] {
  border-bottom: none;
}

/* Only the name/UUID column may break anywhere; applying it to every cell broke "Remove"
   mid-word in its narrow column. */
.rlv-exception-table td:first-child[b-ea5jkwwurp] {
  overflow-wrap: anywhere;
}

.rlv-exception-table td:last-child[b-ea5jkwwurp] {
  text-align: right;
  width: 1%;
}

button.rlv-modal-remove[b-ea5jkwwurp] {
  background: none;
  border: 1px solid rgb(var(--color-danger-rgb) / 45%);
  box-shadow: none;
  color: var(--color-danger);
  font-size: 0.6rem;
  min-height: 0;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

button.rlv-modal-remove:hover[b-ea5jkwwurp] {
  background: var(--color-danger-bg);
  box-shadow: none;
}

.rlv-modal-add[b-ea5jkwwurp] {
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  display: flex;
  gap: 0.5rem;
  padding-top: 0.85rem;
}

.rlv-modal-add input.rlv-exception-input[b-ea5jkwwurp] {
  background: var(--control-background);
  border: var(--control-border);
  color: var(--color-ivory);
  flex: 1;
  font: 500 0.82rem var(--font-body);
  min-height: var(--control-height);
  padding: var(--control-padding);
}

.rlv-modal-add input.rlv-exception-input:focus-visible[b-ea5jkwwurp] {
  border-color: var(--gold-light);
  outline: none;
}

.rlv-modal-add button.rlv-modal-add-btn[b-ea5jkwwurp] {
  background: none;
  border: 1px solid var(--gold-light);
  box-shadow: none;
  color: var(--gold-light);
  flex-shrink: 0;
  font-size: 0.65rem;
  min-height: var(--control-height);
  padding: 0.45rem 0.9rem;
}

.rlv-modal-add button.rlv-modal-add-btn:hover[b-ea5jkwwurp] {
  background: rgb(var(--gold-rgb) / 12%);
  box-shadow: none;
}

/* The lock popover reuses the shared .id-info-wrap / .id-info-bubble rules in app.css;
   only this trigger span needs scoped styling. */
.rlv-lock[b-ea5jkwwurp] {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.rlv-lock-trigger[b-ea5jkwwurp] {
  align-items: center;
  color: var(--color-muted);
  cursor: help;
  display: inline-flex;
  opacity: 0.85;
}

.rlv-lock-trigger:hover[b-ea5jkwwurp],
.rlv-lock-trigger:focus-visible[b-ea5jkwwurp] {
  color: var(--gold-light);
  opacity: 1;
  outline: none;
}

/* N/Y lines use the row's allowed/restricted colors so the popover repeats the same
   signal. */
.rlv-meaning-bubble .rlv-meaning-desc[b-ea5jkwwurp],
.rlv-meaning-bubble .rlv-meaning-line[b-ea5jkwwurp] {
  display: block;
}

.rlv-meaning-bubble .rlv-meaning-line[b-ea5jkwwurp] {
  margin-top: 0.35rem;
}

.rlv-meaning-bubble .rlv-meaning-line-n[b-ea5jkwwurp] {
  color: var(--color-danger);
}

.rlv-meaning-bubble .rlv-meaning-line-y[b-ea5jkwwurp] {
  color: var(--color-success);
}
.rlv-row-staged[b-ea5jkwwurp] { box-shadow: inset 3px 0 var(--gold-light); }
.rlv-row-label-staged[b-ea5jkwwurp] { color: var(--gold-light); }
/* /Components/Account/Covenant/RlvCameraPanel.razor.rz.scp.css */
/* Inputs use an ancestor class plus the element type to outrank app.css's shared field
   rule, which would otherwise make these number/range inputs full width. */

/* Camera toggles keep a compact label button: unlike restriction rows they have no lock
   or Exceptions link to lay out around. */
button.rlv-row-label-toggle[b-kit5cw61qr] {
  align-items: center;
  background: none;
  border-radius: 0;
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  font: 600 0.85rem var(--font-body);
  letter-spacing: normal;
  margin: 0;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0.3rem 0.6rem;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}

button.rlv-row-label-toggle:focus-visible[b-kit5cw61qr] {
  outline: none;
}

button.rlv-row-label-toggle:disabled[b-kit5cw61qr] {
  cursor: not-allowed;
}

/* Same allowed/restricted = unpressed/pressed mapping as RlvBehaviorGroupCard.razor.css. */
button.rlv-row-label-toggle.rlv-row-label-allowed[b-kit5cw61qr] {
  background: var(--color-success-bg);
  border-color: rgb(var(--color-success-rgb) / 45%);
  color: var(--color-success);
}

button.rlv-row-label-toggle.rlv-row-label-allowed:hover:not(:disabled)[b-kit5cw61qr],
button.rlv-row-label-toggle.rlv-row-label-allowed:focus-visible[b-kit5cw61qr] {
  background: rgb(107 130 77 / 20%);
  border-color: var(--color-success);
}

button.rlv-row-label-toggle.rlv-row-label-restricted[b-kit5cw61qr] {
  background: rgb(132 49 32 / 24%);
  border-color: var(--color-danger);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 45%);
  color: var(--color-danger);
}

button.rlv-row-label-toggle.rlv-row-label-restricted:hover:not(:disabled)[b-kit5cw61qr],
button.rlv-row-label-toggle.rlv-row-label-restricted:focus-visible[b-kit5cw61qr] {
  background: rgb(132 49 32 / 32%);
}

.rlv-camera-row[b-kit5cw61qr] {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 14%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0;
}

.rlv-camera-row:last-child[b-kit5cw61qr] {
  border-bottom: none;
}

/* A camera limit and its unit, shown in the body font like other values. */
.rlv-range-fact[b-kit5cw61qr] {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.rlv-param-edit[b-kit5cw61qr] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rlv-param-edit input.rlv-camera-box-final[b-kit5cw61qr] {
  background: var(--control-background);
  border: 1px solid var(--gold-light);
  color: var(--color-ivory);
  font: 600 0.88rem var(--font-body);
  min-height: var(--control-height);
  padding: var(--control-padding);
  width: 9rem;
  max-width: 100%;
}

.rlv-param-edit input.rlv-camera-box-final:focus-visible[b-kit5cw61qr] {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.rlv-range-unit[b-kit5cw61qr], .rlv-camera-description[b-kit5cw61qr] {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.rlv-camera-description[b-kit5cw61qr] { margin: 0; }
/* /Components/Account/Covenant/RlvProfilesPanel.razor.rz.scp.css */
/* Inputs are element-qualified so the scope attribute lifts them over app.css's shared
   account-control rules without !important. */

.rlvp-panel[b-eq80ql8viy] {
  display: grid;
  gap: 1.5rem;
}

.rlvp-section[b-eq80ql8viy] {
  display: grid;
  gap: 0.65rem;
}

.rlvp-section-header[b-eq80ql8viy] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

.rlvp-heading[b-eq80ql8viy] {
  color: var(--gold);
  font: 600 1.15rem/1.4 var(--font-display);
  margin: 0;
}

.rlvp-section-note[b-eq80ql8viy] {
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

.rlvp-profile-grid[b-eq80ql8viy] {
  display: grid;
  gap: 0.65rem;
  /* min(..., 100%) so the track cannot overflow a narrow phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.rlvp-profile-body[b-eq80ql8viy] {
  display: grid;
  gap: 0.75rem;
}

.rlvp-profile-actions[b-eq80ql8viy] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Modal --------------------------------------------------------------- */

.rlvp-modal[b-eq80ql8viy] {
  --modal-width: 38rem;
}

.rlvp-warning[b-eq80ql8viy] {
  background: rgb(var(--gold-rgb) / 8%);
  border-left: 2px solid var(--gold-light);
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0;
  padding: 0.6rem 0.8rem;
}

.rlvp-field[b-eq80ql8viy] {
  display: grid;
  gap: 0.3rem;
}

.rlvp-field span:first-child[b-eq80ql8viy] {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input.rlvp-input[b-eq80ql8viy],
select.rlvp-input[b-eq80ql8viy] {
  background-color: var(--control-background);
  border: var(--control-border);
  color: var(--color-ivory);
  font: 500 0.85rem var(--font-body);
  min-height: var(--control-height);
  padding: var(--control-padding);
}

input.rlvp-input:focus-visible[b-eq80ql8viy],
select.rlvp-input:focus-visible[b-eq80ql8viy] {
  border-color: var(--gold-light);
  outline: none;
}

.rlvp-checkbox[b-eq80ql8viy] {
  align-items: flex-start;
  color: var(--color-ivory);
  display: flex;
  font-size: 0.8rem;
  gap: 0.55rem;
  line-height: 1.5;
}

.rlvp-checkbox input[type="checkbox"][b-eq80ql8viy] {
  accent-color: var(--gold);
  flex-shrink: 0;
  height: auto;
  margin-top: 0.2rem;
  min-height: 0;
  width: auto;
}

.rlvp-field-note[b-eq80ql8viy] {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-style: italic;
  margin: 0;
}

.rlvp-matrix-wrap[b-eq80ql8viy] {
  border: 1px solid rgb(var(--gold-rgb) / 20%);
  max-height: 20rem;
  overflow: auto;
}

table.rlvp-matrix[b-eq80ql8viy] {
  border-collapse: collapse;
  font-size: 0.78rem;
  width: 100%;
}

.rlvp-matrix thead th[b-eq80ql8viy] {
  background: var(--color-obsidian);
  border-bottom: 1px solid rgb(var(--gold-rgb) / 30%);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.4rem 0.5rem;
  position: sticky;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.rlvp-matrix thead th:first-child[b-eq80ql8viy] {
  text-align: left;
}

.rlvp-matrix-group-row th[b-eq80ql8viy] {
  background: rgb(var(--gold-rgb) / 6%);
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.5rem;
  text-align: left;
  text-transform: uppercase;
}

.rlvp-matrix tbody th[b-eq80ql8viy] {
  color: var(--color-ivory);
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  text-align: left;
  white-space: nowrap;
}

.rlvp-matrix tbody td[b-eq80ql8viy] {
  padding: 0.3rem 0.5rem;
  text-align: center;
}

.rlvp-assignment-group[b-eq80ql8viy] {
  border: 1px solid rgb(var(--gold-rgb) / 18%);
  padding: 0.7rem 0.85rem;
}

.rlvp-assignment-group-label[b-eq80ql8viy] {
  color: var(--gold);
  font: 600 0.85rem var(--font-display);
  margin: 0 0 0.5rem;
}

.rlvp-table-wrap[b-eq80ql8viy] {
  overflow-x: auto;
}

table.rlvp-assignment-table[b-eq80ql8viy] {
  border-collapse: collapse;
  font-size: 0.8rem;
  width: 100%;
}

.rlvp-assignment-table th[b-eq80ql8viy] {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 20%);
  color: var(--color-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0 0 0.4rem;
  text-align: left;
  text-transform: uppercase;
}

.rlvp-assignment-table td[b-eq80ql8viy] {
  border-bottom: 1px solid rgb(var(--gold-rgb) / 12%);
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.rlvp-assignment-table tr:last-child td[b-eq80ql8viy] {
  border-bottom: none;
}

.rlvp-assignment-avatar[b-eq80ql8viy] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rlvp-assignment-avatar a[b-eq80ql8viy] {
  color: var(--color-ivory);
  overflow-wrap: anywhere;
}

.rlvp-assignment-controls[b-eq80ql8viy] {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.rlvp-add-row[b-eq80ql8viy] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rlvp-add-row input.rlvp-input[b-eq80ql8viy] {
  flex: 2 1 14rem;
}

/* min-width: 0: a <select>'s min-content is its widest option, and user-named profile
   labels could otherwise widen the row past the panel. */
.rlvp-add-row select.rlvp-input[b-eq80ql8viy] {
  flex: 1 1 9rem;
  min-width: 0;
}

.rlvp-error[b-eq80ql8viy] {
  color: var(--color-danger);
  font-size: 0.75rem;
  margin: 0.5rem 0 0;
}

@media (max-width: 600px) {
  .rlvp-modal[b-eq80ql8viy] {
    width: 100%;
  }

  .rlvp-assignment-controls[b-eq80ql8viy] {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.rlvp-role-list[b-eq80ql8viy] {
  display: grid;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rlvp-role-list li[b-eq80ql8viy] {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

/* The column heading doubles as select-all / clear-all, styled as the heading it replaces. */
button.rlvp-column-toggle[b-eq80ql8viy] {
  background: none;
  border: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  min-height: 0;
  padding: 0;
  text-decoration: underline dotted;
  text-transform: inherit;
}

.rlvp-role-until[b-eq80ql8viy] {
  color: var(--color-muted);
  font-size: 0.85em;
  margin-left: 0.35rem;
}

.rlvp-add-row input.rlvp-input-days[b-eq80ql8viy] {
  flex: 0 1 9rem;
}
/* /Components/Account/IdInfoIcon.razor.rz.scp.css */
/* No native title: the styled sibling bubble is the only tooltip (hover/focus, or tap on
   touch). */
.id-info[b-s04jegdpsj] {
  align-items: center;
  background: none;
  border: 0;
  color: var(--gold);
  cursor: help;
  display: inline-flex;
  line-height: 1;
  margin: 0 0.35em;
  opacity: 0.75;
  padding: 0;
  transition: opacity 160ms ease;
}

.id-info:hover[b-s04jegdpsj],
.id-info:focus-visible[b-s04jegdpsj] {
  opacity: 1;
  outline: none;
}

/* Rendered as a <button> for tap and keyboard reach. Element-qualified so it outranks
   app.css's .account-card button and stays a plain gold glyph. */
button.id-info[b-s04jegdpsj] {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--gold);
  min-height: 0;
  padding: 0;
}

button.id-info:hover[b-s04jegdpsj],
button.id-info:focus-visible[b-s04jegdpsj] {
  background: none;
  box-shadow: none;
  color: var(--gold);
}

/* Stroke-based SVG circle-i; currentColor follows .id-info's color and opacity. */
.id-info-icon[b-s04jegdpsj] {
  flex-shrink: 0;
}
/* /Components/Account/PasswordField.razor.rz.scp.css */
.password-input[b-nj906z0240] {
  display: grid;
  position: relative;
}

/* Mirrors app.css's field selector plus this component's class, so it outranks that rule's
   padding without !important. */
.password-input input:not([type="checkbox"]):not([type="hidden"])[b-nj906z0240] {
  padding-right: 3rem;
}

/* Prefixed with .password-input so the toggle outranks app.css's .account-card button,
   which would otherwise style it as a submit button. */
.password-input .password-toggle[b-nj906z0240] {
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  justify-content: center;
  min-height: 0;
  padding: 0 0.9rem;
  position: absolute;
  right: 0;
  top: 0;
  transition: color 160ms ease;
}

.password-input .password-toggle:hover[b-nj906z0240] {
  color: var(--gold-light);
}

.password-input .password-toggle svg[b-nj906z0240] {
  height: 1.15rem;
  width: 1.15rem;
}

.password-input .password-toggle .icon-eye-off[b-nj906z0240] {
  display: none;
}

.password-input .password-toggle[aria-pressed="true"] .icon-eye[b-nj906z0240] {
  display: none;
}

.password-input .password-toggle[aria-pressed="true"] .icon-eye-off[b-nj906z0240] {
  display: block;
}
/* /Components/Layout/AccountNavigation.razor.rz.scp.css */
.account-navigation[b-r60dpa6bhy] {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.account-navigation a[b-r60dpa6bhy],
.account-navigation button[b-r60dpa6bhy],
.session-welcome[b-r60dpa6bhy] {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.account-navigation a[b-r60dpa6bhy] {
  text-decoration: none;
}

.login-link[b-r60dpa6bhy],
.account-link[b-r60dpa6bhy] {
  color: var(--color-ivory);
}

.login-link:hover[b-r60dpa6bhy],
.account-link:hover[b-r60dpa6bhy] {
  color: var(--gold-light);
}

.access-code-link[b-r60dpa6bhy] {
  border: 1px solid rgb(var(--gold-rgb) / 58%);
  color: var(--gold-light);
  padding: 0.65rem 0.8rem;
}

.access-code-link:hover[b-r60dpa6bhy] {
  background: rgb(var(--gold-rgb) / 9%);
  border-color: var(--gold-light);
  color: var(--color-ivory);
}

/* Signed in, "Welcome {name}" stacks over "Log out". */
.account-navigation-session[b-r60dpa6bhy] {
  align-items: flex-end;
  flex-direction: column;
  gap: 0.35rem;
}

.session-welcome[b-r60dpa6bhy] {
  color: var(--color-muted);
}

.session-welcome .account-link[b-r60dpa6bhy] {
  color: var(--gold-light);
  text-decoration: underline;
  text-decoration-color: rgb(var(--gold-rgb) / 45%);
  text-underline-offset: 0.2em;
}

.session-welcome .account-link:hover[b-r60dpa6bhy] {
  color: var(--color-ivory);
  text-decoration-color: currentColor;
}

/* The logout form adds no box of its own so its button aligns with the sibling links. */
.account-navigation form[b-r60dpa6bhy] {
  display: inline-flex;
  margin: 0;
}

.account-link-button[b-r60dpa6bhy] {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgb(var(--gold-rgb) / 45%);
  text-underline-offset: 0.2em;
}

.account-link-button:hover[b-r60dpa6bhy] {
  color: var(--gold-light);
  text-decoration-color: currentColor;
}

@media (max-width: 600px) {
  .account-navigation[b-r60dpa6bhy] {
    gap: 0.7rem;
  }

  .account-navigation a[b-r60dpa6bhy],
  .account-navigation button[b-r60dpa6bhy],
  .session-welcome[b-r60dpa6bhy] {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  .access-code-link[b-r60dpa6bhy] {
    max-width: 7.75rem;
    padding: 0.55rem 0.6rem;
    text-align: center;
  }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The watermark keeps its width-based size on any window height. place-items: safe center
   centers it when it fits and top-aligns it when it does not, so it is never pushed above
   the viewport. Grid, not flex: flex only gained safe alignment in Chromium in late 2024,
   and older engines drop the whole declaration. */
.page-watermark[b-9qd7z1kvzr] {
  display: grid;
  inset: 0;
  opacity: 0.09;
  place-items: safe center;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

/* A real <img> so height: auto follows the source image's proportions. */
.page-watermark-image[b-9qd7z1kvzr] {
  height: auto;
  width: min(54rem, 88vw);
}

.page-shell[b-9qd7z1kvzr] {
  position: relative;
  z-index: 1;
}

.site-header[b-9qd7z1kvzr] {
  align-items: center;
  border-bottom: 1px solid rgb(var(--gold-rgb) / 40%);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.25rem 0 0.75rem;
  width: var(--header-content-width);
}

.brand[b-9qd7z1kvzr] {
  align-items: center;
  color: var(--color-ivory);
  display: inline-flex;
  font: 600 1.2rem var(--font-display);
  gap: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: none;
}

.brand:focus-visible[b-9qd7z1kvzr] {
  color: var(--gold-light);
  outline: none;
  text-shadow: 0 0 12px rgb(var(--gold-light-rgb) / 28%);
}

.brand-mark[b-9qd7z1kvzr] {
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgb(255 224 119 / 15%), 0 0 10px rgb(212 168 63 / 12%);
  color: var(--gold-light);
  display: inline-flex;
  font-size: 0.72rem;
  height: 2.4rem;
  justify-content: center;
  letter-spacing: 0.08em;
  width: 2.4rem;
}

.site-footer[b-9qd7z1kvzr] {
  color: var(--color-muted);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  padding: 1.1rem 1.5rem 2.25rem;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .site-header[b-9qd7z1kvzr] {
    width: var(--header-content-width-mobile);
  }
}
/* /Components/Layout/PrimaryNavigation.razor.rz.scp.css */
.primary-navigation[b-8um8nd185o] {
  align-items: center;
  border-bottom: 1px solid rgb(var(--gold-rgb) / 18%);
  display: flex;
  gap: var(--space-4);
  margin: 0 auto;
  padding: var(--space-2) 0 var(--space-2);
  width: var(--header-content-width);
}

/* NavLink renders its own <a>, so these rules reach it through ::deep. */
.primary-navigation[b-8um8nd185o]  .primary-navigation-link {
  color: var(--color-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding-bottom: var(--space-1);
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease;
}

.primary-navigation[b-8um8nd185o]  .primary-navigation-link::after {
  background: var(--gold-light);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 100%;
  transition: right 200ms ease;
}

.primary-navigation[b-8um8nd185o]  .primary-navigation-link:hover {
  color: var(--color-ivory);
}

.primary-navigation[b-8um8nd185o]  .primary-navigation-link:hover::after {
  right: 0;
}

/* NavLink adds this class when the route matches. */
.primary-navigation[b-8um8nd185o]  .primary-navigation-link.active {
  color: var(--gold-light);
}

.primary-navigation[b-8um8nd185o]  .primary-navigation-link.active::after {
  right: 0;
}

@media (max-width: 600px) {
  .primary-navigation[b-8um8nd185o] {
    /* Wrap the links on phones instead of running off the right edge, at a slightly
       smaller size. */
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    width: var(--header-content-width-mobile);
  }

  .primary-navigation[b-8um8nd185o]  .primary-navigation-link {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-navigation[b-8um8nd185o]  .primary-navigation-link,
  .primary-navigation[b-8um8nd185o]  .primary-navigation-link::after {
    transition: none;
  }
}
/* /Components/Pages/Accounts/AccountLanding.razor.rz.scp.css */
.dashboard-grid[b-z4g4y2en9n] {
  display: grid;
  gap: var(--space-3);
  /* min(13rem, 100%) so a later padding change cannot overflow narrow screens. */
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-top: var(--space-4);
}

.dashboard-card[b-z4g4y2en9n] {
  border: 1px solid rgb(var(--gold-rgb) / 30%);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

a.dashboard-card:hover[b-z4g4y2en9n],
a.dashboard-card:focus-visible[b-z4g4y2en9n] {
  background: rgb(var(--gold-rgb) / 6%);
  border-color: var(--gold-light);
  transform: translateY(-2px);
}

.dashboard-card-title[b-z4g4y2en9n] {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.dashboard-card-description[b-z4g4y2en9n] {
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-card[b-z4g4y2en9n] {
    transition: none;
  }
}
/* /Components/Pages/Debug/DebugMessageActivity.razor.rz.scp.css */
/* Attachment picker: the select takes the remaining width; actions sit beside it on
   desktop and wrap below on phones. */
.debug-picker[b-rpodakw2l2] {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* min-width: 0: a <select>'s min-content is its widest option, and these labels are long. */
.debug-picker-field[b-rpodakw2l2] {
  flex: 1 1 18rem;
  min-width: 0;
}

/* Actions align with the control, not the label above it. */
.debug-picker-actions[b-rpodakw2l2] {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.debug-live[b-rpodakw2l2] {
  white-space: nowrap;
}

/* Glance-level polling indicator (filled while live); the checkbox carries the state, so
   it is aria-hidden. */
.debug-live-dot[b-rpodakw2l2] {
  background: transparent;
  border: 1px solid rgb(var(--gold-rgb) / 55%);
  border-radius: 50%;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
}

.debug-live-dot-on[b-rpodakw2l2] {
  background: var(--gold-light);
  box-shadow: 0 0 6px rgb(var(--gold-light-rgb) / 55%);
  border-color: var(--gold-light);
}

/* Non-grid lane sections still need the grid's inset and top rule inside the shared
   .admin-entity-history shell. */
.debug-lane-note[b-rpodakw2l2],
.debug-lane-tools[b-rpodakw2l2] {
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  padding: var(--space-3);
}

/* Drop .account-help's top margin where it is a section's first line. */
.debug-lane-help[b-rpodakw2l2] {
  margin: 0;
}

.debug-lane-tools > h3[b-rpodakw2l2] {
  color: var(--gold-light);
  font: 600 0.95rem/1.4 var(--font-display);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}

/* The Apply button aligns with the input rather than stretching past the help text. */
.debug-limit-form[b-rpodakw2l2] {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.debug-limit-form > .account-field[b-rpodakw2l2] {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Lane 2 view switch: two radios styled as tabs (Semantic / Wire) over the same data. */
.debug-lane-tabs[b-rpodakw2l2] {
  border: none;
  border-bottom: 1px solid rgb(var(--gold-rgb) / 14%);
  border-top: 1px solid rgb(var(--gold-rgb) / 14%);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  /* A fieldset keeps min-width: min-content even as a flex container; reset it so the
     tabs wrap. */
  min-width: 0;
  padding: 0;
}

.debug-lane-tab[b-rpodakw2l2] {
  align-items: center;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  flex: 0 1 auto;
  font: 0.95rem/1.4 var(--font-body);
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  user-select: none;
  white-space: nowrap;
  border-right: 1px solid rgb(var(--gold-rgb) / 14%);
}

.debug-lane-tab:last-child[b-rpodakw2l2] {
  border-right: none;
}

.debug-lane-tab input[type="radio"][b-rpodakw2l2] {
  cursor: pointer;
  margin: 0;
}

.debug-lane-tab input[type="radio"]:checked + span[b-rpodakw2l2] {
  color: var(--gold-light);
  font-weight: 600;
}

.debug-lane-tab-count[b-rpodakw2l2] {
  background: rgb(var(--gold-rgb) / 14%);
  color: var(--color-muted);
  font-size: 0.85rem;
  padding: 0.125rem var(--space-1);
}