/* ─────────────────────────────────────────────────────────────────────────
   AUDAX — its entry in the shell sidenav.

   Loaded on EVERY route, unlike audax/css/theme.css, because the rail is
   rendered on every page: an app's block should be recognisable from
   anywhere, which is the whole point of tinting it.

   The shell tags each group with data-app-group="<slug>" and knows nothing
   more; the tint mechanism itself is platform (crm/css/base.css). This file
   supplies Audax's values and its one decorative flourish.

   Colour and decoration only. The rail's geometry is identical in every app —
   navigation has to feel the same shape wherever you are, so nothing here
   touches size, radius, spacing or the collapse behaviour
   (specs/design-system.md §4.1).
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .sidenav [data-app-group="audax"] {
    position: relative;
    isolation: isolate;

    /* Parchment-sage at rest, mist-sage on hover. Legible on the collapsed
       48px rail where the labels are hidden — the tint is what says "Audax"
       when the words cannot. Referencing Audax's own primitive rather than
       var(--color-accent), which off Audax's routes would resolve to
       whatever page you happen to be on. */
    --app-nav-bg:          var(--au-forest-050);
    --app-nav-bg-hover:    var(--au-forest-100);
    --app-nav-item-active: color-mix(in oklab, var(--au-forest-500) 26%, var(--white));

    --app-backdrop: url("../img/motifs/motif-04.jpg");
  }

  /* The sumi-e fragment, behind the group's items and over its tint. Anchored
     right and clipped by the rail, so the collapsed rail shows a sliver of
     the brushstroke and the expanded rail shows more of it — the same motif
     doing more as there is more room for it. */
  .sidenav [data-app-group="audax"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -20% 0 0;
    background-image: var(--app-backdrop);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 70% center;
    /* Multiply so the wash reads as a green whisper over the tint rather
       than a pasted rectangle. */
    mix-blend-mode: multiply;
    opacity: 0.14;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  .sidenav:is(:hover, .sidenav--preview-open) [data-app-group="audax"]::before { opacity: 0.2; }

  /* Forest label, so the group carries its accent even on platform routes. */
  .sidenav [data-app-group="audax"] .sidenav-app-label {
    color: var(--au-forest-800);
  }

  .sidenav [data-app-group="audax"] .sidenav-item.sidenav-active {
    color: var(--au-forest-900);
  }
}