/* ── Blur skeleton cards ───────────────────────────────────── */

.skel-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.skel-blur {
  filter: blur(8px) saturate(1.03);
  opacity: 0.9;
  transform: scale(1.01);
  transform-origin: center top;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.skel-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

/* Reveal — frosted veil on top of sharp content, blur eases away in place */
.skel-reveal-root {
  isolation: isolate;
}

.dash-widget-group.skel-reveal-root,
.tx-day-group.skel-reveal-root,
.tx-head.skel-reveal-root,
.home-overspend-block.skel-reveal-root,
.home-budget-block.skel-reveal-root {
  position: relative;
}

.home-head.skel-reveal-root {
  position: sticky;
  top: 0;
}

.skel-reveal-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  opacity: 1;
  will-change: opacity;
  transform: translateZ(0);
  transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.skel-reveal-veil.is-lifting {
  opacity: 0;
  pointer-events: none;
}

.is-revealing .dash-widget-content,
.is-revealing .dash-widget-body,
.is-revealing .dash-widget-collapse,
.is-revealing .dash-trend-stage {
  transition: none !important;
}

.is-revealing.dash-widget-group,
.is-revealing.tx-day-group,
.has-revealed.tx-day-group,
.is-revealing.tx-head,
.has-revealed.tx-head,
.is-revealing.home-head,
.has-revealed.home-head,
.is-revealing.home-overspend-block,
.has-revealed.home-overspend-block,
.is-revealing.home-budget-block,
.has-revealed.home-budget-block {
  animation: none !important;
  transition: none !important;
}

.is-revealing .home-morph-balance,
.has-revealed .home-morph-balance,
.is-revealing .home-morph-duo,
.has-revealed .home-morph-duo,
.is-revealing .home-morph-goal,
.has-revealed .home-morph-goal,
.is-revealing.home-overspend-block,
.has-revealed.home-overspend-block,
.is-revealing.home-budget-block,
.has-revealed.home-budget-block {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.tx-head.skel-reveal-root .skel-reveal-veil {
  border-radius: 14px;
}

.home-head.skel-reveal-root .skel-reveal-veil {
  border-radius: var(--radius-lg);
}

.home-overspend-block.skel-reveal-root .skel-reveal-veil,
.home-budget-block.skel-reveal-root .skel-reveal-veil {
  border-radius: 10px;
}

/* Skeleton exit — legacy fallback */
.skel-exit {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.skel-exit .skel-veil {
  opacity: 0;
  transition: opacity 0.75s ease;
}

.skel-exit .skel-blur {
  opacity: 0;
  transition: opacity 0.75s ease;
}

.skel-exit.skel-card,
.skel-exit.home-screen-wrap--skeleton,
.skel-exit.tx-list-skeleton,
.skel-exit.dash-screen--skeleton {
  opacity: 0;
  transition: opacity 0.7s ease 0.05s;
}

.view-body:has(.skel-reveal-veil:not(.is-lifting)),
.view-body:has(.dash-screen--skeleton) {
  animation: none !important;
}



/* Home */

.home-screen-wrap--skeleton {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.skel-card--home {

  border-radius: var(--radius-lg);

}



.skel-card--home .skel-blur .home-morph-balance.panel,

.skel-card--home .skel-blur .home-morph-metric.panel,

.skel-card--home .skel-blur .home-goal.panel,

.skel-card--home .skel-blur .home-over-panel {

  pointer-events: none;

}



.skel-ghost-icon {

  background: var(--accent-muted) !important;

  color: var(--accent) !important;

}



/* Transactions hero */

.skel-card--tx-hero {

  margin-bottom: 0;

}



.skel-card--tx-hero .skel-blur .tx-morph.panel {

  border-radius: 14px;

}



/* Transaction day cards */

.tx-list-skeleton {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.skel-card--tx-day {

  margin: 0 12px;

  border-radius: 10px;

  outline: 1px solid var(--border);

  background: var(--surface);

}



.skel-card--tx-day:nth-child(even) {

  background: var(--surface-2);

}



.skel-card--tx-day .skel-blur .tx-day-group {

  margin: 0;

  outline: none;

  background: transparent;

  box-shadow: none;

}



.skel-card--tx-day .skel-blur .tx-day-group.is-open {

  border: none;

  margin: 0;

}



.skel-card--tx-day .skel-blur .tx-day-head {

  cursor: default;

}



/* Dashboard widgets */

.dash-screen--skeleton .dash-widgets {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.skel-card--dash {

  margin: 0 12px;

  border-radius: 10px;

  outline: 1px solid var(--border);

  background: var(--surface);

}



.skel-card--dash:nth-child(even) {

  background: var(--surface-2);

}



.skel-card--dash .skel-blur .dash-widget-group {

  margin: 0;

  outline: none;

  border: none;

  box-shadow: none;

  background: transparent;

}



.skel-card--dash .skel-blur .dash-widget-head {

  cursor: default;

}



/* Ghost chart / metrics inside dashboard */

.skel-ghost-chart {

  display: flex;

  align-items: flex-end;

  gap: 6px;

  height: 140px;

  padding: 8px 4px 0;

}



.skel-ghost-chart-bar {

  flex: 1;

  height: var(--h, 50%);

  min-height: 18px;

  border-radius: 6px 6px 2px 2px;

  background: color-mix(in srgb, var(--chart-net) 42%, var(--surface-2));

}



.skel-ghost-donut-row {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 8px 0;

}



.skel-ghost-donut {

  width: 112px;

  height: 112px;

  border-radius: 50%;

  flex-shrink: 0;

  background: conic-gradient(

    var(--chart-income) 0 38%,

    var(--chart-expense) 38% 68%,

    var(--chart-net) 68% 100%

  );

  mask: radial-gradient(circle, transparent 52%, #000 53%);

  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);

}



.skel-ghost-legend {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

  min-width: 0;

}



.skel-ghost-legend-row {

  display: grid;

  grid-template-columns: 10px 1fr auto;

  gap: 8px;

  align-items: center;

  font-size: 13px;

  color: var(--text-2);

}



.skel-ghost-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--chart-income);

}



.skel-ghost-legend-row:nth-child(2) .skel-ghost-dot {

  background: var(--chart-expense);

}



.skel-ghost-legend-row:nth-child(3) .skel-ghost-dot {

  background: var(--chart-net);

}



.skel-ghost-metrics {

  display: flex;

  gap: 8px;

  padding: 12px 0 4px;

}



.skel-ghost-metric {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 12px 10px;

  border-radius: 10px;

  background: var(--surface-2);

  font-size: 12px;

  color: var(--text-3);

}



.skel-ghost-metric strong {

  font-size: 15px;

  font-weight: 600;

  color: var(--text);

}



.skel-ghost-bars {

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 10px 0 4px;

}



.skel-ghost-bar-row {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 1.4fr auto;

  gap: 10px;

  align-items: center;

  font-size: 13px;

  color: var(--text-2);

}



.skel-ghost-bar-track {

  height: 8px;

  border-radius: 4px;

  background: var(--surface-2);

  overflow: hidden;

}



.skel-ghost-bar-track i {

  display: block;

  height: 100%;

  border-radius: inherit;

  background: color-mix(in srgb, var(--accent) 70%, var(--surface-2));

}



/* Bottom tx loading row */

.tx-list-loading .skel-card--tx-day {

  margin-top: 8px;

}



@media (prefers-reduced-motion: reduce) {
  .skel-blur {
    filter: blur(6px);
    transform: none;
  }

  .skel-reveal-veil {
    display: none;
  }

  .skel-exit {
    display: none;
  }
}