/* HTML Entity Reference — full-page sidebar (search + categories) +
   simple symbol/name cards, with a hover/click popup for the full code
   list. Matches the Deecliq Data Transfer shape for the page chrome. */
.el-fit.el-scope {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1600px; margin: 0 auto;
  padding: 90px 4vw 60px;
  min-height: calc(100vh - 70px);
}

.el-hero { text-align: center; flex-shrink: 0; }
.el-hero h1 {
  font-size: 1.5rem !important; font-weight: 800 !important;
  color: var(--brand, #8b5cf6) !important;
  margin: 0 0 4px !important;
}
#elScope .el-hero p {
  font-size: .85rem !important; color: var(--txt-2, #64748b) !important;
  margin: 0 auto !important; max-width: 760px;
}

/* ── Full-page layout: sidebar + main, not a centered card — fills the
   whole available width instead of being boxed into one narrow card. ──
   The sidebar is `position: fixed` (not sticky) so it stays on screen no
   matter how far down the page you scroll, immune to any ancestor
   becoming an accidental scroll container. Its left edge is computed with
   the same centering math as .el-fit.el-scope (max-width 1600px, 4vw
   padding) so it lines up exactly where it would sit in normal flow. ── */
.el-layout { display: flex; gap: 24px; flex: 1; min-height: 0; align-items: flex-start; }

.el-sidebar {
  position: fixed; top: 90px; left: calc(max(0px, (100vw - 1600px) / 2) + 4vw);
  flex: 0 0 240px; width: 240px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 110px);
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px; z-index: 40;
  transition: width .18s ease, opacity .12s ease;
}
.el-sidebar-inner { display: flex; flex-direction: column; gap: 16px; padding: 18px; min-width: 0; overflow: hidden; }
/* Reserves the space the fixed sidebar occupies so the grid never sits
   underneath it — kept in sync with the sidebar's actual width by JS on
   load, resize-drag, and collapse/expand. */
.el-main { margin-left: 264px; transition: margin-left .18s ease; }

/* ── Collapse / expand: the sidebar shrinks to nothing and a small pill
   tab appears at the edge to bring it back — lets the entity grid use the
   full screen width when the sidebar isn't needed. ── */
.el-sidebar-collapse-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border, #e2e8f0);
  background: var(--page-bg, #f8fafc); color: var(--txt-2, #64748b); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .68rem;
  transition: background .15s ease, color .15s ease;
}
.el-sidebar-collapse-btn:hover { background: var(--brand, #8b5cf6); color: #fff; }
.el-sidebar.el-sidebar-collapsed {
  flex-basis: 0; width: 0; min-width: 0; border-width: 0;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.el-sidebar-expand-btn {
  display: none; align-items: center; justify-content: center;
  position: fixed; top: 90px; left: calc(max(0px, (100vw - 1600px) / 2) + 4vw);
  width: 28px; height: 56px; border-radius: 0 10px 10px 0; z-index: 40;
  border: 1px solid var(--border, #e2e8f0); border-left: none;
  background: var(--surface, #fff); color: var(--txt-2, #64748b); cursor: pointer;
  font-size: .75rem; transition: background .15s ease, color .15s ease;
}
.el-sidebar-expand-btn:hover { background: var(--brand, #8b5cf6); color: #fff; border-color: var(--brand, #8b5cf6); }
.el-sidebar.el-sidebar-collapsed ~ .el-sidebar-expand-btn { display: flex; }

/* ── Resize: drag the right edge to make the sidebar narrower/wider,
   clamped in JS to a sane min/max so the grid never gets crushed. ── */
.el-sidebar-resize-handle {
  position: absolute; top: 0; right: -5px; bottom: 0; width: 10px;
  cursor: col-resize; z-index: 3;
}
.el-sidebar-resize-handle:hover, .el-sidebar.el-sidebar-resizing .el-sidebar-resize-handle {
  background: rgba(139,92,246,.18);
}
.el-sidebar.el-sidebar-resizing { transition: none; }
/* ── Search box: pill shape, icon, brand focus glow, clear button that
   only shows once there's text to clear. ── */
.el-search-box {
  position: relative; display: flex; align-items: center;
  background: var(--page-bg, #f8fafc); border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 999px; padding: 0 6px 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.el-search-box:focus-within {
  border-color: var(--brand, #8b5cf6); background: var(--surface, #fff);
  box-shadow: 0 0 0 4px rgba(139,92,246,.14);
}
.el-search-icon {
  font-size: .8rem; color: var(--txt-2, #64748b); flex-shrink: 0;
  transition: color .15s ease;
}
.el-search-box:focus-within .el-search-icon { color: var(--brand, #8b5cf6); }
.el-search-input {
  width: 100%; border: none; background: transparent; outline: none;
  padding: 10px 8px; font-size: .82rem; color: var(--txt, #0f172a);
}
.el-search-clear {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--border, #e2e8f0); color: var(--txt-2, #64748b);
  cursor: pointer; font-size: .65rem; transition: background .15s ease, color .15s ease;
}
.el-search-clear:hover { background: var(--brand, #8b5cf6); color: #fff; }
.el-search-box.el-search-has-text .el-search-clear { display: flex; }

.el-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.el-stat-badge {
  background: var(--page-bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  color: var(--txt, #0f172a);
  padding: 5px 10px; border-radius: 20px; font-size: .74rem; font-weight: 700;
}
.el-stat-badge span { color: var(--brand, #8b5cf6); margin-left: 3px; }

.el-category-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 320px); overflow-y: auto;
}
.el-category-btn {
  display: flex; align-items: center; gap: 10px;
  text-align: left; border: none; background: none; cursor: pointer;
  padding: 9px 12px; border-radius: 10px; font-size: .82rem; font-weight: 600;
  color: var(--txt-2, #64748b); transition: background .15s ease, color .15s ease;
}
.el-category-btn i {
  width: 16px; text-align: center; flex-shrink: 0; font-size: .85rem;
  color: var(--brand, #8b5cf6); transition: color .15s ease;
}
.el-category-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-icon-greek { font-style: normal; font-weight: 700; font-family: 'SFMono-Regular', Consolas, monospace; }
.el-category-btn:hover { background: var(--page-bg, #f8fafc); color: var(--txt, #0f172a); }
.el-category-btn.el-category-active { background: var(--brand, #8b5cf6); color: #fff; }
.el-category-btn.el-category-active i { color: #fff; }

.el-main { flex: 1; min-width: 0; }

.el-entities-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

/* ── "All Categories" section headings — the grid is grouped by category
   so a scrollspy can tell which one you're currently looking at and
   highlight it in the sidebar automatically. ── */
.el-section-heading {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 800; color: var(--brand, #8b5cf6);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 18px 4px 4px; border-bottom: 2px solid var(--border, #e2e8f0);
  margin-bottom: 4px; scroll-margin-top: 100px;
}
.el-section-heading:first-child { padding-top: 0; }
.el-section-heading i { color: var(--brand, #8b5cf6); }
.el-section-heading span.el-section-count { margin-left: auto; color: var(--txt-2, #64748b); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ── Landing view: one tile per category — cheap to render, nothing's
   full entity data is loaded until a tile is actually clicked. ── */
.el-entities-grid.el-tiles-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.el-category-tile {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px; padding: 24px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .85rem; font-weight: 700; color: var(--txt, #0f172a);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.el-category-tile i {
  font-size: 1.4rem; color: #fff;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand, #8b5cf6), var(--brand-dark, #6d28d9));
  border-radius: 12px;
}
.el-category-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(139,92,246,.18);
  border-color: var(--brand, #8b5cf6);
}

/* ── Simple cards: symbol + name only. All the codes live in the detail
   popup, opened by hovering or clicking a card. ── */
.el-entity-card {
  background: var(--surface, #fff); border-radius: 14px; padding: 14px 10px;
  border: 1px solid var(--border, #e2e8f0);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.el-entity-card:hover, .el-entity-card:focus {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(139,92,246,.18);
  border-color: var(--brand, #8b5cf6);
}
/* Natural glyph rendering — no forced white fill, so hollow/outline
   characters (white chess pieces, outline stars, etc.) stay visible
   exactly as their own Unicode glyph looks, not flattened into a solid
   white icon on a brand-color tile. */
.el-entity-symbol {
  font-size: 1.6rem; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--page-bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  color: var(--txt, #0f172a); border-radius: 10px;
}
.el-entity-name {
  font-size: .7rem; font-weight: 600; color: var(--txt-2, #64748b);
  line-height: 1.25; min-height: 26px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.el-no-results {
  text-align: center; padding: 60px 20px; color: var(--txt-2, #64748b); font-size: 1rem;
  grid-column: 1 / -1;
}

/* ── Detail popup ── */
.el-detail-popup {
  position: fixed; z-index: 100002; display: none;
  width: 300px; max-height: 80vh; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px; padding: 16px; box-shadow: 0 24px 50px rgba(0,0,0,.22);
}
.el-detail-popup.el-detail-open { display: block; animation: elPopIn .15s ease; }
@keyframes elPopIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .el-detail-popup.el-detail-open { animation: none; } }

.el-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; }
.el-detail-symbol {
  font-size: 1.5rem; width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--page-bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  color: var(--txt, #0f172a); border-radius: 10px;
}
.el-detail-name { font-size: .85rem; font-weight: 700; color: var(--txt, #0f172a); line-height: 1.3; flex: 1; min-width: 0; padding-right: 24px; }
.el-detail-close {
  position: absolute; top: -4px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border, #e2e8f0);
  background: var(--page-bg, #f8fafc); color: var(--txt-2, #64748b); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: background .15s ease, color .15s ease;
}
.el-detail-close:hover { background: var(--brand, #8b5cf6); color: #fff; border-color: var(--brand, #8b5cf6); }

.el-entity-codes { display: flex; flex-direction: column; gap: 5px; }
.code-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--page-bg, #f8fafc); border-radius: 8px;
  font-size: .72rem; transition: background .15s ease; border: 1px solid transparent;
}
.code-item:hover { border-color: var(--brand, #8b5cf6); background: rgba(139,92,246,.06); }
.code-item .code-label::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 5px; flex-shrink: 0;
}
.code-item.unicode .code-label::before { background: var(--brand, #8b5cf6); }
.code-item.hex .code-label::before     { background: #16a34a; }
.code-item.html .code-label::before    { background: #ef4444; }
.code-item.entity .code-label::before  { background: #f59e0b; }
.code-item.css .code-label::before     { background: #38bdf8; }
.code-label {
  display: flex; align-items: center; font-weight: 600;
  color: var(--txt-2, #64748b); text-transform: uppercase; letter-spacing: .03em;
  font-size: .64rem; flex-shrink: 0;
}
.code-symbol { display: none; }
.code-value {
  font-family: 'SFMono-Regular', Consolas, monospace; color: var(--txt, #0f172a); cursor: pointer;
  padding: 3px 8px; border-radius: 6px; transition: background .15s ease, color .15s ease;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  font-weight: 600; font-size: .7rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.code-value:hover { background: var(--brand, #8b5cf6); color: #fff; border-color: var(--brand, #8b5cf6); }
.code-value.code-value-copied {
  background: #16a34a; color: #fff; border-color: #16a34a;
}

.el-howto { color: var(--txt-2); line-height: 1.8; padding-left: 20px; font-size: .9rem; }

@media (max-width: 900px) {
  .el-layout { flex-direction: column; }
  .el-sidebar { flex: 1 1 auto !important; position: static !important; width: 100% !important; max-height: none; }
  .el-main { margin-left: 0 !important; }
  .el-category-list { max-height: 240px; }
  .el-sidebar-resize-handle { display: none; }
  .el-sidebar.el-sidebar-collapsed { display: none; }
  .el-sidebar-expand-btn { position: static !important; width: 100%; height: 36px; border-radius: 10px; border-left: 1px solid var(--border, #e2e8f0); }
}
@media (max-width: 480px) {
  .el-entities-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .el-detail-popup { width: calc(100vw - 28px); left: 14px !important; }
}