/* ==================================================================
   Chrome edge — Constellation Visual Brand System v1.0

   A metallic rim on any control, at any size, always flush.

   Why not the plate art: the border bitmaps have a fixed corner radius
   and a fixed stroke. Stretching one onto a control with a different
   radius turns its corners into ellipses, and a 9-slice frame's corner
   ornament cannot line up with an arbitrary CSS border-radius either.
   Bitmap borders can only ever be flush on the one shape they were cut
   for. That is a structural limit, not a tuning problem.

   This inherits border-radius instead, so the rim follows whatever
   shape the element already is -- a 34px square launcher, a 250px
   pill, a 78px card -- and is flush by construction.

   The mask is what makes it a rim rather than a fill: two identical
   gradients, one clipped to the content box, composited so only the
   padding ring survives. The interior stays whatever the control was,
   which matters because these surfaces are not opaque.

   Requires tokens/constellation.css for --cs-chrome-edge.
   ================================================================== */

.cs-edge {
    position: relative;
}

.cs-edge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--cs-edge-w, 1px);
    background: var(--cs-edge-fill, var(--cs-chrome-edge));
    -webkit-mask: linear-gradient(#000 0 0) content-box,
                  linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: var(--cs-edge-o, .55);
    transition: opacity var(--cs-normal, 160ms) ease,
                filter var(--cs-normal, 160ms) ease;
    z-index: 3;
}

/* Seat the metal so it does not float off a dark ground. */
.cs-edge--seated::after {
    box-shadow: var(--cs-chrome-seat, inset 0 0 0 1px rgba(0, 0, 0, .55));
}

.cs-edge:hover::after,
.cs-edge:focus-visible::after,
.cs-edge.active::after {
    opacity: var(--cs-edge-o-hover, 1);
    filter: brightness(1.15)
            drop-shadow(0 0 6px rgba(142, 220, 255, .3));
}

/* A heavier rim for the one control that should lead. */
.cs-edge--strong {
    --cs-edge-w: 1.5px;
    --cs-edge-o: .75;
}