/* ============================================================================
   Varelyno: the side menu, bigger and bolder (1 Nov). Asked for after the new
   landing page, whose story draws this menu: the words in Outfit, a little
   larger and heavier, closer together, and the page you are on shown as a
   raised pill with a straight bar on its left. Every item stays.

   The colours come from the theme, so every theme and colour mode keeps its
   own menu background:
     the bar         the theme colour (--v-accent)
     the words       the theme colour, mixed a little with the theme's text
                     colour so they stay easy to read on the pill
     the pill        near white with a hint of the theme colour; in the dark
                     themes a little lighter than the menu
     Rich mode       the page you are on stays filled with the theme colour,
                     its words white (as before); the bar a deeper shade
   The iPhone app (html.vx-app) has its own look and keeps it.
   ========================================================================== */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/outfit-var.woff2') format('woff2'); }

html:not(.vx-app) #sidebar .nav { gap: 2px }
html:not(.vx-app) #sidebar .nav .nav-btn { font-family: 'Outfit', Inter, 'Segoe UI', system-ui, sans-serif; font-size: 15.5px; font-weight: 600;
  letter-spacing: -.005em; padding: 9px 12px; gap: 13px; min-height: 0 }
html:not(.vx-app) #sidebar .nav .nav-ico svg { width: 21px; height: 21px }
html:not(.vx-app) #sidebar .nav .divider { margin: 6px 14px 8px }

/* the page you are on */
html:not(.vx-app) #sidebar .nav-btn.active { font-weight: 750; border-color: transparent;
  color: color-mix(in srgb, var(--v-accent, #187bb1) 80%, var(--text, #243b4e)) !important;
  background: color-mix(in srgb, var(--v-accent, #187bb1) 6%, var(--surface, #fff)) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--v-accent, #187bb1) 10%, rgba(20, 52, 86, .06)) !important }
html:not(.vx-app) #sidebar .nav-btn.active::before { content: ''; display: block; position: absolute; left: -7px; top: 20%; bottom: 20%;
  width: 3.5px; border-radius: 3px; background: var(--v-accent, #187bb1) }

/* the dark themes: the pill a little lighter than the menu */
html.v-universe[data-mode="dark"]:not(.vx-app) #sidebar .nav-btn.active {
  background: color-mix(in srgb, var(--v-accent) 14%, var(--surface)) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important }

/* Rich mode: filled with the theme colour as before, the bar a deeper shade of it */
html.v-universe[data-mode="rich"]:not(.vx-app) #sidebar .nav-btn.active { color: var(--v-accent-ink, #fff) !important;
  background: linear-gradient(135deg, var(--v-accent), color-mix(in srgb, var(--v-accent) 82%, #000)) !important;
  box-shadow: 0 8px 20px -10px var(--v-accent) !important }
html.v-universe[data-mode="rich"]:not(.vx-app) #sidebar .nav-btn.active::before { background: color-mix(in srgb, var(--v-accent) 60%, #000) }