/* FinFact mobile liquid-glass navigation: neutral surfaces and synchronized page swiping. */
@media (max-width: 700px) {
  body:has(.ff-nav) {
    --ff-dock-bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) - 12px));
    --ff-dock-clearance: calc(88px + var(--ff-dock-bottom));
    padding-bottom: var(--ff-dock-clearance);
    overflow-x: hidden;
  }

  .ff-nav-wrap {
    top: 0;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    z-index: 50;
  }

  .ff-nav {
    position: relative;
    isolation: isolate;
    background: transparent;
    border-color: rgba(255,255,255,.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ff-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,0) 56%),
      rgba(18,18,20,.92);
    box-shadow:
      0 8px 28px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.065),
      inset 0 -1px 0 rgba(255,255,255,.018);
  }

  .ff-nav #ff-navigation {
    --dock-index: 0;
    --dock-drag: 0px;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: auto;
    left: max(14px, env(safe-area-inset-left, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: var(--ff-dock-bottom);
    width: auto;
    max-width: 460px;
    min-height: 72px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background:
      linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.020) 48%, rgba(255,255,255,.008)),
      rgba(18,18,20,.92);
    box-shadow:
      0 14px 38px rgba(0,0,0,.40),
      0 3px 10px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(255,255,255,.022);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;
    overflow: hidden;
    z-index: 45;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .ff-nav #ff-navigation:has(> a:nth-of-type(2)[aria-current="page"]) { --dock-index: 1; }
  .ff-nav #ff-navigation:has(> a:nth-of-type(3)[aria-current="page"]) { --dock-index: 2; }
  .ff-nav #ff-navigation:has(> a:nth-of-type(4)[aria-current="page"]) { --dock-index: 3; }

  .ff-nav #ff-navigation::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 4);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background:
      linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.065) 54%, rgba(255,255,255,.026));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -1px 0 rgba(255,255,255,.026),
      0 4px 13px rgba(0,0,0,.16);
    transform: translate3d(calc(var(--dock-index) * 100% + var(--dock-drag)), 0, 0);
    transition: transform 340ms cubic-bezier(.20, 1.30, .32, 1), opacity 160ms ease;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
  }

  .ff-nav #ff-navigation:not(:has(> a[aria-current="page"]))::before { opacity: 0; }

  .ff-nav #ff-navigation[data-dock-dragging="true"]::before {
    transition: none;
    opacity: 1;
  }

  .ff-nav #ff-navigation > a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 58px;
    padding: 6px 2px;
    border-radius: 999px;
    color: #b8b8bd;
    background: transparent;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease, opacity 150ms ease;
    -webkit-touch-callout: none;
    touch-action: pan-y pinch-zoom;
  }

  .ff-nav #ff-navigation > a > span { max-width: 100%; }
  .ff-nav #ff-navigation > a > svg {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    opacity: .94;
    pointer-events: none;
  }

  .ff-nav #ff-navigation > a[aria-current="page"] {
    color: #f5f5f7;
    background: transparent;
  }
  .ff-nav #ff-navigation > a[aria-current="page"] > svg { color: #ffffff; opacity: 1; }

  .ff-nav #ff-navigation[data-dock-preview] > a { color: #b8b8bd; }
  .ff-nav #ff-navigation[data-dock-preview] > a > svg { color: inherit; opacity: .94; }
  .ff-nav #ff-navigation[data-dock-preview="0"] > a:nth-of-type(1),
  .ff-nav #ff-navigation[data-dock-preview="1"] > a:nth-of-type(2),
  .ff-nav #ff-navigation[data-dock-preview="2"] > a:nth-of-type(3),
  .ff-nav #ff-navigation[data-dock-preview="3"] > a:nth-of-type(4) { color: #f5f5f7; }
  .ff-nav #ff-navigation[data-dock-preview="0"] > a:nth-of-type(1) > svg,
  .ff-nav #ff-navigation[data-dock-preview="1"] > a:nth-of-type(2) > svg,
  .ff-nav #ff-navigation[data-dock-preview="2"] > a:nth-of-type(3) > svg,
  .ff-nav #ff-navigation[data-dock-preview="3"] > a:nth-of-type(4) > svg { color: #fff; opacity: 1; }

  .ff-nav #ff-navigation > a:focus-visible {
    outline: 2px solid rgba(255,255,255,.82);
    outline-offset: -3px;
  }

  /* The active screen follows the finger; release snaps it back while the SPA
     swaps to the adjacent primary route. Child horizontal scrollers are excluded
     by mobile-dock.js so charts, tables and filters keep their native gestures. */
  body[data-page="portfolio"] .fw-workspace,
  body[data-page="payments"] .fw-workspace,
  body[data-page="market"] .fw-workspace,
  body[data-page="assistant"] .fw-workspace {
    transform: translate3d(var(--ff-page-drag, 0px), 0, 0);
    transition: transform 320ms cubic-bezier(.20, .82, .26, 1);
  }
  body[data-page-swiping="true"] .fw-workspace {
    transition: none;
    will-change: transform;
  }

  .mk-tray { bottom: var(--ff-dock-clearance); }
  .mk-toast { bottom: calc(75px + var(--ff-dock-clearance)); }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ff-nav::before {
      background:
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0) 56%),
        rgba(18,18,20,.55);
      -webkit-backdrop-filter: blur(22px) saturate(110%);
      backdrop-filter: blur(22px) saturate(110%);
    }

    .ff-nav #ff-navigation {
      background:
        linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.018) 48%, rgba(255,255,255,.007)),
        rgba(18,18,20,.55);
      -webkit-backdrop-filter: blur(22px) saturate(110%);
      backdrop-filter: blur(22px) saturate(110%);
    }
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .ff-nav #ff-navigation::before,
  .ff-nav #ff-navigation > a,
  .fw-workspace {
    transition: none !important;
  }
}

@media (max-width: 700px) and (prefers-reduced-transparency: reduce),
  (max-width: 700px) and (prefers-contrast: more) {
  .ff-nav::before,
  .ff-nav #ff-navigation {
    background: #18181a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ff-nav #ff-navigation { border-color: #76767b; }
  .ff-nav #ff-navigation::before { background: #343438; border-color: #76767b; }
  .ff-nav #ff-navigation > a { color: #d0d0d4; }
  .ff-nav #ff-navigation > a[aria-current="page"] { color: #fff; }
}

/* Darker, quieter FinFact mobile shell aligned with the Plennor visual language.
   This section is visual-only: dock/page gesture behavior above is unchanged. */
@media (max-width: 700px) {
  body:has(.ff-nav) {
    background: #050506;
    color: #f5f5f7;
  }
  body:has(.ff-nav) .ambient { display: none; }
  body:has(.ff-nav) .shell { width: min(calc(100% - 32px), var(--max)); }

  /* Plennor-like header: no enclosing glass slab, just brand + profile. */
  .ff-nav-wrap {
    position: relative;
    top: auto;
    padding-top: max(18px, env(safe-area-inset-top, 0px));
    background: transparent;
  }
  .ff-nav {
    width: calc(100% - 32px);
    min-height: 52px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ff-nav::before { display: none; }
  .ff-nav .brand {
    padding: 0;
    color: #f5f5f7;
    font-size: 22px;
    line-height: 1;
    font-weight: 720;
    letter-spacing: -.045em;
  }

  .ff-profile-menu > summary {
    border-radius: 50%;
    outline: none;
  }
  .ff-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
    background: #111214;
    color: transparent;
    font-size: 0;
    box-shadow: 0 9px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
  }
  .ff-profile-avatar::before {
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    background: center / 25px 25px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5.8 20c.5-4.1 2.7-6.2 6.2-6.2s5.7 2.1 6.2 6.2'/%3E%3C/svg%3E");
  }
  .ff-profile-popover {
    top: calc(100% + 12px);
    border-color: rgba(255,255,255,.10);
    background: rgba(12,12,13,.985);
    box-shadow: 0 20px 58px rgba(0,0,0,.55);
  }
  .ff-profile-popover > a:hover,
  .ff-profile-popover > button:hover { background: rgba(255,255,255,.055); }

  /* Deeper page and card hierarchy. */
  .fw-workspace { padding-top: 38px; }
  .fw-heading {
    align-items: center;
    margin-bottom: 28px;
  }
  .fw-heading h1 {
    color: #f7f7f8;
    font-size: clamp(40px, 11.5vw, 50px);
    line-height: .98;
    font-weight: 690;
    letter-spacing: -.06em;
  }
  .fw-quiet-button {
    min-height: 48px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: #101112;
    color: #eeeeef;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }
  .fw-card,
  .fw-assessment,
  .mk-surface {
    border-color: rgba(255,255,255,.095);
    background: #111214;
    box-shadow: 0 14px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.018);
  }
  .fw-card { border-radius: 26px; }
  .fw-widget-label,
  .fw-muted,
  .fw-card p,
  .fw-assets-table th,
  .fw-assets-table td small,
  .fw-chart-note { color: #99999f; }
  .fw-balance-value { color: #f7f7f8; font-weight: 610; }
  .fw-balance-chart text { fill: #8f9097; }
  .fw-periods button,
  .fw-asset-filters button { color: #9d9ea4; }
  .fw-periods button[aria-pressed=true],
  .fw-asset-filters button[aria-pressed=true] {
    color: #f4f4f5;
    background: rgba(255,255,255,.075);
  }
  .fw-text-link,
  .mk-quiet,
  .mk-back,
  .mk-section-head a { color: #c7c7cb; }
  .fw-assessment > p,
  .fw-action-name { color: #a8a8ae; }
  .fw-priority,
  .fw-chat-mark {
    color: #d1d1d5;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.04);
  }
  .fw-bubble { background: rgba(255,255,255,.045); }
  .fw-bubble.user { background: #252527; color: #f2f2f3; }
  .fw-chat-form {
    background: #101112;
    border-color: rgba(255,255,255,.10);
  }
  .fw-chat-form button { background: #ededee; color: #111214; }

  /* Darker bottom island and neutral active pill; drag geometry is unchanged. */
  .ff-nav #ff-navigation {
    border-color: rgba(255,255,255,.10);
    background:
      linear-gradient(160deg, rgba(255,255,255,.032), rgba(255,255,255,.008) 58%, transparent),
      rgba(13,13,14,.94);
    box-shadow:
      0 17px 42px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.045),
      inset 0 -1px 0 rgba(255,255,255,.012);
  }
  .ff-nav #ff-navigation::before {
    border-color: rgba(255,255,255,.14);
    background:
      linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.085) 55%, rgba(255,255,255,.045));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -1px 0 rgba(255,255,255,.025),
      0 5px 15px rgba(0,0,0,.24);
  }
  .ff-nav #ff-navigation > a { color: #a6a6ac; }
  .ff-nav #ff-navigation > a[aria-current="page"],
  .ff-nav #ff-navigation[data-dock-preview="0"] > a:nth-of-type(1),
  .ff-nav #ff-navigation[data-dock-preview="1"] > a:nth-of-type(2),
  .ff-nav #ff-navigation[data-dock-preview="2"] > a:nth-of-type(3),
  .ff-nav #ff-navigation[data-dock-preview="3"] > a:nth-of-type(4) { color: #f7f7f8; }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ff-nav #ff-navigation {
      background:
        linear-gradient(160deg, rgba(255,255,255,.030), rgba(255,255,255,.007) 58%, transparent),
        rgba(13,13,14,.74);
      -webkit-backdrop-filter: blur(24px) saturate(105%);
      backdrop-filter: blur(24px) saturate(105%);
    }
  }
}