/* ── lexicon.html — page styles (extracted from inline <style>) ── */

.lex-intro { font-size: 14px; color: var(--text-muted); line-height: 1.8; max-width: 820px; margin-bottom: 1.4rem; }
.lex-intro strong { color: var(--text); }
.lex-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 1.4rem; }
.lex-fbtn {
  cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  border: 0.5px solid var(--border); background: var(--card); color: var(--text-muted);
  border-radius: 999px; padding: 6px 15px; transition: all 120ms ease;
}
.lex-fbtn:hover { border-color: var(--text-dim); }
.lex-fbtn.active { background: var(--scarlet); color: #fffaf3; border-color: var(--scarlet); }
.lex-count { font-size: 12px; color: var(--text-dim); margin: -0.6rem 0 1.2rem; }
.lex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lex-card {
  border: 0.5px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); padding: 1.05rem 1.15rem; display: flex; flex-direction: column;
}
.lex-card.lens-black { border-left: 2px solid #4a3832; }
.lex-card.lens-red { border-left: 2px solid var(--scarlet); }
.lex-card.lens-blue { border-left: 2px solid #2f6d9c; }
.lex-card.lens-shared { border-left: 2px solid #51606F; }
.lex-top { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.5rem; }
.lex-term { font-family: "Playfair Display", Georgia, serif; font-size: 17px; color: var(--text); line-height: 1.15; }
.lex-chip { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.lex-chip.black { background: #ECEAE8; color: #4a3832; }
.lex-chip.red { background: var(--scarlet-pale); color: var(--scarlet-dim); }
.lex-chip.blue { background: #E4EEF6; color: #2f6d9c; }
.lex-chip.shared { background: #ECEEF1; color: #51606F; }
.lex-def { font-size: 13px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.lex-def strong { color: var(--text); }
.lex-link { margin-top: 0.7rem; font-size: 12px; color: var(--scarlet-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.lex-link:hover { text-decoration: underline; }
.lex-link.none { color: var(--text-dim); font-weight: 400; font-style: italic; cursor: default; }
.lex-link.none:hover { text-decoration: none; }
@media (max-width: 720px) { .lex-grid { grid-template-columns: 1fr; } }