/* OPS helpers for pages built in Infign (loaded with bundle.css, never next to
   Bootstrap). Tokens only. */

html { -webkit-text-size-adjust:100%; }
a.btn, a.btn:hover, a.link:hover { text-decoration:none; }
.ops-shell input, .ops-shell select, .ops-shell textarea { font-size:16px; } /* no iOS zoom */
@media (min-width:900px) { .ops-shell input, .ops-shell select, .ops-shell textarea { font-size:15px; } }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-12); flex-wrap:wrap; margin-bottom:var(--space-16); }
.page-head h1 { font-family:var(--font-mono); font-weight:700; font-size:24px; letter-spacing:-.02em; margin:0; }
.page-head p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.stack { max-width:640px; }
.wide { max-width:1100px; }
.mt-16 { margin-top:var(--space-16); }
.check { display:flex; align-items:flex-start; gap:10px; font-size:14px; margin-top:var(--space-14); cursor:pointer; }
.check input { width:20px; height:20px; min-height:0; padding:0; margin-top:1px; flex:none; accent-color:var(--gold); }
.err-box { background:var(--signal-soft); color:var(--signal); border-radius:var(--radius-tile); padding:12px 14px; font-size:14px; font-weight:600; margin-bottom:var(--space-14); }
.ok-box { background:var(--go-soft); color:var(--go); border-radius:var(--radius-tile); padding:12px 14px; font-size:14px; font-weight:600; margin-bottom:var(--space-14); }
.actions { display:flex; gap:var(--space-8); flex-wrap:wrap; margin-top:var(--space-16); }
.actions .btn { flex:1 1 auto; }
@media (min-width:640px) { .actions .btn { flex:0 0 auto; } }
.kv { display:flex; justify-content:space-between; gap:var(--space-12); padding:11px 0; border-top:1px solid var(--rule); font-size:14px; }
.kv:first-of-type { border-top:0; }
.kv .k { color:var(--muted); }
.kv .v { text-align:right; font-weight:600; }
.mono-key { font-family:var(--font-mono); font-size:17px; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.mono-key span { display:inline-block; white-space:nowrap; }
.code-input { font-family:var(--font-mono); font-size:26px !important; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums; }
.qr { background:#fff; border-radius:var(--radius-tile); padding:10px; width:220px; max-width:100%; margin:0 auto var(--space-14); }
.qr svg { width:100%; height:auto; display:block; }
.codes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-8); margin:var(--space-12) 0; }
.codes code { font-family:var(--font-mono); font-size:16px; background:var(--fill); border-radius:var(--radius-field); padding:10px; text-align:center; color:var(--ink); }
.steps-list { margin:0 0 var(--space-12); padding-left:20px; font-size:14px; line-height:1.55; }
.btn-link { background:none; border:0; padding:0; color:var(--gold); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }

/* pop-ups: Infign .scrim/.modal made live */
.scrim { position:fixed; inset:0; z-index:90; }
.scrim[hidden] { display:none; }
.modal { max-height:88vh; overflow-y:auto; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
.modal .actions { margin-top:var(--space-14); }
@media (min-width:640px) {
  .scrim { align-items:center; padding:24px 16px; }
  .modal { border-radius:var(--radius-modal); padding-bottom:18px; }
}

/* toast */
.toast-wrap { position:fixed; left:0; right:0; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:95; display:flex; justify-content:center; pointer-events:none; padding:0 16px; }
.toast-wrap .toast { pointer-events:auto; max-width:560px; text-align:center; }
@media (min-width:900px) { .toast-wrap { bottom:24px; left:var(--sidebar); } }

/* people list: cards on a phone, a table from 900px */
.people { display:grid; gap:var(--space-10); }
.person { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:14px; }
.person-top { display:flex; align-items:center; gap:var(--space-10); }
.person-name { font-weight:600; font-size:15px; }
.person-meta { font-size:12.5px; color:var(--muted); word-break:break-word; }
.person-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-10); }
.person-acts { display:flex; flex-wrap:wrap; gap:var(--space-8); margin-top:var(--space-12); }
.people-table { display:none; }
@media (min-width:900px) {
  .people { display:none; }
  .people-table { display:block; overflow-x:auto; }
  .people-table .card { padding:6px 12px; }
}
.row-acts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }