/* ═══ GEOMANCY MODULE ═══ tokens only ═══ */

.geo-modebar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.geo-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;
}
.geo-mode-btn:hover  { border-color:var(--border-bright); }
.geo-mode-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent-bright); }

.geo-layout { display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:1.4rem; align-items:start; }
.geo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.5rem; }
.geo-card {
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:.6rem .3rem; cursor:pointer; color:var(--card-text); font-family:var(--font-body);
}
.geo-card:hover  { border-color:var(--accent); }
.geo-card.active { background:var(--accent-dim); border-color:var(--accent); }
.geo-card-fig  { color:var(--content-accent); line-height:0; }
.geo-card-name { font-size:.84rem; font-weight:600; text-align:center; }
.geo-card-alt  { font-size:.68rem; color:var(--card-text-muted); text-align:center; }

.geo-detail { background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:10px; padding:1.2rem 1.4rem; color:var(--card-text); }
.geo-detail-head { display:flex; gap:1.2rem; align-items:center;
  border-bottom:1px solid var(--card-border); padding-bottom:.8rem; margin-bottom:.9rem; }
.geo-detail-head > div:first-child { color:var(--content-accent); line-height:0; }
.geo-detail-head h2 { margin:0; font-family:var(--font-heading); color:var(--content-heading); }
.geo-pts   { font-size:.78rem; color:var(--card-text-muted); font-weight:400; }
.geo-trans { font-style:italic; color:var(--card-text-muted); font-size:.92rem; }
.geo-attr  { font-size:.8rem; color:var(--card-text-muted); margin-top:.2rem; }

.geo-htab { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.5rem; }
.geo-htab th, .geo-htab td { border:1px solid var(--card-border); padding:.25rem .5rem;
  text-align:left; vertical-align:top; }
.geo-htab th { color:var(--accent); font-weight:600; }
.geo-htab td:first-child { width:3rem; color:var(--content-accent); font-weight:600; }
.geo-h-sig { color:var(--card-text-muted); font-size:.8rem; width:9rem; }

/* casting */
.geo-cast-pent { text-align:center; color:var(--content-accent); margin-bottom:1rem; }
.geo-cast-pent .btn-sm { margin-top:.5rem; }
.geo-sigil-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.5rem; margin-bottom:1rem; }
.geo-sigil-opt {
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px;
  padding:.5rem .6rem; cursor:pointer; color:var(--card-text); text-align:left;
  font-family:var(--font-body); display:flex; flex-direction:column; gap:.1rem;
}
.geo-sigil-opt:hover  { border-color:var(--accent); }
.geo-sigil-opt.active { background:var(--accent-dim); border-color:var(--accent); }
.geo-sigil-opt b   { font-size:.9rem; }
.geo-sigil-opt span{ font-size:.75rem; color:var(--accent); }
.geo-sigil-opt em  { font-size:.72rem; color:var(--card-text-muted); font-style:normal; }

.geo-tap-area { display:flex; gap:.8rem; justify-content:center; align-items:center;
  flex-wrap:wrap; margin:1rem 0 .6rem; }
.geo-tap-btn {
  background:var(--accent-dim); border:2px solid var(--accent); color:var(--accent-bright);
  border-radius:50%; width:110px; height:110px; font-size:1.05rem; cursor:pointer;
  font-family:var(--font-heading);
}
.geo-tap-btn:active { background:var(--accent-muted); }
.geo-progress { text-align:center; color:var(--card-text-muted); font-size:.9rem; }
.geo-mother { color:var(--accent); }
.geo-progress.pulse { animation:geoPulse .25s ease; }
@keyframes geoPulse { 50% { color:var(--accent-bright); } }
@media (prefers-reduced-motion: reduce) { .geo-progress.pulse { animation:none; } }

.geo-line-strip { display:flex; gap:3px; justify-content:center; margin-top:.6rem; }
.geo-line-strip span { width:14px; height:5px; border-radius:2px;
  background:var(--card-border); }
.geo-line-strip span.set { background:var(--accent); }

.geo-shield { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem; }
.geo-row { display:flex; gap:.7rem; align-items:flex-end; flex-wrap:wrap; }
.geo-row h4 { flex:0 0 8.5rem; margin:0; font-size:.82rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:.06em; }
.geo-slot { display:flex; flex-direction:column; align-items:center; gap:.15rem;
  color:var(--content-accent); }
.geo-slot-lab  { font-size:.66rem; color:var(--card-text-muted); }
.geo-slot-name { font-size:.8rem; background:none; border:none; cursor:pointer;
  color:var(--content-text); text-decoration:underline dotted; font-family:var(--font-body); }
.geo-slot-name:hover { color:var(--accent-bright); }
.geo-row-judge .geo-slot:last-child .geo-slot-lab { color:var(--accent-bright); font-weight:700; }
.geo-check { font-size:.85rem; color:var(--card-text-muted); }

.geo-chart-title { color:var(--content-heading); font-family:var(--font-heading); margin-top:1.2rem; }
.geo-houses { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.6rem; }
.geo-house { display:flex; gap:.5rem; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:8px; padding:.5rem .6rem; }
.geo-house-n { font-weight:700; color:var(--accent); flex:0 0 1.3rem; }
.geo-house-fig { color:var(--content-accent); line-height:0; flex:0 0 auto; }
.geo-house-body { flex:1; min-width:0; }
.geo-house-sig  { font-size:.68rem; color:var(--card-text-muted); }
.geo-house-mean { font-size:.78rem; margin-top:.15rem; }
.geo-void {
  border:1px solid var(--color-danger); background:var(--panel-bg); color:var(--panel-text);
  border-radius:8px; padding:.7rem .9rem; margin-bottom:1rem; font-size:.9rem;
}

@media (max-width: 900px) {
  .geo-layout { grid-template-columns:1fr; }
  .geo-row h4 { flex:0 0 100%; }
  .geo-detail-head { flex-direction:column; text-align:center; }
  .geo-htab { font-size:.78rem; }
  .geo-htab .geo-h-sig { display:none; }
}

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