/* Focus, loading and state patterns shared across the developer portal. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #0b7cff;
  outline-offset: 3px;
}

.portal-button, .doc-secondary, .copy-key, .btn {
  min-height: 44px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.portal-button:hover, .doc-secondary:hover, .copy-key:hover, .btn:hover { transform: translateY(-1px); }
.portal-button:disabled, .doc-secondary[aria-disabled="true"] { cursor: not-allowed; opacity: .6; transform: none; }

.onboarding-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; padding:25px 28px; border:1px solid #b9d7fb; border-radius:18px; background:linear-gradient(100deg,#edf6ff,#effcf7); }
.onboarding-banner h2 { margin:4px 0 7px; color:var(--portal-text); font:800 1.45rem 'Manrope',sans-serif; letter-spacing:-.045em; }
.onboarding-banner p:last-child { max-width:710px; margin:0; color:var(--portal-muted); }
.empty-state { display:grid; gap:8px; padding:28px; color:var(--portal-muted); }
.empty-state p { margin:0; }
.empty-state a { font-weight:800; }
.chart-empty { display:grid; place-content:center; justify-items:center; min-height:290px; gap:10px; color:var(--portal-muted); text-align:center; }
.chart-empty i { color:var(--portal-blue); font-size:1.8rem; }

.key-reveal { border-color:#7ac6b3; background:linear-gradient(110deg,#f4fffa,#fff); }
.rotation-steps { display:grid; gap:7px; margin:18px 0 0; padding-left:21px; color:var(--portal-muted); }
.key-grace-note { margin:17px 0 0; color:#815800; font-size:.9rem; font-weight:700; }
.key-rotation-action { margin:18px 0 4px; }
.status-checked { margin:18px 0 0; color:#d6e9f8; font-size:.85rem; }

.setup-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }
.setup-steps article { padding:25px; border:1px solid var(--portal-line); border-radius:17px; background:#fff; box-shadow:0 10px 26px rgba(16,35,63,.05); }
.setup-steps span { color:var(--portal-blue); font-size:.75rem; font-weight:800; letter-spacing:.1em; }
.setup-steps h2 { margin:8px 0; color:var(--portal-text); font:800 1.2rem 'Manrope',sans-serif; }
.setup-steps p { margin:0; color:var(--portal-muted); line-height:1.65; }
.setup-steps pre { overflow:auto; margin:14px 0; padding:13px; border-radius:10px; background:#0b213d; color:#d9edff; font-size:.78rem; }

@media (max-width: 760px) {
  .onboarding-banner { align-items:flex-start; flex-direction:column; }
  .setup-steps { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}