/* Buttons */
.syn-btn, .syn-actions button[type="submit"], .syn-actions .button {
  background:#D71218 !important;
  color:#fff !important;
  border:none;
  border-radius:10px;
  padding:.7rem 1.1rem;
  font-weight:600;
  cursor:pointer;
}
.syn-btn:hover{ filter:brightness(1.05); }

/* Hide server note if present */
.syn-actions .syn-note{ display:none !important; }

/* Progress message */
.syn-progress{ display:none; align-items:center; gap:.6rem; margin-top:.6rem; font-weight:500; }
.syn-progress.active{ display:flex; }
@keyframes syn-spin{ to{ transform:rotate(360deg); } }
.syn-spiral{ width:22px; height:22px; animation:syn-spin 1s linear infinite; }


/* Match sample app form styling (Helvetica, sizes) */
.syn-wrap, .syn-wrap * { box-sizing: border-box; }
.syn-wrap { font-family: Helvetica, Arial, sans-serif; color:#000; }
.syn-row label { font-family: Helvetica, Arial, sans-serif; font-weight:600; color:#000; }
.syn-input, .syn-row input, .syn-row select { 
  font-family: Helvetica, Arial, sans-serif; 
  font-size:16px; 
  color:#000; 
  background:#fff; 
  border:1px solid #888; 
  border-radius:3px; 
  padding:12px;
}
/* Make submit button match sample */
.syn-actions .syn-btn, .syn-btn {
  background:#D71218 !important;
  color:#fff !important;
  border:none;
  border-radius:10px;
  padding:14px;
  font-family: Helvetica, Arial, sans-serif;
  font-size:16px;
  font-weight:600;
}
.syn-actions .syn-btn:hover, .syn-btn:hover { background:#b80f14 !important; }
/* Tighten headings fonts */
.syn-h { font-family: Helvetica, Arial, sans-serif; font-weight:600; color:#000; }

/* Ensure the form anchor isn't hidden under sticky headers */
#syn-calc-form { scroll-margin-top: 96px; }


/* === UX Update (2025-08-29): Remove outer gray borders on form, tables, and writeups === */
#syn-calc-form,
.syn-form,
.syn-section,
.syn-card,
.syn-box,
.syn-report,
.syn-summary,
.syn-relationships,
.syn-writeups,
.syn-zodiac-compat,
.syn-zodiac-relationships {
  border: none !important;
  box-shadow: none !important;
}

/* Remove the outer border on result tables but KEEP cell borders */
.synastry-calculator table,
#syn-results table,
.syn-results table,
.syn-table {
  border: 0 !important;
}
.synastry-calculator table th,
.synastry-calculator table td,
#syn-results table th,
#syn-results table td,
.syn-results table th,
.syn-results table td {
  /* Keep existing cell borders (assumes gray) */
  border-width: 1px !important;
  border-style: solid !important;
  /* Do not force the color; let existing color stand */
}

/* Avoid tables rendering double borders at edges */
.synastry-calculator table {
  border-collapse: collapse;
}

/* ---- Glyphs + mobile compaction + form tweaks (2025-08-30) ---- */
.syn-aspect-cell{white-space:nowrap}
.syn-aspect-cell .syn-aspect-glyph{display:inline-block;margin-right:.35rem;line-height:1}
.syn-aspect-cell .syn-aspect-word{display:inline}
.syn-h-person .syn-head-short{display:none}
.syn-sign-cell .syn-deg{opacity:.75}
@media (max-width:768px){
  .syn-aspect-cell .syn-aspect-word{display:none}
  .syn-h-person .syn-head-long{display:none}
  .syn-h-person .syn-head-short{display:inline}
  .syn-sign-cell .syn-deg{display:none}
}
/* --------------------------------------------------------------- */


/* Aspect cell responsiveness: show glyph+word on desktop, glyph-only on mobile */
.syn-aspect-cell .syn-aspect-glyph { display: inline; }
.syn-aspect-cell .syn-aspect-word  { display: inline; }

@media (max-width: 640px) {
  .syn-aspect-cell .syn-aspect-word { display: none; }
  .syn-aspect-cell .syn-aspect-glyph { display: inline; }
}


/* Mobile width fix for Zodiac Compatibility Relationships writeups */
@media (max-width: 640px) {
  .syn-writeups, .syn-writeups .syn-cards, .syn-writeups .syn-card,
  .syn-writeups .syn-card .syn-card-body, .syn-writeups .syn-card .syn-card-title {
    max-width: 100% !important;
    width: 100% !important;
  }
  .syn-writeups .syn-grid, .syn-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Stronger mobile full-width for writeups and container */
@media (max-width: 900px) {
  .syn-wrap { max-width: 100% !important; padding-left: 12px; padding-right: 12px; }
  .syn-card .syn-writeup { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  /* Ensure any grid wrappers collapse to single column */
  .syn-grid { grid-template-columns: 1fr !important; }
}