/* Astrology app scoped styles */

/* Define custom properties for the astrology app, using main site's variables with fallback */
#main, #app {
  --astro-bg: var(--paper, #f5f3fb);
  --astro-text: var(--ink, #1a1533);
  --astro-muted: var(--muted, #6b657f);
  --astro-line: var(--line, #d9d5e8);
  --astro-gold: var(--vf-gold, #b8860b);
  --astro-btn-bg: var(--btn, #2a2456);
  --astro-btn-text: #ffffff;
  --astro-card-bg: var(--white, #ffffff);
  --astro-shadow: 0 4px 12px rgba(0,0,0,0.05);

  background-color: var(--astro-bg);
  color: var(--astro-text);
  font-size: 16px;
  line-height: 1.6;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  #main, #app {
    --astro-bg: var(--paper, #12101c);
    --astro-text: var(--ink, #eae6f5);
    --astro-muted: var(--muted, #9b94b5);
    --astro-line: var(--line, #38324f);
    --astro-gold: var(--vf-gold, #d4af37);
    --astro-btn-bg: var(--btn, #3f3a6b);
    --astro-btn-text: #ffffff;
    --astro-card-bg: var(--white, #1d1a2e);
    --astro-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
}

/* Ensure all elements within scope use border-box */
#main *, #app *,
#main *::before, #app *::before,
#main *::after, #app *::after {
  box-sizing: border-box;
}

/* General button, input, select, textarea min-height */
#main button,
#app button,
#main select,
#app select,
#main input,
#app input,
#main textarea,
#app textarea {
  min-height: 44px;
  font-size: 16px;
}

/* Hidden attribute */
#main [hidden],
#app [hidden] {
  display: none !important;
}

/* Form layout */
#birth-form.astro-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Each field */
#birth-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#birth-form .field label {
  font-weight: 600;
  font-size: 16px;
}

#birth-form .field legend {
  font-weight: 600;
  font-size: 16px;
  padding: 0;
}

#birth-form .field input,
#birth-form .field select,
#birth-form .field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid var(--astro-line);
  border-radius: 0.5rem;
  background: var(--astro-card-bg);
  color: var(--astro-text);
}

/* Radio group */
#birth-form .radio-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#birth-form input[type="radio"] {
  width: auto;
  min-height: auto;
  margin: 0;
}

/* Submit row and local notice span full width */
#birth-form .submit-row,
#birth-form .local-notice {
  grid-column: 1 / -1;
}

#birth-form .submit-row button {
  width: auto;
  min-width: 200px;
  background: var(--astro-btn-bg);
  color: var(--astro-btn-text);
  border: 1px solid var(--astro-gold);
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

#birth-form .local-notice {
  color: var(--astro-muted);
  font-size: 16px;
  padding: 0.5rem 0;
}

/* Result container */
#app .result {
  margin-top: 1.5rem;
}

/* Tables */
#app .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#app table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  min-width: 0;
}

#app th,
#app td {
  padding: 0.5rem;
  border: 1px solid var(--astro-line);
  text-align: left;
  font-size: 16px;
}

#app th {
  background: var(--astro-bg);
  font-weight: 600;
}

/* Links inside app */
#app a {
  color: var(--astro-gold);
  overflow-wrap: anywhere;
}

#app a:hover {
  text-decoration: underline;
}

/* Details/summary */
#app details {
  margin: 0.5rem 0;
  border: 1px solid var(--astro-line);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

#app summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.125rem;
}

/* Responsive: 2 columns on desktop */
@media (min-width: 600px) {
  #birth-form.astro-form {
    grid-template-columns: 1fr 1fr;
  }
  #birth-form .field.historical-ref-field {
    grid-column: 1 / -1;
  }
  #birth-form .submit-row,
  #birth-form .local-notice {
    grid-column: 1 / -1;
  }
}

@media (min-width: 390px) {
  #main, #app {
    padding: 1.25rem;
  }
}

@media (min-width: 900px) {
  #main, #app {
    padding: 2rem;
  }
  #birth-form.astro-form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  #app .result {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1440px) {
  #main, #app {
    padding: 3rem;
  }
  #birth-form.astro-form,
  #app .result {
    max-width: 900px;
  }
}
@media (prefers-color-scheme: dark) {
  #main,
  #app {
    --astro-btn-text: #14162b;
  }
}