/* Identity-module additions on top of the shared UI kit (tokens.css + app.css, pinned by ui-kit.lock - never edit those).
 * Rules: colors ONLY via tokens.css variables; no new colors, no gradients, no shadows, no remote fonts.
 * Must-notice states use .pill.strong or .flash.error from app.css.
 */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.gap-top { margin-top: 1rem; }
.dim { opacity: .6; }
.btn-block { display: block; width: 100%; text-align: center; }

/* org switcher: a submit button instead of the console's inline onchange script (CSP script-src 'self') */
.orgswitch { display: flex; align-items: center; gap: .4rem; margin: 0; }

/* suite lockup: suite logo + current app name, same in every module */
.suite-lockup { display: inline-flex; align-items: center; gap: .65rem; }
.lockup-app { border-left: 1px solid var(--color-primary); padding-left: .65rem; font-weight: 800; font-size: 1.05rem;
  letter-spacing: .01em; line-height: 34px; }

/* sign in */
.signin { padding: 1.5rem 1.75rem; margin-top: 2.5rem; }
.signin h1 { text-align: center; margin-bottom: 1rem; }
.divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .25rem; font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-primary); }

/* members */
.who { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.card .who .avatar { background: var(--color-bg); }
.table tbody tr.selected { background: var(--color-primary); }
/* members table: 5 columns beside the detail panel - tighter cells, never spill under the panel */
.scroll-x { overflow-x: auto; }
.table.compact th, .table.compact td { padding: .45rem .4rem; font-size: .86rem; }
.table.compact .pill { white-space: nowrap; font-size: .72rem; }
.table.compact .who { gap: .4rem; }
.modlist { list-style: none; margin: 0; padding: 0; }
.modlist li { display: flex; flex-direction: column; padding: .45rem 0; border-bottom: 1px solid var(--color-primary); }
.modlist li:last-child { border-bottom: none; }

/* security center: velocity trip banner (flash.error) with actions */
.flash.trip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.flash.trip form { margin: 0; }
td form { margin: 0; }
.flash.error a.btn { color: var(--color-text); }
.kv.compact { grid-template-columns: 6.5rem minmax(0, 1fr); }
/* keep a Blue Pearl status pill readable on the Blue Pearl selected row */
.table tbody tr.selected .pill.primary { outline: 1px solid var(--color-accent); outline-offset: -1px; }

/* phone / small screens: menu button opens the section list, header stacks, boxes go full width.
 * Pure CSS (checkbox + label) so it stays within CSP script-src 'self'. app.css hides .sidebar at 900px; this brings it back on demand. */
.navtoggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.navtoggle { display: none; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: .5rem .75rem; padding: .5rem .75rem; }
  .navtoggle { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; cursor: pointer;
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-accent);
    border-radius: var(--radius); padding: .4rem .8rem; font-weight: 700; font-size: .9rem; user-select: none; }
  .navtoggle-cb:checked ~ .topbar .navtoggle { background: var(--color-accent); color: var(--color-on-accent); }
  .topright { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
  .orgswitch { flex: 1 1 100%; min-width: 0; }
  .orgswitch select { flex: 1; min-width: 0; max-width: 100%; }
  .topright form:last-child { margin-left: auto; }
  .shell { display: block; min-height: 0; }
  .navtoggle-cb:checked ~ .shell .sidebar { display: flex; width: auto; border-right: none;
    border-bottom: 1px solid var(--color-primary); padding: .25rem .75rem .75rem; }
  .page { padding: 1rem .75rem 2.5rem; }
  .kv, .kv.compact { grid-template-columns: minmax(0, 1fr); }
  .ref-tiles { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .timeline li { grid-template-columns: 3rem minmax(0, 1fr); }
  .table { display: block; overflow-x: auto; max-width: 100%; }
  .tabs { max-width: 100%; }
  input, select, textarea { max-width: 100%; }
  .flash.trip { flex-direction: column; align-items: stretch; }
}