/**
 * components/artifact-card/artifact-card.css
 *
 * Every `.codex-*`, `.fragment-*` (the public-page ones — the admin
 * editor's OWN fragment list uses differently-named `.fragment-item-*`
 * classes, so there's no collision), `.source-*`, and `.tag-chip`/`.codex-tags-*`
 * rule for the artifact card, shared between artifacts.php and the
 * admin editor's live preview.
 *
 * IMPORTANT — scoping: the color/font tokens below are declared on
 * `.artifact-card-embed` rather than `:root`. Every caller must wrap
 * the card markup in an element with that class. This is deliberate:
 * a page that already has its own `:root` theme (like the admin
 * editor) would otherwise have those variables silently overridden
 * project-wide the moment this stylesheet loaded. The one per-artifact
 * dynamic pair — `--entry-color` / `--entry-rgb`, which depend on the
 * artifact's type — still need to be set inline by the caller
 * (`style="--entry-color:...;--entry-rgb:...;"`) on that same wrapper,
 * since they vary per artifact rather than being fixed tokens.
 *
 * Deliberately NOT included here: the `.page` / `body` rules from
 * artifacts.php. Those are page-layout chrome, not part of the card
 * itself, and `.page` in particular is a name the admin editor's own
 * layout already uses for something else — pulling it in here would
 * silently break that page's own layout.
 */

.artifact-card-embed {
  --bg: #0a0c10; --surface: #111318; --surface2: #181c24;
  --border: #1e2433; --border-hi: #2a3045; --neon: #DEB82D;
  --text: #e8eaf0; --text-muted: #a7afce;
  --fu: Bahnschrift, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --fd: 'Bebas Neue', 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --type-word: #DEB82D; --rgb-word: 222,184,45;
  --type-theme: #4d9fff; --rgb-theme: 77,159,255;
  --type-concept: #a855f7; --rgb-concept: 168,85,247;
  --ease: cubic-bezier(.4,0,.2,1);
  color: var(--text);
  font-family: var(--fu);
  font-size: 16px;
  line-height: 1.7;
}

.artifact-card-embed .codex-close-btn {
  position: absolute; top: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 0px 10px 0px 0px;
  background: rgba(24,28,36,.6); border: 1px solid var(--border-hi);
  color: var(--text-muted); text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.artifact-card-embed .codex-close-btn:hover { color: #fff; border-color: var(--entry-color); background: rgba(24,28,36,.85); }

.artifact-card-embed .codex-header-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .9rem; margin-top: .9rem; }
.artifact-card-embed .codex-title-block { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.artifact-card-embed .codex-title-block .codex-type-badge { align-self: flex-start; }
.artifact-card-embed .codex-badge-sep { opacity: .45; margin: 0 -1px; }
.artifact-card-embed #badge-id { opacity: .65; }
.artifact-card-embed .codex-stats-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.artifact-card-embed .codex-stat { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-muted); font-family: monospace; }
.artifact-card-embed .codex-stat svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
.artifact-card-embed .codex-share-btn { background: none; border: none; padding: 0; cursor: pointer; transition: color .15s; }
.artifact-card-embed .codex-share-btn:hover, .artifact-card-embed .codex-share-btn:hover svg { color: var(--entry-color); }
.artifact-card-embed .codex-share-btn:hover svg { opacity: 1; }

.artifact-card-embed .codex-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--entry-color); border-radius: 15px 15px 0 15px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.55); overflow: visible; }
.artifact-card-embed .codex-card-has-thumb { background-size: cover; background-position: center; background-repeat: no-repeat; }
.artifact-card-embed .codex-card.sources-open { border-radius: 15px 15px 0 0; }
.artifact-card-embed .codex-card-glow { position: absolute; top: -40px; left: -40px; width: 260px; height: 200px; pointer-events: none; background: radial-gradient(ellipse, rgba(var(--entry-rgb),.09) 0%, transparent 70%); }
.artifact-card-embed .codex-card-letter { position: absolute; right: 1.25rem; bottom: -1rem; font-family: var(--fd); font-size: clamp(6rem,18vw,9rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--entry-color); opacity: .05; user-select: none; pointer-events: none; }
.artifact-card-embed .codex-card-inner { position: relative; z-index: 1; padding: 2.25rem 2rem 0 2.5rem; border-radius: 16px 16px 0 0; overflow: hidden; }

.artifact-card-embed .codex-type-badge { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 0; padding: 3px 9px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--entry-color); background: rgba(var(--entry-rgb),.2); border: 1px solid rgba(var(--entry-rgb),.35); }
/* Over a thumbnail, an 8%-opacity tint isn't enough backdrop for
   reliable contrast regardless of what's in the image — solid dark
   chip behind it instead, same fix as the compendium card. */
.artifact-card-embed .codex-card-has-thumb .codex-type-badge { background: rgba(10,12,16,.75); }
.artifact-card-embed .codex-word { font-family: var(--fd); font-size: clamp(2.2rem,6vw,3.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.artifact-card-embed .codex-divider { height: 1px; background: var(--border); margin-bottom: 1.5rem; }

.artifact-card-embed .codex-video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--border); margin-bottom: 1.5rem; }
.artifact-card-embed .codex-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.artifact-card-embed .codex-body-embeds-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.artifact-card-embed .codex-body-embeds-wrap > * { overflow: hidden; min-height: 0; }
.artifact-card-embed .codex-body-embeds-wrap.open { grid-template-rows: 1fr; }

.artifact-card-embed .codex-image-embed { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); margin-bottom: .6rem; }
.artifact-card-embed .codex-image-embed img { display: block; width: 100%; height: auto; }
.artifact-card-embed .codex-image-caption { font-size: 12px; color: var(--text-muted); font-style: italic; margin-bottom: 1.5rem; }
.artifact-card-embed .codex-quote-embed { position: relative; padding: .25rem 1.5rem; border-left: 3px solid var(--entry-color); margin-bottom: 1.5rem; }
.artifact-card-embed .codex-quote-text { font-family: var(--fd); font-size: 1.4rem; font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: -.01em; margin-bottom: .6rem; }
.artifact-card-embed .codex-quote-attribution { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.artifact-card-embed .codex-quote-attribution::before { content: "— "; }
.artifact-card-embed .codex-gallery-embed { display: flex; gap: .6rem; overflow-x: auto; margin-bottom: 1.5rem; scrollbar-width: thin; }
.artifact-card-embed .codex-gallery-embed img { flex: 0 0 auto; height: 140px; width: auto; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; }
.artifact-card-embed .codex-image-embed img, .artifact-card-embed .codex-gallery-embed img { cursor: zoom-in; }

.artifact-card-embed .codex-image-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; background: rgba(5,6,9,.9); padding: 3rem 1.5rem; animation: codexModalFade .2s var(--ease) both; }
.artifact-card-embed .codex-image-modal.open { display: flex; }
.artifact-card-embed .codex-image-modal img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.artifact-card-embed .codex-image-modal-close { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 201; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border-hi); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.artifact-card-embed .codex-image-modal-close:hover { border-color: var(--entry-color); background: var(--border-hi); }
@keyframes codexModalFade { from { opacity: 0; } to { opacity: 1; } }

.artifact-card-embed .codex-def-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .65rem; }
.artifact-card-embed .codex-definition { font-size: 1.05rem; line-height: 1.9; color: var(--text); margin-bottom: 1.75rem; }
.artifact-card-embed .def-sentence { margin-bottom: .6rem; }
.artifact-card-embed .def-sentence:last-child { margin-bottom: 0; }

.artifact-card-embed .fragment-section { background: transparent; border-top: 1px solid var(--border); }
.artifact-card-embed .fragment-section:first-of-type { margin-top: .75rem; }
.artifact-card-embed .fragment-title-sep { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .75rem 2rem .75rem 2.5rem; background: transparent; border: none; cursor: pointer; font-family: var(--fu); text-align: left; transition: background .15s; }
.artifact-card-embed .fragment-title-sep:hover { background: rgba(var(--entry-rgb),.05); }
.artifact-card-embed .fragment-title-sep-label { font-family: var(--fd); font-size: 1.05rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.artifact-card-embed .fragment-title-sep-carrot { margin-left: auto; flex-shrink: 0; width: 14px; height: 14px; display: flex; align-items: center; color: var(--text-muted); transition: transform .25s var(--ease), color .15s; }
.artifact-card-embed .fragment-title-sep-carrot svg { width: 14px; height: 14px; }
.artifact-card-embed .fragment-title-sep:hover .fragment-title-sep-carrot { color: var(--entry-color); }
.artifact-card-embed .fragment-section.open .fragment-title-sep-carrot { transform: rotate(180deg); color: var(--entry-color); }
.artifact-card-embed .fragment-body-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease); }
.artifact-card-embed .fragment-body-wrap > * { overflow: hidden; min-height: 0; }
.artifact-card-embed .fragment-section:not(.open) .fragment-body-wrap { grid-template-rows: 0fr; }
.artifact-card-embed .fragment-body-inner { padding: 1.1rem 2rem 1.1rem 2.5rem; transition: padding .3s var(--ease); }
.artifact-card-embed .fragment-section:not(.open) .fragment-body-inner { padding-top: 0; padding-bottom: 0; }
.artifact-card-embed .fragment-section.nests-codex { border-right: 3px solid var(--entry-color); }
.artifact-card-embed .fragment-type-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; background: rgba(var(--entry-rgb),.12); color: var(--entry-color); flex-shrink: 0; }
.artifact-card-embed .fragment-codex-link { display: inline-flex; align-items: center; gap: 6px; margin-top: .9rem; padding: .45rem .9rem; border: 1px solid var(--border-hi); border-radius: 7px; background: var(--surface2); font-family: var(--fu); font-size: 12px; font-weight: 600; color: var(--entry-color); text-decoration: none; transition: border-color .15s, background .15s; }
.artifact-card-embed .fragment-codex-link:hover { border-color: var(--entry-color); background: rgba(var(--entry-rgb),.08); }
.artifact-card-embed .fragment-body { color: var(--text-muted); }
.artifact-card-embed .fragment-body p + p { margin-top: .8rem; }

.artifact-card-embed .codex-sources-wrap { margin-top: -1px; }
.artifact-card-embed .codex-sources-btn { display: flex; align-items: center; gap: 6px; float: right; padding: .55rem 1rem .55rem 2.5rem; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: var(--surface2); font-family: var(--fu); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.artifact-card-embed .codex-sources-btn:hover { color: var(--entry-color); border-color: rgba(var(--entry-rgb),.35); }
.artifact-card-embed .codex-sources-btn.open { color: var(--entry-color); border-color: rgba(var(--entry-rgb),.4); background: var(--surface); }
.artifact-card-embed .codex-sources-chevron { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; color: var(--text-muted); transition: transform .25s var(--ease), color .15s; }
.artifact-card-embed .codex-sources-btn:hover .codex-sources-chevron { color: var(--entry-color); }
.artifact-card-embed .codex-sources-btn.open .codex-sources-chevron { transform: rotate(180deg); color: var(--entry-color); }
.artifact-card-embed .codex-sources-count { padding: 0 5px; border-radius: 3px; font-size: 9px; font-weight: 800; line-height: 1.6; color: var(--entry-color); background: rgba(var(--entry-rgb),.15); border: 1px solid rgba(var(--entry-rgb),.3); }
.artifact-card-embed .codex-sources-panel { max-height: 0; overflow: hidden; border-radius: 0 0 0 12px; background: var(--surface); transition: max-height .35s var(--ease); }
.artifact-card-embed .codex-sources-panel.open { max-height: 800px; border-top: none; border-right-color: var(--border); }
.artifact-card-embed .codex-sources-panel .source-list { padding: 0; gap: 0; }
.artifact-card-embed .codex-sources-panel .source-card { border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.artifact-card-embed .codex-sources-panel .source-card:last-child { border-bottom: none; }

.artifact-card-embed .source-list { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .75rem; }
.artifact-card-embed .source-card { display: flex; align-items: stretch; position: relative; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; overflow: hidden; transition: border-color .25s, box-shadow .3s; }
.artifact-card-embed .source-card:hover { border-color: var(--border-hi); }
.artifact-card-embed .source-accent { width: 3px; flex-shrink: 0; position: relative; z-index: 1; background: var(--entry-color); opacity: .25; transition: opacity .25s; }
.artifact-card-embed .source-card:hover .source-accent { opacity: .7; }
.artifact-card-embed .source-thumbnail {
  flex-shrink: 0; width: 48px; height: 48px; margin: .55rem 0 .55rem .7rem;
  border-radius: 6px; overflow: hidden; position: relative; z-index: 1;
  background: var(--surface2);
}
.artifact-card-embed .source-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artifact-card-embed .source-thumbnail-fallback { display: flex; align-items: center; justify-content: center; color: var(--text-dim, var(--text-muted)); }
.artifact-card-embed .source-body { flex: 1; min-width: 0; position: relative; z-index: 1; padding: .7rem 1rem; }
.artifact-card-embed .source-fragment { font-size: 14px; font-weight: 700; color: var(--text); }
.artifact-card-embed .source-arrow { display: flex; align-items: center; position: relative; z-index: 1; flex-shrink: 0; padding: 0 .85rem; font-size: 14px; color: var(--text-muted); transition: color .2s; }
.artifact-card-embed .source-card:hover .source-arrow { color: var(--entry-color); }

.artifact-card-embed .codex-tags { margin-top: 1.25rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.artifact-card-embed .codex-tags-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: .25rem; flex-shrink: 0; }
.artifact-card-embed .tag-chip { display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: 20px; font-size: 11px; font-weight: 700; color: #4d9fff; background: rgba(77,159,255,.1); border: 1px solid rgba(77,159,255,.2); white-space: nowrap; }
.artifact-card-embed .tag-hash { margin-right: 2px; opacity: .65; }

/* ── SEE ALSO — links to other specific artifacts, distinct from Tags
   (plain descriptive words). The two coexist: Tags describe what an
   entry IS about, See Also points to WHERE ELSE to look. Same pill
   shape as Tags but colored per the linked artifact's own type
   (--e-color/--e-rgb set inline per pill), not the current entry's
   color, since it's pointing outward. ── */
.artifact-card-embed .codex-see-also { margin-top: 1.25rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.artifact-card-embed .codex-see-also-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: .25rem; flex-shrink: 0; }
.artifact-card-embed .see-also-pill { display: inline-flex; align-items: center; gap: 5px; padding: .25rem .6rem; border-radius: 20px; font-size: 11px; font-weight: 700; color: var(--e-color); text-decoration: none; background: rgba(var(--e-rgb),.08); border: 1px solid rgba(var(--e-rgb),.2); transition: background .15s, border-color .15s; white-space: nowrap; }
.artifact-card-embed .see-also-pill:hover { border-color: rgba(var(--e-rgb),.8); }
.artifact-card-embed .see-also-pill-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--e-color); opacity: .7; }

/* ── Fragment-level tags — same blue identity as the card's own tags,
   just smaller and dimmer at rest (no label row) since they're
   metadata on a sub-section, not the entry itself; sits at the bottom
   of the fragment's body, after its content, same relative position
   tags occupy on the card. Brightens to full blue on hover, same as
   always, just no longer tied to the entry's own type color. ── */
.artifact-card-embed .fragment-tags { margin-top: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.artifact-card-embed .tag-chip-sm {
  display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 20px;
  font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--surface2);
  border: 1px solid var(--border-hi); white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.artifact-card-embed .fragment-section:hover .tag-chip-sm { color: #4d9fff; border-color: rgba(77,159,255,.25); background: rgba(77,159,255,.06); }

@media (max-width: 520px) {
  .artifact-card-embed .codex-card-inner { padding: 1.75rem 1.25rem 1.5rem 1.5rem; }
}