/* J1 global top bar: sits above the page frame on every J1 prototype.
   Search in the middle, Ask AI and the profile on the right. Pages set --j1-top-left
   Like the product: logo on the left across the full width, search, Ask AI and the avatar on the right.
   Pages push their frame (and rail items) down by --j1-top-h. */
:root { --j1-top-h: 56px; }
.j1-top {
  position: absolute; top: 0; left: 0; right: 0; height: var(--j1-top-h); z-index: 31; /* part of the screen: above the rail, below any overlay */
  display: flex; align-items: center; gap: 10px; padding: 0 20px 0 20px; box-sizing: border-box; /* right edge lines up with the content frame (20px) */
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #0E1612;
}
.j1-top .j1-sp { flex: 1; min-width: 0; }
.j1-search {
  flex: 0 0 240px; height: 34px; display: inline-flex; align-items: center; gap: 10px; padding: 0 6px 0 14px;
  border: 1px solid #E4E6E5; border-radius: 999px; background: #fff; color: #828987; font: inherit; font-size: 13.5px;
  cursor: pointer; box-sizing: border-box; transition: border-color .15s, box-shadow .15s;
}
.j1-search:hover { border-color: #CDEA68; box-shadow: 0 0 0 3px rgba(205,234,104,.25); }
.j1-search svg { flex: none; color: #5A615E; }
.j1-search .t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j1-search kbd {
  height: 22px; min-width: 22px; justify-content: center; padding: 0 6px; border: 1px solid #E4E6E5; border-radius: 999px; box-sizing: border-box; background: #F5F6F5; color: #5A615E;
  font: inherit; font-size: 11.5px; display: inline-flex; align-items: center;
}
.j1-top .askai { flex: none; }
.j1-logo { height: 22px; width: auto; display: block; flex: none; }
.j1-av { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #004D43; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.j1-av:hover, .j1-av[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(205,234,104,.55); }
.j1-menu { position: absolute; top: calc(var(--j1-top-h) - 4px); right: 20px; width: 240px; background: #fff; border: 1px solid #E4E6E5; border-radius: 12px; box-shadow: 0 16px 40px rgba(4,15,11,.14); padding: 6px; z-index: 41; display: none; }
.j1-menu.on { display: block; }
.j1-menu .who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid #EDEDED; margin-bottom: 4px; }
.j1-menu .who .j1-av { width: 32px; height: 32px; cursor: default; box-shadow: none; }
.j1-menu .who b { display: block; font-size: 13px; font-weight: 600; }
.j1-menu .who span { display: block; font-size: 11.5px; color: #828987; }
.j1-menu button { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; padding: 8px; border-radius: 8px; font: inherit; font-size: 13px; color: #0E1612; cursor: pointer; text-align: left; }
.j1-menu button:hover { background: #F2F8D9; }
.j1-menu hr { border: 0; border-top: 1px solid #EDEDED; margin: 4px 0; }
/* the page's own Ask AI button moves up into the bar */
.j1-moved { display: none !important; }

/* search palette (top bar Search or ⌘K) */
.j1-pal { position: fixed; inset: 0; z-index: 90; background: rgba(4,15,11,.28); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity .15s ease; font-family: 'Geist', 'Inter', -apple-system, sans-serif; }
.j1-pal.on { opacity: 1; pointer-events: auto; }
.j1-pal .box { width: 620px; max-width: calc(100% - 32px); background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(4,15,11,.22); overflow: hidden; }
.j1-pal .in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #EDEDED; }
.j1-pal .in input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; color: #0E1612; background: none; }
.j1-pal .ql { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #0E1612; color: #fff; font-family: ui-monospace, Menlo, monospace; }
.j1-pal .list { max-height: 360px; overflow: auto; padding: 6px; }
.j1-pal .h { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #828987; padding: 10px 10px 4px; }
.j1-pal .it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; color: #0E1612; cursor: pointer; }
.j1-pal .it .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #F1F2F1; color: #5A615E; flex: none; }
.j1-pal .it .ic.ai { background: #CDEA68; color: #0E1612; }
.j1-pal .it code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.j1-pal .it .meta { margin-left: auto; font-size: 12px; color: #828987; }
.j1-pal .it.on { background: #F2F8D9; }
.j1-pal .f { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid #EDEDED; font-size: 11.5px; color: #828987; }
.j1-pal .f kbd { font: inherit; font-size: 11px; border: 1px solid #E4E6E5; border-radius: 4px; padding: 0 4px; margin-right: 3px; }
.j1-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; z-index: 95; background: #040F0B; color: #fff; font: 13px 'Geist', 'Inter', sans-serif; padding: 10px 16px; border-radius: 10px; pointer-events: none; transition: all .2s ease; }
.j1-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* J1 left menu (j1-rail.js): logo mark on top, pages, then notifications and the account */
.j1-rail { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; padding: 11px 0 18px !important; box-sizing: border-box; background: #fff; }
.j1-rail-overlay { position: fixed; left: 0; top: 0; bottom: 0; z-index: 32; }
html.has-j1-rail-overlay nav[data-collapsed] { visibility: hidden; }
.j1-rail .j1r-mark { width: 26px; height: 26px; display: block; flex: none; margin: 4px 0 26px; }
.j1-rail .j1r-items { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.j1-rail .j1r-i { margin: 0 !important; flex: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: #5A615E; display: grid; place-items: center; cursor: pointer; transition: background .12s; }
.j1-rail .j1r-i svg { width: 22px; height: 22px; }
.j1-rail .j1r-i:hover { background: #F5F6F5; }
.j1-rail .j1r-i.on { background: #F1F2F1; color: #040F0B; }
.j1-rail .j1r-sp { flex: 1; }
.j1-rail .j1r-badge { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 3px 6px; border-radius: 999px; border: 2px solid #fff; background: #D23B3B; color: #fff; font: 600 11px/1 'Geist', 'Inter', sans-serif; }
.j1-rail .j1r-av { /* unused: the account is in the top bar */ width: 34px; height: 34px; margin-top: 10px; padding: 0; border-radius: 50%; border: 2px solid #D8DAD9; background: #7B8D99; color: #fff; font: 500 15px 'Geist', 'Inter', sans-serif; display: grid; place-items: center; cursor: pointer; }
/* short screens: tighten the menu so notifications and the account always fit */
@media (max-height: 780px) {
  .j1-rail .j1r-mark { margin-bottom: 16px; }
  .j1-rail .j1r-items { gap: 2px; }
  .j1-rail .j1r-i { width: 40px; height: 40px; }
  .j1-rail .j1r-notif { margin-top: 12px !important; }
}