/* ═══ I CHING MODULE ═══ tokens only, no hardcoded colours ═══ */

.ic-modebar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.ic-mode-btn {
  background:var(--card-bg); color:var(--card-text); border:1px solid var(--card-border);
  border-radius:6px; padding:.45rem .9rem; cursor:pointer; font-family:var(--font-body);
  font-size:.92rem;
}
.ic-mode-btn:hover  { border-color:var(--border-bright); }
.ic-mode-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent-bright); }

.ic-layout { display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:1.4rem; align-items:start; }
.ic-searchrow { margin-bottom:.7rem; }
.ic-search {
  width:100%; padding:.5rem .7rem; border-radius:6px;
  border:1px solid var(--card-border); background:var(--card-bg);
  color:var(--card-text); font-family:var(--font-body);
}

.ic-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.5rem; max-height:70vh; overflow-y:auto; padding-right:.3rem;
}
.ic-card {
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:.5rem .3rem; cursor:pointer; color:var(--card-text);
  font-family:var(--font-body); text-align:center;
}
.ic-card:hover  { border-color:var(--accent); }
.ic-card.active { background:var(--accent-dim); border-color:var(--accent); }
.ic-card-fig  { color:var(--content-accent); line-height:0; }
.ic-card-n    { font-size:.72rem; color:var(--card-text-muted); }
.ic-card-name { font-size:.82rem; font-weight:600; }
.ic-card-alt  { font-size:.68rem; color:var(--card-text-muted); }

.ic-detail {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:10px; padding:1.2rem 1.4rem; color:var(--card-text);
}
.ic-detail-head { display:flex; gap:1.2rem; align-items:center;
  border-bottom:1px solid var(--card-border); padding-bottom:.8rem; margin-bottom:.9rem; }
.ic-detail-head h2 { margin:0; font-family:var(--font-heading); color:var(--content-heading); }
.ic-detail-fig { color:var(--content-accent); line-height:0; }
.ic-char { font-size:1.4rem; }
.ic-alt  { font-size:.85rem; color:var(--card-text-muted); }
.ic-tri  { font-size:.78rem; color:var(--card-text-muted); margin-top:.15rem; }
.ic-sec  { margin:.85rem 0; line-height:1.6; }
.ic-lines .ic-line { margin:.4rem 0; font-size:.94rem; }
.ic-line b { color:var(--content-accent); }
.ic-line-moving { border-left:2px solid var(--accent); padding-left:.6rem; }
.ic-note {
  margin-top:.9rem; font-size:.83rem; padding:.5rem .7rem; border-radius:6px;
  background:var(--panel-bg); color:var(--panel-text); border:1px solid var(--card-border);
}
.ic-cite { color:var(--accent); cursor:help; font-size:.8em; }

/* flashcards / quiz / casting share a centred stage */
.ic-stage { text-align:center; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:10px; padding:1.6rem 1.2rem; color:var(--card-text); }
.ic-flash-fig    { color:var(--content-accent); line-height:0; margin-bottom:.9rem; }
.ic-flash-prompt { font-size:1.02rem; margin-bottom:.9rem; color:var(--card-text-muted); }
.ic-flash-answer h3 { margin:.3rem 0; font-family:var(--font-heading); color:var(--content-heading); }
.ic-flash-answer p  { max-width:44rem; margin:.7rem auto; line-height:1.6; }
.ic-quiz-opts { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.8rem 0; }
.ic-cast-hint { color:var(--card-text-muted); font-size:.92rem; margin:.8rem 0; }
.ic-cast-fig  { color:var(--content-accent); line-height:0; margin:.6rem 0 1rem; }
.ic-cast-result { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.ic-cast-card {
  flex:1 1 260px; max-width:340px; background:var(--content-bg);
  border:1px solid var(--card-border); border-radius:10px; padding:1rem;
  color:var(--content-text);
}
.ic-cast-card h3 { margin:.5rem 0 .2rem; font-family:var(--font-heading); color:var(--content-heading); }
.ic-cast-card p  { font-size:.9rem; line-height:1.55; }
.ic-cast-label { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.5rem; }
.ic-cast-note { color:var(--card-text-muted); font-style:italic; }
.ic-cast-lines { text-align:left; max-width:46rem; margin:0 auto 1rem; }
.btn-sm { padding:.3rem .7rem; font-size:.82rem; }

@media (max-width: 900px) {
  .ic-layout { grid-template-columns:1fr; }
  .ic-grid   { max-height:none; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); }
  .ic-detail-head { flex-direction:column; text-align:center; gap:.6rem; }
  .ic-cast-result { flex-direction:column; align-items:center; }
}