/* In-Vidia Glossary v1.0 — scoped styles */
:root {
  --ivg-navy: #0b1f33;
  --ivg-blue: #1463ff;
  --ivg-teal: #18a7a8;
  --ivg-ink: #172230;
  --ivg-muted: #667281;
  --ivg-line: #dfe6ec;
  --ivg-soft: #f5f8fa;
  --ivg-white: #ffffff;
}

.ivg-root-intro,
.ivg-entry-lead { margin-bottom: 1.5rem; }
.ivg-root-intro p,
.ivg-entry-lead { font-size: 1.08rem; line-height: 1.72; color: var(--ivg-ink); }

.ivg-index { margin: 2rem 0 1rem; }
.ivg-toolbar {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--ivg-line);
  border-radius: 16px;
  background: var(--ivg-soft);
}
.ivg-search-label { display: block; }
.ivg-search {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid #cdd7df;
  border-radius: 12px;
  background: var(--ivg-white);
  color: var(--ivg-ink);
  font: inherit;
  line-height: 1.25;
  outline: none;
}
.ivg-search:focus { border-color: var(--ivg-blue); box-shadow: 0 0 0 3px rgba(20,99,255,.12); }
.ivg-area-filters,
.ivg-letter-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.ivg-chip,
.ivg-letter {
  appearance: none;
  border: 1px solid #cdd7df;
  border-radius: 999px;
  background: var(--ivg-white);
  color: var(--ivg-navy);
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;
  padding: .62rem .82rem;
}
.ivg-chip:hover,
.ivg-letter:hover { border-color: #9eacb9; }
.ivg-chip.is-active,
.ivg-letter.is-active {
  border-color: var(--ivg-navy);
  background: var(--ivg-navy);
  color: var(--ivg-white);
}
.ivg-count { margin: 1rem 0; color: var(--ivg-muted); font-size: .92rem; }
.ivg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.ivg-card {
  display: flex;
  min-width: 0;
  min-height: 235px;
  flex-direction: column;
  padding: 1.2rem;
  border: 1px solid var(--ivg-line);
  border-radius: 16px;
  background: var(--ivg-white);
  box-shadow: 0 6px 24px rgba(11,31,51,.045);
}
.ivg-card[hidden] { display: none !important; }
.ivg-card-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.ivg-area {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: .25rem .58rem;
  border-radius: 999px;
  background: rgba(24,167,168,.10);
  color: #087f80;
  font-size: .73rem;
  font-weight: 800;
  line-height: 1.2;
}
.ivg-initial { color: #a3afba; font-size: .78rem; font-weight: 800; }
.ivg-card-title { margin: 0 0 .65rem; color: var(--ivg-navy); font-size: 1.18rem; line-height: 1.24; }
.ivg-card-title a { color: inherit; text-decoration: none; }
.ivg-card-title a:hover { color: var(--ivg-blue); }
.ivg-card p { margin: 0 0 1rem; color: var(--ivg-muted); font-size: .92rem; line-height: 1.58; }
.ivg-more { margin-top: auto; color: var(--ivg-blue); font-size: .88rem; font-weight: 800; text-decoration: none; }
.ivg-more:hover { text-decoration: underline; }
.ivg-empty { margin: 2rem 0; padding: 1rem; border-radius: 12px; background: var(--ivg-soft); color: var(--ivg-muted); }

.ivg-definition-box {
  display: grid;
  gap: .3rem;
  margin: 0 0 1.6rem;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--ivg-teal);
  border-radius: 10px;
  background: var(--ivg-soft);
}
.ivg-definition-box span { color: var(--ivg-muted); font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ivg-definition-box strong { color: var(--ivg-navy); font-size: 1rem; line-height: 1.45; }
.ivg-watch {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ivg-line);
  border-radius: 14px;
  background: var(--ivg-soft);
}
.ivg-watch h2 { margin-top: 0; }
.ivg-related,
.ivg-deeper { margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--ivg-line); }
.ivg-related h2,
.ivg-deeper h2 { margin-top: 0; }
.ivg-related-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.ivg-related-links a,
.ivg-post-terms a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .7rem;
  border: 1px solid var(--ivg-line);
  border-radius: 999px;
  background: var(--ivg-white);
  color: var(--ivg-navy);
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
}
.ivg-related-links a:hover,
.ivg-post-terms a:hover { border-color: var(--ivg-blue); color: var(--ivg-blue); }
.ivg-deeper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ivg-deeper-card {
  display: flex;
  min-height: 120px;
  flex-direction: column;
  justify-content: space-between;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--ivg-line);
  border-radius: 14px;
  color: var(--ivg-navy);
  text-decoration: none;
}
.ivg-deeper-card:hover { border-color: #b4c1cc; box-shadow: 0 5px 18px rgba(11,31,51,.05); }
.ivg-deeper-card strong { line-height: 1.4; }
.ivg-deeper-card span { color: var(--ivg-blue); font-size: .82rem; font-weight: 800; }
.ivg-category-link { margin: 1rem 0 0; }
.ivg-category-link a { color: var(--ivg-blue); font-weight: 800; text-decoration: none; }

.ivg-post-terms {
  margin: 2rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ivg-line);
  border-radius: 14px;
  background: var(--ivg-soft);
}
.ivg-post-terms > strong { display: block; margin-bottom: .7rem; color: var(--ivg-navy); }
.ivg-post-terms > div { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 980px) {
  .ivg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivg-deeper-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ivg-toolbar { padding: .9rem; border-radius: 14px; }
  .ivg-grid { grid-template-columns: 1fr; }
  .ivg-card { min-height: 0; }
  .ivg-chip, .ivg-letter { font-size: .8rem; padding: .58rem .72rem; }
}

.ivg-service-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: var(--ivg-navy);
  color: var(--ivg-white);
}
.ivg-service-cta div { display: grid; gap: .2rem; }
.ivg-service-cta strong { color: var(--ivg-white); }
.ivg-service-cta span { color: rgba(255,255,255,.76); font-size: .9rem; line-height: 1.45; }
.ivg-service-cta > a {
  flex: 0 0 auto;
  padding: .65rem .85rem;
  border-radius: 999px;
  background: var(--ivg-white);
  color: var(--ivg-navy);
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
}
.ivg-service-cta > a:hover { color: var(--ivg-blue); }
.ivg-back { margin: 1.2rem 0 0; font-size: .88rem; }
.ivg-back a { color: var(--ivg-blue); font-weight: 750; text-decoration: none; }
@media (max-width: 640px) {
  .ivg-service-cta { align-items: flex-start; flex-direction: column; }
}