/* ─────────────────────────────────────────────────────────────────────────
   THE GATHERING — its entry in the shell sidenav.

   Loaded on EVERY route, unlike gathering/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 Gathering'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).

   Note on the tint: it references --olive-600 directly rather than
   var(--color-accent). The rail renders on every page, so on a Coherence
   route the accent would be teal and Gathering's block would quietly wear
   someone else's colour. Every app's nav tint names its own primitive for
   this reason. Olive here is Gathering's brand hue, not the platform default
   it happens to coincide with.
   ───────────────────────────────────────────────────────────────────────── */

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

    /* Pale olive at rest, deeper on hover. Legible on the collapsed 48px rail
       where the labels are hidden — the tint is what says "Gathering" when
       the words cannot. */
    --app-nav-bg:          color-mix(in oklab, var(--olive-600) 8%, var(--white));
    --app-nav-bg-hover:    color-mix(in oklab, var(--olive-600) 15%, var(--white));
    --app-nav-item-active: color-mix(in oklab, var(--olive-600) 24%, var(--white));

    /* The green ink wash rather than a black ink flourish: at rail width the
       black motifs read as a smudge, while the wash reads as a field. */
    --app-backdrop: url("../img/ink/green-wash.jpg");
  }

  /* The wash, behind the group's items and over its tint. Anchored right and
     clipped by the rail, so the collapsed rail shows a sliver and the
     expanded rail shows more of it — the same motif doing more as there is
     more room for it. */
  .sidenav [data-app-group="gathering"]::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 deepens the olive tint rather than covering it. */
    mix-blend-mode: multiply;
    opacity: 0.16;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

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

  /* Deep olive label, so the group carries its hue even on platform routes. */
  .sidenav [data-app-group="gathering"] .sidenav-app-label {
    color: var(--olive-900);
  }

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