/* pacer.css — SHARED PACER learning layer (AGENT P1)
   Owns the `.p-*` namespace + the five PACER colour tokens. Linked globally
   by layout.mjs. Consumes base tokens from styles.css (--bg --fg --muted
   --card --border --accent) so it is dark/light-safe with no redefinition.
   Colour tokens MUST match meta.pacer[*].colour (lib/pacer.mjs). */

:root {
  --p-conceptual: #8b5cf6;
  --p-analogous: #14b8a6;
  --p-procedural: #f59e0b;
  --p-reference: #ec4899;
  --p-evidence: #64748b;
}

/* Each badge/chip resolves its type colour via a local --p-c custom prop so
   we can style the whole namespace generically off one variable. */
.p-badge--conceptual,
.p-chip--conceptual,
.p-mono--conceptual,
.p-filter-btn--conceptual { --p-c: var(--p-conceptual); }
.p-badge--analogous,
.p-chip--analogous,
.p-mono--analogous,
.p-filter-btn--analogous { --p-c: var(--p-analogous); }
.p-badge--procedural,
.p-chip--procedural,
.p-mono--procedural,
.p-filter-btn--procedural { --p-c: var(--p-procedural); }
.p-badge--reference,
.p-chip--reference,
.p-mono--reference,
.p-filter-btn--reference { --p-c: var(--p-reference); }
.p-badge--evidence,
.p-chip--evidence,
.p-mono--evidence,
.p-filter-btn--evidence { --p-c: var(--p-evidence); }

/* ---------- PACER letter monogram ----------
   Small circular badge with the type's initial (C/A/P/R/E) on the type's
   colour token — the site-wide replacement for the old type emojis. Colour
   comes from --p-c (set by .p-mono--<type> or a parent .p-badge--<type>) or
   an inline `background` where a hex colour is passed at render time. */
.p-mono {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  background: var(--p-c, var(--accent));
  color: #fff;
}

/* ---------- PACER box (concept page) ---------- */
.p-box {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--p-c, var(--accent));
  border-radius: var(--radius, 10px);
}
.p-box-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- PACER badge (pill w/ monogram + label) ---------- */
.p-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--p-c, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--p-c, var(--accent)) 16%, transparent);
  color: color-mix(in srgb, var(--p-c, var(--accent)) 72%, var(--fg));
  line-height: 1.2;
}

/* Secondary badge — smaller, softer. */
.p-badge--secondary {
  font-size: 0.7rem;
  padding: 0.14rem 0.55rem;
  opacity: 0.9;
}
.p-badge--secondary::before {
  content: "+";
  font-weight: 700;
  opacity: 0.7;
}

/* ---------- "How to study this" tip callout ---------- */
.p-howto {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  color: var(--fg);
  background: color-mix(in srgb, var(--p-c, var(--accent)) 8%, transparent);
  border-radius: 8px;
}
.p-howto strong { color: color-mix(in srgb, var(--p-c, var(--accent)) 70%, var(--fg)); }

/* ---------- Affordance buttons row ---------- */
.p-affordances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.p-af {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, background 0.15s ease;
}
.p-af:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  text-decoration: none;
}
.p-understood[aria-pressed="true"] {
  background: var(--d-green, #16a34a);
  border-color: var(--d-green, #16a34a);
  color: #fff;
}
.p-af-due {
  font-size: 0.85rem;
  color: var(--muted);
  align-self: center;
}

/* ---------- Steps flow panel ---------- */
.p-steps {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem;
  counter-reset: p-step;
}
.p-steps[hidden] { display: none; }
.p-steps li {
  counter-increment: p-step;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  padding: 0.4rem 0.7rem 0.4rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.p-steps li::before {
  content: counter(p-step);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  background: color-mix(in srgb, var(--p-procedural) 20%, transparent);
  color: color-mix(in srgb, var(--p-procedural) 78%, var(--fg));
}
/* Arrow between step chips (not after the last). */
.p-steps li:not(:last-child)::after {
  content: "→";
  margin-left: 0.15rem;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- Per-domain PACER count chips ---------- */
.p-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.p-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--p-c, var(--accent)) 40%, transparent);
  background: color-mix(in srgb, var(--p-c, var(--accent)) 12%, transparent);
  color: color-mix(in srgb, var(--p-c, var(--accent)) 70%, var(--fg));
  text-decoration: none;
  cursor: pointer;
}
.p-chip:hover { filter: brightness(1.05); text-decoration: none; }
.p-chip-n { font-weight: 800; }
.p-chip--empty { opacity: 0.45; }

/* ---------- Study-path checklist ("Learn this domain") ---------- */
.p-path { margin: 0.5rem 0 1.5rem; }
.p-path-group {
  margin: 0.9rem 0 0;
}
.p-path-group > .p-badge { margin-bottom: 0.4rem; }
.p-path-list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.p-path-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
}
.p-path-item:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.p-path-check {
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--p-c, var(--accent));
}
.p-mini {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  line-height: 1;
}

/* ---------- PACER filter control ---------- */
.p-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0.9rem;
}
.p-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.p-filter-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--p-c, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--p-c, var(--accent)) 16%, transparent);
  color: color-mix(in srgb, var(--p-c, var(--accent)) 72%, var(--fg));
}
.p-filter-btn--all[aria-pressed="true"] {
  --p-c: var(--accent);
}
/* Hidden by an active filter. */
.p-hidden { display: none !important; }

/* ---------- Topbar meters (markup already in layout) ---------- */
.c-meter {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--muted);
}
.c-meter--u { color: color-mix(in srgb, var(--p-conceptual) 72%, var(--fg)); }
.c-meter--m { color: color-mix(in srgb, var(--p-reference) 72%, var(--fg)); }
.c-meter--u { border-color: color-mix(in srgb, var(--p-conceptual) 40%, transparent); }
.c-meter--m { border-color: color-mix(in srgb, var(--p-reference) 40%, transparent); }