/* The Dashboard in glass: the six count cards at the top as tinted glass, and
   every panel below as clear glass. Hovering a card carries the light on its
   rim round to the opposite edges.
   patches/build-revenue.mjs marks the page with data-dash-glass and each count
   card with data-stat-glass, handing over the card's colour as --stat-tint; the
   card's old solid gradient stays inline as the look for browsers that cannot
   mix colours. Everything is scoped to the Dashboard: the card component is
   shared, and other pages keep their solid cards. */

/* The angle the light falls on a card's rim from: at rest it lights the top and
   left edges, hovered the bottom and right. Registered as an angle so the
   change can be animated, which sweeps the light round the border; a browser
   that cannot register it just changes sides at once. */
@property --glass-rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 145deg;
}

[data-dash-glass] {
  /* Chips, tracks and hover fills inside the panels are glass too. */
  --surface-2: rgba(255, 255, 255, .08);
  --surface-3: rgba(255, 255, 255, .14);
}

/* Panels: clear glass. Almost nothing in the pane itself (no frost, no haze),
   so the glass is told by its edge: a crisp rim that is brightest where the
   light enters, and a thin line of light along the top. */
[data-dash-glass] [class*="_card_"],
[data-dash-glass] [class*="_mini_"] {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 18px 40px -26px rgba(0, 0, 0, .6);
  transition: box-shadow .6s cubic-bezier(.3, .7, .2, 1);
}
/* Hovered: the thin line of light moves from the top edge to the bottom one. */
[data-dash-glass] [class*="_card_"]:hover,
[data-dash-glass] [class*="_mini_"]:hover {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .22),
    0 18px 40px -26px rgba(0, 0, 0, .6);
}
[data-dash-glass] [class*="_card_"]::after,
[data-dash-glass] [class*="_mini_"]::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  --glass-rim-angle: 145deg;
  background: linear-gradient(var(--glass-rim-angle), rgba(255, 255, 255, .66), rgba(255, 255, 255, .14) 30%, rgba(255, 255, 255, .06) 68%, rgba(255, 255, 255, .09));
  transition: --glass-rim-angle .6s cubic-bezier(.3, .7, .2, 1);
  -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 exclude, linear-gradient(#000 0 0);
}

[data-dash-glass] [class*="_card_"]:hover::after,
[data-dash-glass] [class*="_mini_"]:hover::after {
  --glass-rim-angle: 325deg;
}

/* The highlighted tile keeps the accent colour, as bright tinted glass. */
[data-dash-glass] [class*="_miniAccent_"] {
  background:
    radial-gradient(95% 110% at 0% 0%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(160deg, rgba(208, 253, 62, .92), rgba(163, 209, 16, .84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 16px 36px -20px rgba(208, 253, 62, .7);
}
[data-dash-glass] [class*="_miniAccent_"]:hover {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .7),
    0 16px 36px -20px rgba(208, 253, 62, .7);
}

/* Things that float over the page (date-range menu, chart tooltip) soften what is under them a little, enough to read on. */
[data-dash-glass] [class*="_filterMenu_"],
[data-dash-glass] [class*="_tip_"] {
  background: rgba(28, 30, 34, .78);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 22px 50px -22px rgba(0, 0, 0, .7);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  /* "button" outweighs the app's own card rules, which load after this file; the
     hover form holds the same shadow, so a hovered card looks no different. */
  button[data-stat-glass],
  button[data-stat-glass]:hover {
    --glass-rim: rgba(255, 255, 255, .7);
    border-radius: 22px !important;
    /* A bright, even tint (the page behind is near black, so a thin tint reads as smoke),
       lighter where the light enters and again at the far corner. */
    background:
      radial-gradient(110% 90% at 100% 108%, color-mix(in srgb, color-mix(in srgb, var(--stat-tint) 82%, white) 55%, transparent), transparent 66%),
      radial-gradient(95% 85% at 0% 0%, color-mix(in srgb, color-mix(in srgb, var(--stat-tint) 62%, white) 70%, transparent), transparent 72%),
      linear-gradient(160deg, color-mix(in srgb, var(--stat-tint) 84%, transparent), color-mix(in srgb, var(--stat-tint) 76%, transparent)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: var(--shadow-sm);
  }

  /* Bright rim: light catches the top and left edges; hovered, the bottom and right. */
  [data-stat-glass]::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    --glass-rim-angle: 145deg;
    background: linear-gradient(var(--glass-rim-angle), var(--glass-rim), rgba(255, 255, 255, .18) 34%, rgba(255, 255, 255, .08) 66%, rgba(255, 255, 255, .12));
    transition: --glass-rim-angle .6s cubic-bezier(.3, .7, .2, 1);
    -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 exclude, linear-gradient(#000 0 0);
    opacity: .8;
  }

  button[data-stat-glass]:hover::before { --glass-rim-angle: 325deg; }

  /* Sheen across the upper surface. */
  [data-stat-glass]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(130% 70% at 18% -12%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 46%, transparent 62%);
  }

  /* Content sits above the rim and sheen. */
  [data-stat-glass] > * { position: relative; z-index: 1; }

  /* The icon is a small lens of the same glass. */
  [data-stat-glass] > div:first-child {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .6),
      0 4px 10px -6px rgba(0, 0, 0, .35);
  }
  [data-stat-glass] > span { text-shadow: 0 1px 6px rgba(0, 0, 0, .22); }

  /* No backdrop blur available: a denser tint keeps the card readable. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-stat-glass] {
      background: linear-gradient(145deg, color-mix(in srgb, var(--stat-tint) 62%, #141416), color-mix(in srgb, var(--stat-tint) 30%, #141416)) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-stat-glass] { transform: none !important; }
    [data-stat-glass]::before { transition: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-dash-glass] [class*="_card_"],
  [data-dash-glass] [class*="_mini_"],
  [data-dash-glass] [class*="_card_"]::after,
  [data-dash-glass] [class*="_mini_"]::after { transition: none; }
}