/* ==========================================================================
   Lexicon — card gallery + wiki reading panel
   ========================================================================== */

/* category accents, in the monastery's own colours */
[data-c="Core"]      { --acc: #a3200f; }
[data-c="Practice"]  { --acc: #e2741a; }
[data-c="Objects"]   { --acc: #cf9426; }
[data-c="Deities"]   { --acc: #1c6f66; }
[data-c="Study"]     { --acc: #6e1812; }
[data-c="Monastery"] { --acc: #8a5a2b; }
[data-c="Texts"]     { --acc: #2b5fa8; }
[data-c="Calendar"]  { --acc: #b4472c; }

.pagehead--lex { padding-bottom: clamp(2.5rem, 5vh, 4rem); }

/* ---------- the grid ------------------------------------------------------ */

.lexgrid {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 252px), 1fr));
}

:where(.lexcard) { --acc: var(--tx-faint); }
.lexcard {
  position: relative; isolation: isolate;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 13px;
  padding: 1.15rem 1.2rem 1.3rem;
  overflow: hidden;
  display: flex; flex-direction: column; gap: .45rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.lexcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--acc);
  opacity: .85;
}
.lexcard:hover, .lexcard:focus-within {
  transform: translateY(-3px);
  border-color: var(--rule);
  box-shadow: 0 20px 40px -28px rgba(43,26,18,.6);
}
.lexcard__hit { position: absolute; inset: 0; z-index: 3; border: 0; background: none; cursor: pointer; }
.lexcard__hit:focus-visible { outline: 2px solid var(--acc); outline-offset: -3px; border-radius: 13px; }

.lexcard__wm {
  position: absolute; right: -.15em; bottom: -.34em; z-index: -1;
  font-size: 3.6rem; line-height: 1; color: var(--acc); opacity: .1;
  pointer-events: none; white-space: nowrap; max-width: 130%;
}
.lexcard__cat {
  font-size: .6rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  color: var(--acc);
}
.lexcard__term {
  font-family: var(--f-display); font-size: 1.24rem; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.15; margin: 0;
}
.lexcard__gloss { font-size: .855rem; line-height: 1.5; color: var(--tx-soft); margin: 0; max-width: none; }
/* full text stays in the DOM for search engines and no-JS readers */
.lexcard__more { display: none; }
.no-js .lexcard__more { display: block; font-size: .85rem; color: var(--tx-soft); }
.lexcard.is-hidden { display: none; }
.lexcard mark { background: var(--gold-lt); color: inherit; border-radius: 2px; padding: 0 .1em; }

.lex-empty { padding: clamp(2rem,5vw,4rem) 0; text-align: center; }

/* ---------- reading panel ------------------------------------------------- */

.lexpanel { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.lexpanel[aria-hidden="false"] { pointer-events: auto; }

.lexpanel__scrim {
  position: absolute; inset: 0; background: rgba(26,12,8,.5);
  opacity: 0; transition: opacity .35s var(--ease);
  backdrop-filter: blur(2px);
}
.lexpanel[aria-hidden="false"] .lexpanel__scrim { opacity: 1; }

:where(.lexpanel__sheet) { --acc: var(--red); }
.lexpanel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(520px, 100%);
  background: var(--paper);
  box-shadow: -30px 0 70px -40px rgba(26,12,8,.8);
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  display: flex; flex-direction: column;
}
.lexpanel[aria-hidden="false"] .lexpanel__sheet { transform: none; }

@media (max-width: 640px) {
  .lexpanel__sheet {
    top: auto; left: 0; height: 88svh; width: 100%;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -24px 60px -34px rgba(26,12,8,.85);
  }
}

.lexpanel__head {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.lexpanel__head::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--acc);
}
.lexpanel__cat {
  font-size: .63rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--acc); margin-right: auto;
}
.lexpanel__back, .lexpanel__close {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%; background: transparent;
  color: var(--tx-soft); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.lexpanel__back:hover, .lexpanel__close:hover { background: var(--ground-2); color: var(--tx); border-color: var(--rule); }

.lexpanel__body { overflow-y: auto; padding: clamp(1.5rem,4vw,2.4rem) clamp(1.2rem,4vw,2.4rem) 3rem; }
.lexpanel__tib { font-size: 1.7rem; color: var(--acc); margin: 0 0 .3rem; line-height: 1.7; }
.lexpanel__tib:empty { display: none; }
.lexpanel__term { font-size: clamp(1.8rem,1.3rem+1.4vw,2.5rem); margin: 0 0 .25em; }
.lexpanel__translit { font-size: .82rem; color: var(--tx-faint); margin: 0 0 1.2rem; letter-spacing: .01em; }
.lexpanel__translit:empty { display: none; }
.lexpanel__gloss {
  font-family: var(--f-display); font-size: 1.18rem; line-height: 1.4; color: var(--tx);
  border-left: 2px solid var(--acc); padding-left: 1rem; margin: 0 0 1.6rem;
}
.lexpanel__def { color: var(--tx-soft); font-size: .96rem; line-height: 1.72; }
.lexpanel__def p { max-width: none; }

.lexpanel__also { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-soft); }
.lexpanel__also h4 {
  font-family: var(--f-body); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-faint); margin: 0 0 .85rem;
}
.lexpanel__also:empty { display: none; }
.alsochip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--rule); background: transparent; border-radius: 999px;
  padding: .4rem .85rem; margin: 0 .35rem .35rem 0;
  font: inherit; font-size: .81rem; color: var(--tx); cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.alsochip::after { content: "→"; font-size: .85em; opacity: .45; }
.alsochip:hover { background: var(--ground-2); border-color: var(--tx-faint); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .lexpanel__sheet, .lexpanel__scrim, .lexcard { transition: none; }
}

.lexpanel__def a {
  color: var(--acc); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; font-weight: 500;
}
.lexpanel__def a:hover { text-decoration-thickness: 2px; }

/* Alternative names, so a reader who heard "dorje" finds the Vajra card. */
.lexcard__also {
  font-size: .78rem; line-height: 1.5; color: var(--tx-faint);
  margin: .35rem 0 0; font-style: italic;
}