/* Baysly site directory — the corner menu shared by every page.
   Self-contained (bn- prefix) so it drops into the demo without touching it. */
.bn-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #DCE3EA; background: #fff; color: #102431; cursor: pointer; flex: none; transition: border-color .2s, background .2s; }
.bn-toggle:hover { border-color: #B8DAF0; background: #EFF7FC; }
.bn-toggle svg { width: 18px; height: 18px; }
.bn-slot { visibility: hidden; pointer-events: none; display: inline-block; width: 36px; height: 36px; flex: none; border: 0; padding: 0; background: none; }
.bn-fab { position: fixed; top: 12px; left: 14px; z-index: 92; box-shadow: 0 4px 14px -6px rgba(16,36,49,.35); transition: top .3s, left .3s, border-color .2s, background .2s; }
.bn-toggle:focus-visible { outline: 2px solid #1687FF; outline-offset: 2px; }

.bn-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(16,36,49,.28); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.bn-scrim.on { opacity: 1; pointer-events: auto; }
.bn-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 91; width: min(380px, 92vw); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F9FD 100%); box-shadow: 24px 0 60px -20px rgba(16,36,49,.35);
  transform: translateX(-104%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
  font: 400 14px/1.45 'IBM Plex Sans', 'Avenir Next', system-ui, sans-serif; color: #102431; }
.bn-panel.on { transform: none; }
.bn-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px 64px; border-bottom: 1px solid #EDF1F5; }
.bn-head img { width: 28px; height: 28px; border-radius: 50%; }
.bn-head b { font-size: 16px; font-weight: 700; }
.bn-head span { font-size: 12px; color: #526674; }
.bn-close { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: #526674; cursor: pointer; display: grid; place-items: center; }
.bn-close:hover { background: #EDF1F5; }
.bn-close svg { width: 16px; height: 16px; }
.bn-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.bn-group { margin-top: 14px; }
.bn-group h6 { font: 600 11px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #94A5B3; padding: 0 8px 8px; margin: 0; }
.bn-item { display: grid; grid-template-columns: 38px 1fr; gap: 2px 12px; align-items: center; padding: 10px 10px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s, transform .15s; opacity: 0; transform: translateX(-6px); }
.bn-panel.on .bn-item { opacity: 1; transform: none; transition: background .15s, opacity .35s ease var(--d, 0s), transform .35s cubic-bezier(.22,.61,.36,1) var(--d, 0s); }
.bn-item:hover { background: #EFF7FC; }
.bn-item.cur { background: #fff; box-shadow: 0 0 0 1.5px #B8DAF0, 0 8px 20px -14px rgba(16,36,49,.4); }
.bn-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #EDF1F5; color: #126EA8; }
.bn-item.cur .bn-ic, .bn-item:hover .bn-ic { background: #126EA8; color: #fff; }
.bn-ic svg { width: 18px; height: 18px; }
.bn-t { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bn-t em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #126EA8; background: #DBEDF8; padding: 2px 7px; border-radius: 999px; }
.bn-d { font-size: 12.5px; color: #526674; line-height: 1.35; }
.bn-foot { padding: 12px 18px 18px; border-top: 1px solid #EDF1F5; font-size: 12.5px; color: #526674; display: flex; justify-content: space-between; }
.bn-foot a { color: #126EA8; text-decoration: none; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bn-panel, .bn-item, .bn-scrim { transition: none !important; } }