/* Consultations */
@layer components {

/* After dark the wanderers' glyphs step forward a shade, so the signs
   read against the night instead of blending into it. */
@media (prefers-color-scheme: dark) {
  .utterance__body .glyph { color: var(--gold-bright); }
}

.utterance { margin: 1.25rem 0; }
.utterance__speaker {
  font-family: var(--font-ui);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-dim); margin-bottom: 0.2rem;
}
.utterance--seer .utterance__speaker { color: var(--gold); }
.utterance--seeker .utterance__body { color: var(--ink-dim); }
.utterance--seer .utterance__body { color: var(--ink); }
.utterance__body p { margin: 0 0 0.75rem; }
.utterance__body strong { color: var(--gold); font-weight: 600; }
.utterance__body em { color: var(--ink); }
.utterance__body h1, .utterance__body h2, .utterance__body h3 {
  font-size: 1.05rem; color: var(--gold); margin: 1.25rem 0 0.4rem;
}
.utterance__body ul, .utterance__body ol { margin: 0 0 0.75rem; padding-left: 1.4rem; }
.utterance__body li { margin: 0.25rem 0; }
.utterance__body hr { border: none; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.utterance__body blockquote {
  margin: 0 0 0.75rem; padding-left: 1rem;
  border-left: 2px solid var(--gold-dim); color: var(--ink-dim);
}
.utterance__body code { font-size: 0.9em; color: var(--gold); }
.utterance__body .glyph { color: var(--gold); margin-right: 0.18em; }
.utterance--noted { color: var(--gold-dim); font-style: italic; font-size: 0.9rem; }

/* Phrases in a reading that live on the seeker's own wheel are links to
   their focus page — a dashed gold thread under the words — and readings
   can carry ✦ chips the Seer attached deliberately. Both raise the chart
   sheet on the web and a native sheet in the app. */
.utterance__focus {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; text-decoration: none;
  border-bottom: 1px dashed var(--gold-dim);
  transition: color 0.25s, border-color 0.25s;
}
@media (hover: hover) {
  .utterance__focus:hover { color: var(--gold); border-bottom-color: var(--gold); text-decoration: none; }
}
.utterance__foci { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.utterance__focus--chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.3rem 0.85rem; background: var(--paper-high);
  color: var(--ink-dim); font-size: 0.85rem;
}
@media (hover: hover) {
  .utterance__focus--chip:hover { color: var(--gold); border-color: var(--gold-dim); }
}
.utterance__focus-star { color: var(--gold-bright); margin-right: 0.35em; font-family: var(--font-glyph); font-style: normal; }

/* The word under every ask: what is arithmetic here and what is AI,
   centred beneath the button with a breath of room above it. Written
   as p.consult__provenance so it outweighs .form__hint's own margin
   whichever sheet loads first. */
p.consult__provenance { margin-top: 1.5rem; text-align: center; }

/* A doorway the teach hand laid: the lesson's own figure, drawn small,
   carried into the reading. */
.lesson-card {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 0.6rem; padding: 0.6rem 0.9rem;
  max-width: 24rem;
  border: 1px solid var(--gold-dim); border-radius: 12px;
  background: var(--paper-high);
  color: var(--ink); text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .lesson-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
}
.lesson-card__figure { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 4.5rem; }
.lesson-card__figure svg { width: 4.5rem; height: 4.5rem; }
.lesson-card__glyph { font-size: 2.2rem; color: var(--gold); }
.lesson-card__words { display: flex; flex-direction: column; gap: 0.15rem; }
.lesson-card__label { font-family: var(--font-display); font-size: 1.05rem; }
.lesson-card__star { color: var(--gold-bright); font-family: var(--font-glyph); }
.lesson-card__come { font-size: 0.82rem; color: var(--ink-dim); }

.gazing {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.5rem 0; color: var(--gold-dim); font-style: italic;
}
.gazing__stars { display: inline-flex; gap: 0.35rem; }
.gazing__star {
  color: var(--gold-bright); font-family: var(--font-glyph); font-style: normal;
  animation: gazing-twinkle 1.8s ease-in-out infinite;
}
.gazing__star:nth-child(2) { animation-delay: 0.4s; }
.gazing__star:nth-child(3) { animation-delay: 0.8s; }
@media (prefers-reduced-motion: reduce) {
  .gazing__star { animation: none; opacity: 0.8; }
}

.consult__ask { margin-top: 2rem; }
.consult__ask textarea { width: 100%; }

}

@keyframes gazing-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}