/* Static version of the Tools card surface. Keep each page's own interactions. */
#app :is(
  .dev-card,
  .dpd-card,
  .market-card,
  .stat-block,
  .kanban-card,
  .tb-card,
  .cp-card,
  .cd-panel,
  .cdd-panel,
  .acct-stat,
  .acct-card
) {
  --glass-glow-left: hsl(189, 99%, 18%);
  --glass-glow-bottom: hsl(189, 97%, 24%);
  --glass-glow-edge: hsl(188, 94%, 10%);
  background: radial-gradient(at 88% 40%, hsl(240, 15%, 9%) 0, transparent 85%),
    radial-gradient(at 49% 30%, hsl(240, 15%, 9%) 0, transparent 85%),
    radial-gradient(at 14% 26%, hsl(240, 15%, 9%) 0, transparent 85%),
    radial-gradient(at 0% 64%, var(--glass-glow-left) 0, transparent 85%),
    radial-gradient(at 41% 94%, var(--glass-glow-bottom) 0, transparent 85%),
    radial-gradient(at 100% 99%, var(--glass-glow-edge) 0, transparent 85%),
    #111217;
  border: 1px solid #45464f;
  border-radius: 16px;
  box-shadow: inset 0 -16px 24px rgba(255, 255, 255, .25),
    inset 0 1px rgba(255, 255, 255, .12),
    0 12px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#app :is(.dev-root, .dpd-root) :is(.dev-card, .dpd-card) {
  --glass-glow-left: hsl(195, 76%, 17%);
  --glass-glow-bottom: hsl(201, 78%, 22%);
  --glass-glow-edge: hsl(207, 65%, 10%);
}

#app .market-root .market-card {
  --glass-glow-left: hsl(211, 74%, 17%);
  --glass-glow-bottom: hsl(222, 64%, 23%);
  --glass-glow-edge: hsl(232, 50%, 11%);
}

#app .taskboard-page :is(.stat-block, .kanban-card, .tb-card) {
  --glass-glow-left: hsl(218, 50%, 16%);
  --glass-glow-bottom: hsl(221, 55%, 21%);
  --glass-glow-edge: hsl(231, 45%, 10%);
}

#app :is(.cp-root, .cd-root, .cdd-root) :is(.cp-card, .cd-panel, .cdd-panel) {
  --glass-glow-left: hsl(184, 70%, 15%);
  --glass-glow-bottom: hsl(191, 71%, 20%);
  --glass-glow-edge: hsl(203, 55%, 10%);
}

#app .acct-root :is(.acct-stat, .acct-card) {
  --glass-glow-left: hsl(203, 68%, 16%);
  --glass-glow-bottom: hsl(213, 69%, 21%);
  --glass-glow-edge: hsl(224, 54%, 10%);
}

#app :is(.dev-grid, .market-grid, .tb-grid, .cp-grid, .stats-bar, .acct-overview, .kanban-cards)
  > :nth-child(3n + 2) {
  --glass-glow-left: hsl(204, 57%, 16%);
  --glass-glow-bottom: hsl(213, 62%, 21%);
  --glass-glow-edge: hsl(226, 48%, 10%);
}

#app :is(.dev-grid, .market-grid, .tb-grid, .cp-grid, .stats-bar, .acct-overview, .kanban-cards)
  > :nth-child(3n) {
  --glass-glow-left: hsl(184, 56%, 15%);
  --glass-glow-bottom: hsl(190, 59%, 20%);
  --glass-glow-edge: hsl(204, 46%, 10%);
}

#app :is(.dev-card, .market-card, .tb-card, .cp-card, .kanban-card.clickable):hover {
  border-color: #65737b;
  box-shadow: inset 0 -16px 24px rgba(255, 255, 255, .25),
    inset 0 1px rgba(255, 255, 255, .16),
    0 16px 36px rgba(0, 0, 0, .4),
    0 0 18px rgba(49, 190, 216, .12);
}

#app .tb-card.is-expanded,
#app .tb-card.is-expanded:hover {
  border-color: rgba(91, 191, 218, .45);
  box-shadow: inset 0 -16px 24px rgba(255, 255, 255, .25),
    0 0 0 1px rgba(91, 191, 218, .2),
    0 12px 40px rgba(0, 0, 0, .4);
}