/* ═══ 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; }
}

/* ── Flashcard: click-to-reveal, split layout (Steel 1.14) ────────────
   Mobile keeps the stacked column. From 760px up the figure sits left and
   the answer right, so a desktop reader never scrolls to see the answer.
   The figure itself is the control — click to reveal, click again for the
   next card — with the buttons retained as a keyboard-reachable equal. */
.ic-flash-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.ic-flash-fig.is-clickable {
  cursor: pointer;
  border-radius: 10px;
  padding: 0.7rem 1rem 0.5rem;
  border: 1px solid transparent;
  transition: border-color .18s, background .18s;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  line-height: 0;
}
.ic-flash-fig.is-clickable:hover,
.ic-flash-fig.is-clickable:focus-visible {
  border-color: var(--border-bright, rgba(201,168,76,0.45));
  background: rgba(255,255,255,0.03);
  outline: none;
}
.ic-flash-hint {
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--card-text-muted, #8d8272);
  line-height: 1.4;
  opacity: 0.75;
}
.ic-flash-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}
.ic-flash-answer { text-align: left; }

@media (min-width: 760px) {
  .ic-flash-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    text-align: left;
  }
  .ic-flash-row > .ic-flash-fig { flex: 0 0 auto; }
  .ic-flash-side {
    align-items: flex-start;
    max-width: 32rem;
    width: auto;
  }
  .ic-flash-row .ic-flash-prompt { margin-bottom: 0; }
}