/* ==========================================================================
   Salafi Prayer Times — label view
   Tiny chips for a navbar, toolbar or page hero. Two variants:
     .spt-label--pill  one compact pill: next prayer + its time
     .spt-label--row   a slim row of mini chips, one per prayer
   Depends on tokens.css. The next prayer is marked by weight and the well —
   never by colour — unless the instance sets an accent.
   ========================================================================== */

.spt-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  line-height: 1;
}

/* ----- The pill ----------------------------------------------------------- */
.spt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--spt-well);
  border: 1px solid var(--spt-line);
  border-radius: var(--spt-r-pill);
  color: var(--spt-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* On glass-capable browsers the pill turns translucent over imagery */
@supports (backdrop-filter: blur(1px)) {
  .spt[data-theme="dark"] .spt-pill {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

a.spt-pill:hover {
  background: var(--spt-accent-well);
}

.spt-pill-date {
  color: var(--spt-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-right: 0.5rem;
  border-right: 1px solid var(--spt-line);
}

.spt-pill-icon {
  display: inline-flex;
  align-items: center;
  color: var(--spt-accent);
}

.spt-pill-icon svg {
  font-size: 0.95rem;
}

.spt-pill-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.spt-pill-kind {
  color: var(--spt-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spt-pill-time {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--spt-accent);
}

/* ----- The row: ONE segmented pill, hairline-divided, like the next-prayer
   pill grown to hold all six prayers -------------------------------------- */
.spt-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--spt-well);
  border: 1px solid var(--spt-line);
  border-radius: var(--spt-r-pill);
}

@supports (backdrop-filter: blur(1px)) {
  .spt[data-theme="dark"] .spt-chips {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.spt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--spt-r-pill);
  white-space: nowrap;
  position: relative;
}

/* Hairline separators between segments */
.spt-chip + .spt-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1rem;
  background: var(--spt-line);
}

.spt-chip--date {
  color: var(--spt-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.spt-chip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--spt-muted);
}

.spt-chip-icon svg {
  font-size: 0.85rem;
}

.spt-chip-name {
  color: var(--spt-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.spt-chip-time {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* times="both": the adhān reads quieter, the jamā'ah carries the weight */
.spt-chip-time.is-secondary {
  color: var(--spt-muted);
  font-weight: 600;
}

.spt-chip-dot {
  color: var(--spt-faint);
  font-size: 0.72rem;
}

/* The next prayer: a pill inside the pill — the accent well plus weight */
.spt-chip.is-next {
  background: var(--spt-accent-well);
}

.spt-chip.is-next::before,
.spt-chip.is-next + .spt-chip::before {
  background: transparent; /* the well replaces the separators around it */
}

.spt-chip.is-next .spt-chip-icon,
.spt-chip.is-next .spt-chip-time {
  color: var(--spt-accent);
}

.spt-chip.is-next .spt-chip-name {
  color: var(--spt-text);
  font-weight: 700;
}

.spt-chip.is-next .spt-chip-time {
  font-weight: 800;
}

/* On the light default the inner well needs a step darker than the bar */
.spt-chips .spt-chip.is-next {
  box-shadow: inset 0 0 0 1px var(--spt-line);
}


/* ----- Stacked pills: the moment the bar cannot hold one line ---------------
   One segmented pill is right when it fits on a line; when it can't, ragged
   wrapping with orphaned separators is worse than separate pills. The JS
   measures the bar against the space it has (any screen size, any column)
   and adds is-stacked the moment it would wrap: a 2-up grid of individual
   pills — date full-width, names left, times pushed right so the columns
   align. One pill per line on the narrowest screens. No sideways scrolling,
   ever. */
.spt-chips.spt-measuring {
  flex-wrap: nowrap; /* momentary, JS measurement only */
}

.spt-label--row.is-stacked {
  display: block;
}

.spt-label--row.is-stacked .spt-chips {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}

.spt-label--row.is-stacked .spt-chip {
  background: var(--spt-well);
  border: 1px solid var(--spt-line);
  border-radius: var(--spt-r-pill);
  min-width: 0;
  padding: 0.5rem 0.75rem;
}

.spt-label--row.is-stacked .spt-chip + .spt-chip::before {
  display: none; /* pills carry their own edges; no orphaned separators */
}

/* Names hug the left, every time aligns right — two clean columns */
.spt-label--row.is-stacked .spt-chip-name {
  margin-right: auto;
}

.spt-label--row.is-stacked .spt-chip--date {
  grid-column: 1 / -1;
  justify-content: center;
}

.spt-label--row.is-stacked .spt-chip.is-next {
  background: var(--spt-accent-well);
}

@media (max-width: 380px) {
  .spt-label--row.is-stacked .spt-chips {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .spt-label--row.is-stacked[data-spt-format="ampm"] .spt-chips {
    grid-template-columns: minmax(0, 1fr);
  }
}