:root {
  --footer-height: 60px;
  --shell-primary-height: 72px;
  --shell-buckets-height: 68px;
  --text-on-accent: #000000;
}

.navigation-shell {
  position: relative;
  z-index: 30;
  display: flex;
  min-height: calc(var(--shell-primary-height) + var(--shell-buckets-height));
  flex-direction: column;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

.shell-primary-row {
  display: flex;
  width: 100%;
  height: var(--shell-primary-height);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  overflow: visible;
}

.shell-brand-context,
.shell-discovery-identity {
  display: flex;
  min-width: 0;
  align-items: center;
}

.shell-brand-context { width: 148px; flex: 0 0 148px; gap: 12px; }
.navigation-shell .brand { display: flex; min-width: 0; align-items: center; padding: 0; }
.navigation-shell .brand picture { display: block; line-height: 0; }
.navigation-shell .brand img { display: block; width: 136px; height: 43px; object-fit: contain; }

.navigation-shell .shell-discovery-identity {
  width: auto;
  min-height: 44px;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
}

.navigation-shell .global-search {
  position: relative;
  z-index: 29;
  display: grid;
  width: min(320px, 30vw);
  height: 44px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.navigation-shell .global-search:focus-within { border-color: var(--border-interactive); box-shadow: 0 0 0 2px var(--focus-ring); }
.navigation-shell .global-search-icon { display: grid; width: 20px; height: 20px; place-items: center; }
.navigation-shell .global-search .ui-icon { width: 20px; height: 20px; }
.navigation-shell .global-search input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: 0;
}

.navigation-shell kbd,
.utility-footer kbd {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: var(--surface-hover);
  color: var(--muted);
  font: 500 10px/1 "Inter", sans-serif;
  white-space: nowrap;
}

.navigation-shell .global-search-results {
  top: calc(100% + 8px);
  right: auto;
  left: 0;
  width: min(480px, calc(100vw - 24px));
  border-color: var(--border-strong);
  background: var(--surface-raised);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
}
.navigation-shell .global-search-results-heading { padding: 11px 14px; background: var(--surface-control); }
.navigation-shell .global-search-results-heading strong { font-size: 13px; }
.navigation-shell .global-search-results-group h2 { padding: 10px 14px 6px; color: var(--gold-solid); font-size: 10px; }
.navigation-shell .global-search-result { grid-template-columns: 24px minmax(0, 1fr) 18px; min-height: 58px; gap: 11px; padding: 10px 14px; }
.navigation-shell .global-search-result > .ui-icon:first-child { width: 20px; height: 20px; justify-self: center; }
.navigation-shell .global-search-result-copy { gap: 3px; }
.navigation-shell .global-search-result-copy strong { color: var(--text); font-size: 13px; line-height: 1.25; }
.navigation-shell .global-search-result-copy small { color: var(--muted); font-size: 11px; line-height: 1.35; }

.navigation-shell .icon-button,
.navigation-shell .avatar,
.navigation-shell .shell-mobile-explore {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.navigation-shell .icon-button:hover,
.navigation-shell .shell-mobile-explore:hover { border-color: var(--border); background: var(--surface-hover); }
.navigation-shell .avatar { border-color: transparent; }
.navigation-shell .avatar-image { width: 40px; height: 40px; border: 1px solid var(--gold-solid); border-radius: 50%; object-fit: cover; }
.shell-mobile-explore { display: none !important; }

.navigation-shell .product-bucket-nav {
  display: flex;
  width: 100%;
  height: var(--shell-buckets-height);
  min-width: 0;
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  padding: 6px 20px 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}

.navigation-shell .product-bucket-nav > a {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 54px;
  min-height: 54px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.navigation-shell .product-bucket-nav > a:hover { border-color: transparent; background: var(--surface-hover); }
.navigation-shell .product-bucket-nav > a[aria-current="page"] {
  border-color: var(--gold-solid);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}

.navigation-shell .product-bucket-nav .ui-icon { width: 21px; height: 21px; flex: 0 0 auto; opacity: 0.86; }
.navigation-shell .product-bucket-nav > a[aria-current="page"] .ui-icon { opacity: 1; filter: brightness(0) saturate(100%) invert(70%) sepia(63%) saturate(565%) hue-rotate(3deg) brightness(92%) contrast(89%); }
.navigation-shell .explore-trigger { margin-left: 2px; padding-inline: 12px; }

.navigation-shell .notification-drawer,
.navigation-shell .account-menu {
  top: calc(var(--shell-primary-height) - 2px);
  right: 20px;
}

.shell-menu {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.navigation-shell .account-menu {
  display: grid;
  width: min(304px, calc(100vw - 20px));
  max-height: calc(100dvh - var(--shell-primary-height) - 20px);
  gap: 4px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.navigation-shell .account-profile-card {
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 0;
  background: transparent;
}

.navigation-shell .account-profile-avatar { width: 38px; height: 38px; border: 1px solid var(--gold-solid); border-radius: 50%; object-fit: cover; }
.navigation-shell .account-profile-copy { display: grid; min-width: 0; gap: 2px; }
.navigation-shell .account-profile-copy :is(strong, span, small) { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.navigation-shell .account-profile-copy strong { color: var(--text); font-size: 1rem; font-weight: 600; }
.navigation-shell .account-profile-copy span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.navigation-shell .account-profile-copy small { color: var(--gold-solid); font-size: 0.78rem; line-height: 1.35; }
.navigation-shell .account-menu-divider { height: 1px; margin: 0; background: var(--border); }
.shell-menu-label { width: 100%; margin: 2px 8px 0; color: var(--muted); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.navigation-shell .account-menu :is(a, button),
.product-tools-menu :is(a, button) {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}

.navigation-shell .account-menu :is(a, button):hover:not([aria-disabled="true"]),
.product-tools-menu :is(a, button):hover { background: var(--surface-hover); }
.navigation-shell .account-menu a[aria-current="page"] {
  border-color: var(--gold-solid);
  background: var(--gold-action);
  color: var(--text);
  font-weight: 600;
}
.navigation-shell .product-tools-menu a[aria-current="page"] {
  border-color: var(--gold-solid);
  background: var(--gold-action);
  color: var(--text);
  font-weight: 600;
}
.navigation-shell .account-menu .ui-icon,
.product-tools-menu .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.86; }
.navigation-shell .account-menu :is(a, button)::before { display: none; content: none; }
.navigation-shell .account-menu-item > span { flex: 1 1 auto; }
.navigation-shell .account-menu-item > small { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.navigation-shell .account-menu [aria-disabled="true"] { cursor: not-allowed; opacity: 0.48; }

.appearance-control { display: grid; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-control); }
.appearance-control > span { color: var(--text); font-size: 0.82rem; font-weight: 500; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.navigation-shell .account-menu .theme-options button {
  min-height: 44px;
  width: auto;
  justify-content: center;
  gap: 0;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface-control);
  color: var(--muted);
  font-size: 0.76rem;
}
.navigation-shell .account-menu .theme-options button[aria-checked="true"] { border-color: var(--gold-solid); color: var(--text); font-weight: 600; }

.product-tools-menu {
  position: fixed;
  z-index: 50;
  right: 20px;
  bottom: calc(var(--footer-height) + env(safe-area-inset-bottom) + 8px);
  display: grid;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--footer-height) - 24px);
  gap: 6px;
  padding: 16px;
  overflow-y: auto;
}

.product-tools-menu[hidden] { display: none; }
.product-tools-heading { display: flex; min-height: 52px; align-items: center; gap: 12px; }
.product-tools-heading .ui-icon { width: 20px; height: 20px; }
.product-tools-heading > div { display: grid; gap: 2px; }
.product-tools-heading strong { color: var(--text); font-size: 1rem; }
.product-tools-heading span { color: var(--muted); font-size: 1rem; }
.product-tools-menu :is(a, button) { min-height: 44px; padding-inline: 10px; }
.product-tools-menu :is(a, button) > span { flex: 1 1 auto; }
.product-tools-menu :is(a, button) > small { margin-left: auto; color: var(--muted); }
.product-tools-context { padding: 10px 10px 4px; color: var(--muted); font-size: 1rem; }
body[data-shell-access="staff"] .owner-only { display: none !important; }

:root[data-theme="light"] .navigation-shell .account-profile-card { background: transparent; border: 0; }
:root[data-theme="light"] .navigation-shell .account-menu :is(a, button) { background: transparent; border-color: transparent; color: var(--text); }
:root[data-theme="light"] .navigation-shell .account-menu :is(a, button):hover:not([aria-disabled="true"]) { background: var(--surface-hover); }
:root[data-theme="light"] .navigation-shell .account-menu a[aria-current="page"] { border-color: var(--gold-solid); background: var(--gold-action); color: var(--text); }
:root[data-theme="light"] .navigation-shell .product-tools-menu a[aria-current="page"] { border-color: var(--gold-solid); background: var(--gold-action); color: var(--text); }
:root[data-theme="light"] .navigation-shell .account-menu .theme-options button { background: var(--surface-control); border-color: transparent; }
:root[data-theme="light"] .navigation-shell .account-menu .theme-options button[aria-checked="true"] { border-color: var(--gold-solid); }

body > .utility-footer,
body.spot-page > .utility-footer {
  position: fixed;
  z-index: 35;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: calc(var(--footer-height) + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.16);
}

.footer-quick-tasks { display: flex; min-width: 0; align-items: center; gap: 6px; }
body > .utility-footer .footer-task,
body.spot-page > .utility-footer .footer-task,
body > .utility-footer .product-tools-trigger,
body.spot-page > .utility-footer .product-tools-trigger {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

body > .utility-footer :is(.footer-task, .product-tools-trigger):hover,
body.spot-page > .utility-footer :is(.footer-task, .product-tools-trigger):hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.utility-footer .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.78; }
body > .utility-footer .product-tools-trigger,
body.spot-page > .utility-footer .product-tools-trigger { width: 132px; flex: 0 0 132px; border-color: var(--border); background: var(--surface-control); font-size: 12px; font-weight: 600; }
.utility-footer .product-tools-trigger .ui-icon { width: 20px; height: 20px; }
.utility-footer :is(.footer-task, .product-tools-trigger):hover { border-color: var(--border-interactive); background: var(--surface-hover); }
.utility-footer .footer-task.is-primary:hover { background: var(--gold-solid); }

:root[data-theme="light"] .navigation-shell,
:root[data-theme="light"] body > .utility-footer,
:root[data-theme="light"] body.spot-page > .utility-footer { background: var(--surface-raised); border-color: var(--border); }
:root[data-theme="light"] .navigation-shell .product-bucket-nav { background: var(--surface); }
:root[data-theme="light"] .navigation-shell :is(.global-search, .icon-button, .avatar, .shell-mobile-explore) { background: var(--surface); color: var(--text); }
:root[data-theme="light"] .navigation-shell .product-bucket-nav > a,
:root[data-theme="light"] .navigation-shell .product-bucket-nav > a[aria-current="page"],
:root[data-theme="light"] .shell-menu :is(a, button) { color: var(--text); }
:root[data-theme="light"] .shell-menu { background: var(--surface); }

@media (max-width: 1100px) {
  .shell-brand-context { width: 250px; }
  .navigation-shell .brand img { width: 112px; height: 36px; }
  .navigation-shell .global-search { width: min(320px, 36vw); }
  .navigation-shell .product-bucket-nav > a { gap: 6px; padding-inline: 6px; font-size: 12px; }
  .navigation-shell .product-bucket-nav > a > span { overflow: visible; text-overflow: clip; }
  .navigation-shell .explore-trigger { width: auto; padding-inline: 6px; }
}

@media (max-width: 820px) {
  :root { --shell-buckets-height: 104px; }
  .shell-brand-context { width: 124px; }
  .navigation-shell .global-search { width: min(280px, 38vw); }
  .navigation-shell .product-bucket-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 44px);
    align-items: center;
    gap: 4px 8px;
    padding: 6px 12px;
    overflow: hidden;
  }
  .navigation-shell .product-bucket-nav > a {
    width: 100%;
    height: 44px;
    min-height: 44px;
    min-width: 0;
    flex: none;
    padding-inline: 6px;
    font-size: 12px;
  }
  .navigation-shell .product-bucket-nav > a > span {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
  .navigation-shell .explore-trigger { margin-left: 0; }
}

@media (max-width: 700px) {
  :root {
    --shell-primary-height: 64px;
    --shell-buckets-height: 104px;
  }

  .navigation-shell { min-height: 168px; }
  .shell-primary-row { gap: 8px; padding: 0 12px; }
  .shell-brand-context { width: 96px; flex: 0 0 96px; }
  .navigation-shell .brand,
  .navigation-shell .brand picture,
  .navigation-shell .brand img { width: 96px; height: 31px; }
  .navigation-shell .shell-discovery-identity { gap: 4px; }
  .shell-mobile-explore { display: none !important; }
  .navigation-shell .global-search { width: 44px; grid-template-columns: 20px 0 0; justify-content: center; gap: 0; padding: 0 11px; }
  .navigation-shell .global-search input { width: 0; opacity: 0; }
  .navigation-shell .global-search kbd { display: none; }
  .navigation-shell .global-search:focus-within {
    position: absolute;
    top: 10px;
    right: 104px;
    left: 116px;
    width: auto;
    grid-template-columns: 20px minmax(0, 1fr);
    justify-content: initial;
    gap: 8px;
    padding-inline: 12px;
  }
  .navigation-shell .global-search:focus-within input { width: 100%; opacity: 1; }
  .navigation-shell .product-bucket-nav { flex-wrap: wrap; padding-inline: 8px; overflow: hidden; }
  .navigation-shell .notification-drawer,
  .navigation-shell .account-menu { top: calc(var(--shell-primary-height) + 4px); right: 12px; }
  .navigation-shell .account-menu {
    position: fixed;
    top: var(--shell-primary-height);
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - var(--shell-primary-height) - var(--footer-height) - 10px - env(safe-area-inset-bottom));
    padding: 8px;
    border-radius: 0 0 12px 12px;
  }
  .navigation-shell .account-menu-item > small { display: none; }
  body > .utility-footer,
  body.spot-page > .utility-footer { padding-inline: 12px; }
  .footer-quick-tasks { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .footer-quick-tasks::-webkit-scrollbar { display: none; }
  body > .utility-footer .footer-task,
  body.spot-page > .utility-footer .footer-task { width: 44px; flex: 0 0 44px; padding: 0; }
  .utility-footer .footer-task > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body > .utility-footer .product-tools-trigger,
  body.spot-page > .utility-footer .product-tools-trigger { width: 44px; flex-basis: 44px; padding: 0; }
  .utility-footer .product-tools-trigger > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .product-tools-menu { right: 12px; }
}

@media (max-width: 390px) {
  .shell-primary-row { padding-inline: 8px; }
  .navigation-shell .shell-discovery-identity { gap: 2px; }
  .navigation-shell .product-bucket-nav > a { gap: 2px; padding-inline: 2px; font-size: 10px; }
  .navigation-shell .product-bucket-nav .ui-icon { width: 16px; height: 16px; }
  .navigation-shell .global-search:focus-within { right: 98px; left: 106px; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-shell *,
  .utility-footer * { scroll-behavior: auto !important; transition: none !important; }
}

/* PR #136 visual remediation: keep utility menus legible without letting
   account and product controls compete with page content. Touch targets stay
   44px; only the label scale returns to the approved shell rhythm. */
.navigation-shell .account-profile-copy strong { font-size: 0.875rem; }
.navigation-shell .account-profile-copy span,
.navigation-shell .account-profile-copy small,
.navigation-shell .account-menu-item > small { font-size: 0.75rem; }
.navigation-shell .shell-menu-label { font-size: 0.6875rem; letter-spacing: 0.06em; }
.navigation-shell .account-menu :is(a, button),
.product-tools-menu :is(a, button) { font-size: 0.875rem; }
.appearance-control > span,
.navigation-shell .account-menu .theme-options button { font-size: 0.8125rem; }
.product-tools-heading strong { font-size: 0.875rem; }
.product-tools-heading span,
.product-tools-context { font-size: 0.75rem; }