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

   Loaded on EVERY route, unlike coherence/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 Coherence'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="coherence"] {
    position: relative;
    isolation: isolate;

    /* Pale teal at rest, deeper on hover. Legible on the collapsed 48px rail
       where the labels are hidden — the tint is what says "Coherence" when
       the words cannot. */
    --app-nav-bg:          var(--co-teal-050);
    --app-nav-bg-hover:    var(--co-teal-100);
    --app-nav-item-active: color-mix(in oklab, var(--co-teal-500) 26%, var(--white));

    --app-backdrop: url("../img/calligraphy/calligraphy-21.jpg");
  }

  /* The calligraphy motif, behind the group's items and over its tint.
     Anchored right and clipped by the rail, so the collapsed rail shows a
     sliver of ink and the expanded rail shows the mark properly — the same
     motif doing more as there is more room for it. */
  .sidenav [data-app-group="coherence"]::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 black ink reads as a charcoal whisper over the teal
       rather than a grey block. */
    mix-blend-mode: multiply;
    opacity: 0.07;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

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

  /* Teal label, so the group carries its accent even on platform routes. */
  .sidenav [data-app-group="coherence"] .sidenav-app-label {
    color: var(--co-teal-900);
  }

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