/* Tables: the ledgers, the chips, and the sign-element coloring. */
@layer components {

/* The twelve dynamic doors under the Between-you table. */
.between-dynamics {
  list-style: none; padding: 0; margin: 0.75rem 0 2.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.between-dynamics__title { margin-top: 2rem; }

.ledger--linked tbody tr { cursor: pointer; }
@media (hover: hover) {
  .ledger--linked tbody tr:hover td { color: var(--gold); }
}
.ledger--linked tbody tr.lit td { color: var(--gold); border-color: var(--gold-dim); }
.ledger--linked .glyph { color: var(--gold-dim); margin-right: 0.45em; }
.ledger--linked tr.lit .glyph { color: var(--gold); }

/* Tables (placements, aspects, synastry) */
.ledger { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.ledger th {
  text-align: left; font-weight: 700; color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--line-strong);
}
.ledger td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--line); }
.ledger td:first-child { color: var(--ink); }
.ledger .ledger__dim { color: var(--ink-dim); }

/* Aspect kinds wear their colors in every table, matching the wheel. */
.ledger__kind--conjunction { color: var(--gold); }
.ledger__kind--trine, .ledger__kind--sextile { color: var(--air); }
.ledger__kind--square, .ledger__kind--opposition { color: var(--fire); }

/* Placements and aspects worn as chips, not ledgers — rows of touchable
   things that read one per line on a phone. */
.placements, .aspects {
  display: grid; gap: 0.45rem 0.8rem;
  margin: 0.8rem 0 2rem; padding: 0; list-style: none;
}
.placements { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.aspects { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.placements__placement, .aspects__aspect {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; font-size: 0.95rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) {
  .placements__placement:hover, .aspects__aspect:hover { border-color: var(--gold-dim); }
}
.placements__placement.lit, .aspects__aspect.lit {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold-bright) 14%, var(--wash));
}
.placements__placement > .glyph, .aspects__aspect > .glyph { color: var(--gold); }
.placements__body, .aspects__body { color: var(--ink); font-weight: 600; }
.placements__retro { color: var(--gold-dim); font-family: var(--font-glyph); }
.placements__position { margin-left: auto; color: var(--ink-dim); font-size: 0.88rem; text-align: right; }
.placements__house {
  flex: none; min-width: 1.5rem; text-align: center;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  color: var(--gold); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.05rem 0.3rem; background: var(--paper);
}
.placements__angle {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--gold);
}
.aspects__kind { flex: none; }
.aspects__aspect--conjunction .aspects__kind { color: var(--gold); }
.aspects__aspect--trine .aspects__kind, .aspects__aspect--sextile .aspects__kind { color: var(--air); }
.aspects__aspect--square .aspects__kind, .aspects__aspect--opposition .aspects__kind { color: var(--fire); }
.aspects__orb { margin-left: auto; color: var(--ink-dim); font-size: 0.8rem; }

/* Sign names wear their element wherever positions appear. */
.sign--fire { color: var(--fire); }
.sign--earth { color: var(--earth); }
.sign--air { color: var(--air); }
.sign--water { color: var(--water); }

/* On narrow screens the ledgers tighten, keep each row on one line, and
   scroll sideways when the sky truly cannot fit the page. */
@media (max-width: 600px) {
  .ledger { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ledger th, .ledger td { padding: 0.4rem 0.5rem; font-size: 0.85rem; white-space: nowrap; }
}

@media (max-width: 760px) {
  .ledger {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ledger th,
  .ledger td {
    white-space: nowrap;
  }
}

}