/* Learn: the Seer's vocabulary, laid out for the curious */
@layer components {

.learn__contents { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2rem; font-size: 0.85rem; }
.learn__contents a { color: var(--gold); text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-ui); font-weight: 700; }
@media (hover: hover) {
  .learn__contents a:hover { color: var(--ink); }
}
.learn { max-width: 42rem; margin-bottom: 2.5rem; }
.learn h3 { margin-top: 1.5rem; }
.learn__list { margin: 0.8rem 0 0; }
.learn__list dt { color: var(--ink); font-weight: 600; margin-top: 0.7rem; }
.learn__list dt .glyph { color: var(--gold); margin-right: 0.4em; }
.learn__list dd { margin: 0.1rem 0 0; color: var(--ink-dim); font-size: 0.92rem; }
.learn__list--houses dt { display: inline-block; min-width: 2.6rem; margin-right: 0.4rem; }
.learn__list--houses dd { display: inline; }
.learn__list--houses dd::after { content: ""; display: block; }

/* Each element's family wears its color — you learn the elements by eye. */
.learn__group { border-left: 3px solid var(--line); padding-left: 1rem; margin-top: 1.25rem; }
.learn__group--fire { border-color: var(--fire); }
.learn__group--earth { border-color: var(--earth); }
.learn__group--air { border-color: var(--air); }
.learn__group--water { border-color: var(--water); }
.learn__group--fire h3, .learn__group--fire dt .glyph { color: var(--fire); }
.learn__group--earth h3, .learn__group--earth dt .glyph { color: var(--earth); }
.learn__group--air h3, .learn__group--air dt .glyph { color: var(--air); }
.learn__group--water h3, .learn__group--water dt .glyph { color: var(--water); }
.learn__group h3 { margin-top: 0; }

/* The aspects, drawn at their true angles. */
.aspect-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.aspect-card {
  padding: 1rem; text-align: center;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.aspect-card__name { font-size: 1.05rem; margin: 0.5rem 0 0.2rem; }
.aspect-card__name .glyph { color: var(--gold); margin-right: 0.25em; }
.aspect-card__gloss { margin: 0; color: var(--ink-dim); font-size: 0.82rem; line-height: 1.45; }
.aspect-figure { width: 5.5rem; height: 5.5rem; }
.aspect-figure__ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.aspect-figure__chord { stroke-width: 2.5; stroke-linecap: round; }
.aspect-figure__body { fill: var(--ink); }
.aspect-figure__body--other { fill: var(--gold-bright); }
.aspect-figure--conjunction .aspect-figure__body--other { fill: var(--gold-bright); }
.aspect-figure--trine .aspect-figure__chord, .aspect-figure--sextile .aspect-figure__chord { stroke: var(--air); }
.aspect-figure--square .aspect-figure__chord { stroke: var(--fire); }
.aspect-figure--opposition .aspect-figure__chord { stroke: var(--water); }

/* Learn's constellation: topic tiles with little drawn figures, and the
   rings and cards inside each lesson. */
.tiles--teachings .tile { align-items: flex-start; }
.tile.tile--fire { --accent: var(--fire); }
.tile.tile--earth { --accent: var(--earth); }
.tile.tile--air { --accent: var(--air); }
.tile.tile--water { --accent: var(--water); }
.tile.tile--gold { --accent: var(--gold-bright); }
.tile__figure { display: block; margin: 0.2rem auto 0.3rem; }
.tile__figure svg { display: block; }
.tile__figure--glyphs {
  display: flex; gap: 0.6rem; align-items: center; justify-content: center;
  min-height: 5rem; font-size: 1.9rem; color: var(--gold-bright);
}

.lesson-ring { margin: 0 0 2rem; text-align: center; }
.lesson-ring svg { display: inline-block; }

.zodiac-ring__wedge { stroke: var(--halo); stroke-width: 0.75; }
.zodiac-ring__wedge--fire { fill: color-mix(in srgb, var(--fire) 22%, var(--wash)); }
.zodiac-ring__wedge--earth { fill: color-mix(in srgb, var(--earth) 22%, var(--wash)); }
.zodiac-ring__wedge--air { fill: color-mix(in srgb, var(--air) 22%, var(--wash)); }
.zodiac-ring__wedge--water { fill: color-mix(in srgb, var(--water) 22%, var(--wash)); }
.zodiac-ring__wedge--dim { fill: var(--paper); }
.zodiac-ring__glyph {
  font-family: var(--font-glyph); font-size: 10px;
  text-anchor: middle; dominant-baseline: central;
}
.zodiac-ring__glyph--fire { fill: var(--fire); }
.zodiac-ring__glyph--earth { fill: var(--earth); }
.zodiac-ring__glyph--air { fill: var(--air); }
.zodiac-ring__glyph--water { fill: var(--water); }
.zodiac-ring__glyph--dim { fill: var(--line-strong); }

.house-ring__room { fill: var(--paper-high); stroke: var(--line-strong); stroke-width: 0.75; }
.house-ring__room--angular { fill: color-mix(in srgb, var(--gold-bright) 20%, var(--wash)); }
.house-ring__number {
  font-family: var(--font-ui); font-size: 9px; fill: var(--ink-dim);
  text-anchor: middle; dominant-baseline: central;
}

/* Lit: the chart's own contents glow on the lesson rings. */
.zodiac-ring__wedge--lit { stroke: var(--gold-bright); }
.zodiac-ring__wedge--fire.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--fire) 40%, var(--wash)); }
.zodiac-ring__wedge--earth.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--earth) 40%, var(--wash)); }
.zodiac-ring__wedge--air.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--air) 40%, var(--wash)); }
.zodiac-ring__wedge--water.zodiac-ring__wedge--lit { fill: color-mix(in srgb, var(--water) 40%, var(--wash)); }
.zodiac-ring__mark {
  font-family: var(--font-glyph); font-size: 8px; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central;
}
.house-ring__room--lit { fill: color-mix(in srgb, var(--gold-bright) 34%, var(--wash)); stroke: var(--gold-dim); }
.house-ring__number--lit { fill: var(--ink); font-weight: 700; }

/* The worked example's voice: ✦-led captions and the ring's byline. */
.lesson-ring__caption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-dim); font-style: italic; }
.learn__example { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }
.learn__example-star, .sign-card__tenants .glyph, .planet-card__example .glyph { color: var(--gold-bright); }
.sign-card__tenants, .planet-card__example, .house-list__tenants, .aspect-card__example {
  font-size: 0.8rem; color: var(--ink-dim); text-wrap: pretty;
}
.aspect-card__example { margin: 0.4rem 0 0; }

.learn__list .planet-card__example { display: block; margin-top: 0.3rem; }

/* Every tile is a hand raised: tap one and it takes the spotlight. */
a.sign-card, a.planet-card, a.aspect-card { color: inherit; }
.sign-card, .planet-card, .aspect-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) {
  a.sign-card:hover, a.planet-card:hover, a.aspect-card:hover {
    text-decoration: none; transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(62, 50, 120, 0.16);
  }
}
.house-list__link {
  display: flex; gap: 0.7rem; align-items: baseline; flex: 1;
  color: inherit; text-decoration: none;
}
@media (hover: hover) {
  .house-list__link:hover { text-decoration: none; }
  .house-list__link:hover .house-list__meaning { color: var(--ink); }
}

/* The spotlight's mini chart: the concept at lesson fidelity — the one
   wanderer under the lamp steps forward, the rest recede; the big chart
   is a button away. */
.zodiac-ring__mark--lit { font-size: 12px; fill: var(--gold); }
.zodiac-ring__mark--dim { opacity: 0.35; }
.aspect-figure__glyph {
  font-family: var(--font-glyph); font-size: 11px; fill: var(--ink);
  text-anchor: middle; dominant-baseline: central;
}

/* A taught concept wears a gold halo and scrolls into reach. */
.sign-card--taught, .planet-card--taught, .aspect-card--taught, .house-list__house--taught {
  border: 1px solid var(--gold-bright);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-bright) 30%, transparent);
}
.sign-card--taught, .planet-card--taught, .aspect-card--taught,
.house-list__house--taught, .learn__group { scroll-margin-top: 5rem; }

/* The spotlight: a doorway from a reading lands on the one concept it
   promised — its figure drawn large beside the glossary's telling and the
   sky it applies to, with the whole lesson flowing below. */
.spotlight {
  display: flex; align-items: center; gap: 1.6rem;
  margin: 0 0 2.4rem; padding: 1.5rem 1.7rem;
  border: 1px solid var(--gold-dim); border-radius: 16px;
  background: linear-gradient(color-mix(in srgb, var(--gold-bright) 9%, var(--paper-high)), var(--paper-high));
  box-shadow: var(--shadow);
}
.spotlight__figure { flex-shrink: 0; margin: 0; display: flex; align-items: center; justify-content: center; width: 10rem; }
.spotlight__figure svg { width: 10rem; height: 10rem; display: block; }
.spotlight__glyph { font-size: 4.5rem; line-height: 1; color: var(--gold); }
.spotlight__kicker {
  margin: 0; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold);
}
.spotlight__title { margin: 0.1rem 0 0.35rem; }
.spotlight__text { margin: 0 0 0.4rem; color: var(--ink-dim); }
.spotlight__chip { margin-top: 0.5rem; }
.spotlight__more { margin: 0.9rem 0 0; font-family: var(--font-ui); font-size: 0.88rem; }
@media (max-width: 540px) {
  .spotlight { flex-direction: column; text-align: center; }
  .spotlight__words { display: flex; flex-direction: column; align-items: center; }
}

.sign-cards, .planet-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem; margin-top: 0.8rem;
}
.sign-card, .planet-card {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.9rem 1rem; text-align: center;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow);
}
.sign-card__glyph, .planet-card__glyph { font-size: 1.7rem; }
.sign-card--fire .sign-card__glyph { color: var(--fire); }
.sign-card--earth .sign-card__glyph { color: var(--earth); }
.sign-card--air .sign-card__glyph { color: var(--air); }
.sign-card--water .sign-card__glyph { color: var(--water); }
.planet-card__glyph { color: var(--gold); }
.sign-card__name, .planet-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.sign-card__dates { font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.sign-card__text, .planet-card__text { font-size: 0.82rem; color: var(--ink-dim); line-height: 1.45; }

.house-list { columns: 2; gap: 2rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.house-list__house { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.3rem 0; break-inside: avoid; }
.house-list__number {
  flex: none; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; color: var(--gold);
  background: var(--paper-high);
}
.house-list__meaning { color: var(--ink-dim); font-size: 0.92rem; }
@media (max-width: 600px) {
  .house-list { columns: 1; }
}

/* A concept drilled into: the walk to its neighbours, and the way back up
   to the lesson it belongs to. */
.concept-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.concept-nav__step {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--ink-dim);
  text-decoration: none;
}
@media (hover: hover) {
  .concept-nav__step:hover { color: var(--gold); text-decoration: none; }
}
.concept-nav__step--on { margin-left: auto; text-align: right; }
.concept-nav__arrow { color: var(--gold); }
.concept-all { font-family: var(--font-ui); font-size: 0.85rem; text-align: center; }

/* The rest of an element's signs, offered at the foot of one of them. */
.concept-kin { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.concept-kin__sign {
  padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-dim); text-decoration: none;
}
@media (hover: hover) {
  .concept-kin__sign:hover { color: var(--gold); border-color: var(--gold); text-decoration: none; }
}
.concept-kin__sign--here { color: var(--gold); border-color: var(--gold); font-weight: 700; }

}