/* ==========================================================================
   Princess & Paladin — progress trackers
   /assets/pp-progress.css

   Load after pp.css, on any page that needs a progress display:
     <link rel="stylesheet" href="/assets/pp.css">
     <link rel="stylesheet" href="/assets/pp-progress.css">
     <script src="/assets/pp-progress.js" defer></script>

   Four shapes, all driven by the same two numbers:
     .pp-progress       a bar with a label     — runtimes, big totals
     .pp-progress-ring  a small circle         — corners of cards and tiles
     .pp-chips          labelled boxes         — EP 1, EP 2, EP 3 …
     .pp-pips           a row of plain dots    — small counts, no labels

   Uses the pp.css tokens, so it inherits the site palette automatically.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BAR
     <div class="pp-progress" data-current="4" data-total="10" data-label="Season 2"></div>

   Optional attributes:
     data-color="pink | sage | gold | burgundy"   default sage
     data-format="count | percent | both | none"  default count
   -------------------------------------------------------------------------- */

.pp-progress{
  --pp-fill: var(--sage-deep);
  display: block;
  width: 100%;
  min-width: 0;
}

.pp-progress-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.pp-progress-label{
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-progress-value{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.pp-progress-track{
  position: relative;
  height: 9px;
  background: rgba(46,36,31,0.10);
  border-radius: 999px;
  overflow: hidden;
}

.pp-progress-fill{
  height: 100%;
  width: 0;
  background: var(--pp-fill);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(.4,0,.2,1);
}

.pp-progress.is-complete .pp-progress-fill{
  background: linear-gradient(90deg, var(--sage-deep), var(--gold));
}
.pp-progress.is-complete .pp-progress-value{
  color: var(--gold-deep);
  font-weight: 600;
}

.pp-progress-sm .pp-progress-track{ height: 6px; }
.pp-progress-sm .pp-progress-head{ margin-bottom: 4px; }
.pp-progress-sm .pp-progress-label{ font-size: 0.66rem; }
.pp-progress-sm .pp-progress-value{ font-size: 0.8rem; }

.pp-progress[data-color="pink"]{     --pp-fill: var(--pink); }
.pp-progress[data-color="gold"]{     --pp-fill: var(--gold); }
.pp-progress[data-color="burgundy"]{ --pp-fill: var(--burgundy); }
.pp-progress[data-color="sage"]{     --pp-fill: var(--sage-deep); }

.pp-progress[data-color="pink"].is-complete .pp-progress-fill{
  background: linear-gradient(90deg, var(--pink), var(--gold));
}


/* --------------------------------------------------------------------------
   2. RING
     <div class="pp-progress-ring" data-current="3" data-total="8"></div>

   Sits in the corner of a card. Shows a percentage, or a check when done.
   Size it with data-size (default 46).
   -------------------------------------------------------------------------- */

.pp-progress-ring{
  --pp-fill: var(--sage-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.pp-progress-ring svg{ display: block; transform: rotate(-90deg); }
.pp-progress-ring .pp-ring-track{ stroke: rgba(46,36,31,0.12); fill: none; }
.pp-progress-ring .pp-ring-fill{
  stroke: var(--pp-fill);
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s cubic-bezier(.4,0,.2,1);
}

.pp-progress-ring .pp-ring-text{
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink);
}

.pp-progress-ring.is-complete{ --pp-fill: var(--gold); }
.pp-progress-ring.is-complete .pp-ring-text{ color: var(--gold-deep); font-size: 0.9rem; }

.pp-progress-ring[data-color="pink"]{     --pp-fill: var(--pink); }
.pp-progress-ring[data-color="gold"]{     --pp-fill: var(--gold); }
.pp-progress-ring[data-color="burgundy"]{ --pp-fill: var(--burgundy); }


/* --------------------------------------------------------------------------
   3. CHIPS
     <div class="pp-chips" data-current="4" data-total="12" data-chip-label="EP"></div>

   Draws one small labelled box per unit, however many there are — no cap.
   data-chip-label sets the word in front of the number; leave it off for
   bare numbers. Add data-clickable="true" to let a tap set the count: the
   element fires a "pp-progress-change" event with the new value.
   -------------------------------------------------------------------------- */

.pp-chips{
  --pp-fill: var(--sage-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.pp-chip{
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 5px 8px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.pp-chip.is-on{
  color: #fff;
  background: var(--pp-fill);
  border-color: var(--pp-fill);
}

.pp-chips[data-clickable="true"] .pp-chip{ cursor: pointer; }
.pp-chips[data-clickable="true"] .pp-chip:hover{
  transform: translateY(-1px);
  border-color: var(--pink);
}

/* The next one up — a soft outline so you can see where you are */
.pp-chip.is-next{
  border-color: var(--pink);
  border-style: dashed;
  color: var(--pink-deep);
}

.pp-chips[data-color="pink"]{     --pp-fill: var(--pink); }
.pp-chips[data-color="gold"]{     --pp-fill: var(--gold); }
.pp-chips[data-color="burgundy"]{ --pp-fill: var(--burgundy); }


/* --------------------------------------------------------------------------
   4. PIPS
     <div class="pp-pips" data-current="5" data-total="10"></div>

   Plain unlabelled dots, for when the numbers don't matter. Collapses to a
   count past fifteen — use .pp-chips when you want every one labelled.
   -------------------------------------------------------------------------- */

.pp-pips{
  --pp-fill: var(--sage-deep);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.pp-pip{
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pp-pip.is-on{ background: var(--pp-fill); border-color: var(--pp-fill); }

.pp-pips[data-clickable="true"] .pp-pip{ cursor: pointer; }
.pp-pips[data-clickable="true"] .pp-pip:hover{ transform: scale(1.25); }

.pp-pips[data-color="pink"]{ --pp-fill: var(--pink); }
.pp-pips[data-color="gold"]{ --pp-fill: var(--gold); }

.pp-pips-more{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-left: 2px;
}


/* --------------------------------------------------------------------------
   5. STACK
   Several bars in a row, e.g. one per season.
   -------------------------------------------------------------------------- */

.pp-progress-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}


@media (prefers-reduced-motion: reduce){
  .pp-progress-fill,
  .pp-progress-ring .pp-ring-fill,
  .pp-chip,
  .pp-pip{ transition: none; }
}