/*
 * auspicer-styles.css
 * EarthCal Auspices Engine — Display Styles
 *
 * Sections
 * --------
 * 1. AUSPICER PALETTE WRAPPER
 * 2. AUSPICE DISPLAY ELEMENTS (generic)
 * 3. LUNAR AUSPICE DISPLAY (lunar-specific)
 * 4. SOLAR AUSPICE DISPLAY (solar-specific)
 * 5. MODAL POSITIONING
 * 6. EC-LUNAR-AUSPICES PANEL (renderLunarAuspices / renderAuspices output)
 * 7. RESPONSIVE OVERRIDES
 */


/* =========================================================
   1. AUSPICER PALETTE WRAPPER
   Generic wrapper for all auspice displays in forms.
   ========================================================= */

.auspicer-pallette {
    width: 70%;
    max-width: 600px;
    margin: 10px auto;
    color: var(--text-color);
}


/* =========================================================
   2. AUSPICE DISPLAY ELEMENTS — Generic
   Non-layer-specific. Used for the loading placeholder and
   as base classes for both lunar and solar display.
   ========================================================= */

.ec-auspice-details {
    width: 100%;
    line-height: 1.25;
}

.auspicer-pallette .ec-auspice-details {
    max-width: 70%;
    margin: auto;
}

.ec-auspice-emoji {
    font-size: 2.4rem;
    line-height: 1;
}

.ec-auspice-name {
    font-weight: 600;
    font-size: 0.9em;
}

.ec-auspice-metric {
    font-size: 0.76em;
    color: var(--subdued-text);
}

.ec-auspice-metric + .ec-auspice-metric {
    margin-top: 2px;
}


/* =========================================================
   3. LUNAR AUSPICE DISPLAY
   Lunar-specific display classes. Intentionally named with
   moon/lunar prefixes — these are lunar by design.
   ========================================================= */

.ec-moon-phase-emoji {
    font-size: 2.4rem;
    line-height: 1;
}

.ec-moon-phase-details {
    width: 100%;
    line-height: 1.25;
}

.auspicer-pallette .ec-moon-phase-details {
    max-width: 70%;
    margin: auto;
}

.ec-moon-phase-name {
    font-weight: 600;
    font-size: 0.9em;
}

.ec-moon-phase-metric {
    font-size: 0.76em;
    color: var(--subdued-text);
}

.ec-moon-phase-metric + .ec-moon-phase-metric {
    margin-top: 2px;
}


/* =========================================================
   4. SOLAR AUSPICE DISPLAY
   Solar-specific display classes.
   ========================================================= */

.ec-solar-phase-emoji {
    font-size: 2.4rem;
    line-height: 1;
}

.ec-solar-phase-name {
    font-weight: 600;
    font-size: 0.9em;
}

.ec-solar-phase-metric {
    font-size: 0.76em;
    color: var(--subdued-text);
}

.ec-solar-phase-metric + .ec-solar-phase-metric {
    margin-top: 2px;
}


/* =========================================================
   5. MODAL POSITIONING — Auspicer Palette
   When the auspicer is displayed inside the Add Date modal,
   it floats fixed at the top of the viewport.
   ========================================================= */

#modal-content .add-date-form .auspicer-pallette,
#modal-content .ec-add-form .auspicer-pallette {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    max-width: 600px;
    margin: 0;
    z-index: 55;
}

#modal-content .add-date-form .ec-moon-phase-emoji,
#modal-content .ec-add-form .ec-moon-phase-emoji {
    display: none;
}

#modal-content .add-date-form .ec-moon-phase-details,
#modal-content .ec-add-form .ec-moon-phase-details {
    width: 100%;
    max-width: 100%;
}

#modal-content .add-date-form .ec-auspice-details,
#modal-content .ec-add-form .ec-auspice-details {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   6. EC-LUNAR-AUSPICES PANEL
   Styles for the .ec-lunar-auspices component rendered by
   SunCalc.renderLunarAuspices() and SunCalc.renderAuspices().
   Used both in the dash bottom-left panel and inside the
   modal auspicer palette.
   ========================================================= */

/* Dash panel — bottom-left corner on desktop */
#lunar-auspices-dash-panel {
    display: none;
    position: fixed;
    bottom: 55px;
    left: 20px;
    width: 365px;
    z-index: 37;
    font-family: 'Mulish', sans-serif;
}

#lunar-auspices-dash-panel .ec-lunar-auspices {
    background: var(--grey-trans, rgba(255,255,255,0.91));
    color: var(--text-color, #242424);
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 14px;
    font-family: 'Mulish', sans-serif;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

/* Core card */
.ec-lunar-auspices {
    width: 100%;
    max-height: 77px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    box-sizing: border-box;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 14px;
    padding: 10px 14px 6px;
    background: var(--grey-trans, rgba(255,255,255,0.91));
    color: var(--text-color, #242424);
    font-size: 0.92rem;
    line-height: 1.3;
    position: relative;
    text-align: left;
}
.ec-lunar-auspices.is-expanded { max-height: 1200px; }

/* Header row */
.ec-lunar-auspices .ec-lunar-auspices__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.ec-lunar-auspices .ec-lunar-auspices__emoji {
    font-size: 1.9rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.ec-lunar-auspices .ec-lunar-auspices__labels {
    min-width: 0;
    flex: 1;
    text-align: left;
}
.ec-lunar-auspices .ec-lunar-auspices__primary {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px 0;
    color: var(--text-color, #242424);
    text-align: left;
}
.ec-lunar-auspices .ec-lunar-auspices__secondary {
    font-size: 0.82rem;
    color: var(--subdued-text, #454545);
    margin: 0 0 2px 0;
    text-align: left;
    line-height: 1.2;
}
.ec-lunar-auspices .ec-lunar-auspices__effect {
    font-size: 0.83rem;
    color: var(--subdued-text, #454545);
    margin: 2px 0 0 0;
    line-height: 1.25;
}

/* Header right: stage badge + button row */
.ec-lunar-auspices .ec-lunar-auspices__header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ec-lunar-auspices .ec-lunar-auspices__stage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.70rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--toggle-row-bg, rgba(197,196,193,0.49));
    color: var(--subdued-text, #454545);
    border: 1px solid rgba(127,127,127,0.18);
    white-space: nowrap;
}
.ec-lunar-auspices .ec-lunar-auspices__btn-row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ec-lunar-auspices .ec-lunar-auspices__expand-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.ec-lunar-auspices .ec-lunar-auspices__expand-btn::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(90,90,90,0.70);
    border-bottom: 1px solid rgba(90,90,90,0.70);
    transform: rotate(45deg);
    position: relative;
    top: -3px;
    transition: transform 0.25s ease, top 0.25s ease;
}
.ec-lunar-auspices.is-expanded .ec-lunar-auspices__expand-btn::after {
    transform: rotate(-135deg);
    top: 3px;
}
.ec-lunar-auspices .ec-lunar-auspices__close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: rgba(90,90,90,0.60);
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}
.ec-lunar-auspices .ec-lunar-auspices__close-btn:hover {
    background: rgba(127,127,127,0.12);
    color: rgba(90,90,90,0.90);
}

/* Body */
.ec-lunar-auspices .ec-lunar-auspices__body { padding-top: 8px; }
.ec-lunar-auspices .ec-lunar-auspices__guidance {
    display: none;
    font-size: 0.91rem;
    margin: 0 0 10px 0;
    color: var(--text-color, #242424);
}
.ec-lunar-auspices.is-expanded .ec-lunar-auspices__guidance { display: block; }

/* Tags */
.ec-lunar-auspices .ec-lunar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 10px 0;
}
.ec-lunar-auspices .ec-lunar-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.73rem;
    border: 1px solid rgba(127,127,127,0.18);
    color: var(--text-color, #242424);
}

/* Warnings */
.ec-lunar-auspices .ec-lunar-warning {
    margin: 0 0 10px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(220,170,80,0.14);
    border: 1px solid rgba(220,170,80,0.28);
    color: var(--text-color, #242424);
}
.ec-lunar-auspices .ec-lunar-warning__title,
.ec-lunar-auspices .ec-lunar-actions__title {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--subdued-text, #454545);
    margin-bottom: 5px;
}
.ec-lunar-auspices .ec-lunar-warning__item {
    font-size: 0.84rem;
    margin-bottom: 4px;
}

/* Actions */
.ec-lunar-auspices .ec-lunar-actions__list {
    margin: 0;
    padding-left: 16px;
    text-align: left;
}
.ec-lunar-auspices .ec-lunar-actions__item {
    margin: 0 0 3px 0;
    font-size: 0.86rem;
    text-align: left;
}

/* Ensure all lists inside panel are left-aligned */
.ec-lunar-auspices ul,
.ec-lunar-auspices ol,
.ec-lunar-auspices li,
.ec-lunar-auspices .ec-biodynamic-council__list {
    text-align: left;
}

/* Data sections: lunar + solar */
.ec-lunar-auspices .ec-lunar-data,
.ec-lunar-auspices .ec-biodynamic-council {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(127,127,127,0.18);
}
.ec-lunar-auspices .ec-lunar-data__title,
.ec-lunar-auspices .ec-biodynamic-council__title {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--subdued-text, #454545);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ec-lunar-auspices .ec-lunar-data__toggle,
.ec-lunar-auspices .ec-biodynamic-council__toggle {
    background: none;
    border: 1px solid rgba(127,127,127,0.28);
    border-radius: 3px;
    cursor: pointer;
    color: var(--subdued-text, #454545);
    font-size: 0.80rem;
    padding: 0 3px;
    font-weight: 700;
    line-height: 1.3;
}
.ec-lunar-auspices .ec-lunar-data__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 14px;
    margin: 0;
    font-size: 0.82rem;
}
.ec-lunar-auspices .ec-lunar-data__grid dd { margin: 0; }
.ec-lunar-auspices .ec-lunar-auspices__empty {
    color: var(--subdued-text, #454545);
    font-style: italic;
}

/* Biodynamic council */
.ec-lunar-auspices .ec-biodynamic-council__body { display: none; font-size: 0.84rem; }
.ec-lunar-auspices .ec-biodynamic-council__label { font-weight: 700; margin-bottom: 4px; font-size: 0.88rem; }
.ec-lunar-auspices .ec-biodynamic-council__summary { margin-bottom: 6px; line-height: 1.35; }
.ec-lunar-auspices .ec-biodynamic-council__counsel { font-style: italic; margin-bottom: 8px; line-height: 1.35; }
.ec-lunar-auspices .ec-biodynamic-council__section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--subdued-text, #454545);
    margin: 6px 0 3px 0;
}
.ec-lunar-auspices .ec-biodynamic-council__list { margin: 0 0 6px 0; padding-left: 16px; }
.ec-lunar-auspices .ec-biodynamic-council__warning {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(220,170,80,0.14);
    border: 1px solid rgba(220,170,80,0.28);
    margin-top: 6px;
}


/* =========================================================
   7. ANCESTRAL EXAMPLE SECTION
   ========================================================= */

.ec-lunar-auspices .ec-ancestral-example {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(127,127,127,0.15);
}

.ec-lunar-auspices .ec-ancestral-example__title {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--subdued-text, #454545);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ec-lunar-auspices .ec-ancestral-example__toggle {
    background: none;
    border: 1px solid rgba(127,127,127,0.28);
    border-radius: 3px;
    cursor: pointer;
    color: var(--subdued-text, #454545);
    font-size: 0.80rem;
    padding: 0 3px;
    font-weight: 700;
    line-height: 1.3;
}

.ec-lunar-auspices .ec-ancestral-example__body {
    display: none;
    margin-top: 6px;
    font-size: 0.84rem;
    font-family: 'Mulish', sans-serif;
}

.ec-lunar-auspices .ec-ancestral-example__culture {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--subdued-text, #454545);
    margin-bottom: 3px;
}

.ec-lunar-auspices .ec-ancestral-example__practice-title {
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 0.86rem;
}

.ec-lunar-auspices .ec-ancestral-example__summary {
    line-height: 1.4;
    margin-bottom: 6px;
}

.ec-lunar-auspices .ec-ancestral-example__notes {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--subdued-text, #454545);
    border-left: 2px solid rgba(127,127,127,0.25);
    padding-left: 8px;
    line-height: 1.35;
}


/* =========================================================
   8. RESPONSIVE OVERRIDES
   ========================================================= */

@media screen and (max-width: 768px) {
    .auspicer-pallette {
        width: 100%;
        max-width: 100%;
    }
}