/* =============================================================================
 * Stryde top nav (apple.com-style grouped mega menu).
 *
 * Companion to topnav.js. Themed via the same `--bg`/`--ink`/`--line` SDK
 * tokens (stryde.css + stryde-tokens.css) so it inherits the page's theme
 * (light/dark) and language direction (LTR/RTL) automatically.
 *
 * Layout:
 *   .stn                       — sticky top bar (brand + groups + spacer)
 *   .stn-brand                 — logo + "Stryde" link to /
 *   .stn-groups                — horizontal list of groups
 *   .stn-group > .stn-group-btn — the group label (Apps / Wiki / Admin)
 *   .stn-group > .stn-panel    — hover panel, absolutely positioned
 *   .stn-panel-grid            — 2-col card grid inside the panel
 *   .stn-card                  — one app/link with icon + name + desc
 * ========================================================================== */

/* ----- bar ---------------------------------------------------------------- *
 * Two usage modes:
 *  1) INSIDE each platform page's existing `.bar` (index/wiki/admin/etc.) —
 *     the host bar provides the sticky chrome + right-side controls
 *     (Cmd-K / lang / theme / bell / user). We render the brand + groups.
 *  2) STANDALONE on hosted apps (admin-ui / neo-stryde / problem-framing
 *     layouts) — the host page has no platform bar, so the mount adds the
 *     `.stn-host` class, which provides the sticky chrome itself.
 * The script picks whichever mode applies; no app code branches.
 * --------------------------------------------------------------------------*/
.stn-host {
  position: sticky; top: 0; z-index: 60;
  display: block;
  background: color-mix(in oklab, var(--bg, #F5F2EC) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter:         saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line, #E6E1D6);
  padding: 8px 22px;
}
:root.dark .stn-host,
[data-theme="dark"] .stn-host {
  background: color-mix(in oklab, var(--bg, #0F0B23) 86%, transparent);
  border-bottom-color: var(--line, rgba(255,255,255,.07));
}
/* The mount itself — it's the flex child of the host .bar so it needs the
   grow on the mount, not on .stn (which lives inside it). Targets both the
   bare ID (when dropped into an existing bar) and the .stn-host wrapper
   (standalone use on app layouts). */
#stryde-topnav {
  display: flex; align-items: center;
  flex: 5 1 0;
  min-width: 0;
}
.stn {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans, ui-sans-serif, system-ui);
  color: var(--ink, #1B1B1F);
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}
.stn-brand {
  display: inline-flex; align-items: center;
  text-decoration: none; color: inherit;
  padding: 4px 8px; border-radius: 10px;
  transition: background .15s ease;
  flex: 0 0 auto;
}
.stn-brand:hover { background: var(--line2, rgba(0,0,0,.04)); }
.stn-logo { height: 36px; width: auto; }
/* Brand logo dark/light pair — same `[data-theme]` convention as the icons.
 * Both branches explicit so neither variant flashes the wrong asset before
 * the pre-paint script fires. */
html[data-theme="dark"]  .stn-logo-dark,  html.dark .stn-logo-dark   { display: block; }
html[data-theme="dark"]  .stn-logo-light, html.dark .stn-logo-light  { display: none; }
html[data-theme="light"] .stn-logo-dark,  html.light .stn-logo-dark  { display: none; }
html[data-theme="light"] .stn-logo-light, html.light .stn-logo-light { display: block; }
.stn-logo-dark  { display: block; }
.stn-logo-light { display: none; }

/* ----- right-side action controls (search / lang / theme / bell / avatar)
 * --------------------------------------------------------------------------*/
.stn-actions {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
.stn-cmdk {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 12px;
  font: inherit; color: var(--ink2, #4A4A52);
  background: var(--bg-soft, transparent);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 10px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.stn-cmdk:hover { color: var(--ink, #1B1B1F); border-color: color-mix(in srgb, var(--brand-violet, #8B5CF6) 40%, var(--line, rgba(0,0,0,.1))); }
.stn-cmdk svg { width: 15px; height: 15px; flex: none; }
.stn-cmdk-text { font-size: 13.5px; }
.stn-cmdk kbd {
  font: 600 11px var(--sans, ui-sans-serif, system-ui);
  color: var(--ink2, #4A4A52);
  background: var(--bg-elev, #FBFAF6);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 6px;
  padding: 2px 6px; letter-spacing: .04em;
}
@media (max-width: 1080px) {
  .stn-cmdk { padding: 0 10px; }
  .stn-cmdk-text, .stn-cmdk kbd { display: none; }
}
.stn-seg {
  display: inline-flex; align-items: center;
  background: var(--bg-soft, transparent);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 10px;
  padding: 3px;
}
.stn-seg button {
  font: inherit; font-weight: 600; font-size: 12.5px;
  color: var(--ink2, #4A4A52);
  background: transparent; border: 0;
  height: 28px; min-width: 32px;
  padding: 0 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.stn-seg button:hover { color: var(--ink, #1B1B1F); }
.stn-seg button.on {
  background: var(--bg-elev, #FBFAF6);
  color: var(--ink, #1B1B1F);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.stn-iconbtn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft, transparent);
  color: var(--ink, #1B1B1F);
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 10px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.stn-iconbtn:hover { border-color: color-mix(in srgb, var(--brand-violet, #8B5CF6) 40%, var(--line, rgba(0,0,0,.1))); }
.stn-iconbtn svg { width: 18px; height: 18px; }
/* The bell + avatar mount divs get their inline widget styling from the
 * sdk scripts (notifications.js / userbtn.js). We only constrain the box. */
.stn-actions > #s-notif,
.stn-actions > #s-userbtn { display: inline-flex; align-items: center; }

/* ----- groups list ------------------------------------------------------- */
.stn-groups {
  display: flex; align-items: center; gap: 2px;
  list-style: none; padding: 0; margin: 0;
  /* Apple-style centering: take the rest of .stn's width and center the
     items inside it. The original platform `.menu` used the same trick.
     Auto margins alone don't work here because .stn shares flex space with
     the cmdkbtn/lang/theme controls — flex: 1 here is what actually makes
     the groups occupy the leftover and `justify-content: center` does the
     centering reliably across browsers. */
  flex: 1 1 0%;
  justify-content: center;
  /* NOT `position: relative` — we want .stn-panel to anchor against the
     host bar (already sticky-positioned), so the panel can stretch the
     full viewport like apple.com instead of being confined to this row. */
}
.stn-group { position: static; }
.stn-group-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: var(--ink2, #4A4A52); font-weight: 550;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 9px;
  transition: background .15s ease, color .15s ease;
}
.stn-group-btn:hover, .stn-group.open .stn-group-btn {
  color: var(--ink, #1B1B1F);
  background: var(--line2, rgba(0,0,0,.05));
}
.stn-caret {
  width: 10px; height: 10px; opacity: .6;
  transition: transform .2s ease;
}
.stn-group.open .stn-caret { transform: rotate(180deg); opacity: 1; }

/* ----- mega-menu panel --------------------------------------------------- *
 * The panel anchors to the host bar so it spans the full viewport width like
 * apple.com. The bar (.bar) needs `position: relative` — we add it via the
 * helper class `.bar--has-topnav` we set on the host header in topnav.js.
 * --------------------------------------------------------------------------*/
.stn-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  background: var(--bg-elev, #FBFAF6);
  border-bottom: 1px solid var(--line, #E6E1D6);
  box-shadow: 0 12px 40px -8px rgba(15, 12, 36, .12);
  z-index: 55;
}
.stn-group.open .stn-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.stn-panel-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  max-width: 1080px; margin: 0 auto;
  padding: 22px 28px 28px;
}
@media (max-width: 720px) {
  .stn-panel-grid { grid-template-columns: 1fr; }
}

/* ----- card (one app / one link) ---------------------------------------- */
.stn-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 14px;
  text-decoration: none; color: inherit;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.stn-card:hover {
  background: color-mix(in oklab, var(--bg, #F5F2EC) 60%, transparent);
  border-color: var(--line, #E6E1D6);
  transform: translateY(-1px);
}
.stn-card-ic {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg, #F5F2EC);
  border: 1px solid var(--line, #E6E1D6);
  border-radius: 11px;
}
.stn-ico {
  width: 32px; height: 32px; object-fit: contain;
}
/* The icon set ships dark-bg + light-bg variants. The class names describe
 * the THEME each variant is FOR (the convention Stryde uses elsewhere —
 * .logo-d / .logo-l, .dark-only / .light-only).
 *
 * Theme detection has to support BOTH conventions on the host page because
 * the platform pages (index/wiki/admin/etc.) use `html[data-theme=...]`,
 * while admin-ui's Next.js layout + neo-stryde + shell-mf use a `.dark`
 * class on <html>. Match both so the icon swap fires everywhere. */
html[data-theme="dark"]  .stn-ico-dark,  html.dark .stn-ico-dark   { display: block; }
html[data-theme="dark"]  .stn-ico-light, html.dark .stn-ico-light  { display: none; }
html[data-theme="light"] .stn-ico-dark,  html.light .stn-ico-dark  { display: none; }
html[data-theme="light"] .stn-ico-light, html.light .stn-ico-light { display: block; }
/* No theme set yet → default to the platform default (dark). */
.stn-ico-dark  { display: block; }
.stn-ico-light { display: none; }
.stn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #6BA4FF);
}
.stn-pin-ico {
  /* Inline SVG icons for Wiki/Admin pin items — sized to match the app
     icon visual weight. Color inherits from .stn-card-ic so dark/light
     themes work without per-icon swaps. */
  width: 22px; height: 22px; display: block;
  color: var(--brand-violet, #8B5CF6);
  opacity: .92;
}
.stn-card-text { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.stn-card-name {
  font-weight: 600; font-size: 14px; letter-spacing: -.005em;
  color: var(--ink, #1B1B1F);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stn-card-desc {
  font-size: 12.5px; color: var(--ink3, #6F6F78); line-height: 1.35;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ----- dark theme -------------------------------------------------------- *
 * Only the surface chrome (bar background, panel background) needs to
 * switch — the icon + logo swaps are already handled above by the
 * single-source [data-theme] rules. Use `html[data-theme="dark"]` to match
 * Stryde's existing convention (see static/index.html, wiki.html). */
html[data-theme="dark"] .stn-host,
html.dark             .stn-host {
  background: color-mix(in oklab, var(--bg, #0F0B23) 86%, transparent);
  border-bottom-color: var(--line, rgba(255,255,255,.07));
}
html[data-theme="dark"] .stn-panel,
html.dark             .stn-panel {
  background: var(--bg-elev, #15102F);
  box-shadow: 0 16px 50px -10px rgba(0, 0, 0, .55);
}

/* ----- RTL polish -------------------------------------------------------- */
.stn[dir="rtl"] .stn-panel-grid { direction: rtl; }
.stn[dir="rtl"] .stn-caret { transform: scaleX(-1); }
.stn[dir="rtl"] .stn-group.open .stn-caret { transform: scaleX(-1) rotate(180deg); }