/* Shared Mason navbar — one look across all apps. Namespaced under .mason-nav
 * so it never clashes with a host app's own CSS. Each app sets --mason-accent
 * (active/hover colour) inline on .mason-nav. Light theme to match the apps. */

.mason-nav {
  --mason-accent: #10b981;
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e6e8eb;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.mason-nav *, .mason-nav *::before, .mason-nav *::after { box-sizing: border-box; }
.mason-nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  /* Full-bleed: the old 1400px centred cap + 3vw side padding left huge
     gutters on wide monitors (2026-09-06). */
  max-width: none; margin: 0; padding: 8px 10px;
  min-height: 56px;
}
.mason-nav__left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.mason-nav__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mason-nav__version {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: .68rem; line-height: 1.25; color: #94a3b8; font-weight: 600;
  white-space: nowrap;
}
.mason-nav__version-pull { color: #b6c2d1; font-weight: 500; }
/* "dev-live" marker beside the release: this instance runs a mounted
   checkout over the image (Controller dev overlay). Amber so it cannot be
   mistaken for a normal release badge. */
.mason-nav__version-dev { color: #d97706; font-weight: 700; }

/* Launcher (leftmost): the Gem icon in Gem's purple, whatever the host
   app's accent — it reads as "back to Gem" everywhere. */
.mason-nav__launcher {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  color: #7c3aed; background: #f3effc; border: 1px solid #e3d9f8;
  text-decoration: none; transition: color .15s, background .15s, border-color .15s;
}
.mason-nav__launcher:hover { color: #6d28d9; border-color: #7c3aed; background: #fff; }

/* Brand: app icon + name */
.mason-nav__brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: #0f172a; flex-shrink: 0; padding-right: 6px;
}
.mason-nav__brand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: #fff;
  background: var(--mason-accent);
}
/* Brand name: one line, capped width with ellipsis. Two-word names shrink and
   wrap onto a second row when they'd otherwise overflow their cap. */
.mason-nav__brand-name {
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em;
  white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
}
.mason-nav__brand-name.is-multiword {
  white-space: normal; overflow: visible; text-overflow: clip;
  font-size: .82rem; line-height: 1.08; max-width: 13ch;
}

/* App-specific tabs */
/* Tabs scroll rather than clip, matching what .mason-nav__pill below already
   does. `overflow: hidden` here meant that once an app grew past the width its
   bar could hold, the last tabs were simply unreachable — clipped, with no
   scrollbar and nothing to drag. The Controller hit this at six tabs. The
   right-hand cluster is flex-shrink:0, so it never yields the space either.
   Deliberately a visible (if slim) scrollbar: an invisible one gives no hint
   that there is more to the right, which is the state this fixes. */
.mason-nav__tabs {
  display: flex; align-items: center; gap: 2px; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.mason-nav__tabs::-webkit-scrollbar { height: 5px; }
.mason-nav__tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.mason-nav__tab {
  display: inline-flex; align-items: center;
  padding: 7px 11px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  color: #475569; font-weight: 600; font-size: .88rem;
  transition: color .15s, background .15s;
}
.mason-nav__tab:hover { color: #0f172a; background: #f1f5f9; }
.mason-nav__tab.is-active { color: var(--mason-accent); background: color-mix(in srgb, var(--mason-accent) 12%, transparent); }
/* Alert state (host-set `alert` flag on a nav item, e.g. Gem's Bugs & Code
   tab for Bug Handlers while unresolved tickets exist): red, and stays red
   even when active. */
.mason-nav__tab.is-alert,
.mason-nav__tab.is-alert.is-active { color: #dc2626; background: rgba(220, 38, 38, .12); }
.mason-nav__tab.is-alert:hover { color: #b91c1c; background: rgba(220, 38, 38, .18); }
/* Icon-only tab (host sets `icon_only`, e.g. Gem's Bugs & Code bug glyph):
   the icon shows in every mode, not just compact. */
.mason-nav__tab.is-icon-only { padding: 8px 9px; }
.mason-nav__tab.is-icon-only .mason-nav__tab-icon { display: inline-flex; }

/* Round icon buttons on the right (client-message logger, notification
   bell), shared by every host that instantiates those features. */
.mason-nav__iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: none; background: transparent; color: #475569; cursor: pointer;
  padding: 0;
}
.mason-nav__iconbtn:hover { color: #0f172a; background: #f1f5f9; }
.mason-nav__iconbtn-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}
/* Tab icons only appear in project ("compact") mode; outside it the tabs are
   the familiar text-only links. */
.mason-nav__tab-icon { display: none; align-items: center; flex-shrink: 0; }
.mason-nav__tab-label { display: inline-block; white-space: nowrap; }

/* Project ("compact") mode: while a project pill is visible, icon-capable
   tabs shrink to icons to free horizontal space. Hovering the tabs for 1s
   (JS adds .mason-nav--peek) smoothly slides the names back in; leaving
   collapses them again. Tabs without an icon keep their label. */
.mason-nav--compact .mason-nav__tab.has-icon { padding: 8px 9px; }
.mason-nav--compact .mason-nav__tab.has-icon .mason-nav__tab-icon { display: inline-flex; }
.mason-nav--compact .mason-nav__tab.has-icon .mason-nav__tab-label {
  max-width: 0; opacity: 0; margin-left: 0; overflow: hidden;
  transition: max-width .25s ease, opacity .25s ease, margin-left .25s ease;
}
.mason-nav--compact.mason-nav--peek .mason-nav__tab.has-icon .mason-nav__tab-label {
  max-width: 140px; opacity: 1; margin-left: 7px;
}

/* Project pillbox. Capped to ~half the bar so a crowded set of links never
   overlaps the right-hand actions; when there are many links the pill goes
   "dense" (smaller font + tighter spacing) and can scroll as a last resort. */
.mason-nav__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: #f8fafc; border: 1px solid #e6e8eb; min-width: 0;
  max-width: 52vw; overflow-x: auto; scrollbar-width: thin;
}
.mason-nav__pill::-webkit-scrollbar { height: 5px; }
.mason-nav__pill::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.mason-nav__pill-name {
  font-weight: 700; font-size: .85rem; color: #0f172a; text-decoration: none;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px;
  flex-shrink: 0;
}
.mason-nav__pill-link {
  padding: 4px 9px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: #64748b; font-weight: 600; font-size: .82rem; transition: color .15s, background .15s;
  flex-shrink: 0;
}
.mason-nav__pill-link:hover { color: #0f172a; background: #eef2f7; }
.mason-nav__pill-link.is-active { color: #fff; background: var(--mason-accent); }
/* Dense mode: too many links to comfortably fit. */
.mason-nav__pill.is-dense { gap: 2px; padding-left: 10px; }
.mason-nav__pill.is-dense .mason-nav__pill-name { font-size: .76rem; max-width: 130px; }
.mason-nav__pill.is-dense .mason-nav__pill-link { font-size: .72rem; padding: 3px 7px; }

/* The pill name can be a <button> (SPA hosts wire it as "back to projects"). */
button.mason-nav__pill-name {
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0 4px 0 0; transition: color .15s;
}
button.mason-nav__pill-name:hover { color: var(--mason-accent); }

/* Secondary pill links (e.g. PMA's Bills Unallocated / POs sub-buttons). */
.mason-nav__pill-sublink {
  padding: 3px 7px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: #94a3b8; font-weight: 600; font-size: .72rem; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.mason-nav__pill-sublink:hover { color: #0f172a; background: #eef2f7; }
.mason-nav__pill-sublink.is-active {
  color: var(--mason-accent);
  background: color-mix(in srgb, var(--mason-accent) 14%, transparent);
}

/* While the tabs are "peeking" (expanded to names) there isn't room for both,
   so the pill collapses to nothing more than the project name. Hovering that
   name for the same delay flips the states back (JS removes --peek): pill
   re-expands, tabs collapse to icons — and so on until the cursor leaves the
   navbar, which restores the default. */
.mason-nav__pill-link, .mason-nav__pill-sublink {
  max-width: 240px; overflow: hidden;
  transition: max-width .25s ease, opacity .25s ease, padding .25s ease;
}
.mason-nav--peek .mason-nav__pill { gap: 0; }
.mason-nav--peek .mason-nav__pill-link,
.mason-nav--peek .mason-nav__pill-sublink {
  max-width: 0; opacity: 0; padding-left: 0; padding-right: 0;
  pointer-events: none;
}

/* Right-side extra actions (e.g. mentions bell, build switch) */
.mason-nav__action {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 9px; text-decoration: none;
  color: #475569; font-weight: 600; font-size: .85rem; border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.mason-nav__action:hover { color: #0f172a; background: #f1f5f9; }
.mason-nav__badge {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* AI Ask */
.mason-nav__ask {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 13px; border-radius: 9px; text-decoration: none;
  color: #fff; background: var(--mason-accent); border: none;
  font-weight: 700; font-size: .86rem; font-family: inherit;
  transition: filter .15s, opacity .15s;
}
.mason-nav__ask:hover { filter: brightness(1.06); }
.mason-nav__ask.is-disabled { opacity: .5; pointer-events: none; }

/* User: avatar button that opens a small sign-out dropdown. */
.mason-nav__user { position: relative; display: flex; align-items: center; }
.mason-nav__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; padding: 0;
  background: color-mix(in srgb, var(--mason-accent) 16%, #fff);
  color: var(--mason-accent); font-weight: 700; font-size: .82rem;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: border-color .15s, filter .15s;
}
.mason-nav__avatar:hover { filter: brightness(.97); border-color: color-mix(in srgb, var(--mason-accent) 40%, #fff); }
.mason-nav__user.is-open .mason-nav__avatar { border-color: var(--mason-accent); }
.mason-nav__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background: #fff; border: 1px solid #e6e8eb; border-radius: 11px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: 6px; z-index: 60; display: none;
}
.mason-nav__user.is-open .mason-nav__menu { display: block; }
.mason-nav__menu-email {
  font-size: .74rem; color: #94a3b8; padding: 6px 9px 8px; margin-bottom: 4px;
  border-bottom: 1px solid #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mason-nav__menu form { margin: 0; }
.mason-nav__menu-item {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 9px; border-radius: 7px; font-size: .85rem; font-weight: 600; color: #0f172a; font-family: inherit;
}
.mason-nav__menu-item:hover { background: #f1f5f9; }

/* ============================================================
   IN-PAGE PILLBOX
   The same pill look as the navbar's project pillbox, reusable for
   in-page tabs / sub-navigation (e.g. PMA's Bills Inbox|Direct|Approvals,
   Stocktake Allocations|Snap|Setup, Settings sections) so every screen's
   secondary navigation matches the navbar + pillbox approach.

   Markup:
     <div class="mason-pillbox" role="tablist">
       <span class="mason-pillbox__name">Bills</span>
       <button class="mason-pillbox__link is-active">Inbox</button>
       <button class="mason-pillbox__link">Direct</button>
     </div>

   Accent inherits --mason-accent from a parent (the navbar sets it on
   .mason-nav only, so hosts set it inline or on a wrapper; falls back
   to the shared green).
   ============================================================ */
.mason-pillbox {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: 999px;
  background: #f8fafc; border: 1px solid #e6e8eb;
  max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: thin;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.mason-pillbox *, .mason-pillbox *::before, .mason-pillbox *::after { box-sizing: border-box; }
.mason-pillbox::-webkit-scrollbar { height: 5px; }
.mason-pillbox::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* Optional leading label (mirrors the navbar pill's project name). */
.mason-pillbox__name {
  font-weight: 700; font-size: .85rem; color: #0f172a;
  padding: 0 8px 0 6px; white-space: nowrap; flex-shrink: 0;
}

/* Works as <a> or <button>. Both `.is-active` (our convention) and
   `.active` (Bootstrap tab JS) mark the selected pill. */
.mason-pillbox__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; border: none; background: none;
  color: #64748b; font-weight: 600; font-size: .82rem; white-space: nowrap;
  text-decoration: none; cursor: pointer; font-family: inherit; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.mason-pillbox__link:hover { color: #0f172a; background: #eef2f7; }
.mason-pillbox__link:focus, .mason-pillbox__link:focus-visible { outline: none; box-shadow: none; }
.mason-pillbox__link.is-active,
.mason-pillbox__link.active {
  color: #fff; background: var(--mason-accent, #10b981);
}

/* Subnav variant: a .mason-pillbox injected INTO the navbar, immediately
   after the active global tab (hosts insert it with JS), so a section's
   sub-options (e.g. Bills -> Inbox | Direct | Approvals) read as an
   extension of the tab itself rather than a second navigation row.
   Inherits --mason-accent from .mason-nav.

   Deliberately smaller than the global tabs and washed in the app's
   accent (tinted fill + accent-coloured text): eye-catching, but clearly
   a SUB-menu rather than more top-level navigation. */
.mason-nav__subnav {
  margin: 0 6px 0 4px;
  flex-shrink: 0;
  padding: 2px 4px;
  background: color-mix(in srgb, var(--mason-accent) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--mason-accent) 28%, #fff);
}
.mason-nav__subnav .mason-pillbox__link {
  padding: 3px 9px;
  font-size: .73rem;
  color: color-mix(in srgb, var(--mason-accent) 80%, #0f172a);
}
.mason-nav__subnav .mason-pillbox__link:hover {
  color: var(--mason-accent);
  background: color-mix(in srgb, var(--mason-accent) 18%, #fff);
}
.mason-nav__subnav .mason-pillbox__link.is-active,
.mason-nav__subnav .mason-pillbox__link.active {
  color: #fff;
  background: var(--mason-accent);
}

@media (max-width: 640px) {
  .mason-nav__brand-name { display: none; }
  .mason-nav__action span, .mason-nav__ask span { display: none; }
}