/* ReadJutsu — public frontend styles */

:root {
  --readjutsu-badge-bg:        #0069FF;
  --readjutsu-badge-color:     #ffffff;
  --readjutsu-progress-bar:    #0069FF;
  --readjutsu-progress-bg:     rgba(0, 105, 255, 0.12);
  --readjutsu-progress-height: 3px;
}

/* ── Progress bar ───────────────────────────────────────────────────────────── */

.readjutsu-progress {
  position: fixed;
  left:   0;
  right:  0;
  height: var(--readjutsu-progress-height);
  background: var(--readjutsu-progress-bg);
  z-index: 9999;
  transition: opacity 300ms ease;
}

.readjutsu-progress--top    { top:    0; }
.readjutsu-progress--bottom { bottom: 0; }

.admin-bar .readjutsu-progress--top { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .readjutsu-progress--top { top: 46px; }
}

/* ── Vertical bar ────────────────────────────────────────────────────────────── */

.readjutsu-progress--left,
.readjutsu-progress--right {
  top:    0;
  bottom: 0;
  left:   auto;
  right:  auto;
  height: auto;
  width:  var(--readjutsu-progress-height);
}

.readjutsu-progress--left  { left:  0; }
.readjutsu-progress--right { right: 0; }

.admin-bar .readjutsu-progress--left,
.admin-bar .readjutsu-progress--right { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .readjutsu-progress--left,
  .admin-bar .readjutsu-progress--right { top: 46px; }
}

.readjutsu-progress--left  .readjutsu-progress__bar,
.readjutsu-progress--right .readjutsu-progress__bar {
  width:      100%;
  height:     0%;
  position:   absolute;
  bottom:     0;
  transition: height 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .readjutsu-progress--left  .readjutsu-progress__bar,
  .readjutsu-progress--right .readjutsu-progress__bar { transition: none; }
}

.readjutsu-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--readjutsu-progress-bar);
  transition: width 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .readjutsu-progress__bar { transition: none; }
}

/* ── Badge — shared ─────────────────────────────────────────────────────────── */

.readjutsu-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  line-height: 1;
  width: fit-content;
}

.readjutsu-badge__icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.readjutsu-badge__label {
  font-weight: 500;
}

.readjutsu-badge__time {
  font-weight: 700;
}

.readjutsu-badge__unit {
  opacity: 0.85;
}

/* ── Badge — Pill ───────────────────────────────────────────────────────────── */

.readjutsu-badge--pill {
  background:    var(--readjutsu-badge-bg);
  color:         var(--readjutsu-badge-color);
  border-radius: 999px;
  padding:       5px 12px;
  margin-bottom: 1em;
}

/* ── Badge — Minimal ────────────────────────────────────────────────────────── */

.readjutsu-badge--minimal {
  color:         var(--readjutsu-badge-bg);
  margin-bottom: 1em;
}

/* ── Badge — Inline ─────────────────────────────────────────────────────────── */

.readjutsu-badge--inline {
  color:         var(--readjutsu-badge-bg);
  font-style:    italic;
  margin-bottom: 0.5em;
}

/* ── Block wrapper ───────────────────────────────────────────────────────────── */

.wp-block-readjutsu-reading-time {
  display: flex;
}

.wp-block-readjutsu-reading-time.is-vertically-aligned-top    { align-self: flex-start; }
.wp-block-readjutsu-reading-time.is-vertically-aligned-center { align-self: center; }
.wp-block-readjutsu-reading-time.is-vertically-aligned-bottom { align-self: flex-end; }

.wp-block-readjutsu-reading-time.has-text-align-left   { justify-content: flex-start; }
.wp-block-readjutsu-reading-time.has-text-align-center { justify-content: center; }
.wp-block-readjutsu-reading-time.has-text-align-right  { justify-content: flex-end; }
