/* One bottom dock and upward-opening sheet at every screen size. */
:root {
  --ijs-nav: #1C2B39; --ijs-nav-ink: #F4F5F8; --ijs-nav-muted: rgba(244,245,248,.72);
  --ijs-accent: #2B3A67; --ijs-accent-deep: #1F2B4F; --ijs-accent-soft: #E6E9F6;
  --ijs-ground: #F1F2F6; --ijs-card: #fff; --ijs-ink: #1E2230; --ijs-muted: #636A7D; --ijs-line: #D8DBE4;
  --ijs-trips: #4F7C6E; --ijs-budget: #173B2D; --ijs-box: #7A4A1E; --ijs-list: #7B3B62;
  --ijs-me-space: 20px; --ijs-me-size: 0px; --ijs-me-gap: 0px;
  --ijs-dock-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --ijs-dock-height: 38px;
  --ijs-edge: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ijs-nav-space: calc(var(--ijs-dock-height) + var(--ijs-dock-bottom) + 24px);
  --ijs-font: 600 var(--n-fs, 14px)/1.5 var(--n-sans, "Geist", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
}
html.ijs-has-nav { --ijs-topbar-h: env(safe-area-inset-top, 0px); scrollbar-gutter: stable; scroll-padding-bottom: var(--ijs-nav-space); }
html.ijs-has-nav body { padding-bottom: var(--ijs-nav-space); }
/* Keep navigation in the Trips palette, including on the other apps. Scoped
   tokens also keep a saved site theme from restoring the old navy menu. */
.ijs-dock, .ijs-sheet {
  --ijs-nav: var(--ijs-trips, #4F7C6E);
  --ijs-accent: var(--ijs-trips, #4F7C6E);
  --ijs-accent-deep: color-mix(in srgb, var(--ijs-accent) 80%, black);
  --ijs-accent-soft: color-mix(in srgb, var(--ijs-accent) 11%, white);
  --ijs-ground: var(--n-cream, #fbfaf7); --ijs-card: var(--n-paper, #fffefa);
  --ijs-ink: #292722; --ijs-muted: #8c867d; --ijs-line: var(--n-line, #ebe8e1);
}
.ijs-dock, .ijs-sheet, .ijs-dock *, .ijs-sheet * { box-sizing: border-box; }
.ijs-dock [hidden], .ijs-sheet [hidden] { display: none !important; }
.ijs-dock svg, .ijs-sheet svg { width: 22px; height: 22px; flex: none; }
.ijs-dock {
  position: fixed; z-index: 2100; bottom: var(--ijs-dock-bottom); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; width: auto; height: var(--ijs-dock-height); padding: 0;
  background: transparent; color: #fff; border: 0;
  font: var(--ijs-font);
}
.ijs-dock .ijs-dock__item {
  display: grid; place-items: center; flex: none; width: 80px; height: var(--ijs-dock-height);
  padding: 0; border: 0; border-radius: 10px; background: var(--ijs-nav); color: inherit; font: inherit;
  box-shadow: 0 10px 24px rgba(27,35,27,.28);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ijs-dock__item > span:first-child { display: grid; place-items: center; height: 23px; }
/* Labels remain available to assistive technology without widening the icon. */
.ijs-dock__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ijs-dock__gap { display: none; }
.ijs-dock .ijs-dock__item[aria-current], .ijs-dock .ijs-dock__item[aria-expanded="true"] { background: var(--ijs-accent-deep); color: #fff; }
.ijs-bar__avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 700; }
.ijs-dock .ijs-bar__avatar { width: 23px; font-size: 10px; }
.ijs-sheet {
  position: fixed; z-index: 2050; bottom: calc(var(--ijs-dock-height) + var(--ijs-dock-bottom) + 10px); left: 50%;
  width: min(560px, calc(100% - var(--ijs-edge) * 2)); max-height: calc(100dvh - var(--ijs-nav-space) - max(20px, env(safe-area-inset-top, 0px)));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 20px; background: var(--ijs-card); color: var(--ijs-ink); font: var(--ijs-font);
  border: 1px solid var(--ijs-line); border-radius: 26px; box-shadow: var(--n-shadow-menu, 0 16px 40px rgba(27,35,27,.18));
  transform: translate(-50%, 30px); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .18s ease, visibility 0s .22s;
}
html.ijs-nav-open .ijs-sheet { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.ijs-sheet a, .ijs-sheet button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.ijs-sheet__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.ijs-sheet__head > div { flex: 1; min-width: 0; }
.ijs-sheet__head h2 { color: var(--ijs-ink); font: 400 23px/1.2 var(--n-display, Georgia, "Times New Roman", serif); letter-spacing: -.04em; margin: 0 0 5px; }
.ijs-sheet__head p { color: var(--ijs-muted); font-size: 12px; font-weight: 400; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
/* Inside an app: Apps | the menu's name (and what it's showing) | Account. */
.ijs-apphead { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: start; gap: 8px; margin-bottom: 18px; }
.ijs-sheet .ijs-apphead__side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding: 6px 2px; border: 1px solid transparent; border-radius: 14px; background: transparent; font-size: 11px; cursor: pointer; }
.ijs-sheet .ijs-apphead__side .ijs-ic { width: 30px; height: 30px; }
.ijs-sheet .ijs-apphead__side .ijs-bar__avatar { width: 30px; height: 30px; background: var(--ijs-nav); font-size: 11px; }
.ijs-sheet .ijs-apphead__side[aria-pressed="true"] { background: var(--ijs-accent-soft); color: var(--ijs-accent-deep); border-color: var(--ijs-accent); }
.ijs-apphead__mid { display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: 4px; text-align: center; }
.ijs-sheet .ijs-apphead__name { padding: 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ijs-ink); font: 400 23px/1.2 var(--n-display, Georgia, "Times New Roman", serif); letter-spacing: -.04em; cursor: pointer; }
.ijs-sheet .ijs-apphead__name[aria-pressed="false"] { color: var(--ijs-muted); }
.ijs-apphead__sub { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; margin: 4px 0 0; color: var(--ijs-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.ijs-apphead__sub > span, .ijs-sheet .ijs-apphead__trip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ijs-sheet .ijs-apphead__trip { color: var(--ijs-accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ijs-sheet .ijs-apphead__home { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; color: var(--ijs-accent-deep); text-decoration: none; }
.ijs-sheet .ijs-apphead__home svg { width: 15px; height: 15px; }
.ijs-sheet .ijs-apphead__home:hover { background: var(--ijs-accent-soft); }
.ijs-sheet .ijs-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--ijs-line); border-radius: 50%; background: var(--ijs-ground); cursor: pointer; }
.ijs-sheet__apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ijs-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 90px; padding: 12px 6px; border: 1px solid var(--ijs-line); border-radius: 17px; background: var(--ijs-ground); text-decoration: none; font-size: 13px; text-align: center; }
.ijs-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.ijs-sheet .ijs-tile.is-active { background: var(--ijs-accent-soft); border-color: var(--ijs-accent); color: var(--ijs-accent-deep); }
.ijs-caret { width: 16px !important; height: 16px !important; opacity: .7; }
.ijs-sheet__acct { display: grid; gap: 10px; }
.ijs-sheet__who { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--ijs-line); border-radius: 16px; background: var(--ijs-ground); text-decoration: none; }
.ijs-sheet__who > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ijs-sheet__who small { color: var(--ijs-muted); font-weight: 400; margin-top: 3px; }
.ijs-sheet__who .ijs-bar__avatar { width: 38px; height: 38px; background: var(--ijs-nav); }
.ijs-sheet__settings .ijs-ic { width: 38px; height: 38px; }
.ijs-sheet__settings.is-active { border-color: var(--ijs-accent); }
.ijs-sheet__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ijs-sheet__row button, .ijs-sheet__uv { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--ijs-line); border-radius: 14px; background: var(--ijs-ground); cursor: pointer; }
.ijs-sheet__uv { justify-content: flex-start; text-align: left; }
.ijs-sheet__version { text-align: center; font-size: 11px; font-weight: 400; color: var(--ijs-muted); }
.ijs-sheet__version:empty { display: none; }
.ijs-uv__sw { margin-left: auto; width: 30px; height: 18px; border-radius: 999px; background: var(--ijs-muted); position: relative; flex: none; }
.ijs-uv__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
html.ijs-user-view .ijs-uv__sw { background: var(--ijs-accent); }
html.ijs-user-view .ijs-uv__sw::after { transform: translateX(12px); }
.ijs-sheet__dockpos { margin-bottom: 8px; }
.ijs-sheet__dockpos small { display: block; margin-top: 2px; color: var(--ijs-muted); font-size: 11px; font-weight: 400; }
.ijs-sheet__dockpos[aria-checked="true"] .ijs-uv__sw { background: var(--ijs-accent); }
.ijs-sheet__dockpos[aria-checked="true"] .ijs-uv__sw::after { transform: translateX(12px); }
.ijs-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-bottom: 16px; border-bottom: 1px solid var(--ijs-line); }
.ijs-sections button { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid var(--ijs-line); border-radius: 12px; background: var(--ijs-ground); font-size: 12px; cursor: pointer; }
.ijs-sections button.is-active { color: #fff; background: var(--ijs-nav); border-color: var(--ijs-nav); }
.ijs-pages { display: grid; gap: 4px; padding-top: 12px; }
.ijs-pages.is-alone { padding-top: 0; }
.ijs-pages .ijs-page-note { display: block; margin-top: 2px; padding: 0; background: none; color: var(--ijs-muted); font-size: 11px; font-weight: 400; }
.ijs-pages button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.ijs-pages button > span:first-child { flex: 1; }
.ijs-page-arrow { display: flex; }
.ijs-pages button.is-active { background: var(--ijs-accent-soft); color: var(--ijs-accent-deep); }
.ijs-pages small, .ijs-sections small { min-width: 19px; padding: 2px 5px; border-radius: 20px; background: var(--ijs-accent-soft); color: var(--ijs-accent-deep); font-size: 10px; }
.ijs-dock a:focus-visible, .ijs-dock button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.ijs-sheet a:focus-visible, .ijs-sheet button:focus-visible { outline: 2px solid var(--ijs-accent); outline-offset: 2px; }
/* The menu's tools (Create, Inbox, Search IMJ, Helpful tools…) are a finger wide on a phone, as the
   rest of the menu is. */
@media (max-width: 760px), (pointer: coarse) { .ijs-sheet .wf-menu-tools button { min-height: 44px; } }
.ijs-scrim { position: fixed; inset: 0; z-index: 2040; background: rgba(10,14,20,.36); opacity: 0; pointer-events: none; transition: opacity .2s; }
html.ijs-nav-open .ijs-scrim { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .ijs-dock .ijs-dock__item:hover { background: var(--ijs-accent-deep); }
  .ijs-sheet a:hover, .ijs-sheet button:hover { border-color: var(--ijs-accent); }
  .ijs-pages button:hover { background: var(--ijs-ground); }
}
@media (max-width: 360px) {
  .ijs-sheet { padding: 14px; }
  .ijs-sections { gap: 5px; }
  .ijs-sections button { font-size: 11px; }
}
/* The menu at the top (html.ijs-dock-top; shared-menu.js): the dock sits under the
   top edge, the pop-up opens downwards from it, the page starts below it, and sticky
   bars stop under it (--ijs-topbar-h). Things pinned to the bottom (the + button,
   Back to top, banners) only need the usual margin (--ijs-nav-space). */
html.ijs-has-nav.ijs-dock-top {
  --ijs-dock-top: max(10px, env(safe-area-inset-top, 0px));
  /* Top controls were 44px; retain their width but reduce the height by 30%. */
  --ijs-dock-height: 31px;
  --ijs-topbar-h: calc(var(--ijs-dock-height) + var(--ijs-dock-top) + 8px);
  --ijs-nav-space: calc(16px + env(safe-area-inset-bottom, 0px));
  scroll-padding-top: var(--ijs-topbar-h); scroll-padding-bottom: 0;
}
html.ijs-has-nav.ijs-dock-top body { padding-top: var(--ijs-topbar-h); padding-bottom: 0; }
html.ijs-dock-top .ijs-dock { top: calc(var(--ijs-dock-top) + var(--ijs-dock-shift, 0px)); bottom: auto; }
html.ijs-dock-top .ijs-sheet {
  top: calc(var(--ijs-dock-height) + var(--ijs-dock-top) + var(--ijs-dock-shift, 0px) + 10px); bottom: auto;
  max-height: calc(100dvh - var(--ijs-dock-height) - var(--ijs-dock-top) - var(--ijs-dock-shift, 0px) - 30px);
  box-shadow: var(--n-shadow-menu, 0 16px 40px rgba(27,35,27,.18)); transform: translate(-50%, -30px);
}
html.ijs-dock-top.ijs-nav-open .ijs-sheet { transform: translate(-50%, 0); }
/* A page with its own top bar keeps it first: the bar, then room for the dock
   under it (placeDock() in shared-menu.js moves the dock as the bar scrolls away). */
html.ijs-has-nav.ijs-dock-top.ijs-topbar-first body { padding-top: 0; }
html.ijs-has-nav.ijs-dock-top.ijs-topbar-first body > .screen { top: 0; }
html.ijs-dock-top.ijs-topbar-first [data-ijs-topbar] { margin-bottom: calc(var(--ijs-dock-height) + 14px); }
/* Compact top controls fit within the page's header instead of adding a row. */
html.ijs-dock-top .ijs-dock { height: var(--ijs-dock-height); }
html.ijs-dock-top .ijs-dock .ijs-dock__item { width: 64px; height: var(--ijs-dock-height); border-radius: 8px; }
html.ijs-dock-top.ijs-topbar-first { --ijs-topbar-h: calc(var(--ijs-header-height, 60px) + env(safe-area-inset-top, 0px)); }
html.ijs-dock-top.ijs-topbar-first [data-ijs-topbar] { margin-bottom: 0; }
html.ijs-dock-top .ijs-header-dock {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2100;
  background: var(--n-cream, #fbfaf7);
}
html.ijs-dock-top .ijs-header-dock > .ijs-dock,
html.ijs-dock-top .ijs-header-dock .trip-hb > .ijs-dock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); flex: none; margin: 0;
}
html.ijs-dock-top .ijs-header-dock.n-crumbs { flex-wrap: nowrap; }
html.ijs-dock-top .ijs-header-dock.n-crumbs > .ijs-dock { margin-left: 0; }
html.ijs-dock-top.ijs-topbar-first .ijs-sheet {
  top: var(--ijs-sheet-top, 68px);
  max-height: calc(100dvh - var(--ijs-sheet-top, 68px) - 12px);
}
/* Reserve space in full-screen pickers as well as the document. */
html.ijs-has-nav body > .screen { top: var(--ijs-topbar-h); padding-bottom: var(--ijs-nav-space); scroll-padding-bottom: var(--ijs-nav-space); }
html.ijs-has-nav[data-ijs-app="list"] .toolbar, html.ijs-has-nav[data-ijs-app="box"] .scan, html.ijs-has-nav .wb .paycheckbar { top: var(--ijs-topbar-h); }
html.ijs-has-nav[data-ijs-app="box"] .toast, html.ijs-has-nav[data-ijs-app="list"] .toast { bottom: var(--ijs-nav-space); }
body > .bar, #root > .bar, #ijs-home { display: none !important; }
#root .wbnav { padding: 12px 20px 0; min-height: 44px; display: flex; align-items: center; font: var(--ijs-font); }
#root .wbnav a { color: var(--band, #173B2D); text-decoration: none; }
#root .wbnav a:hover { text-decoration: underline; }
@media (pointer: coarse) {
  input:not(#_):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  select:not(#_), textarea:not(#_) { font-size: max(16px, 1em) !important; }
}
dialog[tabindex="-1"]:focus { outline: none; }
@media print {
  .ijs-sheet, .ijs-scrim, .ijs-dock { display: none !important; }
  html.ijs-has-nav body { padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ijs-dock, .ijs-sheet, .ijs-scrim, .ijs-uv__sw::after { transition: none; animation: none; }
}

/* Says why Helpful tools didn't open, under the menu's buttons; empty takes no room. */
.ijs-sheet .ijs-tools-said { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--n-dim); }
.ijs-sheet .ijs-tools-said:empty { display: none; }
