/* ============================================================
   Cricket player tags guide — sample tag card, level chips,
   style maps, style cards and the level ladder.
   Loads after guide.css. Semantic tokens only.
   ============================================================ */

/* ---- Style tiers: one class sets the tier colours for any chip or badge ---- */

.tag-tier--top     { --tier-from: var(--color-tag-top-from);     --tier-to: var(--color-tag-top-to); }
.tag-tier--attack  { --tier-from: var(--color-tag-attack-from);  --tier-to: var(--color-tag-attack-to); }
.tag-tier--control { --tier-from: var(--color-tag-control-from); --tier-to: var(--color-tag-control-to); }
.tag-tier--steady  { --tier-from: var(--color-tag-steady-from);  --tier-to: var(--color-tag-steady-to); }
.tag-tier--rising  { --tier-from: var(--color-tag-rising-from);  --tier-to: var(--color-tag-rising-to); }

/* ---- Tag chips: style name + level, coloured by style tier ---- */

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  background: linear-gradient(90deg, var(--tier-from), var(--tier-to));
  color: var(--color-on-tag);
  border: thin solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  white-space: nowrap;
}

.tag-chip__level {
  padding: 0 var(--space-2);
  background: color-mix(in srgb, var(--color-on-tag) 22%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
}

.tag-chip--unranked {
  padding-right: var(--space-3);
  background: var(--color-surface);
  color: var(--color-tag-unranked);
  border-color: var(--color-border-neutral);
}

/* ---- Level pips ---- */

.level-pips {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
}

.level-pips__dots {
  display: inline-flex;
  gap: var(--space-1);
}

.level-pips__dot {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border: var(--border-width-default) solid var(--color-text-muted);
  border-radius: var(--radius-pill);
}

.level-pips__dot--on {
  background: var(--color-text);
  border-color: var(--color-text);
}

.level-pips__label { margin-left: var(--space-1); }

/* ---- Styles at a glance ---- */

.tier-legend {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  list-style: none;
}

.tier-legend__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.tier-legend__item strong { color: var(--color-text); }

.tier-legend__swatch {
  width: 3rem;
  height: 1.5rem;
  background: linear-gradient(90deg, var(--tier-from), var(--tier-to));
  border-radius: var(--radius-pill);
}

.tag-roster__heading {
  margin: var(--space-8) 0 var(--space-4);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tag-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
}

.tag-roster__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  height: 100%;
  min-height: 6.5rem;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--tier-from), var(--tier-to));
  color: var(--color-on-tag);
  border-radius: var(--radius-md);
}

.tag-roster__card:hover { box-shadow: var(--shadow-card); }

.guide-section a.tag-roster__card { font-weight: var(--font-weight-regular); }

.tag-roster__name {
  font-size: 1rem;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.3;
}

.tag-roster__tier {
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  opacity: 0.85;
}

/* ---- Sample tag card (hero) ---- */

.tag-demo {
  display: grid;
  gap: var(--space-4);
  max-width: 52rem;
  margin: var(--space-8) auto 0;
}

.tag-demo__card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.tag-demo__role {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tag-demo__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.tag-demo__meaning {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.tag-demo__scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tag-score {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  text-align: center;
}

.tag-score__value {
  display: block;
  color: var(--color-text);
  font-size: 1.35rem;
  font-weight: var(--font-weight-black);
  line-height: 1.2;
}

.tag-score__label {
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: var(--font-weight-semibold);
}

.tag-demo__stats {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: var(--font-weight-semibold);
}

.tag-demo__next {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
}

.tag-progress {
  display: block;
  width: 100%;
  height: var(--space-2);
  overflow: hidden;
  background: var(--color-surface-muted);
  border: 0;
  border-radius: var(--radius-pill);
  appearance: none;
}

.tag-progress::-webkit-progress-bar { background: var(--color-surface-muted); }
.tag-progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-pill); }
.tag-progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-pill); }

/* ---- Style maps (inline SVG) ---- */

.style-map {
  max-width: 34rem;
  margin: var(--space-6) auto;
}

.style-map svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-md);
}

.style-map figcaption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.65;
  text-align: center;
}

.style-map__zone--top     { fill: var(--color-tag-top-subtle); }
.style-map__zone--rising  { fill: var(--color-tag-rising-subtle); }
.style-map__stop--red     { stop-color: var(--color-tag-top-subtle); }
.style-map__stop--gold    { stop-color: var(--color-tag-gold-subtle); }
.style-map__stop--teal    { stop-color: var(--color-tag-steady-subtle); }
.style-map__band         { fill: var(--color-tag-steady-subtle); stroke: var(--color-tag-steady-from); stroke-dasharray: 4 4; }
.style-map__par          { stroke: var(--color-primary); stroke-width: 2; }
.style-map__frame        { fill: none; stroke: var(--color-border-neutral); }
.style-map__zone-label   { fill: var(--color-text); font-weight: var(--font-weight-extrabold); }
.style-map__zone-label--halo { paint-order: stroke; stroke: var(--color-surface); stroke-width: 3; }
.style-map__tick         { fill: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.style-map__axis         { fill: var(--color-text-muted); font-weight: var(--font-weight-bold); }
.style-map__point        { fill: var(--color-text); stroke: var(--color-surface); stroke-width: 2; }
.style-map__point-label  { fill: var(--color-text); font-weight: var(--font-weight-bold); }

/* ---- Style cards ---- */

.style-grid {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.style-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + var(--space-2));
  background: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-margin-top: 5rem;
}

.guide-section--alt .style-card { background: var(--color-surface); }

.style-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-2);
  background: linear-gradient(90deg, var(--tier-from), var(--tier-to));
}

.style-card:target {
  border-color: var(--tier-from);
  box-shadow: var(--shadow-card);
}

.style-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.style-card__tier {
  color: var(--tier-from);
  font-size: 0.82rem;
  font-weight: var(--font-weight-bold);
}

.guide-section .style-card__tier { margin-bottom: 0; }

.style-card__name {
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: var(--font-weight-black);
}

.style-card__zone {
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.style-card__meaning {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
}

.guide-section .style-card__meaning { color: var(--color-text); }

.style-card__facts {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.style-card__fact {
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.style-card__fact-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-section .style-card__fact p {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ---- Level ladder ---- */

.level-ladder {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  list-style: none;
}

.level-ladder__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: thin solid var(--color-border);
  border-radius: var(--radius-md);
}

.level-ladder__badge {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  font-size: 1.05rem;
  font-weight: var(--font-weight-black);
}

.level-ladder__badge--l0 { background: var(--color-level-0-bg); color: var(--color-level-0-fg); border: thin solid var(--color-border-neutral); }
.level-ladder__badge--l1 { background: var(--color-level-1-bg); color: var(--color-level-1-fg); }
.level-ladder__badge--l2 { background: var(--color-level-2-bg); color: var(--color-level-2-fg); }
.level-ladder__badge--l3 { background: var(--color-level-3-bg); color: var(--color-level-3-fg); }
.level-ladder__badge--l4 { background: var(--color-level-4-bg); color: var(--color-level-4-fg); }
.level-ladder__badge--l5 { background: var(--color-level-5-bg); color: var(--color-level-5-fg); box-shadow: 0 0 0 var(--space-1) var(--color-tag-gold-subtle); }

.level-ladder__title {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: var(--font-weight-extrabold);
}

.level-ladder__text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.guide-section .level-ladder__title,
.guide-section .level-ladder__text { margin-bottom: 0; }

/* ---- Formula blocks ---- */

.formula {
  display: block;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  background: var(--color-surface-inverse);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.7;
  white-space: nowrap;
}

/* ---- Breakpoints: md 640px · lg 768px ---- */

@media (min-width: 640px) {
  .tag-roster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .tier-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tag-demo__card { padding: var(--space-5); }
  .style-card { padding: var(--space-5); padding-top: calc(var(--space-5) + var(--space-2)); }
}