/* ═══════════════════════════════════════════
   ISO 639 Language Code Directory
   ═══════════════════════════════════════════ */

.lcd-scope {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1240px; margin: 0 auto; padding: 70px 4vw 56px;
}

/* ── Hero ── */
.lcd-hero {
  text-align: center; padding: 32px 24px 26px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-top: 4px solid #f59e0b;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.lcd-hero h1 {
  font-size: 1.55rem !important; font-weight: 800 !important;
  color: var(--txt, #0f172a) !important; margin: 0 0 8px !important;
  letter-spacing: -.02em;
}
.lcd-hero h1 i { color: #f59e0b; margin-right: 10px; }
.lcd-hero p {
  font-size: .86rem !important; color: var(--txt-2, #64748b) !important;
  margin: 0 !important; line-height: 1.5 !important;
}

/* ── Search bar ── */
.lcd-search-wrap {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface, #fff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 14px; padding: 0 18px;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.lcd-search-wrap:focus-within {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,.10);
}
.lcd-search-wrap > i { color: #f59e0b; font-size: .95rem; flex-shrink: 0; }
.lcd-search-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .93rem; color: var(--txt, #0f172a); font-family: inherit;
  padding: 14px 0;
}
.lcd-search-input::placeholder { color: var(--txt-2, #b0bec5); }
.lcd-search-clear {
  display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--border, #e2e8f0); color: var(--txt-2, #64748b);
  cursor: pointer; font-size: .78rem; flex-shrink: 0; transition: background .13s;
}
.lcd-search-clear:hover { background: #ef4444; color: #fff; }

/* ── Meta bar ── */
.lcd-meta-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.lcd-stats { display: flex; gap: 8px; align-items: center; }
.lcd-stat-badge {
  font-size: .76rem; font-weight: 700; color: var(--txt-2, #64748b);
  background: var(--page-bg, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px; padding: 4px 14px;
}
.lcd-stat-badge span { color: #d97706; }
.lcd-legend {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: .75rem; color: var(--txt-2, #64748b);
}
.lcd-legend-item { display: flex; align-items: center; gap: 6px; }

/* ── Alpha bar ── */
.lcd-alpha-bar { display: flex; flex-wrap: wrap; gap: 5px; }
.lcd-alpha-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--surface, #fff); color: var(--txt-2, #64748b);
  font-size: .75rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.lcd-alpha-btn:hover {
  background: rgba(245,158,11,.1); border-color: #f59e0b; color: #b45309;
}
.lcd-alpha-btn.lcd-alpha-active {
  background: #f59e0b; border-color: #f59e0b; color: #fff;
  box-shadow: 0 2px 8px rgba(245,158,11,.38);
}

/* ── Table card ── */
.lcd-table-wrap {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px; overflow: clip;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.lcd-table-scroll { overflow-x: auto; }

.lcd-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .84rem; min-width: 860px;
}

/* ── HEADER (non-sticky — handled via JS clone) ── */
.lcd-table thead tr { background: #0f172a; }
.lcd-table thead th {
  padding: 14px 16px; text-align: left;
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; white-space: nowrap;
  color: rgba(255,255,255,.6);
  background: #0f172a;
  border-bottom: 2px solid rgba(245,158,11,.4);
  border-right: 1px solid rgba(255,255,255,.08);
}
.lcd-table thead th:last-child { border-right: none; }

/* ── FLOATING STICKY HEADER (JS clone) ── */
#lcdStickyHead {
  display: none;
  position: fixed; top: 56px; left: 0; right: 0;
  z-index: 200;
  background: #0f172a;
  border-bottom: 2px solid rgba(245,158,11,.4);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  overflow: hidden;
}
#lcdStickyHead table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
}
#lcdStickyHead th {
  padding: 13px 16px; text-align: left;
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; white-space: nowrap;
  background: #0f172a;
  border-right: 1px solid rgba(255,255,255,.08);
  overflow: hidden; text-overflow: ellipsis;
}
#lcdStickyHead th:last-child { border-right: none; }
#lcdStickyHead .th-icon {
  display: inline-block; width: 18px; height: 18px; line-height: 18px;
  border-radius: 4px; font-size: .6rem; font-weight: 900;
  text-align: center; margin-right: 6px; vertical-align: middle;
}
#lcdStickyHead .lcd-th-code { color: #fcd34d !important; }
#lcdStickyHead .lcd-th-code .th-icon { background: rgba(245,158,11,.25); color: #fcd34d; }
#lcdStickyHead .lcd-th-a1   { color: #6ee7b7 !important; }
#lcdStickyHead .lcd-th-a1   .th-icon { background: rgba(16,185,129,.2); color: #6ee7b7; }
#lcdStickyHead .lcd-th-en   { color: #fff !important; }
#lcdStickyHead .lcd-th-en   .th-icon { background: rgba(255,255,255,.1); color: #fff; }
#lcdStickyHead .lcd-th-fr   { color: #93c5fd !important; }
#lcdStickyHead .lcd-th-fr   .th-icon { background: rgba(59,130,246,.2); color: #93c5fd; }
#lcdStickyHead .lcd-th-de   { color: #c4b5fd !important; }
#lcdStickyHead .lcd-th-de   .th-icon { background: rgba(167,139,250,.2); color: #c4b5fd; }
/* Column accent colors */
.lcd-th-code { color: #fcd34d !important; width: 150px; }
.lcd-th-a1   { color: #6ee7b7 !important; width: 100px; }
.lcd-th-en   { color: #fff    !important; width: 210px; }
.lcd-th-fr   { color: #93c5fd !important; }
.lcd-th-de   { color: #c4b5fd !important; }

/* Column header icon */
.lcd-table thead th .th-icon {
  display: inline-block; width: 18px; height: 18px; line-height: 18px;
  border-radius: 4px; font-size: .6rem; font-weight: 900;
  text-align: center; margin-right: 6px; vertical-align: middle;
}
.lcd-th-code .th-icon { background: rgba(245,158,11,.25); color: #fcd34d; }
.lcd-th-a1   .th-icon { background: rgba(16,185,129,.2);  color: #6ee7b7; }
.lcd-th-en   .th-icon { background: rgba(255,255,255,.1); color: #fff; }
.lcd-th-fr   .th-icon { background: rgba(59,130,246,.2);  color: #93c5fd; }
.lcd-th-de   .th-icon { background: rgba(167,139,250,.2); color: #c4b5fd; }

/* ── Rows ── */
.lcd-table tbody tr { transition: background .1s; }
.lcd-table tbody tr:nth-child(even) { background: rgba(248,250,252,.7); }
.lcd-table tbody tr:hover { background: rgba(245,158,11,.05) !important; }

.lcd-table td {
  padding: 10px 16px; vertical-align: middle;
  border-bottom: 1px solid var(--border, #e8edf3);
  border-right: 1px solid var(--border, #e8edf3);
}
.lcd-table tbody tr:last-child td { border-bottom: none; }
.lcd-table td:last-child { border-right: none; }
/* First column — slightly stronger left accent */
.lcd-table td:first-child {
  border-left: 3px solid rgba(245,158,11,.25);
}

/* ── Cell copy behavior ── */
.lcd-copyable {
  cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: -4px -6px;
  transition: background .12s;
  display: inline-block;
}
.lcd-copyable:hover { background: rgba(245,158,11,.1); }
.lcd-copyable.lcd-cell-copied {
  background: rgba(22,163,74,.12) !important;
  color: #15803d !important;
}

.lcd-code-cell { white-space: nowrap; }
.lcd-a1-cell  { white-space: nowrap; }

/* English name */
.lcd-en-cell { font-weight: 600; color: var(--txt, #0f172a); }

/* French */
.lcd-fr-cell { color: #2563eb; font-size: .83rem; }

/* German */
.lcd-de-cell { color: #7c3aed; font-size: .83rem; }

/* B/T sub-labels */
.lcd-bt-label {
  font-size: .63rem; letter-spacing: .05em;
  color: var(--txt-2, #94a3b8); margin-top: 3px; display: block;
}
.lcd-bt-b { color: #b45309; font-weight: 700; }
.lcd-bt-t { color: #4338ca; font-weight: 700; }
.lcd-slash { color: var(--txt-2, #cbd5e1); margin: 0 3px; }

/* ── Code chips ── */
.lcd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 5px 11px; border-radius: 8px;
  font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; user-select: none;
  /* Bibliographic = amber */
  background: rgba(245,158,11,.12); color: #92400e;
  border: 1.5px solid rgba(245,158,11,.3);
  transition: transform .1s, box-shadow .1s, background .1s;
}
.lcd-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(245,158,11,.28);
  background: rgba(245,158,11,.2);
}
.lcd-chip:active { transform: scale(.96); box-shadow: none; }
.lcd-chip.lcd-copied {
  background: rgba(22,163,74,.15) !important;
  color: #166534 !important;
  border-color: rgba(22,163,74,.35) !important;
}

/* Terminology = indigo */
.lcd-chip-t {
  background: rgba(99,102,241,.11); color: #3730a3;
  border-color: rgba(99,102,241,.28);
}
.lcd-chip-t:hover {
  background: rgba(99,102,241,.2);
  box-shadow: 0 4px 10px rgba(99,102,241,.22);
}

/* ISO 639-1 = emerald */
.lcd-chip-a1 {
  background: rgba(16,185,129,.11); color: #065f46;
  border-color: rgba(16,185,129,.28);
}
.lcd-chip-a1:hover {
  background: rgba(16,185,129,.2);
  box-shadow: 0 4px 10px rgba(16,185,129,.22);
}

.lcd-dash { color: var(--txt-2, #d1d5db); }

/* ── No results ── */
.lcd-no-results {
  display: none; text-align: center; padding: 60px 20px;
  color: var(--txt-2, #64748b); font-size: .9rem;
}
.lcd-no-results i {
  font-size: 2.5rem; color: var(--border, #e2e8f0);
  display: block; margin-bottom: 14px;
}

/* ── Copy toast ── */
#lcdToast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #0f172a; color: #fff; font-size: .8rem; font-weight: 600;
  padding: 8px 20px; border-radius: 999px; pointer-events: none;
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 9999;
  white-space: nowrap;
}
#lcdToast.lcd-toast-show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .lcd-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
  .lcd-table tbody tr:hover { background: rgba(245,158,11,.06) !important; }
  .lcd-fr-cell { color: #60a5fa; }
  .lcd-de-cell { color: #a78bfa; }
  .lcd-copyable:hover { background: rgba(245,158,11,.12); }
}
:root[data-theme="dark"] .lcd-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
:root[data-theme="dark"] .lcd-table tbody tr:hover { background: rgba(245,158,11,.06) !important; }
:root[data-theme="dark"] .lcd-fr-cell { color: #60a5fa; }
:root[data-theme="dark"] .lcd-de-cell { color: #a78bfa; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .lcd-scope { padding-top: 60px; }
  .lcd-table { min-width: 540px; }
  .lcd-th-de, .lcd-table td:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
  .lcd-th-fr, .lcd-table td:nth-child(4) { display: none; }
}