/* Water tracker widget: tap glasses toward a daily goal. Tokens from _shared/embed.css. */

.wt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  height: 100%;
  min-height: 0;
  font-size: clamp(9px, min(3.6vw, 9vh), 18px);
}

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

.wt-glasses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  max-width: 100%;
}

.wt-glass {
  appearance: none;
  display: flex;
  margin: 0;
  padding: 0.1em;
  border: 0;
  border-radius: 0.3em;
  background: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.wt-glass:hover {
  transform: translateY(-0.08em);
}

.wt-glass:active {
  transform: scale(0.9);
}

.wt-glass:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.wt-glass-icon {
  width: 1.55em;
  height: 1.95em;
}

.wt-outline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.wt-water {
  fill: var(--track);
  transform-origin: 50% 100%;
  transition: fill 0.2s ease;
}

.wt-glass.on .wt-water {
  fill: var(--accent);
  animation: wt-fill 0.35s ease-out;
}

.wt-glass.on .wt-outline {
  stroke: var(--accent);
}

:root[data-style="neon"] .wt-glass.on .wt-glass-icon {
  filter: drop-shadow(0 0 3px var(--accent));
}

@keyframes wt-fill {
  from {
    transform: scaleY(0.2);
  }
}

.wt-extra {
  margin-left: 0.2em;
  font-size: 0.9em;
  font-weight: 750;
}

.wt-line {
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

.wt.is-done .wt-line {
  color: var(--accent);
}

.wt-controls {
  display: flex;
  gap: 0.4em;
}

.wt-controls .px-btn {
  font-size: 0.9em;
}

.wt-week {
  display: flex;
  align-items: flex-end;
  gap: 0.35em;
  height: 2.6em;
}

.wt-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  height: 100%;
}

.wt-bar {
  position: relative;
  flex: 1;
  width: 0.7em;
  overflow: hidden;
  border-radius: 0.2em;
  background: var(--track);
}

.wt-bar-fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--p, 0) * 100%);
  background: var(--accent);
}

.wt-wd {
  font-size: 0.6em;
  font-weight: 600;
}

.wt-day.is-today .wt-wd {
  color: var(--accent);
}

.wt-note {
  font-size: 0.65em;
}

/* Short embeds: glasses on one line, the rest beside them. */
@media (max-height: 130px) {
  .wt-week {
    display: none;
  }
}