/* =========================================================
   Soul Magic Horoscope — v3
   Placidus only · clean layout
   ========================================================= */

:root {
    --smh-navy:   #1a2340;
    --smh-cream:  #f5f0e8;
    --smh-teal:   #3d8a8a;
    --smh-blush:  #d4a5a5;
    --smh-gold:   #e2c97e;
    --smh-mustard:#c8a94b;
    --smh-text:   #2a2a3a;
    --smh-muted:  #6b6b80;
    --smh-radius: 12px;
    --smh-font-d: 'IM Fell Double Pica','Cormorant Garamond',Georgia,serif;
    --smh-font-b: 'Jost','Gill Sans',system-ui,sans-serif;
}

/* Wrap */
.smh-wrap {
    font-family: var(--smh-font-b);
    color: var(--smh-text);
    max-width: 720px;
    margin: 2rem auto;
    background: var(--smh-cream);
    border-radius: var(--smh-radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(10,15,35,.14);
}

/* Header */
.smh-header {
    background: var(--smh-navy);
    text-align: center;
    padding: 2.8rem 2rem 2.2rem;
}
.smh-moon-icon { font-size: 2.4rem; color: var(--smh-gold); opacity:.7; display:block; margin-bottom:.4rem; }
.smh-title {
    font-family: var(--smh-font-d);
    font-size: clamp(1.7rem,4vw,2.4rem);
    font-weight: 400;
    color: var(--smh-gold);
    margin: 0 0 .6rem;
    letter-spacing: .04em;
}
.smh-subtitle { font-size:.93rem; color: var(--smh-cream); opacity:.78; max-width:440px; margin:0 auto; line-height:1.55; }

/* Form */
.smh-form { padding: 2rem 2rem 1.5rem; }
.smh-form-grid { display:grid; gap:1.4rem; }
.smh-field-group { display:flex; flex-direction:column; gap:.5rem; }
.smh-label { font-family:var(--smh-font-d); font-size:1.05rem; color:var(--smh-navy); letter-spacing:.03em; }
.smh-hint  { font-family:var(--smh-font-b); font-size:.78rem; color:var(--smh-muted); font-weight:400; }
.smh-date-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.smh-field { display:flex; flex-direction:column; gap:.25rem; flex:1; min-width:72px; }

.smh-input {
    font-family: var(--smh-font-b);
    font-size: 1rem;
    padding: .65rem .85rem;
    border: 1.5px solid #ccc8be;
    border-radius: 8px;
    background: #fff;
    color: var(--smh-navy);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    -moz-appearance: textfield;
}
.smh-input::-webkit-outer-spin-button,
.smh-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.smh-input:focus { outline:none; border-color:var(--smh-teal); box-shadow:0 0 0 3px rgba(61,138,138,.18); }

.smh-input-label { font-size:.72rem; color:var(--smh-muted); text-align:center; letter-spacing:.05em; text-transform:uppercase; }
.smh-coord-tip   { font-size:.8rem; color:var(--smh-muted); margin:.3rem 0 0; }
.smh-coord-tip a { color:var(--smh-teal); }

/* Submit button */
.smh-button {
    display:block; width:100%; margin-top:1.5rem;
    padding:.9rem 1.5rem;
    background: var(--smh-navy);
    color: var(--smh-gold);
    border: 2px solid var(--smh-gold);
    border-radius: 50px;
    font-family: var(--smh-font-d);
    font-size: 1.1rem;
    letter-spacing: .12em;
    cursor: pointer;
    transition: background .25s, color .25s;
}
.smh-button:hover   { background:var(--smh-gold); color:var(--smh-navy); }
.smh-button:disabled { opacity:.6; cursor:not-allowed; }
.smh-btn-inner { display:flex; align-items:center; justify-content:center; gap:.6rem; }
.smh-star { font-size:.8em; opacity:.75; }

/* Error */
.smh-error {
    margin-top:.8rem; padding:.7rem 1rem;
    background:#fdf0f0; border:1px solid var(--smh-blush);
    border-radius:8px; color:#8b2020; font-size:.9rem;
}

/* Dividers */
.smh-divider {
    text-align:center;
    font-family: var(--smh-font-d);
    font-size: 1.1rem;
    color: var(--smh-navy);
    letter-spacing: .08em;
    padding: 1.8rem 2rem .9rem;
    position: relative;
}
.smh-divider::before, .smh-divider::after {
    content:''; position:absolute; top:50%; width:15%; height:1px;
}
.smh-divider::before { left:0; background:linear-gradient(to right, transparent, var(--smh-mustard)); }
.smh-divider::after  { right:0; background:linear-gradient(to left,  transparent, var(--smh-mustard)); }
.smh-divider--transit { color:var(--smh-teal); padding-top:2.2rem; }

/* Natal cards */
.smh-planets-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}
@media(max-width:580px){ .smh-planets-grid { grid-template-columns:repeat(2,1fr); } }

.smh-planet-card {
    background: var(--smh-navy);
    border-radius: var(--smh-radius);
    padding: 1.3rem 1rem 1.1rem;
    text-align: center;
    color: var(--smh-cream);
    border: 1px solid rgba(226,201,126,.2);
}
.smh-planet-symbol { font-size:1.8rem; color:var(--smh-gold); margin-bottom:.3rem; line-height:1; }
.smh-planet-name   { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-bottom:.45rem; }
.smh-planet-sign   { font-family:var(--smh-font-d); font-size:1.15rem; color:var(--smh-gold); display:flex; align-items:center; justify-content:center; gap:.3rem; }
.smh-planet-degree { font-size:.75rem; opacity:.55; margin-top:.25rem; }

/* Transit cards */
.smh-transit-intro { text-align:center; font-size:.87rem; color:var(--smh-muted); padding:.2rem 2rem .9rem; margin:0; font-style:italic; }

.smh-transit-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}
@media(max-width:500px){ .smh-transit-grid { grid-template-columns:1fr; } }

.smh-transit-card {
    background:#fff;
    border: 1.5px solid #e0dbd0;
    border-radius: var(--smh-radius);
    padding: 1.3rem 1.2rem;
}
.smh-transit-header { display:flex; align-items:center; gap:.45rem; margin-bottom:.65rem; }
.smh-transit-symbol { font-size:1.4rem; color:var(--smh-teal); }
.smh-transit-label  { font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--smh-muted); }
.smh-transit-sign   { font-family:var(--smh-font-d); font-size:1.2rem; color:var(--smh-navy); display:flex; align-items:center; gap:.3rem; margin-bottom:.35rem; }
.smh-tr-degree      { font-size:.75rem; color:var(--smh-muted); margin-left:.1rem; }
.smh-transit-house  { font-size:.9rem; color:var(--smh-teal); margin-bottom:.45rem; }
.smh-house-meaning  { font-size:.81rem; color:var(--smh-muted); line-height:1.5; border-top:1px solid #e5e0d8; padding-top:.45rem; margin-top:.35rem; font-style:italic; }

/* Cusp table */
.smh-cusp-section  { padding:1rem 1.5rem 1.2rem; text-align:center; }
.smh-cusp-toggle {
    font-family: var(--smh-font-d);
    font-size: .95rem;
    letter-spacing: .07em;
    background: none;
    border: 1.5px solid var(--smh-mustard);
    color: var(--smh-navy);
    border-radius: 50px;
    padding: .5rem 1.4rem;
    cursor: pointer;
    transition: background .2s;
}
.smh-cusp-toggle:hover { background:var(--smh-mustard); }
.smh-cusp-wrap { margin-top:.9rem; overflow-x:auto; }
.smh-cusp-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.smh-cusp-table th { background:var(--smh-navy); color:var(--smh-gold); font-family:var(--smh-font-d); font-weight:400; letter-spacing:.06em; padding:.5rem .9rem; text-align:left; }
.smh-cusp-table td { padding:.45rem .9rem; border-bottom:1px solid #e0dbd0; }
.smh-cusp-table tr:nth-child(even) td { background:#ece7df; }
.smh-cusp-table td:first-child { font-family:var(--smh-font-d); color:var(--smh-navy); }

/* Footer note */
.smh-note { font-size:.78rem; color:var(--smh-muted); text-align:center; padding:.5rem 2rem 2rem; line-height:1.55; }

/* Reveal animation */
.smh-results { animation: smh-in .45s ease; }
@keyframes smh-in {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}