/* ============================================================
 * Ajajoon — transit-timeline tab styles.
 * Scoped under #ajajoonContainer so they don't leak into the
 * rest of the AstroTark app.
 * ============================================================ */

/* The shared .aspect-grid-container caps content at 800px; the timeline wants
   a bit more horizontal room, so widen the Ajajoon page (ID+class beats the class). */
#ajajoonContainer.ajajoon-page {
    max-width: 1040px;
}

/* Match the Maailma Horoskoop / Transiidid page description style exactly. */
#ajajoonContainer .ajajoon-subtitle {
    text-align: center;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto 20px;
}

/* World / Personal segmented toggle (replaces the birth-data form) */
#ajajoonContainer .ajajoon-mode {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0 auto 10px;
    width: max-content;
    border: 1px solid #d7e3f5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

#ajajoonContainer .ajajoon-mode button {
    appearance: none;
    border: none;
    background: #fff;
    color: #4a6585;
    font: 600 14px inherit;
    padding: 10px 28px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

#ajajoonContainer .ajajoon-mode button + button {
    border-left: 1px solid #d7e3f5;
}

#ajajoonContainer .ajajoon-mode button.active {
    background: #4a90e2;
    color: #fff;
}

#ajajoonContainer .ajajoon-chart-name {
    text-align: center;
    color: #999;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 18px;
}

/* In World mode there is no natal chart — hide the natal-planet picker. */
#ajajoonContainer.mode-world .ajajoon-natal-group {
    display: none;
}

/* ---- Timeline controls / canvas / interpretation (ported, scoped) ---- */

#ajajoonContainer .timeline-container {
    padding: 10px 0 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* Match the Sünnikaart .chart-toolbar style exactly: white card, thin blue
   label bar, compact icon row, sized to content. */
#ajajoonContainer .timeline-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#ajajoonContainer .timeline-control-group {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    width: fit-content;
}

/* Flex line-break — inert on desktop, used only in the phone layout. */
#ajajoonContainer .ajajoon-break { display: none; }


#ajajoonContainer .timeline-control-label {
    font-size: 13px;
    color: #1976D2;
    font-weight: 600;
    background: #E3F2FD;
    width: 100%;
    text-align: center;
    padding: 3px 25px;
}

#ajajoonContainer .timeline-control-content {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 6px 10px;
    flex-wrap: wrap;
}

#ajajoonContainer .planet-toggle,
#ajajoonContainer .aspect-toggle {
    width: 26px;
    height: 28px;
    min-width: 26px;
    min-height: 28px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4;
    filter: grayscale(100%);
}

#ajajoonContainer .planet-toggle path,
#ajajoonContainer .aspect-toggle path {
    transform-origin: center;
}

#ajajoonContainer .planet-toggle.active,
#ajajoonContainer .aspect-toggle.active {
    opacity: 1;
    filter: grayscale(0%);
}




#ajajoonContainer .planet-toggle:hover,
#ajajoonContainer .aspect-toggle:hover {
    transform: scale(1.1);
}

#ajajoonContainer .planet-toggle.unavailable {
    opacity: 0.15;
    filter: grayscale(100%);
}

#ajajoonContainer .timeline-select {
    padding: 8px 30px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    background-color: white;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    /* chevron */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A90E2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
}

#ajajoonContainer .timeline-select:hover { border-color: #4A90E2; }

#ajajoonContainer .timeline-select:focus {
    outline: none;
    border-color: #4A90E2;
}

#ajajoonContainer .timeline-date-display {
    font-size: 14px;
    color: #666;
    padding: 10px 20px;
}

#ajajoonContainer .ajajoon-daterange {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin: 6px 0 0;
}

#ajajoonContainer .timeline-canvas-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 30px 20px;
    margin-bottom: 30px;
    overflow: hidden;
    width: 100%;
}

#ajajoonContainer #timelineCanvas {
    width: 100%;
    height: 420px;
    cursor: default;
    display: block;
}

#ajajoonContainer #timelineCanvas:active { cursor: default; }

#ajajoonContainer .transit-interpretation {
    /* Always visible: shows the click hint until a wave is clicked, then the box. */
    display: block;
    /* Match the reading width of the other pages, even though the chart is wider.
       No card styling here — the inner box provides the Transiidid-style border.
       Kill the global .transit-interpretation white card bg/shadow, otherwise on
       mobile (where this wrapper gets 10px side padding) the white background shows
       in the gutter around the box. */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    max-width: 800px;
    margin: 8px auto 0;
    /* Kill the global .transit-interpretation 30px card padding — the inner box
       insets the text by 20px, same as the Transiidid page. (The extra padding
       made the description text cramped, esp. on mobile.) */
    padding: 0;
    scroll-margin-top: 74px;
}

/* Placeholder prompt shown in the description area before a wave is clicked. */
#ajajoonContainer .ajajoon-hint {
    text-align: center;
    color: #999;
    font-style: italic;
    margin: 0;
    padding: 30px 20px;
    border: 1px dashed #d8dde3;
    border-radius: 6px;
}

/* The interpretation now uses the page's own .aspect-details-content markup,
   so no Ajajoon-specific typography overrides are needed — they would only
   drift from the Transiidid / Maailma Horoskoop pages.
   One exception: the global `.transit-interpretation h3 {font-size:20px}` rule
   (meant for the old panel title) outranks `.content-subtitle` and would make
   the section subtitles 20px instead of the page's 18px — pin them back. */
#ajajoonContainer .transit-interpretation .content-subtitle { font-size: 18px; }

/* ---- Phone ---- */
@media (max-width: 768px) {
    /* Full width on phone; the chart card goes edge-to-edge (negative margins
       cancel the .content 10px side padding) so the timeline is as wide as possible. */
    #ajajoonContainer.ajajoon-page { max-width: 100%; }
    /* width:100% + negative side margins over-constrains the box (browser keeps
       the 100% width and only shifts left → touches left edge, 20px gap on right).
       Expand the width by the two 10px margins so it spans edge-to-edge symmetrically. */
    #ajajoonContainer .timeline-canvas-wrapper { padding: 12px 0; margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }
    /* No extra panel padding — the inner box already insets its text by 20px,
       same as the Transiidid page. (Extra padding here made the text cramped.) */
    #ajajoonContainer .transit-interpretation { max-width: 100%; }

    /* Order: Transiit planeedid → Sünnikaardi planeedid → Aspektid → [break] →
       Vaade → Vahemik → Sildid. The icon groups stay symbol-width (fit-content);
       the invisible full-width break drops the three dropdowns onto one shared row. */
    #ajajoonContainer .timeline-controls > .timeline-control-group:nth-child(1) { order: 1; } /* transit */
    #ajajoonContainer .timeline-controls > .ajajoon-natal-group { order: 2; }                /* natal  */
    #ajajoonContainer .timeline-controls > .timeline-control-group:nth-child(2) { order: 3; } /* aspects */
    #ajajoonContainer .timeline-controls > .ajajoon-break { display: block; flex-basis: 100%; width: 100%; height: 0; margin: 0; order: 4; }
    #ajajoonContainer .timeline-controls > .timeline-control-group:nth-child(4) { order: 5; } /* vaade */
    #ajajoonContainer .timeline-controls > .timeline-control-group:nth-child(5) { order: 6; } /* vahemik */
    #ajajoonContainer .timeline-controls > .timeline-control-group:nth-child(6) { order: 7; } /* sildid */
}

/* On narrow phones the page tab cards inset their tabs by the card's 10px padding
   (≈20px from the viewport edge). The Ajajoon box has no card, so inset it the same
   10px here so its side margin matches the Transiidid / Maailm / Sünnikaart tabs. */
@media (max-width: 600px) {
    #ajajoonContainer .transit-interpretation { padding-left: 10px; padding-right: 10px; }
}