/* The Jomoq rail (js/app-rail.js): Instagram-style icon rail that widens on
   hover to show labels, laid over the page. Orbit's playful type and colours
   on every page that mounts it, so the product reads as one. Desktop only. */

:root {
  --jr-w: 72px;
  --jr-w-open: 236px;
}
.jr {
  --jr-bg: #FFFFFF;
  --jr-line: #E5E5E5;
  --jr-ink: #3C3C3C;
  --jr-ink-2: #6B6B6B;
  --jr-hover: #F2F2F2;
  --jr-active-bg: #DDF4FF;
  --jr-active-ink: #0A6FAA;
  --jr-active-line: #84D8FF;
  --jr-badge: #FF4B4B;
  --jr-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
  --jr-font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: fixed;
  z-index: 60;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--jr-w);
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px 16px;
  background: var(--jr-bg);
  border-right: 1px solid var(--jr-line);
  font-family: var(--jr-font);
  overflow: hidden;
  transition: width 0.18s cubic-bezier(.2, .8, .2, 1), box-shadow 0.18s ease;
}
:root[data-theme="dark"] .jr {
  --jr-bg: #131F24;
  --jr-line: #2B3A42;
  --jr-ink: #F1F7FB;
  --jr-ink-2: #AFC0C9;
  --jr-hover: #1C2C33;
  --jr-active-bg: #0E3346;
  --jr-active-ink: #49C0F8;
  --jr-active-line: #1F6E94;
  --jr-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
}
/* Outside Orbit the dark canvas is the editor grey, so match it. */
:root[data-theme="dark"] body:not(.orbit-page) .jr { --jr-bg: #1E1E1E; --jr-line: #333333; --jr-hover: #2A2A2A; }

@media (min-width: 900px) {
  .jr { display: flex; }
  .has-jr body { padding-left: var(--jr-w); }
}
.jr.is-open { width: var(--jr-w-open); box-shadow: var(--jr-shadow); }

.jr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 7px;
  margin-bottom: 10px;
  color: var(--jr-ink);
  text-decoration: none;
  border-radius: 14px;
}
.jr-brand-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; }
.jr-brand-mark svg { display: block; width: 32px; height: 32px; transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.jr-brand:hover .jr-brand-mark svg { transform: rotate(-8deg) scale(1.08); }
.jr-word { display: flex; align-items: center; line-height: 0; color: #2E5BFF; }
.jr-word .brand-logo { height: 24px; width: auto; color: inherit; }
:root[data-theme="dark"] .jr-word { color: #7C97FF; }

.jr-items { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.jr-items::-webkit-scrollbar { display: none; }
.jr-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--jr-line); }

.jr-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 48px;
  padding: 0 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--jr-ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  transition: background 0.12s ease, transform 0.12s ease;
}
.jr-item:hover { background: var(--jr-hover); }
/* index.css underlines every a:hover (chat, settings, the builder load it);
   rail links never underline, on any page. */
.jr a, .jr a:hover, .jr a:focus, .jr a:focus-visible, .jr a:visited { text-decoration: none; }
.jr-item:active { transform: scale(0.97); }
.jr-item:focus-visible, .jr-brand:focus-visible { outline: 2px solid #1CB0F6; outline-offset: 2px; }
.jr-item.is-active { background: var(--jr-active-bg); border-color: var(--jr-active-line); color: var(--jr-active-ink); }
.jr-ico { flex: 0 0 auto; width: 24px; font-size: 26px; line-height: 1; text-align: center; font-variation-settings: "FILL" 0, "wght" 500; transition: transform 0.15s ease; }
.jr-item:hover .jr-ico { transform: scale(1.08); }
.jr-item.is-active .jr-ico { font-variation-settings: "FILL" 1, "wght" 600; }
.jr-label { opacity: 0; transform: translateX(-4px); transition: opacity 0.12s ease, transform 0.15s ease; }
.jr.is-open .jr-label { opacity: 1; transform: none; }
.jr-badge {
  position: absolute;
  top: 6px;
  left: 30px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  border: 2px solid var(--jr-bg);
  background: var(--jr-badge);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
}
.jr-badge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .jr, .jr-label, .jr-ico, .jr-brand-mark svg { transition: none; }
}

/* Stacking per page. Orbit's sheets (100) and focus mode (80) cover the rail;
   on chat the rail opens over the conversation sidebar (200) but stays under
   menus, drawers and modals (240+). */
body:not(.orbit-page) .jr { z-index: 230; }

/* ── Phone tab bar (mountTabbar): Orbit's bottom bar on Chat and Playgrounds,
   same items, look and breakpoint as #orbit-tabbar in css/orbit.css. ── */
/* The bar's real height: 6+6 padding, 6+6 tab padding, 26 icon, 2 gap, ~14
   label, 2 border. Pages reserve this much at the bottom. */
:root { --jr-tabbar-h: calc(70px + env(safe-area-inset-bottom)); }
.jr-tabbar {
  --jr-bg: #FFFFFF;
  --jr-line: #E5E5E5;
  --jr-ink-2: #6B6B6B;
  --jr-active-ink: #0A6FAA;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 235;
  display: none;
  justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--jr-bg);
  border-top: 2px solid var(--jr-line);
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] .jr-tabbar { --jr-bg: #1E1E1E; --jr-line: #333333; --jr-ink-2: #AFC0C9; --jr-active-ink: #49C0F8; }
:root[data-theme="dark"] body.community-body .jr-tabbar { --jr-bg: #131F24; --jr-line: #2B3A42; }
.jr-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 12px;
  color: var(--jr-ink-2);
  font-weight: 800;
  font-size: 10.5px;
  text-decoration: none;
}
.jr-tab, .jr-tab:hover, .jr-tab:visited, .jr-tab:focus { text-decoration: none; color: var(--jr-ink-2); }
.jr-tab .material-symbols-rounded { font-size: 26px; line-height: 1; }
.jr-tab.is-active, .jr-tab.is-active:visited, .jr-tab.is-active:hover { color: var(--jr-active-ink); }
.jr-tab.is-active .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 600; }
.jr-tab:focus-visible { outline: 2px solid #1CB0F6; outline-offset: -2px; }
@media (max-width: 767px) {
  .has-jr-tabbar .jr-tabbar { display: flex; }
  .has-jr-tabbar.jr-tabbar-off .jr-tabbar { display: none; }
}

/* ── Pair switch (pairSwitchHtml): "Reels | Playgrounds", "Chats | Friends"
   at the top of each side. .is-on-media = over the dark reels feed. ── */
.jr-switch {
  --sw-bg: rgba(0, 0, 0, 0.06);
  --sw-ink: #6B6B6B;
  --sw-on-bg: #FFFFFF;
  --sw-on-ink: #3C3C3C;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  background: var(--sw-bg);
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] .jr-switch { --sw-bg: rgba(255, 255, 255, 0.08); --sw-ink: #AFC0C9; --sw-on-bg: rgba(255, 255, 255, 0.16); --sw-on-ink: #FFFFFF; }
/* Over the feed the switch is always light-on-dark, in either theme (the
   dark-theme rule above would otherwise win on specificity). */
.jr-switch.is-on-media, :root[data-theme="dark"] .jr-switch.is-on-media { --sw-bg: rgba(0, 0, 0, 0.45); --sw-ink: rgba(255, 255, 255, 0.78); --sw-on-bg: #FFFFFF; --sw-on-ink: #111111; backdrop-filter: blur(8px); }
.jr-switch-item, .jr-switch-item:visited, .jr-switch-item:hover, .jr-switch-item:focus {
  padding: 7px 14px;
  border-radius: 99px;
  color: var(--sw-ink);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.jr-switch-item.is-on, .jr-switch-item.is-on:visited, .jr-switch-item.is-on:hover { background: var(--sw-on-bg); color: var(--sw-on-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.jr-switch-item:focus-visible { outline: 2px solid #1CB0F6; outline-offset: 1px; }

/* Phone "More" sheet (openMoreSheet): Upgrade plan, Profile, Settings. */
.jr-more-wrap { position: fixed; inset: 0; z-index: 260; }
.jr-more-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
.jr-more {
  position: absolute;
  right: 10px;
  bottom: calc(var(--jr-tabbar-h) + 8px);
  min-width: 220px;
  padding: 6px;
  border: 2px solid #E5E5E5;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: jr-more-in 0.16s ease-out;
}
:root[data-theme="dark"] .jr-more { background: #1C2C33; border-color: #2B3A42; }
.jr-more-item, .jr-more-item:visited, .jr-more-item:hover {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  color: #3C3C3C; font-weight: 800; font-size: 15px; text-decoration: none;
}
:root[data-theme="dark"] .jr-more-item, :root[data-theme="dark"] .jr-more-item:visited { color: #F1F7FB; }
.jr-more-item:hover, .jr-more-item:focus-visible { background: rgba(0, 0, 0, 0.06); outline: none; }
:root[data-theme="dark"] .jr-more-item:hover, :root[data-theme="dark"] .jr-more-item:focus-visible { background: rgba(255, 255, 255, 0.08); }
.jr-more-item .material-symbols-rounded { font-size: 22px; color: #1CB0F6; }
.jr-more-item[data-jr="upgrade"] .material-symbols-rounded { color: #FF9600; }
button.jr-tab { border: 0; background: none; font-family: inherit; cursor: pointer; }
@keyframes jr-more-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jr-more { animation: none; } }
/* Three-way Discover switch on narrow phones: shorter labels, tighter pills. */
.jr-sw-short { display: none; }
@media (max-width: 480px) {
  .jr-switch-item { padding: 7px 10px; font-size: 13px; }
  .jr-sw-long { display: none; }
  .jr-sw-short { display: inline; }
}

/* Notifications (js/notif-panel.js), Instagram-style: a full-height drawer
   that slides in from the left edge beside the rail (desktop), a full-screen
   page on phones. Opened from the rail's Notifications button or the bell in
   Orbit's phone top bar. */
button.jr-item { width: 100%; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.jr-item[data-jr="notifs"][aria-expanded="true"] { background: var(--jr-hover); }
.jrn-wrap {
  --jrn-bg: #FFFFFF; --jrn-line: #E5E5E5; --jrn-ink: #3C3C3C; --jrn-ink-2: #6B6B6B; --jrn-hover: #F4F4F4; --jrn-chip: #F1F1F1; --jrn-unread: #EEF8FF;
  --jrn-left: 0px;
  position: fixed; inset: 0; z-index: 250;
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Color Emoji", sans-serif;
}
:root[data-theme="dark"] .jrn-wrap { --jrn-bg: #131F24; --jrn-line: #2B3A42; --jrn-ink: #F1F7FB; --jrn-ink-2: #AFC0C9; --jrn-hover: #1C2C33; --jrn-chip: #1F2F37; --jrn-unread: #0F2A38; }
/* The rail stays clickable while the drawer is open (Home, Chat… work in
   one click); everything right of the drawer closes it. */
.jrn-wrap { pointer-events: none; }
.jrn-scrim, .jrn { pointer-events: auto; }
.jrn-scrim { position: absolute; inset: 0 0 0 var(--jrn-left); }
.jrn {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(calc(var(--jrn-left) + 400px), 100vw); padding-left: var(--jrn-left);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--jrn-line); border-radius: 0 18px 18px 0; background: var(--jrn-bg); color: var(--jrn-ink);
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.14); overflow: hidden;
  transform: translateX(0); transition: transform 0.22s cubic-bezier(.2, .8, .2, 1), opacity 0.22s ease;
}
.jrn-head { display: flex; align-items: center; gap: 8px; padding: 26px 16px 8px 24px; }
.jrn-head h2 { flex: 1; margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.01em; }
.jrn-x, .jrn-back { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--jrn-ink-2); cursor: pointer; }
.jrn-back { display: none; }
.jrn-x:hover, .jrn-back:hover { background: var(--jrn-hover); }
.jrn-chips { display: flex; gap: 8px; padding: 8px 24px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--jrn-line); }
.jrn-chips::-webkit-scrollbar { display: none; }
.jrn-chip {
  flex: none; min-height: 36px; padding: 0 16px; border: 1px solid var(--jrn-line); border-radius: 99px;
  background: transparent; color: var(--jrn-ink); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.jrn-chip:hover { background: var(--jrn-hover); }
.jrn-chip.is-on { background: var(--jrn-ink); border-color: var(--jrn-ink); color: var(--jrn-bg); }
.jrn-body { flex: 1; overflow-y: auto; padding: 4px 8px 18px; overscroll-behavior: contain; }
.jrn-sec { margin-top: 6px; padding: 16px 16px 6px; border-top: 1px solid var(--jrn-line); color: var(--jrn-ink); font-size: 17px; font-weight: 900; }
.jrn-sec:first-child { border-top: 0; margin-top: 0; }
.jrn-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 14px; color: var(--jrn-ink); text-decoration: none; }
.jrn-row, .jrn-row:hover, .jrn-row:visited { color: var(--jrn-ink); text-decoration: none; }
.jrn-row:hover { background: var(--jrn-hover); }
.jrn-row.is-unread { background: var(--jrn-unread); }
.jrn-who { position: relative; flex: none; }
.jrn-ava { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #1CB0F6; color: #FFFFFF; font-weight: 900; font-size: 17px; }
.jrn-kind { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--jrn-bg); border-radius: 50%; background: #0A6FAA; color: #FFFFFF; }
.jrn-kind .material-symbols-rounded { font-size: 12px; font-variation-settings: "FILL" 1, "wght" 600; }
.jrn-kind.is-like, .jrn-kind.is-comment_like { background: #C92A2A; }
.jrn-kind.is-follow { background: #2B7F00; }
.jrn-kind.is-remix { background: #8A3FC7; }
.jrn-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.4; }
.jrn-text b { font-weight: 900; }
.jrn-text i { color: var(--jrn-ink-2); }
.jrn-time { color: var(--jrn-ink-2); font-size: 13.5px; font-weight: 700; }
.jrn-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--jrn-hover); }
.jrn-follow {
  flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 10px;
  background: #0A6FAA; color: #FFFFFF; font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.jrn-follow.is-following { background: var(--jrn-chip); color: var(--jrn-ink); }
:root[data-theme="dark"] .jrn-follow:not(.is-following) { background: #1CB0F6; color: #0B1A20; }
.jrn-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; color: var(--jrn-ink-2); text-align: center; font-size: 14px; }
.jrn-empty .material-symbols-rounded { font-size: 44px; color: var(--jrn-ink-2); }
.jrn-empty b { color: var(--jrn-ink); font-size: 17px; font-weight: 900; }
.jrn-login { margin-top: 8px; padding: 9px 18px; border-radius: 12px; background: #0A6FAA; color: #FFFFFF; font-weight: 800; text-decoration: none; }
.jrn-skel { height: 56px; margin: 10px 8px; border-radius: 14px; background: var(--jrn-hover); }
/* Phones: a full-screen page that slides in from the right, with Back. */
@media (max-width: 767px) {
  .jrn { left: 0; right: 0; width: auto; border-right: 0; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .jrn-head { padding: 12px 12px 4px; }
  .jrn-head h2 { font-size: 22px; }
  .jrn-back { display: grid; }
  .jrn-x { display: none; }
  .jrn-chips { padding: 8px 16px 12px; }
  .jrn-body { padding: 4px 4px calc(18px + env(safe-area-inset-bottom)); }
  .jrn-row { padding: 9px 12px; }
  .jrn-sec { padding: 14px 12px 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .jrn { animation: jrn-in-left 0.24s cubic-bezier(.2, .8, .2, 1); }
  .jrn-wrap.is-closing .jrn { transform: translateX(-104%); opacity: 0.6; }
  @keyframes jrn-in-left { from { transform: translateX(-104%); } to { transform: translateX(0); } }
  @media (max-width: 767px) {
    .jrn { animation-name: jrn-in-right; }
    .jrn-wrap.is-closing .jrn { transform: translateX(104%); }
    @keyframes jrn-in-right { from { transform: translateX(104%); } to { transform: translateX(0); } }
  }
}
.jrn-wrap.is-closing { pointer-events: none; }
/* Like Instagram, the rail stays icons-only while the drawer is open, and
   sits above it so the drawer slides out from behind it. */
.jrn-open .jr { z-index: 260; }
.jrn-open .jr.is-open { width: var(--jr-w); box-shadow: none; }
.jrn-open .jr.is-open .jr-label { opacity: 0; }

/* ── Work / Life (2026-10-19) ───────────────────────────────────────────────
   The switch under the brand flips modes (js/app-rail.js). Life keeps the
   white, rounded rail above; Work's rail is near-black with Geist and thin
   outline icons, like the enterprise tools it sits next to. */
.jr-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  margin: 0 0 12px;
  border-radius: 14px;
  background: var(--jr-hover);
}
.jr-mode-btn, .jr-mode-btn:visited {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 0 9px;
  border-radius: 11px;
  color: var(--jr-ink-2);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.jr-mode-btn .jr-ico { font-size: 22px; }
.jr-mode-btn.is-on { color: var(--jr-ink); }
.jr-mode-btn:hover { color: var(--jr-ink); }
.jr-mode-btn:focus-visible { outline: 2px solid #0D99FF; outline-offset: 1px; }
.jr-mode-pill {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 40px;
  border-radius: 11px;
  background: var(--jr-bg);
  box-shadow: 0 0 0 1px var(--jr-line), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(.3, 1.25, .5, 1);
}
.jr-mode[data-on="life"] .jr-mode-pill { transform: translateY(42px); }
/* Arriving after a switch, the pill slides from where it was. */
.jr-mode.is-arriving[data-on="life"] .jr-mode-pill { animation: jr-pill-to-life 0.45s cubic-bezier(.3, 1.25, .5, 1); }
.jr-mode.is-arriving[data-on="work"] .jr-mode-pill { animation: jr-pill-to-work 0.45s cubic-bezier(.3, 1.25, .5, 1); }
@keyframes jr-pill-to-life { from { transform: translateY(0); } to { transform: translateY(42px); } }
@keyframes jr-pill-to-work { from { transform: translateY(42px); } to { transform: translateY(0); } }

.jr.is-work {
  --jr-bg: #121211;
  --jr-line: #2A2926;
  --jr-ink: #F3F1EC;
  --jr-ink-2: #9C9A93;
  --jr-hover: #1E1D1B;
  --jr-active-bg: #F3F1EC;
  --jr-active-ink: #121211;
  --jr-active-line: #F3F1EC;
  --jr-font: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  border-right-color: #121211;
}
:root[data-theme="dark"] .jr.is-work, :root[data-theme="dark"] body:not(.orbit-page) .jr.is-work { --jr-bg: #0C0C0B; --jr-line: #26251F; --jr-hover: #1A1917; }
.jr.is-work .jr-item { font-weight: 500; font-size: 14px; border-radius: 6px; border-width: 1px; height: 44px; }
.jr.is-work .jr-ico { font-size: 22px; font-variation-settings: "FILL" 0, "wght" 300; }
.jr.is-work .jr-item.is-active .jr-ico { font-variation-settings: "FILL" 0, "wght" 400; }
.jr.is-work .jr-mode { border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.jr.is-work .jr-mode-btn { font-weight: 500; border-radius: 6px; }
.jr.is-work .jr-mode-pill { border-radius: 6px; background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.jr.is-work .jr-word { color: #F3F1EC; }
.jr.is-work .jr-item:focus-visible, .jr.is-work .jr-brand:focus-visible { outline-color: #8EA6FF; }

.jr-tabbar.is-work { --jr-active-ink: #121211; font-family: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif; }
:root[data-theme="dark"] .jr-tabbar.is-work { --jr-active-ink: #F3F1EC; }
.jr-more-item.is-mode { font-weight: 900; }
.jr-more-item.is-mode .material-symbols-rounded { color: #2E5BFF; }

/* Moving between pages: the rail holds still while the page cross-fades
   (cross-document view transitions; browsers without them just navigate). */
@view-transition { navigation: auto; }
.jr { view-transition-name: jr-rail; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
::view-transition-group(jr-rail) { animation-duration: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .jr-mode-pill, .jr-mode.is-arriving .jr-mode-pill { transition: none; animation: none; }
}