/* Portable VASTELOR material. The dock retains its approved palette.
   Static controls use neutral glass; hosts own shape, labels and actions. */
.v-navigation,.v-navigation-material {
  --v-navigation-ink:#191d21;
  --v-nav-selected-ink:#05685f;
  --v-navigation-selected-scale:1.06;
  --v-navigation-surface:rgb(222 232 230 / 28%);
  --v-navigation-edge:rgb(83 110 107 / 32%);
  --v-navigation-rim:rgb(255 255 255 / 88%);
  --v-navigation-selection:rgb(91 120 116 / 13%);
  --v-navigation-selection-edge:rgb(72 105 101 / 34%);
  --v-navigation-surface-paint:linear-gradient(155deg,rgb(255 255 255 / 28%),transparent 47%,rgb(110 144 136 / 6%));
  --v-navigation-lower-rim:rgb(52 84 81 / 14%);
  --v-navigation-selection-shadow:inset 0 1px 0 var(--v-navigation-rim),0 2px 6px rgb(0 0 0 / 5%);
  --v-navigation-selection-inset:4px;
  --v-navigation-glint-paint:linear-gradient(120deg,rgb(255 255 255 / 45%),transparent 38%,transparent 67%,rgb(203 242 231 / 13%));
  --v-navigation-shadow:rgb(21 39 43 / 12%);
  --v-navigation-width:min(90%,560px);
  --v-navigation-blur:6px;
}
.v-navigation { display:none; transform-origin:50% 50%; touch-action:pan-y; }
:root[data-theme="dark"] :is(.v-navigation,.v-navigation-material) {
  --v-navigation-ink:#f4f5f6;
  --v-nav-selected-ink:#36c9a6;
  --v-navigation-surface:rgb(43 53 56 / 40%);
  --v-navigation-edge:rgb(166 193 191 / 19%);
  --v-navigation-rim:rgb(242 255 251 / 23%);
  --v-navigation-selection:rgb(138 166 162 / 8%);
  --v-navigation-selection-edge:rgb(220 245 239 / 23%);
  --v-navigation-surface-paint:linear-gradient(155deg,rgb(255 255 255 / 9%),transparent 47%,rgb(159 187 188 / 5%));
  --v-navigation-lower-rim:rgb(0 0 0 / 7%);
  --v-navigation-glint-paint:linear-gradient(120deg,rgb(255 255 255 / 52%),transparent 38%,transparent 67%,rgb(203 242 231 / 13%));
  --v-navigation-shadow:rgb(0 0 0 / 28%);
}
/* Reflections stay inside static controls. No diffuse shadow beside them. */
.v-navigation-material {
  --v-nav-selected-ink:var(--v-navigation-ink);
  --v-navigation-selection-shadow:inset 0 1px 0 var(--v-navigation-rim);
  --v-navigation-material-shadow:inset 0 1px 0 var(--v-navigation-rim),inset 0 -1px 0 var(--v-navigation-lower-rim);
}
:root[data-theme="light"] .v-navigation-material {
  --v-navigation-surface:rgb(226 226 228 / 28%);
  --v-navigation-edge:rgb(100 100 104 / 32%);
  --v-navigation-selection:rgb(108 108 112 / 13%);
  --v-navigation-selection-edge:rgb(88 88 92 / 34%);
  --v-navigation-surface-paint:linear-gradient(155deg,rgb(255 255 255 / 28%),transparent 47%,rgb(128 128 132 / 6%));
  --v-navigation-lower-rim:rgb(60 60 64 / 14%);
  --v-navigation-glint-paint:linear-gradient(120deg,rgb(255 255 255 / 45%),transparent 38%,transparent 67%,rgb(255 255 255 / 13%));
}
/* A separate noninteractive paint layer keeps hover/press from replacing
   the glass. The dark-only variant leaves light control paint to the host. */
.v-navigation-material { position:relative; isolation:isolate; }
.v-navigation::before,
.v-navigation-material:not(.v-navigation-material--dark)::before,
:root[data-theme="dark"] .v-navigation-material--dark::before {
  content:''; position:absolute; z-index:-1; inset:var(--v-navigation-material-inset,0);
  border:1px solid var(--v-navigation-edge); border-radius:inherit;
  background:var(--v-navigation-surface-paint),var(--v-navigation-surface);
  box-shadow:var(--v-navigation-material-shadow,inset 0 1px 0 var(--v-navigation-rim),inset 0 -1px 0 var(--v-navigation-lower-rim),0 6px 18px var(--v-navigation-shadow));
  backdrop-filter:blur(var(--v-navigation-blur)) saturate(1.08); -webkit-backdrop-filter:blur(var(--v-navigation-blur)) saturate(1.08);
  pointer-events:none;
}
/* The dock has no host border; its radius is independent of control shape. */
.v-navigation::before { border-radius:999px; }
/* Commit actions have a fully green mirrored surface in the app's theme.
   Opaque colour needs reflections, not a redundant backdrop blur. */
:root[data-theme] .v-navigation-material--positive {
  --v-navigation-surface:var(--v-navigation-positive,#087866);
  --v-navigation-edge:color-mix(in srgb,var(--v-navigation-positive,#087866) 60%,#000);
  --v-navigation-surface-paint:linear-gradient(155deg,rgb(255 255 255 / 18%),transparent 47%,rgb(0 0 0 / 9%));
  --v-navigation-rim:rgb(255 255 255 / 48%);
  --v-navigation-lower-rim:rgb(0 0 0 / 18%);
}
:root[data-theme] .v-navigation-material--positive::before {
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.v-navigation__indicator { display:none; }
@media (max-width:719px), (min-width:720px) and (max-width:1199px) and (orientation:portrait) and (any-pointer:coarse) {
  .v-navigation {
    position:fixed; z-index:25; left:0; right:0; bottom:max(8px,env(safe-area-inset-bottom,0px));
    min-height:62px; padding:4px 0; display:grid; grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr); justify-content:center; gap:0; isolation:isolate;
    width:var(--v-navigation-width); margin-inline:auto; box-sizing:border-box;
    pointer-events:none; transition:none;
  }
}
  .v-navigation__item {
    position:relative; z-index:1; min-width:0; min-height:54px; padding:4px 1px;
    display:grid; grid-template-rows:30px 13px; align-content:center; justify-items:center; gap:3px;
    border:0; border-radius:999px; text-decoration:none; background:transparent;
    color:var(--v-navigation-ink); pointer-events:auto; box-sizing:border-box;
  }
  .v-navigation__glyph { width:28px; height:28px; display:grid; place-items:center; transform-origin:center; color:inherit; }
  .v-navigation__glyph svg { width:26px; height:26px; color:inherit; }
  .v-navigation__label { width:max-content; max-width:calc(100% - 6px); font-size:10px; font-weight:400; line-height:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; }
  .v-navigation__item[aria-current="page"] { color:var(--v-nav-selected-ink); }
  .v-navigation:not(.is-motion-ready) .v-navigation__item[aria-current="page"] { background:var(--v-navigation-selection); }
  .v-navigation__item:focus-visible { outline:2px solid var(--v-nav-selected-ink); outline-offset:-3px; }
  .v-navigation.is-motion-ready .v-navigation__indicator {
    display:block; position:absolute; z-index:0; top:0; left:0; border:1px solid var(--v-navigation-selection-edge);
    border-radius:999px; overflow:hidden; box-sizing:border-box; pointer-events:none;
    background:var(--v-navigation-selection); box-shadow:var(--v-navigation-selection-shadow);
    transform-origin:50% 50%; contain:layout paint; transition:none;
  }
  .v-navigation__glint,.v-navigation__shade { position:absolute; inset:-1px -12px; border-radius:inherit; pointer-events:none; transition:none; }
  .v-navigation__glint { background:var(--v-navigation-glint-paint); }
  .v-navigation__shade { background:linear-gradient(105deg,transparent 55%,rgb(17 49 49 / 16%)); }
/* The same material and browser movement can run along the other axis. */
.v-navigation.v-navigation--vertical {
  position:relative; z-index:25; inset:auto; display:grid; grid-auto-flow:row;
  grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); gap:6px;
  width:var(--v-navigation-rail-width,88px); max-width:100%; min-height:0;
  margin:0; padding:8px 4px; border-radius:999px; box-sizing:border-box;
  isolation:isolate; pointer-events:none; touch-action:pan-x; transition:none;
}
.v-navigation--vertical .v-navigation__item { min-height:64px; }
.v-navigation--vertical .v-navigation__glint,.v-navigation--vertical .v-navigation__shade { inset:-12px -1px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .v-navigation,.v-navigation-material { --v-navigation-surface:rgb(226 233 235 / 94%); }
  :root[data-theme="dark"] :is(.v-navigation,.v-navigation-material) { --v-navigation-surface:rgb(28 35 37 / 96%); }
  :root[data-theme="light"] .v-navigation-material { --v-navigation-surface:rgb(226 226 228 / 94%); }
  :root[data-theme] .v-navigation-material--positive { --v-navigation-surface:var(--v-navigation-positive,#087866); }
}
@media (prefers-reduced-transparency:reduce) {
  .v-navigation,.v-navigation-material { --v-navigation-surface:#e2e9eb; }
  :root[data-theme="dark"] :is(.v-navigation,.v-navigation-material) { --v-navigation-surface:#1c2325; }
  :root[data-theme="light"] .v-navigation-material { --v-navigation-surface:#e2e2e4; }
  :root[data-theme] .v-navigation-material--positive { --v-navigation-surface:var(--v-navigation-positive,#087866); }
  .v-navigation::before,
  .v-navigation-material:not(.v-navigation-material--dark)::before,
  :root[data-theme="dark"] .v-navigation-material--dark::before { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (forced-colors:active) {
  .v-navigation::before,
  .v-navigation-material:not(.v-navigation-material--dark)::before,
  :root[data-theme="dark"] .v-navigation-material--dark::before { background:Canvas; border-color:ButtonText; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .v-navigation__indicator { background:transparent; border-color:Highlight; }
  .v-navigation__glint,.v-navigation__shade { display:none; }
  .v-navigation__item { color:ButtonText !important; }
  .v-navigation__item[aria-current="page"] { color:Highlight !important; }
}

/* Complementary fixed-ink layers share the same glyph and label anchors. */
.v-navigation.has-ink-layers .v-navigation__glyph { grid-area:1 / 1; isolation:isolate; }
.v-navigation.has-ink-layers .v-navigation__glyph > svg { grid-area:1 / 1; }
.v-navigation.has-ink-layers .v-navigation__label { grid-area:2 / 1; }
.v-navigation.has-ink-layers .v-navigation__selected-label {
  display:block; max-width:100%; max-height:13px; pointer-events:none;
}
@supports (mix-blend-mode:plus-lighter) {
  .v-navigation.has-ink-layers .v-navigation__item { isolation:isolate; }
  .v-navigation.has-ink-layers .v-navigation__glyph > svg,
  .v-navigation.has-ink-layers .v-navigation__label { mix-blend-mode:plus-lighter; }
}