/*
  The top bar badge and its panel, from the streaks mockup (`/mnt/project-files/streaks/trophies`).
  It sits in the header's `[ds]` root, so every colour is a `--ds-*` token.

  The element itself draws no box: hidden, the badge takes no gap in the header's row.
*/

atomics-streak-badge {
  display: contents;
  /* The mockup's grey glass for the panel's tiles: `--ds-fill` is the panel's own colour in the dark. */
  --streak-tile: rgba(127, 127, 127, 0.13);
}

/* Every property, because app.css styles bare buttons. */
atomics-streak-badge [badge] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  height: 28px;
  margin: 0;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 99px;
  background: var(--ds-fill);
  color: var(--ds-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

atomics-streak-badge [badge][hidden] {
  display: none;
}

atomics-streak-badge [badge]:hover {
  background: var(--ds-accent-soft);
}

atomics-streak-badge [badge]:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

atomics-streak-badge [badge][aria-expanded='true'] {
  box-shadow: 0 0 0 2px var(--ds-accent);
}

/* The flame: filled once today counts, outlined until then, grey once the streak has ended. */
atomics-streak-badge [flame] {
  flex: 0 0 auto;
  color: var(--ds-accent);
}

atomics-streak-badge [flame] path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

atomics-streak-badge [badge][data-s='counted'] [flame] path {
  fill: currentColor;
  stroke: none;
}

atomics-streak-badge [badge]:is([data-s='pending'], [data-s='ended']) [flame],
atomics-streak-badge [badge][data-s='ended'] b {
  color: var(--ds-mute);
}

atomics-streak-badge [badge-best] {
  color: var(--ds-mute);
  font-weight: 500;
}

/* A new best tints the badge blue. */
atomics-streak-badge [badge][data-best] {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-ink);
}

atomics-streak-badge [badge][data-best] [badge-best] {
  color: var(--ds-accent-ink);
  opacity: 0.75;
}

/*
  The panel. Hidden unless the element is `[open]`: a popover's own hiding is the browser's
  lowest-priority rule, and the `display` below would otherwise show a closed one.
*/
atomics-streak-badge [pop] {
  display: none;
}

atomics-streak-badge[open] [pop] {
  position: fixed;
  inset: auto;
  z-index: 10003;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  width: 280px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--ds-popover);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-pop);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-size: 13.5px;
  line-height: 1.3;
  animation: atomics-streak-pop-in 140ms var(--ds-ease-pop, ease) both;
}

@keyframes atomics-streak-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

atomics-streak-badge [pop-figs] {
  display: flex;
  gap: 8px;
}

atomics-streak-badge [pop-figs] > div {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--streak-tile);
}

atomics-streak-badge [pop-figs] small {
  color: var(--ds-mute);
  font-size: 11.5px;
}

atomics-streak-badge [pop-figs] b {
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

atomics-streak-badge [pop-figs] em {
  margin-left: 3px;
  color: var(--ds-mute);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

/* This week, as on the Activity card, a size smaller. */
atomics-streak-badge [week] {
  display: flex;
  gap: 6px;
}

atomics-streak-badge [day] {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ds-mute);
  font-size: 11px;
}

atomics-streak-badge [day][today] {
  color: var(--ds-ink);
  font-weight: 700;
}

atomics-streak-badge [dot] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--streak-tile);
}

atomics-streak-badge [dot][data-s='counted'] {
  background: var(--ds-accent);
  color: #ffffff;
}

atomics-streak-badge [dot][data-s='pending'] {
  background: transparent;
  outline: 1.5px dashed var(--ds-line-strong);
  outline-offset: -1.5px;
}

/* Days to come, and days before the first one ever counted: blank, as the year's squares draw them. */
atomics-streak-badge [dot]:is([data-s='future'], [data-s='none']) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ds-line);
}

atomics-streak-badge [pop-status] {
  margin: 0;
  color: var(--ds-ink2);
  font-size: 12.5px;
  line-height: 1.45;
}

atomics-streak-badge [pop-link] {
  align-self: flex-start;
  color: var(--ds-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

atomics-streak-badge [pop-link]:hover {
  text-decoration: underline;
}

/* Phone: the current count alone, at the header's touch height. */
@media (max-width: 720px) {
  atomics-streak-badge [badge] {
    height: 32px;
  }

  atomics-streak-badge [badge-best] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  atomics-streak-badge[open] [pop] {
    animation: none;
  }
}