/**
 * Marine Hub Mini App — Stage 1 App Shell (#377)
 * Header, diagnostic, bottom nav, page gutters, sticky integration.
 * Loads after design-system.css. Does not redesign screen content (Stages 2–3).
 * #488 — owns global ambient decorative layer + shell depth polish.
 */

/* —— Page shell —— */
body.mj-app {
  position: relative;
  isolation: isolate;
  font-family: var(--mh-font);
  background:
    var(--mh-canvas-glow),
    var(--mh-canvas-veil),
    var(--mh-surface-page);
  background-attachment: fixed;
  color: var(--mh-text);
  -webkit-font-smoothing: antialiased;
}


/* —— #491 stable-height app frame (Telegram/iOS) ——
 * One viewport owner (--mh-viewport-height), body flex frame, .app-main scrolls.
 * Bottom nav is an in-flow flex child — not position:fixed (iOS WebView failure).
 */
html {
  height: var(--mh-viewport-height, 100dvh);
  overflow: hidden;
}

body.mj-app {
  height: var(--mh-viewport-height, 100dvh);
  max-height: var(--mh-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.app-shell.mh-app-shell,
.app-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-padding-bottom: 12px;
}

/* —— Ambient decorative layer (transform/opacity only; #488 + #484 light/mesh refine) —— */
.mh-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Telegram iOS WKWebView: contain:strict dropped animated children.
     Keep overflow clip only so mesh/particles/sparks actually paint. */
  contain: none;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.mh-ambient__layer {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.mh-ambient__layer--veil {
  inset: -10% -8%;
  background:
    radial-gradient(
      75% 55% at 16% 6%,
      var(--mh-ambient-silver) 0%,
      transparent 64%
    ),
    radial-gradient(
      60% 48% at 90% 16%,
      var(--mh-ambient-gold) 0%,
      transparent 60%
    );
  opacity: 0.62;
  animation: mh-ambient-drift var(--mh-ambient-drift-ms) ease-in-out infinite alternate;
}

.mh-ambient__layer--orb {
  border-radius: 50%;
}

.mh-ambient__layer--orb-a {
  top: -18%;
  right: -22%;
  width: 88vw;
  height: 88vw;
  max-width: 520px;
  max-height: 520px;
  background: radial-gradient(
    circle at 40% 40%,
    color-mix(in srgb, #c8cbd0 12%, transparent) 0%,
    color-mix(in srgb, #202226 18%, transparent) 46%,
    transparent 72%
  );
  opacity: 0.42;
  animation: mh-ambient-drift var(--mh-ambient-drift-ms) ease-in-out infinite alternate;
}

.mh-ambient__layer--orb-b {
  bottom: -4%;
  left: -32%;
  width: 96vw;
  height: 96vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(
    circle at 55% 45%,
    color-mix(in srgb, #c6a66a 6%, transparent) 0%,
    color-mix(in srgb, #121316 24%, transparent) 50%,
    transparent 74%
  );
  opacity: 0.36;
  animation: mh-ambient-drift-rev calc(var(--mh-ambient-drift-ms) + 4s) ease-in-out infinite alternate;
}

/* Broad elegant mesh field — texture, not wireframe HUD */
.mh-ambient__layer--mesh {
  top: -8%;
  left: -12%;
  width: 124vw;
  height: 88vh;
  max-width: none;
  max-height: none;
  opacity: 0.1;
  background-image:
    linear-gradient(color-mix(in srgb, #d4d7dc 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #d4d7dc 32%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  /* Soft fade without -webkit-mask-image: WKWebView often failed the mask
     and painted an invisible grid. */
  background-color: transparent;
  animation: mh-ambient-drift-rev calc(var(--mh-ambient-drift-ms) + 8s) ease-in-out infinite alternate;
}

/*
 * Soft moving light — diffused “flashlight in darkness” sweep (~30s seamless loop).
 * No hard spotlight circle; graphite/silver/champagne only.
 */
.mh-ambient__layer--beam {
  top: -20%;
  left: -35%;
  width: 95vw;
  height: 95vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, #f4f4f2 16%, transparent) 0%,
    color-mix(in srgb, #c8cbd0 10%, transparent) 22%,
    color-mix(in srgb, #c6a66a 5%, transparent) 42%,
    transparent 72%
  );
  opacity: 0.42;
  /* No mix-blend-mode: Telegram WKWebView often composites soft-light/multiply
     to an invisible layer. Unblended radial is the Saved/News glow. */
  mix-blend-mode: normal;
  animation: mh-ambient-beam var(--mh-ambient-beam-ms, 30s) linear infinite;
}

@keyframes mh-ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.4%, 1.6%, 0) scale(1.03); }
}

@keyframes mh-ambient-drift-rev {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to { transform: translate3d(-2.2%, -1.4%, 0) scale(1); }
}

@keyframes mh-ambient-beam {
  0% {
    transform: translate3d(-6%, 18%, 0) scale(1.02);
    opacity: 0.22;
  }
  20% {
    transform: translate3d(14%, 2%, 0) scale(1.06);
    opacity: 0.36;
  }
  45% {
    transform: translate3d(48%, -8%, 0) scale(1.04);
    opacity: 0.3;
  }
  70% {
    transform: translate3d(28%, 22%, 0) scale(1.07);
    opacity: 0.34;
  }
  100% {
    transform: translate3d(-6%, 18%, 0) scale(1.02);
    opacity: 0.22;
  }
}

html[data-theme="light"] .mh-ambient__layer--orb-a {
  background: radial-gradient(
    circle at 40% 40%,
    color-mix(in srgb, #c6a66a 16%, transparent) 0%,
    color-mix(in srgb, #f7f4ee 42%, transparent) 48%,
    transparent 74%
  );
  opacity: 0.42;
}

html[data-theme="light"] .mh-ambient__layer--orb-b {
  background: radial-gradient(
    circle at 55% 45%,
    color-mix(in srgb, #c6a66a 10%, transparent) 0%,
    color-mix(in srgb, #e8e4db 40%, transparent) 50%,
    transparent 74%
  );
  opacity: 0.34;
}

html[data-theme="light"] .mh-ambient__layer--mesh {
  opacity: 0.08;
  background-image:
    linear-gradient(color-mix(in srgb, #5c6168 28%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #5c6168 22%, transparent) 1px, transparent 1px);
}

html[data-theme="light"] .mh-ambient__layer--beam {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, #f7f4ee 55%, transparent) 0%,
    color-mix(in srgb, #e8e4db 18%, transparent) 28%,
    color-mix(in srgb, #c6a66a 12%, transparent) 48%,
    transparent 74%
  );
  opacity: 0.36;
  mix-blend-mode: normal;
}


/* —— #491 sparse ambient particles (DOM+CSS only; no canvas engine) —— */
.mh-ambient__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mh-ambient__particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, #c8cbd0 55%, transparent);
  opacity: 0.28;
  will-change: transform, opacity;
  animation-name: mh-ambient-particle-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.mh-ambient__particle--gold {
  background: color-mix(in srgb, #c6a66a 45%, transparent);
  opacity: 0.22;
}

.mh-ambient__particle:nth-child(1)  { top: 12%; left: 18%; animation-duration: 22s; animation-delay: -3s;  opacity: 0.26; width: 2px; height: 2px; }
.mh-ambient__particle:nth-child(2)  { top: 22%; left: 72%; animation-duration: 31s; animation-delay: -11s; opacity: 0.2;  width: 1.5px; height: 1.5px; }
.mh-ambient__particle:nth-child(3)  { top: 38%; left: 8%;  animation-duration: 27s; animation-delay: -7s;  opacity: 0.3;  width: 2.5px; height: 2.5px; }
.mh-ambient__particle:nth-child(4)  { top: 48%; left: 55%; animation-duration: 36s; animation-delay: -19s; opacity: 0.18; width: 1.5px; height: 1.5px; }
.mh-ambient__particle:nth-child(5)  { top: 58%; left: 30%; animation-duration: 24s; animation-delay: -2s;  opacity: 0.24; width: 2px; height: 2px; }
.mh-ambient__particle:nth-child(6)  { top: 68%; left: 82%; animation-duration: 33s; animation-delay: -14s; opacity: 0.22; width: 2px; height: 2px; }
.mh-ambient__particle:nth-child(7)  { top: 16%; left: 42%; animation-duration: 29s; animation-delay: -21s; opacity: 0.2;  width: 1.5px; height: 1.5px; }
.mh-ambient__particle:nth-child(8)  { top: 74%; left: 14%; animation-duration: 38s; animation-delay: -5s;  opacity: 0.26; width: 2px; height: 2px; }
.mh-ambient__particle:nth-child(9)  { top: 32%; left: 88%; animation-duration: 26s; animation-delay: -16s; opacity: 0.19; width: 1.5px; height: 1.5px; }
.mh-ambient__particle:nth-child(10) { top: 84%; left: 48%; animation-duration: 34s; animation-delay: -9s;  opacity: 0.23; width: 2px; height: 2px; }
.mh-ambient__particle:nth-child(11) { top: 44%; left: 64%; animation-duration: 40s; animation-delay: -25s; opacity: 0.2;  width: 1.5px; height: 1.5px; }
.mh-ambient__particle:nth-child(12) { top: 8%;  left: 60%; animation-duration: 19s; animation-delay: -1s;  opacity: 0.27; width: 2.5px; height: 2.5px; }

/* #705 — extra silver/white motes, News list + detail only (upper 55–60%) */
.mh-ambient__particle--news {
  display: none;
}

body.mj-app[data-active-view="news"] .mh-ambient__particle--news,
body.mj-app[data-active-view="news-detail"] .mh-ambient__particle--news,
body.mj-app[data-active-view="vessels"] .mh-ambient__particle--news,
body.mj-app[data-active-view="vessel-detail"] .mh-ambient__particle--news {
  display: block;
}

.mh-ambient__particle--news:nth-child(13) { top: 5%;  left: 26%; animation-duration: 21s; animation-delay: -4s;  opacity: 0.24; width: 2px;   height: 2px; }
.mh-ambient__particle--news:nth-child(14) { top: 11%; left: 79%; animation-duration: 28s; animation-delay: -12s; opacity: 0.2;  width: 1.5px; height: 1.5px; }
.mh-ambient__particle--news:nth-child(15) { top: 18%; left: 9%;  animation-duration: 24s; animation-delay: -8s;  opacity: 0.28; width: 2.5px; height: 2.5px; }
.mh-ambient__particle--news:nth-child(16) { top: 27%; left: 51%; animation-duration: 33s; animation-delay: -18s; opacity: 0.18; width: 1.5px; height: 1.5px; }
.mh-ambient__particle--news:nth-child(17) { top: 34%; left: 91%; animation-duration: 26s; animation-delay: -6s;  opacity: 0.22; width: 2px;   height: 2px; }
.mh-ambient__particle--news:nth-child(18) { top: 41%; left: 21%; animation-duration: 30s; animation-delay: -15s; opacity: 0.26; width: 2px;   height: 2px; }
.mh-ambient__particle--news:nth-child(19) { top: 49%; left: 67%; animation-duration: 23s; animation-delay: -10s; opacity: 0.19; width: 1.5px; height: 1.5px; }
.mh-ambient__particle--news:nth-child(20) { top: 55%; left: 38%; animation-duration: 35s; animation-delay: -20s; opacity: 0.23; width: 2.5px; height: 2.5px; }

@keyframes mh-ambient-particle-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(1.6vw, -2.2vh, 0); }
}

html[data-theme="light"] .mh-ambient__particle {
  background: color-mix(in srgb, #6b717a 40%, transparent);
  opacity: 0.22;
}

html[data-theme="light"] .mh-ambient__particle--gold {
  background: color-mix(in srgb, #c6a66a 38%, transparent);
  opacity: 0.18;
}

/* #522 — sparse fireplace-ember sparks behind UI only */
.mh-ambient__embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mh-ambient__ember {
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, #e8a15a 78%, #c45a2a);
  opacity: 0.42;
  box-shadow: 0 0 8px color-mix(in srgb, #e08a3a 70%, transparent);
  will-change: transform, opacity;
  animation-name: mh-ambient-ember-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.mh-ambient__ember:nth-child(1) { left: 12%; bottom: 4%; animation-duration: 18s; animation-delay: -4s; opacity: 0.46; width: 3.5px; height: 3.5px; }
.mh-ambient__ember:nth-child(2) { left: 28%; bottom: 0; animation-duration: 22s; animation-delay: -11s; opacity: 0.36; width: 2.5px; height: 2.5px; }
.mh-ambient__ember:nth-child(3) { left: 46%; bottom: 8%; animation-duration: 16s; animation-delay: -2s; opacity: 0.5; width: 4px; height: 4px; }
.mh-ambient__ember:nth-child(4) { left: 61%; bottom: 2%; animation-duration: 24s; animation-delay: -9s; opacity: 0.34; width: 2.5px; height: 2.5px; }
.mh-ambient__ember:nth-child(5) { left: 73%; bottom: 6%; animation-duration: 20s; animation-delay: -15s; opacity: 0.44; width: 3.5px; height: 3.5px; }
.mh-ambient__ember:nth-child(6) { left: 84%; bottom: 1%; animation-duration: 26s; animation-delay: -6s; opacity: 0.32; width: 2.5px; height: 2.5px; }
.mh-ambient__ember:nth-child(7) { left: 37%; bottom: 10%; animation-duration: 19s; animation-delay: -13s; opacity: 0.4; width: 3.5px; height: 3.5px; }
.mh-ambient__ember:nth-child(8) { left: 55%; bottom: 3%; animation-duration: 21s; animation-delay: -7s; opacity: 0.38; width: 3px; height: 3px; }

/* #705 — extra warm embers, News list + detail only (lower 35–40%) */
.mh-ambient__ember--news {
  display: none;
}

body.mj-app[data-active-view="news"] .mh-ambient__ember--news,
body.mj-app[data-active-view="news-detail"] .mh-ambient__ember--news,
body.mj-app[data-active-view="vessels"] .mh-ambient__ember--news,
body.mj-app[data-active-view="vessel-detail"] .mh-ambient__ember--news {
  display: block;
}

.mh-ambient__ember--news:nth-child(9)  { left: 8%;  bottom: 16%; animation-duration: 17s; animation-delay: -3s;  opacity: 0.4;  width: 3px;   height: 3px; }
.mh-ambient__ember--news:nth-child(10) { left: 23%; bottom: 28%; animation-duration: 23s; animation-delay: -10s; opacity: 0.34; width: 2.5px; height: 2.5px; }
.mh-ambient__ember--news:nth-child(11) { left: 42%; bottom: 22%; animation-duration: 19s; animation-delay: -5s;  opacity: 0.44; width: 3.5px; height: 3.5px; }
.mh-ambient__ember--news:nth-child(12) { left: 69%; bottom: 34%; animation-duration: 25s; animation-delay: -14s; opacity: 0.32; width: 2.5px; height: 2.5px; }
.mh-ambient__ember--news:nth-child(13) { left: 91%; bottom: 14%; animation-duration: 20s; animation-delay: -8s;  opacity: 0.38; width: 3px;   height: 3px; }

@keyframes mh-ambient-ember-rise {
  0% {
    transform: translate3d(0, 8vh, 0) scale(0.7);
    opacity: 0;
  }
  12% {
    opacity: 0.5;
  }
  100% {
    transform: translate3d(1.2vw, -42vh, 0) scale(0.35);
    opacity: 0;
  }
}

html[data-theme="light"] .mh-ambient__ember {
  background: color-mix(in srgb, #c67a3a 55%, #d8be88);
  opacity: 0.16;
  box-shadow: 0 0 3px color-mix(in srgb, #c67a3a 28%, transparent);
}

/* Restore Jobs ambient visibility without overriding per-layer opacities
   (#501 mesh must stay 0.04–0.12; #522/#525 only uncovers the shared field). */
body.mj-app[data-active-view="jobs"] .mh-ambient,
body.mj-app[data-active-view="jobs"] .mh-ambient__embers {
  visibility: visible;
}

body.mj-app[data-active-view="jobs"] .mh-ambient__ember {
  filter: saturate(1.15);
}

#view-jobs.mj-screen,
#view-jobs,
body.mj-app[data-active-view="jobs"] .app-main {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .mh-ambient__layer,
  .mh-ambient__layer--veil,
  .mh-ambient__layer--orb-a,
  .mh-ambient__layer--orb-b,
  .mh-ambient__layer--mesh,
  .mh-ambient__layer--beam,
  .mh-ambient__particle,
  .mh-ambient__ember {
    animation: none !important;
    transform: none !important;
  }

  .mh-ambient__layer--beam {
    top: 8%;
    left: 18%;
    opacity: 0.28;
  }

  .mh-ambient__particles {
    opacity: 0.55;
  }

  /* #705: hide Jobs/non-News embers under reduced-motion. Keep News
     baseline embers static (not hidden). Extra News motes stay off. */
  body.mj-app[data-active-view="jobs"] .mh-ambient__embers,
  body.mj-app[data-active-view="jobs"] .mh-ambient__ember,
  body.mj-app:not([data-active-view="news"]):not([data-active-view="news-detail"]) .mh-ambient__embers,
  body.mj-app:not([data-active-view="news"]):not([data-active-view="news-detail"]) .mh-ambient__ember {
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
  }

  .mh-ambient__particle--news,
  .mh-ambient__ember--news {
    display: none !important;
    visibility: hidden !important;
    animation: none !important;
  }
}

.app-shell {
  position: relative;
  z-index: 1;
  background: transparent;
  max-width: 720px;
  margin-inline: auto;
}

.app-main {
  padding: var(--mh-space-2) var(--mh-page-gutter) var(--main-scroll-pad);
}

@media (min-width: 720px) {
  .app-shell {
    box-shadow: none;
  }

  .app-main {
    padding-top: var(--mh-space-3);
  }
}

/* —— Global header —— */
.mh-header {
  padding: calc(4px + var(--safe-top)) var(--mh-page-gutter) 6px;
  background: color-mix(in srgb, var(--mh-surface-nav) 72%, transparent);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mh-header-row {
  gap: var(--mh-space-3);
}

.mh-brand {
  gap: 10px;
}

.mh-logo {
  width: 32px;
  height: 32px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mh-accent) 18%, transparent);
}

.mh-title {
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--mh-text);
}

html[data-theme="dark"] .mh-title {
  color: var(--mh-text);
}

.mh-subtitle {
  margin-top: 0;
  font-size: 0.64rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--mh-text-muted);
}

/* Nested screens already have a back/title bar — collapse brand chrome. */
body.mj-nested-view .mh-header .mh-brand {
  display: none;
}

body.mj-nested-view .mh-header {
  display: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.mh-product-status {
  max-width: 7.5rem;
  padding: 4px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--mh-accent);
  background: color-mix(in srgb, var(--mh-accent) 10%, var(--mh-surface));
  border: 1px solid color-mix(in srgb, var(--mh-accent) 22%, transparent);
}

/* Screen titles use shared type scale (no competing oversized marketing headers) */
.mj-screen-title,
.mh-page-header__title {
  font-size: var(--mh-type-screen);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--mh-text);
}

.mj-screen-sub,
.mh-page-header__subtitle {
  font-size: var(--mh-type-meta);
  color: var(--mh-text-muted);
}

.mj-screen-head {
  margin-bottom: var(--mh-space-4);
}

/* —— Auth diagnostic (TEST-only, compact utility) —— */
.miniapp-auth-diag {
  margin: 0 var(--mh-page-gutter) var(--mh-space-2);
  padding: 4px 8px;
  max-height: 2.4em;
  overflow: hidden;
  font-size: 0.58rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--mh-text-muted);
  background: var(--mh-surface-diag);
  border: 1px solid var(--mh-border-subtle);
  border-radius: var(--mh-radius-sm);
  opacity: 0.72;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.miniapp-auth-diag[data-diag-state="ok"] {
  opacity: 0.55;
  color: var(--mh-text-muted);
  border-color: var(--mh-border-subtle);
}

.miniapp-auth-diag[data-diag-state="warn"] {
  opacity: 0.92;
  color: var(--mh-warning);
  background: color-mix(in srgb, var(--mh-warning) 10%, var(--mh-surface));
  border-color: color-mix(in srgb, var(--mh-warning) 28%, transparent);
  max-height: 3.2em;
  white-space: normal;
}

.miniapp-auth-diag[data-diag-state="error"] {
  opacity: 1;
  color: var(--mh-danger);
  background: color-mix(in srgb, var(--mh-danger) 10%, var(--mh-surface));
  border-color: color-mix(in srgb, var(--mh-danger) 30%, transparent);
  max-height: 4.2em;
  white-space: normal;
  overflow: auto;
}

html[data-theme="dark"] .miniapp-auth-diag {
  opacity: 0.7;
}

html[data-theme="dark"] .miniapp-auth-diag[data-diag-state="ok"] {
  opacity: 0.5;
}

/* —— Bottom navigation —— #491 in-flow flex child (stable viewport frame) ——
 * Outside .app-main scrollport. Prefer flex over iOS position:fixed.
 */
body.mj-app .bottom-nav,
.bottom-nav {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  z-index: 200;
  background: color-mix(in srgb, var(--mh-surface-nav) 96%, #070708);
  border-top: 1px solid color-mix(in srgb, #c8cbd0 10%, transparent);
  box-shadow: var(--mh-depth-3-shadow);
  min-height: calc(
    var(--mh-bottom-nav-h, var(--nav-height)) +
      max(
        var(--mh-safe-bottom, var(--safe-bottom)),
        var(--tg-safe-area-inset-bottom, 0px),
        var(--tg-content-safe-area-inset-bottom, 0px)
      )
  );
  max-height: calc(
    var(--mh-bottom-nav-h, var(--nav-height)) +
      max(
        var(--mh-safe-bottom, var(--safe-bottom)),
        var(--tg-safe-area-inset-bottom, 0px),
        var(--tg-content-safe-area-inset-bottom, 0px)
      ) + 4px
  );
  padding: 2px 4px
    max(
      var(--mh-safe-bottom, var(--safe-bottom)),
      var(--tg-safe-area-inset-bottom, 0px),
      var(--tg-content-safe-area-inset-bottom, 0px)
    );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
}

.bottom-nav::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #c6a66a 28%, transparent) 50%,
    transparent 100%
  );
  opacity: 0.55;
}

.bottom-nav-item {
  gap: 2px;
  min-height: calc(var(--mh-bottom-nav-h, var(--nav-height)) - 10px);
  padding: 4px 2px 4px;
  color: var(--mh-nav-inactive);
  border-radius: 12px;
  opacity: 0.86;
  transition:
    color var(--mh-press-ms) ease,
    opacity var(--mh-press-ms) ease,
    transform var(--mh-press-ms) ease,
    background-color var(--mh-press-ms) ease;
}

.bottom-nav-item:active {
  transform: scale(0.97);
}

.bottom-nav-item.is-active {
  color: var(--mh-nav-active, var(--mh-accent));
  font-weight: 750;
  background: color-mix(in srgb, var(--mh-accent) 12%, transparent);
  opacity: 1;
}

.bottom-nav-item.is-active::after {
  width: 14px;
  height: 2px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--mh-accent);
}

body.mj-app .bottom-nav-item.is-active::after {
  width: 14px;
  height: 2px;
  background: var(--mh-accent);
}

.bottom-nav-svg {
  width: 1.48rem;
  height: 1.48rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width var(--mh-press-ms) ease, transform var(--mh-press-ms) ease;
}

.bottom-nav-item.is-active .bottom-nav-svg {
  stroke-width: 2.05;
  transform: translateY(-0.5px);
}

.bottom-nav-label {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  opacity: 1;
}

.bottom-nav-item.is-active .bottom-nav-label {
  color: var(--mh-accent);
  font-weight: 700;
  opacity: 1;
}

@media (max-width: 320px) {
  body.mj-app .bottom-nav,
  .bottom-nav {
    padding-left: 2px;
    padding-right: 2px;
  }

  .bottom-nav-item {
    min-width: 0;
    padding-left: 1px;
    padding-right: 1px;
  }

  .bottom-nav-label {
    font-size: 0.54rem;
    letter-spacing: 0;
    overflow: visible;
    text-overflow: clip;
  }
}

/* —— Shared in-flow action surfaces (#509: never a viewport dock) —— */
.job-detail-actions,
.job-detail-dock.mj-detail-dock,
.ref-rc-detail__sticky.sticky-action-bar,
.mh-sticky-bar {
  position: static !important;
  bottom: auto !important;
  background: transparent !important;
  border-top: 1px solid var(--mh-border-subtle) !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Soften Jobs proof surfaces only (#473) — do not restyle Alerts/Tracker here */
.jobs-filters,
.mj-search-block.jobs-filters {
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.job-card-v2.job-offer-card,
body.mj-app .job-card-v2.job-offer-card {
  border-color: var(--mh-card-edge, var(--mh-border-subtle));
  box-shadow: var(--mh-depth-1-shadow), var(--mh-depth-1-highlight);
  border-radius: 18px;
}

/* Map a few legacy CTAs onto button hierarchy without rewriting screens */
.btn-demo-cta,
.btn-account-upgrade,
.btn-demo-sheet-primary {
  min-height: var(--mh-control-h);
  border-radius: var(--mh-radius-md);
  font-size: var(--mh-type-button);
  font-weight: 700;
}

.btn-load-more,
.mj-career-card__action {
  min-height: var(--mh-control-h-sm);
  border-radius: var(--mh-radius-md);
}

/* Inputs/selects in existing forms — shared affordance */
.mj-screen input[type="text"],
.mj-screen input[type="search"],
.mj-screen input[type="email"],
.mj-screen select,
.mj-screen textarea,
.jobs-filters input,
.jobs-filters select,
.mj-alert-section input,
.mj-alert-section select,
.mj-alert-section textarea {
  min-height: var(--mh-control-h-sm);
  border-radius: var(--mh-radius-md);
  border: 1px solid var(--mh-border-standard);
  background: var(--mh-surface-interactive);
  color: var(--mh-input-text);
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.mj-screen input:focus,
.mj-screen select:focus,
.mj-screen textarea:focus,
.jobs-filters input:focus,
.jobs-filters select:focus {
  outline: none;
  border-color: var(--mh-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-focus) 20%, transparent);
}

/* Reduce card-in-card pressure on filter/alert slabs */
.mj-alert-draft-grid {
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .mh-header,
html[data-theme="dark"] .bottom-nav {
  background: var(--mh-surface-nav);
  border-color: var(--mh-border-subtle);
}

html[data-theme="dark"] .mh-product-status {
  color: var(--mh-accent);
  background: color-mix(in srgb, var(--mh-accent) 16%, var(--mh-surface));
}