/* Prototype-only additions (not part of the doks theme). */
.proto-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 9999;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 8px; font-size: 14px;
  background: rgba(24, 24, 27, .92); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: opacity .2s ease, transform .2s ease;
}
.proto-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Mock members box (okr-manual-map) */
.proto-members-form { display: flex; gap: .5rem; width: 100%; max-width: 28rem; margin-top: 1.75rem; }
.proto-members-form input {
  flex: 1 1 auto; min-width: 0; height: 2.75rem; padding: 0 .875rem; border-radius: .5rem;
  border: 1px solid rgb(24 24 27 / .15); background: #fff; color: #18181b; font-size: 1rem;
}
html.dark .proto-members-form input { background: #27272a; color: #e4e4e7; border-color: rgb(250 250 250 / .1); }
.proto-members-form button { flex: none; height: 2.75rem; }
.proto-badge {
  display: inline-block; margin-bottom: .75rem; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: #92400e; background: #fef3c7; border: 1px dashed #d97706;
}
@media (max-width: 480px) { .proto-members-form { flex-direction: column; } }

/* Fix: the site's code-injection CSS dims the docs sidebar with a ::after mask that only
   clears on :hover. On touch devices (and in the opened mobile drawer) there is no hover,
   so the menu stayed washed out. Keep the desktop hover effect, drop the mask elsewhere. */
[data-docs-menu].open::after { opacity: 0 !important; }
@media (hover: none), (max-width: 1023px) { [data-docs-menu]::after { opacity: 0 !important; } }