/* SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160 / 192 / 256 / 320 / 384

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */

/* ---------- Universal ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  color: #111;
  overflow-x: hidden;
  overflow-y: scroll;
}

h1,
h2 {
  font-family: "PT Sans", sans-serif;
}

/* ---------- Containers ---------- */

@media only screen and (max-width: 1100px) {
  .main-container {
    padding-top: 120px;
  }
}

/* 2025 upgrade */
@media print {
  .wheel-container {
    /* make Chrome treat it as a real 1 : 1 square box */
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
}

.chart-details {
  position: absolute;
  padding: 0;
  margin: 0;
  margin-left: 24px;
}

.chart-details-visible {
  display: none;
}

.main-container {
  margin-top: 16px;
  display: grid;
  justify-content: center;
  grid-template-rows: 800px;
  grid-template-columns: 700px;
}

.wheel-container {
  background-image: url("/report-calculator/images/empty-wheel-houses.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: grid;
  justify-content: center;
  align-content: center;

  display: none;
}

.form-container {
  margin-top: 24px;
  position: relative;
  border: 1px solid #111;
  border-radius: 8px;
  box-shadow:
    0 1px #aaa,
    12px 12px 12px -8px #aaa;

  align-self: center;
}

/* ---------- Wheel Elements ---------- */

.wheel-signs {
  position: absolute;
}

.signs-image {
  width: 600px;
}

.sign-circle {
  position: absolute;
  border-radius: 50%;
  margin-left: 18px;
  margin-top: 18px;
  width: 564px; /* needed for after chart calculates */
  height: 564px; /* needed for after chart calculates */
}

.sign {
  position: relative; /* relative to see if it will move when other planet is next to it */
  top: -8px; /* -child size/2 */
  left: 274px; /* parent size/2 - child size/2 */
}

.sign-large {
  width: auto;
  height: 16px;
}

.sign-medium {
  width: auto;
  height: 14px;
}

.sign-small {
  width: auto;
  height: 12px;
}

.sign-extra-small {
  width: auto;
  height: 10px;
}

.planet-circle {
  position: absolute;
  border-radius: 50%;
  margin-left: 70px;
  margin-top: 70px;
  width: 460px; /* needed for after chart calculates */
  height: 460px; /* needed for after chart calculates */
}

.planet {
  position: relative; /* relative to see if it will move when other planet is next to it */
  top: -16px; /* -child size/2 */
  left: 214px; /* parent size/2 - child size/2 */
}

/* // Report: added planet names for chart ruler size in report */

.planet-skinny {
  padding-left: 6px;
}

.planet-large,
.chiron {
  width: auto;
  height: 26px;
}

.planet-medium,
.mercury,
.neptune,
.venus,
.pluto {
  width: auto;
  height: 24px;
}

.planet-medium-small,
.saturn,
.sun {
  width: auto;
  height: 23px;
}

.planet-small,
.moon {
  width: auto;
  height: 22px;
}

.planet-extra-small,
.jupiter,
.uranus,
.northnode,
.southnode,
.mars,
.ascendant,
.midheaven-2 {
  width: auto;
  height: 21px;
}

.planet-extra-extra-small,
.midheaven,
.ascendant-2 {
  width: auto;
  height: 19px;
}

.line-circle-outer {
  position: absolute;
  border-radius: 50%;
  margin-left: 25px;
  margin-top: 25px;
  width: 550px;
  height: 550px;
}

.line-circle-inner {
  position: absolute;
  border-radius: 50%;
  margin-left: 140px;
  margin-top: 140px;
  width: 320px;
  height: 320px;
}

.line-outer,
.line-inner {
  display: inline-block;
  border-radius: 2px;

  position: relative;
  width: 4px;
  height: 16px;
  top: -2px; /* -child size/2 */
}

.line-outer {
  left: 273px; /* parent size/2 - child size/2 */
}

.line-inner {
  left: 158px; /* parent size/2 - child size/2 */
}

.retro-circle {
  position: absolute;
  border-radius: 50%;
  margin-left: 88px;
  margin-top: 88px;
  width: 426px;
  height: 426px;
}

.retro {
  position: relative; /* relative to see if it will move when other planet is next to it */
  top: -6px; /* -child size/2 */
  left: 207px; /* parent size/2 - child size/2 */
}

.retro img {
  width: auto;
  height: 12px;
}

.retro-skinny {
  padding-left: 5px;
}

.aspect-circle {
  position: absolute;
  border-radius: 50%;
  margin-left: 146px;
  margin-top: 146px;
  width: 306px;
  height: 306px;
}

.aspect-line {
  display: inline-block;
  /* border-radius: 1px; */

  position: relative;
  width: 1px;
  left: 153px; /* parent size/2 - child size/2 */
}

/* ---------- Form ---------- */

.form {
  font-family: "OpenSans", sans-serif;
  margin-top: -12px;
  margin-left: 0px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-columns: 350px 28px 1px 28px 82px 50px;
  column-gap: 8px;
  row-gap: 4px;
  font-size: 20px;
}

.form input,
select {
  font-family: "OpenSans", sans-serif;
  color: #111;
  font-size: 18px;
  padding: 0 2px;
  height: 28px; /* This explicitly sets the height of the input boxes */
}

.form-title {
  font-family: "PTSans", sans-serif;
  font-size: 36px;
  font-weight: bold;
  grid-column: 1 / 7;
}

.form-desc {
  grid-column: 1 / 7;
  margin-bottom: 4px;
}

.form .name-label {
  grid-column: 1 / 2;
}

.name {
  grid-column: 2 / 7;
}

.date-label {
  grid-column: 1 / 2;
}

.day {
  grid-column: 2 / 3;
}

.month {
  grid-column: 3 / 6;
}

.year {
  grid-column: 6 / 7;
}

.time-label {
  grid-column: 1 / 2;
}

.hour {
  grid-column: 2 / 3;
}

.semicolon {
  grid-column: 3 / 4;
  justify-self: center;
}

.minute {
  grid-column: 4 / 5;
}

.time-format {
  font-size: 16px;
  margin: 3px 0;
  grid-column: 5 / 7;
}

.unknown-time-container {
  margin-top: -12px;
  display: flex;
  align-items: center;
  grid-column: 2 / 7;
  font-size: 18px;
}

.unknown-time-label {
  margin-left: 10px;
  margin-top: -3px;
}

.unknown-time-checkbox {
  margin-top: -14px;
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.location-label {
  grid-column: 1 / 2;
}

.location {
  grid-column: 2 / 7;
}

.email-label {
  grid-column: 1 / 2;
}

.email {
  grid-column: 2 / 7;
}

.terms-checkbox-container,
.newsletter-checkbox-container {
  margin-top: 12px;
  grid-column: 1 / 7;
  display: flex;
  gap: 10px;
}

.terms-checkbox {
  margin-top: 1px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.newsletter-checkbox {
  margin-top: 1px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.calculate {
  margin-top: 18px;
  font-family: "PT Sans", sans-serif;
  color: #eee;
  font-size: 18px;
  grid-column: 1 / 2;
  cursor: pointer;
  border: 1px solid #5d4fad;
  background: #5d4fad;
  border-radius: 4px;
}

.errorMessage {
  margin-bottom: -4px;
  color: red;
  text-align: center;
  grid-column: 1 / 7;
}

/* ---------- Loading message ---------- */

.loader {
  margin: auto;
  margin-top: 20px;
  border: 0px solid #eaf0f6;
  border-radius: 50%;
  border-top: 4px solid #5d4fad;
  width: 60px;
  height: 60px;
  animation: spinner 1.5s linear infinite;

  display: none;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader-text {
  display: none;
  text-align: center;
  padding: 20px;
}

.timeout {
  margin-top: 12px;
  display: none;
  text-align: center;
  color: red;
}

/* ---------- // Report ---------- */

.main-container {
  margin-top: 175px;
}

.report-container {
  display: none;
}

.report-title {
  text-align: center;
  margin-bottom: 48px;
  margin-top: 48px;
}

.section-title {
  /* // AI set font-size to important */
  font-size: 36px !important;
  text-align: center;
  margin-bottom: 24px;
  /* // AI change */
  font-weight: 400;
}

@media print {
  .page-break {
    page-break-before: always;
  }
}

/* ---------- Tables ---------- */
.tables,
.tables-2 {
  display: flex;
  justify-content: center;
}

.tables {
  margin-bottom: 64px;
}

.tables-2 {
  margin-top: -8px;
  margin-bottom: 18px;
}

.placements,
.elements,
.modalities,
.orientation,
.activity {
  margin-top: 16px;
  font-weight: bold;
  border-collapse: collapse;
  margin-right: 64px;
}

.placements {
  margin-left: -12px;
}

.orientation {
  margin-right: 128px;
}

.elements img,
.modalities img {
  transform: scale(0.8);
}

caption {
  font-weight: bold;
  font-size: 24px;
}

.placements caption {
  margin-bottom: 16px;
}

.elements caption,
.modalities caption,
.activity caption {
  margin-bottom: 8px;
}

.aspect-caption {
  margin-bottom: 0px;
  margin-top: 20px;
}

.placements td,
.elements td,
.modalities td,
.orientation td,
.activity td {
  padding-left: 12px;
  padding-right: 12px;
}

.symbol {
  padding-right: 2px !important;
}

.symbol + td {
  padding-left: 2px !important;
}

.placement-header {
  text-decoration: underline;
}

.placements-empty-row {
  height: 12px;
}

.move-sun-left {
  margin-left: -3px;
}

.move-ascendant-right {
  margin-left: 1px;
}

.aspectarian {
  border-collapse: collapse;
  margin-right: -12px;
}

.aspectarian td {
  font-family: "Arial Unicode MS", "Segoe UI Symbol", sans-serif;
  overflow: hidden;
  overflow-y: hidden;
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
  border: 2px solid #555;
  text-align: center;
  font-size: 24px;
}

.aspectarian .a-header {
  border: none;
}

.border-left {
  border-left: 1px solid #555;
}
.border-right {
  border-right: 1px solid #555;
}
.border-top {
  border-top: 1px solid #555;
}
.border-bottom {
  border-bottom: 1px solid #555;
}

.smaller-cell {
  max-width: 12px;
}

/* ---------- Table Colors ---------- */
.aries,
.first,
.fire,
.cardinal,
.angular,
.yang {
  color: #d42e09;
}
.taurus,
.second,
.earth {
  color: #cf7412;
}
.gemini,
.third {
  color: #b6c300;
}
.cancer,
.fourth {
  color: #94c24e;
}
.leo,
.fifth,
.fixed,
.succedent {
  color: #009657;
}
.virgo,
.sixth,
.air {
  color: #44c1a8;
}
.libra,
.seventh {
  color: #00a3ac;
}
.scorpio,
.eighth,
.water,
.yin {
  color: #0066ae;
}
.ophiuchus {
  color: #353535;
}
.sagittarius,
.ninth,
.mutable,
.cadent {
  color: #5600c0;
}
.capricorn,
.tenth {
  color: #8f00c6;
}
.aquarius,
.eleventh {
  color: #c300bf;
}
.pisces,
.twelfth {
  color: #ba5e84;
}

.aspectarian .☌ {
  font-weight: bold;
  color: #353535;
}

.aspectarian .☍ {
  font-weight: bold;
  color: #b90000;
}

.aspectarian .□ {
  font-weight: bold;
  color: #b90000;
}

.aspectarian .△ {
  font-weight: bold;
  color: #0007b8;
}

.aspectarian .⚹ {
  font-weight: bold;
  color: #0007b8;
}

.aspectarian .☌p {
  margin-top: -2px;
  margin-bottom: -6px;
}

.aspectarian .☍p {
  margin-top: -4px;
  margin-bottom: -4px;
}

.aspectarian .□p {
  /* font-size: 18px; */
  margin-top: -2px;
  font-size: 26px;
  margin-bottom: -8px;
}
.aspectarian .△p {
  /* font-size: 19px; */
  margin-top: -2px;
  font-size: 27px;
  margin-bottom: -10px;
}

.aspectarian .⚹p {
  /* font-size: 26px; */
  /* margin-top: -8px; */
  /* margin-bottom: -6px; */
  margin-top: -4px;
  margin-bottom: -3px;
}

.aspect-degrees {
  font-size: 16px;
}

/* ---------- Descriptions ---------- */

.description-container,
.reading-container,
.composition-container {
  margin-top: 48px;
  text-align: justify;
}

.description-container h2 {
  /* margin-bottom: 12px; */
  font-size: 28px;
  /* // AI change */
  font-weight: 400;
}

.consciousness {
  /* margin-top: -12px; */
  margin-bottom: 18px;
}

.report-signs,
.report-houses {
  margin-bottom: 24px;
}

.report-container h2 {
  margin-top: 48px;
  text-transform: capitalize;
  font-weight: 400;
}

.report-container h3 {
  font-size: 24px;
}

.report-p {
  margin-bottom: 24px;
}

.reading-container h2 {
  margin-top: 0px;
  margin-bottom: 8px;
  font-size: 28px;
  /* // AI change */
  font-weight: 400;
}

.composition-container h2 {
  margin-top: 36px;
  margin-bottom: 8px;
  font-size: 28px;
  /* // AI change */
  font-weight: 400;
}

.end-text,
.end-text-top,
.end-text-bottom {
  text-align: center;
  font-weight: bold;
  font-size: 28px;
}

.end-text-top {
  margin-top: 96px;
}

.end-text-bottom {
  margin-bottom: 96px;
}

.margin-right {
  margin-right: 8px;
  margin-left: 2px;
}

.margin-right-sun {
  margin-right: 8px;
}

/* ---------- Yearly Event Calendar ---------- */

.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

.calendar-month {
  flex: 1 1 320px;
  max-width: 100%;
}

.calendar-month-title {
  font-family: "PT Sans", sans-serif;
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccc;
}

.calendar-event {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 8px 0;
  font-size: 16px;
}

.calendar-day {
  font-weight: bold;
  min-width: 20px;
  text-align: right;
}

.calendar-icon {
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.calendar-label {
  flex: 1;
  max-width: 200px;
}

.calendar-label a {
  color: inherit;
  text-decoration: none;
}

.calendar-label a:hover {
  text-decoration: underline;
}

.calendar-house {
  color: #666;
  font-size: 14px;
}

.calendar-empty {
  color: #888;
  font-style: italic;
  margin: 0;
}

/* Icon colors and sizes - matching report palette */
/* New/Full moon circles (○●) are inherently smaller than quarter symbols (◐◑), so use larger font-size */
.calendar-icon.newMoon,
.calendar-icon.fullMoon {
  color: #5d4fad;
  font-size: 30px;
}

.calendar-icon.firstQuarter,
.calendar-icon.thirdQuarter {
  color: #5d4fad;
  font-size: 30px;
}

.calendar-icon.solarEclipse,
.calendar-icon.lunarEclipse {
  color: #c9a227;
  font-size: 30px;
  font-weight: bold;
}

.calendar-icon.outerPlanetStation,
.calendar-icon.fastMoverStation {
  color: #b90000;
  font-size: 16px;
}

/* SD (stations direct) is two characters vs ℞ (retrograde) single symbol, so make it smaller */
.calendar-icon.direct {
  font-size: 14px;
}

/* Aspect symbols - trine (△) renders larger so needs smaller size */
.calendar-icon.transit {
  color: #4a90d9;
  font-size: 18px;
}

.calendar-icon.transit.trine {
  font-size: 14px;
}

.calendar-icon.outerPlanetIngress,
.calendar-icon.fastMoverIngress {
  color: #009657;
  font-size: 18px;
}

/* Planet text colors - matching True Sky chart colors */
.calendar-label .planet-sun {
  color: #b4af00;
}
.calendar-label .planet-moon {
  color: #0053bd;
}
.calendar-label .planet-mercury {
  color: #808080;
}
.calendar-label .planet-venus {
  color: #008401;
}
.calendar-label .planet-mars {
  color: #b90000;
}
.calendar-label .planet-jupiter {
  color: #ff5e00;
}
.calendar-label .planet-saturn {
  color: #8b4513;
}
.calendar-label .planet-uranus {
  color: #00a2b5;
}
.calendar-label .planet-neptune {
  color: #0007b8;
}
.calendar-label .planet-pluto {
  color: #5300c7;
}
.calendar-label .planet-chiron {
  color: #808080;
}

/* ---------- Table of Contents ---------- */

.toc-container {
  max-width: 400px;
  margin: 24px auto 0 auto;
}

.toc-item {
  text-align: center;
  padding: 12px 0;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
}

.toc-item:last-child {
  border-bottom: none;
}

.toc-item a {
  color: #5d4fad;
  text-decoration: none;
}

.toc-item a:hover {
  text-decoration: underline;
}