/* Entity chips in wiki prose. Colours match the graph legend. Calm by design:
   type-coloured label with a link-like underline and a faint background that
   strengthens on hover, a small trailing type emoji, no bullet dot.
   Renderer: build-time rustkyll `chips` extension.

   NOTE: the theme colours/underlines prose links via `.knowledge-page p a`
   (specificity 0,1,2) and `.knowledge-page p a:hover` (0,2,2). The doubled
   `.chip.chip` selectors below out-rank those so chips keep their type colour. */

.chip {
  --chip: #64748b;
  display: inline;
  font-weight: 500;
  border-radius: 0.18em;
  padding: 0.02em 0.1em;
  background: color-mix(in srgb, var(--chip) 6%, transparent);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--chip) 70%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  transition: background-color 0.15s ease, text-decoration-color 0.15s ease;
}

/* type colour for text + visible link underline, in every state
   (doubled class out-ranks the theme's prose-link rules) */
.chip.chip,
.chip.chip:hover,
.chip.chip:focus,
.chip.chip:active {
  color: var(--chip);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--chip) 70%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.chip.chip:hover,
.chip.chip:focus {
  background: color-mix(in srgb, var(--chip) 11%, transparent);
  text-decoration-color: currentColor;
}

/* trailing type emoji — makes the entity kind obvious at a glance.
   wiki (the vast majority) stays calm with no emoji. */
.chip::after {
  margin-left: 0.22em;
  font-size: 0.8em;
  opacity: 0.55;
  vertical-align: 0.02em;
}
.chip--podcast::after { content: "\1F399\FE0F"; } /* studio microphone */
.chip--person::after  { content: "\1F464"; }      /* bust in silhouette */
.chip--book::after    { content: "\1F4D6"; }      /* open book */
.chip--event::after   { content: "\1F4C5"; }      /* calendar */

/* podcast timestamp badge — sits after the emoji */
.chip .chip-time {
  margin-left: 0.3em;
  color: var(--chip);
  font-weight: 700;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.chip .chip-time::before {
  content: "\00B7 ";
  opacity: 0.55;
}

/* per-type accent (matches graph node colours) */
.chip--wiki { --chip: #2c573e; }
.chip--podcast { --chip: #52677a; }
.chip--person { --chip: #7c3aed; }
.chip--book { --chip: #2563eb; }
.chip--event { --chip: #dc2626; }

html.dark .chip--wiki { --chip: #8ed8ad; }
html.dark .chip--podcast { --chip: #9fb2c4; }
html.dark .chip--person { --chip: #c4a2f5; }
html.dark .chip--book { --chip: #7fb0ff; }
html.dark .chip--event { --chip: #f87171; }

/* Compact citation markers for podcast evidence. Use these when the source
   should read like a citation rather than as a visible entity chip. */
.citation {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.16em;
}

.citation::before {
  content: "[";
  color: var(--muted);
  font-weight: 700;
}

.citation::after {
  content: "]";
  color: var(--muted);
  font-weight: 700;
}

.citation .citation-link,
.citation .citation-link:hover,
.citation .citation-link:focus,
.citation .citation-link:active {
  color: #52677a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.citation .citation-link:hover,
.citation .citation-link:focus {
  color: #2f4558;
  text-decoration-color: currentColor;
}

html.dark .citation .citation-link,
html.dark .citation .citation-link:hover,
html.dark .citation .citation-link:focus,
html.dark .citation .citation-link:active {
  color: #9fb2c4;
}