/******************************************************************************/
/* Help tab — role switcher + audit log                                      */
/******************************************************************************/

.help-page { padding-bottom: 24px; }
.help-page h3 { font-size: 14px; margin: 4px 0 6px; }
.help-page__section-heading { margin-top: 24px; }

.sign-in-section { margin: 10px 0 6px; }

.sign-in-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.sign-in-status--signed-in { border-color: var(--brand); background: var(--brand-verylight); }
.sign-in-status__text { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sign-in-status__action {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.sign-in-status__action:hover { border-color: var(--brand); }
.sign-in-status__action--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  width: 100%;
}
.sign-in-status__action--primary:hover { opacity: 0.92; }

/* Real-admin-only "view as Reporter" switch (HelpPage.js) — a settings-row
   card (title + detail on the left, an iOS-style filled switch on the
   right), styled like .sign-in-status/.role-option below so it reads as
   part of the same card language instead of a floating bare control. */
.role-view-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 8px 0 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}
/* Override buttons.css's global `button:hover` brand-dark fill — that dark
   fill is meant for solid-brand CTA buttons, not this white/bordered card;
   left as-is it drops the title/detail text (var(--ink)/var(--ink-muted))
   onto a background too dark to read. Same light-tint hover already used by
   .role-option below. */
.role-view-toggle:hover { border-color: var(--brand); background: var(--brand-verylight); }
.role-view-toggle[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand-verylight);
}

.role-view-toggle__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-view-toggle__title { font-weight: 700; font-size: 13px; color: var(--ink); }
.role-view-toggle__detail { font-size: 11.5px; color: var(--ink-muted); font-weight: 400; }

.role-view-toggle__switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s ease;
}
.role-view-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}
.role-view-toggle[aria-checked="true"] .role-view-toggle__switch { background: var(--brand); }
.role-view-toggle[aria-checked="true"] .role-view-toggle__thumb { transform: translateX(18px); }

.role-switcher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 6px;
}

.role-option {
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
}
.role-option:hover { border-color: var(--brand); background: var(--brand-verylight); }
.role-option--active {
  border-color: var(--brand);
  background: var(--brand-verylight);
}
.role-option__label { font-weight: 700; font-size: 13px; }
.role-option__detail { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; font-weight: 400; }

.audit-section { margin-top: 8px; }
.audit-list { display: flex; flex-direction: column; gap: 6px; }
.audit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.audit-row__text { color: var(--ink); }
.audit-row__time { color: var(--ink-muted); white-space: nowrap; font-size: 11px; }