/**
 * components/compendium-card/compendium-card.css
 * Relies on design tokens (--surface, --border, --text-muted,
 * --type-word/theme/concept, etc.) defined in the-compendium.php's
 * own :root — this file doesn't redeclare them.
 */

.cp-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--type-word);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: .9rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .2s;
}
.cp-entry-has-thumb { background-size: cover; background-position: center; background-repeat: no-repeat; }
.cp-entry-has-thumb .cp-entry-word { color: #fff; }
.cp-entry:hover                       { border-color: var(--type-word); box-shadow: 0 0 0 1px var(--type-word), 0 0 18px rgba(222,184,45,.35); }
.cp-entry[data-type="theme"]:hover    { border-color: var(--type-theme); box-shadow: 0 0 0 1px var(--type-theme), 0 0 18px rgba(77,159,255,.35); }
.cp-entry[data-type="concept"]:hover  { border-color: var(--type-concept); box-shadow: 0 0 0 1px var(--type-concept), 0 0 18px rgba(168,85,247,.35); }
.cp-entry[data-type="theme"]   { border-left-color: var(--type-theme); }
.cp-entry[data-type="concept"] { border-left-color: var(--type-concept); }

.cp-entry-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .5rem;
}
.cp-entry-word {
  flex: 1; min-width: 0;
  font-family: var(--fd, inherit); font-size: 1.15rem; font-weight: 900;
  color: var(--text); letter-spacing: -.01em;
}
.cp-pinned-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; color: var(--type-word);
  background: rgba(222,184,45,.15); border: 1px solid rgba(222,184,45,.3);
}

.cp-entry-type-badge {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
}
.cp-type-word    { background: rgba(222,184,45,.2);  color: var(--type-word); }
.cp-type-theme   { background: rgba(77,159,255,.2);  color: var(--type-theme); }
.cp-type-concept { background: rgba(168,85,247,.2);  color: var(--type-concept); }
/* Over a thumbnail, a 10%-opacity tint isn't enough backdrop for
   reliable contrast regardless of what's in the image — give the
   badge a solid dark chip behind it instead, keeping the colored text. */
.cp-entry-has-thumb .cp-type-word,
.cp-entry-has-thumb .cp-type-theme,
.cp-entry-has-thumb .cp-type-concept {
  background: rgba(10,12,16,.75);
}

.cp-entry-definition {
  font-size: 14px; line-height: 1.65; color: var(--text-muted);
  margin-bottom: .75rem;
}

.cp-entry-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  border-top: 1px solid var(--border);
  padding-top: .65rem;
  margin-bottom: .75rem;
}
.cp-entry-tags-label {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.cp-tag-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.cp-tag-chip {
  display: inline-flex;
  font-size: 12px; font-weight: 700; color: #4d9fff;
  border-radius: 20px; padding: .2rem .7rem;
  background: rgba(77,159,255,.1); border: 1px solid rgba(77,159,255,.2);
}
.tag-hash { margin-right: 2px; opacity: .65; }

/* See Also — same row shape as Tags, colored to read as "links
   elsewhere" (entry's own type color) rather than plain descriptive
   metadata (which stays neutral gray, per .cp-tag-chip above). */
.cp-entry-related {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  border-top: 1px solid var(--border);
  padding-top: .65rem;
}
.cp-entry-related-label {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.cp-related-pills { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.cp-related-pill {
  display: inline-flex;
  font-size: 12px; font-weight: 700; color: var(--type-word);
  border-radius: 20px; padding: .2rem .7rem;
  background: rgba(222,184,45,.08); border: 1px solid rgba(222,184,45,.2);
  text-decoration: none; transition: border-color .15s;
}
.cp-related-pill:hover { border-color: rgba(222,184,45,.6); }
.cp-entry[data-type="theme"] .cp-related-pill { color: var(--type-theme); background: rgba(77,159,255,.08); border-color: rgba(77,159,255,.2); }
.cp-entry[data-type="theme"] .cp-related-pill:hover { border-color: rgba(77,159,255,.6); }
.cp-entry[data-type="concept"] .cp-related-pill { color: var(--type-concept); background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.2); }
.cp-entry[data-type="concept"] .cp-related-pill:hover { border-color: rgba(168,85,247,.6); }

/* Fallback text — anything auto-generated because the real field is
   empty gets a visibly distinct treatment (muted + italic) so it
   never gets mistaken for actual written content. */
.cp-fallback-text {
  color: var(--text-dim);
  font-style: italic;
}