/* ══════ ЖИЗНЕННЫЕ ПЕРИОДЫ — компактная строка под таблицей карты ══════ */
/* Задача блока — не занимать место. Главное на странице остаётся текст разбора,
   поэтому здесь только суть в три строки, а календарь скрыт до клика. */

#dashaBlock {
    display:none; margin-top:.8rem;
    animation:fadeUp .6s forwards;
}
#dashaBlock.visible { display:block; }

/* Два блока рядом: слева периоды жизни, справа сегодняшний день */
.dasha-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    align-items:start;
}
.dasha-grid.one { grid-template-columns:1fr; }
@media (max-width:640px){
    .dasha-grid { grid-template-columns:1fr; }
}

.dasha-section {
    background:rgba(13,8,32,.4);
    border:1px solid rgba(107,63,160,.12);
    padding:.9rem .9rem .75rem;
}
/* Правый блок про день — прохладнее, чтобы не спорить с главным */
.dasha-today { background:rgba(13,8,32,.28); }
.dasha-main-sm { font-size:1.2rem; line-height:1.3; }
/* Время — не заголовочным шрифтом: у Cormorant старинные цифры,
   и «15:10» читается как «I5:IO» */
.dasha-time {
    display:block;
    font-family:'Nunito Sans',sans-serif;
    font-size:1.28rem; font-weight:600; letter-spacing:.01em;
    font-variant-numeric:tabular-nums;
    color:#E8C77A; margin-top:.2rem;
}
.dasha-lines-today { margin-top:.2rem; }

.dasha-note {
    margin-top:.7rem; padding-top:.5rem;
    border-top:1px solid rgba(212,165,74,.1);
    font-size:.74rem; line-height:1.5;
    color:rgba(255,255,255,.4);
}

/* ── Шапка: одна смысловая строка ── */
.dasha-head { text-align:center; }

.dasha-eyebrow {
    display:block;
    font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.42); margin-bottom:.25rem;
}
.dasha-main {
    display:block;
    font-family:'Cormorant Garamond',serif;
    font-size:1.5rem; line-height:1.2; color:#E8C77A; font-weight:600;
}
.dasha-sym { opacity:.6; font-size:1.1rem; margin-right:.15rem; }
.dasha-until {
    display:block;
    font-size:.8rem; color:rgba(255,255,255,.55); margin-top:.2rem;
}

/* ── Полоса прогресса ── */
.dasha-bar {
    height:4px; border-radius:999px; background:rgba(255,255,255,.08);
    margin:.7rem 0 .7rem; overflow:hidden;
}
.dasha-bar-fill {
    height:100%; border-radius:999px;
    background:linear-gradient(90deg,#8E6BC4,#D4A54A);
}

/* ── Две короткие строки: тема и под-период ── */
.dasha-lines { display:flex; flex-direction:column; gap:.3rem; }

.dasha-line {
    display:flex; align-items:baseline; gap:.6rem;
    font-size:.84rem; line-height:1.45;
}
.dasha-k {
    flex:0 0 auto;
    font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.38);
    min-width:104px;
}
.dasha-v { color:rgba(255,255,255,.78); }

/* ── Скрытый календарь ── */
.dasha-more { margin-top:.7rem; }
.dasha-more > summary {
    cursor:pointer; list-style:none;
    font-size:.76rem; color:var(--gold); opacity:.8;
    padding:.35rem 0 .1rem;
    border-top:1px solid rgba(212,165,74,.12);
    transition:opacity .2s;
}
.dasha-more > summary:hover { opacity:1; }
.dasha-more > summary::-webkit-details-marker { display:none; }
.dasha-more > summary::after {
    content:' ▾'; font-size:.7rem; opacity:.7;
}
.dasha-more[open] > summary::after { content:' ▴'; }

.dasha-tl { margin-top:.5rem; }
.dasha-tl-row {
    display:flex; align-items:baseline; gap:.45rem;
    padding:.32rem .5rem;
    border-radius:5px; margin-bottom:.2rem;
    background:rgba(255,255,255,.03);
    font-size:.8rem;
}
.dasha-tl-row.past { opacity:.4; }
.dasha-tl-row.now  {
    background:rgba(212,165,74,.12);
    border:1px solid rgba(212,165,74,.28);
}
.dasha-tl-sym  { color:var(--gold); opacity:.65; flex:0 0 auto; }
.dasha-tl-lord { color:#F3E9D2; font-weight:600; flex:0 0 auto; }
.dasha-tl-row.now .dasha-tl-lord { color:#E8C77A; }
.dasha-tl-dates {
    margin-left:auto; flex:0 0 auto; white-space:nowrap;
    color:rgba(255,255,255,.48); font-size:.75rem;
}

.dasha-origin {
    margin-top:.5rem;
    font-size:.76rem; line-height:1.5;
    color:rgba(255,255,255,.45);
}
.dasha-origin b { color:var(--gold); font-weight:600; opacity:.85; }

@media (max-width:430px){
    .dasha-main    { font-size:1.32rem; }
    .dasha-k       { min-width:92px; font-size:.62rem; }
    .dasha-line    { font-size:.8rem; gap:.45rem; }
    .dasha-tl-dates{ font-size:.7rem; }
}