/* Life calendar widget. Tokens from _shared/embed.css. */

.lf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  width: 100%;
  height: 100%;
  min-height: 0;
  font-size: clamp(9px, min(3.6vw, 6vh), 16px);
}

.lf-title {
  max-width: 100%;
  overflow: hidden;
  color: var(--fg);
  font-size: 1em;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The grid fills whatever height the title and the numbers leave. */
.lf-stage {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.lf-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lf-empty {
  position: relative;
}

.lf-past {
  fill: var(--accent);
}

.lf-future {
  fill: var(--track);
}

.lf-now {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 2;
  animation: lf-blink 1.4s ease-in-out infinite;
}

:root[data-style="neon"] .lf-past,
:root[data-style="neon"] .lf-now {
  filter: drop-shadow(0 0 1.5px var(--accent));
}

:root[data-style="paper"] .lf-past {
  fill: color-mix(in srgb, var(--accent) 80%, var(--fg));
}

@keyframes lf-blink {
  50% {
    opacity: 0.35;
  }
}

.lf-stats {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.82em;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lf-empty {
  margin: 0;
  padding: 0 8%;
  font-size: clamp(11px, min(4vw, 12vh), 15px);
  text-align: center;
}